i18n: share via QR (#54)

Co-authored-by: Anthony Fu <[email protected]>

app/app.css

@@ -100,3 +100,77 @@ html.dark {
   width: 0 !important;
   height: 0 !important;
 }
+
+/* Markdown */
+
+.markdown-content a {
+  --uno: 'op75 hover:op100 hover:underline';
+}
+
+.markdown-content h1 {
+  --uno: font-bold text-2xl mb5;
+}
+
+.markdown-content h2 {
+  --uno: text-xl mb5 op75 border-b border-base py2;
+}
+
+.markdown-content p {
+  --uno: mb5;
+}
+
+.markdown-content pre {
+  --uno: mb5;
+}
+
+.markdown-content pre {
+  --uno: px3 py2 bg-gray-100 rounded max-w-200 of-auto text-sm;
+}
+
+.markdown-content .shiki {
+  background: #f7f7f7 !important;
+}
+
+.dark .markdown-content .shiki {
+  background: var(--shiki-dark-bg) !important;
+}
+
+.dark .markdown-content .shiki span {
+  color: var(--shiki-dark) !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,6 @@
 <script lang="ts" setup>
 import type { Pausable } from '@vueuse/core'
+import QifiHowToScan from './QifiHowToScan'
 
 const props = withDefaults(defineProps<{
   prefix?: string
@@ -72,7 +73,7 @@ function onDone() {
   <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 +82,14 @@ function onDone() {
     />
     <div flex="~ gap-2">
       <SimpleButton w-full icon="i-uil-pause-circle" @click="stopSometime(3)">
-        暫停 3 秒
+        {{ $t('actions.pauseQifi', [3]) }}
       </SimpleButton>
       <SimpleButton w-full icon="i-uil-multiply " @click="onDone()">
-        關閉
+        {{ $t('actions.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 mt2 class="markdown-content">
+      <QifiHowToScan />
     </div>
   </div>
 </template>

app/components/qifi/QifiHowToScan.en.md

@@ -0,0 +1,7 @@
+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 inline-flex align-middle><span i-uil-pause-circle /></span> to pause, which might help you scan.
+
+You can also manually enter the scanning webpage address: [qrss.netlify.app](https://qrss.netlify.app)

app/components/qifi/QifiHowToScan.ts

@@ -0,0 +1,22 @@
+export default defineComponent({
+  setup() {
+    const { locale } = useI18n()
+    const components = Object.fromEntries(
+      Array.from(Object.entries(import.meta.glob('./QifiHowToScan.*.md'))
+        .map(([key, value]) => [key.match(/\.([\w\-]+)\.\w+$/)![1], value]),
+      ),
+    )
+
+    // const usingFallback = computed(() => !components[locale.value])
+    const component = shallowRef<any>()
+
+    watch(locale, async () => {
+      const mod = await (components[locale.value] || components['zh-Hant'])()
+      component.value = mod.default
+    }, {
+      immediate: true,
+    })
+
+    return () => component.value ? h(component.value) : null
+  },
+})

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

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

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

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

app/layouts/content.vue

@@ -17,41 +17,3 @@ const isMatchedLocale = computed(() => locale.value === route.meta.locale)
     <slot />
   </div>
 </template>
-
-<style>
-.markdown-content a {
-  --uno: 'op75 hover:op100 hover:underline';
-}
-
-.markdown-content h1 {
-  --uno: font-bold text-2xl mb5;
-}
-
-.markdown-content h2 {
-  --uno: text-xl mb5 op75 border-b border-base py2;
-}
-
-.markdown-content p {
-  --uno: mb5;
-}
-
-.markdown-content pre {
-  --uno: mb5;
-}
-
-.markdown-content pre {
-  --uno: px3 py2 bg-gray-100 rounded max-w-200 of-auto text-sm;
-}
-
-.markdown-content .shiki {
-  background: #f7f7f7 !important;
-}
-
-.dark .markdown-content .shiki {
-  background: var(--shiki-dark-bg) !important;
-}
-
-.dark .markdown-content .shiki span {
-  color: var(--shiki-dark) !important;
-}
-</style>

app/locales/en.json

@@ -128,7 +128,9 @@
     "downloadAllLyrics": "Download All Lyrics",
     "exportSelected": "Export Selected",
     "removeSelected": "Remove Selected",
-    "shareViaQR": "Share via QR Code"
+    "shareViaQR": "Share via QR Code",
+    "close": "Close",
+    "pauseQifi": "Pause {0}s"
   },
   "messages": {
     "wip": "The website is under development, and many features are not yet complete. Welcome to report issues via Discord",

app/locales/zh-Hans.json

@@ -128,7 +128,9 @@
     "downloadAllLyrics": "下载所有歌词文件",
     "exportSelected": "导出所选",
     "removeSelected": "删除所选",
-    "shareViaQR": "二维码分享"
+    "shareViaQR": "二维码分享",
+    "close": "关闭",
+    "pauseQifi": "暂停 {0} 秒"
   },
   "messages": {
     "wip": "网站开发中、许多功能尚未完善。欢迎通过 Discord 回报问题",

app/locales/zh-Hant.json

@@ -134,7 +134,9 @@
     "downloadAllLyrics": "下載所有歌詞檔案",
     "exportSelected": "匯出所選",
     "removeSelected": "刪除所選",
-    "shareViaQR": "QR 分享"
+    "shareViaQR": "QR 分享",
+    "close": "關閉",
+    "pauseQifi": "暫停 {0} 秒"
   },
   "appname": "二重丸",
   "errors": {

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",