[Feat] support custom font-family for watermark and code (#21)

* [Feat] support custom font-family for watermark and code * [Update] README
mistricky · Feb 24, 2024 · 749e8ba · 749e8ba
1 parent 7963b3f
commit 749e8ba
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -59,8 +59,10 @@ There is a default config:
 {
     mac_window_bar = true,-- (Optional) MacOS style title bar switch
     opacity = true, -- (Optional) The code snap has some opacity by default, set it to false for 100% opacity 
-    watermark = "CodeSnap.nvim" -- (Optional) you can custom your own watermark, but if you don't like it, just set it to ""
-    preview_title = "CodeSnap.nvim" -- (Optional) preview page title
+    watermark = "CodeSnap.nvim", -- (Optional) you can custom your own watermark, but if you don't like it, just set it to ""
+    preview_title = "CodeSnap.nvim", -- (Optional) preview page title
+    editor_font_family = "CaskaydiaCove Nerd Font", -- (Optional) preview code font family
+    watermark_font_family = "Pacifico", -- (Optional) watermark font family
 }
 ```
 

diff --git a/lua/codesnap/static.lua b/lua/codesnap/static.lua
@@ -6,6 +6,8 @@ return {
     opacity = true,
     watermark = "CodeSnap.nvim",
     preview_title = "CodeSnap.nvim",
+    editor_font_family = "CaskaydiaCove Nerd Font",
+    watermark_font_family = "Pacifico",
     auto_load = true,
   },
   cwd = path_utils.back(path_utils.back(debug.getinfo(1, "S").source:sub(2):match("(.*[/\\])"))),

diff --git a/snap-client/src/app.tsx b/snap-client/src/app.tsx
@@ -84,9 +84,11 @@ function App() {
         <div id="frame" className="rounded-xl overflow-hidden">
           <Frame
             ref={frameRef}
+            watermarkFontFamily={config?.watermark_font_family}
             watermark={config?.watermark ?? WATER_MARK_PLACEHOLDER}
           >
             <Editor
+              codeFontFamily={config?.editor_font_family}
               language={event?.code?.language}
               macStyleTitleBar={config?.mac_window_bar}
             >

diff --git a/snap-client/src/components/editor/editor.tsx b/snap-client/src/components/editor/editor.tsx
@@ -5,16 +5,25 @@ export interface EditorProps {
   macStyleTitleBar?: boolean;
   language?: string;
   opacity?: boolean;
+  codeFontFamily?: string;
   children: string;
 }
 
+const DEFAULT_CODE_FONT_FAMILY = "CaskaydiaCove Nerd Font";
+const LSP_LANGUAGE_NAME_MAP: Record<string, string> = {
+  typescriptreact: "tsx",
+  javascriptreact: "jsx",
+};
+
 const highlightLanguage = (code: string, language?: string) => {
   if (!language) {
     return hljs.highlightAuto(code).value;
   }
 
   try {
-    return hljs.highlight(code, { language }).value;
+    return hljs.highlight(code, {
+      language: LSP_LANGUAGE_NAME_MAP[language] ?? language,
+    }).value;
   } catch {
     return hljs.highlightAuto(code).value;
   }
@@ -23,6 +32,7 @@ const highlightLanguage = (code: string, language?: string) => {
 export const Editor = ({
   children,
   language,
+  codeFontFamily,
   opacity = true,
   macStyleTitleBar = true,
 }: EditorProps) => (
@@ -33,6 +43,7 @@ export const Editor = ({
     <pre className="mt-4">
       <code
         className="code"
+        style={{ fontFamily: codeFontFamily ?? DEFAULT_CODE_FONT_FAMILY }}
         dangerouslySetInnerHTML={{
           __html: highlightLanguage(children, language),
         }}

diff --git a/snap-client/src/components/editor/frame.tsx b/snap-client/src/components/editor/frame.tsx
@@ -1,15 +1,23 @@
 import { forwardRef, PropsWithChildren } from "react";
 
+const DEFAULT_WATERMARK_FONT_FAMILY = "Pacifico";
+
 export interface FrameProps {
   watermark?: string;
+  watermarkFontFamily?: string;
 }
 
 export const Frame = forwardRef<HTMLDivElement, PropsWithChildren<FrameProps>>(
-  ({ children, watermark }, ref) => (
+  ({ children, watermark, watermarkFontFamily }, ref) => (
     <div ref={ref} className="bg-relay min-w-[800px] p-20">
       {children}
       {watermark && (
-        <p className="pacifico-regular text-xl opacity-50 font-bold text-white text-center w-full mt-14">
+        <p
+          style={{
+            fontFamily: watermarkFontFamily ?? DEFAULT_WATERMARK_FONT_FAMILY,
+          }}
+          className="text-xl opacity-50 font-bold text-white text-center w-full mt-14"
+        >
           {watermark}
         </p>
       )}

diff --git a/snap-client/src/hooks/use-config.ts b/snap-client/src/hooks/use-config.ts
@@ -6,6 +6,8 @@ export interface Config {
   watermark: string;
   auto_load: boolean;
   preview_title: string;
+  watermark_font_family: string;
+  editor_font_family: string;
 }
 
 const CONFIG_STORAGE_KEY = "CONFIG_STORAGE_KEY";

diff --git a/snap-client/src/input.css b/snap-client/src/input.css
@@ -22,10 +22,6 @@ html, body, #root {
     box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
   }
 
-  .code * {
-    font-family: 'CaskaydiaCove Nerd Font';
-  }
-
   .pacifico-regular {
     font-family: "Pacifico", cursive;
     font-weight: 400;

diff --git a/snap-server/src/event_handler/config.rs b/snap-server/src/event_handler/config.rs
@@ -7,6 +7,8 @@ pub struct Config {
     watermark: Option<String>,
     auto_load: bool,
     preview_title: String,
+    watermark_font_family: String,
+    editor_font_family: String,
 }
 
 impl From<&str> for Config {