Merge pull request #581 from Gencaster/579-add-meta-tags-to-player

added metaHeader

caster-front/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "@sentry/vue": "^7.57.0",
+    "@unhead/vue": "^1.7.4",
     "@urql/vue": "^1.0.4",
     "element-plus": "^2.3.5",
     "graphql": "^16.6.0",

caster-front/src/components/GraphPlayer.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { type Ref, ref, computed, watch, reactive } from "vue";
+import { useHead } from "@unhead/vue";
+import { metaHead } from "@/composables/metaHead";
 import {
   ElButton,
   ElCheckbox,
@@ -325,6 +327,10 @@ const startStream = async () => {
   playerState.value = PlayerState.Playing;
   startingTimestamp.value = new Date().getTime();
 };
+
+// meta stuff
+const meta = metaHead(props.graph.displayName, props.graph.startText);
+useHead(meta);
 </script>
 
 <template>

caster-front/src/composables/metaHead.ts

@@ -0,0 +1,42 @@
+export const metaHead = (
+  metaTitle: string,
+  metaDescription: string,
+  metaImageUrl?: string,
+  siteUrl?: string,
+) => {
+  const meta = {
+    title: metaTitle,
+    meta: [
+      { name: "description", content: metaDescription },
+      { hid: "description", name: "description", content: metaDescription },
+
+      // Twitter Card data
+      { name: "twitter:title", content: metaTitle, hid: "custom" },
+      { name: "twitter:description", content: metaDescription, hid: "custom" },
+
+      // Open Graph
+      { property: "og:title", content: metaTitle, hid: "custom" },
+      {
+        property: "og:description",
+        content: metaDescription,
+        hid: "og:description",
+      },
+      { property: "og:image", content: metaImageUrl, hid: "og:image" },
+    ],
+  };
+
+  if (metaImageUrl) {
+    meta.meta.push({ name: "og:image", content: metaImageUrl });
+    meta.meta.push({
+      name: "twitter:image",
+      content: metaImageUrl,
+      hid: "custom",
+    });
+  }
+
+  if (siteUrl) {
+    meta.meta.push({ property: "og:url", content: siteUrl, hid: "custom" });
+  }
+
+  return meta;
+};

caster-front/src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from "vue";
+import { createHead } from "@unhead/vue";
 import { createPinia } from "pinia";
 import urql, { fetchExchange, subscriptionExchange } from "@urql/vue";
 import { SubscriptionClient } from "subscriptions-transport-ws";
@@ -13,6 +14,9 @@ import "./assets/main.scss";
 
 const app = createApp(App);
 
+const head = createHead();
+app.use(head);
+
 if (
   import.meta.env.VITE_BACKEND_URL &&
   import.meta.env.VITE_SENTRY_DSN_CASTER_FRONT

caster-front/tsconfig.app.json

@@ -5,6 +5,7 @@
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
+    "allowImportingTsExtensions": true,
     "paths": {
       "@/*": ["./src/*"]
     }