Set up local blog

Author: drwpow

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-rountable",
+    "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

@@ -1,45 +1,43 @@
 ---
+import { getCollection } from 'astro:content';
 import { getW3FormattedDate, getFormattedDate } from '@/utils/date.utils';
-import { posts } from '@/content/posts';
 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 sortedPosts = posts.sort(
-  (a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf(),
-);
+const posts = await getCollection('posts');
+const w3c = await getCollection('w3c');
 
-const formattedPosts = sortedPosts.map((post) => {
-  const formattedPost = {
-    title: post.title,
-    author: post.author,
-    w3FormattedDate: getW3FormattedDate(post.date),
-    formattedDate: getFormattedDate(post.date),
-    url: post.url?.startsWith('http') ? post.url : `/posts/${post.url}/`,
-  };
-  return formattedPost;
-});
+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">
     {
-      formattedPosts.map((post) => (
+      sortedPosts.map((post) => (
         <li>
           <Stack as="article" gap={2} class="article">
-            <a href={post.url} target="_blank">
-              {post.title}
-              <Icon
-                name="external"
-                aria-label="External link"
-                role="graphics-symbol img"
-              />
-            </a>
+            {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={post.w3FormattedDate}>{post.formattedDate}</time>
+              <time datetime={getW3FormattedDate(post.data.date)}>
+                {getFormattedDate(post.data.date)}
+              </time>
             </Text>
           </Stack>
         </li>