mirror of
https://github.com/System-End/riceathon.git
synced 2026-04-19 19:45:17 +00:00
Fix merge conflicts and merge with upstream
This commit is contained in:
some1
commit
e748e220b8
6 changed files with 489 additions and 37 deletions
|
|
@ -25,7 +25,7 @@ See the basics of ricing [here](https://jie-fang.github.io/blog/basics-of-ricing
|
|||
4. Submit the form to us
|
||||
5. Get sent a prize of your choice!
|
||||
|
||||
_prizes include smolhaj, hackclub socks, and thigh highs_
|
||||
_prizes include smolhaj,hacker socks, hc merch and much more_
|
||||
|
||||
In the form, you will need to put the email to your Slack account.
|
||||
This email must be linked to your hakatime in order for it to count.
|
||||
|
|
|
|||
8
docs/.vite/deps/_metadata.json
Normal file
8
docs/.vite/deps/_metadata.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"hash": "8669d4c6",
|
||||
"configHash": "774002d2",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "57587336",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
3
docs/.vite/deps/package.json
Normal file
3
docs/.vite/deps/package.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"type": "module"
|
||||
}
|
||||
229
docs/better-guide/guide.html
Normal file
229
docs/better-guide/guide.html
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Riceathon Guide</title>
|
||||
<link rel="stylesheet" href="https://css.hackclub.com/theme.css" />
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta property="og:title" content="Riceathon Guide" />
|
||||
<meta name="twitter:title" content="Riceathon Guide" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Learn how to rice your Linux desktop"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
|
||||
/>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="banner" target="_blank" href="https://hackclub.com/">
|
||||
<img src="../images/flag-orpheus-top.png" />
|
||||
</a>
|
||||
|
||||
<header class="guide-header">
|
||||
<a href="../" class="back-link">← Back to Home</a>
|
||||
<h1 class="title">Ricing Guide</h1>
|
||||
</header>
|
||||
|
||||
<div class="guide-layout">
|
||||
<nav class="guide-nav">
|
||||
<h3>Contents</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="?part=1" class="nav-link" data-part="1"
|
||||
>Part 1: Installing Linux</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="?part=2" class="nav-link" data-part="2"
|
||||
>Part 2: Additional Packages</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="?part=3" class="nav-link" data-part="3"
|
||||
>Part 3: Ricing Your Desktop</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Resources</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://wiki.archlinux.org" target="_blank"
|
||||
>Arch Wiki</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.reddit.com/r/unixporn/"
|
||||
target="_blank"
|
||||
>r/unixporn</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/fosslife/awesome-ricing"
|
||||
target="_blank"
|
||||
>awesome-ricing</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main class="guide-content">
|
||||
<div id="markdown-content">
|
||||
<p>Loading guide...</p>
|
||||
</div>
|
||||
|
||||
<div class="guide-pagination">
|
||||
<a
|
||||
href="#"
|
||||
id="prev-btn"
|
||||
class="pagination-btn"
|
||||
style="visibility: hidden"
|
||||
>← Previous</a
|
||||
>
|
||||
<a href="#" id="next-btn" class="pagination-btn">Next →</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
});
|
||||
|
||||
const guides = {
|
||||
1: {
|
||||
file: "./part-1/en-US.md",
|
||||
title: "Part 1: Installing Linux",
|
||||
},
|
||||
2: {
|
||||
file: "./part-2/en-US.md",
|
||||
title: "Part 2: Additional Packages",
|
||||
},
|
||||
3: {
|
||||
file: "./part-3/en-US.md",
|
||||
title: "Part 3: Ricing Your Desktop",
|
||||
},
|
||||
};
|
||||
|
||||
function getPartFromURL() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const part = parseInt(params.get("part")) || 1;
|
||||
return Math.min(Math.max(part, 1), 3);
|
||||
}
|
||||
|
||||
function updateNavigation(part) {
|
||||
document.querySelectorAll(".nav-link").forEach((link) => {
|
||||
link.classList.remove("active");
|
||||
if (parseInt(link.dataset.part) === part) {
|
||||
link.classList.add("active");
|
||||
}
|
||||
});
|
||||
|
||||
const prevBtn = document.getElementById("prev-btn");
|
||||
const nextBtn = document.getElementById("next-btn");
|
||||
|
||||
if (part > 1) {
|
||||
prevBtn.style.visibility = "visible";
|
||||
prevBtn.href = `?part=${part - 1}`;
|
||||
} else {
|
||||
prevBtn.style.visibility = "hidden";
|
||||
}
|
||||
|
||||
if (part < 3) {
|
||||
nextBtn.style.visibility = "visible";
|
||||
nextBtn.href = `?part=${part + 1}`;
|
||||
} else {
|
||||
nextBtn.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
function processMarkdown(md, basePath) {
|
||||
md = md.replace(
|
||||
/!\[([^\]]*)\]\(\.\/([^)]+)\)/g,
|
||||
``,
|
||||
);
|
||||
|
||||
md = md.replace(
|
||||
/>\s*\[!(IMPORTANT|CAUTION|TIP|NOTE|WARNING)\]\s*\n((?:>.*\n?)*)/g,
|
||||
(match, type, content) => {
|
||||
const cleanContent = content
|
||||
.replace(/^>\s*/gm, "")
|
||||
.trim();
|
||||
const icons = {
|
||||
IMPORTANT: "ℹ️",
|
||||
CAUTION: "⚠️",
|
||||
TIP: "💡",
|
||||
NOTE: "📝",
|
||||
WARNING: "⚠️",
|
||||
};
|
||||
return `<div class="alert alert-${type.toLowerCase()}"><strong>${icons[type]} ${type}</strong><br>${marked.parse(cleanContent)}</div>\n`;
|
||||
},
|
||||
);
|
||||
|
||||
md = md.replace(
|
||||
/\[([^\]]+)\]\(\.\.\/part-(\d)\/en-US\.md\)/g,
|
||||
"[$1](?part=$2)",
|
||||
);
|
||||
|
||||
return md;
|
||||
}
|
||||
|
||||
async function loadGuide(part) {
|
||||
const guide = guides[part];
|
||||
if (!guide) return;
|
||||
|
||||
const contentEl = document.getElementById("markdown-content");
|
||||
contentEl.innerHTML = "<p>Loading guide...</p>";
|
||||
|
||||
try {
|
||||
const response = await fetch(guide.file);
|
||||
if (!response.ok) throw new Error("Failed to load guide");
|
||||
|
||||
let markdown = await response.text();
|
||||
const basePath = guide.file.replace("en-US.md", "");
|
||||
markdown = processMarkdown(markdown, basePath);
|
||||
|
||||
contentEl.innerHTML = marked.parse(markdown);
|
||||
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
updateNavigation(part);
|
||||
} catch (error) {
|
||||
contentEl.innerHTML = `<p class="error">Failed to load guide. Please try again.</p>`;
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
const link = e.target.closest('a[href^="?part="]');
|
||||
if (link) {
|
||||
e.preventDefault();
|
||||
const part = parseInt(
|
||||
new URLSearchParams(link.getAttribute("href")).get(
|
||||
"part",
|
||||
),
|
||||
);
|
||||
history.pushState({}, "", `?part=${part}`);
|
||||
loadGuide(part);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("popstate", () => {
|
||||
loadGuide(getPartFromURL());
|
||||
});
|
||||
|
||||
loadGuide(getPartFromURL());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -24,6 +24,8 @@
|
|||
<h1 class="ultratitle">Riceathon</h1>
|
||||
<p class="headline">A Hack Club YSWS where you can rice your Linux desktop and submit your dotfiles to get free
|
||||
programmer socks</p>
|
||||
<a href="./better-guide/guide.html" class="guide-btn">Start the Guide</a>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<div class="container blurb">
|
||||
|
|
@ -58,7 +60,7 @@
|
|||
<div class="card container">
|
||||
<h2 class="headline">When does it end?</h2>
|
||||
<p>
|
||||
V1 ended on January 10th, v2 ends on june 22!
|
||||
V3 will end on TBD
|
||||
</p>
|
||||
</div>
|
||||
<div class="card container">
|
||||
|
|
@ -79,4 +81,4 @@
|
|||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
278
docs/style.css
278
docs/style.css
|
|
@ -1,67 +1,277 @@
|
|||
/* Delete these styles and add your own styles here! */
|
||||
|
||||
body {
|
||||
font-size: var(--font-3);
|
||||
font-size: var(--font-3);
|
||||
}
|
||||
|
||||
header {
|
||||
background: var(--purple);
|
||||
color: var(--white);
|
||||
padding: var(--spacing-6) var(--spacing-0) var(--spacing-6);
|
||||
text-align: center;
|
||||
background: var(--purple);
|
||||
color: var(--white);
|
||||
padding: var(--spacing-6) var(--spacing-0) var(--spacing-6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: var(--spacing-4);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: var(--spacing-4);
|
||||
}
|
||||
|
||||
.banner img {
|
||||
height: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.banner:hover img {
|
||||
animation: wave-flag 0.5s linear infinite alternate;
|
||||
animation: wave-flag 0.5s linear infinite alternate;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.banner:hover img {
|
||||
transition: 0.1875s cubic-bezier(0.375, 0, 0.675, 1) transform;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.banner:hover img {
|
||||
transition: 0.1875s cubic-bezier(0.375, 0, 0.675, 1) transform;
|
||||
transform-origin: top left;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-flag {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
}
|
||||
|
||||
header > p, header > p > a{
|
||||
color: var(--white)!important;
|
||||
header > p,
|
||||
header > p > a {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: var(--spacing-4) auto;
|
||||
margin: var(--spacing-4) auto;
|
||||
}
|
||||
|
||||
.blurb {
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radii-default);
|
||||
font-size: var(--font-4);
|
||||
padding: var(--spacing-4);
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radii-default);
|
||||
font-size: var(--font-4);
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: var(--spacing-4);
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.tiny-img {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.guide-btn {
|
||||
display: inline-block;
|
||||
margin-top: var(--spacing-4);
|
||||
background: var(--white);
|
||||
color: var(--purple);
|
||||
padding: var(--spacing-3) var(--spacing-5);
|
||||
border-radius: 50px;
|
||||
font-size: var(--font-3);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.guide-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.guide-header {
|
||||
padding: var(--spacing-4) var(--spacing-6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.guide-header .title {
|
||||
margin: 0;
|
||||
font-size: var(--font-5);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.guide-layout {
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: var(--spacing-4);
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.guide-nav {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: var(--spacing-4);
|
||||
height: fit-content;
|
||||
background: var(--smoke);
|
||||
border-radius: var(--radii-default);
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.guide-nav h3 {
|
||||
margin: 0 0 var(--spacing-2) 0;
|
||||
font-size: var(--font-3);
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.guide-nav h3:not(:first-child) {
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
|
||||
.guide-nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.guide-nav li {
|
||||
margin: var(--spacing-1) 0;
|
||||
}
|
||||
|
||||
.guide-nav a {
|
||||
display: block;
|
||||
padding: var(--spacing-2);
|
||||
border-radius: var(--radii-default);
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.guide-nav a:hover,
|
||||
.guide-nav a.active {
|
||||
background: var(--purple);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.guide-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--white);
|
||||
border-radius: var(--radii-default);
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
|
||||
.guide-content img {
|
||||
max-width: 100%;
|
||||
border-radius: var(--radii-default);
|
||||
margin: var(--spacing-3) 0;
|
||||
}
|
||||
|
||||
.guide-content pre {
|
||||
background: #1e1e1e;
|
||||
border-radius: var(--radii-default);
|
||||
padding: var(--spacing-3);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.guide-content code {
|
||||
font-family: "Fira Code", "Consolas", monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.guide-content :not(pre) > code {
|
||||
background: var(--smoke);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.guide-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: var(--spacing-3) 0;
|
||||
}
|
||||
|
||||
.guide-content th,
|
||||
.guide-content td {
|
||||
border: 1px solid var(--border);
|
||||
padding: var(--spacing-2);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.guide-content th {
|
||||
background: var(--smoke);
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: var(--spacing-3);
|
||||
border-radius: var(--radii-default);
|
||||
margin: var(--spacing-3) 0;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.alert-important {
|
||||
background: #e3f2fd;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
.alert-caution,
|
||||
.alert-warning {
|
||||
background: #fff3e0;
|
||||
border-color: #ff9800;
|
||||
}
|
||||
|
||||
.alert-tip {
|
||||
background: #e8f5e9;
|
||||
border-color: #4caf50;
|
||||
}
|
||||
|
||||
.alert-note {
|
||||
background: #f3e5f5;
|
||||
border-color: #9c27b0;
|
||||
}
|
||||
|
||||
.guide-pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--spacing-5);
|
||||
padding-top: var(--spacing-4);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
background: var(--purple);
|
||||
color: var(--white);
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
border-radius: var(--radii-default);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pagination-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.guide-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.guide-nav {
|
||||
width: 100%;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.guide-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue