mirror of
https://github.com/AnimeThemes/animethemes-web.git
synced 2026-07-11 01:24:31 +02:00
fix: Fixed markdown parsing of long tables (#109)
* Fixed issue where CSS wasn't injected properly. * Fixed multi cover image not working with a single image. * Replaced markdown parsing library.
This commit is contained in:
Manuel S
Generated
+53
-6843
File diff suppressed because it is too large
Load Diff
+2
-6
@@ -15,16 +15,17 @@
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"@graphql-tools/merge": "^8.2.1",
|
||||
"@graphql-tools/schema": "^8.2.0",
|
||||
"@mapbox/rehype-prism": "^0.8.0",
|
||||
"@next/bundle-analyzer": "^12.0.3",
|
||||
"@reach/listbox": "^0.16.2",
|
||||
"@reach/menu-button": "^0.16.2",
|
||||
"common-tags": "^1.8.0",
|
||||
"framer-motion": "^6.2.1",
|
||||
"github-slugger": "^1.4.0",
|
||||
"graphql": "^15.6.1",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"knex": "^0.95.11",
|
||||
"lodash-es": "^4.17.21",
|
||||
"marked": "^4.0.12",
|
||||
"mysql2": "^2.3.3",
|
||||
"next": "^12.1.0",
|
||||
"prismjs": "^1.27.0",
|
||||
@@ -33,11 +34,6 @@
|
||||
"react-query": "^3.29.0",
|
||||
"rehype-parse": "^8.0.4",
|
||||
"rehype-react": "^7.0.4",
|
||||
"rehype-slug": "^5.0.1",
|
||||
"rehype-stringify": "^9.0.3",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-parse": "^10.0.1",
|
||||
"remark-rehype": "^10.1.0",
|
||||
"sass": "^1.43.4",
|
||||
"styled-components": "^5.3.3",
|
||||
"unified": "^10.1.2",
|
||||
|
||||
@@ -38,7 +38,7 @@ const StyledCoverItemContainer = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
${(props) => props.$itemCount && css`
|
||||
${(props) => props.$itemCount > 1 && css`
|
||||
&:nth-child(1) {
|
||||
--translate-x: ${getTranslationX(1, props.$itemCount)}%;
|
||||
clip-path: polygon(
|
||||
|
||||
+48
-18
@@ -1,4 +1,5 @@
|
||||
import { Head, Html, Main, NextScript } from "next/document";
|
||||
import Document, { Head, Html, Main, NextScript } from "next/document";
|
||||
import { ServerStyleSheet } from "styled-components";
|
||||
|
||||
const ThemeInjection = () => {
|
||||
// language=JavaScript
|
||||
@@ -21,21 +22,50 @@ const ThemeInjection = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
{/* eslint-disable-next-line @next/next/google-font-display */}
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=fallback"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
<body theme="dark">
|
||||
<ThemeInjection/>
|
||||
<Main/>
|
||||
<NextScript/>
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
export default class MyDocument extends Document {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
{/* eslint-disable-next-line @next/next/google-font-display */}
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=fallback"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
<body theme="dark">
|
||||
<ThemeInjection/>
|
||||
<Main/>
|
||||
<NextScript/>
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
|
||||
static async getInitialProps(ctx) {
|
||||
const sheet = new ServerStyleSheet();
|
||||
const originalRenderPage = ctx.renderPage;
|
||||
|
||||
try {
|
||||
ctx.renderPage = () => originalRenderPage({
|
||||
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />)
|
||||
});
|
||||
|
||||
const initialProps = await Document.getInitialProps(ctx);
|
||||
|
||||
return {
|
||||
...initialProps,
|
||||
styles: (
|
||||
<>
|
||||
{initialProps.styles}
|
||||
{sheet.getStyleElement()}
|
||||
</>
|
||||
),
|
||||
};
|
||||
} finally {
|
||||
sheet.seal();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+18
-28
@@ -1,37 +1,27 @@
|
||||
import { unified } from "unified";
|
||||
import remarkParse from "remark-parse";
|
||||
import remarkRehype from "remark-rehype";
|
||||
import rehypePrism from "@mapbox/rehype-prism";
|
||||
import rehypeSlug from "rehype-slug";
|
||||
import rehypeStringify from "rehype-stringify";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { marked } from "marked";
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/components/prism-powershell";
|
||||
import "prismjs/components/prism-json";
|
||||
|
||||
export default function markdownToHtml(markdown) {
|
||||
const html = unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkGfm)
|
||||
.use(remarkRehype)
|
||||
.use(rehypePrism)
|
||||
.use(rehypeSlug)
|
||||
.use(rehypeStringify)
|
||||
.processSync(markdown)
|
||||
.toString();
|
||||
const headings = [];
|
||||
|
||||
const headings = getHeadings(markdown);
|
||||
const html = marked.parse(markdown, {
|
||||
highlight(code, lang) {
|
||||
if (lang) {
|
||||
return Prism.highlight(code, Prism.languages[lang], lang);
|
||||
}
|
||||
return code;
|
||||
},
|
||||
walkTokens(token) {
|
||||
if (token.type === "heading" && token.depth === 2) {
|
||||
headings.push({ text: token.text, level: token.depth });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
html,
|
||||
headings
|
||||
};
|
||||
}
|
||||
|
||||
function getHeadings(markdown) {
|
||||
return [...markdown.matchAll(/^(##) (.*)$/gm)].map(([, prefix, text]) => ({
|
||||
text: stripMarkdown(text),
|
||||
level: prefix.length
|
||||
}));
|
||||
}
|
||||
|
||||
function stripMarkdown(markdown) {
|
||||
return markdown.replaceAll(/\[(.*?)]\(.*?\)/g, "$1");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user