create remove frontmatter plugin

apps/app/src/client/services/renderer/renderer.tsx

@@ -10,6 +10,7 @@ import sanitize from 'rehype-sanitize';
 import slug from 'rehype-slug';
 import type { HtmlElementNode } from 'rehype-toc';
 import breaks from 'remark-breaks';
+import remarkFrontmatter from 'remark-frontmatter';
 import math from 'remark-math';
 import deepmerge from 'ts-deepmerge';
 import type { Pluggable } from 'unified';
@@ -18,6 +19,7 @@ import type { Pluggable } from 'unified';
 import { DrawioViewerWithEditButton } from '~/components/ReactMarkdownComponents/DrawioViewerWithEditButton';
 import { Header } from '~/components/ReactMarkdownComponents/Header';
 import { TableWithEditButton } from '~/components/ReactMarkdownComponents/TableWithEditButton';
+import * as frontmatterHider from '~/features/frontmatter-hider';
 import * as mermaid from '~/features/mermaid';
 import { RehypeSanitizeOption } from '~/interfaces/rehype';
 import type { RendererOptions } from '~/interfaces/renderer-options';
@@ -60,6 +62,7 @@ export const generateViewOptions = (
     [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri }],
     drawio.remarkPlugin,
     mermaid.remarkPlugin,
+    frontmatterHider.remarkPlugin,
     xsvToTable.remarkPlugin,
     lsxGrowiDirective.remarkPlugin,
     refsGrowiDirective.remarkPlugin,
@@ -109,6 +112,7 @@ export const generateViewOptions = (
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
     components.mermaid = mermaid.MermaidViewer;
+    components.frontmatterHider = frontmatterHider.FrontmatterHideViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -166,6 +170,8 @@ export const generateSimpleViewOptions = (
     [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri }],
     drawio.remarkPlugin,
     mermaid.remarkPlugin,
+    remarkFrontmatter,
+    frontmatterHider.remarkPlugin,
     xsvToTable.remarkPlugin,
     lsxGrowiDirective.remarkPlugin,
     refsGrowiDirective.remarkPlugin,
@@ -187,6 +193,7 @@ export const generateSimpleViewOptions = (
       commonSanitizeOption,
       drawio.sanitizeOption,
       mermaid.sanitizeOption,
+      frontmatterHider.sanitizeOption,
       lsxGrowiDirective.sanitizeOption,
       refsGrowiDirective.sanitizeOption,
     )]
@@ -211,6 +218,7 @@ export const generateSimpleViewOptions = (
     components.gallery = refsGrowiDirective.GalleryImmutable;
     components.drawio = drawio.DrawioViewer;
     components.mermaid = mermaid.MermaidViewer;
+    components.frontmatterHider = frontmatterHider.FrontmatterHideViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -243,6 +251,8 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri }],
     drawio.remarkPlugin,
     mermaid.remarkPlugin,
+    remarkFrontmatter,
+    frontmatterHider.remarkPlugin,
     xsvToTable.remarkPlugin,
     lsxGrowiDirective.remarkPlugin,
     refsGrowiDirective.remarkPlugin,
@@ -260,6 +270,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
       commonSanitizeOption,
       drawio.sanitizeOption,
       mermaid.sanitizeOption,
+      frontmatterHider.sanitizeOption,
       lsxGrowiDirective.sanitizeOption,
       refsGrowiDirective.sanitizeOption,
       addLineNumberAttribute.sanitizeOption,
@@ -285,6 +296,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     components.gallery = refsGrowiDirective.GalleryImmutable;
     components.drawio = drawio.DrawioViewer;
     components.mermaid = mermaid.MermaidViewer;
