feat: release 2.17.2

Reviewed-on: #361

Dockerfile

@@ -22,7 +22,7 @@ WORKDIR /app
 COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/dist /app/dist
 
-LABEL version="2.16.0"
+LABEL version="2.17.2"
 LABEL description="Astro based personal website"
 
 ENV HOST=0.0.0.0

README.md

@@ -2,6 +2,7 @@
 
 Personal site used for information about myself and blog.
 
+
 ## Development
 
 With dependencies installed, you can utilize the following npm scripts to manage your project's development lifecycle:
@@ -12,9 +13,13 @@ With dependencies installed, you can utilize the following npm scripts to manage
 
 For detailed help with Astro CLI commands, visit [Astro's documentation](https://docs.astro.build/en/reference/cli-reference/).
 
+
 ## Thanks
 
-Thanks https://github.com/godruoyi/gblog/tree/gblog-template, https://github.com/mearashadowfax/ScrewFast, 
+Based the site on: [gblog-template](https://github.com/godruoyi/gblog/tree/gblog-template) and [ScrewFast](https://github.com/mearashadowfax/ScrewFast)
+
+Using Icons from [Icons8](https://icons8.com/)
+
 
 ## License
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "2.16.0",
+  "version": "2.17.2",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
@@ -55,7 +55,7 @@
     "reading-time": "^1.5.0",
     "sharp": "^0.34.5",
     "sharp-ico": "^0.1.5",
-    "shiki": "^3.23.0",
+    "shiki": "^4.0.0",
     "tailwindcss": "^4.2.1",
     "ultrahtml": "^1.6.0"
   },

pnpm-lock.yaml

@@ -70,13 +70,13 @@ importers:
         version: 17.0.3
       marked-shiki:
         specifier: ^1.2.1
-        version: 1.2.1(marked@17.0.3)(shiki@3.23.0)
+        version: 1.2.1(marked@17.0.3)(shiki@4.0.0)
       mdast-util-to-string:
         specifier: ^4.0.0
         version: 4.0.0
       preline:
         specifier: ^4.1.1
-        version: 4.1.1
+        version: 4.1.2
       react:
         specifier: ^19.2.4
         version: 19.2.4
@@ -93,8 +93,8 @@ importers:
         specifier: ^0.1.5
         version: 0.1.5
       shiki:
-        specifier: ^3.23.0
-        version: 3.23.0
+        specifier: ^4.0.0
+        version: 4.0.0
       tailwindcss:
         specifier: ^4.2.1
         version: 4.2.1
@@ -1801,21 +1801,49 @@ packages:
   '@shikijs/core@3.23.0':
     resolution: {integrity: sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==}
 
+  '@shikijs/core@4.0.0':
+    resolution: {integrity: sha512-tvV94Dwyz4qFZ8R0MUaFx5Yptgy8yrloa4dwynEJDGjKz+8vqO8Q6FmPZL9W1gSzFHOUMOGQzIHK62aGourFxA==}
+    engines: {node: '>=20'}
+
   '@shikijs/engine-javascript@3.23.0':
     resolution: {integrity: sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==}
 
+  '@shikijs/engine-javascript@4.0.0':
+    resolution: {integrity: sha512-+PEyTS+JTz2lLy2C1Dwwx6hzoehIzqxQYh5MEjv9V4JtSabx+bIkRHfQT+6DnBmPAplGH0exBknWeiJSXC7w1w==}
+    engines: {node: '>=20'}
+
   '@shikijs/engine-oniguruma@3.23.0':
     resolution: {integrity: sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==}
 
+  '@shikijs/engine-oniguruma@4.0.0':
+    resolution: {integrity: sha512-KXmq4b6Xw16+4+rz5M4NZMoe/tzs5kTOMSJz8+LCyxSrwmxwTBAM/ab85iSO2Gw79E47HkW4B9HPHUXhrNOivw==}
+    engines: {node: '>=20'}
+
   '@shikijs/langs@3.23.0':
     resolution: {integrity: sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==}
 
+  '@shikijs/langs@4.0.0':
+    resolution: {integrity: sha512-dSAT6fBcnOcYZQMWZO8+OmzUKKm+OO0As/qZ3TXLiSy0JsCTEYz1TaX7TDupnYLz7dr0oF2DOTEgPocx1D3aFw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.0.0':
+    resolution: {integrity: sha512-6K2zD7JTgsyFc2vM1rqy8eRGC8D5Hius3qzVONjq2lHMrqfTSn1HcGeJZiFPYSV9m3DQuBHncBbA5xe0hKSOkQ==}
+    engines: {node: '>=20'}
+
   '@shikijs/themes@3.23.0':
     resolution: {integrity: sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==}
 
+  '@shikijs/themes@4.0.0':
+    resolution: {integrity: sha512-xe42kvxOXan5ouXxULez6qwDNUJkoP6kicfg0wKuJBkeIaHLxZBZa2gEGYutL1q27DQZ5+XoR6caVX+E/aNR5A==}
+    engines: {node: '>=20'}
+
   '@shikijs/types@3.23.0':
     resolution: {integrity: sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==}
 
+  '@shikijs/types@4.0.0':
+    resolution: {integrity: sha512-LCnfBTtQKNtJyc1qMShZr2dJt1uxNI6pI0/YTc2DSNET91aUvnMGHUHsucVCC5AJVcv5XyBqk2NgYRwd20EjbA==}
+    engines: {node: '>=20'}
+
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
@@ -4692,8 +4720,8 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preline@4.1.1:
-    resolution: {integrity: sha512-akWglZoBr0TsMIbhAZ01teCrFULBVCy9OHUtcGcb49tErWmNwiITdCrbUBXMYi2hMg4Pj3i1cA7wjGaUsNFUVA==}
+  preline@4.1.2:
+    resolution: {integrity: sha512-uKK0etQ8sLyLqXH4aTmaJMm9l4nbjkmTxpXo7poQ8XuQ1zTlWi12Cmr2OkUPfYEku2+5b9YGhosGikEGF0tSeQ==}
     hasBin: true
 
   prelude-ls@1.2.1:
@@ -5121,6 +5149,10 @@ packages:
   shiki@3.23.0:
     resolution: {integrity: sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==}
 
+  shiki@4.0.0:
+    resolution: {integrity: sha512-rjKoiw30ZaFsM0xnPPwxco/Jftz/XXqZkcQZBTX4LGheDw8gCDEH87jdgaKDEG3FZO2bFOK27+sR/sDHhbBXfg==}
+    engines: {node: '>=20'}
+
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -7537,30 +7569,68 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
+  '@shikijs/core@4.0.0':
+    dependencies:
+      '@shikijs/primitive': 4.0.0
+      '@shikijs/types': 4.0.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
   '@shikijs/engine-javascript@3.23.0':
     dependencies:
       '@shikijs/types': 3.23.0
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 4.3.4
 
+  '@shikijs/engine-javascript@4.0.0':
+    dependencies:
+      '@shikijs/types': 4.0.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.4
+
   '@shikijs/engine-oniguruma@3.23.0':
     dependencies:
       '@shikijs/types': 3.23.0
       '@shikijs/vscode-textmate': 10.0.2
 
+  '@shikijs/engine-oniguruma@4.0.0':
+    dependencies:
+      '@shikijs/types': 4.0.0
+      '@shikijs/vscode-textmate': 10.0.2
+
   '@shikijs/langs@3.23.0':
     dependencies:
       '@shikijs/types': 3.23.0
 
+  '@shikijs/langs@4.0.0':
+    dependencies:
+      '@shikijs/types': 4.0.0
+
+  '@shikijs/primitive@4.0.0':
+    dependencies:
+      '@shikijs/types': 4.0.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/themes@3.23.0':
     dependencies:
       '@shikijs/types': 3.23.0
 
+  '@shikijs/themes@4.0.0':
+    dependencies:
+      '@shikijs/types': 4.0.0
+
   '@shikijs/types@3.23.0':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  '@shikijs/types@4.0.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/vscode-textmate@10.0.2': {}
 
   '@surma/rollup-plugin-off-main-thread@2.2.3':
@@ -10317,10 +10387,10 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  marked-shiki@1.2.1(marked@17.0.3)(shiki@3.23.0):
+  marked-shiki@1.2.1(marked@17.0.3)(shiki@4.0.0):
     dependencies:
       marked: 17.0.3
-      shiki: 3.23.0
+      shiki: 4.0.0
 
   marked@17.0.3: {}
 
@@ -11243,7 +11313,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preline@4.1.1:
+  preline@4.1.2:
     dependencies:
       '@floating-ui/dom': 1.7.5
       '@types/culori': 4.0.1
@@ -11762,6 +11832,17 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  shiki@4.0.0:
+    dependencies:
+      '@shikijs/core': 4.0.0
+      '@shikijs/engine-javascript': 4.0.0
+      '@shikijs/engine-oniguruma': 4.0.0
+      '@shikijs/langs': 4.0.0
+      '@shikijs/themes': 4.0.0
+      '@shikijs/types': 4.0.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0

src/components/cards/CategoryCard.astro

@@ -1,13 +1,18 @@
 ---
+import Logo from '@components/images/Logo.astro';
+import { getDirectusImageURL } from '@/support/url';
+
 interface Props {
   slug: string;
   title: string;
   description: string;
+  logoLight: string;
+  logoDark?: string;
   count: number;
   publishDate: string;
 }
 
-const { slug, title, description, count, publishDate } = Astro.props;
+const { slug, title, description, logoLight, logoDark, count, publishDate } = Astro.props;
 ---
 
 <div class="smooth-reveal-cards group h-full">
@@ -18,10 +23,19 @@ const { slug, title, description, count, publishDate } = Astro.props;
   >
     <div class="relative grow overflow-hidden">
       <div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
-        <div class="overflow-hidden">
-          <h3 class="card-text-title-major card-hover-text-title whitespace-nowrap mb-4">
+        <div class="flex flex-row items-center mb-4">
+          <div class="card-hover-icon-scale shrink-0 mr-3">
+            <Logo
+              srcLight={getDirectusImageURL(logoLight)}
+              srcDark={getDirectusImageURL(logoDark!)}
+              alt={`Logo of ${title}`}
+            />
+          </div>
+          <h3 class="card-text-title-major card-hover-text-title whitespace-nowrap">
             {title}
           </h3>
+        </div>
+        <div>
           <p class="card-text-description mb-4">
             {description}
           </p>

src/components/sections/CategorySection.astro

@@ -51,11 +51,12 @@ const categories = (await directus.request(readItems('categories')))
   .map((c, index) => {
     const posts = postMap.get(c.slug);
     const pattern = layoutPattern[index % layoutPattern.length];
-    const smColSpan = Math.min(pattern.col, 2);
-    const mdColSpan = Math.min(pattern.col, 4);
+    const smColSpan = Math.min(pattern.col, 1);
+    const mdColSpan = Math.min(pattern.col, 2);
+    const lgColSpan = Math.min(pattern.col, 4);
     const rowSpan = pattern.row;
     const rowSpanClass = rowSpan > 1 ? `row-span-${rowSpan}` : 'row-span-1';
-    const gridItemClass = `col-span-${smColSpan} md:col-span-${mdColSpan} ${rowSpanClass}`;
+    const gridItemClass = `col-span-${smColSpan} md:col-span-${mdColSpan} lg:col-span-${lgColSpan} ${rowSpanClass}`;
     return {
       ...c,
       posts,
@@ -63,6 +64,7 @@ const categories = (await directus.request(readItems('categories')))
       layoutPattern: {
         smCol: smColSpan,
         mdCol: mdColSpan,
+        lgCol: lgColSpan,
         row: rowSpan,
         index,
       },
@@ -71,7 +73,7 @@ const categories = (await directus.request(readItems('categories')))
 ---
 
 <section class="mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full">
-  <div class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 gap-4">
+  <div class="grid grid-flow-row-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
     {categories.map((category) => {
     return (
     <div
@@ -82,6 +84,8 @@ const categories = (await directus.request(readItems('categories')))
         slug={category.slug}
         title={category.title}
         description={category.description}
+        logoLight={category.logoLight}
+        logoDark={category.logoDark}
         count={postMap.get(category.slug)?.length ?? 0}
         publishDate={timeago(postMap.get(category.slug)?.[0]?.published_date)}
       />

src/components/sections/HeaderSection.astro

@@ -1,23 +1,39 @@
 ---
 import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
+import Logo from '@components/images/Logo.astro';
+import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
   title: string;
   subTitle: string;
+  logoExists?: boolean;
+  logoLight?: string;
+  logoDark?: string;
   btnExists?: boolean;
   btnTitle?: string;
   btnURL?: string;
 }
 
-const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
+const { title, subTitle, logoExists, logoLight, logoDark, btnExists, btnTitle, btnURL } = Astro.props;
 ---
 
 <section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
   <div class="flex-wrap md:flex md:items-center md:justify-between">
     <div class="w-full md:w-auto">
-      <h1 class="smooth-reveal card-text-header block lg:text-6xl">
-        {title}
-      </h1>
+      <div class="smooth-reveal flex flex-row items-center mb-4">
+        {logoExists ? (
+        <div class="shrink-0 mr-5">
+          <Logo
+            srcLight={getDirectusImageURL(logoLight!)}
+            srcDark={getDirectusImageURL(logoDark!)}
+            alt={`Logo of ${title}`}
+          />
+        </div>
+        ) : null}
+        <h1 class="card-text-header block lg:text-6xl">
+          {title}
+        </h1>
+      </div>
       <p class="smooth-reveal card-text-header-description mt-4">
         {subTitle}
       </p>

src/layouts/BaseLayout.astro

@@ -120,7 +120,7 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       to bottom,
       transparent 0px,
       transparent 16px,
-      black 80px,
+      black 60px,
       black 100%
     );
 
@@ -133,23 +133,23 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
 
   /* Background that creates the "glimmer" effect */
   .bg {
-    animation: slide 20s ease-in-out infinite alternate;
-    background-image: linear-gradient(-60deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
-    filter: blur(80px);
+    animation: slide 25s ease-in-out infinite alternate;
+    background-image: linear-gradient(-55deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
+    filter: blur(40px);
     top: 0;
     bottom: 0;
-    left: -50%;
-    right: -50%;
+    left: -70%;
+    right: -70%;
     opacity: .5;
     position: fixed;
     z-index: -1;
     --bg-primary: #e5e5e5;
-    --bg-secondary: #d9d9d9;
-    --bg-tertiary: #ededed;
+    --bg-secondary: #dce3eb;
+    --bg-tertiary: #f4f6f8;
   }
 
   :global(.dark) .bg {
-    --bg-primary: #292524;
+    --bg-primary: #332f2e;
     --bg-secondary: #44403c;
     --bg-tertiary: #57534e;
   }
@@ -160,15 +160,15 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   }
 
   .bg3 {
-    animation-duration: 25s;
+    animation-duration: 20s;
   }
 
   @keyframes slide {
     0% {
-      transform:translateX(-25%);
+      transform: translateX(-30%);
     }
     100% {
-      transform:translateX(25%);
+      transform: translateX(30%);
     }
   }
 </style>

src/lib/directusTypes.ts

@@ -53,6 +53,8 @@ export type Category = {
   slug: string;
   title: string;
   description: string;
+  logoLight: string;
+  logoDark: string;
 };
 
 export type Application = {

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

@@ -7,9 +7,8 @@ import markedShiki from 'marked-shiki';
 import { createHighlighter } from 'shiki';
 import { readItems, readSingleton } from '@directus/sdk';
 
-import type { Category } from '@lib/directusTypes';
-
 import SocialShareButton from '@components/buttons/SocialShareButton.astro';
+import Logo from '@components/images/Logo.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
 import { formatDate } from '@support/time';
@@ -112,7 +111,18 @@ const content = marked.parse(post.content || '');
                   href=`/categories/${category.slug}`
                   data-astro-prefetch
                 >
-                  {category.title}
+                  <div class="flex flex-row items-center shrink-0">
+                    <div class="mr-2">
+                      <Logo
+                        srcLight={getDirectusImageURL(category.logoLight)}
+                        srcDark={getDirectusImageURL(category.logoDark)}
+                        alt={`Logo of ${category.title}`}
+                        width = 18,
+                        height = 18,
+                      />
+                    </div>
+                    {category.title}
+                  </div>
                 </a>
                 <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
                   /

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

@@ -1,7 +1,7 @@
 ---
 import { readItems, readSingleton } from '@directus/sdk';
 
-import type { Post, Category } from '@lib/directusTypes';
+import type { Post } from '@lib/directusTypes';
 
 import HeaderSection from '@components/sections/HeaderSection.astro';
 import BlogCard from '@components/cards/BlogCard.astro';
@@ -54,8 +54,11 @@ const categoriesPosts = posts
 >
 
   <HeaderSection
-    title={category.title}
+    title=`${category.title}`
     subTitle={category.description}
+    logoExists
+    logoLight={category.logoLight}
+    logoDark={category.logoDark}
     btnExists
     btnTitle="Back to Categories"
     btnURL="/categories"

src/styles/global.css

@@ -39,10 +39,10 @@
 
   /* Object colors */
   --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
-  --color-background-accent: light-dark(color-mix(in srgb, var(--color-neutral-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
+  --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
   --color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));
 
-  --color-divider: light-dark(color-mix(in srgb, var(--color-neutral-400) 50%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
+  --color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
 }
 
 @layer base {