Add support to add a blog using Ghost, creating a separated blog page

Dockerfile

@@ -8,7 +8,7 @@ LABEL org.opencontainers.image.description="Documentations built on Astro"
 LABEL org.opencontainers.image.licenses="MIT NON-AI License"
 LABEL org.opencontainers.image.url="https://butterflyvu.docs.sudovanilla.org/"
 LABEL org.opencontainers.image.source="https://ark.sudovanilla.org/Korbs/ButterflyVu/"
-LABEL org.opencontainers.image.version="0.1.8"
+LABEL org.opencontainers.image.version="0.1.9"
 
 # Copy Files
 WORKDIR /app

astro.config.mjs

@@ -2,14 +2,12 @@ import { defineConfig } from 'astro/config'
 import vue from "@astrojs/vue"
 
 // Settings
-import { SiteSettings } from './config.json'
+import { SiteSettings, Ghost } from './config.json'
 
 // Integrations
 import mdx from '@astrojs/mdx'
 import pagefind from "astro-pagefind"
-
 import compressor from 'astro-compressor';
-
 import pageInsight from 'astro-page-insight';
 
 // Astro Configuration

config.json

@@ -9,6 +9,11 @@
         "WhiteLabel": "true",
         "FooterVersion": "true"
     },
+    "Ghost": {
+        "Enabled": true,
+        "Instance": "https://minpluto.ghost.sudovanilla.org",
+        "Key": "22f4a31cd6f8cc0b2a2718a0cd"
+    },
     "FeelbackConfig": {
         "Enabled": false,
         "ContentSetId": "566e8b96-c65e-4bf7-87df-d22a9f4994a2",
@@ -17,6 +22,10 @@
         "Answer": "Thank you for your feedback."
     },
     "HeaderItems": [
+        {
+            "text": "Blog",
+            "link": "/blog/"
+        },
         {
             "text": "Syntax",
             "link": "/syntax/"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "butterflyvu",
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "license": "MIT NON-AI License",
   "author": {
     "name": "SudoVanilla"
@@ -33,6 +33,7 @@
     "@astrojs/vue": "^5.0.3",
     "@iconoir/vue": "^7.10.1",
     "@minpluto/zorn": "^0.4.83",
+    "@tryghost/content-api": "^1.11.21",
     "astro": "5.1.1",
     "astro-analytics": "^2.7.0",
     "astro-bun-adapter": "^1.0.2",

src/components/Sidebar.astro

@@ -1,28 +1,46 @@
 ---
 // Settings
 import { SiteSettings, SidebarItems } from '@config'
+
+// Properties
+const { Blog } = Astro.props
+
+// Get Posts
+import { ghostClient } from "@library/ghost";
+const posts = await ghostClient.posts
+  .browse({
+    limit: "all",
+  })
+  .catch(() => {null})
 ---
 
 <div class="sidebar">
-    <div class="desktop-s">
-        {SidebarItems.map((item) => (
-            item.heading ?
-                <h2>{item.heading}</h2>
-                :
-                <a href={
-                    SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link
-                }>
-                    {item.text}
-                    {() => {
-                        if (item.badge === undefined) {
-                            return null
-                        } else {
-                            return <span class={'sidebar-badge badge-variant-' + item.badge_variant}>{item.badge}</span>
-                        }
-                    }}
-                </a>
-        ))}    
-    </div>
+    {Blog ? <h2>Blog</h2> : null}
+    {Blog ?
+        posts.map((post) => (
+            <a href={'/blog/' + post.slug}>{post.title}</a>
+        ))
+        :
+        <div class="desktop-s">
+            {SidebarItems.map((item) => (
+                item.heading ?
+                    <h2>{item.heading}</h2>
+                    :
+                    <a href={
+                        SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link
+                    }>
+                        {item.text}
+                        {() => {
+                            if (item.badge === undefined) {
+                                return null
+                            } else {
+                                return <span class={'sidebar-badge badge-variant-' + item.badge_variant}>{item.badge}</span>
+                            }
+                        }}
+                    </a>
+            ))}
+        </div>
+    }
 
     <details class="mobile-s">
         <summary>Menu</summary>

src/layouts/Document.astro

@@ -3,7 +3,7 @@
 import { SiteSettings, FeelbackConfig } from '@config'
 
 // Properties
-const { frontmatter, Title, Feedback, Feelback } = Astro.props
+const { frontmatter, Title, Blog, Feedback, Feelback } = Astro.props
 
 // Components
 import Head from '@components/global/Head.astro'
@@ -24,13 +24,20 @@ import "@styles/feelback.css"
 import "@styles/prism.css"
 ---
 
-<Head Title={frontmatter.Title + ' | ' + SiteSettings.SiteName}/>
+
+
+{Blog ?
+    <Head Title={Title + ' | ' + SiteSettings.SiteName}/>
+    :
+    <Head Title={frontmatter.Title + ' | ' + SiteSettings.SiteName}/>
+}
+
 <Header/>
 <div class="page">
     <article>
-        <Sidebar/>
+        <Sidebar Blog={Blog}/>
         <div class="document">
-            <h1>{frontmatter.Title}</h1>
+            {Blog ? <h1>{Title}</h1> : <h1>{frontmatter.Title}</h1>}
             <slot/>
             <!-- <hr/>
             <p>Last Updated: null</p> -->

src/library/ghost.ts

@@ -0,0 +1,8 @@
+import GhostContentAPI from '@tryghost/content-api'
+import {Ghost} from "@config"
+
+export const ghostClient = new GhostContentAPI({
+    url: Ghost.Instance,
+    key: Ghost.Key,
+    version: 'v5.0',
+})

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

@@ -0,0 +1,51 @@
+---
+// Layout
+import Default from "@layouts/Document.astro";
+
+// Settings
+import { Ghost } from '@config'
+
+// Fetch Post (Ghost)
+import { ghostClient } from "@library/ghost";
+
+export async function getStaticPaths() {
+  const posts = await ghostClient.posts
+    .browse({
+      limit: "all",
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+
+  return posts.map((post) => {
+    return {
+      params: {
+        slug: post.slug,
+      },
+      props: {
+        post: post,
+      },
+    };
+  });
+}
+
+const { post } = Astro.props;
+export const prerender = true;
+
+const Id = Astro.url.href.split("?postid=").pop();
+const GhostPostFetch = Ghost.Instance + "/ghost/api/content/posts/" + Id + "/?key=" + Ghost.Key;
+const GhostPostResponse = await fetch(GhostPostFetch);
+const GhostPost = await GhostPostResponse.json();
+---
+
+<Default Title={post.title} Blog>
+    <div class="blog-post">
+        <img
+            width="100%"
+            class="blog-banner"
+            src={'https://image.proxy.sudovanilla.org/1200,fit/' + post.feature_image}
+        />
+        <p id="date">{new Date(post.published_at).toLocaleDateString()}</p>
+        <Fragment set:html={post.html} />
+    </div>
+</Default>

src/pages/blog/index.astro

@@ -0,0 +1,6 @@
+---
+// Layout
+import Default from "@layouts/Document.astro";
+---
+
+<Default Title="" Blog></Default>

tsconfig.json

@@ -7,6 +7,7 @@
       "@assets/*": ["src/assets/*"],
       "@components/*": ["src/components/*"],
       "@layouts/*": ["src/layouts/*"],
+      "@library/*": ["src/library/*"],
       "@styles/*": ["src/styles/*"],
       "@config": ["./config.json"]
     }