Set up local blog

Author: drwpow

cspell.config.yaml

@@ -33,3 +33,4 @@ ignorePaths:
 ignoreRegExpList:
   - <!--.*--> # ignore HTML comments
   - '@[A-Za-z0-9-_]+' # ignore social handles
+  - '"[a-z0-9-]+"' # ignore SLUGS

cspell/terminology.txt

@@ -33,6 +33,7 @@ orcid
 pagefind
 prophoto-rgb
 respec
+roundtable
 secno
 shiki
 sotd
@@ -43,4 +44,4 @@ tocsidebar
 unbuilt
 wireframing
 workstreams
-wght
+wght

www/src/content.config.ts

@@ -0,0 +1,35 @@
+import { z, defineCollection } from 'astro:content';
+import { file, glob } from 'astro/loaders';
+
+const DATE = z
+  .string()
+  .or(z.date())
+  .transform((val) => new Date(val));
+
+const w3c = defineCollection({
+  loader: file('src/content/w3c.json'),
+  schema: () =>
+    z.object({
+      title: z.string(),
+      date: DATE,
+      author: z.string(),
+      url: z.string(),
+    }),
+});
+
+const posts = defineCollection({
+  loader: glob({ pattern: ['*.md'], base: 'src/content/posts' }),
+  schema: () =>
+    z.object({
+      title: z.string(),
+      date: DATE,
+      description: z.optional(z.string()),
+      author: z.string(),
+      tags: z.optional(z.array(z.string())),
+    }),
+});
+
+export const collections = {
+  posts,
+  w3c,
+};

www/src/content/config.ts

@@ -0,0 +1,51 @@
+[
+  {
+    "id": "call-to-read-the-first-public-editors-draft-and-share-feedback",
+    "title": "Call to read the First Public Editor's Draft and share feedback",
+    "date": "2021-09-23",
+    "author": "Kaelig Deloumeau-Prigent",
+    "url": "https://www.w3.org/community/design-tokens/2021/09/23/call-to-read-the-first-public-editors-draft-and-share-feedback/"
+  },
+  {
+    "id": "upcoming-event-tool-vendor-roundtable",
+    "title": "Upcoming event: design tool vendor roundtable",
+    "date": "2021-03-09",
+    "author": "Kaelig Deloumeau-Prigent",
+    "url": "https://www.w3.org/community/design-tokens/2021/03/09/upcoming-event-design-tool-vendor-roundtable/"
+  },
+  {
+    "id": "status-update-february-2021",
+    "title": "Status update (February 2021)",
+    "date": "2021-02-15",
+    "author": "James Nash",
+    "url": "https://www.w3.org/community/design-tokens/2021/02/15/status-update-february-2021/"
+  },
+  {
+    "id": "first-editors-draft-shared-with-design-tooling-vendors",
+    "title": "First Editor's Draft shared with design tooling vendors",
+    "date": "2021-04-17",
+    "author": "Kaelig Deloumeau-Prigent",
+    "url": "https://www.w3.org/community/design-tokens/2021/04/17/first-editors-draft-shared-with/"
+  },
+  {
+    "id": "call-to-implement-the-second-editors-draft-and-share-feedback",
+    "title": "Call to implement the Second Editors' Draft and share feedback",
+    "date": "2022-06-14",
+    "author": "Kaelig Deloumeau-Prigent",
+    "url": "https://www.w3.org/community/design-tokens/2022/06/14/call-to-implement-the-second-editors-draft-and-share-feedback/"
+  },
+  {
+    "id": "request-for-comments-new-resolver-specification-groups-aliases-updates",
+    "title": "Request For Comments: new Resolver specification, groups & Aliases updates",
+    "date": "2025-09-12",
+    "author": "Kaelig Deloumeau-Prigent",
+    "url": "https://www.w3.org/community/design-tokens/2025/09/12/request-for-comments-new-resolver-specification-groups-aliases-updates/"
+  },
+  {
+    "id": "design-tokens-specification-reaches-first-stable-version",
+    "title": "Design Tokens specification reaches first stable version",
+    "date": "2025-10-28",
+    "author": "Kaelig Deloumeau-Prigent",
+    "url": "https://www.w3.org/community/design-tokens/2025/10/28/design-tokens-specification-reaches-first-stable-version/"
+  }
+]

www/src/content/posts.ts

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

www/src/content/w3c.json

@@ -0,0 +1,60 @@
+---
+import { getCollection } from 'astro:content';
+import { getW3FormattedDate, getFormattedDate } from '@/utils/date.utils';
+import Base from '@/layouts/Base.astro';
+import Text from '@/components/Text/Text.astro';
+import Stack from '@/components/Stack/Stack.astro';
+import { Icon } from 'astro-icon/components';
+
+const title = 'Blog';
+
+const posts = await getCollection('posts');
+const w3c = await getCollection('w3c');
+
+const sortedPosts = [...posts, ...w3c].sort(
+  (a, b) => b.data.date.getTime() - a.data.date.getTime(),
+);
+---
+
+<Base title={title}>
+  <Stack as="ul" gap={12} axis="y" class="blog-list u-list-style:none">
+    {
+      sortedPosts.map((post) => (
+        <li>
+          <Stack as="article" gap={2} class="article">
+            {post.collection === 'w3c' ? (
+              <a href={post.data.url} target="_blank">
+                {post.data.title}
+                <Icon
+                  name="external"
+                  aria-label="External link"
+                  role="graphics-symbol img"
+                />
+              </a>
+            ) : (
+              <a href={`/blog/${post.id}`}>{post.data.title}</a>
+            )}
+            <Text as="p" variant="sm">
+              <time datetime={getW3FormattedDate(post.data.date)}>
+                {getFormattedDate(post.data.date)}
+              </time>
+            </Text>
+          </Stack>
+        </li>
+      ))
+    }
+  </Stack>
+</Base>
+
+<style lang="scss">
+  .article {
+    p {
+      margin: 0;
+    }
+  }
+
+  .blog-list {
+    margin: 0;
+    padding: 0;
+  }
+</style>