Korbs/sudovanilla-website
1
Fork 0
Code Issues Pull requests Activity

Prepare switch to Ghost

Browse source
This commit is contained in:
Korbs 2024-11-20 20:09:56 -05:00
parent 69e6a5e878
commit f497bc20ef
5 changed files with 179 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
astro.config.mjs
View file

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

56
src/components/blog/posts.astro
View file

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

41
src/pages/blog/[slug].astro → src/pages/blog/[...slug].astro
View file

@ -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
import { getCollection, getEntry } from "astro:content";
import Default from "@layouts/Default.astro";
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;
const Id = Astro.url.href.split("/blog/").pop();
const GhostPostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/' + Id + '/?key=bef2ed15d9e38f7703be9412b3'
const GhostPostResponse = await fetch(GhostPostFetch);
const GhostPost = await GhostPostResponse.json();
---
<Default MobileTitle="Blog" NoSubHeader>
<slot slot="body">
<div class="blog-post">
<img width="100%" class="blog-banner" src={post.data.image} />
<h1>{post.data.title}</h1>
<img width="100%" class="blog-banner" src={GhostPost.posts[0].custom_excerpt} />
<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>

95
src/pages/blog/index.astro
View file

@ -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 posts = await getCollection("posts")
const GhostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/?key=bef2ed15d9e38f7703be9412b3'
const GhostResponse = await fetch(GhostFetch);
const Ghost = await GhostResponse.json();
// Icons
import { BookmarkBook, ReportColumns } from "@iconoir/vue";
---
<Default MobileTitle="Blog">
<Fragment slot="sub-header">
<p class="header-sub-service"><span id="show-w-scroll">SudoVanilla</span> Blog</p>
<div>
<a href="/blog/">Posts</a>
<a href="/blog/recommended-reading/">Recommended Reading</a>
</div>
</Fragment>
<Fragment slot="body"><Posts GetPosts={posts} PrefixSlug="/blog/"/></Fragment>
<Default MobileTitle="SudoVanilla" NoSubHeader>
<Fragment slot="body">
<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>
</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>

76
src/pages/index.astro
View file

@ -10,8 +10,9 @@ import LargeCard from "@components/Feature.astro";
import {Zorn} from "@minpluto/zorn"
// List Posts
import { getCollection } from "astro:content";
const posts = await getCollection("posts");
const GhostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/?key=bef2ed15d9e38f7703be9412b3'
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>