gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

feat: more friendly meta tags

Browse source
This commit is contained in:
grassblock 2025-05-13 22:05:28 +08:00
parent 2c7b0edaf7
commit 7ff2d1fd6c
5 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/helper/head/Meta.astro Normal file
View file

@ -0,0 +1,21 @@
---
const { title, description, ogImage = "" } = Astro.props
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
<meta name="title" content={title} />
<meta name="description" content={description} />
{/* Open Graph / Facebook */}
<meta name="og:title" content={title} />
<meta name="og:description" content={description} />
{ogImage && <meta name="og:image" content={ogImage} />}
<meta property="og:locale" content="en_US"/>
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
{/* Twitter */}
<meta name="twitter:card" content="summary"></meta>
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
{ogImage && <meta name="twitter:image" content={ogImage} />}

5
src/config.ts
View file

@ -1,6 +1,9 @@
export const siteConfig = {
// site meta info
title: '/var/log/mercury',
description: 'A blog about software development, technology, and life.',
homepageOgImage: '',
// site components
navBarItems: [
// additional items in the navbar
// the order of the items will be the same as the order in the array
@ -8,6 +11,8 @@ export const siteConfig = {
{ text: "RSS", link: "/rss.xml" },
{ text: "GitHub", link: "https://github.com/GrassBlock1/mercury" },
],
// footer
// yes you can write html safely here
customFooter: '<i>I have no mouth, and I must SCREAM</i>',
comments: {
type: 'fediverse', // 'artalk','giscus','fediverse','hatsu'

5
src/layouts/Layout.astro
View file

@ -4,9 +4,11 @@ import Search from '../components/Search.astro';
import ThemeSwitcher from '../components/ThemeSwitcher.astro';
import BackToTop from "../components/BackToTop.astro";
import { siteConfig } from "../config";
import Meta from "../components/helper/head/Meta.astro";
interface Props {
title: string;
description: string;
path?: string;
}
@ -16,7 +18,7 @@ const formattedPath = defaultTitle.toLowerCase().replace(/\s+/g, '-');
const navBarItems = siteConfig.navBarItems
const customFooter = siteConfig.customFooter
const { title, path = formattedPath } = Astro.props;
const { title, path = formattedPath, description = siteConfig.description } = Astro.props;
// TODO: make the path dynamic
---
@ -27,6 +29,7 @@ const { title, path = formattedPath } = Astro.props;
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<Meta title={title} description={description}/>
<title>{title}</title>
</head>
<body>

2
src/pages/[...slug].astro
View file

@ -13,7 +13,7 @@ const { Content } = await entry.render();
---
<Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`}>
<Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`} description={entry.data.description} >
<h1 class="post-title">{entry.data.title}</h1>
<div class="post-content">
<Content/>

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

@ -19,6 +19,7 @@ const slug = Astro.params.slug;
<Layout
title={entry.data.title}
path={`~/grassblock/micr0blog/blog/${slug}`}
description={entry.data.description}
>
<h1 class="post-title">{entry.data.title}</h1>
<span class="post-date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>