added guides to webpage

2026-04-19 22:05:16 +00:00 · 2025-12-17 09:09:50 -07:00 · 2025-12-17 09:09:50 -07:00 · 8fe507e07c
commit 8fe507e07c
parent 5c45887c0b
5 changed files with 488 additions and 36 deletions
--- a/docs/.vite/deps/_metadata.json
+++ b/docs/.vite/deps/_metadata.json
@ -0,0 +1,8 @@
+{
+  "hash": "8669d4c6",
+  "configHash": "774002d2",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "57587336",
+  "optimized": {},
+  "chunks": {}
+}
--- a/docs/.vite/deps/package.json
+++ b/docs/.vite/deps/package.json
@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
--- a/docs/better-guide/guide.html
+++ b/docs/better-guide/guide.html
@ -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,
+                    `![$1](${basePath}$2)`,
+                );
+
+                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>${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>
--- a/docs/index.html
+++ b/docs/index.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>
--- a/docs/style.css
+++ b/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;
+    }
+}