Add Jsp markdown text markup and classes.

src/Pages/markdownPage.js

@@ -5,13 +5,80 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
 import { docco, dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { useTheme } from '../ThemeContext';
 
-const MarkdownPage = ({ md }) => {
+const MySection = ({ children }) => {
-    const file_name = md;
+    return (<section>{children}</section>);
-    const [markdownContent, setPost] = useState('');
+}
+
+const MyParagraph = ({ children, ...props }) => {
+    return (<h1 {...props}>{children}</h1>);
+}
+
+const MyImage = ({ src, alt }) => {
+    return (
+        <picture>
+            <source media="(max-width: 799px)" srcSet={`${src}-w240.webp`} />
+            <source media="(min-width: 800px) and (max-width: 1199px)" srcSet={`${src}-w480.webp`} />
+            <source media="(min-width: 1200px)" srcSet={`${src}-w800.webp`} />
+            <img alt={alt} src={`${src}-w800.webp`} />
+        </picture>);
+}
+
+const Jps = ({ text, colour, underline, strikethrough }) => {
+    const { theme } = useTheme();
+    let classBuilder = `jsp ` + theme;
+
+    if (colour) {
+        classBuilder = classBuilder + ` ` + colour
+    }
+    if (underline) {
+        classBuilder = classBuilder + ` u`
+    }
+    if (strikethrough) {
+        classBuilder = classBuilder + ` s`
+    }
+
+    return (<span className={classBuilder}>{text}</span>);
+}
+
+const MyCodeBlock = ({ children, className }) => {
     const { theme } = useTheme();
 
+    function stripLangPrefix(inputString) {
+        let softwareLanguage = inputString ?? ''
+        // if (inputString === 'undefinded') {
+        //     return '';
+        // }
+
+        if (softwareLanguage.startsWith('lang-')) {
+            return softwareLanguage.slice(5);
+        }
+        return softwareLanguage;
+    }
+
+    console.log("MyCodeBlock: " + className);
+    let codeOutput;
+    let styling = (true) ? docco : dracula; //theme === 'light'
+    codeOutput = <SyntaxHighlighter language={stripLangPrefix(className)} style={styling}>{children}</SyntaxHighlighter>;
+
+    // <button className='code-block-copy-button'>{getString('copy')}</button>
+
+    return (
+        <div className={'code-block-' + theme}>
+            <div className='code-block-header'></div>
+            {codeOutput}
+        </div>
+    );
+}
+
+// TODO 1: Create error if given markdown file does not exist.
+// TODO 2: Create error if file for given language does not exist.
+
+const MarkdownPage = ({ md }) => {
+    const [markdownContent, setPost] = useState('');
+
+    // causes 3 calls somehow...
     useEffect(() => {
-        import(`./${file_name}`)
+        import(`./${md}`)
             .then(res => {
                 fetch(res.default)
                     .then(res => res.text())
@@ -21,64 +88,28 @@ const MarkdownPage = ({ md }) => {
             .catch(err => console.log(err));
     });
 
-    const MySection = ({ children }) => <section>{children}</section>
-
-    const MyParagraph = ({ children, ...props }) => <h1 {...props}>{children}</h1>
-
-    const MyImage = ({ src, alt }) => {
-        return (
-            <picture>
-                <source media="(max-width: 799px)" srcSet={`${src}-w240.webp`} />
-                <source media="(min-width: 800px) and (max-width: 1199px)" srcSet={`${src}-w480.webp`} />
-                <source media="(min-width: 1200px)" srcSet={`${src}-w800.webp`} />
-                <img alt={alt} src={`${src}-w800.webp`} />
-            </picture>)
-    }
-
-    function stripLangPrefix(inputString) {
-        if (inputString.startsWith('lang-')) {
-            return inputString.slice(5);
-        }
-        return inputString;
-    }
-
-    const MyCodeBlock = ({ children, className }) => {
-        let codeOutput;
-        if (theme === 'light') {
-            codeOutput = <SyntaxHighlighter language={stripLangPrefix(className)} style={docco}>{children}</SyntaxHighlighter>;
-        }
-        else {
-            codeOutput = <SyntaxHighlighter language={stripLangPrefix(className)} style={dracula}>{children}</SyntaxHighlighter>;
-        }
-
-        // <button className='code-block-copy-button'>{getString('copy')}</button>
-        return (
-            <div className={'code-block-' + theme}>
-                <div className='code-block-header'>
-                </div>
-                {codeOutput}
-            </div>
-        )
-    }
-
     return (
-        <Markdown options={{
+        <Markdown
-            wrapper: MySection,
+            options={{
-            overrides: {
+                wrapper: MySection,
-                h1: {
+                overrides: {
-                    component: MyParagraph,
+                    h1: {
-                    props: {
+                        component: MyParagraph,
-                        className: 'text-primary',
+                        props: {
+                            className: 'text-primary',
+                        },
                     },
+                    img: {
+                        component: MyImage
+                    },
+                    code: {
+                        component: MyCodeBlock
+                    },
+                    Jps: {
+                        component: Jps
+                    }
                 },
-                img: {
+            }}>
-                    component: MyImage
-                },
-                code: {
-                    component: MyCodeBlock
-                }
-            },
-        }}>
             {markdownContent}
         </Markdown>
     )

src/overrides.scss

@@ -10,6 +10,15 @@ $theme-colors: (
   "text-light": #2d0635,
   "link-dark": #5900ff,
   "link-light": #0400ff,
+  // Text highlight colours
+  "dark-c1": #eeaa00,
+  "dark-c2": #eeaaff,
+  "dark-c3": #ff6262,
+  "dark-dim1": #ababab,
+  "light-c1": #992299,
+  "light-c2": #446600,
+  "light-c3": #c70000,
+  "light-dim1": #787878,
 );
 
 // Import Bootstrap and its default variables
@@ -152,6 +161,53 @@ body.light {
   }
 }
 
+.jsp {
+  // Dark theme.
+  &.dark {
+    &.c1 {
+      color: map-get($theme-colors, "dark-c1")
+    }
+    &.c2 {
+      color: map-get($theme-colors, "dark-c2")
+    }
+    &.c3 {
+      color: map-get($theme-colors, "dark-c3")
+    }
+    &.dim1 {
+      color: map-get($theme-colors, "dark-dim1");
+    }
+    &.s {
+      text-decoration: line-through;
+    }
+    &.u {
+      text-decoration: underline;
+    }
+  }
+
+  // Light theme.
+  &.light {
+    &.c1 {
+      color: map-get($theme-colors, "light-c1")
+    }
+    &.c2 {
+      color: map-get($theme-colors, "light-c2");
+    }
+    &.c3 {
+      color: map-get($theme-colors, "light-c3")
+    }
+    &.dim1 {
+      color: map-get($theme-colors, "light-dim1");
+    }
+    &.s {
+      text-decoration: line-through;
+    }
+    &.u {
+      text-decoration: underline;
+    }
+  }
+}
+
+
 // Core variables and mixins
 // @import "variables";
 // @import "mixins";