mirror of
https://github.com/System-End/riceathon.git
synced 2026-04-19 19:45:17 +00:00
190 lines
6.7 KiB
HTML
190 lines
6.7 KiB
HTML
<!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"
|
|
/>
|
|
<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>
|
|
const guides = {
|
|
1: {
|
|
file: "./part-1/content.html",
|
|
title: "Part 1: Installing Linux",
|
|
},
|
|
2: {
|
|
file: "./part-2/content.html",
|
|
title: "Part 2: Additional Packages",
|
|
},
|
|
3: {
|
|
file: "./part-3/content.html",
|
|
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";
|
|
}
|
|
}
|
|
|
|
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 content = await response.text();
|
|
|
|
contentEl.innerHTML = content;
|
|
|
|
document.querySelectorAll("pre code[class*='language-']").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>
|