ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat(blog): add/improve meta info

Browse source
This commit is contained in:
Ayo Ayco 2024-08-14 19:34:48 +02:00
parent 37c37b4f4b
commit 22faeb32df
3 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/blog/BaseHead.astro
View file

@ -1,14 +1,16 @@
--- ---
import '../../styles/reset.css'; import '../../styles/reset.css';
import '../../styles/blog.css'; import '../../styles/blog.css';
import { SITE_TITLE, SITE_AUTHOR, SITE_DESCRIPTION } from '../../consts';
interface Props { interface Props {
title: string; title: string;
description: string; description: string;
isArticle?: boolean;
image?: string; image?: string;
} }
const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props; const {isArticle = false, title, description = 'default description', image = '/cozy.jpg' } = Astro.props;
--- ---
<!-- Global Metadata --> <!-- Global Metadata -->
@ -22,13 +24,25 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin /> <link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin />
<!-- Primary Meta Tags --> <!-- Primary Meta Tags -->
<title>{title}</title> <title>{title} • {
title === SITE_TITLE
? SITE_DESCRIPTION
: `${SITE_TITLE} • ${description}`
}</title>
<meta name="title" content={title} /> <meta name="title" content={title} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website" /> {
isArticle
? <meta property="og:type" content="article" />
: <meta property="og:type" content="website" />
}
<meta property="og:url" content={Astro.url} /> <meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} /> <meta property="og:image" content={new URL(image, Astro.url)} />
<meta property="og:site_name" content={SITE_TITLE} />
<meta property="article:author" content={SITE_AUTHOR} />

6
src/components/blog/Header.astro
View file

@ -1,10 +1,12 @@
--- ---
import { SITE_AUTHOR_MASTODON, SITE_PROJECT_REPO, SITE_TITLE } from '../../consts'; import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE } from '../../consts';
--- ---
<header> <header>
<nav> <nav>
<h2><a href="/blog">{SITE_TITLE}</a></h2> <div>
<h2><a href="/blog">{SITE_TITLE} • {SITE_DESCRIPTION}</a></h2>
</div>
<div class="social-links"> <div class="social-links">
<a href="/" target="_blank"> <a href="/" target="_blank">
<span class="primary-btn">Get Cozy!</span> <span class="primary-btn">Get Cozy!</span>

2
src/layouts/BlogPost.astro
View file

@ -12,7 +12,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={title} description={description} /> <BaseHead title={title} description={description} isArticle={true} />
<style> <style>
main { main {
width: calc(100% - 2em); width: calc(100% - 2em);