+    components.frontmatterHider = frontmatterHider.FrontmatterHideViewer;
   }
 
   if (config.isEnabledXssPrevention) {

apps/app/src/features/frontmatter-hider/components/FrontmatterHideViewer.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+
+
+type FrontmatterHideViewerProps = {
+  children: ReactNode,
+}
+
+export const FrontmatterHideViewer = React.memo((props: FrontmatterHideViewerProps): JSX.Element => {
+  const { children } = props;
+  return <></>;
+});
+FrontmatterHideViewer.displayName = 'FronttmatterHideViewer';

apps/app/src/features/frontmatter-hider/components/index.ts

@@ -0,0 +1 @@
+export { FrontmatterHideViewer } from './FrontmatterHideViewer';

apps/app/src/features/frontmatter-hider/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './services';

apps/app/src/features/frontmatter-hider/services/frontmatter-hider.ts

@@ -0,0 +1,25 @@
+
+import type { Schema as SanitizeOption } from 'hast-util-sanitize';
+import { Plugin } from 'unified';
+import { Node } from 'unist';
+import { visit } from 'unist-util-visit';
+
+function rewriteNode(node: Node) {
+  // replace node
+  const data = node.data ?? (node.data = {});
+  data.hName = 'frontmatter';
+}
+
+export const remarkPlugin: Plugin = function() {
+  return (tree) => {
+    visit(tree, (node) => {
+      if (node.type === 'yaml') {
+        rewriteNode(node);
+      }
+    });
+  };
+};
+
+export const sanitizeOption: SanitizeOption = {
+  tagNames: ['frontmatter'],
+};

apps/app/src/features/frontmatter-hider/services/index.ts

@@ -0,0 +1 @@
+export { remarkPlugin, sanitizeOption } from './frontmatter-hider';

package.json

@@ -48,6 +48,7 @@
     "cross-env": "^7.0.0",
     "dotenv-flow": "^3.2.0",
     "npm-run-all": "^4.1.5",
+    "remark-frontmatter": "^4.0.1",
     "ts-deepmerge": "^3.0.0",
     "tslib": "^2.3.1",
     "yargs": "^17.7.1"

yarn.lock

@@ -8393,6 +8393,13 @@ fault@^1.0.0:
   dependencies:
     format "^0.2.0"
 
+fault@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
+  integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==
+  dependencies:
+    format "^0.2.0"
+
 fb-watchman@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
@@ -11908,6 +11915,15 @@ mdast-util-from-markdown@^1.0.0:
     unist-util-stringify-position "^3.0.0"
     uvu "^0.5.0"
 
+mdast-util-frontmatter@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-frontmatter/-/mdast-util-frontmatter-1.0.1.tgz#79c46d7414eb9d3acabe801ee4a70a70b75e5af1"
+  integrity sha512-JjA2OjxRqAa8wEG8hloD0uTU0kdn8kbtOWpPP94NBkfAlbxn4S8gCGf/9DwFtEeGPXrDcNXdiDjVaRdUFqYokw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.3.0"
+    micromark-extension-frontmatter "^1.0.0"
+
 mdast-util-gfm-autolink-literal@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.2.tgz#4032dcbaddaef7d4f2f3768ed830475bb22d3970"
@@ -12227,6 +12243,16 @@ micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
     micromark-util-types "^1.0.1"
     uvu "^0.5.0"
 
+micromark-extension-frontmatter@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/micromark-extension-frontmatter/-/micromark-extension-frontmatter-1.1.1.tgz#2946643938e491374145d0c9aacc3249e38a865f"
+  integrity sha512-m2UH9a7n3W8VAH9JO9y01APpPKmNNNs71P0RbknEmYSaZU5Ghogv38BYO94AI5Xw6OYfxZRdHZZ2nYjs/Z+SZQ==
+  dependencies:
+    fault "^2.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
 micromark-extension-gfm-autolink-literal@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.3.tgz#dc589f9c37eaff31a175bab49f12290edcf96058"
@@ -15145,6 +15171,16 @@ remark-emoji@^3.0.2:
     node-emoji "^1.11.0"
     unist-util-visit "^4.1.0"
 
+remark-frontmatter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/remark-frontmatter/-/remark-frontmatter-4.0.1.tgz#84560f7ccef114ef076d3d3735be6d69f8922309"
+  integrity sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-frontmatter "^1.0.0"
+    micromark-extension-frontmatter "^1.0.0"
+    unified "^10.0.0"
+
 remark-gfm@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"