feat: Migrate blog from medium to ghost cms

.env.example

@@ -0,0 +1,2 @@
+NUXT_PUBLIC_GHOST_KEY=ghost_pro_content_api_key
+NUXT_WEBHOOK_SECRET=Webhook_secret

components/Blog/Card.vue

@@ -6,22 +6,24 @@ defineProps<{
   item: Item
   showSnippet?: boolean
 }>()
+// Change the path as required
+const fallbackImage = '/img/fallback.png'
+function handleImageError(event: Event) {
+  const target = event.target as HTMLImageElement
+  target.src = fallbackImage
+}
 </script>
 
 <template>
   <Card class="blog-card overflow-clip">
     <template #header>
-      <AppLink :href="item.link" class="aspect-ratio-video overflow-hidden">
-        <img
-          :src="item.images?.[0]"
-          loading="lazy"
-          :alt="item.title"
-          class="h-full w-full object-cover object-left"
-        >
-      </AppLink>
+      <NuxtLink :to="item.link" class="aspect-ratio-video overflow-hidden">
+        <img :src="item.images?.[0] || fallbackImage" loading="lazy" :alt="item.title"
+          class="h-full w-full object-cover object-left" @error="handleImageError">
+      </NuxtLink>
     </template>
     <article>
-      <AppLink :href="item.link" style="display:block">
+      <NuxtLink :to="item.link" style="display:block">
         <div class="flex flex-col gap-2">
           <Heading type="h5" class="font-medium">
             {{ item.title }}
@@ -33,7 +35,7 @@ defineProps<{
             {{ item.snippet }}
           </p>
         </div>
-      </AppLink>
+      </NuxtLink>
     </article>
   </Card>
 </template>

composables/useGhostClient.ts

@@ -0,0 +1,15 @@
+import GhostContentAPI from '@tryghost/content-api'
+
+export function useGhostClient() {
+  const config = useRuntimeConfig()
+  const { url, key, version } = config.public.ghost
+
+  // Create API instance with site credentials
+  const api = new GhostContentAPI({
+    url,
+    key,
+    version,
+  })
+
+  return { api }
+}

nuxt.config.ts

@@ -8,6 +8,9 @@ export default defineNuxtConfig({
       scrollBehaviorType: 'smooth',
     },
   },
+  routeRules: {
+    '/blog/**': { isr: 3600 }, // Regenerate every hour
+  },
 
   css: [
     '@unocss/reset/tailwind.css',
@@ -20,15 +23,15 @@ export default defineNuxtConfig({
     '@nuxtjs/fontaine',
     '@nuxtjs/plausible',
     '@nuxtjs/seo',
-    '@nuxtjs/robots',  
+    '@nuxtjs/robots',
     '@nuxtjs/sitemap',
     '@nuxt/image',
     '@nuxt/scripts',
   ],
 
   nitro: {
     output: {
-      dir: 'dist' 
+      dir: 'dist'
     },
     // Add CF Pages compatibility
     preset: 'cloudflare-pages',
@@ -79,24 +82,24 @@ export default defineNuxtConfig({
     // payloadExtraction: false,
   },
 
-// Replace your existing sitemap configuration with this:
+  // Replace your existing sitemap configuration with this:
   sitemap: {
     // Enable image discovery for better SEO
     discoverImages: true,
-    
+
     // Exclude these routes from the sitemap
     exclude: [
       '/__nuxt_island/**',
       '/api/**',        // API routes
       '/_nuxt/**',      // Build assets
     ],
-    
+
     // Default settings for all pages (removed lastmod anti-pattern)
     defaults: {
       changefreq: 'monthly',
       priority: 0.7,
     },
-    
+
     // Custom configuration for specific routes
     routes: async () => {
       return [
@@ -106,7 +109,7 @@ export default defineNuxtConfig({
           changefreq: 'weekly',
           priority: 1.0,
         },
-        
+
         // Main navigation pages - high priority for sitelinks
         {
           url: '/referrals',
@@ -140,7 +143,7 @@ export default defineNuxtConfig({
         },
       ]
     },
-    
+
     // Split large sitemaps
     sitemapSize: 45000, // Max URLs per sitemap file
   },
@@ -176,10 +179,15 @@ export default defineNuxtConfig({
   },
 
   runtimeConfig: {
+    webhookSecret: '', // Maps to NUXT_WEBHOOK_SECRET 
     // public runtime config
     public: {
-      // feed URL used for /api/blog
-      blogFeedUrl: 'https://medium.com/feed/@storacha',
+      // Ghost CMS settings used for /blog
+      ghost: {
+        url: 'https://storacha-network.ghost.io',
+        key: '', // Maps to NUXT_PUBLIC_GHOST_KEY
+        version: 'v6.0',
+      },
       consoleUrl: import.meta.env.NUXT_PUBLIC_CONSOLE_URL || 'https://console.storacha.network',
     },
   },

package.json

@@ -28,6 +28,7 @@
     "@nuxtjs/fontaine": "^0.5.0",
     "@nuxtjs/plausible": "^1.2.0",
     "@nuxtjs/seo": "^3.0.3",
+    "@tryghost/content-api": "^1.12.0",
     "@unhead/vue": "^2.0.10",
     "@unocss/nuxt": "^66.2.3",
     "@unocss/preset-icons": "^0.63.6",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@nuxt/eslint": "^1.4.1",
+    "@types/tryghost__content-api": "^1.3.17",
     "@unocss/eslint-config": "^0.63.6",
     "eslint": "^9.13.0",
     "nuxt": "^3.17.5",