feat: OG image from the CMS (#49)

Author: ben-basten

app/composables/useSeoHead.ts

@@ -1,12 +1,10 @@
-export const useSeoHead = (title: string | undefined) => {
-  const url = useRequestURL();
-
+export const useSeoHead = (title: string | undefined, image?: string) => {
   useHead({
     title,
     meta: [
       {
         property: "og:image",
-        content: `${url.origin}/img/bench-og.jpg`,
+        content: image,
       },
       {
         property: "og:title",

app/pages/login.vue

@@ -35,7 +35,11 @@ definePageMeta({
   layout: "minimal",
 });
 
-useSeoHead("Login");
+const { data } = await useFetch("/api/cms/seo");
+useSeoHead(
+  data.value?.title ?? undefined,
+  data.value?.ogImage?.url ?? undefined,
+);
 
 const { loggedIn, fetch: refreshSession } = useUserSession();
 const route = useRoute();

nuxt.config.ts

@@ -12,11 +12,7 @@ export default defineNuxtConfig({
   routeRules: {
     "/admin": { redirect: "/admin/dashboard" },
     "/admin/login": { prerender: true },
-    "/login": {
-      isr: true,
-      // required to get correct hostname in meta tags
-      cache: { varies: ["host", "x-forwarded-host"] },
-    },
+    "/login": { isr: 3600 },
   },
   nitro: {
     prerender: {

public/img/bench-og.jpg

@@ -0,0 +1,11 @@
+import { fetchContentful } from "~~/server/service/contentful";
+import type { SeoQuery, SeoQueryVariables } from "~~/shared/types/graphql";
+import { SEO_QUERY } from "~~/server/graphql/queries/seo.query";
+
+export default defineCachedEventHandler(
+  async () => {
+    const data = await fetchContentful<SeoQuery, SeoQueryVariables>(SEO_QUERY);
+    return data.componentSeo;
+  },
+  { maxAge: 60, swr: false },
+);

server/api/cms/seo.get.ts

@@ -0,0 +1,10 @@
+import { gql } from "graphql-request";
+
+export const SEO_FRAGMENT = gql`
+  fragment SEO on ComponentSeo {
+    title
+    ogImage {
+      url
+    }
+  }
+`;

server/graphql/fragments/seo.fragment.ts

@@ -0,0 +1,11 @@
+import { gql } from "graphql-request";
+import { SEO_FRAGMENT } from "../fragments/seo.fragment";
+
+export const SEO_QUERY = gql`
+  query SEO {
+    componentSeo(id: "1j7SAAi0Di80JVqvW1QT67") {
+      ...SEO
+    }
+  }
+  ${SEO_FRAGMENT}
+`;