Merge pull request #690 from nblackburn/blog

Blog

astro.config.mjs

@@ -1,25 +1,31 @@
 import vue from '@astrojs/vue';
+import vercel from '@astrojs/vercel';
 import sitemap from '@astrojs/sitemap';
 import { defineConfig } from 'astro/config';
-import vercel from '@astrojs/vercel';
+import { readTime } from './src/plugins/readTime.mjs';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
 export default defineConfig({
     compressHTML: true,
     site: 'https://nblackburn.uk/',
     integrations: [vue(), sitemap()],
 
+    markdown: {
+        shikiConfig: {
+            themes: {
+                light: 'github-light',
+                dark: 'github-dark'
+            }
+        },
+
+        remarkPlugins: [readTime]
+    },
+
     adapter: vercel({
         imageService: true
     }),
 
     vite: {
-        plugins: [vanillaExtractPlugin()],
-
-        define: {
-            'import.meta.env.PUBLIC_VERCEL_ANALYTICS_ID': JSON.stringify(
-                process.env.VERCEL_ANALYTICS_ID
-            )
-        }
+        plugins: [vanillaExtractPlugin()]
     }
 });

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@nblackburn/website",
     "private": true,
-    "version": "1.64.0",
+    "version": "1.65.0",
     "type": "module",
     "scripts": {
         "start": "astro dev",
@@ -44,10 +44,13 @@
         "@vanilla-extract/css": "^1.17.0",
         "astro": "5.1.7",
         "date-fns": "^4.1.0",
+        "mdast-util-to-string": "^4.0.0",
+        "npm": "^11.0.0",
+        "reading-time": "^1.5.0",
         "sharp": "^0.33.5",
         "vue": "^3.5.13"
     },
     "resolutions": {
         "vite": "^6.0.1"
     }
-}
+}

src/components/formattedDate.vue

@@ -0,0 +1,19 @@
+<template>
+    <time :datetime="isoDate">{{ pubDate }}</time>
+</template>
+
+<script lang="ts" setup>
+import { format, formatISO } from 'date-fns';
+
+interface Props {
+    date: Date;
+    formatString?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    formatString: 'do MMM, yyyy'
+});
+
+const isoDate = formatISO(props.date);
+const pubDate = format(props.date, props.formatString);
+</script>

src/components/projectCard.css.ts → src/components/listCard.css.ts

@@ -1,7 +1,7 @@
 import { style, globalStyle } from '@vanilla-extract/css';
 import { sizes, vars, breakpoints, secondaryAccent } from '@styles/theme.css';
 
-export const projectCard = style({
+export const listCard = style({
     display: 'grid',
     overflow: 'hidden',
     rowGap: sizes.small,

src/components/listCard.vue

@@ -0,0 +1,77 @@
+<template>
+    <article :class="styles.listCard">
+        <div :class="styles.thumbnail">
+            <slot name="thumbnail" />
+        </div>
+        <div :class="styles.content">
+            <div :class="styles.meta">
+                <TagList :tags="tags" :active="activeTag" :baseURL="baseURL" />
+                <div :class="styles.publishDate">
+                    <FormattedDate :date="createdAt" />
+                </div>
+            </div>
+            <div :class="styles.details">
+                <div :class="styles.info">
+                    <h3 :class="styles.title">
+                        {{ title }}
+                    </h3>
+                    <p :class="styles.description" v-if="description">
+                        {{ description }}
+                    </p>
+                </div>
+                <NavLink
+                    :href="url"
+                    :class="styles.projectLink"
+                    :aria-label="ariaLabel"
+                >
+                    <svg
+                        width="18"
+                        height="18"
+                        role="img"
+                        :class="styles.externalIcon"
+                        v-if="isExternalLink(url)"
+                    >
+                        <use :href="'#external'" />
+                    </svg>
+                    <span>{{ linkLabel }}</span>
+                </NavLink>
+            </div>
+        </div>
+    </article>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import TagList from './tagList.vue';
+import * as styles from './listCard.css';
+import NavLink from '@components/navLink.vue';
+import FormattedDate from './formattedDate.vue';
+import { isExternalLink } from '@utilities/refLink';
+
+interface Props {
+    title: string;
+    description?: string;
+    url: string;
+    tags: string[];
+    createdAt: Date;
+    baseURL: string;
+    activeTag?: string;
+    linkLabel?: string;
+}
+
+const { url, createdAt, linkLabel, baseURL } = withDefaults(
+    defineProps<Props>(),
+    {
+        linkLabel: 'View',
+        tags: () => []
+    }
+);
+
+const ariaLabel = computed(() => {
+    if (isExternalLink(url)) {
+        return `${linkLabel} (External link)`;
+    }
+
+    return linkLabel;
+});
+</script>

src/components/pageHeader.css.ts

@@ -16,7 +16,7 @@ export const pageHeader = style({
 });
 
 export const title = style({
-    margin: '0 0 0.75rem 0',
+    margin: '0 0 0.5rem 0',
     fontSize: sizes.medium
 });
 
@@ -25,10 +25,15 @@ export const highlight = style({
     color: secondaryAccent
 });
 
+export const meta = style({
+    fontSize: sizes.small
+});
+
 export const subTitle = style({
     margin: 0,
     fontSize: '1.2rem',
     fontWeight: 'normal',
+    marginBottom: sizes.small,
     color: `rgb(${vars.colors.sonicSilver})`,
     '@media': {
         '(prefers-color-scheme: dark)': {

src/components/pageHeader.vue

@@ -4,6 +4,9 @@
             <span :class="styles.highlight">{{ title }}</span>
         </h1>
         <h2 :class="styles.subTitle">{{ subTitle }}</h2>
+        <div :class="styles.meta">
+            <slot />
+        </div>
     </section>
 </template>
 

src/config.ts

@@ -17,18 +17,34 @@ type MailConfig = {
     to: string;
 };
 
+type ProjectsConfig = {
+    featuredTags: string[];
+};
+
+type BlogConfig = {
+    featuredTags: string[];
+};
+
 interface Config {
     url: string;
     seo: SEOConfig;
     mail: MailConfig;
-    featuredTags: string[];
+    blog: BlogConfig;
     palette: PaletteConfig;
+    projects: ProjectsConfig;
     pagination: PaginationConfig;
 }
 
 const config: Config = {
     url: 'https://nblackburn.uk',
-    featuredTags: ['design', 'music', 'game'],
+
+    projects: {
+        featuredTags: ['design', 'music', 'game']
+    },
+
+    blog: {
+        featuredTags: ['guide', 'thought']
+    },
 
     seo: {
         ref: 'nblackburn.uk'

src/config/nav.ts

@@ -7,6 +7,7 @@ export type NavItem = {
 export const nav: NavItem[] = [
     { id: 'home', title: 'Home', href: '/' },
     { id: 'projects', title: 'Projects', href: '/projects' },
+    { id: 'blog', title: 'Blog', href: '/blog' },
     { id: 'about', title: 'About', href: '/about' },
     { id: 'contact', title: 'Contact', href: '/contact' }
 ];