Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix : reduce css file size #94

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

fix : reduce css file size #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
980d3c3
chore: add font file
anonymousRecords Feb 16, 2025
29a1c29
style: add basic KaTeX styles
anonymousRecords Feb 16, 2025
4ddfcfb
chore: add output to vite config
anonymousRecords Feb 16, 2025
bc66b2c
refactor: provide inline & block component
anonymousRecords Feb 16, 2025
bba951a
chore: remove renderEquation utils
anonymousRecords Feb 16, 2025
4e4c7f6
refactor: apply equation to richt text
anonymousRecords Feb 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added packages/core/public/fonts/KaTeX_Main-Regular.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/core/public/fonts/KaTeX_Math-Italic.woff2
View file
Open in desktop
Binary file not shown.
15 changes: 12 additions & 3 deletions packages/core/src/lib/components/equation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
/**
* @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 { EquationArgs } from "../types";

const Equation = ({ equation: { expression } }: EquationArgs) => {
type EquationProps = EquationArgs & { inline?: boolean };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p3;
The need for additional props like 'inline' signals a potential for expanding requirements for the TeX component. Rather than limiting props, it appears more beneficial to allow users to handle TeX more freely while providing sensible defaults. This approach gives users the flexibility to extend the component's functionality as their requirements evolve, while maintaining a solid foundation of default behavior.

This pattern aligns better with the principle of extensibility and follows the "open for extension, closed for modification" design principle. By exposing the full capabilities of the underlying TeX component, we empower users to adapt the component to their specific needs without requiring changes to the core implementation.

import TeX from '@matejmazur/react-katex';
import type { TeXProps } from '@matejmazur/react-katex';

const Equation = ({
  className = '',
  ...props
}: TeXProps) => {
  return (
    <TeX
      className={`notion-block notion-equation ${
        !props.block ? "notion-equation-inline" : "notion-equation-block"
      } ${className}`}
      {...props}
    />
  );
};

export default Equation;

// example
// <Equation block={false}>E = mc^2</Equation>

Benefits of change

Enhanced Type Safety

Direct usage of TeXProps type fully leverages the TeX library's type system
Prevents incorrect props passing at compile time
Provides better TypeScript IntelliSense support

Improved Maintainability

Automatically supports new props when the TeX component is updated
Reduces code overhead by eliminating custom type definitions and prop mappings
Easier to track changes from the underlying library

Better Developer Experience

Full access to all TeX component features (settings, error handling, etc.)
Seamless migration path from existing TeX documentation and code examples
Consistent API with the original library

Styling Flexibility

Composable className prop that merges with default styles
Provides ability to override default styles when needed
Maintains consistent styling structure

Style Customization

Review the hardcoded notion-related classes - may need to make them configurable
Consider implementing a theme provider for global style settings


const Equation = ({
equation: { expression },
inline = false,
}: EquationProps) => {
return (
<TeX className="notion-block notion-equation notion-equation-block">
<TeX
className={`notion-block notion-equation ${
inline ? " notion-equation-inline" : "notion-equation-block"
}`}
block={!inline}
>
{expression}
</TeX>
);
Expand Down
32 changes: 7 additions & 25 deletions packages/core/src/lib/components/internal/rich-text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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)}
/>
Comment on lines +17 to +21
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can I reuse the Equation component in the RichText component?

),
)}
</>
Expand Down Expand Up @@ -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;
65 changes: 44 additions & 21 deletions packages/core/src/lib/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
}
4 changes: 0 additions & 4 deletions packages/core/src/lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import katex from "katex";
import romans from "romans";
import type { ContextedBlock } from "./types";

Expand Down Expand Up @@ -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)[];

Expand Down
8 changes: 8 additions & 0 deletions packages/core/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]";
},
},
},
});