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 {
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 {