og metadata + post sorting

vorant94 · Sep 24, 2023 · d4e5f67 · d4e5f67
1 parent 950fe26
commit d4e5f67
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -4,21 +4,30 @@ import Footer from "../components/Footer.astro";
 
 interface Props {
 	title?: string;
+	image?: string;
 }
 
-let title = `vorant94`;
-if(Astro.props.title) {
-	title += ` | ${Astro.props.title}`;
-}
+const {title, image} = Astro.props;
+
+const pageTitle = title ? `vorant94 | ${title}` : `vorant94's Blog`;
+
+const ogTitle = title ?? `A personal space of yet another full-stack dev`
+const ogType = title ? 'article' : 'website'
+const ogUrl = new URL(Astro.url.pathname, Astro.site);
+const ogImage = new URL(image ?? '/favicon.ico', Astro.site);
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" prefix="og: https://ogp.me/ns#">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta property="og:title" content={ogTitle} />
+		<meta property="og:type" content={ogType} />
+		<meta property="og:url" content={ogUrl} />
+		<meta property="og:image" content={ogImage} />
 		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-		<title>{title}</title>
+		<title>{pageTitle}</title>
 	</head>
 	<body class="flex flex-col min-h-screen mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl">
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,7 +2,9 @@
 import { getCollection } from 'astro:content';
 import Layout from '../layouts/Layout.astro';
 
-const posts = await getCollection('posts');
+const posts = (await getCollection('posts')).sort((a,b) => {
+  return new Date(b.data.publishedAt) - new Date(a.data.publishedAt);
+});
 
 ---
 

diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
@@ -24,4 +24,13 @@ const { Content } = await post.render();
   <article class="prose">
     <Content />
   </article>
+
+  <!--<script src="https://utteranc.es/client.js"-->
+  <!--        repo="vorant94/vorant94.github.io"-->
+  <!--        issue-term="og:title"-->
+  <!--        label="comment"-->
+  <!--        theme="github-light"-->
+  <!--        crossorigin="anonymous"-->
+  <!--        async>-->
+  <!--</script>-->
 </Layout>