Add support to add a blog using Ghost, creating a separated blog page
This commit is contained in:
parent
9d714e3c69
commit
7b3b7b386a
10 changed files with 127 additions and 28 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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/"
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
8
src/library/ghost.ts
Normal 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',
|
||||
})
|
51
src/pages/blog/[...slug].astro
Normal file
51
src/pages/blog/[...slug].astro
Normal 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>
|
6
src/pages/blog/index.astro
Normal file
6
src/pages/blog/index.astro
Normal file
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
// Layout
|
||||
import Default from "@layouts/Document.astro";
|
||||
---
|
||||
|
||||
<Default Title="" Blog></Default>
|
|
@ -7,6 +7,7 @@
|
|||
"@assets/*": ["src/assets/*"],
|
||||
"@components/*": ["src/components/*"],
|
||||
"@layouts/*": ["src/layouts/*"],
|
||||
"@library/*": ["src/library/*"],
|
||||
"@styles/*": ["src/styles/*"],
|
||||
"@config": ["./config.json"]
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue