Bump astro from 7.0.3 to 7.1.0

Bumps [astro](https://github.com/withastro/astro/tree/HEAD/packages/astro) from 7.0.3 to 7.1.0.
- [Release notes](https://github.com/withastro/astro/releases)
- [Changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md)
- [Commits](https://github.com/withastro/astro/commits/astro@7.1.0/packages/astro)

---
updated-dependencies:
- dependency-name: astro
  dependency-version: 7.1.0
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

astro.config.mjs

@@ -1,22 +1,24 @@
 // @ts-check
-import { rehypeHeadingIds } from '@astrojs/markdown-remark'
-import mdx from '@astrojs/mdx'
-import sitemap from '@astrojs/sitemap'
-import svelte from '@astrojs/svelte'
-import { defineConfig } from 'astro/config'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import Icons from 'unplugin-icons/vite'
-import { remarkReadingTime } from './readingTime'
+import { unified } from "@astrojs/markdown-remark";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
+import svelte from "@astrojs/svelte";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import { defineConfig } from "astro/config";
+import Icons from "unplugin-icons/vite";
+import { remarkReadingTime } from "./readingTime";
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://example.com',
+  site: "https://example.com",
   integrations: [mdx(), sitemap(), svelte()],
   markdown: {
-    rehypePlugins: [rehypeHeadingIds, [rehypeAutolinkHeadings, { behavior: 'wrap' }]],
+    processor: unified({
+      rehypePlugins: [[rehypeAutolinkHeadings, { behavior: "wrap" }]],
       remarkPlugins: [remarkReadingTime],
+    }),
   },
   vite: {
-    plugins: [Icons({ compiler: 'astro' })],
+    plugins: [Icons({ compiler: "astro" })],
   },
-})
+});

mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "25"

package.json

@@ -9,26 +9,26 @@
     "start": "astro dev"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^6.1.0",
-    "@astrojs/mdx": "^4.0.8",
-    "@astrojs/rss": "^4.0.11",
-    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "^7.0.4",
-    "@fontsource-variable/jost": "^5.1.2",
-    "@fontsource-variable/playfair-display": "^5.1.1",
-    "@iconify-json/ion": "^1.2.2",
-    "astro": "^5.3.0",
-    "fuse.js": "^7.1.0",
+    "@astrojs/check": "^0.9.9",
+    "@astrojs/markdown-remark": "^7.2.0",
+    "@astrojs/mdx": "^7.0.0",
+    "@astrojs/rss": "^4.0.18",
+    "@astrojs/sitemap": "^3.7.3",
+    "@astrojs/svelte": "^9.0.0",
+    "@fontsource-variable/jost": "^5.2.8",
+    "@fontsource-variable/playfair-display": "^5.2.8",
+    "@iconify-json/ion": "^1.2.7",
+    "astro": "^7.1.0",
+    "fuse.js": "^7.4.2",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "remark-toc": "^9.0.0",
-    "sass": "^1.85.0",
-    "sharp": "^0.33.5",
-    "svelte": "^5.20.2",
-    "typescript": "^5.7.3",
-    "unplugin-icons": "^22.1.0"
+    "sass": "^1.101.0",
+    "sharp": "^0.35.2",
+    "svelte": "^5.56.4",
+    "typescript": "^6.0.3",
+    "unplugin-icons": "^23.0.1"
   },
-  "packageManager": "pnpm@9.14.4"
+  "packageManager": "pnpm@11.9.0"
 }

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+allowBuilds:
+  '@parcel/watcher': false
+  esbuild: true
+  sharp: true

src/components/BaseHead.astro

@@ -1,5 +1,7 @@
 ---
+// @ts-expect-error -- no types
 import '@fontsource-variable/jost'
+// @ts-expect-error -- no types
 import '@fontsource-variable/playfair-display'
 
 import '../styles/preflight.css'
@@ -52,4 +54,4 @@ if (Astro.props.title) {
   async
   defer
   src="https://spectare.nicco.io/unicorn.js"
-  data-website-id="bc7525c5-6928-49e1-9255-aca296947def"></script>
+  data-website-id="89387e25-78e1-40e9-8127-0a8fd380c1be"></script>

src/components/ContactLinks.astro

@@ -11,7 +11,7 @@ const links: { label: string; url: string; icon: astroHTML.JSX.Element }[] = [
   { label: 'Chat on discord', url: 'https://discord.gg/wS7RpYTYd2', icon: ChatBubbles },
   { label: 'GitHub', url: 'https://github.com/cupcakearmy', icon: Github },
   { label: 'Support my work', url: 'https://github.com/sponsors/cupcakearmy', icon: Heart },
-  { label: 'Traffic', url: 'https://spectare.nicco.io/share/HYgOcrlfHxGB9RAR/nicco.io', icon: Trending },
+  { label: 'Traffic', url: 'https://spectare.nicco.io/share/670lLNIH7EjetcOk/nicco.io', icon: Trending },
   { label: 'Privacy', url: '/privacy', icon: FingerPrint },
 ]
 ---

src/components/Nav.astro

@@ -4,7 +4,7 @@ const { pathname } = Astro.url
 
 const routes = [
   { name: 'About', href: '/about' },
-  { name: 'Projects', href: '/projects' },
+  // { name: 'Projects', href: '/projects' },
   { name: 'Blog', href: '/blog' },
   { name: 'Rest', href: '/rest' },
 ]

src/components/PostList.astro

@@ -13,7 +13,7 @@ const { posts } = Astro.props
   {
     posts.map((post) => (
       <li>
-        <a href={`/blog/${post.slug}`}>
+        <a href={`/blog/${post.id}`}>
           <PostPreview {post} />
         </a>
       </li>

src/components/PostPreview.astro

@@ -1,6 +1,6 @@
 ---
 import { Picture } from 'astro:assets'
-import type { CollectionEntry } from 'astro:content'
+import { type CollectionEntry, render as renderEntry } from 'astro:content'
 import PostAttributes from './PostAttributes.astro'
 import Tags from './Tags.astro'
 
@@ -9,7 +9,7 @@ export type Props = {
 }
 
 const { post } = Astro.props
-const { remarkPluginFrontmatter } = await post.render()
+const { remarkPluginFrontmatter } = await renderEntry(post)
 ---
 
 <section class:list={{ without: !post.data.coverImage }}>

src/content.config.ts

@@ -1,13 +1,13 @@
-import { defineCollection, z } from 'astro:content'
+import { defineCollection } from 'astro:content'
+import { z } from 'astro/zod'
+import { glob } from 'astro/loaders'
 
 const blog = defineCollection({
-  type: 'content',
-  // Type-check frontmatter using a schema
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
   schema: ({ image }) =>
     z.object({
       title: z.string(),
       description: z.string().optional(),
-      // Transform string to Date object
       date: z.coerce.date(),
       updatedDate: z.coerce.date().optional(),
       coverImage: image().optional(),
@@ -16,7 +16,7 @@ const blog = defineCollection({
 })
 
 const page = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/page' }),
   schema: z.object({
     title: z.string(),
     date: z.coerce.date(),

src/content/blog/glove-80-zmk-studio.md

@@ -0,0 +1,61 @@
+---
+title: "How to enable ZMK Studio for the Glove 80"
+date: "2025-08-31"
+categories:
+  - "coding"
+tags:
+  - "keyboards"
+  - "zmk"
+  - "glove80"
+  - "zmk studio"
+coverImage: "./images/ikhsan-hidayat-lL_xP4CEXaY-unsplash.jpg"
+---
+
+Out of the box I could not get the Glove80 to work out of the box with the amazing ZMK Studio because the default firmware that MoErgo provides does not have the necessary flag enabled.
+
+# What is needed?
+
+The documentation is quite clear on [what is needed for adding ZMK Studio support](https://zmk.dev/docs/features/studio#adding-zmk-studio-support-to-a-keyboard) to a given keyboard.
+
+- We need to add the `studio-rpc-usb-uart` snippet
+- setting `ZMK_STUDIO=y`
+
+# Build your Glove80 firmware with Studio support
+
+However being a bit lost on how and where to add it, I [searched GitHub](https://github.com/search?q=studio-rpc-usb-uart+glove&type=code) for inspiration. Luckily I found a config by [IevgeniiB](https://github.com/IevgeniiB/zmk-config/blob/64df48414176b9df78acc114aea0b6fa05238484/build.yaml#L9-L12). Thanks!
+
+The official docs are quite good
+
+1. Create your own ZMK repo ([official docs](https://zmk.dev/docs/user-setup), reduced version here).
+   1. Create a new github repo with the name `zmk-config`
+   2. Run `bash -c "$(curl -fsSL https://zmk.dev/setup.sh)"` and select `29` for Glove80, otherwise the default values.
+2. Adjust your `build.yml`
+
+   ```yaml
+    ---
+    include:
+      - board: glove80_lh
+        snippet: studio-rpc-usb-uart
+        cmake-args: -DCONFIG_ZMK_STUDIO=y
+   ```
+
+3. Adjust your `west.yml`:
+
+   ```yaml
+   manifest:
+     remotes:
+       - name: moergo-sc
+         url-base: https://github.com/moergo-sc
+     projects:
+       - name: zmk
+         remote: moergo-sc
+         revision: main
+         import: app/west.yml
+     self:
+       path: config
+   ```
+
+4. Assign `&studio_unlock` to an empty key. This is required to unlock once connected. I added mine to the magic layer in `glove80.keymap`.
+5. Push and wait for the Github action. After the action executes you will have and artifact with 2 firmware files. One for the left and one for the right.
+6. Flash the firmware to both sides. See the [official guide](https://docs.moergo.com/glove80-user-guide/customizing-key-layout/#loading-new-zmk-firmware-onto-your-glove80) on how to do it.
+7. Profit 🎉 You can now edit and update your Keymap right from your browser.

src/content/blog/images/ikhsan-hidayat-lL_xP4CEXaY-unsplash.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b9e945d1024288ab91231ae850b49246e8544e5be5b6ad6bc7d730cc44f6096
+size 298478

src/content/page/about.mdx

@@ -1,9 +1,10 @@
 ---
-title: 'About'
-date: '2020-09-21'
+title: "About"
+date: "2020-09-21"
 ---
-import SkillBar from '../../components/SkillBar.astro'
-import AboutImage from '../../components/AboutImage.astro'
+
+import SkillBar from "../../components/SkillBar.astro";
+import AboutImage from "../../components/AboutImage.astro";
 
 Hi, I'm Nicco
 
@@ -11,9 +12,12 @@ I've been doing programming things and "You do computer science right? Can you f
 My home is mainly the web, but I wander down many paths of computer science, wherever Ecosia and curiosity bring me that day.
 
 <div>
-<SkillBar progress={0.95} title="Skill bars are useless"/>
-<SkillBar progress={0.03} title="I think I know everything there is to know about X"/>
-<SkillBar progress={0.85} title="I can teach myself stuff"/>
+  <SkillBar progress={0.95} title="Skill bars are useless" />
+  <SkillBar
+    progress={0.03}
+    title="I think I know everything there is to know about X"
+  />
+  <SkillBar progress={0.85} title="I can teach myself stuff" />
 </div>
 
 ## Today
@@ -23,7 +27,7 @@ I do a lot of Typescript, but I always try new things that come up on the interw
 **A list of some "skills" (Pros)**
 
 - Frontend
-  - React, Vue & Svelte for Web apps, landing pages, etc.
+  - React, Vue, Svelte, Solid for Web apps, landing pages, etc.
   - Typescript lover
   - Electron multiplatform _macOS/Linux/Windows_ apps.
   - Mobile apps for _iOS_ and _Android_, mostly in React Native.
@@ -32,19 +36,27 @@ I do a lot of Typescript, but I always try new things that come up on the interw
   - Docker multi stage build, etc.
   - Pipelines for testing & deployments of various projects/apps
   - Github actions
+  - Package & Container registries
 - Backend
-  - Serverless backends (in _AWS_)
-  - Postgres/Maria/Mysql/Mongo experience.
-  - Python server
-  - Go CLI utilities
+  - Written backends in Typescript, Go, Python
+  - Serverless Services
+  - Postgres/Maria/Mysql/Mongo/SQLite experience.
   - Web scraping
+  - Pub/Sub, DLQs
+  - Distributed systems, locks, queues, etc.
+  - Custom K8S operators
+  - gRPC
 - Clouds I've deployed production services
   - AWS
   - GCP
+- Other
+  - Built various CLI tools
+  - Emdedded projects in C
+  - Custom Protocols over TCP
+  - Monorepos
 
 **And stuff I suck at (Cons)**
 
-- Testing, hate it.
 - Love rewriting stuff from ground up.
 - Probably much more...
 
@@ -60,4 +72,4 @@ Remember kids: before our friendly Docker whale was a thing and we all installed
 
 The rest... well I have a bad memory 🐘
 
-<AboutImage/>
+<AboutImage />

src/pages/[...page].astro

@@ -1,17 +1,17 @@
 ---
-import { getCollection } from 'astro:content'
+import { getCollection, render as renderEntry } from 'astro:content'
 import PageWithTitle from '../layouts/PageWithTitle.astro'
 
 export async function getStaticPaths() {
   const posts = await getCollection('page')
   return posts.map((post) => ({
-    params: { page: post.slug },
+    params: { page: post.id },
     props: post,
   }))
 }
 
 const post = Astro.props
-const { Content } = await post.render()
+const { Content } = await renderEntry(post)
 ---
 
 <PageWithTitle title={post.data.title}>

src/pages/blog/[...slug].astro

@@ -1,17 +1,17 @@
 ---
-import { getCollection } from 'astro:content'
+import { getCollection, render as renderEntry } from 'astro:content'
 import BlogPost from '../../layouts/BlogPost.astro'
 
 export async function getStaticPaths() {
   const posts = await getCollection('blog')
   return posts.map((post) => ({
-    params: { slug: post.slug },
+    params: { slug: post.id },
     props: post,
   }))
 }
 
 const post = Astro.props
-const { Content, headings, remarkPluginFrontmatter } = await post.render()
+const { Content, headings, remarkPluginFrontmatter } = await renderEntry(post)
 ---
 
 <BlogPost {...post.data} {headings} readingTime={remarkPluginFrontmatter.readingTime}>

src/pages/search.astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content'
+import { getCollection, render as renderEntry } from 'astro:content'
 import PageSearch from '../components/PageSearch.svelte'
 import PageWithTitle from '../layouts/PageWithTitle.astro'
 
@@ -9,10 +9,10 @@ const entries: Entry[] = []
 
 const posts = await getCollection('blog')
 for (const post of posts) {
-  const rendered = await post.render()
+  const rendered = await renderEntry(post)
   const text = rendered.remarkPluginFrontmatter.text
   entries.push({
-    url: `/blog/${post.slug}`,
+    url: `/blog/${post.id}`,
     type: 'post',
     title: post.data.title,
     text,
@@ -22,10 +22,10 @@ for (const post of posts) {
 
 const pages = await getCollection('page')
 for (const page of pages) {
-  const rendered = await page.render()
+  const rendered = await renderEntry(page)
   const text = rendered.remarkPluginFrontmatter.text
   entries.push({
-    url: `/${page.slug}`,
+    url: `/${page.id}`,
     type: 'page',
     title: page.data.title,
     text,

src/styles/global.scss

@@ -5,8 +5,8 @@
 }
 
 :root {
-  --ff: 'Jost Variable', sans-serif;
-  --ff-alt: 'Playfair Display Variable', serif;
+  --ff: "Jost Variable", sans-serif;
+  --ff-alt: "Playfair Display Variable", serif;
   --clr-light: #ffffff;
   --clr-dark: #010101;
   --clr-primary: hsl(219, 90%, 80%);
@@ -89,6 +89,10 @@ svg {
   height: auto;
 }
 
+code {
+  font-size: 0.75em;
+}
+
 pre {
   padding: 1rem;
   margin: 1rem 0;