From 40d4735fe91b67f4b64ee3047525c502e3e1528d Mon Sep 17 00:00:00 2001
From: code913 <54856929+code913@users.noreply.github.com>
Date: Fri, 3 Nov 2023 15:46:30 +0000
Subject: [PATCH 1/3] refactor: move header into +layout file

---
 src/lib/Header.svelte     | 113 ------------------------------------
 src/routes/+layout.svelte | 117 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 114 insertions(+), 116 deletions(-)
 delete mode 100644 src/lib/Header.svelte

diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
deleted file mode 100644
index 78b6759..0000000
--- a/src/lib/Header.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-    import "@material/web/iconbutton/outlined-icon-button";
-    import "@material/web/icon/icon";
-
-    let navShown = false;
-</script>
-
-<header>
-    <nav>
-        <a class="brand" href="/">Cursed Creations</a>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <md-outlined-icon-button class="menu" aria-label="Toggle navigation" on:click={(_) => (navShown = !navShown)}>
-            <!-- https://fonts.google.com/icons -->
-            <md-icon><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg></md-icon>
-        </md-outlined-icon-button>
-        <ul class="links" class:shown={navShown}>
-            {#each [["/", "Home"], ["/downloads", "Mods"], ["/wiki", "Wiki"]] as [href, display]}
-                <li><a {href}>{display}</a></li>
-            {/each}
-        </ul>
-    </nav>
-</header>
-
-<style lang="scss">
-    $space: 4ch;
-
-    header {
-        display: contents;
-    }
-
-    nav {
-        display: grid;
-        align-items: center;
-        column-gap: $space;
-        padding: #{$space * 0.5};
-        background: var(--md-sys-color-surface-container-high);
-        min-height: 5svh;
-
-        grid-template: {
-            areas: "brand links .";
-            columns: auto auto 1fr;
-        }
-
-        * {
-            color: var(--md-sys-color-on-surface);
-        }
-
-        a {
-            text-decoration: none;
-
-            &:hover,
-            &:focus,
-            &:focus-within,
-            &:focus-visible {
-                color: var(--md-sys-color-on-surface-variant);
-            }
-        }
-
-        :global(.menu) {
-            display: none;
-        }
-
-        @each $area in ("brand", "menu", "links") {
-            :global(& .#{$area}) {
-                grid-area: unquote($area);
-            }
-        }
-    }
-
-    .brand {
-        font-weight: bolder;
-        font-size: 1.4rem;
-    }
-
-    .menu {
-        justify-self: end;
-    }
-
-    .links {
-        list-style-type: none;
-        display: flex;
-        padding: 0;
-        column-gap: $space;
-
-        li {
-            display: contents;
-        }
-    }
-
-    @media (max-width: 800px) {
-        nav {
-            grid-template: {
-                areas: "brand menu" "links links";
-                columns: 1fr auto;
-                rows: auto min-content;
-            }
-        }
-
-        .menu {
-            display: revert-layer;
-        }
-
-        .links {
-            flex-direction: column;
-            row-gap: #{$space * 0.5};
-
-            &:not(.shown) {
-                display: none;
-            }
-        }
-    }
-</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3eef38c..0d07d5c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,122 @@
 <script>
-    import Header from "$lib/Header.svelte";
+    import "@material/web/iconbutton/outlined-icon-button";
+    import "@material/web/icon/icon";
+
+    let navShown =  false;
 </script>
 
-<Header />
+<header>
+    <nav>
+        <a class="brand" href="/">Cursed Creations</a>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <md-outlined-icon-button aria-label="Toggle navigation" on:click={() => (navShown = !navShown)}>
+            <!-- https://fonts.google.com/icons -->
+            <md-icon
+                ><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg
+                ></md-icon
+            >
+        </md-outlined-icon-button>
+        <ul class="links" class:shown={navShown}>
+            {#each [["/", "Home"], ["/downloads", "Mods"], ["/wiki", "Wiki"]] as [href, display]}
+                <li><a {href}>{display}</a></li>
+            {/each}
+        </ul>
+    </nav>
+</header>
 <main><slot /></main>
 
-<style>
+<style lang="scss">
+    // Code for the navbar
+    $space: 4ch;
+
+    header {
+        display: contents;
+    }
+
+    nav {
+        display: grid;
+        align-items: center;
+        column-gap: $space;
+        padding: #{$space * 0.5};
+        background: var(--md-sys-color-surface-container-high);
+        min-height: 5svh;
+
+        grid-template: {
+            areas: "brand links .";
+            columns: auto auto 1fr;
+        }
+
+        * {
+            color: var(--md-sys-color-on-surface);
+        }
+
+        a {
+            text-decoration: none;
+
+            &:hover,
+            &:focus,
+            &:focus-within,
+            &:focus-visible {
+                color: var(--md-sys-color-on-surface-variant);
+            }
+        }
+
+        @each $area in ("brand", "menu", "links") {
+            :global(& .#{$area}) {
+                grid-area: unquote($area);
+            }
+        }
+    }
+
+    .brand {
+        font-weight: bolder;
+        font-size: 1.4rem;
+        grid-area: brand;
+    }
+
+    md-outlined-icon-button {
+        display: none;
+        justify-self: end;
+        grid-area: menu;
+    }
+
+    .links {
+        list-style-type: none;
+        display: flex;
+        padding: 0;
+        column-gap: $space;
+        grid-area: links;
+
+        li {
+            display: contents;
+        }
+    }
+
+    @media (max-width: 800px) {
+        nav {
+            grid-template: {
+                areas: "brand menu" "links links";
+                columns: 1fr auto;
+                rows: auto min-content;
+            }
+        }
+
+        md-outlined-icon-button {
+            display: revert-layer;
+        }
+
+        .links {
+            flex-direction: column;
+            row-gap: #{$space * 0.5};
+
+            &:not(.shown) {
+                display: none;
+            }
+        }
+    }
+
+    // Code for everything else
     main {
         padding: 2ch;
     }

From db2b4830eba46f51ced16f02445d7b1430ea615a Mon Sep 17 00:00:00 2001
From: code913 <54856929+code913@users.noreply.github.com>
Date: Fri, 3 Nov 2023 15:50:10 +0000
Subject: [PATCH 2/3] fix: typo :skull:

---
 src/routes/downloads/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/downloads/+page.svelte b/src/routes/downloads/+page.svelte
index b1b6408..99511e2 100644
--- a/src/routes/downloads/+page.svelte
+++ b/src/routes/downloads/+page.svelte
@@ -1,5 +1,5 @@
 <svelte:head>
-    <title>Cursed Creations | Mod Downloadd</title>
+    <title>Cursed Creations | Mod Downloads</title>
 </svelte:head>
 
 <h1>Cursed Creations Minecraft Mods</h1>

From 39aca9159dc4024f10f2b6a5d5a66fbb6565c443 Mon Sep 17 00:00:00 2001
From: code913 <54856929+code913@users.noreply.github.com>
Date: Fri, 3 Nov 2023 15:55:13 +0000
Subject: [PATCH 3/3] refactor: add comments everywhere

---
 src/app.html                        | 1 +
 src/routes/+layout.js               | 1 +
 src/routes/+layout.svelte           | 6 +++++-
 src/routes/+page.svelte             | 3 +++
 src/routes/downloads/+layout.svelte | 4 ++++
 src/routes/downloads/+page.svelte   | 2 ++
 svelte.config.js                    | 1 +
 7 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app.html b/src/app.html
index 7d823d3..51dea22 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,3 +1,4 @@
+<!-- HTML boilerplate for every page that gets filled with svelte code -->
 <!DOCTYPE html>
 <html lang="en">
 
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
index c8cacf0..2fa8d0d 100644
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@@ -1 +1,2 @@
+// Tells sveltekit to prerender every page so the static adapter in svelte.config.js can do its job
 export const prerender = true;
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0d07d5c..1302afe 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,11 @@
+<!-- Code that applies to every single page -->
+<!-- <slot /> is a placeholder, it gets replaced by the html of the page currently being viewed -->
+
 <script>
     import "@material/web/iconbutton/outlined-icon-button";
     import "@material/web/icon/icon";
 
-    let navShown =  false;
+    let navShown = false;
 </script>
 
 <header>
@@ -117,6 +120,7 @@
     }
 
     // Code for everything else
+    // :global() means the css applies to all elements in the output html instead of only applying to elements in this file
     main {
         padding: 2ch;
     }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 06ea8a9..0c1e253 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,3 +1,6 @@
+<!-- Homepage at / -->
+<!--  -->
+
 <svelte:head>
     <title>Cursed Creations | Home</title>
 </svelte:head>
diff --git a/src/routes/downloads/+layout.svelte b/src/routes/downloads/+layout.svelte
index 9447a0c..6880fa1 100644
--- a/src/routes/downloads/+layout.svelte
+++ b/src/routes/downloads/+layout.svelte
@@ -1,3 +1,7 @@
+<!-- Code that applies to every page under /downloads -->
+<!-- Refer to src/routes/+layout.svelte for explanation of <slot /> -->
+<!-- The code in that layout file also applies here -->
+
 <slot />
 
 <style>
diff --git a/src/routes/downloads/+page.svelte b/src/routes/downloads/+page.svelte
index 99511e2..b8e3c70 100644
--- a/src/routes/downloads/+page.svelte
+++ b/src/routes/downloads/+page.svelte
@@ -1,3 +1,5 @@
+<!-- Main downloads page at /downloads -->
+
 <svelte:head>
     <title>Cursed Creations | Mod Downloads</title>
 </svelte:head>
diff --git a/svelte.config.js b/svelte.config.js
index 13a4462..dd2eb03 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -3,6 +3,7 @@ import preprocess from "svelte-preprocess";
 
 const config = {
 	kit: {
+		// Tells sveltekit to produce static files to upload to github pages
 		adapter: adapter({
 			pages: "docs",
 			assets: "docs",