reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

test: og url end with slash

Browse source
This commit is contained in:
radishzzz 2025-03-12 22:09:57 +00:00
parent 79f9765688
commit c97e3d5882
9 changed files with 82 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/content/config.ts
View file

@ -2,26 +2,22 @@ import { defineCollection, z } from 'astro:content'
const postsCollection = defineCollection({
schema: z.object({
// Basic
// required
title: z.string(),
published: z.date(),
// optional
updated: z.date().optional(),
description: z.string().optional().default(''),
tags: z.array(z.string()).optional().default([]),
// Advanced
pin: z.number().int().min(0).max(99).optional().default(0),
draft: z.boolean().optional().default(false),
pin: z.number().int().min(0).max(99).optional().default(0),
toc: z.boolean().optional().default(false),
lang: z.string().optional().default(''),
abbrlink: z.string().optional().default('').refine(
abbrlink => !abbrlink || /^[a-z0-9\-]*$/.test(abbrlink),
{ message: 'Abbrlink can only contain lowercase letters, numbers and hyphens' },
),
// Auto-generated
description: z.string().optional().default(''),
image: z.string().optional().default(''),
}),
})

0
src/content/posts/Universal Post.md → src/content/posts/Universal Article.md
View file

17
src/layouts/Head.astro
View file

@ -1,14 +1,14 @@
---
import themeConfig from '@/config'
import { isPostPage } from '@/utils/path'
import { ClientRouter } from 'astro:transitions'
interface Props {
postTitle?: string
postDescription?: string
postImage?: string
}
const { postTitle, postDescription, postImage } = Astro.props
const { postTitle, postDescription } = Astro.props
const { title, subtitle, description, author, url, favicon } = themeConfig.site
const { mode, light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
@ -20,7 +20,18 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsJS = '', custom
const initMetaTheme = mode === 'dark' ? darkMode : lightMode
const pageTitle = postTitle ? `${postTitle} | ${title}` : `${title} - ${subtitle}`
const pageDescription = postDescription || description
const pageImage = postImage || favicon
// Determine the OG image for the page
// Check if the current page is a post
const currentPath = Astro.url.pathname
const isPost = isPostPage(currentPath)
// Extract slug from URL as the post identifier
const pathParts = currentPath.split('/').filter(part => part !== '')
const slug = pathParts.length > 0 ? pathParts[pathParts.length - 1] : ''
// Prioritize auto-generated OG image, otherwise use fallback OG image
const pageImage = isPost && slug ? `${url}/og/${slug}` : favicon
---
<head>

5
src/layouts/Layout.astro
View file

@ -18,10 +18,9 @@ import '@/styles/heti.css'
interface Props {
postTitle?: string
postDescription?: string
postImage?: string
}
const { postTitle, postDescription, postImage } = Astro.props
const { postTitle, postDescription } = Astro.props
const { isHome, isPost } = getPagePath(Astro.url.pathname)
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
@ -35,7 +34,7 @@ const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
class={fontStyle}
data-overlayscrollbars-initialize
>
<Head {postTitle} {postDescription} {postImage} />
<Head {postTitle} {postDescription} />
<body data-overlayscrollbars-initialize>
<!-- -->
<div

28
src/pages/og/[...route].ts Normal file
View file

@ -0,0 +1,28 @@
import { OGImageRoute } from 'astro-og-canvas'
import { getCollection } from 'astro:content'
// eslint-disable-next-line antfu/no-top-level-await
const blogEntries = await getCollection('posts')
// Convert to page data objects
const pages = Object.fromEntries(
blogEntries.map(({ slug, data }) => [
data.abbrlink || slug, // Prioritize using abbrlink instead of slug
{
title: data.title,
description: data.description || '',
},
]),
)
// Configure Open Graph image generation route
export const { getStaticPaths, GET } = OGImageRoute({
param: 'route',
pages,
getImageOptions: (_path, page) => ({
title: page.title,
description: page.description,
border: { width: 10 },
padding: 40,
}),
})

1
src/pages/posts/[slug].astro
View file

@ -26,7 +26,6 @@ const { Content, remarkPluginFrontmatter } = await post.render()
<Layout
postTitle={post.data.title}
postDescription={description}
postImage={post.data.image}
>
<article class="heti mb-12.6">
<h1 class="post-title">