kevin/portfolio
1
0
Fork 0
Code

Show a page not found in set language if a markdown content does not exist.

Browse Source
This commit is contained in:
Kevin Matsubara 2025-02-21 21:17:39 +01:00
parent 0112d23229
commit 4de65c1fe5
1 changed files with 61 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/Pages/markdownPage.js
View File

@ -4,6 +4,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/HEAD/AVAILABLE_STYLES_HLJS.MD
import { docco, dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import { useTheme } from '../ThemeContext';
import { getLanguage } from '../Language/Language';
const MySection = ({ children }) => {
return (<section>{children}</section>);
@ -98,6 +99,9 @@ const MyTable = ({ children }) => {
const MarkdownPage = ({ md }) => {
const [markdownContent, setPost] = useState('');
const [pageNotFound, setPageNotFound] = useState(false);
const [errorPageContent, setErrorPage] = useState('');
const language = getLanguage();
// causes 3 calls somehow...
useEffect(() => {
@ -108,46 +112,67 @@ const MarkdownPage = ({ md }) => {
.then(res => setPost(res))
.catch(err => console.log(err));
})
.catch(err => console.log(err));
.catch(err => {
console.log(err);
setPageNotFound(true);
import(`./Other/${language}/page-not-found.md`)
.then(res => {
fetch(res.default)
.then(res => res.text())
.then(res => setErrorPage(res))
.catch(err => console.log(err));
})
.catch(err => console.log(err));
});
});
return (
<Markdown
options={{
wrapper: MySection,
overrides: {
h1: {
component: MyParagraph,
props: {
className: 'text-primary',
if (pageNotFound) {
return (
<Markdown>
{errorPageContent}
</Markdown>
);
}
else {
return (
<Markdown
options={{
wrapper: MySection,
overrides: {
h1: {
component: MyParagraph,
props: {
className: 'text-primary',
},
},
h4: {
component: Myh4
},
h5: {
component: Myh5
},
img: {
component: MyImage
},
code: {
component: MyCodeBlock
},
table: {
component: MyTable
},
Jps: {
component: Jps
},
Furigana: {
component: Furigana
}
},
h4: {
component: Myh4
},
h5: {
component: Myh5
},
img: {
component: MyImage
},
code: {
component: MyCodeBlock
},
table: {
component: MyTable
},
Jps: {
component: Jps
},
Furigana: {
component: Furigana
}
},
}}>
{markdownContent}
</Markdown>
)
}}>
{markdownContent}
</Markdown>
)
}
}
export default MarkdownPage;