From cabfbe1f3ed3021f3010eb94be159cc820e2b06b Mon Sep 17 00:00:00 2001
From: Ryo <36154873+RyoJerryYu@users.noreply.github.com>
Date: Wed, 1 May 2024 02:42:57 +0800
Subject: [PATCH] refactor: make structure more runtime reasonable
---
src/components-parsing/README.md | 0
.../chartjs}/index.ts | 0
.../code-block-escape/CodeBlockMermaid.tsx | 2 +-
.../obsidian-rich/ObsidianRichExcalidraw.tsx | 2 +-
src/components-parsing/component-parsing.tsx | 19 ++++
src/core/parsing/README.md | 23 +++++
.../remark-code-block-escape.test.ts | 0
.../remark-code-block-escape.ts | 0
.../code-block-escape/types.ts | 0
.../obsidian-rich/remark-obsidian-rich.ts | 0
.../complex-plugins/obsidian-rich/types.ts | 0
.../complex-plugins/utils/utils.ts | 0
.../remark-plugins/remark-escape.ts | 0
.../remark-excalidraw-mermaid.ts | 0
.../remark-plugins/remark-mermaid.ts | 0
src/core/parsing/rendering-parse.ts | 91 +++++++++++++++++++
src/core/rendering/plugins/backend-plugins.ts | 40 --------
.../rendering/plugins/frontend-plugins.ts | 18 ----
src/core/rendering/plugins/plugins.test.ts | 71 ---------------
src/core/rendering/rendering-component.tsx | 25 -----
src/core/rendering/rendering-parse.ts | 82 -----------------
src/docs/README.md | 51 +++++++++--
src/pages/_app.tsx | 2 +-
src/pages/articles/[slug].tsx | 2 +-
src/pages/ideas/[slug].tsx | 2 +-
25 files changed, 183 insertions(+), 247 deletions(-)
create mode 100644 src/components-parsing/README.md
rename src/{core/rendering/component-plugins/component-chartjs => components-parsing/chartjs}/index.ts (100%)
rename src/{core/rendering/complex-plugins => components-parsing/complex-plugin-components}/code-block-escape/CodeBlockMermaid.tsx (79%)
rename src/{core/rendering/complex-plugins => components-parsing/complex-plugin-components}/obsidian-rich/ObsidianRichExcalidraw.tsx (72%)
create mode 100644 src/components-parsing/component-parsing.tsx
create mode 100644 src/core/parsing/README.md
rename src/core/{rendering => parsing}/complex-plugins/code-block-escape/remark-code-block-escape.test.ts (100%)
rename src/core/{rendering => parsing}/complex-plugins/code-block-escape/remark-code-block-escape.ts (100%)
rename src/core/{rendering => parsing}/complex-plugins/code-block-escape/types.ts (100%)
rename src/core/{rendering => parsing}/complex-plugins/obsidian-rich/remark-obsidian-rich.ts (100%)
rename src/core/{rendering => parsing}/complex-plugins/obsidian-rich/types.ts (100%)
rename src/core/{rendering => parsing}/complex-plugins/utils/utils.ts (100%)
rename src/core/{rendering => parsing}/remark-plugins/remark-escape.ts (100%)
rename src/core/{rendering => parsing}/remark-plugins/remark-excalidraw-mermaid.ts (100%)
rename src/core/{rendering => parsing}/remark-plugins/remark-mermaid.ts (100%)
create mode 100644 src/core/parsing/rendering-parse.ts
delete mode 100644 src/core/rendering/plugins/backend-plugins.ts
delete mode 100644 src/core/rendering/plugins/frontend-plugins.ts
delete mode 100644 src/core/rendering/plugins/plugins.test.ts
delete mode 100644 src/core/rendering/rendering-component.tsx
delete mode 100644 src/core/rendering/rendering-parse.ts
diff --git a/src/components-parsing/README.md b/src/components-parsing/README.md
new file mode 100644
index 00000000..e69de29b
diff --git a/src/core/rendering/component-plugins/component-chartjs/index.ts b/src/components-parsing/chartjs/index.ts
similarity index 100%
rename from src/core/rendering/component-plugins/component-chartjs/index.ts
rename to src/components-parsing/chartjs/index.ts
diff --git a/src/core/rendering/complex-plugins/code-block-escape/CodeBlockMermaid.tsx b/src/components-parsing/complex-plugin-components/code-block-escape/CodeBlockMermaid.tsx
similarity index 79%
rename from src/core/rendering/complex-plugins/code-block-escape/CodeBlockMermaid.tsx
rename to src/components-parsing/complex-plugin-components/code-block-escape/CodeBlockMermaid.tsx
index 54475071..aa3e3c94 100644
--- a/src/core/rendering/complex-plugins/code-block-escape/CodeBlockMermaid.tsx
+++ b/src/components-parsing/complex-plugin-components/code-block-escape/CodeBlockMermaid.tsx
@@ -1,5 +1,5 @@
import { MermaidExcalidraw } from "@/components/ExcalidrawScene/MermaidExcalidraw";
-import { CodeBlockProps } from "./types";
+import { CodeBlockProps } from "../../../core/parsing/complex-plugins/code-block-escape/types";
export const CodeBlockMermaid = (props: CodeBlockProps) => {
let name = props.lang ?? undefined; // string | undefined
diff --git a/src/core/rendering/complex-plugins/obsidian-rich/ObsidianRichExcalidraw.tsx b/src/components-parsing/complex-plugin-components/obsidian-rich/ObsidianRichExcalidraw.tsx
similarity index 72%
rename from src/core/rendering/complex-plugins/obsidian-rich/ObsidianRichExcalidraw.tsx
rename to src/components-parsing/complex-plugin-components/obsidian-rich/ObsidianRichExcalidraw.tsx
index 5b5a61f6..e4f31c47 100644
--- a/src/core/rendering/complex-plugins/obsidian-rich/ObsidianRichExcalidraw.tsx
+++ b/src/components-parsing/complex-plugin-components/obsidian-rich/ObsidianRichExcalidraw.tsx
@@ -1,5 +1,5 @@
import EmbededExcalidraw from "@/components/ExcalidrawScene/EmbededExcalidraw";
-import { ObsidianRichProps } from "./types";
+import { ObsidianRichProps } from "../../../core/parsing/complex-plugins/obsidian-rich/types";
export const ObsidianRichExcalidraw = (props: ObsidianRichProps) => {
console.log("ObsidianRichExcalidraw:", props);
diff --git a/src/components-parsing/component-parsing.tsx b/src/components-parsing/component-parsing.tsx
new file mode 100644
index 00000000..4a14d748
--- /dev/null
+++ b/src/components-parsing/component-parsing.tsx
@@ -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 ;
+ // }
+ // const language = props.className?.replace("language-", "");
+ // return ;
+ // },
+};
diff --git a/src/core/parsing/README.md b/src/core/parsing/README.md
new file mode 100644
index 00000000..42050763
--- /dev/null
+++ b/src/core/parsing/README.md
@@ -0,0 +1,23 @@
+# `core/parsing`
+
+This directory contains the mdx parsing logic.
+
+Mostly contains about:
+
+- `remark` plugins
+- `rehype` plugins
+- `complex` plugins
+
+## Complex Plugins
+
+Complex plugins are the plugins about defining a new syntax, parsing it and provide a new JSX element for it.
+It may mainly contains:
+
+- `type` definition, which is the interface between the parsing plugin and the rendering component.
+- `remark` plugin or `rehype` plugin, which is the parsing logic.
+
+Mostly should define a new component, which should receive props of type defined in `type`.
+
+Attention:
+
+All modules in this directory should not be imported by any Component at rendering time, except the `type`.
\ No newline at end of file
diff --git a/src/core/rendering/complex-plugins/code-block-escape/remark-code-block-escape.test.ts b/src/core/parsing/complex-plugins/code-block-escape/remark-code-block-escape.test.ts
similarity index 100%
rename from src/core/rendering/complex-plugins/code-block-escape/remark-code-block-escape.test.ts
rename to src/core/parsing/complex-plugins/code-block-escape/remark-code-block-escape.test.ts
diff --git a/src/core/rendering/complex-plugins/code-block-escape/remark-code-block-escape.ts b/src/core/parsing/complex-plugins/code-block-escape/remark-code-block-escape.ts
similarity index 100%
rename from src/core/rendering/complex-plugins/code-block-escape/remark-code-block-escape.ts
rename to src/core/parsing/complex-plugins/code-block-escape/remark-code-block-escape.ts
diff --git a/src/core/rendering/complex-plugins/code-block-escape/types.ts b/src/core/parsing/complex-plugins/code-block-escape/types.ts
similarity index 100%
rename from src/core/rendering/complex-plugins/code-block-escape/types.ts
rename to src/core/parsing/complex-plugins/code-block-escape/types.ts
diff --git a/src/core/rendering/complex-plugins/obsidian-rich/remark-obsidian-rich.ts b/src/core/parsing/complex-plugins/obsidian-rich/remark-obsidian-rich.ts
similarity index 100%
rename from src/core/rendering/complex-plugins/obsidian-rich/remark-obsidian-rich.ts
rename to src/core/parsing/complex-plugins/obsidian-rich/remark-obsidian-rich.ts
diff --git a/src/core/rendering/complex-plugins/obsidian-rich/types.ts b/src/core/parsing/complex-plugins/obsidian-rich/types.ts
similarity index 100%
rename from src/core/rendering/complex-plugins/obsidian-rich/types.ts
rename to src/core/parsing/complex-plugins/obsidian-rich/types.ts
diff --git a/src/core/rendering/complex-plugins/utils/utils.ts b/src/core/parsing/complex-plugins/utils/utils.ts
similarity index 100%
rename from src/core/rendering/complex-plugins/utils/utils.ts
rename to src/core/parsing/complex-plugins/utils/utils.ts
diff --git a/src/core/rendering/remark-plugins/remark-escape.ts b/src/core/parsing/remark-plugins/remark-escape.ts
similarity index 100%
rename from src/core/rendering/remark-plugins/remark-escape.ts
rename to src/core/parsing/remark-plugins/remark-escape.ts
diff --git a/src/core/rendering/remark-plugins/remark-excalidraw-mermaid.ts b/src/core/parsing/remark-plugins/remark-excalidraw-mermaid.ts
similarity index 100%
rename from src/core/rendering/remark-plugins/remark-excalidraw-mermaid.ts
rename to src/core/parsing/remark-plugins/remark-excalidraw-mermaid.ts
diff --git a/src/core/rendering/remark-plugins/remark-mermaid.ts b/src/core/parsing/remark-plugins/remark-mermaid.ts
similarity index 100%
rename from src/core/rendering/remark-plugins/remark-mermaid.ts
rename to src/core/parsing/remark-plugins/remark-mermaid.ts
diff --git a/src/core/parsing/rendering-parse.ts b/src/core/parsing/rendering-parse.ts
new file mode 100644
index 00000000..9b3bde11
--- /dev/null
+++ b/src/core/parsing/rendering-parse.ts
@@ -0,0 +1,91 @@
+import { CompileOptions } from "@mdx-js/mdx";
+import { serialize } from "next-mdx-remote/serialize";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeKatex, { Options as KatexOptions } from "rehype-katex";
+import rehypePrettyCode, {
+ Options as PrettyCodeOptions,
+} from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkUnwrapImages from "remark-unwrap-images";
+import { ParseMdxProps } from "../types/rendering";
+import {
+ RemarkCodeBlockEscapeOptions,
+ remarkCodeBlockEscape,
+} from "./complex-plugins/code-block-escape/remark-code-block-escape";
+import remarkObsidianRich, {
+ RemarkObsidianRichOptions,
+} from "./complex-plugins/obsidian-rich/remark-obsidian-rich";
+import { ObsidianRichProps } from "./complex-plugins/obsidian-rich/types";
+
+const genMdxOptions = (props: ParseMdxProps) => {
+ const defaultMdxOptions: Omit<
+ CompileOptions,
+ "outputFormat" | "providerImportSource"
+ > = {
+ remarkPlugins: [
+ remarkGfm,
+ remarkMath,
+ // remarkExcalidrawMermaid,
+ [
+ remarkCodeBlockEscape,
+ {
+ escapes: [["mermaid", "CodeBlockMermaid"]],
+ } as RemarkCodeBlockEscapeOptions,
+ ],
+ // [remarkMermaid, { wrap: true, className: ["mermaid"] }],
+ [
+ remarkObsidianRich,
+ {
+ matchers: [
+ [
+ (props: ObsidianRichProps) =>
+ props.file.endsWith(".excalidraw") ||
+ props.file.endsWith(".excalidraw.md"),
+ "ObsidianRichExcalidraw",
+ ],
+ ],
+ } as RemarkObsidianRichOptions,
+ ],
+ remarkUnwrapImages,
+ ],
+ rehypePlugins: [
+ rehypeSlug,
+ [rehypeAutolinkHeadings, { behavior: "wrap" }],
+ [
+ rehypeKatex,
+ {
+ strict: false,
+ } as KatexOptions,
+ ],
+ [
+ rehypePrettyCode,
+ {
+ theme: "rose-pine-moon",
+ keepBackground: true,
+ onVisitLine: (node: any) => {
+ if (node.children.length === 0) {
+ node.children = [{ type: "text", value: " " }];
+ }
+ },
+ onVisitHighlightedLine: (node: any) => {
+ node.properties.className.push("highlighted");
+ },
+ onVisitHighlightedWord: (node: any, id: string | undefined) => {
+ node.properties.className = ["word"];
+ },
+ } as PrettyCodeOptions,
+ ],
+ ],
+ };
+ return defaultMdxOptions;
+};
+
+export const parseMdx = async (content: string, props: ParseMdxProps) => {
+ const mdxOptions = genMdxOptions(props);
+ const source = await serialize(content, {
+ mdxOptions: mdxOptions,
+ });
+ return source;
+};
diff --git a/src/core/rendering/plugins/backend-plugins.ts b/src/core/rendering/plugins/backend-plugins.ts
deleted file mode 100644
index 74981468..00000000
--- a/src/core/rendering/plugins/backend-plugins.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { BackendPlugins, ParseMdxProps } from "@/core/types/rendering";
-import { copyNullableArray } from "@/utils/merge-object";
-import { CompileOptions } from "@mdx-js/mdx";
-
-/**
- * Generates MDX options based on the provided rendering options.
- *
- * It will apply the complex plugins to the options.
- *
- * @param options - The rendering options.
- * @returns The generated MDX options.
- */
-export const genMdxOptions = (
- props: ParseMdxProps,
- backendPlugins: BackendPlugins
-) => {
- const mdxOptions: Omit<
- CompileOptions,
- "outputFormat" | "providerImportSource"
- > = {
- remarkPlugins: copyNullableArray(backendPlugins.mdxOptions?.remarkPlugins),
- rehypePlugins: copyNullableArray(backendPlugins.mdxOptions?.rehypePlugins),
- };
- for (const complexPlugin of backendPlugins.complexPlugins) {
- if (complexPlugin.remarkPlugin) {
- if (!mdxOptions.remarkPlugins) {
- mdxOptions.remarkPlugins = [];
- }
- mdxOptions.remarkPlugins.push(complexPlugin.remarkPlugin(props));
- }
- if (complexPlugin.rehypePlugin) {
- if (!mdxOptions.rehypePlugins) {
- mdxOptions.rehypePlugins = [];
- }
- mdxOptions.rehypePlugins.push(complexPlugin.rehypePlugin(props));
- }
- }
-
- return mdxOptions;
-};
diff --git a/src/core/rendering/plugins/frontend-plugins.ts b/src/core/rendering/plugins/frontend-plugins.ts
deleted file mode 100644
index e9589b50..00000000
--- a/src/core/rendering/plugins/frontend-plugins.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FrontendPlugins } from "@/core/types/rendering";
-import { MDXComponents } from "mdx/types";
-/**
- * Generates MDX components based on the provided rendering options.
- * @param options - The rendering options.
- * @returns The generated MDX components.
- */
-export const genMdxComponents = (frontendPlugins: FrontendPlugins) => {
- const mdxComponents: MDXComponents = { ...frontendPlugins.mdxComponents };
- for (const complexPlugin of frontendPlugins.complexPlugins) {
- if (complexPlugin.mdxComponent) {
- const [name, component] = complexPlugin.mdxComponent();
- mdxComponents[name] = component;
- }
- }
-
- return mdxComponents;
-};
diff --git a/src/core/rendering/plugins/plugins.test.ts b/src/core/rendering/plugins/plugins.test.ts
deleted file mode 100644
index 2a911b4c..00000000
--- a/src/core/rendering/plugins/plugins.test.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
- BackendPlugins,
- ComplexPlugin,
- FrontendPlugins,
- ParseMdxProps,
-} from "@/core/types/rendering";
-import { FC, createElement } from "react";
-import { Plugin } from "unified";
-import { genMdxOptions } from "./backend-plugins";
-import { genMdxComponents } from "./frontend-plugins";
-
-const emptyPlugin: Plugin = () => {};
-const EmptyComponent: FC = () => {
- return createElement("div");
-};
-const emptyComplexPlugin: ComplexPlugin = {
- remarkPlugin: () => {
- return emptyPlugin;
- },
- rehypePlugin: () => {
- return emptyPlugin;
- },
- mdxComponent: () => {
- return ["EmptyComponent", EmptyComponent];
- },
-};
-
-const newFrontendPlugins = (): FrontendPlugins => {
- return {
- mdxComponents: {
- EmptyComponent,
- },
- complexPlugins: [emptyComplexPlugin],
- };
-};
-const newBackendPlugins = (): BackendPlugins => {
- return {
- mdxOptions: {
- remarkPlugins: [emptyPlugin],
- rehypePlugins: [emptyPlugin],
- },
- complexPlugins: [emptyComplexPlugin],
- };
-};
-
-describe("genMdxOpitons", () => {
- const defaultOption = newBackendPlugins();
- const props: ParseMdxProps = {
- pagePath: "",
- };
- const mdxOptions = genMdxOptions(props, defaultOption);
- it("should return the correct mdxOptions", () => {
- expect(mdxOptions.remarkPlugins?.length).toBe(2);
- });
- const newMdxOptions = genMdxOptions(props, defaultOption);
- it("defaultOption should be statics", () => {
- expect(newMdxOptions.rehypePlugins?.length).toBe(2);
- });
-});
-
-describe("genMdxComponents", () => {
- const defaultOption = newFrontendPlugins();
- const mdxComponents = genMdxComponents(defaultOption);
- it("should return the correct mdxComponents", () => {
- expect(mdxComponents.EmptyComponent).toBeDefined();
- });
- const newMdxComponents = genMdxComponents(defaultOption);
- it("defaultOption should be statics", () => {
- expect(newMdxComponents.EmptyComponent).toBeDefined();
- });
-});
diff --git a/src/core/rendering/rendering-component.tsx b/src/core/rendering/rendering-component.tsx
deleted file mode 100644
index 29e841e3..00000000
--- a/src/core/rendering/rendering-component.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import License from "@/components/License";
-import { MDXComponents } from "mdx/types";
-import { CodeBlockMermaid } from "./complex-plugins/code-block-escape/CodeBlockMermaid";
-import { ObsidianRichExcalidraw } from "./complex-plugins/obsidian-rich/ObsidianRichExcalidraw";
-import { Bar } from "./component-plugins/component-chartjs";
-import { genMdxComponents } from "./plugins/frontend-plugins";
-
-const defaultMdxComponents: MDXComponents = {
- Bar,
- License,
- CodeBlockMermaid,
- ObsidianRichExcalidraw,
- // code: (props: any) => {
- // if (props.className === "language-mermaid") {
- // return ;
- // }
- // const language = props.className?.replace("language-", "");
- // return ;
- // },
-};
-
-export const components = genMdxComponents({
- mdxComponents: defaultMdxComponents,
- complexPlugins: [],
-});
diff --git a/src/core/rendering/rendering-parse.ts b/src/core/rendering/rendering-parse.ts
deleted file mode 100644
index df507e9d..00000000
--- a/src/core/rendering/rendering-parse.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { CompileOptions } from "@mdx-js/mdx";
-import { serialize } from "next-mdx-remote/serialize";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeKatex, { Options as KatexOptions } from "rehype-katex";
-import rehypePrettyCode, {
- Options as PrettyCodeOptions,
-} from "rehype-pretty-code";
-import rehypeSlug from "rehype-slug";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-import remarkUnwrapImages from "remark-unwrap-images";
-import { ParseMdxProps } from "../types/rendering";
-import { remarkCodeBlockEscape } from "./complex-plugins/code-block-escape/remark-code-block-escape";
-import remarkObsidianRich from "./complex-plugins/obsidian-rich/remark-obsidian-rich";
-import { ObsidianRichProps } from "./complex-plugins/obsidian-rich/types";
-import { genMdxOptions } from "./plugins/backend-plugins";
-
-const defaultMdxOptions: Omit<
- CompileOptions,
- "outputFormat" | "providerImportSource"
-> = {
- remarkPlugins: [
- remarkGfm,
- remarkMath,
- // remarkExcalidrawMermaid,
- [remarkCodeBlockEscape, { escapes: [["mermaid", "CodeBlockMermaid"]] }],
- // [remarkMermaid, { wrap: true, className: ["mermaid"] }],
- [
- remarkObsidianRich,
- {
- matchers: [
- [
- (props: ObsidianRichProps) =>
- props.file.endsWith(".excalidraw") ||
- props.file.endsWith(".excalidraw.md"),
- "ObsidianRichExcalidraw",
- ],
- ],
- },
- ],
- remarkUnwrapImages,
- ],
- rehypePlugins: [
- rehypeSlug,
- [rehypeAutolinkHeadings, { behavior: "wrap" }],
- [
- rehypeKatex,
- {
- strict: false,
- } as KatexOptions,
- ],
- [
- rehypePrettyCode,
- {
- theme: "rose-pine-moon",
- keepBackground: true,
- onVisitLine: (node: any) => {
- if (node.children.length === 0) {
- node.children = [{ type: "text", value: " " }];
- }
- },
- onVisitHighlightedLine: (node: any) => {
- node.properties.className.push("highlighted");
- },
- onVisitHighlightedWord: (node: any, id: string | undefined) => {
- node.properties.className = ["word"];
- },
- } as PrettyCodeOptions,
- ],
- ],
-};
-
-export const parseMdx = async (content: string, props: ParseMdxProps) => {
- const mdxOptions = genMdxOptions(props, {
- mdxOptions: defaultMdxOptions,
- complexPlugins: [],
- });
- const source = await serialize(content, {
- mdxOptions: mdxOptions,
- });
- return source;
-};
diff --git a/src/docs/README.md b/src/docs/README.md
index eb8eeddb..cb7a17d7 100644
--- a/src/docs/README.md
+++ b/src/docs/README.md
@@ -1,9 +1,48 @@
-# some terms
+# src
-- post: one md file content, should have content and meta
-- page: a web page, should have url
-- blog: reserved word
+## About static runtime and rendering runtime
-- article: a post with long and complex content
-- idea: a post with short and simple content
+Before Next.js exports the static site, it will run the `getStaticProps` and `getStaticPaths` to generate the static props.
+When exporting the static site, Next.js will simply delete the `getStaticProps` and `getStaticPaths` functions, and it's import.
+Any thing in the `getStaticProps` and `getStaticPaths` functions will not be included in the static site.
+Static runtime always run in node.js, could access the file system, and could never access the browser API.
+Rendering runtime may run in the browser or in the server, could not access the file system, can only access the browser API in the browser.
+
+Any time coding should consider the runtime, and should not mix the static runtime and rendering runtime.
+
+## Directory Structure
+
+### Rendering Runtime
+
+- `components`
+- `components-parsing`
+- `hooks`
+- `layouts`
+- `styles`
+
+### Static Runtime
+
+- `core`
+
+### Shared
+
+- `utils`
+
+### Special
+
+#### `pages`
+
+Next.js pages directory.
+In `getStaticProps` and `getStaticPaths` are running in static runtime, but the page itself is running in rendering runtime.
+`page` is the realy watershed between static runtime and rendering runtime.
+
+#### `types` in `core`
+
+TypeScript types related to the core logic.
+They mostly could be used as a Component's props type.
+
+Mostly types in the modules below are designed to be used as props type in the rendering runtime:
+
+- `Meta` type in `core/indexing/meta-collecting`
+- `Props` type in `core/parsing/complex-plugins`
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 1c022499..4c481568 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { components } from "@/core/rendering/rendering-component";
+import { components } from "@/components-parsing/component-parsing";
import { MutexProvider } from "@/hooks/use-mutex";
import UniversalHead from "@/layouts/UniversalHead";
import "@/styles/globals.scss";
diff --git a/src/pages/articles/[slug].tsx b/src/pages/articles/[slug].tsx
index 76252b1a..d57c5df2 100644
--- a/src/pages/articles/[slug].tsx
+++ b/src/pages/articles/[slug].tsx
@@ -10,7 +10,7 @@ import {
initCache,
} from "@/core/indexing/indexing-cache";
import { articlePostPathMapper } from "@/core/indexing/indexing-settings";
-import { parseMdx } from "@/core/rendering/rendering-parse";
+import { parseMdx } from "@/core/parsing/rendering-parse";
import { PostMeta } from "@/core/types/indexing";
import DefaultLayout from "@/layouts/DefaultLayout";
import { Description, SEOObject, Title } from "@/layouts/UniversalHead";
diff --git a/src/pages/ideas/[slug].tsx b/src/pages/ideas/[slug].tsx
index 68e92a0e..64b96f35 100644
--- a/src/pages/ideas/[slug].tsx
+++ b/src/pages/ideas/[slug].tsx
@@ -9,7 +9,7 @@ import {
initCache,
} from "@/core/indexing/indexing-cache";
import { ideaPostPathMapper } from "@/core/indexing/indexing-settings";
-import { parseMdx } from "@/core/rendering/rendering-parse";
+import { parseMdx } from "@/core/parsing/rendering-parse";
import { PostMeta } from "@/core/types/indexing";
import DefaultLayout from "@/layouts/DefaultLayout";
import { Description, Title } from "@/layouts/UniversalHead";