Update typescript-eslint monorepo to v8.38.0

.gitea/workflows/release-image.yml

@@ -3,7 +3,7 @@ name: release-image
 on:
   push:
     tags:
-      - 1.*
+      - 0.*
 
   workflow_dispatch:
 

Dockerfile

@@ -1,7 +1,7 @@
 ARG REGISTRY=docker.io
 FROM ${REGISTRY}/node:22.17.1-alpine3.22 AS base
 
-LABEL version="1.1.1"
+LABEL version="0.11.3"
 LABEL description="Astro based personal website"
 
 ENV PNPM_HOME="/pnpm"

astro.config.mjs

@@ -23,8 +23,6 @@ export default defineConfig({
     plugins: [tailwindcss()],
   },
 
-  output: 'server',
-
   adapter: node({
     mode: 'standalone',
   }),

lib/directus.ts

@@ -9,7 +9,6 @@ type Global = {
   email: string;
   portrait: string;
   portrait_alt: string;
-  logo: string;
   about: string;
 };
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "1.1.1",
+  "version": "0.11.3",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",
     "@typescript-eslint/parser": "8.38.0",
-    "eslint": "9.32.0",
+    "eslint": "9.31.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-astro": "1.3.1",
     "prettier": "^3.5.3",

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-import directus from '../lib/directus';
+import directus from '../../lib/directus';
 import { readSingleton } from '@directus/sdk';
 
 const global = await directus.request(readSingleton('global'));
@@ -59,15 +59,16 @@ const socialLinks = [
         <div class="col-span-1 md:col-span-3">
           <a href="/" class="group inline-block">
             <div class="flex items-center">
-              <div class="mx-auto aspect-square overflow-hidden rounded-lg">
+              <div
-                <img
+                class="relative flex h-10 w-10 transform items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-zinc-800 to-zinc-600 shadow-lg transition-transform dark:from-zinc-200 dark:to-zinc-400"
-                  src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.logo}`
+              >
-                  alt="logo"
+                <span
-                  class="max-h-[40px] max-w-[40px] object-cover"
+                  class="theme-transition-all text-xl font-bold text-zinc-100 duration-300 dark:text-zinc-900"
-                  loading="eager"
+                >
-                />
+                  {global.initals}
+                </span>
+                <div class="absolute inset-0"></div>
               </div>
-
               <span
                 class="theme-transition-color ml-3 text-xl font-bold text-zinc-900 dark:text-zinc-100"
               >
@@ -111,7 +112,7 @@ const socialLinks = [
         <!-- Quick links -->
         <div class="col-span-1 md:col-span-3">
           <h3
-            class="theme-transition-color after:bg-turquoise dark:after:bg-turquoise relative inline-block pb-2 text-sm font-semibold tracking-wider text-zinc-900 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-zinc-100"
+            class="theme-transition-color relative inline-block pb-2 text-sm font-semibold tracking-wider text-zinc-900 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:bg-zinc-300 after:content-[''] dark:text-zinc-100 dark:after:bg-zinc-700"
           >
             Navigation
           </h3>

src/components/Navigation.astro

@@ -1,7 +1,7 @@
 ---
 import ThemeToggle from './ThemeToggle.astro';
 
-import directus from '../lib/directus';
+import directus from '../../lib/directus';
 import { readSingleton } from '@directus/sdk';
 
 const global = await directus.request(readSingleton('global'));
@@ -25,19 +25,7 @@ const currentPath = pathname.slice(1);
 >
   <div class="mx-auto flex max-w-3xl items-center justify-between px-4">
     <!-- Logo -->
-    <a
+    <a href="/" class="text-xl font-bold text-zinc-900 dark:text-white">{global.initals}</a>
-      href="/"
-      class="from-midnight to-turquoise relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br text-xl shadow-lg transition-transform"
-    >
-      <div class="mx-auto aspect-square overflow-hidden rounded-lg">
-        <img
-          src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.logo}`
-          alt="logo"
-          class="max-h-[40px] max-w-[40px] object-cover"
-          loading="eager"
-        />
-      </div>
-    </a>
 
     <!-- Desktop navigation -->
     <nav class="hidden items-center space-x-6 sm:flex">

src/components/TagList.astro

@@ -20,7 +20,7 @@ const { tags = [], class: className = '' } = Astro.props;
       ))}
       {tags.length > 2 && (
         <span class="inline-flex items-center rounded-full bg-zinc-50 px-2 py-0.5 text-xs text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">
-          +{tags.length - 2}
+          +{tags.length - 3}
         </span>
       )}
     </div>

