Add blog app scaffolding with remark plugins

apps/blog/astro.config.mjs

@@ -0,0 +1,19 @@
+import { defineConfig } from 'astro/config';
+import remarkDirective from 'remark-directive';
+import remarkGfm from 'remark-gfm';
+import remarkSlug from 'remark-slug';
+import remarkSmartypants from 'remark-smartypants';
+import remarkAside from './src/plugins/remark-aside.ts';
+
+export default defineConfig({
+  output: 'static',
+  markdown: {
+    remarkPlugins: [
+      remarkGfm,
+      remarkDirective,
+      remarkAside,
+      remarkSlug,
+      remarkSmartypants
+    ]
+  }
+});

apps/blog/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@ily/blog",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev --port 4322",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "astro": "^5.16.13"
+  },
+  "devDependencies": {
+    "remark-directive": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-slug": "^7.0.1",
+    "remark-smartypants": "^3.0.2"
+  }
+}

apps/blog/src/content.config.ts

@@ -0,0 +1,13 @@
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
+
+const posts = defineCollection({
+  loader: glob({ pattern: '**/*.md', base: './src/content/posts' }),
+  schema: z.object({
+    title: z.string(),
+    date: z.coerce.date()
+  })
+});
+
+export const collections = { posts };

apps/blog/src/plugins/remark-aside.ts

@@ -0,0 +1,14 @@
+import { visit } from 'unist-util-visit';
+import type { Root } from 'mdast';
+
+export default function remarkAside() {
+  return (tree: Root) => {
+    visit(tree, 'textDirective', (node: any) => {
+      if (node.name !== 'aside') return;
+
+      const data = node.data || (node.data = {});
+      data.hName = 'span';
+      data.hProperties = { class: 'aside' };
+    });
+  };
+}

apps/blog/src/styles/global.css

@@ -0,0 +1,20 @@
+body {
+  max-width: 38rem;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.aside {
+  display: block;
+  font-size: 0.9rem;
+}
+
+@media (min-width: 63rem) {
+  .aside {
+    display: inline;
+    float: right;
+    position: relative;
+    width: 10rem;
+    margin-right: -12rem;
+  }
+}