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

This commit is contained in:
Korbs 2024-12-23 16:46:42 -05:00
parent 9d714e3c69
commit 7b3b7b386a
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
10 changed files with 127 additions and 28 deletions

View file

@ -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

View file

@ -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

View file

@ -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/"

View file

@ -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",

View file

@ -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>

View file

@ -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> -->

8
src/library/ghost.ts Normal file
View file

@ -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',
})

View file

@ -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>

View file

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

View file

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