diff --git a/package-lock.json b/package-lock.json index 4d999b0..06745f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "react-quiz-component": "^0.5.1", "react-router": "^6.8.0", "react-router-dom": "^6.8.0", + "rehype-raw": "^6.0.0", "remark": "^14.0.3", "remark-gfm": "^3.0.1", "remark-strip-html": "^1.0.2", @@ -5324,6 +5325,11 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, + "node_modules/@types/parse5": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", + "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==" + }, "node_modules/@types/prettier": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz", @@ -11017,6 +11023,75 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hast-util-from-parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-7.1.2.tgz", + "integrity": "sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==", + "dependencies": { + "@types/hast": "^2.0.0", + "@types/unist": "^2.0.0", + "hastscript": "^7.0.0", + "property-information": "^6.0.0", + "vfile": "^5.0.0", + "vfile-location": "^4.0.0", + "web-namespaces": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-parse-selector": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz", + "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==", + "dependencies": { + "@types/hast": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-raw": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-7.2.3.tgz", + "integrity": "sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==", + "dependencies": { + "@types/hast": "^2.0.0", + "@types/parse5": "^6.0.0", + "hast-util-from-parse5": "^7.0.0", + "hast-util-to-parse5": "^7.0.0", + "html-void-elements": "^2.0.0", + "parse5": "^6.0.0", + "unist-util-position": "^4.0.0", + "unist-util-visit": "^4.0.0", + "vfile": "^5.0.0", + "web-namespaces": "^2.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-to-parse5": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-7.1.0.tgz", + "integrity": "sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==", + "dependencies": { + "@types/hast": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0", + "web-namespaces": "^2.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-whitespace": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz", @@ -11026,6 +11101,22 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hastscript": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz", + "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==", + "dependencies": { + "@types/hast": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "hast-util-parse-selector": "^3.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -11161,6 +11252,15 @@ "void-elements": "3.1.0" } }, + "node_modules/html-void-elements": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz", + "integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -17790,8 +17890,7 @@ "node_modules/parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", - "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", - "dev": true + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==" }, "node_modules/parseurl": { "version": "1.3.3", @@ -20487,6 +20586,20 @@ "jsesc": "bin/jsesc" } }, + "node_modules/rehype-raw": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.0.0.tgz", + "integrity": "sha512-vzbvI7d3WUJHh+7aaHs0PHlgc+NevOh+buLkEB7I/FD3xskTmhUntnjS57uTW3uQt67xcF3COm9OwLpVsk6jvg==", + "dependencies": { + "@types/hast": "^2.0.0", + "hast-util-raw": "^7.0.0", + "unified": "^10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", @@ -22816,6 +22929,19 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/vfile-location": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-4.1.0.tgz", + "integrity": "sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==", + "dependencies": { + "@types/unist": "^2.0.0", + "vfile": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/vfile-message": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.3.tgz", @@ -22889,6 +23015,15 @@ "minimalistic-assert": "^1.0.0" } }, + "node_modules/web-namespaces": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz", + "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/web-vitals": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.1.1.tgz", @@ -27881,6 +28016,11 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, + "@types/parse5": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", + "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==" + }, "@types/prettier": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz", @@ -32149,11 +32289,76 @@ "has-symbols": "^1.0.2" } }, + "hast-util-from-parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-7.1.2.tgz", + "integrity": "sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==", + "requires": { + "@types/hast": "^2.0.0", + "@types/unist": "^2.0.0", + "hastscript": "^7.0.0", + "property-information": "^6.0.0", + "vfile": "^5.0.0", + "vfile-location": "^4.0.0", + "web-namespaces": "^2.0.0" + } + }, + "hast-util-parse-selector": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz", + "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==", + "requires": { + "@types/hast": "^2.0.0" + } + }, + "hast-util-raw": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-7.2.3.tgz", + "integrity": "sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==", + "requires": { + "@types/hast": "^2.0.0", + "@types/parse5": "^6.0.0", + "hast-util-from-parse5": "^7.0.0", + "hast-util-to-parse5": "^7.0.0", + "html-void-elements": "^2.0.0", + "parse5": "^6.0.0", + "unist-util-position": "^4.0.0", + "unist-util-visit": "^4.0.0", + "vfile": "^5.0.0", + "web-namespaces": "^2.0.0", + "zwitch": "^2.0.0" + } + }, + "hast-util-to-parse5": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-7.1.0.tgz", + "integrity": "sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==", + "requires": { + "@types/hast": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0", + "web-namespaces": "^2.0.0", + "zwitch": "^2.0.0" + } + }, "hast-util-whitespace": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz", "integrity": "sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==" }, + "hastscript": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz", + "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==", + "requires": { + "@types/hast": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "hast-util-parse-selector": "^3.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0" + } + }, "he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -32276,6 +32481,11 @@ "void-elements": "3.1.0" } }, + "html-void-elements": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz", + "integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==" + }, "html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -37153,8 +37363,7 @@ "parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", - "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", - "dev": true + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==" }, "parseurl": { "version": "1.3.3", @@ -38954,6 +39163,16 @@ } } }, + "rehype-raw": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.0.0.tgz", + "integrity": "sha512-vzbvI7d3WUJHh+7aaHs0PHlgc+NevOh+buLkEB7I/FD3xskTmhUntnjS57uTW3uQt67xcF3COm9OwLpVsk6jvg==", + "requires": { + "@types/hast": "^2.0.0", + "hast-util-raw": "^7.0.0", + "unified": "^10.0.0" + } + }, "relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", @@ -40681,6 +40900,15 @@ "vfile-message": "^3.0.0" } }, + "vfile-location": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-4.1.0.tgz", + "integrity": "sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==", + "requires": { + "@types/unist": "^2.0.0", + "vfile": "^5.0.0" + } + }, "vfile-message": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.3.tgz", @@ -40740,6 +40968,11 @@ "minimalistic-assert": "^1.0.0" } }, + "web-namespaces": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz", + "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==" + }, "web-vitals": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.1.1.tgz", diff --git a/package.json b/package.json index e5cc298..d1cb192 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-quiz-component": "^0.5.1", "react-router": "^6.8.0", "react-router-dom": "^6.8.0", + "rehype-raw": "^6.0.0", "remark": "^14.0.3", "remark-gfm": "^3.0.1", "remark-strip-html": "^1.0.2", diff --git a/src/components/Chapter.tsx b/src/components/Chapter.tsx index 89f6fe5..ae07c88 100644 --- a/src/components/Chapter.tsx +++ b/src/components/Chapter.tsx @@ -1,6 +1,9 @@ import React from 'react' import { withTranslation } from 'react-i18next' import ReactMarkdown from 'react-markdown' +// FIXME: rehypeRaw, used for parsing HTML, adds ~60kb to the bundle size. +// consider if really necessary +import rehypeRaw from 'rehype-raw' import remarkGfm from 'remark-gfm' import { LinkComponent } from '../utils/MarkdownComponents' import type { IconT } from './Section' @@ -56,9 +59,12 @@ function Chapter(props: ChapterProps) {
- {data.content} - +
diff --git a/src/components/SearchForm.tsx b/src/components/SearchForm.tsx index e41da86..631dd2d 100644 --- a/src/components/SearchForm.tsx +++ b/src/components/SearchForm.tsx @@ -1,20 +1,21 @@ import React, { useEffect, useMemo, useState } from 'react'; +import { Link } from 'react-router-dom'; import { withTranslation } from "react-i18next"; import Loading from './Loading'; import { SearchHelper } from '../utils/SearchHelper'; import { useNavigate, useLocation } from 'react-router'; import type { ChapterT } from '../components/Chapter'; import type { SectionT } from '../components/Section'; +import SearchInput from './SearchInput'; + +import { LinkComponent } from '../utils/MarkdownComponents'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import strip_md from 'strip-markdown'; import { remark } from 'remark'; +var strip_html = require('remark-strip-html'); -import { LinkComponent } from '../utils/MarkdownComponents'; -import SearchInput from './SearchInput'; -import { Link } from 'react-router-dom'; -var strip_html = require('remark-strip-html'); type Props = { t: any, @@ -138,7 +139,11 @@ function SearchForm({ t, sections, minKeyWordLength = 3 }: Props) { {result.matchingContents.length > 0 ?
{result.matchingContents.map((content, idx) => { - return {content} + return })}
: null diff --git a/src/components/Section.tsx b/src/components/Section.tsx index 1d7ca40..03d3950 100644 --- a/src/components/Section.tsx +++ b/src/components/Section.tsx @@ -1,6 +1,9 @@ import { Helmet } from 'react-helmet-async' import { withTranslation } from 'react-i18next' import ReactMarkdown from 'react-markdown' +// FIXME: rehypeRaw, used for parsing HTML, adds ~60kb to the bundle size. +// consider if really necessary +import rehypeRaw from 'rehype-raw' import remarkGfm from 'remark-gfm' import { LinkComponent } from '../utils/MarkdownComponents' import Chapter from './Chapter' @@ -56,8 +59,10 @@ function Section(props: Props) { {props.section.content ?? ''} + children={props.section.content ?? ''} + /> {chapters} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index e9a7fd9..3406a6a 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -3,6 +3,9 @@ import React from 'react' import { Helmet } from 'react-helmet-async' import ReactMarkdown from 'react-markdown'; +// FIXME: rehypeRaw, used for parsing HTML, adds ~60kb to the bundle size. +// consider if really necessary +import rehypeRaw from 'rehype-raw' import remarkGfm from 'remark-gfm'; import { LinkComponent } from '../utils/MarkdownComponents'; import { withTranslation } from 'react-i18next'; @@ -31,10 +34,11 @@ function HomePage(props: Props) {

{startPage.title}

{startPage.content} - + remarkPlugins={[remarkGfm]} + rehypePlugins={[rehypeRaw]} // FIXME: adds 60kb to the bundle, remove? + components={LinkComponent} + children={startPage.content} + /> } export default withTranslation()(HomePage) \ No newline at end of file diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx index 052257e..8a74b66 100644 --- a/src/pages/SearchPage.tsx +++ b/src/pages/SearchPage.tsx @@ -1,6 +1,9 @@ import React from 'react' import { Helmet } from 'react-helmet-async' import ReactMarkdown from 'react-markdown'; +// FIXME: rehypeRaw, used for parsing HTML, adds ~60kb to the bundle size. +// consider if really necessary +import rehypeRaw from 'rehype-raw' import remarkGfm from 'remark-gfm'; import { LinkComponent } from '../utils/MarkdownComponents'; import { withTranslation } from 'react-i18next' @@ -32,9 +35,10 @@ function SearchPage(props: Props) {

{searchPage.title}

{searchPage.content} - + children={searchPage.content} + />