fix the twitter card property

zyqhpz · Jul 13, 2024 · 79ed7fa · 79ed7fa
1 parent adf0821
commit 79ed7fa
Showing 1 changed file with 42 additions and 24 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900">
+  <div
+    class="min-h-screen flex flex-col bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900"
+  >
     <NavBar />
     <slot />
     <Footer />
@@ -9,34 +11,50 @@
 @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
 
 * {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }
 </style>
 <script setup lang="ts">
-provideHeadlessUseId(() => useId())
+provideHeadlessUseId(() => useId());
 useHead({
-  title: 'Haziq Hapiz | Software Engineer',
+  title: "Haziq Hapiz | Software Engineer",
   meta: [
-    { name: 'description', content: 'An aspiring software engineer with a passion to make meaningful impacts!' },
-    { name: 'author', content: 'Haziq Hapiz' },
-    { name: 'og:title', content: 'Haziq Hapiz | Software Engineer' },
-    { name: 'og:description', content: 'An aspiring software engineer with a passion to make meaningful impacts!' },
-    { name: 'og:image', content: '/img/og.png' },
-    { name: 'og:url', content: 'https://zyqhpz.github.io' },
-    { name: 'og:type', content: 'website' },
-    { name: 'twitter:card', content: 'summary' },
-    { name: 'twitter:site', content: '@haziqhapiz' },
-    { name: 'twitter:creator', content: '@haziqhapiz' },
-    { name: 'twitter:title', content: 'Haziq Hapiz | Software Engineer' },
-    { name: 'twitter:description', content: 'An aspiring software engineer with a passion to make meaningful impacts!' },
-    { name: 'twitter:image', content: '/img/og.png' },
+    {
+      name: "description",
+      content:
+        "An aspiring software engineer with a passion to make meaningful impacts!",
+    },
+    { name: "author", content: "Haziq Hapiz" },
+    { name: "og:title", content: "Haziq Hapiz | Software Engineer" },
+    {
+      name: "og:description",
+      content:
+        "An aspiring software engineer with a passion to make meaningful impacts!",
+    },
+    { name: "og:image", content: "/img/og.png" },
+    { name: "og:url", content: "https://zyqhpz.github.io" },
+    { name: "og:type", content: "website" },
+    { name: "twitter:card", content: "summary_large_image" },
+    { property: "twitter:domain", content: "zyqhpz.github.io" },
+    { property: "twitter:url", content: "https://zyqhpz.github.io" },
+    { name: "twitter:site", content: "@haziqhapiz" },
+    { name: "twitter:creator", content: "@haziqhapiz" },
+    { name: "twitter:title", content: "Haziq Hapiz | Software Engineer" },
+    {
+      name: "twitter:description",
+      content:
+        "An aspiring software engineer with a passion to make meaningful impacts!",
+    },
+    { name: "twitter:image", content: "/img/og.png" },
   ],
-})
+});
 useSeoMeta({
-  title: 'Haziq Hapiz | Software Engineer',
-  description: 'An aspiring software engineer with a passion to make meaningful impacts!',
-  ogTitle: 'Haziq Hapiz | Software Engineer',
-  ogDescription: 'An aspiring software engineer with a passion to make meaningful impacts!',
-  ogImage: '/img/og.png',
-})
+  title: "Haziq Hapiz | Software Engineer",
+  description:
+    "An aspiring software engineer with a passion to make meaningful impacts!",
+  ogTitle: "Haziq Hapiz | Software Engineer",
+  ogDescription:
+    "An aspiring software engineer with a passion to make meaningful impacts!",
+  ogImage: "/img/og.png",
+});
 </script>