From 28f6386ec5b8f9564ebbb08d8cd4782f5e9f9794 Mon Sep 17 00:00:00 2001
From: taga3s <bepozurapu274@gmail.com>
Date: Sat, 14 Sep 2024 11:16:41 +0900
Subject: [PATCH 1/2] fix: filename ui styling

---
 app/modules/rehype-momiji/buildCodeBlockHTML.ts | 13 +++++++------
 app/modules/rehype-momiji/colors.ts             |  6 ++++++
 app/modules/rehype-momiji/rehypeMomiji.ts       |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 app/modules/rehype-momiji/colors.ts

diff --git a/app/modules/rehype-momiji/buildCodeBlockHTML.ts b/app/modules/rehype-momiji/buildCodeBlockHTML.ts
index 3db0926..9d80a71 100644
--- a/app/modules/rehype-momiji/buildCodeBlockHTML.ts
+++ b/app/modules/rehype-momiji/buildCodeBlockHTML.ts
@@ -1,14 +1,16 @@
-import { bundledLanguages, bundledThemes, type BundledLanguage, type BundledTheme } from "shiki";
+import { bundledLanguages, bundledThemes, type BundledTheme } from "shiki";
 import { getHighlighter } from "./highlighter";
 import { toHtml } from "hast-util-to-html";
 import type { Element } from "hast";
+import { COLOR_SHIRONERI, COLOR_HAI } from "./colors";
 
 const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages });
+const defaultFilenameUIColor = `color: ${COLOR_SHIRONERI}; background-color: ${COLOR_HAI};`;
 
-const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, theme?: string) => {
+const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, theme: BundledTheme) => {
   const hast = defaultHighlighter.codeToHast(rawCode, {
     lang: lang,
-    theme: theme ?? "github-dark",
+    theme: theme,
   });
 
   const targetElem = hast.children[0] as Element;
@@ -17,7 +19,7 @@ const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, the
   if (filename !== "" && targetElem) {
     targetElem.properties = {
       class: targetElem.properties.class,
-      style: `${targetElem.properties.style}; padding-top: 12px;`,
+      style: `${targetElem.properties.style}; padding-top: 0px;`,
       tabindex: targetElem.properties.tabindex,
     };
 
@@ -25,8 +27,7 @@ const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, the
       type: "element",
       tagName: "div",
       properties: {
-        style:
-          "width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; color: white; background-color: gray;",
+        style: `width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; border-radius: 0 0 4px 4px; ${defaultFilenameUIColor};`,
       },
       children: [
         {
diff --git a/app/modules/rehype-momiji/colors.ts b/app/modules/rehype-momiji/colors.ts
new file mode 100644
index 0000000..df64115
--- /dev/null
+++ b/app/modules/rehype-momiji/colors.ts
@@ -0,0 +1,6 @@
+const COLOR_SUMI = "#1C1C1C;";
+const COLOR_SHIRONERI = "#FCFAF2";
+const COLOR_HAI = "#828282";
+const COLOR_GOFUN = "#FFFFFB";
+
+export { COLOR_SUMI, COLOR_SHIRONERI, COLOR_HAI, COLOR_GOFUN };
diff --git a/app/modules/rehype-momiji/rehypeMomiji.ts b/app/modules/rehype-momiji/rehypeMomiji.ts
index bc835b9..63ad1c4 100644
--- a/app/modules/rehype-momiji/rehypeMomiji.ts
+++ b/app/modules/rehype-momiji/rehypeMomiji.ts
@@ -7,7 +7,7 @@ import { parser } from "./parser";
 import { isArray, isObject, isString } from "./utils/checkTypeOfOperandValue";
 import { buildCodeBlockHTML } from "./buildCodeBlockHTML";
 
-type Options = { theme?: BundledTheme; fallbackLang?: BundledLanguage };
+type Options = { theme: BundledTheme; fallbackLang?: BundledLanguage };
 
 const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages });
 

From bb8d85ea848f296a004f6e3e02edaa767e749bf9 Mon Sep 17 00:00:00 2001
From: taga3s <bepozurapu274@gmail.com>
Date: Sat, 14 Sep 2024 11:51:09 +0900
Subject: [PATCH 2/2] docs(rehype-momiji): update features

---
 app/modules/rehype-momiji/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/modules/rehype-momiji/README.md b/app/modules/rehype-momiji/README.md
index 6527bd0..477eb94 100644
--- a/app/modules/rehype-momiji/README.md
+++ b/app/modules/rehype-momiji/README.md
@@ -5,3 +5,4 @@
 ## features
 
 - Highlighting Code
+- Displaying Filename