Prepare switch to Ghost

astro.config.mjs

@@ -10,7 +10,10 @@ export default defineConfig({
   // Slug issue if not enabled
   redirects: {
     '/docs/': '/docs/zorn/introduction/',
-    '/docs/minpluto': '/docs/zorn/introduction/' // ?
+    '/docs/minpluto': '/docs/zorn/introduction/',
+    '/blog/minpluto-and-its-future-goals': '/blog/673e823bd79b8500015f4763',
+    '/blog/zen-browser-worth-the-hype': '/blog/673e81f4d79b8500015f4755',
+    '/blog/desktop-development-stops': '/blog/673e817fd79b8500015f474a',
   },
   integrations: [markdoc(), mdx(),
     betterImageService({
@@ -71,7 +74,7 @@ export default defineConfig({
       disallow: '/'
     }]
   }), vue()],
-  output: 'static',
+  output: 'server',
   server: {
     port: 2014,
     host: true

src/components/blog/posts.astro

@@ -45,59 +45,3 @@ if (Astro.url.pathname = '/blog/recommended-reading/') {
     ))
   }
 </div>
-
-
-<style lang="scss">
-  .posts {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    grid-gap: 12px;
-    .card-post {
-      border-radius: 6px;
-      border: 1px var(--border-color) solid;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      &:hover {
-        border-color: var(--border-color-hover);
-      }
-      img {
-        width: 100%;
-        border-radius: 6px 6px 0px 0px;
-        aspect-ratio: 16/9;
-        object-fit: cover;
-      }
-      #bg {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-        opacity: 1;
-        z-index: -1;
-        border-radius: 8px;
-      }
-      .card-post-content {
-        padding: 12px 16px 32px 16px;
-        backdrop-filter: blur(24px) brightness(0.3);
-        height: 100%;
-        border-radius: 0px 0px 6px 6px;
-        p {
-          margin: 0px;
-          font-size: 14px;
-          font-weight: bold;
-        }
-        #date {
-          font-size: 12px;
-          text-align: right;
-          color: gray;
-          font-weight: normal;
-          position: absolute;
-          bottom: 0px;
-          right: 0px;
-          margin: 6px 24px;
-        }
-      }
-    }
-  }
-</style>

src/pages/blog/[...slug].astro

@@ -1,37 +1,35 @@
 ---
+// Layout
+import Default from "@layouts/Default.astro";
+
+// Components
+import Hero from "@components/Hero.astro";
+import Heading from "@components/Heading.astro";
+import Posts from "@components/blog/posts.astro";
+import LargeCard from "@components/Feature.astro";
+import {Zorn} from "@minpluto/zorn"
+
 // Icons
 import { Calendar } from "@iconoir/vue";
 
-// Get Colletion and Slug
+const Id = Astro.url.href.split("/blog/").pop();
-import { getCollection, getEntry } from "astro:content";
+const GhostPostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/' + Id + '/?key=bef2ed15d9e38f7703be9412b3'
-import Default from "@layouts/Default.astro";
+const GhostPostResponse = await fetch(GhostPostFetch);
-
+const GhostPost = await GhostPostResponse.json();
-const { slug } = Astro.params;
-if (!slug) throw new Error("Slug not found");
-const post = await getEntry("posts", slug);
-
-if (!post) throw new Error("No post found for this slug");
-const { Content } = await post.render();
-
-/// Generate static pages
-export async function getStaticPaths() {
-  const posts = await getCollection("posts");
-  return posts.map((post) => ({ params: { slug: post.slug } }));
-}
-export const prerender = true;
 ---
 
+
 <Default MobileTitle="Blog" NoSubHeader>
   <slot slot="body">
     <div class="blog-post">
-      <img width="100%" class="blog-banner" src={post.data.image} />
+      <img width="100%" class="blog-banner" src={GhostPost.posts[0].custom_excerpt} />
-      <h1>{post.data.title}</h1>
+      <h1>{GhostPost.posts[0].title}</h1>
       <p id="date">
         <Calendar />
-        {new Date(post.data.date).toLocaleDateString()}
+        {new Date(GhostPost.posts[0].published_at).toLocaleDateString()}
       </p>
       <div class="blog-post-content">
-        <Content />
+        <Fragment set:html={GhostPost.posts[0].html}
       </div>
     </div>
   </slot>
@@ -83,6 +81,7 @@ export const prerender = true;
       display: block;
       width: 100% !important;
       max-width: 100% !important;
+      height: fit-content;
     }
   }
 </style>

src/pages/blog/index.astro

@@ -1,22 +1,91 @@
 ---
 // Layout
-import Default from "@layouts/Default.astro"
+import Default from "@layouts/Default.astro";
 
 // Components
-import Posts from "@components/blog/posts.astro"
+import Hero from "@components/Hero.astro";
+import Heading from "@components/Heading.astro";
+import Posts from "@components/blog/posts.astro";
+import LargeCard from "@components/Feature.astro";
+import {Zorn} from "@minpluto/zorn"
 
 // List Posts
