Update meta tags for blog

colepeters · colepeters · commit b72640731450 · 2024-08-14T15:16:38.000-05:00
diff --git a/app/api/blog/index.mjs b/app/api/blog/index.mjs
@@ -32,7 +32,7 @@ export async function get (req) {
   return {
     json: {
       posts,
-      pageTitle: 'Blog — Enhance.dev',
+      pageTitle: 'Blog',
       limit,
       offset,
       total,
diff --git a/app/api/blog/posts/$$.mjs b/app/api/blog/posts/$$.mjs
@@ -74,7 +74,7 @@ export async function get (req) {
     },
     json: {
       post,
-      pageTitle: `${post.frontmatter.title.replaceAll(/"/g, "'")} — Enhance Blog`,
+      pageTitle: `${post.frontmatter.title.replaceAll(/"/g, "'")}`,
       pageDescription: post.frontmatter.description
         ? post.frontmatter.description.replaceAll(/"/g, "'")
         : undefined,
diff --git a/app/head.mjs b/app/head.mjs
@@ -4,13 +4,38 @@ import { getStyles } from '@enhance/arc-plugin-styles'
 /** @type {import('@enhance/types').EnhanceHeadFn} */
 export default function Head (state) {
   const { req, store } = state
-  const { doc = {} } = store
+  const {
+    doc = {},
+    pageTitle = '',
+    pageDescription = '',
+    pageImage = '',
+    activeRoute = ''
+  } = store
   const { title: docTitle } = doc
 
-  const title = docTitle ? `${docTitle} — Enhance` : 'Enhance'
+  const title = (docTitle || pageTitle) ? `${docTitle || pageTitle} — Enhance` : 'Enhance'
+  const description = pageDescription ? pageDescription : 'rhe HTML first full stack web framework'
+  const ogImage = pageImage ? pageImage : '/_public/img/enhance-open-graph.png'
 
   store.path = req.path || ''
 
+  let extraBlogMeta = []
+
+  if (activeRoute === 'blog') {
+    if (store.post?.frontmatter?.author) {
+      extraBlogMeta.push(`<meta property="article:author" content="${store.post.frontmatter.author}" />`)
+    }
+    if (store.post?.frontmatter?.published) {
+      let pubDate = new Date(store.post.frontmatter.published)
+      pubDate.setHours(13)
+      let dateString = pubDate.toISOString().replace('Z', '-0:00')
+      extraBlogMeta.push(`<meta property="article:published_time" content="${dateString}" />`)
+    }
+    if (store.post?.frontmatter?.category) {
+      store.post.frontmatter.category.split(',').forEach(item => extraBlogMeta.push(`<meta property="article:tag" content="${item.trim()}">`))
+    }
+  }
+
   return /* html */ `
 <!DOCTYPE html>
 <html lang='en'>
@@ -31,16 +56,39 @@ export default function Head (state) {
     <link rel="stylesheet" href="${arc.static('/css/docs-highlight.css')}" />
     <link rel="stylesheet" href="${arc.static('/bundles/docsearch-css.css')}" />
 
-    <meta name="image" content="/_public/img/enhance-open-graph.png" />
-    <meta name="og:image" content="/_public/img/enhance-open-graph.png" />
     <meta name="og:type" content="website" />
 
     <link rel="manifest" href="${arc.static('/img/favicon/site.webmanifest')}">
+
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     ${getStyles.styleTag()}
+
     <title>${title}</title>
-    <meta name='description' content='The HTML first full stack web framework.' />
+    <meta name='description' content="${description}"/>
+
+    <!-- Open Graph -->
+    <meta name="og:title" content="${title}" />
+    <meta name="og:description" content="${description}" />
+    <meta name="og:image" content="${ogImage}" />
+    <meta name="og:site_name" content="Enhance" />
+    <meta name="og:type" content="website" />
+
+    <meta property="og:title" content="${title}" />
+    <meta property="og:description" content="${description}" />
+    <meta property="og:image" content="${ogImage}" />
+    <meta property="og:site_name" content="Enhance" />
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter -->
+    <meta name="twitter:title" content="${title}" />
+    <meta name="twitter:description" content="${description}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image:src" content="${ogImage}" />
+
+    ${extraBlogMeta.join('\n')}
+
     <style>
       @font-face {
         font-family: "Montserrat";
