feat: twitter feed

components/TwitterFeed.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="relative mb-12">
+      <div class="absolute inset-0 flex items-center" aria-hidden="true">
+        <div class="w-full border-t border-gray-300" />
+      </div>
+      <div class="relative flex items-center justify-between">
+        <span class="pr-3 text-lg font-medium text-gray-900"> Feed </span>
+        <a
+          href="https://twitter.com/FaetaleTTRPG?ref_src=twsrc%5Etfw"
+          class="inline-flex items-center shadow-sm px-4 py-1.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          data-dnt="true"
+          data-show-count="false"
+        >
+          Follow @FaetaleTTRPG
+        </a>
+      </div>
+    </div>
+    <a
+      class="twitter-timeline"
+      data-dnt="true"
+      data-theme="light"
+      href="https://twitter.com/FaetaleTTRPG?ref_src=twsrc%5Etfw"
+    >
+      Tweets by FaetaleTTRPG
+    </a>
+  </div>
+</template>

nuxt.config.js

@@ -110,6 +110,13 @@ export default {
       },
       { rel: 'manifest', href: '/icon/manifest.json' },
     ],
+    script: [
+      {
+        hid: 'twitter',
+        defer: true,
+        src: 'https://platform.twitter.com/widgets.js',
+      },
+    ],
   },
 
   router: {

pages/index.vue

@@ -16,6 +16,7 @@
               :next-page-token="nextPageToken"
             />
           </div>
+          <TwitterFeed />
         </div>
       </div>
     </main>