refactor!: rewrite with mjs, refactor doc page

koishijs · Aug 7, 2024 · 843efb0 · 843efb0
1 parent cee5ed0
commit 843efb0
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 97 deletions.
diff --git a/.github/workflows/build.prod.yml → .github/workflows/build.prod.yml.disabled b/.github/workflows/build.prod.yml → .github/workflows/build.prod.yml.disabled
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
@@ -5,16 +5,33 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QQ Face</title>
-    <link rel="stylesheet" type="text/css" href="./index.css">
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="public/styles.css" />
   </head>
   <body>
     <div id="app">
       <div id="container">
-        <h1>QQ Face ID Table</h1>
+        <h1>QQ Face Table</h1>
+        <div
+          id="placeholder"
+          style="
+            display: flex;
+            width: 100%;
+            height: 75vh;
+            justify-content: center;
+            align-items: center;
+            font-size: 4rem;
+          "
+        >
+          &nbsp;&nbsp;&nbsp;Loading...
+        </div>
         <section id="face-container"></section>
+        <section>
+          <p style="text-align: center">
+            <a href="https://github.com/koishijs/QFace">GitHub</a>
+          </p>
+        </section>
       </div>
     </div>
-    <script src="./index.js"></script>
+    <script src="public/index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
diff --git a/lib/index.js b/lib/index.js
@@ -1,27 +1,34 @@
-const data = require('./data.json')
+import data from './data.json'
 
-function get(id) {
+export { data }
+
+export function getFaceById(id) {
   id = String(id)
   return data.find((el) => el.QSid === id)
 }
 
-function getByText(input) {
+export function findFaceByInput(input) {
   if (input[0] === '/') input = input.substring(1)
-  const match = data.find((el) => el.QDes.substring(1) === input)
-    || data.find((el) => el.Input.includes(input))
-    || data.find((el) => el.Input.some((i) => i.startsWith(input)))
+  const match =
+    data.find((el) => el.QDes.substring(1) === input) ||
+    data.find((el) => el.Input.includes(input)) ||
+    data.find((el) => el.Input.some((i) => i.startsWith(input)))
   return match ? match.QSid : null
 }
 
-function getUrl(id, base = 'https://koishi.js.org/QFace') {
-  const item = get(id)
+export function getFaceUrl(id, baseURL = 'https://koishi.js.org/QFace/') {
+  const item = getFaceById(id)
   if (!item) return ''
-  return base + (item.isStatic ? `/static/s${id}.png` : `/gif/s${id}.gif`)
+  const url = new URL(
+    item.isStatic ? `static/s${id}.png` : `gif/s${id}.gif`,
+    baseURL
+  )
+  return url.href
 }
 
-module.exports = {
-  data,
-  get,
-  getUrl,
-  getByText,
+// alias
+export {
+  getFaceById as get,
+  findFaceByInput as getByText,
+  getFaceUrl as getUrl,
 }
diff --git a/package.json b/package.json
@@ -2,12 +2,16 @@
   "name": "qface",
   "version": "1.4.1",
   "main": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "types": "lib/index.d.ts",
+  "type": "module",
   "files": [
     "lib"
   ],
   "repository": "https://github.com/koishijs/QFace.git",
-  "author": "Shigma <shigma10826@gmail.com>",
+  "authors": [
+    "Shigma <shigma10826@gmail.com>",
+    "dragon-fish <dragon-fish@qq.com>"
+  ],
   "license": "MIT",
   "keywords": [
     "tencent",
@@ -17,4 +21,4 @@
     "emoji",
     "reaction"
   ]
-}
+}
diff --git a/public/index.js b/public/index.js
@@ -0,0 +1,48 @@
+;(async () => {
+  /** @type {HTMLElement} */
+  const container = document.getElementById('face-container')
+  /** @type {HTMLElement} */
+  const placeholder = document.getElementById('placeholder')
+  /** @type {import('../lib').Face[]} */
+  const list = await fetch('./lib/data.json').then((res) => res.json())
+
+  placeholder.style.display = 'none'
+
+  list
+    .sort((a, b) => Number(a.QSid) - Number(b.QSid))
+    .forEach((item) => {
+      const { QSid, QDes, isStatic } = item
+
+      const src = isStatic ? `static/s${QSid}.png` : `gif/s${QSid}.gif`
+      const faceImg = document.createElement('img')
+      faceImg.src = src
+      faceImg.className = 'face-img'
+      faceImg.loading = 'lazy'
+      faceImg.onerror = function () {
+        const div = document.createElement('div')
+        div.className = 'face-img'
+        div.textContent = '?'
+        this.replaceWith(div)
+      }
+
+      const faceId = document.createElement('div')
+      faceId.className = 'face-id'
+      faceId.textContent = QSid
+
+      const faceDesc = document.createElement('div')
+      faceDesc.className = 'face-desc'
+      faceDesc.textContent = QDes.replace(/^\//, '')
+
+      const link = document.createElement('a')
+      link.href = src
+      link.target = '_blank'
+      link.className = 'face'
+      link.append(faceImg, faceDesc, faceId)
+
+      Object.entries(item, ([key, val]) => {
+        link.setAttribute(`data-${key}`, val)
+      })
+
+      container.append(link)
+    })
+})()
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,59 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: #0f172a;
+}
+
+h1 {
+  text-align: center;
+}
+
+#container {
+  padding: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+#face-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+  gap: 1rem;
+}
+
+#face-container .face {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #e28a00;
+  background-color: #fefefe;
+  width: 6rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  transition: all 0.25s;
+  cursor: pointer;
+  color: #0f172a;
+  text-decoration: none;
+}
+
+#face-container .face:hover {
+  box-shadow: 0 0 0 4px #feda83;
+}
+
+#face-container .face .face-img {
+  width: 4rem;
+  height: 4rem;
+  line-height: 0;
+  font-size: 4rem;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/scripts/sort.mjs b/scripts/sort.mjs
@@ -0,0 +1,16 @@
+import { readFile, writeFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+
+const dataJsonPath = resolve(import.meta.dirname, '../lib/data.json')
+
+/** @type {import('../lib').Face[]} */
+const data = JSON.parse((await readFile(dataJsonPath)).toString('utf-8'))
+
+writeFile(
+  dataJsonPath,
+  JSON.stringify(
+    data.sort((a, b) => ~~a.QSid - ~~b.QSid),
+    null,
+    2
+  )
+)
diff --git a/sort.js b/sort.js