Testing OpenGraph, etc meta

assets/config.ts

@@ -0,0 +1,16 @@
+export default {
+    // Site information
+    siteTitle: 'My Site',
+    siteDescription: 'My site description',
+    siteUrl: 'https://thefelidae.github.io',
+    siteImage: '',
+
+    // Site personalization
+    sitePrimaryColor: '#550077',
+
+    // Author information
+    siteAuthor: 'TheFelidae',
+    siteAuthorContact: 'https://www.github.com/TheFelidae',
+    siteAuthorPronouns: 'she/her/they/them',
+    siteAuthorLocation: 'Gallifrey'
+};

components/MetaSet.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import siteConfig from '../assets/config';
+
+const props = defineProps({
+    title: String,
+    description: String,
+    date: String,
+    tags: Array<String>,
+    background: String
+});
+
+const tags: Ref<String[]> = ref(props.tags || []);
+const title: Ref<String> = ref(props.title || 'Untitled');
+const description: Ref<string> = ref(props.description || 'No description provided');
+const date: Ref<string> = ref(props.date || 'No date provided');
+const background: Ref<string> = ref(props.background || '');
+const fullTitle: Ref<string> = ref(title.value + ' | ' + siteConfig.siteTitle);
+
+function tagsToString(tags: String[]): string {
+    var tagString = '';
+    for (let i = 0; i < tags.length; i++) {
+        tagString += tags[i];
+    }
+
+    return tagString;
+}
+
+</script>
+
+<template>
+	<title>{{ fullTitle }}</title>
+	<meta name="description" :content="description" />
+    <meta name="keywords" :content="tagsToString(tags)" />
+	<meta name="author" :content="siteConfig.siteAuthor" />
+	<meta name="url" :content="siteConfig.siteUrl" />
+	<meta name="og:title" :content="title + ' | ' + siteConfig.siteTitle" />
+	<meta name="og:description" :content="siteConfig.siteAuthor + '\'s personal site'" />
+	<meta name="og:url" :content="siteConfig.siteUrl" />
+    <div v-if="background">
+        <meta name="og:image" :content="background" />
+    </div>
+	<meta name="og:type" content="website" />
+	<meta name="og:site_name" :content="siteConfig.siteTitle" />
+	<meta name="og:locale" content="en_US" />
+	<meta name="og:locale:alternate" content="en_GB" />
+	<meta name="theme-color" :content="siteConfig.sitePrimaryColor" />
+
+    <!-- Boo, Twitter. -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" :content="fullTitle" />
+    <meta name="twitter:description" :content="description" />
+    <meta name="twitter:image" :content="background" />
+</template>

pages/index.vue

@@ -5,6 +5,8 @@ import PostCard from '../components/PostCard.vue';
 import configured_markdown from '~/assets/markdown_conf';
 import Markdown from '~/components/Markdown.vue';
 import Card from '~/components/Card.vue';
+import * as siteConfig from "../assets/config.ts";
+import MetaSet from '~/components/MetaSet.vue';
 
 const aboutMe = ref("");
 
@@ -18,6 +20,8 @@ fetch("/about_me.md")
 </script>
 
 <template>
+	<MetaSet title="Home" description="TheFelidae's personal site :3" tags="home, personal, author"/>
+
 	<div class="relative flex w-full justify-center text-white">
 		<div class="mt-8 flex-col text-center">
 			<div class="flex justify-center">
@@ -37,5 +41,4 @@ fetch("/about_me.md")
 	#PFP {
 		box-shadow: 0 0 10px 0 pink;
 	}
-	
 </style>