Accords-Library-Archive/accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added support for markdown

Browse Source
This commit is contained in:
DrMint 2022-02-08 17:34:17 +01:00
parent a1875fcf2d
commit 5ea451f63d
4 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package-lock.json generated
View File

@ -9,6 +9,7 @@
"@fontsource/material-icons-rounded": "^4.5.0",
"@fontsource/vollkorn": "^4.5.1",
"@fontsource/zen-maru-gothic": "^4.5.3",
"markdown-to-jsx": "^7.1.6",
"next": "^12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"
@ -2743,6 +2744,17 @@
"node": ">=10"
}
},
"node_modules/markdown-to-jsx": {
"version": "7.1.6",
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.6.tgz",
"integrity": "sha512-1wrIGZYwIG2gR3yfRmbr4FlQmhaAKoKTpRo4wur4fp9p0njU1Hi7vR8fj0AUKKIcPduiJmPprzmCB5B/GvlC7g==",
"engines": {
"node": ">= 10"
},
"peerDependencies": {
"react": ">= 0.14.0"
}
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@ -6081,6 +6093,12 @@
"yallist": "^4.0.0"
}
},
"markdown-to-jsx": {
"version": "7.1.6",
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.6.tgz",
"integrity": "sha512-1wrIGZYwIG2gR3yfRmbr4FlQmhaAKoKTpRo4wur4fp9p0njU1Hi7vR8fj0AUKKIcPduiJmPprzmCB5B/GvlC7g==",
"requires": {}
},
"merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

1
package.json
View File

@ -12,6 +12,7 @@
"@fontsource/material-icons-rounded": "^4.5.0",
"@fontsource/vollkorn": "^4.5.1",
"@fontsource/zen-maru-gothic": "^4.5.3",
"markdown-to-jsx": "^7.1.6",
"next": "^12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"

4
src/pages/content/[slug]/index.tsx
View File

@ -7,6 +7,8 @@ import Image from "next/image";
import { getAssetURL, prettySlug } from "queries/helpers";
import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine";
import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/PanelComponents/ReturnButton";
type Props = {
content: GetContentQuery;
@ -24,7 +26,7 @@ export default function Library(props: Props): JSX.Element {
<>
<ContentPanel>
<div className="grid place-items-center">
<div className="grid place-items-center gap-12">
<div className="grid place-items-center gap-12 mb-12">
<div>
<Image
className="rounded-lg"

14
src/pages/content/[slug]/read.tsx
View File

@ -7,13 +7,16 @@ import Image from "next/image";
import { getAssetURL, prettySlug } from "queries/helpers";
import Button from "components/Button";
import HorizontalLine from "components/HorizontalLine";
import Markdown from "markdown-to-jsx";
import SubPanel from "components/Panels/SubPanel";
import ReturnButton from "components/PanelComponents/ReturnButton";
type Props = {
content: GetContentTextQuery;
};
applyCustomAppProps(Library, {
useSubPanel: false,
useSubPanel: true,
useContentPanel: true,
});
@ -22,9 +25,12 @@ export default function Library(props: Props): JSX.Element {
return (
<>
<SubPanel>
<ReturnButton href={`/content/${content.slug}`} title="Content" />
</SubPanel>
<ContentPanel>
<div className="grid place-items-center">
<div className="grid place-items-center gap-12">
<div className="grid place-items-center gap-12 mb-12">
<div>
<Image
className="rounded-lg"
@ -66,8 +72,8 @@ export default function Library(props: Props): JSX.Element {
<HorizontalLine />
{content.text_set.length > 0 ? (
<div className="prose">
{content.text_set[0].text}
<div className="prose prose-lg text-black">
<Markdown>{content.text_set[0].text}</Markdown>
</div>
) : (
""