refactor: css colors

package.json

@@ -17,6 +17,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.6.3",
     "codejar": "^4.2.0",
+    "lucide-astro": "^0.471.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vitest": "^1.5.0"

public/css/colors.css

@@ -0,0 +1,33 @@
+/* general site colors */
+:root {
+  /* dark */
+  --c-bg-dark: #09090b;
+  --c-text-dark: #fafafa;
+  --c-border-1-dark: #3f3f46;
+  --c-text-2-dark: white;
+  --c-primary-dark: #884b6a;
+  --c-purple-dark: #7f669d;
+  --c-purple-light-dark: #ba94d1;
+  --c-box-shadow-dark: #fbfacd;
+  --c-pink-dark: #ae508d;
+  --c-link-dark: #38bdf8;
+  --c-nav-bg-dark: rgb(9, 9, 11, 0.9);
+  --c-secondary-dark: rgba(136, 75, 106, 0.5);
+
+  /* light */
+  --c-bg-light: rgb(255, 253, 255);
+  --c-text-light: #121212;
+  --c-text-2-light: black;
+  --c-purple-light: #374259;
+  --c-purple-light-light: #ba94d1;
+  --c-box-shadow-light: #374259;
+  --c-primary-light: rgb(255, 180, 180);
+  --c-pink-light: #374259;
+  --c-link-light: #0284c7;
+  --c-border-1-light: #909090;
+  --c-nav-bg-light: rgb(255, 247, 255, 0.5);
+  --c-secondary-light: rgba(255, 255, 240, 0.5);
+}
+
+/* code snippets colors */
+

public/css/global.css

@@ -31,38 +31,67 @@
 [x-cloak] { display: none !important; }
 
 :root {
-  --c-bg: #121212;
+  --c-bg: var(--c-bg-dark);
-  --c-text: rgb(200, 200, 200);
+  --c-text: var(--c-text-dark);
-  --c-text-2: white;
+  --c-border-1: var(--c-border-1-dark);
-  --c-primary: #884b6a;
+  --c-text-2: var(--c-text-2-dark);
-  --c-purple: #7f669d;
+  --c-primary: var(--c-primary-dark);
-  --c-purple-light: #ba94d1;
+  --c-purple: var(--c-purple-dark);
-  --c-box-shadow: #fbfacd;
+  --c-purple-dark: var(--c-purple-light-dark);
-  --c-pink: #ae508d;
+  --c-box-shadow: var(--c-box-shadow-dark);
-  --c-link: #38bdf8;
+  --c-pink: var(--c-pink-dark);
-
+  --c-link: var(--c-link-dark);
-  --c-nav-bg: rgb(18, 18, 18, 0.5);
+  --c-nav-bg: var(--c-nav-bg-dark);
-  --c-secondary: rgba(136, 75, 106, 0.5);
+  --c-secondary: var(--c-secondary-dark);
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    --c-bg: rgb(255, 253, 255);
+    --c-bg: var(--c-bg-light);
-    --c-text: #121212;
+    --c-text: var(--c-text-light);
-    --c-text-2: black;
+    --c-text-2: var(--c-text-2-light);
-    --c-purple: #374259;
+    --c-purple: var(--c-purple-light);
-    --c-purple-light: #ba94d1;
+    --c-purple-light: var(--c-purple-light-light);
-    --c-box-shadow: #374259;
+    --c-box-shadow: var(--c-box-shadow-light);
-    --c-primary: rgb(255, 180, 180);
+    --c-primary: var(--c-primary-light);
-    --c-pink: #374259;
+    --c-pink: var(--c-pink-light);
-    --c-link: #0284c7;
+    --c-link: var(--c-link-light);
-    --c-border-1: #909090;
+    --c-border-1: var(--c-border-1-light);
-
+    --c-nav-bg: var(--c-nav-bg-light);
-    --c-nav-bg: rgb(255, 247, 255, 0.5);
+    --c-secondary: var(--c-secondary-light);
-    --c-secondary: rgba(255, 255, 240, 0.5);
   }
 }
 
+body.dark {
+  --c-bg: var(--c-bg-dark);
+  --c-text: var(--c-text-dark);
+  --c-border-1: var(--c-border-1-dark);
+  --c-text-2: var(--c-text-2-dark);
+  --c-primary: var(--c-primary-dark);
+  --c-purple: var(--c-purple-dark);
+  --c-purple-dark: var(--c-purple-light-dark);
+  --c-box-shadow: var(--c-box-shadow-dark);
+  --c-pink: var(--c-pink-dark);
+  --c-link: var(--c-link-dark);
+  --c-nav-bg: var(--c-nav-bg-dark);
+  --c-secondary: var(--c-secondary-dark);
+}
+
+body.light {
+    --c-bg: var(--c-bg-light);
+    --c-text: var(--c-text-light);
+    --c-text-2: var(--c-text-2-light);
+    --c-purple: var(--c-purple-light);
+    --c-purple-light: var(--c-purple-light-light);
+    --c-box-shadow: var(--c-box-shadow-light);
+    --c-primary: var(--c-primary-light);
+    --c-pink: var(--c-pink-light);
+    --c-link: var(--c-link-light);
+    --c-border-1: var(--c-border-1-light);
+    --c-nav-bg: var(--c-nav-bg-light);
+    --c-secondary: var(--c-secondary-light);
+}
+
 html {
   font-size: 16px;
 }

