(add) ブログにシェアボタンを追加

locales/ja-JP.yml

@@ -3,6 +3,8 @@ learnMore: "詳しく知る"
 loading: "読み込み中…"
 clickToExpand: "（クリックして展開）"
 copy: "コピー"
+share: "共有する"
+note: "ノート"
 
 _seo:
   siteName: "Misskey Hub"

pages/blog/[slug].vue

@@ -14,6 +14,12 @@
                 <ContentRenderer :value="data" />
             </div>
             <div class="text-center mt-6 lg:mt-12">
+                <h2 class="font-bold text-lg mb-4">{{ $t('share') }}</h2>
+                <div class="mb-6 flex items-center justify-center w-full space-x-4">
+                    <GNuxtLink :to="miShareUrl" target="_blank" class="h-12 p-3 flex items-center rounded-full bg-accent-600 hover:opacity-80 text-white"><MiIco class="w-7 h-7" /><span class="sr-only">Misskey</span><div class="ml-1.5 font-bold">{{ $t('note') }}</div></GNuxtLink>
+                    <GNuxtLink :to="mtdShareUrl" target="_blank" class="w-12 h-12 p-3 rounded-full bg-[#563ACC] hover:opacity-80 text-white"><MastoIco class="w-6 h-6" /><span class="sr-only">Mastodon</span></GNuxtLink>
+                    <GNuxtLink :to="twShareUrl" target="_blank" class="w-12 h-12 p-3 rounded-full bg-black hover:opacity-80 text-white"><TwitterXIco class="w-6 h-6" /><span class="sr-only">X (Twitter)</span></GNuxtLink>
+                </div>
                 <GNuxtLink :to="localePath('/blog/', originalLocale)" class="text-xl font-bold hover:opacity-70">
                     <LeftIco class="mr-2" />{{ $t('_blog.back') }}
                 </GNuxtLink>
@@ -24,9 +30,14 @@
 
 <script setup lang="ts">
 import LeftIco from 'bi/arrow-left.svg';
-import { joinURL, parseURL } from 'ufo';
+import { joinURL, parseURL, withQuery } from 'ufo';
 import { isLocalPath } from '@/assets/js/misc';
 import type { MiBlogParsedContent } from '~/types/content';
+
+import MiIco from '@/assets/svg/misskey_mi_bi.svg';
+import MastoIco from 'bi/mastodon.svg';
+import TwitterXIco from 'bi/twitter-x.svg';
+
 // 日本語でしか提供されない
 defineI18nRoute({
     locales: ['ja'],
@@ -69,6 +80,21 @@ route.meta.description = data.value?.description;
 
 const pd = data.value.date ? new Date(data.value.date).toISOString() : undefined;
 
+const miShareUrl = computed(() => withQuery('https://misskey-hub.net/share', {
+    text: route.meta.title + ' - Misskey Hub',
+    url: `${runtimeConfig.public.baseUrl}/ja/blog/${route.params.slug}/`,
+}));
+
+const mtdShareUrl = computed(() => withQuery('https://donshare.net/share.html', {
+    text: route.meta.title + ' - Misskey Hub',
+    url: `${runtimeConfig.public.baseUrl}/ja/blog/${route.params.slug}/`,
+}));
+
+const twShareUrl = computed(() => withQuery('https://twitter.com/share', {
+    text: route.meta.title + ' - Misskey Hub',
+    url: `${runtimeConfig.public.baseUrl}/ja/blog/${route.params.slug}/`,
+}));
+
 route.meta.graph = [
     {
         "@type": "BlogPosting",