✨ More mobile friendly, fix wrong URL, Hamburger menu

- Hamburger menu on mobile
- title is moved into header on mobile
- Smaller titles on mobile
- Fix wrong import of env in config
- Cleaned up unused imports

TODO.md

@@ -3,13 +3,19 @@
 ## Code
 - [ ] Temporal API or day.js for dates
 
+## SSE
+- [x] Correct Sitemap.xml
+- [x] Correct robots.txt
+- [x] Correct security.txt
+
 ## Layout
-- [ ] Show current page in navbar
+- [x] Show current page
 - [x] Correct bg colour on entire page
+- [x] Hamburger menu on mobile
 
 ## Accessibility
 - [ ] Fix colours on buttons
-- [ ] Correct contrast
+- [x] Correct contrast
 - [ ] All interactable elements have labels
 - [ ] Colour links, also in MDX posts
 

astro.config.mjs

@@ -10,13 +10,13 @@ import icon from "astro-icon"
 
 import { loadEnv } from "vite"
 
-const { url } = process.env.URL
-  ? loadEnv(process.env.URL, process.cwd(), "")
-  : { url: "http://localhost:3000" }
+const { URL } = process.env.NODE_ENV
+  ? loadEnv(process.env.NODE_ENV, process.cwd(), "")
+  : { URL: "http://localhost:3000" }
 
 // https://astro.build/config
 export default defineConfig({
-  site: url,
+  site: URL,
   output: "server",
   i18n: {
     defaultLocale: "nb",

src/components/UsesPage.astro

@@ -1,5 +1,4 @@
 ---
-import Select from "./Select.svelte"
 import * as m from "@/paraglide/messages"
 import CollapseList from "@/components/collapse/CollapseList.svelte"
 import type { CollectionEntry } from "astro:content"

src/components/header/HamburgerMenuButton.astro

@@ -0,0 +1,17 @@
+---
+import PajamasIcon from "@/components/icons/PajamasIcon.astro"
+
+interface Props {
+  id: string
+}
+
+const { id } = Astro.props
+---
+
+<label for={id} aria-label="open sidebar" class="btn btn-square btn-ghost">
+  <PajamasIcon
+    name="pajamas:hamburger"
+    class="w-6 h-6"
+    aria-label="Hamburger menu"
+  />
+</label>

src/components/header/Header.astro

@@ -1,7 +1,38 @@
 ---
 import Navbar from "./Navbar.astro"
+import NavbarDrawer from "./NavbarDrawer.astro"
+import HamburgerMenuButton from "./HamburgerMenuButton.astro"
+import { resolvePathname } from "@/utils/linking"
+
+const currentPath = `~${resolvePathname(Astro.originPathname)}`
 ---
 
-<div class="m-auto">
-  <Navbar />
+<div class="sm:m-auto">
+  <div class="drawer drawer-end">
+    <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content flex flex-col">
+      <!-- Navbar -->
+      <div class="navbar w-full justify-end">
+        <div class="flex justify-between items-center w-full h-full sm:hidden">
+          <h1 class="!text-2xl h-5">
+            {currentPath}
+          </h1>
+          <HamburgerMenuButton id="my-drawer-3" />
+        </div>
+        <div class="hidden flex-none sm:block">
+          <Navbar />
+        </div>
+      </div>
+    </div>
+    <div class="drawer-side z-50">
+      <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
+      ></label>
+      <ul class="menu bg-cat-base min-h-full w-80 p-4">
+        <li class="text-xl font-bold my-5">
+          {currentPath}
+        </li>
+        <NavbarDrawer />
+      </ul>
+    </div>
+  </div>
 </div>

src/components/header/NavbarDrawer.astro

@@ -0,0 +1,12 @@
+---
+import Links from "../../links"
+import LocaleLink from "../links/LocaleLink.astro"
+---
+
+{
+  Links.map((link) => (
+    <li>
+      <LocaleLink to={link.to}>{link.label}</LocaleLink>
+    </li>
+  ))
+}

src/components/myLinks/LinkCard.astro

@@ -9,7 +9,6 @@ interface Props extends MyLink {
 
 const { title, message, url, icon, class: clazz } = Astro.props
 const iconStyle = "w-6 h-6"
-console.log(icon)
 ---
 
 <ExternalLink href={url} noStyle>

src/components/projects/MyProjectsPage.astro

@@ -1,6 +1,5 @@
 ---
 import ProjectCard from "./ProjectCard.astro"
-import * as m from "@/paraglide/messages"
 import { type CollectionEntry } from "astro:content"
 import { type NavLink } from "@/utils/linking"
 

src/components/projects/ProjectPage.astro

@@ -1,11 +1,11 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import { Image } from "astro:assets"
-import { getEntry, render } from "astro:content"
 import BadgeList from "@/components/badge/BadgeList.astro"
-import * as m from "@/paraglide/messages"
-import { languageTag } from "@/paraglide/runtime"
 import GiteaLink from "@/components/links/GiteaLink.astro"
+import { languageTag } from "@/paraglide/runtime"
+import { getEntry, render } from "astro:content"
+import { Image } from "astro:assets"
+import * as m from "@/paraglide/messages"
 import "@/styles/global.css"
 
 interface Props {
@@ -29,10 +29,10 @@ const {
 ---
 
 <!--TODO day.js / Temporal API for dates?-->
-<Layout title={title} class="mx-auto max-w-[750px]">
+<Layout title={title} class="mx-auto max-w-[750px] px-3">
   <div class="flex justify-between my-2">
     <div>
-      <h1>{title}</h1>
+      <h2>{title}</h2>
       <BadgeList tags={tags} />
     </div>
     <div class="flex flex-col items-end">

src/layouts/Layout.astro

@@ -9,7 +9,7 @@ interface Props {
   class?: string
 }
 const { title, class: clazz } = Astro.props
-const mainClass = "grow max-w-[1000px] m-auto sm:min-w-[500px] mt-5"
+const mainClass = "grow max-w-[1000px] m-auto sm:min-w-[500px]"
 ---
 
 <!doctype html>
@@ -26,8 +26,12 @@ const mainClass = "grow max-w-[1000px] m-auto sm:min-w-[500px] mt-5"
   <body class="flex flex-col min-h-screen bg-cat-base text-cat-text">
     <Header />
     <main class:list={[mainClass, clazz]}>
-      <h1 class="text-center">~{resolvePathname(Astro.originPathname)}</h1>
-      <slot />
+      <h1 class="text-center not-sm:hidden">
+        ~{resolvePathname(Astro.originPathname)}
+      </h1>
+      <div class="my-5">
+        <slot />
+      </div>
     </main>
     <Footer />
   </body>

src/types/icons.ts

@@ -9,5 +9,6 @@ export type Icon =
   | "linkedin"
   | "link"
   | "status-health"
+  | "hamburger"
 
 export type PajamasIcon = `pajamas:${Icon}`