public/css/xcode-colors.css

@@ -1,7 +1,7 @@
 /* colors from: https://raw.githubusercontent.com/WhiteVermouth/XcodeTheme/master/assets/color-palette.png */
 :root {
-  --code-theme-color: #dedede;
+  --code-theme-color: #f4f4f5;
-  --code-theme-bg-color: #1f1f24;
+  --code-theme-bg-color: #18181b;
   --code-theme-bg-color_selection: #515b70;
   --code-theme-color_selection: inherit;
 

src/components/Navbar.astro

@@ -1,21 +1,31 @@
 ---
+import { Sun, Moon, Laptop } from "lucide-astro";
+
 const { showSidebarButton = true, version = "latest" } = Astro.props;
 ---
 
 <nav
-	class="fixed w-full top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20"
+	class="fixed w-full top-0 h-12 border-b border-c-border-1 bg-c-nav-bg backdrop-blur-md z-20"
 >
-	<div class="container mx-auto h-full w-full flex items-center">
+	<div class="container mx-auto h-full w-full grid grid-cols-[auto_3rem]">
+		<div class="flex items-center">
 			{
 				showSidebarButton && (
-				<button id="sidebar-toggle" class="w-10 h-full lg:hidden">
+					<button
+						id="sidebar-toggle"
+						class="w-10 h-full lg:hidden"
+					>
 						<i class="ph-bold ph-list text-xl inline-block" />
 					</button>
 				)
 			}
 
 			<a href="/" class="px-4 flex gap-2 items-center">
-			<img class="inline-block h-10" src="/img/thp_logo_exp.svg" alt="thp" />
+				<img
+					class="inline-block h-10"
+					src="/img/thp_logo_exp.svg"
+					alt="thp"
+				/>
 			</a>
 			<a
 				href={`/en/${version}/learn/`}
@@ -36,6 +46,9 @@ const { showSidebarButton = true, version = "latest" } = Astro.props;
 				Language spec
 			</a>
 		</div>
+
+		<div class="flex items-center"></div>
+	</div>
 </nav>
 
 <script>
@@ -52,7 +65,9 @@ const { showSidebarButton = true, version = "latest" } = Astro.props;
 
 		sidebarToggle.addEventListener("click", () => {
 			sidebar.classList.toggle("-translate-x-64");
-			console.log(sidebar.classList.contains("-translate-x-64"));
+			console.log(
+				sidebar.classList.contains("-translate-x-64"),
+			);
 		});
 	});
 </script>

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/BaseLayout.astro

@@ -6,9 +6,13 @@ const { title } = Astro.props;
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0"
+		/>
 		<title>{title ?? "THP: Typed Hypertext Processor"}</title>
 
+		<link rel="stylesheet" href="/css/colors.css" />
 		<link rel="stylesheet" href="/css/global.css" />
 		<link rel="stylesheet" href="/css/pages.css" />
 		<link rel="stylesheet" href="/css/xcode-colors.css" />
@@ -22,13 +26,21 @@ const { title } = Astro.props;
 		<link rel="icon" href="/favicon.ico" />
 
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			rel="preconnect"
+			href="https://fonts.gstatic.com"
+			crossorigin
+		/>
 		<link
 			href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 			rel="stylesheet"
 		/>
 
-		<script src="//unpkg.com/alpinejs" defer></script>
+		<script src="//unpkg.com/alpinejs" defer is:inline></script>
+		<script
+			src="https://unpkg.com/hyperscript.org@0.9.13"
+			defer
+			is:inline></script>
 	</head>
 
 	<body class="bg-c-bg text-c-text">
@@ -37,7 +49,10 @@ const { title } = Astro.props;
 		<script src="/js/alpine-3.14.0.min.js" defer></script>
 		<script>
 			import { highlightOnDom } from "./thpHighlighter";
-			document.addEventListener("DOMContentLoaded", highlightOnDom);
+			document.addEventListener(
+				"DOMContentLoaded",
+				highlightOnDom,
+			);
 		</script>
 	</body>
 </html>

src/layouts/NewDocsLayout.astro

@@ -52,7 +52,9 @@ const posts_2 = posts
 		// being `/spec/ast/tokens` would be `/ast/tokens`
 		path: post.url.substring(base_len),
 	}))
