Implement TinaCms

.gitignore

@@ -30,3 +30,6 @@ pnpm-debug.log*
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+
+node_modules
+.env

astro.config.ts

@@ -6,6 +6,20 @@ import remarkCollapse from "remark-collapse";
 import sitemap from "@astrojs/sitemap";
 import { SITE } from "./src/config";
 
+const tina = ({
+  directiveName = 'tina'
+} = {}) => ({
+  name: 'tina-cms',
+  hooks: {
+    'astro:config:setup': ({ addClientDirective, opts }) => {
+      addClientDirective({
+        name: directiveName,
+        entrypoint: './client-directives/tina.ts',
+      })
+    }
+  }
+})
+
 // https://astro.build/config
 export default defineConfig({
   site: SITE.website,
@@ -15,6 +29,7 @@ export default defineConfig({
     }),
     react(),
     sitemap(),
+    tina(),
   ],
   markdown: {
     remarkPlugins: [

client-directives/tina.ts

@@ -0,0 +1,17 @@
+/**
+ * source file: https://github.com/dawaltconley/tina-astro
+ *
+ * client-directives/tina.mjs
+ * @type {import('astro').ClientDirective}
+ */
+export default (load, opts, el) => {
+  try {
+    const isEditor =
+      window.frameElement && window.frameElement.id === 'tina-iframe'
+    if (isEditor) {
+      load().then((hydrate) => hydrate())
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}

docker-compose.yml

@@ -5,7 +5,8 @@ services:
     image: node:20
     ports:
       - 4321:4321
+      - 4001:4001
     working_dir: /app
-    command: npm run dev -- --host 0.0.0.0
+    command: npm run dev
     volumes:
       - ./:/app