From f2b99eb6fa38c0cd7560a2a1219d82cfeaeeab1c Mon Sep 17 00:00:00 2001 From: Dan Kimberley Date: Wed, 17 Jul 2024 13:07:47 +0100 Subject: [PATCH 1/6] created separate heading component --- components/content/Content.tsx | 11 +++++++++++ components/content/Heading.tsx | 20 ++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 components/content/Heading.tsx diff --git a/components/content/Content.tsx b/components/content/Content.tsx index 22db640..4e60c58 100644 --- a/components/content/Content.tsx +++ b/components/content/Content.tsx @@ -24,6 +24,7 @@ import { CodeComponent, CodeProps, ReactMarkdownProps } from "react-markdown/lib import Callout from "../Callout" import { Course, Section, Theme } from "lib/material" import Paragraph from "./Paragraph" +import Heading from "./Heading" function reactMarkdownRemarkDirective() { return (tree: any) => { @@ -56,6 +57,13 @@ const list = (sectionStr: string) => { return list } +const h = (sectionStr: string, tag: string) => { + function h({ node, children, ...props }: ReactMarkdownProps) { + return + } + return h +} + let solutionCount = 0 function solution({ node, children, ...props }: ReactMarkdownProps) { solutionCount++ @@ -161,6 +169,9 @@ const Content: React.FC = ({ markdown, theme, course, section }) => { code, p: p(sectionStr), li: list(sectionStr), + h2: h(sectionStr, "h2"), + h3: h(sectionStr, "h3"), + h4: h(sectionStr, "h4"), }} > {markdown} diff --git a/components/content/Heading.tsx b/components/content/Heading.tsx new file mode 100644 index 0000000..361ae80 --- /dev/null +++ b/components/content/Heading.tsx @@ -0,0 +1,20 @@ +import React from "react" + +interface HeadingProps { + content: React.ReactNode + section: string + tag?: string +} + +const Heading: React.FC = ({ content, section, tag = "p" }) => { + const Tag = tag as keyof JSX.IntrinsicElements + const headingContent = content?.toString().replaceAll(" ", "-") + + return ( + <> + {content} + + ) +} + +export default Heading From 4015d884700d7da76c15154ccd6e464a6cebdc97 Mon Sep 17 00:00:00 2001 From: Dan Kimberley Date: Wed, 17 Jul 2024 13:11:50 +0100 Subject: [PATCH 2/6] changed to heading props --- components/content/Content.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/content/Content.tsx b/components/content/Content.tsx index 4e60c58..679b675 100644 --- a/components/content/Content.tsx +++ b/components/content/Content.tsx @@ -20,7 +20,7 @@ import Solution from "./Solution" import { first } from "cypress/types/lodash" import remarkDirective from "remark-directive" import remarkDirectiveRehype from "remark-directive-rehype" -import { CodeComponent, CodeProps, ReactMarkdownProps } from "react-markdown/lib/ast-to-react" +import { CodeComponent, CodeProps, HeadingProps, ReactMarkdownProps } from "react-markdown/lib/ast-to-react" import Callout from "../Callout" import { Course, Section, Theme } from "lib/material" import Paragraph from "./Paragraph" @@ -58,7 +58,7 @@ const list = (sectionStr: string) => { } const h = (sectionStr: string, tag: string) => { - function h({ node, children, ...props }: ReactMarkdownProps) { + function h({ node, children, ...props }: HeadingProps) { return } return h From 4ea6d69f1521146f67a75789917c140d7ea76546 Mon Sep 17 00:00:00 2001 From: Dan Kimberley Date: Wed, 17 Jul 2024 13:13:41 +0100 Subject: [PATCH 3/6] added generate URL function --- components/content/Heading.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/content/Heading.tsx b/components/content/Heading.tsx index 361ae80..362d584 100644 --- a/components/content/Heading.tsx +++ b/components/content/Heading.tsx @@ -10,6 +10,11 @@ const Heading: React.FC = ({ content, section, tag = "p" }) => { const Tag = tag as keyof JSX.IntrinsicElements const headingContent = content?.toString().replaceAll(" ", "-") + const generateHeadingURL = () => { + const href: string = typeof window !== "undefined" ? window.location.href.split("#")[0] : "" + return href + "#" + headingContent ?? "" + } + return ( <> {content} From bca171c8e699a2ff9c3b00a578ec90027d2170a7 Mon Sep 17 00:00:00 2001 From: Dan Kimberley Date: Wed, 17 Jul 2024 13:22:41 +0100 Subject: [PATCH 4/6] functional copy heading link button --- components/content/Heading.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/components/content/Heading.tsx b/components/content/Heading.tsx index 362d584..aec5a6e 100644 --- a/components/content/Heading.tsx +++ b/components/content/Heading.tsx @@ -1,4 +1,6 @@ import React from "react" +import CopyToClipboard from "react-copy-to-clipboard" +import { FaLink } from "react-icons/fa" interface HeadingProps { content: React.ReactNode @@ -15,9 +17,20 @@ const Heading: React.FC = ({ content, section, tag = "p" }) => { return href + "#" + headingContent ?? "" } + const onCopyHandler = () => { + return + } + return ( <> - {content} + + {content} + + + + ) } From 22f5c00faa6faeae60a4525fed05bd79ef9deae9 Mon Sep 17 00:00:00 2001 From: Dan Kimberley Date: Wed, 17 Jul 2024 14:48:04 +0100 Subject: [PATCH 5/6] added copied notification --- components/content/Heading.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/content/Heading.tsx b/components/content/Heading.tsx index aec5a6e..1b0717d 100644 --- a/components/content/Heading.tsx +++ b/components/content/Heading.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { useState } from "react" import CopyToClipboard from "react-copy-to-clipboard" import { FaLink } from "react-icons/fa" @@ -11,6 +11,7 @@ interface HeadingProps { const Heading: React.FC = ({ content, section, tag = "p" }) => { const Tag = tag as keyof JSX.IntrinsicElements const headingContent = content?.toString().replaceAll(" ", "-") + const [isCopied, setIsCopied] = useState(false) const generateHeadingURL = () => { const href: string = typeof window !== "undefined" ? window.location.href.split("#")[0] : "" @@ -18,7 +19,10 @@ const Heading: React.FC = ({ content, section, tag = "p" }) => { } const onCopyHandler = () => { - return + setIsCopied(true) + setTimeout(() => { + setIsCopied(false) + }, 1500) } return ( @@ -30,6 +34,7 @@ const Heading: React.FC = ({ content, section, tag = "p" }) => { + {isCopied && Copied to clipboard!} ) From 42ba90f8da3a450543a1392c5f01fb63c405c3d4 Mon Sep 17 00:00:00 2001 From: Dan Kimberley Date: Wed, 17 Jul 2024 14:56:13 +0100 Subject: [PATCH 6/6] remove default param for tag --- components/content/Heading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/content/Heading.tsx b/components/content/Heading.tsx index 1b0717d..cc1e258 100644 --- a/components/content/Heading.tsx +++ b/components/content/Heading.tsx @@ -5,10 +5,10 @@ import { FaLink } from "react-icons/fa" interface HeadingProps { content: React.ReactNode section: string - tag?: string + tag: string } -const Heading: React.FC = ({ content, section, tag = "p" }) => { +const Heading: React.FC = ({ content, section, tag }) => { const Tag = tag as keyof JSX.IntrinsicElements const headingContent = content?.toString().replaceAll(" ", "-") const [isCopied, setIsCopied] = useState(false)