Feature/video (#25)

zizdlp · Aug 27, 2024 · 7801da3 · 7801da3
1 parent fdb5519
commit 7801da3
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/zbook_backend/markdown/render/config.go b/zbook_backend/markdown/render/config.go
@@ -5,6 +5,7 @@ import (
 	"github.com/yuin/goldmark"
 	"github.com/yuin/goldmark/extension"
 	"github.com/yuin/goldmark/parser"
+	"github.com/yuin/goldmark/renderer/html"
 	admonitions "github.com/zizdlp/zbook/markdown/admonition"
 	"github.com/zizdlp/zbook/markdown/katex"
 	"go.abhg.dev/goldmark/toc"
@@ -13,6 +14,7 @@ import (
 func GetMarkdownConfig() goldmark.Markdown {
 	markdown := goldmark.New(
 		goldmark.WithParserOptions(parser.WithAutoHeadingID()),
+		goldmark.WithRendererOptions(html.WithUnsafe()),
 		goldmark.WithExtensions(
 			&toc.Extender{
 				Title:  "content_table",

diff --git a/zbook_backend/statik/statik.go b/zbook_backend/statik/statik.go
diff --git a/zbook_frontend/src/app/globals.css b/zbook_frontend/src/app/globals.css
@@ -5,6 +5,9 @@
 .aspect-mac {
   aspect-ratio: 1728 / 1080;
 }
+.embed-video {
+  aspect-ratio: 16 / 9;
+}
 
 .dark\:bg-grid-dark:is(.dark *) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");

diff --git a/zbook_frontend/src/components/parsers/HtmlParser.tsx b/zbook_frontend/src/components/parsers/HtmlParser.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-literals */
 import { JSDOM } from "jsdom";
 import React, { Suspense } from "react";
 import MathDisplay from "./MathDisplay";
@@ -8,10 +7,6 @@ import { CiImageOn } from "react-icons/ci";
 import ParserElement from "./ParserElement";
 import CodeBlock from "./CodeBlock";
 import ImageWithFallback from "./ImageWithFallback";
-import { BsFillBookmarkCheckFill } from "react-icons/bs";
-import { FaInfoCircle } from "react-icons/fa";
-import { MdError, MdTipsAndUpdates } from "react-icons/md";
-import { TiWarning } from "react-icons/ti";
 import { ThemeColor } from "../TableOfContent";
 import { headers } from "next/headers";
 import { getAdmonitionType } from "@/utils/util";
@@ -269,7 +264,9 @@ const parseHTMLString = (
                 className={`text-${theme_color}-500 hover:text-${theme_color}-600 text-xs no-underline`}
                 href={urlhref || ""}
               >
-                [{Array.from(node.childNodes).map(processNode)}]
+                {[
+                  `[${Array.from(node.childNodes).map(processNode).join(",")}]`,
+                ]}
               </a>
             );
           }
@@ -289,6 +286,16 @@ const parseHTMLString = (
             {Array.from(node.childNodes).map(processNode)}
           </strong>
         );
+      } else if (tagName === "IFRAME") {
+        return (
+          <iframe
+            key={randomKey}
+            {...props}
+            className="w-full embed-video my-[1.25em] rounded-md"
+          >
+            {Array.from(node.childNodes).map(processNode)}
+          </iframe>
+        );
       }
     } else if (node instanceof window.Text) {
       // 处理文本节点

diff --git a/zbook_frontend/src/components/sidebars/UnfoldSubMenu.tsx b/zbook_frontend/src/components/sidebars/UnfoldSubMenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-literals */
 "use client";
 import type { MenuStruct } from "@/types/interface";
 import FoldSubMenu from "./FoldSubMenu";