src/components/ThemeToggle.astro

@@ -5,7 +5,7 @@
 <button
   id="theme-toggle"
   data-theme-toggle
-  class="group hover:bg-desert/50 dark:hover:bg-midnight/50 relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 focus:ring-2 focus:ring-zinc-300 focus:outline-hidden sm:p-2 dark:focus:ring-zinc-700"
+  class="group relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-zinc-100 focus:ring-2 focus:ring-zinc-300 focus:outline-hidden sm:p-2 dark:hover:bg-zinc-800 dark:focus:ring-zinc-700"
   aria-label="Toggle dark mode"
 >
   <div class="relative z-10 flex h-5 w-5 items-center justify-center">

src/layouts/BaseLayout.astro

@@ -1,7 +1,7 @@
 ---
 import Layout from './Layout.astro';
 
-import directus from '../lib/directus';
+import directus from '../../lib/directus';
 import { readSingleton } from '@directus/sdk';
 
 const global = await directus.request(readSingleton('global'));

src/layouts/BlogPost.astro

@@ -5,7 +5,7 @@ import ShareButtons from '../components/ShareButtons.astro';
 import TagList from '../components/TagList.astro';
 import './styles/markdown.css';
 
-import directus from '../lib/directus';
+import directus from '../../lib/directus';
 import { readItems } from '@directus/sdk';
 
 export async function getStaticPaths() {
@@ -40,7 +40,7 @@ try {
       <p
         class="mb-2 line-clamp-2 text-center text-sm text-zinc-600 sm:mb-3 sm:line-clamp-3 sm:text-left sm:text-base dark:text-zinc-400"
       >
-        <!-- {post.description} -->
+        {post.description}
       </p>
 
       <div

src/layouts/Layout.astro

@@ -20,7 +20,7 @@ const { title, description } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="generator" content={Astro.generator} />
     <meta name="description" content={description} />
     <title>{title}</title>

src/pages/404.astro

@@ -29,7 +29,7 @@ import Layout from '../layouts/Layout.astro';
       <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
         <a
           href="/"
-          class="relative inline-flex items-center gap-2 overflow-hidden rounded-lg bg-zinc-900 px-6 py-3 text-zinc-100 shadow-lg transition-all duration-300 hover:bg-bg-turquoise hover:text-zinc-100 hover:shadow-xl dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-turquoise"
+          class="relative inline-flex items-center gap-2 overflow-hidden rounded-lg bg-zinc-900 px-6 py-3 text-zinc-100 shadow-lg transition-all duration-300 hover:bg-cyan-600 hover:text-zinc-100 hover:shadow-xl dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-cyan-600"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

src/pages/about.astro

@@ -2,7 +2,7 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import DynamicIcon from '../utils/DynamicIcon.tsx';
 
-import directus from '../lib/directus';
+import directus from '../../lib/directus';
 import { readSingleton, readItems } from '@directus/sdk';
 
 const global = await directus.request(readSingleton('global'));
@@ -57,10 +57,12 @@ const skills = await directus.request(
         <h2
           class="theme-transition-color mb-6 flex items-center justify-center text-2xl font-bold text-zinc-900 sm:mb-8 sm:text-3xl md:justify-start dark:text-zinc-100"
         >
-          <span class="theme-transition-bg bg-turquoise mr-4 hidden h-1 w-8 sm:inline-block sm:w-12"
+          <span
+            class="theme-transition-bg mr-4 hidden h-1 w-8 bg-zinc-300 sm:inline-block sm:w-12 dark:bg-zinc-700"
           ></span>
           About Me
-          <span class="theme-transition-bg bg-turquoise ml-4 hidden h-1 w-8 sm:inline-block sm:w-12"
+          <span
+            class="theme-transition-bg ml-4 hidden h-1 w-8 bg-zinc-300 sm:inline-block sm:w-12 dark:bg-zinc-700"
           ></span>
         </h2>
 
@@ -117,7 +119,7 @@ const skills = await directus.request(
 
                   <div class="theme-transition-bg relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 sm:h-2 dark:bg-zinc-700">
                     <div
-                      class="progress-bar-animate theme-transition-bg from-turquoise via-bermuda to-turquoise absolute top-0 left-0 h-full rounded-full bg-gradient-to-r transition-all duration-1000"
+                      class="progress-bar-animate theme-transition-bg absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-zinc-700 via-zinc-600 to-zinc-800 transition-all duration-1000 dark:from-zinc-300 dark:via-zinc-400 dark:to-zinc-200"
                       style={`width: ${skill.level}%`}
                     />
                   </div>
@@ -160,7 +162,7 @@ const skills = await directus.request(
       <div class="group">
         <a
           href=`mailto:${global.email}`
-          class="theme-transition-all group-hover:bg-turquoise inline-flex items-center justify-center rounded-lg bg-zinc-900 px-6 py-3 text-base font-medium text-zinc-100 transition-colors duration-300 group-hover:text-zinc-100 sm:px-8 sm:py-4 sm:text-lg dark:bg-zinc-100 dark:text-zinc-900 dark:group-hover:text-zinc-100"
+          class="theme-transition-all inline-flex items-center justify-center rounded-lg bg-zinc-900 px-6 py-3 text-base font-medium text-zinc-100 transition-colors group-hover:bg-blue-600 group-hover:text-zinc-100 sm:px-8 sm:py-4 sm:text-lg dark:bg-zinc-100 dark:text-zinc-900 dark:group-hover:bg-blue-600 dark:group-hover:text-zinc-100"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -177,7 +179,10 @@ const skills = await directus.request(
             ></path>
           </svg>
           <span class="relative inline-block overflow-hidden">
-            <span class="relative z-10">Send Email</span>
+            <span class="relative z-10">Say Hello</span>
+            <span
+              class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-100 transition-all duration-300 group-hover:w-full"
+            ></span>
           </span>
         </a>
       </div>

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

@@ -1,11 +1,9 @@
 ---
 import BlogPost from '../../layouts/BlogPost.astro';
 
-import directus from '../../lib/directus';
+import directus from '../../../lib/directus';
 import { readItems } from '@directus/sdk';
 
-export const prerender = true;
-
 export async function getStaticPaths() {
   const posts = await directus.request(
     readItems('posts', {

src/pages/blog/index.astro

@@ -3,7 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import FormattedDate from '../../components/FormattedDate.astro';
 import TagList from '../../components/TagList.astro';
 
-import directus from '../../lib/directus';
+import directus from '../../../lib/directus';
 import { readItems } from '@directus/sdk';
 
 const posts = await directus.request(
@@ -37,7 +37,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
         <p
           class="hero-text mx-auto mb-6 max-w-2xl text-sm text-zinc-600 sm:mb-10 sm:text-base dark:text-zinc-400"
         >
-          A couple thoughts, a few ideas, and some guides on technology, development, and selfhosting.
+          Thoughts, ideas, and explorations on technology and selfhosting.
         </p>
       </div>
     </div>
@@ -73,7 +73,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
                   </h2>
 
                   <p class="mb-2 line-clamp-2 text-center text-sm text-zinc-600 sm:mb-3 sm:line-clamp-3 sm:text-left sm:text-base dark:text-zinc-400">
-                    {/* {sortedPosts[0].description} */}
+                    {sortedPosts[0].description}
                   </p>
 
                   <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400">
@@ -92,7 +92,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
                   >
                     <span class="relative inline-block overflow-hidden">
                       <span class="relative z-10">Read article</span>
-                      <span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
+                      <span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
                     </span>
                     <svg
                       viewBox="0 0 16 16"
@@ -195,7 +195,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
                       </h3>
 
                       <p class="z-10 mb-4 line-clamp-2 grow text-center text-sm text-zinc-600 md:text-left dark:text-zinc-400">
-                        {/* {post.description} */}
+                        {post.description}
                       </p>
 
                       <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400">
@@ -212,7 +212,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
                           >
                             <span class="relative inline-block overflow-hidden">
                               <span class="relative z-10">Read article</span>
-                              <span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
+                              <span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
                             </span>
                             <svg
                               viewBox="0 0 16 16"

src/pages/index.astro

@@ -3,7 +3,7 @@ import Layout from '../layouts/Layout.astro';
 import FormattedDate from '../components/FormattedDate.astro';
 import TagList from '../components/TagList.astro';
 
-import directus from '../lib/directus';
+import directus from '../../lib/directus';
 import { readItems, readSingleton } from '@directus/sdk';
 
 const global = await directus.request(readSingleton('global'));
@@ -37,7 +37,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
             <span class="relative inline-block">
               selfhosting.
               <span
-                class="theme-transition-bg bg-turquoise absolute -bottom-1 left-0 h-1 w-full origin-left transform"
+                class="theme-transition-bg absolute -bottom-1 left-0 h-1 w-full origin-left transform bg-zinc-800 dark:bg-zinc-200"
               ></span>
             </span>
           </span>
@@ -141,7 +141,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
               </h3>
 
               <p class="z-10 mb-2 line-clamp-2 text-center text-sm text-zinc-600 sm:mb-3 sm:line-clamp-3 sm:text-left sm:text-base dark:text-zinc-400">
-                {/* {post.description} */}
+                {post.description}
               </p>
 
               <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:justify-start sm:gap-4 sm:text-sm dark:text-zinc-400">
@@ -156,7 +156,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
               >
                 <span class="relative inline-block overflow-hidden">
                   <span class="relative z-10">Read article</span>
-                  <span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
+                  <span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
                 </span>
                 <svg
                   viewBox="0 0 16 16"

src/pages/rss.xml.ts

@@ -1,6 +1,6 @@
 import rss from '@astrojs/rss';
 
-import directus from '../lib/directus';
+import directus from '../../lib/directus';
 import { readItems, readSingleton } from '@directus/sdk';
 
 export async function GET(context: any) {

src/pages/tags/[tag].astro

@@ -2,7 +2,7 @@
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import FormattedDate from '../../components/FormattedDate.astro';
 
-import directus from '../../lib/directus';
+import directus from '../../../lib/directus';
 import { readItems } from '@directus/sdk';
 
 export const prerender = true;
@@ -103,7 +103,7 @@ const relatedTags = [
               <span class="absolute -bottom-1 left-0 h-1 w-full bg-zinc-200 dark:bg-zinc-700"
               ></span>
               <span
-                class="animate-expand bg-turquoise absolute -bottom-1 left-0 h-1 w-full opacity-70"
+                class="animate-expand absolute -bottom-1 left-0 h-1 w-full bg-zinc-900 opacity-70 dark:bg-zinc-100"
               ></span>
             </span>
           </h1>
@@ -214,7 +214,7 @@ const relatedTags = [
                   >
                     <span class="relative inline-block overflow-hidden">
                       <span class="relative z-10">Read article</span>
-                      <span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
+                      <span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
                     </span>
                     <svg
                       viewBox="0 0 16 16"

src/styles/global.css

@@ -4,15 +4,6 @@
 /* https://tailwindcss.com/docs/dark-mode */
 @custom-variant dark (&:where(.dark, .dark *));
 
-/* Add custom color palette */
-@theme {
-  --color-midnight: #0c354d;
-  --color-turquoise: #0da797;
-  --color-bermuda: #7fbab4;
-  --color-desert: #f9deb2;
-  --color-bronze: #9e7f5e;
-}
-
 @layer base {
   :root {
     font-family: 'Inter', sans-serif;