From 7afbc990ffe5b8429ecfce79538e5249f1a6b0ea Mon Sep 17 00:00:00 2001
From: Patrick Martin <me@psm.pm>
Date: Wed, 1 May 2024 21:27:40 -0400
Subject: [PATCH] uwu+sidebarfix

---
 src/components/Sidebar.astro | 139 +++++++++++++++++++----------------
 src/layouts/Base.astro       |  18 ++++-
 src/pages/index.astro        |   7 +-
 src/styles/style.css         |  17 +++--
 4 files changed, 105 insertions(+), 76 deletions(-)

diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 0d71138..e7509c6 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -1,22 +1,20 @@
 ---
-
-
 const sectionlist = {
-	"introduction": {
-		name: "Introduction"
+	introduction: {
+		name: "Introduction",
 	},
-	"reactivity": {
-		name: "Reactivity"
+	reactivity: {
+		name: "Reactivity",
 	},
-	"components": {
-		name: "Components"
+	components: {
+		name: "Components",
 	},
-	"css": {
-			name: "CSS"
+	css: {
+		name: "CSS",
 	},
-}
+};
 
-const sections = {}
+const sections = {};
 
 let globs = await Astro.glob("pages/**/*.(md|mdx)");
 
@@ -29,16 +27,20 @@ for (let glob of globs) {
 }
 
 for (let section in sections) {
-	let glob = sections[section]
-	sections[section] = glob.sort((a, b) => a.frontmatter.order - b.frontmatter.order)
-	.map(({ getHeadings, url }) => {
-				return {
-					headings: getHeadings(),
-					url,
-					active: Astro.url.pathname === url
-				};
-			})
-	}
+	let glob = sections[section];
+	sections[section] = glob
+		.sort((a, b) => a.frontmatter.order - b.frontmatter.order)
+		.map(({ getHeadings, url }) => {
+			return {
+				headings: getHeadings(),
+				url,
+				active: Astro.url.pathname === url,
+			};
+		});
+}
+
+import { Icon } from "astro-icon/components";
+const UntypedIcon = Icon as any;
 ---
 
 <input type="checkbox" id="sidebar" />
@@ -57,37 +59,33 @@ for (let section in sections) {
 					fill="currentColor"></path>
 			</svg>
 		</label>
-		<home>
-			<img src="/logo.svg" alt="dreamland" />
-			<h2><a href="/">dreamland</a></h2>
-		</home>
+		<a href="/">
+			<img src="/logo.svg" alt="dreamland" class="uwuhide" />
+			<h2 class="uwuhide">dreamland</h2>
+			<UntypedIcon class="uwushow" name="uwu" width="100%" height={undefined} alt="dreamland.js" />
+		</a>
 		<a href="/learn" class:list={[Astro.url.pathname == "/learn" && "active"]}>Getting Started</a>
 		{
-		Object.entries(sectionlist)
-			.map(([section, { name }]) => (
-
-	<>
-		<h3>{name}</h3>
-		{
-			sections[section].map(({ url, headings: [title, ...headings], active }) => (
+			Object.entries(sectionlist).map(([section, { name }]) => (
 				<>
-					<a href={url || "/"} class:list={[{ active }]}>
-						{title.text}
-					</a>
-					{active &&
-						headings
-							.filter((heading) => heading.depth == 2)
-							.map((heading) => (
-								<a href={url + "#" + heading.slug} class="sub">
-									{heading.text}
-								</a>
-							))}
+					<h3>{name}</h3>
+					{sections[section].map(({ url, headings: [title, ...headings], active }) => (
+						<>
+							<a href={url || "/"} class:list={[{ active }]}>
+								{title.text}
+							</a>
+							{active &&
+								headings
+									.filter((heading) => heading.depth == 2)
+									.map((heading) => (
+										<a href={url + "#" + heading.slug} class="sub">
+											{heading.text}
+										</a>
+									))}
+						</>
+					))}
 				</>
-))
-		}
-	</>
-))
-
+			))
 		}
 	</nav>
 </aside>
@@ -137,7 +135,7 @@ for (let section in sections) {
 	}
 	aside {
 		z-index: 1;
-		width: 15rem;
+		width: 16rem;
 		height: 100vh;
 		flex-shrink: 0;
 		@media (max-width: 64rem) {
@@ -148,13 +146,14 @@ for (let section in sections) {
 		display: flex;
 		flex-direction: column;
 		width: inherit;
-		border-right: thin solid var(--bd);
 		padding-left: 1rem;
 		margin: 12px 0;
 		position: fixed;
 		background-color: var(--bg);
 		top: 0;
 		bottom: 0;
+		overflow-y: scroll;
+		overflow-x: hidden;
 		@media (max-width: 64rem) {
 			margin: 0;
 			right: 100%;
@@ -163,11 +162,19 @@ for (let section in sections) {
 				transform: translateX(100%);
 			}
 		}
+		&::after {
+			content: "";
+			position: absolute;
+			width: 1px;
+			height: 100%;
+			background-color: var(--bd);
+			right: 0;
+			z-index: -1;
+		}
 		a {
 			color: currentColor;
 			text-decoration: none;
 			position: relative;
-			overflow: hidden;
 			margin-right: -1px;
 			&.sub {
 				margin-left: 0.75rem;
@@ -186,7 +193,7 @@ for (let section in sections) {
 					border-top: thin solid transparent;
 					border-right: thin solid transparent;
 					top: 50%;
-					right: -1px;
+					right: 1px;
 					transform: translate(50%, -50%) rotate(45deg);
 					view-transition-name: pointer;
 					@media (max-width: 64rem) {
@@ -196,6 +203,9 @@ for (let section in sections) {
 				}
 			}
 		}
+		h3 {
+			margin: 0.5rem 0;
+		}
 		> a {
 			padding: 0.25rem 0;
 			padding-left: 0.75rem;
@@ -203,23 +213,26 @@ for (let section in sections) {
 			&:hover {
 				text-decoration: underline;
 			}
-		}
-		> home {
 			display: flex;
 			align-items: center;
 			gap: 1rem;
-			> img {
+			h2 {
+				color: white;
+			}
+			&:first-of-type {
+				padding: 0;
+				text-decoration: none;
+			}
+			img {
 				width: 2.5rem;
 				height: 2.5rem;
 				margin: 0.5rem 0;
 			}
-		}
-
-		> home + a {
-			padding: 0;
-		}
-		> h3 {
-			/* border-left: thin solid var(--bd); */
+			svg {
+				margin-top: 1rem;
+				margin-right: 1rem;
+				margin-bottom: 1rem;
+			}
 		}
 	}
 </style>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 3f128b2..d9377a4 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -25,7 +25,23 @@ import "styles/style.css";
 		<title>{title}</title>
 		<ViewTransitions />
 		<script>
-			if (new URLSearchParams(document.location.search).has("uwu")) document.body.classList.add("uwu");
+			function uwu() {
+				if (
+					new URLSearchParams(document.location.search).has("uwu") &&
+					!document.body.classList.contains("uwu")
+				) {
+					document.body.classList.add("uwu");
+					Array.from(document.getElementsByTagName("a")).forEach((a) => {
+						const url = new URL(a.href, new URL(document.location.toString()));
+						if (url.origin == document.location.origin) {
+							url.searchParams.set("uwu", "");
+							a.href = url.href;
+						}
+					});
+				}
+			}
+			document.addEventListener("astro:page-load", uwu);
+			uwu();
 		</script>
 	</head>
 	<body>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 44a225d..cf36e3a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,9 +7,9 @@ const UntypedIcon = Icon as any;
 
 <Base title="dreamland.js">
 	<div id="hero">
-		<img src="/logo.png" width="144" height="144" />
-		<h1>dreamland.js</h1>
-		<UntypedIcon name="uwu" width="24rem" height={undefined} alt="dreamland.js" />
+		<img src="/logo.png" width="144" height="144" class="uwuhide" />
+		<h1 class="uwuhide">dreamland.js</h1>
+		<UntypedIcon class="uwushow" name="uwu" width="24rem" height={undefined} alt="dreamland.js" />
 		<p>A utilitarian framework for creating simple UI in javascript</p>
 	</div>
 
@@ -108,7 +108,6 @@ document.body.appendChild(root);
 			}
 			svg {
 				margin-top: 2rem;
-				display: none;
 			}
 		}
 
diff --git a/src/styles/style.css b/src/styles/style.css
index c48ebc0..eed9dbf 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -44,14 +44,15 @@ main {
 	background-color: #201d20 !important;
 }
 
+.uwushow {
+	display: none;
+}
+
 .uwu {
-	#hero {
-		img,
-		h1 {
-			display: none;
-		}
-		svg {
-			display: block !important;
-		}
+	.uwuhide {
+		display: none;
+	}
+	.uwushow {
+		display: block !important;
 	}
 }