-	.sort((p1, p2) => (p1.frontmatter.order > p2.frontmatter.order ? 1 : -1));
+	.sort((p1, p2) =>
+		p1.frontmatter.order > p2.frontmatter.order ? 1 : -1,
+	);
 
 // build a hierarchy of the files
 const second_level: Record<string, Array<AstroFile>> = {
@@ -127,13 +129,20 @@ const rc = url_components[1] ?? "";
 			class="pt-12 h-screen lg:sticky top-0 fixed z-10 bg-c-bg w-60 lg:w-auto border-r-2 lg:border-0
                 border-c-border-1 -translate-x-64 lg:translate-x-0 transition-transform"
 		>
-			<nav class="py-4 pr-2 overflow-x-scroll h-[calc(100vh-3rem)]">
+			<nav
-				<div class="mb-2 relative" x-data="{open: false}">
+				class="py-4 pr-2 overflow-x-scroll h-[calc(100vh-3rem)] border-r border-c-border-1"
+			>
+				<div
+					class="mb-2 relative"
+					x-data="{open: false}"
+				>
 					<button
 						class="bg-c-bg text-c-text border border-c-primary rounded px-3 w-full font-mono mt-2 flex items-center hover:dark:bg-zinc-800 transition-colors cursor-pointer text-left"
 						@click="open = !open"
 					>
-						<span class="inline-block w-full">
+						<span
+							class="inline-block w-full"
+						>
 							{version}
 						</span>
 						<svg
@@ -157,14 +166,18 @@ const rc = url_components[1] ?? "";
 							class="absolute top-0 w-full bg-c-bg border border-c-primary rounded"
 						>
 							{
-								versions.map((x) => (
+								versions.map(
+									(x) => (
 										<a
 											class="px-3 py-1 hover:dark:bg-zinc-800 transition-colors font-mono inline-block w-full text-left"
 											href={`${lc}${x}${rc}`}
 										>
-										{x}
+											{
+												x
+											}
 										</a>
-								))
+									),
+								)
 							}
 						</div>
 					</div>
@@ -172,7 +185,11 @@ const rc = url_components[1] ?? "";
 
 				<hr class="my-6" />
 
-				{entries.map((entry) => <Sidebar entry={entry} />)}
+				{
+					entries.map((entry) => (
+						<Sidebar entry={entry} />
+					))
+				}
 			</nav>
 		</div>
 
@@ -186,7 +203,9 @@ const rc = url_components[1] ?? "";
 			class="lg:pt-12 hidden lg:block pt-4 max-h-screen overflow-x-scroll sticky top-0"
 		>
 			<nav class="rounded-md lg:mt-10">
-				<h2 class="font-display font-medium pb-2 text-c-text-2">
+				<h2
+					class="font-display font-medium pb-2 text-c-text-2"
+				>
 					On this page
 				</h2>
 

src/pages/index.astro

@@ -45,8 +45,9 @@ const [thp_html] = await native_highlighter(
 					compiled to PHP
 				</h1>
 				<p class="text-c-text text-lg pt-6 lg:pr-12">
-					Inspired by Rust, Zig and Kotlin, THP has a modern syntax, semantics,
+					Inspired by Rust, Zig and Kotlin, THP
-					type system and stdlib.
+					has a modern syntax, semantics, type
+					system and stdlib.
 				</p>
 				<div class="text-center pb-4">
 					<a
@@ -85,32 +86,42 @@ const [thp_html] = await native_highlighter(
 						height="14"
 						viewBox="0 0 54 14"
 					>
-						<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+						<g
+							fill="none"
+							fill-rule="evenodd"
+							transform="translate(1 1)"
+						>
 							<circle
 								cx="6"
 								cy="6"
 								r="6"
 								fill="#FF5F56"
 								stroke="#E0443E"
-								stroke-width=".5"></circle>
+								stroke-width=".5"
+							></circle>
 							<circle
 								cx="26"
 								cy="6"
 								r="6"
 								fill="#FFBD2E"
 								stroke="#DEA123"
-								stroke-width=".5"></circle>
+								stroke-width=".5"
+							></circle>
 							<circle
 								cx="46"
 								cy="6"
 								r="6"
 								fill="#27C93F"
 								stroke="#1AAB29"
-								stroke-width=".5"></circle>
+								stroke-width=".5"
+							></circle>
 						</g>
 					</svg>
 					<div class="h-1"></div>
-					<div id="editor" class="font-mono language-thp">
+					<div
+						id="editor"
+						class="font-mono language-thp"
+					>
 						<pre set:html={thp_html} />
 					</div>
 				</div>
@@ -140,8 +151,8 @@ const [thp_html] = await native_highlighter(
     val result = mock() as String
     `}
 	>
-		Type safety is enforced at compile time. Everything has a specific type.
+		Type safety is enforced at compile time. Everything has a
-		There is no `mixed`.
+		specific type. There is no `mixed`.
 		<br />
 		<br />
 		You can use generics where neccesary.
@@ -195,8 +206,8 @@ const [thp_html] = await native_highlighter(
     }
     `}
 	>
-		Nulls are explicit and require handling. Types can be nullable, and they
+		Nulls are explicit and require handling. Types can be nullable,
-		must be checked before usage.
+		and they must be checked before usage.
 		<br />
 		The stdlib makes extensive use of them.
 	</HeroSection>