From de6b0fe017677d9fc21b08def6e3324c5b20ba7e Mon Sep 17 00:00:00 2001 From: DrMint Date: Sat, 19 Mar 2022 17:35:17 +0100 Subject: [PATCH] Improved markdawn by adding more functionalities --- src/components/Markdown/Markdawn.tsx | 107 ++++++++++++++++++--------- src/components/Markdown/TOC.tsx | 2 +- src/pages/_app.tsx | 2 + src/pages/contents/[slug]/read.tsx | 2 +- src/pages/editor.tsx | 4 +- src/pages/index.tsx | 5 +- src/pages/news/[slug].tsx | 2 +- src/queries/helpers.ts | 5 +- src/tailwind.css | 14 +++- 9 files changed, 100 insertions(+), 43 deletions(-) diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index 4cb08c1..83f743b 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -5,18 +5,22 @@ import LightBox from "components/LightBox"; import ToolTip from "components/ToolTip"; import { useAppLayout } from "contexts/AppLayoutContext"; import Markdown from "markdown-to-jsx"; +import { NextRouter } from "next/router"; import { slugify } from "queries/helpers"; import React, { useState } from "react"; -type ScenBreakProps = { +type MarkdawnProps = { className?: string; text: string; + router: NextRouter; }; -export default function Markdawn(props: ScenBreakProps): JSX.Element { +export default function Markdawn(props: MarkdawnProps): JSX.Element { const appLayout = useAppLayout(); const text = preprocessMarkDawn(props.text); + const { router } = props; + const [lightboxOpen, setLightboxOpen] = useState(false); const [lightboxImages, setLightboxImages] = useState([""]); const [lightboxIndex, setLightboxIndex] = useState(0); @@ -43,12 +47,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { children: React.ReactNode; }) => { return ( -
-

- {props.children} -

+

+ {props.children} -

+ ); }, }, @@ -59,12 +61,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { children: React.ReactNode; }) => { return ( -
-

- {props.children} -

+

+ {props.children} -

+ ); }, }, @@ -75,12 +75,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { children: React.ReactNode; }) => { return ( -
-

- {props.children} -

+

+ {props.children} -

+ ); }, }, @@ -91,12 +89,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { children: React.ReactNode; }) => { return ( -
-

- {props.children} -

+

+ {props.children} -

+ ); }, }, @@ -107,12 +103,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { children: React.ReactNode; }) => { return ( -
-
- {props.children} -
+
+ {props.children} -
+ ); }, }, @@ -123,12 +117,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { children: React.ReactNode; }) => { return ( -
-
- {props.children} -
+
+ {props.children} -
+ ); }, }, @@ -151,6 +143,28 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { ); }, }, + IntraLink: { + component: (props: { + children: React.ReactNode; + target?: string; + page?: string; + }) => { + const slug = props.target + ? slugify(props.target) + : slugify(props.children?.toString()); + return ( + + router.replace( + `${props.page ? props.page : ""}#${slug}` + ) + } + > + {props.children} + + ); + }, + }, player: { component: () => { return ( @@ -219,6 +233,25 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { ); }, }, + blockquote: { + component: (props: { + children: React.ReactNode; + cite?: string; + }) => { + return ( +
+ {props.cite ? ( + <> + “{props.children}” + — {props.cite} + + ) : ( + props.children + )} +
+ ); + }, + }, img: { component: (props: { alt: string; @@ -230,7 +263,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { }) => { return (
{ setLightboxOpen(true); setLightboxImages([ @@ -280,8 +313,12 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { function HeaderToolTip(props: { id: string }) { return ( - - + + { diff --git a/src/components/Markdown/TOC.tsx b/src/components/Markdown/TOC.tsx index 8e50a0e..aed7dfb 100644 --- a/src/components/Markdown/TOC.tsx +++ b/src/components/Markdown/TOC.tsx @@ -49,7 +49,7 @@ function TOCLevel(props: TOCLevelProps): JSX.Element { > {`${parentNumbering}${ childIndex + 1 - }.`} + }.`}{" "} router.replace(`#${child.slug}`)}> {{child.title}} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index b073451..1f34c1a 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,8 +1,10 @@ import type { AppProps } from "next/app"; import "tailwind.css"; import "@fontsource/zen-maru-gothic/500.css"; +import "@fontsource/zen-maru-gothic/900.css"; import "@fontsource/vollkorn/700.css"; import "@fontsource/opendyslexic/400.css"; +import "@fontsource/opendyslexic/700.css"; import "@fontsource/material-icons"; import { AppContextProvider } from "contexts/AppLayoutContext"; diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index c770ebf..25573b2 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -187,7 +187,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { {content.text_set.length > 0 && content.text_set[0].text && ( - + )}
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx index 825ed90..b770c0e 100644 --- a/src/pages/editor.tsx +++ b/src/pages/editor.tsx @@ -7,11 +7,13 @@ import { useCallback, useState } from "react"; import Markdawn from "components/Markdown/Markdawn"; import Script from "next/script"; import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; +import { useRouter } from "next/router"; interface EditorProps extends AppStaticProps {} export default function Editor(props: EditorProps): JSX.Element { const { langui } = props; + const router = useRouter(); const handleInput = useCallback((e) => { setMarkdown(e.target.value); @@ -76,7 +78,7 @@ export default function Editor(props: EditorProps): JSX.Element {

Preview

- +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d65e0d6..0e002ab 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,6 +4,7 @@ import ContentPanel from "components/Panels/ContentPanel"; import { getPost } from "graphql/operations"; import { GetPostQuery } from "graphql/operations-types"; import { GetStaticProps } from "next"; +import { useRouter } from "next/router"; import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; import { prettySlug } from "queries/helpers"; @@ -13,6 +14,8 @@ interface HomeProps extends AppStaticProps { export default function Home(props: HomeProps): JSX.Element { const { post } = props; + const router = useRouter(); + const contentPanel = (
@@ -23,7 +26,7 @@ export default function Home(props: HomeProps): JSX.Element {
{post.translations.length > 0 && ( - + )}
); diff --git a/src/pages/news/[slug].tsx b/src/pages/news/[slug].tsx index 3a7334a..3ee7b54 100644 --- a/src/pages/news/[slug].tsx +++ b/src/pages/news/[slug].tsx @@ -108,7 +108,7 @@ export default function LibrarySlug(props: PostProps): JSX.Element { {post.translations.length > 0 && post.translations[0].body && ( - + )} ); diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index 9e7200c..7393aa1 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -274,8 +274,9 @@ export function getStatusDescription( } } -export function slugify(str: string): string { - return str +export function slugify(string: string | undefined): string { + if (!string) return ""; + return string .replace(/[ÀÁÂÃÄÅàáâãä忯]/g, "a") .replace(/[çÇ]/g, "c") .replace(/[ðÐ]/g, "d") diff --git a/src/tailwind.css b/src/tailwind.css index 14a9584..80f03cd 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -54,7 +54,7 @@ .formatted h4, .formatted h5, .formatted h6 { - @apply text-center; + @apply text-center flex gap-3 justify-center; } .formatted h1 { @@ -94,6 +94,10 @@ @apply my-2 text-justify; } + .formatted strong { + @apply font-black; + } + .formatted footer { @apply border-t-[3px] border-dotted pt-6; } @@ -122,6 +126,14 @@ @apply list-decimal pl-4; } + .formatted blockquote { + @apply border-2 border-mid rounded-lg p-5 text-center my-8; + } + + .formatted blockquote cite { + @apply text-dark block; + } + /* INPUT */ input {