Mobile menu

content/articles/dontunderestimateeditorintegration/dontunderestimateeditorintegration.md

@@ -11,7 +11,7 @@ Alas, you had no time for editor integration and thus, when working with your ne
 
 But, you tell yourself that it's okay, because what matter at the end of the day is the product itself being awesome, right?
 
-[image]
+<Image src="epicdsl.png" alt="Screenshot of an imaginary language showing a lot of red squigglies" caption="Don't mind the red squigglies, I'm just waiting for Microsoft to add native support inside VS Code for me!" />
 
 Well, unfortunately, 100% of your users are using your product in a code editor. Which means that, ultimately, **the experience you provide in the editor is part of your product**.
 
@@ -23,7 +23,7 @@ Don't underestimate the power of a good editor integration, in all cases, It'll
 
 Again, 100% of your users are using your product in a code editor. Unless they've read your entire documentation, their first point of contact with a feature has a fairly high chance to be a random completion or hover info
 
-<Image src="astro_completions.png" alt="Shows a list of completions for Astro, including a little description of the feature with a link to the documentation" caption="Modern editors even allows you to use Markdown and add links in your hover info! Abuse it!" />
+<Image src="responsedoc.png" alt="Shows the hover info for Astro.request, showing hyperlinks and a snippet of code with syntax coloring" caption="Modern editors even allows you to use Markdown and add links in your hover info! Abuse it!" />
 
 Funnily enough, that's kinda how I learned how to use [GameMaker](https://www.yoyogames.com/en/gamemaker) when I was young. I couldn't read the english-only documentation and would search for functions using the completions 😅
 
