From b8c3883990d3b51d58b177f6e85c25afcab06f40 Mon Sep 17 00:00:00 2001
From: DGCK81LNN <54282183+DGCK81LNN@users.noreply.github.com>
Date: Fri, 5 Apr 2024 01:05:17 +0800
Subject: [PATCH] feat(xegoe): mark legacy spellings red

---
 package.json          |  2 +-
 src/plugins/xegoe.tsx | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 55ba4e6..9b388c8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-xdi8",
   "description": "Shidinn tools for Koishi",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [
diff --git a/src/plugins/xegoe.tsx b/src/plugins/xegoe.tsx
index d479d2f..14ac888 100644
--- a/src/plugins/xegoe.tsx
+++ b/src/plugins/xegoe.tsx
@@ -49,10 +49,14 @@ function xhTranscribe(
   return ctx.xdi8.xdi8ToHanziTranscriber.transcribe(text, { ziSeparator: " " })
 }
 
-function ruby(chars: { h: string; x: string }[], className?: string) {
-  const ruby = <ruby>{chars.flatMap(({ h, x }) => [h, <rt>{chatToXdPUA(x)}</rt>])}</ruby>
-  if (className) return <div class={className}>{ruby}</div>
-  return ruby
+function ruby(chars: { h: string; x: string; legacy?: boolean }[], className?: string) {
+  const ruby = chars.flatMap(({ h, x, legacy }) => (
+    <ruby class={[legacy && "char-legacy"]}>
+      {h}
+      <rt>{chatToXdPUA(x)}</rt>
+    </ruby>
+  ))
+  return <span class={className}>{ruby}</span>
 }
 
 function formatResult<T extends "h" | "x">(
@@ -100,7 +104,7 @@ function formatResult<T extends "h" | "x">(
         {seg[0].content.map(seg => seg[sourceType]).join("")}:
         <ul class="alternations">
           {seg.map(alt => (
-            <li class={`alternation ${alt.legacy ? "alternation-legacy" : ""}`}>
+            <li class="alternation">
               {ruby(alt.content)} <span class="note">{alt.note}</span>
             </li>
           ))}
@@ -162,8 +166,8 @@ export function apply(ctx: Context, config: Config) {
               margin: 0;
               padding-left: 0.5em;
             }
-            .alternation-legacy {
-              color: #777;
+            .char-legacy {
+              color: red;
             }
             .footnotes-only ruby {
               font-size: 1.333333em;