From 0a2cfb13ea92f4a694eeafd4e87d8a8adcde0bb8 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Tue, 12 Dec 2023 00:36:58 +0900
Subject: [PATCH] =?UTF-8?q?(add)=20=E3=83=96=E3=83=AD=E3=82=B0=E3=81=AB?=
 =?UTF-8?q?=E3=82=B7=E3=82=A7=E3=82=A2=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml     |  2 ++
 pages/blog/[slug].vue | 28 +++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 4a441988..0315d961 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3,6 +3,8 @@ learnMore: "詳しく知る"
 loading: "読み込み中…"
 clickToExpand: "（クリックして展開）"
 copy: "コピー"
+share: "共有する"
+note: "ノート"
 
 _seo:
   siteName: "Misskey Hub"
diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 2c920f63..b6285479 100644
--- a/pages/blog/[slug].vue
+++ b/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",