@@ -36,3 +36,5 @@ Anyone who has tried to write C#, Java and other similarly verbose languages in
 But, C# and Java's verbosity isn't as much of a problem if your editor is auto completing half of what you're trying to write. For C#, you can combine this [with a powerful refactoring tool](https://www.jetbrains.com/resharper/) to make things even easier
 
 If [your product](https://www.rust-lang.org/) is hard to learn, your users will be very happy to have [a powerful linter](https://github.com/rust-lang/rust-clippy) teaching them how to write better code. Combine this with [insanely good editor tooling](https://rust-analyzer.github.io/) and while your product is still hard to learn, you're at least providing your users with tools that will set them up for success!
+
+<Image src="rust-clippy.png" alt="Shows a lint example from Clippy directly in the user's editor" caption="The rendering of the actual message isn't amazing, but Clippy and Rust-Analyzer definitely makes for a very nice editing experience" />

content/wiki/computers/dailyannoyances/dailyannoyances.md

@@ -76,7 +76,3 @@ No idea why it happens, even simple pages will sometimes completely freeze up my
 ### Instagram keyboard goes over the application when bottom bar is disabled
 
 This issue drives me mad, probably more so than every single other issues on this list. I'm sure all the women who ghosted me on Instagram did so for this reason, I don't see another explanation. [This has been an issue for years](https://forums.androidcentral.com/ask-question/848949-keyboard-covers-what-im-typing-instagram.html)
-
-### Watching a video on Twitter, even without sound, while in a Messenger call will produce sound that is coming from the call
-
-I have no explanation. I thought it was my lover snooring but no, it's because of the video I was watching (muted!). I.. I don't know

content/wiki/computers/thingsidontwanttoworkwith/thingsidontwanttoworkwith.md

@@ -15,11 +15,11 @@ Please keep in mind that most of these entries are written out of immediate frus
 
 ## Shopify
 
-Shopify itself is mostly fine, the admin dashboard is terribly slow, there's a few weirdness everywhere, you'll sometimes get random 404s but it usually mostly work
+Shopify itself is mostly fine, the admin dashboard is terribly slow, there's a few weirdness everywhere, but it usually mostly work
 
-Its API however, is unusable. The documentation is very hard to browse in addition of being often incomplete and the libraries and frameworks they provide to developers are unmaintained, not up to standards and full of issues
+Its API however, is very unpleasant to use. The documentation is very hard to browse in addition of being often incomplete and the libraries and frameworks they provide to developers are unmaintained, not up to standards and full of issues
 
-It's very painful to work with - no matter what programming language and way you try to use it, it's always extremely unpleasant and has been so for years now. In addition, the support they provide to developers is laughable, most questions on their forums and Discord goes unanswered forever
+No matter what programming language and way you try to use it, it's always as unpleasant and has been so for years now. In addition, the support provided to developers ins't always super good, most questions on their forums and Discord seems to goes unanswered forever
 
 It also ties into another thing that I've been having almost exclusively bad experiences with now:
 

src/components/layout/Header.astro

@@ -1,7 +1,8 @@
 ---
 import Socials from "$components/layout/Socials.astro"
-import MobileMenu from "$components/layout/MobileMenu.astro"
-const menu = ["Projects", "Articles", "Wiki", "Catalogue"]
+import MobileMenuToggle from "$components/layout/MobileMenuToggle.astro"
+
+import { headerMenu as menu } from "$data/headerMenu"
 ---
 
 <header class="px-4 sm:px-0 py-[.8rem] flex justify-center">
@@ -20,6 +21,7 @@ const menu = ["Projects", "Articles", "Wiki", "Catalogue"]
       </nav>
     </div>
 
-    <Socials classes="flex" />
+    <Socials classes="hidden sm:flex" />
+    <MobileMenuToggle />
   </section>
 </header>

src/components/layout/MobileMenu.astro

@@ -1,7 +1,67 @@
 ---
-import { Sprite } from "astro-icon"
+import { headerMenu as globalMenu } from "$data/headerMenu"
+import Socials from "./Socials.astro"
+import { getWikiItemsByCategory, WikiItem, postProcessWikiItem } from "$data/wiki"
+import { wikiCategories, WikiCategory } from "$data/wikiCategories"
+import { MarkdownInstance } from "$data/shared"
+
+// HACK: If we directly use MarkdownInstance<WikiItem>, Astro fails with a weird error
+type WikiItemInstance = MarkdownInstance<WikiItem>
+
+let rawWikiItems = []
+let wikiItems = []
+
+const url = new URL(Astro.request.url)
+const isWikiPage = url.pathname.includes("/wiki/")
+
+if (isWikiPage) {
+  rawWikiItems = await Astro.glob<WikiItem>("/content/wiki/**/*.md")
+  wikiItems = rawWikiItems.map((item) => ({
+    ...item,
+    frontmatter: postProcessWikiItem(item.frontmatter, item.file),
+  }))
+}
 ---
 
-<div class="flex items-center sm:hidden">
-  <Sprite name="menu" size="26px" />
+<div
+  id="mobile-menu"
+  class="fixed top-16 w-0 h-[calc(100%-4rem)] bg-baltic-sea overflow-y-auto overflow-x-hidden whitespace-nowrap"
+>
+  <div class="p-3 flex flex-col gap-4">
+    {/* Global header menu */}
+    {globalMenu.map((item) => (
+      <a class="header-link mr-0 text-xl bg-fin-lanka p-3" href={`/${item.toLowerCase()}/`}>
+        {item}
+      </a>
+    ))}
+  </div>
+
+  {/* Wiki-exclusive menu */}
+  {isWikiPage && (
+    <div class="p-3 flex flex-col gap-3">
+      {wikiCategories.map((category: WikiCategory) => (
+        <>
+          <span class="block font-bold text-sugar-cane">{category.title}</span>
+          {getWikiItemsByCategory(wikiItems, category.key).map((item: WikiItemInstance) => (
+            <a
+              class="header-link mr-0 text-lg bg-fin-lanka p-2"
+              href={item.frontmatter.url.pathname}
+            >
+              {item.frontmatter.navigation.label || item.frontmatter.title}
+            </a>
+          ))}
+        </>
+      ))}
+    </div>
+  )}
+
+  <Socials classes="mt-4 justify-center gap-7 mb-8" size={45} />
 </div>
+
+{/* Since we disabled Tailwind's default border color system, we need to add a border to the menu manually */}
+<style>
+  #mobile-menu {
+    transition: width 0.1s linear;
+    border-top: 3px solid #211f24;
+  }
+</style>

src/components/layout/MobileMenuToggle.astro

@@ -0,0 +1,18 @@
+---
+import { Sprite } from "astro-icon"
+---
+
+<div id="mobile-menu-toggle" class="flex items-center sm:hidden">
+  <Sprite name="menu" size="28px" />
+</div>
+
+<script>
+  const mobileMenuToggle = document.getElementById("mobile-menu-toggle")
+  const mobileMenu = document.getElementById("mobile-menu")
+  const body = document.body
+
+  mobileMenuToggle.addEventListener("click", () => {
+    mobileMenu.classList.toggle("w-full")
+    body.classList.toggle("overflow-hidden")
+  })
+</script>

src/components/layout/Socials.astro

@@ -1,7 +1,16 @@
 ---
 import { Sprite } from "astro-icon"
 
-const { classes } = Astro.props
+export interface Props {
+  classes?: string
+  size?: number
+}
+
+let { classes, size } = Astro.props
+
+if (!size) {
+  size = 26
+}
 ---
 
 <div class={"flex items-center" + (classes ? " " + classes : "")}>
@@ -10,22 +19,22 @@ const { classes } = Astro.props
     title="Link to my Twitter profile"
     class="social-icon social-twitter"
   >
-    <Sprite name="twitter" size="26px" />
+    <Sprite name="twitter" size={`${size}px`} />
   </a>
 
   <a
     href="https://github.com/Princesseuh"
     title="Link to my GitHub profile"
     class="social-icon social-other"
   >
-    <Sprite name="github" size="26px" />
+    <Sprite name="github" size={`${size}px`} />
   </a>
 
   <a
     href="mailto:princssdev@gmail.com"
     title="Link to email me"
     class="social-icon social-other mr-0"
   >
-    <Sprite name="mail" size="26px" />
+    <Sprite name="mail" size={`${size}px`} />
   </a>
 </div>

src/components/shared/ContentHeader.astro

@@ -16,7 +16,7 @@ const { item, includeTags } = Astro.props as Props
 ---
 
 <header class="mb-4 mt-4">
-  <h1 class="text-[3.5rem] mb-4 mt-0 leading-none">{item.title}</h1>
+  <h1 class="text-4xl sm:text-[3.5rem] mb-4 mt-0 leading-none">{item.title}</h1>
   {item.tagline && <h2 class="text-xl m-0 relative top-[-5px]">{item.tagline}</h2>}
   {isArticle(item) && includeTags && (
     <div class="text-creative-work">

src/components/wiki/WikiNavigation.astro

@@ -12,7 +12,7 @@ const wikiItems = rawWikiItems.map((item) => ({
   frontmatter: postProcessWikiItem(item.frontmatter, item.file),
 }))
 
-const url = Astro.request.url
+const url = new URL(Astro.request.url)
 ---
 
 <ul class="m-0 list-none p-0 wiki-navigation hidden sm:block">
@@ -22,7 +22,7 @@ const url = Astro.request.url
       {getWikiItemsByCategory(wikiItems, category.key).map((item: WikiItemInstance) => (
         <a
           class={`block ${
-            url == item.frontmatter.url.pathname ? "text-pinky-unicorny font-bold" : ""
+            url.pathname == item.frontmatter.url.pathname ? "text-pinky-unicorny font-bold" : ""
           }`}
           href={item.frontmatter.url.pathname}
         >

src/data/headerMenu.ts

@@ -0,0 +1 @@
+export const headerMenu = ["Projects", "Articles", "Wiki", "Catalogue"] as const

src/layouts/BaseLayout.astro

@@ -1,9 +1,10 @@
 ---
 import Header from "$components/layout/Header.astro"
+import MobileMenu from "$components/layout/MobileMenu.astro"
 import Socials from "$components/layout/Socials.astro"
-import { Sprite } from "astro-icon"
-import { generateSocialImage, SocialImageResult } from "astro-social-images"
 import { getBaseSiteURL } from "$utils"
+import { Sprite } from "astro-icon"
+import { generateSocialImage,SocialImageResult } from "astro-social-images"
 import "src/assets/style/prin.css"
 
 export interface Props {
@@ -109,6 +110,8 @@ if (socialImage) {
             </div>
           </section>
         </footer>
+
+        <MobileMenu />
       </div>
     </Sprite.Provider>
   </body>

tailwind.config.cjs

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const plugin = require("tailwindcss/plugin")
 
-/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{astro,js,ts,tsx,md}", "./content/**/*.md"],
   corePlugins: {
@@ -120,8 +120,6 @@ module.exports = {
         },
         ".social-icon": {
           color: "inherit",
-          width: "26px",
-          height: "26px",
           display: "inline-block",
           marginRight: "1.2em",
         },