-import { getCollection } from "astro:content"
+const GhostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/?key=bef2ed15d9e38f7703be9412b3'
-const posts = await getCollection("posts")
+const GhostResponse = await fetch(GhostFetch);
+const Ghost = await GhostResponse.json();
+
+// Icons
+import { BookmarkBook, ReportColumns } from "@iconoir/vue";
 ---
 
-<Default MobileTitle="Blog">
+<Default MobileTitle="SudoVanilla" NoSubHeader>
-    <Fragment slot="sub-header">
+  <Fragment slot="body">
-      <p class="header-sub-service"><span id="show-w-scroll">SudoVanilla</span> Blog</p>
+    <div class="posts">
-      <div>
+      {Ghost.posts.map((post) =>
-        <a href="/blog/">Posts</a>
+        <a href={'/blog/' + post.id} class="card-post">
-        <a href="/blog/recommended-reading/">Recommended Reading</a>
+          <img id="bg" src={post.custom_excerpt.image} />
-      </div>
+          <img src={post.custom_excerpt} />
-    </Fragment>
+          <div class="card-post-content">
-    <Fragment slot="body"><Posts GetPosts={posts} PrefixSlug="/blog/"/></Fragment>
+          <p><strong>{post.title}</strong></p>
+          <p id="date">{new Date(post.published_at).toLocaleDateString()}</p>
+          </div>
+        </a>
+      )}
+    </div>
+  </Fragment>
 </Default>
+
+<style lang="scss">
+    .posts {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      grid-gap: 12px;
+      .card-post {
+        border-radius: 6px;
+        border: 1px var(--border-color) solid;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        &:hover {
+          border-color: var(--border-color-hover);
+        }
+        img {
+          width: 100%;
+          border-radius: 6px 6px 0px 0px;
+          aspect-ratio: 16/9;
+          object-fit: cover;
+        }
+        #bg {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
+          opacity: 1;
+          z-index: -1;
+          border-radius: 8px;
+        }
+        .card-post-content {
+          padding: 12px 16px 32px 16px;
+          backdrop-filter: blur(24px) brightness(0.3);
+          height: 100%;
+          border-radius: 0px 0px 6px 6px;
+          p {
+            margin: 0px;
+            font-size: 14px;
+            font-weight: bold;
+          }
+          #date {
+            font-size: 12px;
+            text-align: right;
+            color: gray;
+            font-weight: normal;
+            position: absolute;
+            bottom: 0px;
+            right: 0px;
+            margin: 6px 24px;
+          }
+        }
+      }
+    }
+  </style>

src/pages/index.astro

@@ -10,8 +10,9 @@ import LargeCard from "@components/Feature.astro";
 import {Zorn} from "@minpluto/zorn"
 
 // List Posts
-import { getCollection } from "astro:content";
+const GhostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/?key=bef2ed15d9e38f7703be9412b3'
-const posts = await getCollection("posts");
+const GhostResponse = await fetch(GhostFetch);
+const Ghost = await GhostResponse.json();
 
 // Icons
 import { BookmarkBook, ReportColumns } from "@iconoir/vue";
@@ -31,7 +32,18 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
         <BookmarkBook width={32} height={32} />
       </slot>
     </Heading>
-    <Posts GetPosts={posts} PrefixSlug="/blog/"/>
+    <div class="posts">
+      {Ghost.posts.map((post) =>
+        <a href={'/blog/' + post.id} class="card-post">
+          <img id="bg" src={post.custom_excerpt.image} />
+          <img src={post.custom_excerpt} />
+          <div class="card-post-content">
+          <p><strong>{post.title}</strong></p>
+          <p id="date">{new Date(post.published_at).toLocaleDateString()}</p>
+          </div>
+        </a>
+      )}
+    </div>
     <Heading Title="Projects" Description="What I've Made">
       <slot slot="icon">
         <ReportColumns width={32} height={32} />
@@ -78,4 +90,60 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
       CTA_Primary_Link="/docs/penpot-desktop/introduction/"
     />
   </Fragment>
-</Default>
+</Default>
+
+
+<style lang="scss">
+  .posts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-gap: 12px;
+    .card-post {
+      border-radius: 6px;
+      border: 1px var(--border-color) solid;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      &:hover {
+        border-color: var(--border-color-hover);
+      }
+      img {
+        width: 100%;
+        border-radius: 6px 6px 0px 0px;
+        aspect-ratio: 16/9;
+        object-fit: cover;
+      }
+      #bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        opacity: 1;
+        z-index: -1;
+        border-radius: 8px;
+      }
+      .card-post-content {
+        padding: 12px 16px 32px 16px;
+        backdrop-filter: blur(24px) brightness(0.3);
+        height: 100%;
+        border-radius: 0px 0px 6px 6px;
+        p {
+          margin: 0px;
+          font-size: 14px;
+          font-weight: bold;
+        }
+        #date {
+          font-size: 12px;
+          text-align: right;
+          color: gray;
+          font-weight: normal;
+          position: absolute;
+          bottom: 0px;
+          right: 0px;
+          margin: 6px 24px;
+        }
+      }
+    }
+  }
+</style>