Skip to content

Commit

Permalink
Merge pull request #310 from RyoJerryYu/refactor-parsing-phase-refactor
Browse files Browse the repository at this point in the history
feat: add new rendering plugin system
  • Loading branch information
RyoJerryYu authored Apr 30, 2024
2 parents 338cf59 + cabfbe1 commit cff4964
Show file tree
Hide file tree
Showing 40 changed files with 1,408 additions and 935 deletions.
20 changes: 12 additions & 8 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
// jest.config.js
const nextJest = require('next/jest')
const nextJest = require("next/jest");

const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
})
dir: "./",
});

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const customJestConfig = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
moduleDirectories: ['node_modules', '<rootDir>/'],
moduleDirectories: ["node_modules", "<rootDir>/"],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
"^@/(.*)$": "<rootDir>/src/$1",
},
testEnvironment: 'jest-environment-jsdom',
}
testEnvironment: "jest-environment-jsdom",
// for importing ESM modules, should treat and transform them in node_modules
// see: https://jestjs.io/docs/next/ecmascript-modules
transform: {},
extensionsToTreatAsEsm: [".ts", ".tsx"],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
module.exports = createJestConfig(customJestConfig);
14 changes: 7 additions & 7 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ const nextConfig = {
unoptimized: true,
remotePatterns: [
{
protocol: "https",
hostname: "i.creativecommons.org"
}
]
}
}
protocol: "https",
hostname: "i.creativecommons.org",
},
],
},
};

module.exports = nextConfig
module.exports = nextConfig;
33 changes: 19 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"private": true,
"scripts": {
"dev": "next dev",
"test": "jest",
"test-ci": "TEST_ENV=ci jest",
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
"test-ci": "TEST_ENV=ci yarn test",
"build": "next build && next export",
"postbuild": "next-sitemap",
"start": "next start",
Expand All @@ -16,8 +16,8 @@
"@emotion/styled": "^11.11.5",
"@excalidraw/excalidraw": "^0.17.3",
"@excalidraw/mermaid-to-excalidraw": "^0.3.0",
"@mdx-js/mdx": "^2.3.0",
"@mdx-js/react": "^2.3.0",
"@mdx-js/mdx": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@mui/base": "5.0.0-beta.40",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.15",
Expand All @@ -37,30 +37,32 @@
"mdast-util-mdx-jsx": "^3.1.2",
"mermaid": "10.9.0",
"next": "13.2.1",
"next-mdx-remote": "4.4.1",
"next-mdx-remote": "0.0.0-canary-20240321205249",
"next-sitemap": "4.2.3",
"next-themes": "^0.2.1",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "18.2.0",
"react-i18next": "^12.2.0",
"react-syntax-highlighter": "^15.5.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-katex": "^6.0.2",
"rehype-autolink-headings": "^7.1.0",
"rehype-katex": "^7.0.0",
"rehype-pretty-code": "^0.9.4",
"rehype-raw": "^6.1.1",
"rehype-slug": "^5.1.0",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"rehype-slug": "^6.0.0",
"rehype-stringify": "^10.0.0",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
"remark-mdx-chartjs": "^2.2.0",
"remark-unwrap-images": "^3.0.1",
"remark-unwrap-images": "^4.0.0",
"sass": "^1.58.3",
"shiki": "^0.14.1",
"svgo": "^3.0.2",
"swr": "^2.2.5",
"typescript": "4.9.5",
"unified": "^10.1.2",
"unist-util-visit": "5.0.0"
"unified": "^11.0.4",
"unist-util-visit": "5.0.0",
"vfile": "^6.0.1"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
Expand All @@ -72,7 +74,10 @@
"jest-environment-jsdom": "29.7.0",
"postcss": "^8.4.21",
"postcss-import": "^15.1.0",
"remark-stringify": "^10.0.2",
"remark-mdx": "^3.0.1",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.0",
"remark-stringify": "^11.0.0",
"tailwindcss": "^3.2.7"
}
}
4 changes: 2 additions & 2 deletions public/content/ideas/blog-syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ def func_echo(s: str):

