Added keystatic

astro.config.mjs

@@ -1,5 +1,17 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 
+import react from '@astrojs/react';
+import markdoc from '@astrojs/markdoc';
+import keystatic from '@keystatic/astro'
+
+import node from '@astrojs/node';
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [react(), markdoc(), keystatic()],
+
+  adapter: node({
+    mode: 'standalone',
+  }),
+});

keystatic.config.ts

@@ -0,0 +1,19 @@
+import { config, fields, collection } from '@keystatic/core';
+
+export default config({
+  storage: {
+    kind: 'local',
+  },
+  collections: {
+    posts: collection({
+      label: 'Posts',
+      slugField: 'title',
+      path: 'src/content/posts/*',
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        content: fields.markdoc({ label: 'Content' }),
+      },
+    }),
+  },
+});

package.json

@@ -11,18 +11,27 @@
     "lint:fix": "eslint . --ext .js,.ts,.astro --fix"
   },
   "dependencies": {
+    "@astrojs/markdoc": "^0.15.5",
+    "@astrojs/node": "^9.4.3",
+    "@astrojs/react": "^4.3.0",
     "@fontsource-variable/geist": "^5.2.6",
     "@fontsource/blaka": "^5.2.6",
     "@fontsource/iosevka": "^5.2.5",
     "@fontsource/iosevka-aile": "^5.2.5",
-    "astro": "^5.13.5"
+    "@keystatic/astro": "^5.0.6",
+    "@keystatic/core": "^0.5.48",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "astro": "^5.13.5",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",
+    "@fullhuman/postcss-purgecss": "^7.0.2",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
     "astro-eslint-parser": "^1.2.2",
-    "cssnano": "^7.1.1",
     "eslint": "^9.34.0",
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-markdown": "^5.1.0",

postcss.config.js

@@ -1,16 +1,36 @@
-export default {
-  plugins: {
-    "postcss-import": {},
-    "postcss-preset-env": {
-      stage: 1,
-      features: {
-        "nesting-rules": false,
-      },
+// postcss.config.js
+import postcssImport from 'postcss-import'
+import postcssPresetEnv from 'postcss-preset-env'
+import postcssUtilities from 'postcss-utilities'
+import postcssNesting from 'postcss-nesting'
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss'
+
+const plugins = [
+  postcssImport(),
+  postcssPresetEnv({
+    stage: 1,
+    features: {
+      "nesting-rules": false,
     },
-    "postcss-utilities": {},
-    "postcss-nesting": {},
-    cssnano:
-    // eslint-disable-next-line no-undef
-      process.env.NODE_ENV === "production" ? { preset: "advanced" } : false,
-  },
-};
+  }),
+  postcssUtilities(),
+  postcssNesting(),
+]
+
+if (process.env.NODE_ENV === "production") {
+  console.log("Adding PurgeCSS")
+  plugins.push(
+    purgeCSSPlugin({
+      content: [
+        "./src/**/*.{astro,html,js,jsx,ts,tsx}",
+        "./content/**/*.{md,mdx}",
+      ],
+      safelist: ["html", "body"],
+      variables: true
+    })
+  )
+}
+
+export default {
+  plugins
+}

src/styles/base/elements.css

@@ -0,0 +1,10 @@
+body {
+    background-color: var(--color-surface-base);
+    font-family: var(--typo-font-body);
+    font-feature-settings: "kern" 1;
+    font-weight: var(--typo-weight-regular);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: var(--typo-leading-comfortable);
+    color: var(--color-text-primary);
+}

tsconfig.json

@@ -1,5 +1,14 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
-}
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}