Support results sharing on other social media channels 💬

app.vue

@@ -26,7 +26,7 @@
         <div v-else-if="domain">
           No results could be fetched. Is it a valid domain?
         </div>
-        <TheShareLink v-if="crux || lighthouse" :domain="domain" :type="crux ? 'crux' : 'pagespeed-insights'"
+        <ShareLinks v-if="crux || lighthouse" :domain="domain" :type="crux ? 'crux' : 'pagespeed-insights'"
           :timestamp="crux && cruxStatus !== 'pending' ? crux.timestamp : lighthouse && lighthouseStatus !== 'pending' ? lighthouse.timestamp : undefined" />
         <details class="max-w-[500px] text-gray-400">
           <summary class="cursor-pointer">

components/TheShareLink.vue → components/ShareLinks.vue

@@ -15,7 +15,6 @@ const text = computed(() => props.domain
 
 const canonicalURL = computed(() => props.domain ? joinURL(`https://page-speed.dev`, props.domain) : 'https://page-speed.dev')
 const shareLink = computed(() =>
-  'https://twitter.com/intent/tweet?text=' +
   (props.domain ? encodeURIComponent([text.value, canonicalURL.value].join('\n\n')) : text.value)
 )
 
@@ -38,11 +37,18 @@ async function nativeShare () {
 
 <template>
   <div class="flex flex-col gap-2 mt-auto md:mt-8">
-    <NuxtLink type="submit"
-      class="bg-green-400 text-black hover: hover:bg-white focus:bg-white active:bg-white text-xl md:text-2xl py-2 px-6 md:self-start mb-8"
-      :href="shareLink" @click.prevent="nativeShare">
-      share results
-    </NuxtLink>
+    <div class="self-start text-gray-400">Share results</div>
+    <div class="flex flex-row gap-2 mb-7">
+      <SocialShare
+        v-for="network in ['twitter', 'whatsapp', 'telegram', 'reddit', 'pocket', 'email']"
+        :key="network"
+        :network="network"
+        :styled="true"
+        :label="false"
+        class="p-3 rounded-full opacity-70 hover:opacity-100"
+        :url="shareLink"
+      />
+    </div>
     <a v-if="type === 'crux'"
       :href="`https://lookerstudio.google.com/c/u/0/reporting/bbc5698d-57bb-4969-9e07-68810b9fa348/page/keDQB?params=%7B%22origin%22:%22https://${domain}%22%7D`"
       class="self-start underline text-gray-400 hover:text-green-400 focus:text-green-400 active:text-green-400">

nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   components: ['~/components/graphs', '~/components'],
-  modules: ['@unocss/nuxt', 'nuxt-og-image', 'nuxt-time', '@nuxtjs/plausible'],
+  modules: ['@unocss/nuxt', 'nuxt-og-image', 'nuxt-time', '@nuxtjs/plausible', '@stefanobartoletti/nuxt-social-share'],
   experimental: {
     appManifest: false,
     headNext: true,

package.json

@@ -13,6 +13,7 @@
     "@azure/identity": "^4.0.1",
     "@azure/storage-blob": "^12.17.0",
     "@nuxtjs/plausible": "^0.2.4",
+    "@stefanobartoletti/nuxt-social-share": "^0.5.2",
     "@unocss/nuxt": "^0.58.5",
     "nitropack": "^2.8.1",
     "nuxt": "^3.10.1",