feat: add Uses page

src/components/topbar.astro

@@ -0,0 +1,107 @@
+---
+const { pathname } = Astro.url;
+---
+
+<script>
+  const navbarButton = document.getElementById("mobile-navbar-trigger");
+  navbarButton?.addEventListener("click", () => {
+    const navbarContainer = document.getElementById("mobile-navbar-container");
+    navbarContainer?.classList.toggle("hidden");
+    navbarContainer?.classList.toggle("flex");
+  });
+
+  const navbarOverlay = document.getElementById("mobile-navbar-overlay");
+  navbarOverlay?.addEventListener("click", () => {
+    const navbarContainer = document.getElementById("mobile-navbar-container");
+    navbarContainer?.classList.add("hidden");
+    navbarContainer?.classList.remove("flex");
+  });
+</script>
+
+<header class="flex h-16 justify-end tracking-wider md:items-center md:justify-normal">
+  <nav class="mx-20 hidden w-full items-center justify-center md:flex">
+    <ul class="flex w-96 justify-center">
+      <li>
+        <a
+          href="/"
+          rel="prefetch"
+          class:list={[
+            "flex items-center space-x-2 2xl:text-lg bg-gray-900 px-4 py-1.5 border",
+            "2xl:text-lg",
+            "hover:text-amber-500 hover:border-amber-500",
+            { "border-transparent": pathname !== "/" },
+            { "text-amber-500 border-amber-500": pathname === "/" },
+          ]}
+        >
+          <span class="h-2 w-2 bg-amber-500"></span>
+          <span>Home</span>
+        </a>
+      </li>
+      <li>
+        <a
+          href="/uses"
+          rel="prefetch"
+          class:list={[
+            "flex items-center space-x-2 bg-gray-900 px-4 py-1.5 border",
+            "2xl:text-lg",
+            "hover:text-orange-500 hover:border-orange-500",
+            { "border-transparent": !pathname.startsWith("/uses") },
+            { "text-orange-500 border-orange-500": pathname.startsWith("/uses") },
+          ]}
+        >
+          <span class="h-2 w-2 bg-orange-500"></span>
+          <span>Uses</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <button id="mobile-navbar-trigger" type="button" class="my-auto mr-6 p-1 md:hidden">
+    <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"
+      ><path
+        d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"></path></svg
+    >
+  </button>
+  <div id="mobile-navbar-container" class="absolute z-50 hidden h-full w-full flex-col">
+    <div id="mobile-navbar-overlay" class="w-full grow bg-black opacity-90"></div>
+    <nav class="bg-gray-900 py-6">
+      <ul class="space-y-2">
+        <li>
+          <a href="/" class="flex h-16 items-center justify-center space-x-4">
+            <span class:list={["text-2xl", { "text-amber-500": pathname === "/" }]}>Home</span>
+          </a>
+        </li>
+        <li>
+          <a href="/writings" class="flex h-16 items-center justify-center space-x-4">
+            <span class:list={["text-2xl", { "text-indigo-500": pathname.startsWith("/writings") }]}
+              >Writings</span
+            >
+          </a>
+        </li>
+        <li>
+          <a href="/projects" class="flex h-16 items-center justify-center space-x-4">
+            <span class:list={["text-2xl", { "text-green-500": pathname.startsWith("/projects") }]}
+              >Projects</span
+            >
+          </a>
+        </li>
+        <li>
+          <a href="/crafts" class="flex h-16 items-center justify-center space-x-4">
+            <span class:list={["text-2xl", { "text-purple-500": pathname.startsWith("/crafts") }]}
+              >Crafts</span
+            >
+          </a>
+        </li>
+        <li>
+          <a href="/uses" class="flex h-16 items-center justify-center space-x-4">
+            <span class:list={["text-2xl", { "text-orange-500": pathname.startsWith("/uses") }]}
+              >Uses</span
+            >
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>

src/layouts/main.astro

