Improved markdawn by adding more functionalities

2022-03-19 17:35:17 +01:00 · 2022-03-19 17:35:17 +01:00 · de6b0fe017
commit de6b0fe017
parent c48ff5249b
9 changed files with 100 additions and 43 deletions
--- 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 (
-                    <div className="flex flex-row place-items-center place-content-center gap-3">
-                      <h1 id={props.id} style={props.style}>
-                        {props.children}
-                      </h1>
+                    <h1 id={props.id} style={props.style}>
+                      {props.children}
                      <HeaderToolTip id={props.id} />
-                    </div>
+                    </h1>
                  );
                },
              },
@ -59,12 +61,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                  children: React.ReactNode;
                }) => {
                  return (
-                    <div className="flex flex-row place-items-center place-content-center gap-3">
-                      <h2 id={props.id} style={props.style}>
-                        {props.children}
-                      </h2>
+                    <h2 id={props.id} style={props.style}>
+                      {props.children}
                      <HeaderToolTip id={props.id} />
-                    </div>
+                    </h2>
                  );
                },
              },
@ -75,12 +75,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                  children: React.ReactNode;
                }) => {
                  return (
-                    <div className="flex flex-row place-items-center place-content-center gap-3">
-                      <h3 id={props.id} style={props.style}>
-                        {props.children}
-                      </h3>
+                    <h3 id={props.id} style={props.style}>
+                      {props.children}
                      <HeaderToolTip id={props.id} />
-                    </div>
+                    </h3>
                  );
                },
              },
@ -91,12 +89,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                  children: React.ReactNode;
                }) => {
                  return (
-                    <div className="flex flex-row place-items-center place-content-center gap-3">
-                      <h4 id={props.id} style={props.style}>
-                        {props.children}
-                      </h4>
+                    <h4 id={props.id} style={props.style}>
+                      {props.children}
                      <HeaderToolTip id={props.id} />
-                    </div>
+                    </h4>
                  );
                },
              },
@ -107,12 +103,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                  children: React.ReactNode;
                }) => {
                  return (
-                    <div className="flex flex-row place-items-center place-content-center gap-3">
-                      <h5 id={props.id} style={props.style}>
-                        {props.children}
-                      </h5>
+                    <h5 id={props.id} style={props.style}>
+                      {props.children}
                      <HeaderToolTip id={props.id} />
-                    </div>
+                    </h5>
                  );
                },
              },
@ -123,12 +117,10 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                  children: React.ReactNode;
                }) => {
                  return (
-                    <div className="flex flex-row place-items-center place-content-center gap-3">
-                      <h6 id={props.id} style={props.style}>
-                        {props.children}
-                      </h6>
+                    <h6 id={props.id} style={props.style}>
+                      {props.children}
                      <HeaderToolTip id={props.id} />
-                    </div>
+                    </h6>
                  );
                },
              },
@ -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 (
+                    <a
+                      onClick={() =>
+                        router.replace(
+                          `${props.page ? props.page : ""}#${slug}`
+                        )
+                      }
+                    >
+                      {props.children}
+                    </a>
+                  );
+                },
+              },
              player: {
                component: () => {
                  return (
@ -219,6 +233,25 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                  );
                },
              },
+              blockquote: {
+                component: (props: {
+                  children: React.ReactNode;
+                  cite?: string;
+                }) => {
+                  return (
+                    <blockquote>
+                      {props.cite ? (
+                        <>
+                          &ldquo;{props.children}&rdquo;
+                          <cite>— {props.cite}</cite>
+                        </>
+                      ) : (
+                        props.children
+                      )}
+                    </blockquote>
+                  );
+                },
+              },
              img: {
                component: (props: {
                  alt: string;
@ -230,7 +263,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
                }) => {
                  return (
                    <div
-                    className="my-8 cursor-pointer"
+                      className="my-8 cursor-pointer"
                      onClick={() => {
                        setLightboxOpen(true);
                        setLightboxImages([
@ -280,8 +313,12 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {

 function HeaderToolTip(props: { id: string }) {
  return (
-    <ToolTip content={"Copy anchor link"} trigger="mouseenter">
-      <ToolTip content={"Copied! 👍"} trigger="click">
+    <ToolTip
+      content={"Copy anchor link"}
+      trigger="mouseenter"
+      className="text-sm"
+    >
+      <ToolTip content={"Copied! 👍"} trigger="click" className="text-sm">
        <span
          className="material-icons transition-color hover:text-dark cursor-pointer"
          onClick={() => {
--- a/src/components/Markdown/TOC.tsx
+++ b/src/components/Markdown/TOC.tsx
@ -49,7 +49,7 @@ function TOCLevel(props: TOCLevelProps): JSX.Element {
          >
            <span className="text-dark">{`${parentNumbering}${
              childIndex + 1
-            }.`}</span>
+            }.`}</span>{" "}
            <a onClick={() => router.replace(`#${child.slug}`)}>
              {<abbr title={child.title}>{child.title}</abbr>}
            </a>
--- 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";
--- 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 {
        <HorizontalLine />

        {content.text_set.length > 0 && content.text_set[0].text && (
-          <Markdawn text={content.text_set[0].text} />
+          <Markdawn router={router} text={content.text_set[0].text} />
        )}
      </div>
    </ContentPanel>
--- 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 {
        <div>
          <h2>Preview</h2>
          <div className="bg-mid rounded-xl p-8">
-            <Markdawn className="max-w-full" text={markdown} />
+            <Markdawn router={router} className="max-w-full" text={markdown} />
          </div>
        </div>
      </div>
--- 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 = (
    <ContentPanel>
      <div className="grid place-items-center place-content-center w-full gap-5 text-center">
@ -23,7 +26,7 @@ export default function Home(props: HomeProps): JSX.Element {
        </h2>
      </div>
      {post.translations.length > 0 && (
-        <Markdawn text={post.translations[0].body} />
+        <Markdawn router={router} text={post.translations[0].body} />
      )}
    </ContentPanel>
  );
--- a/src/pages/news/[slug].tsx
+++ b/src/pages/news/[slug].tsx
@ -108,7 +108,7 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
      <HorizontalLine />

      {post.translations.length > 0 && post.translations[0].body && (
-        <Markdawn text={post.translations[0].body} />
+        <Markdawn router={router} text={post.translations[0].body} />
      )}
    </ContentPanel>
  );
--- 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")
--- 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 {