kevin/portfolio
1
0
Fork 0
Code

Add Jsp markdown text markup and classes.

Browse Source
This commit is contained in:
Kevin Matsubara 2024-09-02 23:05:58 +02:00
parent e8ed5c6ad3
commit a415007a98
2 changed files with 146 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/Pages/markdownPage.js
View File

@ -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 file_name = md;
const [markdownContent, setPost] = useState('');
const MySection = ({ children }) => {
return (<section>{children}</section>);
}
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={{
wrapper: MySection,
overrides: {
h1: {
component: MyParagraph,
props: {
className: 'text-primary',
<Markdown
options={{
wrapper: MySection,
overrides: {
h1: {
component: MyParagraph,
props: {
className: 'text-primary',
},
},
img: {
component: MyImage
},
code: {
component: MyCodeBlock
},
Jps: {
component: Jps
}
},
img: {
component: MyImage
},
code: {
component: MyCodeBlock
}
},
}}>
}}>
{markdownContent}
</Markdown>
)

56
src/overrides.scss
View File

@ -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";