@@ -0,0 +1,85 @@
+---
+import TopBar from "../components/topbar.astro";
+import BaseLayout from "./base.astro";
+
+export type Props = {
+  title: string;
+  withSocials?: boolean;
+};
+
+const props = Astro.props;
+---
+
+<BaseLayout title={props.title}>
+  <TopBar />
+  {
+    (
+      <div
+        class={`fixed bottom-16 left-16 hidden h-16 w-40 ${
+          props.withSocials ? "md:flex md:flex-col md:justify-start" : "md:hidden"
+        }`}
+      >
+        <ul class="mb-4 flex md:space-x-6">
+          <li>
+            <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 15 15"
+                fill="none"
+                class="hover:text-indigo-500"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M1 2C0.447715 2 0 2.44772 0 3V12C0 12.5523 0.447715 13 1 13H14C14.5523 13 15 12.5523 15 12V3C15 2.44772 14.5523 2 14 2H1ZM1 3L14 3V3.92494C13.9174 3.92486 13.8338 3.94751 13.7589 3.99505L7.5 7.96703L1.24112 3.99505C1.16621 3.94751 1.0826 3.92486 1 3.92494V3ZM1 4.90797V12H14V4.90797L7.74112 8.87995C7.59394 8.97335 7.40606 8.97335 7.25888 8.87995L1 4.90797Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/roushou" target="_blank" rel="noopener noreferrer">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 15 15"
+                fill="none"
+                class="hover:text-amber-500"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a href="https://x.com/roushou_" target="_blank" rel="noopener noreferrer">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 15 15"
+                fill="none"
+                class="hover:text-blue-500"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.23336 4.69629C7.23336 2.96884 8.63335 1.56857 10.36 1.56857C11.3736 1.56857 12.183 2.04804 12.7254 2.74385C13.3079 2.62467 13.8557 2.40913 14.3513 2.11508C14.1559 2.72598 13.7424 3.2396 13.2033 3.56463C13.2038 3.56568 13.2042 3.56674 13.2047 3.56779C13.7334 3.50361 14.2364 3.36302 14.7048 3.15546L14.7037 3.15715C14.3667 3.66183 13.9431 4.10736 13.4561 4.47034C13.4823 4.64672 13.4956 4.82427 13.4956 5.00079C13.4956 8.6871 10.6873 12.9746 5.52122 12.9746C3.93906 12.9746 2.46544 12.511 1.22505 11.7152C0.992632 11.5661 0.925108 11.2568 1.07423 11.0244C1.0874 11.0038 1.10183 10.9846 1.11734 10.9666C1.20582 10.8202 1.37438 10.7309 1.5554 10.7522C2.47066 10.8601 3.38568 10.7485 4.19219 10.3962C3.39226 10.0434 2.77129 9.35975 2.50204 8.51974C2.45359 8.3686 2.48835 8.20311 2.59351 8.08422C2.59716 8.0801 2.60087 8.07606 2.60464 8.0721C1.96391 7.50819 1.55973 6.68208 1.55973 5.76143V5.72759C1.55973 5.56814 1.64411 5.42059 1.78155 5.33974C1.82671 5.31317 1.87537 5.29511 1.92532 5.28558C1.70549 4.86154 1.58116 4.37984 1.58116 3.86958C1.58116 3.40165 1.58384 2.81192 1.91332 2.28081C1.98718 2.16175 2.10758 2.08915 2.2364 2.07195C2.42588 2.01237 2.64087 2.06969 2.77406 2.23302C3.86536 3.57126 5.44066 4.49583 7.23366 4.73961L7.23336 4.69629ZM5.52122 11.9746C4.73387 11.9746 3.97781 11.8435 3.27248 11.6023C4.13012 11.4538 4.95307 11.1159 5.66218 10.5602C5.81211 10.4427 5.87182 10.2435 5.81126 10.0629C5.7507 9.88234 5.583 9.75943 5.39255 9.75607C4.68968 9.74366 4.06712 9.39716 3.67793 8.86845C3.86828 8.85306 4.05428 8.82039 4.23445 8.77167C4.43603 8.71716 4.57363 8.53114 4.56674 8.32243C4.55985 8.11372 4.41029 7.93718 4.20555 7.89607C3.42694 7.73977 2.79883 7.16764 2.56169 6.42174C2.76255 6.47025 2.97102 6.4991 3.18482 6.5061C3.38563 6.51267 3.56646 6.38533 3.62795 6.19405C3.68943 6.00277 3.61666 5.79391 3.44963 5.68224C2.86523 5.29155 2.48116 4.62464 2.48116 3.86958C2.48116 3.70213 2.48352 3.55268 2.49355 3.41719C3.85115 4.79913 5.70873 5.68931 7.77588 5.79338C7.93225 5.80126 8.08328 5.73543 8.18395 5.61553C8.28463 5.49562 8.32332 5.33548 8.28851 5.18284C8.25255 5.02517 8.23336 4.86284 8.23336 4.69629C8.23336 3.52085 9.18591 2.56857 10.36 2.56857C11.5943 2.56857 12.4956 3.71208 12.4956 5.00079C12.4956 8.25709 10.0202 11.9746 5.52122 11.9746Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+    )
+  }
+  <slot />
+</BaseLayout>

src/pages/index.astro

@@ -2,10 +2,10 @@
 import { Icon } from "astro-icon/components";
 import { Square } from "../components/square";
 import { squares } from "../data/squares";
-import BaseLayout from "../layouts/base.astro";
+import MainLayout from "../layouts/main.astro";
 ---
 
-<BaseLayout title="Roushou">
+<MainLayout title="Roushou">
   <div class="hidden md:block">
     {squares.map((config) => <Square client:load {...config} />)}
   </div>
@@ -52,4 +52,4 @@ import BaseLayout from "../layouts/base.astro";
       </li>
     </ul>
   </main>
-</BaseLayout>
+</MainLayout>

src/pages/uses.astro

