Improved About us section + message when content not available in a language #15
|
@ -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 ? (
|
||||
<>
|
||||
“{props.children}”
|
||||
<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={() => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue