feat(i18n): share via QR

app/app.css

@@ -100,3 +100,39 @@ html.dark {
   width: 0 !important;
   height: 0 !important;
 }
+
+.markdown-magic-link {
+  display: inline-flex;
+  align-items: center;
+  background: rgb(156 163 175 / 0.3) ;
+  transform: translateY(3px);
+  line-height: 100%;
+  color: var(--fg-light) !important;
+  --uno: gap-1 transition rounded px1.5 py1 important-border-0 font-condensed;
+}
+
+.markdown-magic-link:hover {
+  background: rgb(156 163 175 / 0.4);
+  color: var(--fg) !important;
+}
+
+.markdown-magic-link-image {
+  display: inline-block;
+  height: 1.1em;
+  width: 1.1em;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 2px;
+}
+
+.markdown-magic-link.markdown-magic-link-github-at {
+  transform: translateY(6px);
+  --uno: pl-0 py-0 pr2 text-sm gap-1.2 rounded-full;
+}
+
+.markdown-magic-link.markdown-magic-link-github-at .markdown-magic-link-image {
+  height: 1.6em;
+  width: 1.6em;
+  border-radius: 50%;
+}

app/components/atomic/QifiCode.vue → app/components/qifi/QifiCode.vue

@@ -1,5 +1,9 @@
 <script lang="ts" setup>
 import type { Pausable } from '@vueuse/core'
+import type { Component } from 'vue'
+import QifiHowToScanZhHans from '~/components/qifi/QifiHowToScan.zh-Hans.md'
+import QifiHowToScanEn from './QifiHowToScan.en.md'
+import QifiHowToScanZhHant from './QifiHowToScan.zh-Hant.md'
 
 const props = withDefaults(defineProps<{
   prefix?: string
@@ -66,13 +70,30 @@ function stopSometime(seconds: number) {
 function onDone() {
   emit('done')
 }
+
+const howToScan = {
+  'zh-Hans': QifiHowToScanZhHans,
+  'zh-Hant': QifiHowToScanZhHant,
+  'en': QifiHowToScanEn,
+  // TODO QifiHowToScanJp
+} as Record<string, Component | undefined>
+
+// Configure this to support language fallback.
+const { t } = useI18n({
+  useScope: 'local',
+  messages: Object.keys(howToScan).reduce((acc, key) => {
+    acc[key] = { howToScanComponent: key }
+    return acc
+  }, {} as Record<string, Record<string, string>>),
+
+})
 </script>
 
 <template>
   <div flex="~ col gap-2" p4>
     <h3 flex items-center gap2 p2 text-xl>
       <span i-uil-qrcode-scan inline-block />
-      掃碼分享
+      {{ $t('actions.shareViaQR') }}
     </h3>
     <div
       class="sticky top-0 z-10 aspect-square [&>svg]:h-full [&>svg]:w-full"
@@ -81,25 +102,12 @@ function onDone() {
     />
     <div flex="~ gap-2">
       <SimpleButton w-full icon="i-uil-pause-circle" @click="stopSometime(3)">
-        暫停 3 秒
+        {{ $t('share.qifi.pausePlayback') }}
       </SimpleButton>
       <SimpleButton w-full icon="i-uil-multiply " @click="onDone()">
-        關閉
+        {{ $t('share.qifi.close') }}
       </SimpleButton>
     </div>
-    <div flex="~ col gap-4" mt2 p2 text-sm>
-      <p>
-        由於單個 QR Code 的傳輸大小限制，我們採用了名為 <a href="https://github.com/qifi-dev/qrs" text-blue underline>QiFi/Qrs</a> 的 <b>動態 QR Code</b>。
-      </p>
-      <p>
-        使用相機 App 掃描後，將導向 QRS 掃描器頁面，繼續掃描傳輸剩餘信息。過程中可能會需要相機權限，請放心，網頁代碼開源且不保存相機畫面。數據接收完成後，會自動回到 maru 打開對應歌曲。
-      </p>
-      <p>
-        部分相機 APP 會因為動態變化的二維碼而無法正常掃描，也你可以點擊 <span i-uil-pause-circle inline-block align-middle /> 暫停 5 秒，這會有助於你掃描。
-      </p>
-      <p>
-        你也可以手動輸入掃描網頁的地址：<a href="https://qrss.netlify.app" text-blue underline>qrss.netlify.app</a>
-      </p>
-    </div>
+    <component :is="howToScan[t('howToScanComponent')]" />
   </div>
 </template>

app/components/qifi/QifiHowToScan.en.md

@@ -0,0 +1,11 @@
+<div flex="~ col gap-4" mt2 p2 text-sm>
+
+Due to the transfer size limitation of a single QR Code, we use a <b>dynamic QR Code</b> called {QiFi}.
+
+After scanning with a camera app, it will direct you to the QRS scanner page to continue scanning the remaining information. You may need camera permissions during this process; rest assured, the webpage code is open source and does not save camera footage. Once data reception is complete, it will automatically return to maru to open the corresponding song.
+
+Some camera apps may not scan dynamic QR codes properly. You can click <span rounded bg-gray:20 p1><span i-uil-pause-circle inline-block align-middle /> <I18nT keypath="share.qifi.pausePlayback" /></span>, which will help you scan.
+
+You can also manually enter the scanning webpage address: <a href="https://qrss.netlify.app" text-blue underline>qrss.netlify.app</a>
+
+</div>

app/components/qifi/QifiHowToScan.zh-Hans.md

@@ -0,0 +1,11 @@
+<div flex="~ col gap-4" mt2 p2 text-sm>
+
+由于单个 QR Code 的传输大小限制，我们采用了一种名为 {QiFi} 的 <b>动态 QR Code</b>。
+
+使用相机 App 扫描后，将导向 QRS 扫描器页面，继续扫描传输剩余信息。过程中可能会需要相机权限，请放心，网页代码开源且不保存相机画面。数据接收完成后，会自动返回 maru 打开对应歌曲。
+
+部分相机 APP 会因为动态变化的二维码而无法正常扫描，您可以点击 <span rounded bg-gray:20 p1><span i-uil-pause-circle inline-block align-middle /> <I18nT keypath="share.qifi.pausePlayback" /></span>，这会有助于您扫描。
+
+您也可以手动输入扫描网页的地址：<a href="https://qrss.netlify.app" text-blue underline>qrss.netlify.app</a>
+
+</div>

app/components/qifi/QifiHowToScan.zh-Hant.md

@@ -0,0 +1,11 @@
+<div flex="~ col gap-4" mt2 p2 text-sm>
+
+由於單個 QR Code 的傳輸大小限制，我們採用了名為 {QiFi} 的 <b>動態 QR Code</b>。
+
+使用相機 App 掃描後，將導向 QRS 掃描器頁面，繼續掃描傳輸剩餘信息。過程中可能會需要相機權限，請放心，網頁代碼開源且不保存相機畫面。數據接收完成後，會自動回到 maru 打開對應歌曲。
+
+部分相機 APP 會因為動態變化的二維碼而無法正常掃描，也你可以點擊 <span rounded bg-gray:20 p1><span i-uil-pause-circle inline-block align-middle /> <I18nT keypath="share.qifi.pausePlayback" /></span>，這會有助於你掃描。
+
+你也可以手動輸入掃描網頁的地址：<a href="https://qrss.netlify.app" text-blue underline>qrss.netlify.app</a>
+
+</div>

app/locales/en.json

@@ -167,5 +167,11 @@
     "space": "Space",
     "up": "Up",
     "table": "Shortcut Table"
+  },
+  "share": {
+    "qifi": {
+      "pausePlayback": "Pause 3s",
+      "close": "Close"
+    }
   }
 }

app/locales/zh-Hans.json

@@ -167,5 +167,11 @@
     "space": "空白键",
     "up": "上",
     "table": "快捷键列表"
+  },
+  "share": {
+    "qifi": {
+      "pausePlayback": "暂停 3 秒",
+      "close": "关闭"
+    }
   }
 }

app/locales/zh-Hant.json

@@ -168,5 +168,11 @@
     "right": "右",
     "down": "下",
     "table": "快捷鍵列表"
+  },
+  "share": {
+    "qifi": {
+      "pausePlayback": "暫停 3 秒",
+      "close": "關閉"
+    }
   }
 }

app/shims.d.ts

@@ -0,0 +1,6 @@
+declare module '*.md' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<object, object, any>
+  export default component
+}

nuxt.config.ts

@@ -1,5 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import { execaSync } from 'execa'
+import MarkdownItMagicLink from 'markdown-it-magic-link'
 import { appDescription, appName } from './app/constants'
 import { dependencies } from './package.json'
 
@@ -24,6 +25,16 @@ export default defineNuxtConfig({
         dark: 'vitesse-dark',
       },
     },
+    markdownItSetup(md) {
+      md.use(MarkdownItMagicLink, {
+        linksMap: {
+          QiFi: 'https://github.com/qifi-dev/qrs',
+        },
+        imageOverrides: [
+          ['https://github.com/qifi-dev/qrs', 'https://cdn.jsdelivr.net/gh/qifi-dev/qrs/public/logo.svg'],
+        ],
+      })
+    },
   },
 
   runtimeConfig: {

package.json

@@ -57,6 +57,7 @@
     "esno": "^4.8.0",
     "execa": "^9.4.0",
     "fast-glob": "^3.3.2",
+    "markdown-it-magic-link": "^0.1.4",
     "nuxt": "^3.13.2",
     "nuxt-compile-markdown": "^0.1.1",
     "shiki": "^1.22.0",