fix: fixed config, packages, and twitter social button

Author: favna

docs/.vuepress/components/TwitterFollow/TwitterBird.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg
+    version="1.1"
+    id="Logo"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 248 204"
+    style="enable-background: new 0 0 248 204"
+    xml:space="preserve"
+  >
+    <g id="Logo_1_">
+      <path
+        id="white_background"
+        class="st0"
+        d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
+		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
+		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
+		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
+		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
+		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"
+      />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.st0 {
+  fill: #ffffff;
+}
+</style>

docs/.vuepress/components/TwitterFollow/TwitterFollow.vue

@@ -1,24 +1,47 @@
 <template>
-  <div>
-    <a
-      href="https://twitter.com/kirorisk?ref_src=twsrc%5Etfw"
-      class="twitter-follow-button"
-      data-size="large"
-      data-show-screen-name="false"
-      data-dnt="true"
-      data-show-count="false"
-      >Follow</a
-    >
-    <script
-      async
-      src="https://platform.twitter.com/widgets.js"
-      charset="utf-8"
-    ></script>
-  </div>
+  <a :href="fullyQualifiedHref" class="twitter-btn">
+    <TwitterBird class="twitter-bird" /> Follow
+  </a>
 </template>
 
-<script lang="ts">
-export default {
-  name: 'TwitterFollow'
-}
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import TwitterBird from './TwitterBird.vue'
+
+const url = new URL('https://twitter.com/intent/follow')
+url.searchParams.append('original_referer', window.location.href)
+url.searchParams.append(
+  'ref_src',
+  encodeURIComponent('twsrc^tfw|twcamp^buttonembed|twterm^follow|twgr^kirorisk')
+)
+url.searchParams.append('region', 'follow_link')
+url.searchParams.append('screen_name', 'kirorisk')
+
+const fullyQualifiedHref = ref(url.toString())
 </script>
+
+<style scoped>
+.twitter-bird {
+  height: 12px;
+}
+
+.twitter-btn {
+  font-size: 12px;
+  position: relative;
+  height: 28px;
+  box-sizing: border-box;
+  padding: 1px 12px 1px 12px;
+  background-color: #1d9bf0;
+  color: #fff;
+  border-radius: 9999px;
+  font-weight: bolder;
+  cursor: pointer;
+  visibility: visible;
+  width: 86px;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  gap: 4px;
+}
+</style>

docs/.vuepress/config.ts

@@ -1,5 +1,8 @@
+import tabsPlugin from '@snippetors/vuepress-plugin-tabs'
+import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
 import { pwaPlugin } from '@vuepress/plugin-pwa'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
+import { defaultTheme } from '@vuepress/theme-default'
 import {
   defineUserConfig,
   HeadAttrsConfig,
@@ -10,11 +13,6 @@ import {
   type HeadTagEmpty
 } from 'vuepress'
 
-import { defaultTheme } from '@vuepress/theme-default'
-
-import tabsPlugin from '@snippetors/vuepress-plugin-tabs'
-import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
-
 const GA_MEASUREMENT_ID = 'UA-82107035-1'
 const GOOGLE_SITE_VERIFICATION = '4nm40QLVcDJmEJSAbrMfZ7fpBJZIXL1oSngBAYrZopY'
 //const GOOGLE_AD_CLIENT_ID = 'ca-pub-3734944050099256'
@@ -111,7 +109,7 @@ function getHead(): HeadConfig[] {
     '144x144',
     '152x152',
     '180x180'
-  ].flatMap<[HeadTagEmpty, HeadAttrsConfig]>((size) => [
+  ].map<[HeadTagEmpty, HeadAttrsConfig]>((size) => [
     'link',
     { rel: 'apple-touch-icon', size, href: `/icons/apple-icon-${size}.png` }
   ])
@@ -124,7 +122,7 @@ function getHead(): HeadConfig[] {
     { size: '32x32', href: 'favicon-32x32.png' },
     { size: '96x96', href: 'favicon-96x96.png' },
     { size: '16x16', href: 'favicon-16x16.png' }
-  ].flatMap<[HeadTagEmpty, HeadAttrsConfig]>(({ size, href }) => [
+  ].map<[HeadTagEmpty, HeadAttrsConfig]>(({ size, href }) => [
     'link',
     { rel: 'icon', type: 'image/png', size, href: `/icons/${href}` }
   ])
@@ -137,7 +135,7 @@ function getHead(): HeadConfig[] {
       name: 'google-site-verification',
       content: GOOGLE_SITE_VERIFICATION
     }
-  ].flatMap<[HeadTagEmpty, HeadAttrsConfig]>(({ name, content }) => [
+  ].map<[HeadTagEmpty, HeadAttrsConfig]>(({ name, content }) => [
     'meta',
     { name, content }
   ])
@@ -152,7 +150,7 @@ function getHead(): HeadConfig[] {
         (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa_optimize);
       })();
       `
-  ].flatMap<[HeadTagNonEmpty, HeadAttrsConfig, string]>((content) => [
+  ].map<[HeadTagNonEmpty, HeadAttrsConfig, string]>((content) => [
     'script',
     {},
     content

docs/README.md

@@ -6,10 +6,6 @@ shareTitle: Fuse.js - JavaScript fuzzy-search library
 
 <TwitterFollow />
 
-<!-- <a href="https://twitter.com/kirorisk?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-dnt="true" data-show-count="false">Follow</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> -->
-
-<!-- <social-share :networks="['twitter', 'reddit', 'linkedin', 'email']" /> -->
-
 Fuse.js is a **powerful, lightweight fuzzy-search library, with zero dependencies**.
 
 <Sponsors />