[链接](https://blog.ryo-okami.xyz)

[站内链接](/ideas/blog-syntax)
[站内链接](/ideas/using-chart-js)

## 图片

Expand Down Expand Up @@ -170,7 +170,7 @@ sequenceDiagram

[文章内标题引用](#一级标题)

[跨文章标题引用](/ideas/blog-syntax#一级标题)
[跨文章标题引用](/ideas/using-chart-js#react-chartjs-2)

# Obsidian 短引用

Expand Down
82 changes: 0 additions & 82 deletions scripts/confirm/remark-vsmemo-img.ts

This file was deleted.

Empty file.
21 changes: 21 additions & 0 deletions src/components-parsing/chartjs/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import {
BarElement,
CategoryScale,
Chart as ChartJS,
Legend,
LinearScale,
Title,
Tooltip,
} from "chart.js";
import { Bar } from "react-chartjs-2";

ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);

export { Bar };
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { MermaidExcalidraw } from "@/components/ExcalidrawScene/MermaidExcalidraw";
import { CodeBlockProps } from "../../../core/parsing/complex-plugins/code-block-escape/types";

export const CodeBlockMermaid = (props: CodeBlockProps) => {
let name = props.lang ?? undefined; // string | undefined
if (props.lang && props.meta) {
name = `${props.lang} ${props.meta}`;
}
return <MermaidExcalidraw name={name}>{props.value}</MermaidExcalidraw>;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import EmbededExcalidraw from "@/components/ExcalidrawScene/EmbededExcalidraw";
import { ObsidianRichProps } from "../../../core/parsing/complex-plugins/obsidian-rich/types";

export const ObsidianRichExcalidraw = (props: ObsidianRichProps) => {
console.log("ObsidianRichExcalidraw:", props);
return <EmbededExcalidraw {...props} />;
};
19 changes: 19 additions & 0 deletions src/components-parsing/component-parsing.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import License from "@/components/License";
import { MDXComponents } from "mdx/types";
import { Bar } from "./chartjs";
import { CodeBlockMermaid } from "./complex-plugin-components/code-block-escape/CodeBlockMermaid";
import { ObsidianRichExcalidraw } from "./complex-plugin-components/obsidian-rich/ObsidianRichExcalidraw";

export const components: MDXComponents = {
Bar,
License,
CodeBlockMermaid,
ObsidianRichExcalidraw,
// code: (props: any) => {
// if (props.className === "language-mermaid") {
// return <Mermaid {...props} />;
// }
// const language = props.className?.replace("language-", "");
// return <CodeBlock language={language} {...props} />;
// },
};
4 changes: 2 additions & 2 deletions src/components/ExcalidrawScene/EmbededExcalidraw.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { LoadError } from "@/components/Loading/LoadError";
import { Loading } from "@/components/Loading/Loading";
import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
import useSWR from "swr";
import { LoadError } from "../Loading/LoadError";
import { Loading } from "../Loading/Loading";
import { ExcalidrawScene } from "./ExcalidrawScene";

export type EmbededExcalidrawProps = {
Expand Down
7 changes: 4 additions & 3 deletions src/components/ExcalidrawScene/ExcalidrawScene.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { dynamicLoading } from "../Loading/dynamic-loading";
import { ExcalidrawSceneProps } from "./ExcalidrawSceneImpl";
import { dynamicLoading } from "@/components/Loading/dynamic-loading";
import { ExcalidrawSceneProps } from "./clientComponent/ExcalidrawSceneImpl";

const ExcalidrawSceneImpl = dynamicLoading(
async () => (await import("./ExcalidrawSceneImpl")).ExcalidrawSceneImpl
async () =>
(await import("./clientComponent/ExcalidrawSceneImpl")).ExcalidrawSceneImpl
);

export function ExcalidrawScene(props: ExcalidrawSceneProps) {
Expand Down
14 changes: 0 additions & 14 deletions src/components/ExcalidrawScene/MermaidCodeBlock.tsx

This file was deleted.

16 changes: 16 additions & 0 deletions src/components/ExcalidrawScene/MermaidExcalidraw.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { dynamicLoading } from "@/components/Loading/dynamic-loading";
import { MermaidCodeBlockProps } from "./clientComponent/MermaidExcalidrawImpl";

const MermaidExcalidrawImpl = dynamicLoading(
async () =>
(await import("./clientComponent/MermaidExcalidrawImpl"))
.MermaidExcalidrawImpl
);

export function MermaidExcalidraw(props: MermaidCodeBlockProps) {
return (
<div className="relative h-[600px] py-4">
<MermaidExcalidrawImpl {...props} />
</div>
);
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
"use client";
import { Loading } from "@/components/Loading/Loading";
import { useMutex } from "@/hooks/use-mutex";
import { convertToExcalidrawElements } from "@excalidraw/excalidraw";
import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform";
import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
import { useEffect, useState } from "react";
import { Loading } from "../Loading/Loading";
import { ExcalidrawSceneImpl } from "./ExcalidrawSceneImpl";

/**
Expand Down Expand Up @@ -56,7 +56,7 @@ export type MermaidCodeBlockProps = {
children: string;
className?: string;
};
export function MermaidCodeBlockImpl({
export function MermaidExcalidrawImpl({
name = "mermaid",
children,
className,
Expand Down
Loading

0 comments on commit cff4964

Please sign in to comment.