@@ -0,0 +1,162 @@
+---
+import MainLayout from "~/layouts/main.astro";
+
+type Item = {
+  name: string;
+  category?: string;
+  link: string;
+};
+
+const hardware: Item[] = [
+  {
+    name: "Keychron Q7 QMK - Red switches",
+    category: "Keyboard",
+    link: "https://www.keychron.com/products/keychron-q7-qmk-custom-mechanical-keyboard",
+  },
+  {
+    name: "Logitech Yeti",
+    category: "Microphone",
+    link: "https://www.logitechg.com/en-us/products/streaming-gear/yeti-premium-usb-microphone.988-000100.html",
+  },
+];
+
+const editor: Item[] = [
+  {
+    name: "Neovim",
+    link: "https://neovim.io",
+  },
+  {
+    name: "Catppuccin",
+    category: "Theme",
+    link: "https://github.com/catppuccin/catppuccin",
+  },
+  {
+    name: "JetBrains Mono",
+    category: "Font",
+    link: "https://fonts.google.com/specimen/JetBrains+Mono?query=jetbrains",
+  },
+];
+
+type TerminalItem = {
+  name: string;
+  description: string;
+  link: string;
+};
+
+const terminal: TerminalItem[] = [
+  {
+    name: "Wezterm",
+    description:
+      "A powerful cross-platform terminal emulator and multiplexer written in Rust",
+    link: "https://wezfurlong.org/wezterm/index.html",
+  },
+  {
+    name: "Fish",
+    description: "User-friendly command-line shell",
+    link: "https://fishshell.com",
+  },
+  {
+    name: "Zelli",
+    description: "Terminal multiplexer",
+    link: "https://zellij.dev",
+  },
+  {
+    name: "Starship",
+    description: "Cross-Shell prompt",
+    link: "https://starship.rs",
+  },
+  {
+    name: "Lazygit",
+    description: "TUI for git commands",
+    link: "https://github.com/jesseduffield/lazygit",
+  },
+  {
+    name: "fzf",
+    description: "Command-line fuzzy finder",
+    link: "https://github.com/junegunn/fzf",
+  },
+  {
+    name: "fd",
+    description: "Faster `find`",
+    link: "https://github.com/sharkdp/fd",
+  },
+  {
+    name: "Ripgrep",
+    description: "Search tool like `grep`",
+    link: "https://github.com/BurntSushi/ripgrep",
+  },
+  {
+    name: "Exa",
+    description: "Modern replacement for `ls`",
+    link: "https://the.exa.website",
+  },
+  {
+    name: "Bat",
+    description: "Better `cat`",
+    link: "https://github.com/sharkdp/bat",
+  },
+];
+---
+
+<MainLayout title="Roushou | Uses" withSocials>
+  <main class="px-10 pb-10 tracking-wider md:mt-10 md:px-32 lg:px-64">
+    <h1 class="mb-6 text-3xl">Uses</h1>
+    <div>
+      My dotfiles can be found <a
+        href="https://github.com/roushou/dotfiles"
+        class="underline decoration-orange-500 decoration-2 underline-offset-4 hover:text-orange-500"
+        >here</a
+      >.
+    </div>
+    <h2 class="my-4 text-xl text-orange-500"># Hardware</h2>
+    <ul class="mb-10 space-y-1">
+      {
+        hardware.map((item) => (
+          <li class="flex items-center space-x-2">
+            <div class="h-1 w-1 bg-white" />
+            <a href={item.link} class="group">
+              {item.category ? <span class="">{item.category}: </span> : null}
+              <span class="underline decoration-orange-500 decoration-2 underline-offset-4 group-hover:text-orange-500">
+                {item.name}
+              </span>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+    <h2 class="my-4 text-xl text-orange-500"># Editor</h2>
+    <ul class="mb-10 space-y-1">
+      {
+        editor.map((item) => (
+          <li class="flex items-center space-x-2">
+            <div class="h-1 w-1 bg-white" />
+            <a href={item.link} class="group">
+              {item.category ? <span class="">{item.category}: </span> : null}
+              <span class="underline decoration-orange-500 decoration-2 underline-offset-4 group-hover:text-orange-500">
+                {item.name}
+              </span>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+    <h2 class="mb-4 text-xl text-orange-500"># Terminal</h2>
+    <ul class="mb-10 space-y-1">
+      {
+        terminal.map((item) => (
+          <li class="flex items-center space-x-2">
+            <div class="h-1 w-1 bg-white" />
+            <a href={item.link} class="group">
+              <>
+                <span class="underline decoration-orange-500 decoration-2 underline-offset-4 group-hover:text-orange-500">
+                  {item.name}
+                </span>
+                <span>: {item.description}</span>
+              </>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </main>
+</MainLayout>

tsconfig.json

@@ -2,6 +2,10 @@
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "jsx": "preserve",
-    "jsxImportSource": "solid-js"
+    "jsxImportSource": "solid-js",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
   }
 }