fix : reduce css file size

packages/core/src/lib/components/equation.tsx

@@ -1,16 +1,20 @@
 /**
  * @link react-katex https://github.com/MatejBransky/react-katex?tab=readme-ov-file
  */
-import "katex/dist/katex.min.css";
 import TeX from "@matejmazur/react-katex";
+import type { ComponentProps } from "react";
 
-import { EquationArgs } from "../types";
-
-const Equation = ({ equation: { expression } }: EquationArgs) => {
+const Equation = ({
+  className = "",
+  ...props
+}: ComponentProps<typeof TeX> & { className?: string }) => {
   return (
-    <TeX className="notion-block notion-equation notion-equation-block">
-      {expression}
-    </TeX>
+    <TeX
+      className={`notion-block notion-equation ${
+        props.block ? "notion-equation-block" : "notion-equation-inline"
+      } ${className}`}
+      {...props}
+    />
   );
 };
 

packages/core/src/lib/components/internal/rich-text.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { getColorCss, renderEquation } from "../../utils";
+import { getColorCss } from "../../utils";
 import type { TextArgs, EquationArgs } from "../../types";
-import { Helmet } from "react-helmet";
+import Equation from "../equation";
 
 function RichText({ props }: { props: TextArgs[] }) {
   if (props.length === 0) {
@@ -14,7 +14,11 @@ function RichText({ props }: { props: TextArgs[] }) {
         text.type === "text" ? (
           <Text key={index} props={text} />
         ) : (
-          <Equation key={index} props={text as unknown as EquationArgs} />
+          <Equation
+            key={index.toString()}
+            inline
+            {...(text as unknown as EquationArgs)}
+          />
         ),
       )}
     </>
@@ -69,26 +73,4 @@ function Text({ props }: { props: TextArgs }) {
   return <>{renderText(content)}</>;
 }
 
-function Equation({ props }: { props: EquationArgs }) {
-  const {
-    equation: { expression },
-  } = props;
-
-  return (
-    <>
-      <Helmet>
-        <link
-          rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
-          integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
-          crossOrigin="anonymous"
-        />
-      </Helmet>
-      <span
-        className="notion-equation notion-equation-inline"
-        dangerouslySetInnerHTML={{ __html: renderEquation(expression) }}
-      />
-    </>
-  );
-}
 export default RichText;

packages/core/src/lib/index.css

@@ -1,3 +1,47 @@
+@font-face {
+  font-family: "KaTeX_Main";
+  src: url("/fonts/KaTeX_Main-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "KaTeX_Math";
+  src: url("/fonts/KaTeX_Math-Italic.woff2") format("woff2");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Basic KaTeX Styles */
+.katex {
+  font:
+    normal 1.21em KaTeX_Main,
+    Times New Roman,
+    serif;
+  line-height: 1.2;
+  text-indent: 0;
+  text-rendering: auto;
+}
+
+.katex-display {
+  display: block;
+  margin: 1em 0;
+  text-align: center;
+}
+
+.katex-math {
+  display: inline-block;
+}
+
+.katex .mathit {
+  font-family: KaTeX_Math;
+  font-style: italic;
+}
+
+/* Notion Styles */
+
 .notion * {
   box-sizing: border-box;
   margin-block-start: 0;
@@ -1307,24 +1351,3 @@
   color: #d3d3d3;
   font-size: 13px;
 }
-
-.notion-block-fallback {
-  padding: 10px;
-  margin: 4px 0;
-  border-radius: 4px;
-  background-color: var(--notion-gray_background);
-}
-
-.notion-block-fallback-content {
-  font-size: 14px;
-  color: var(--fg-color-3);
-}
-
-.notion-block-fallback-type {
-  color: var(--notion-gray);
-  background-color: var(--notion-gray_background_co);
-  padding: 2px 6px;
-  border-radius: 3px;
-  margin-right: 6px;
-  font-family: monaco, "Andale Mono", "Ubuntu Mono", monospace;
-}

packages/core/src/lib/utils.ts

@@ -1,4 +1,3 @@
-import katex from "katex";
 import romans from "romans";
 import type { ContextedBlock } from "./types";
 
@@ -34,9 +33,6 @@ export const getYoutubeId = (url: string): string | null => {
   return null;
 };
 
-export const renderEquation = (expression: string) =>
-  katex.renderToString(expression, { throwOnError: false });
-
 export class ListItemMarker {
   private resolvers: ((step: number) => string)[];
 

packages/core/vite.config.ts

@@ -21,5 +21,13 @@ export default defineConfig({
       external: ["react", "react/jsx-runtime"],
     },
     copyPublicDir: false,
+    output: {
+      assetFileNames: (assetInfo) => {
+        if (assetInfo.name.endsWith(".woff2")) {
+          return "fonts/[name][extname]";
+        }
+        return "assets/[name]-[hash][extname]";
+      },
+    },
   },
 });