Use markdown-to-jsx to parse markdown content for pages.
This commit is contained in:
PA4KEV
parent
b18424d10b
commit
62a7792ecc
@ -35,6 +35,13 @@ Emoji component: [https://medium.com/@seanmcp/%EF%B8%8F-how-to-use-emojis-in-rea
|
||||
|
||||
HTML parsing: `npm install html-react-parser`
|
||||
|
||||
Markdown to JSX documentation:
|
||||
* https://github.com/quantizor/markdown-to-jsx
|
||||
* https://markdown-to-jsx.quantizor.dev/
|
||||
|
||||
Markdown to JSX install: `npm install markdown-to-jsx`
|
||||
|
||||
|
||||
https://www.npmjs.com/package/html-react-parser
|
||||
|
||||
Convert SVG to React component: https://svg2jsx.com/
|
||||
|
||||
12
package-lock.json
generated
12
package-lock.json
generated
@ -13,6 +13,7 @@
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"bootstrap": "5.2.3",
|
||||
"html-react-parser": "^3.0.9",
|
||||
"markdown-to-jsx": "^7.4.1",
|
||||
"node-sass": "^9.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
@ -12484,6 +12485,17 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-to-jsx": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.4.1.tgz",
|
||||
"integrity": "sha512-GbrbkTnHp9u6+HqbPRFJbObi369AgJNXi/sGqq5HRsoZW063xR1XDCaConqq+whfEIAlzB1YPnOgsPc7B7bc/A==",
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 0.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"bootstrap": "5.2.3",
|
||||
"html-react-parser": "^3.0.9",
|
||||
"markdown-to-jsx": "^7.4.1",
|
||||
"node-sass": "^9.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
||||
@ -38,10 +38,10 @@ import FD20231111EN from './Pages/Radio/fielddays/en/20231111'
|
||||
import FD20231111NL from './Pages/Radio/fielddays/nl/20231111'
|
||||
import FD20231230EN from './Pages/Radio/fielddays/en/20231230'
|
||||
import FD20231230NL from './Pages/Radio/fielddays/nl/20231230'
|
||||
import FD20240121EN from './Pages/Radio/fielddays/en/20240121'
|
||||
import FD20240121NL from './Pages/Radio/fielddays/nl/20240121'
|
||||
import fielddaysdata from './Pages/Radio/fielddays/fielddays.json'
|
||||
|
||||
import MarkdownPage from './Pages/markdownPage';
|
||||
|
||||
import Linux from './Pages/Linux/Linux';
|
||||
import Footer from './UI/Footer';
|
||||
|
||||
@ -49,7 +49,6 @@ import BasicPage from './Pages/BasicPage';
|
||||
import Japan from './Japan/Japan';
|
||||
import Japanese from './Pages/Japanese/Japan';
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
@ -86,11 +85,11 @@ function App() {
|
||||
|
||||
<Route exact path='/en/pages/radio/fielddays/20231111' element={<FD20231111EN />}></Route>
|
||||
<Route exact path='/en/pages/radio/fielddays/20231230' element={<FD20231230EN />}></Route>
|
||||
<Route exact path='/en/pages/radio/fielddays/20240121' element={<FD20240121EN />}></Route>
|
||||
<Route exact path='/en/pages/radio/fielddays/20240121' element={<MarkdownPage md='Radio/fielddays/en/20240121.md' />}></Route>
|
||||
|
||||
<Route exact path='/nl/pages/radio/fielddays/20231111' element={<FD20231111NL />}></Route>
|
||||
<Route exact path='/nl/pages/radio/fielddays/20231230' element={<FD20231230NL />}></Route>
|
||||
<Route exact path='/nl/pages/radio/fielddays/20240121' element={<FD20240121NL />}></Route>
|
||||
<Route exact path='/nl/pages/radio/fielddays/20240121' element={<MarkdownPage md='Radio/fielddays/nl/20240121.md' />}></Route>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const FD20240121EN = () => {
|
||||
return (
|
||||
<div className='row'>
|
||||
<div className="sidebar col-3 position-fixed">
|
||||
<div id="list-example" className="list-group">
|
||||
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-intro">intro</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
|
||||
<section className="content-section">
|
||||
<div id="list-intro" className='content-item'>
|
||||
<h1 className="text-primary">Field day - De Groote Peel, Kokmeeuwenweg</h1>
|
||||
<p><i>2024-01-20</i></p>
|
||||
|
||||
<p>This day was a failure to me.</p>
|
||||
<p>I was only to make 1 park-to-park QSO with SP3W/P, in SP-1888 and SP-1878 in Poland.</p>
|
||||
<p>I had to suddenly tear down my station immediately (and rightfully so) by Staatsbosbeheer, the organization that maintains nature preserves in the Netherlands. I was deployed in a vulnerable area. There was a sign, which I did not see. Stupid of me.</p>
|
||||
<p>It was a succesful test for my new antenna deployment though. I made use of a plastic tube, strong screwing pegs and special hooks from Nite Ize.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://www.niteize.nl/p/camjam-spanhaak-zwart-ni-ncj-01-r3">Nite Ize CamJam hooks</a></li>
|
||||
<li><a href="https://www.praxis.nl/bouwmaterialen/waterafvoer/dakgoten-en-accessoires/martens-hwa-buis-60mm-2-meter-grijs/2215168">60mm HWA tube</a></li>
|
||||
<li><a href="https://www.wurmi-shop.de/">Wurmi Erdsandwurm pegs</a></li>
|
||||
</ul>
|
||||
|
||||
<picture>
|
||||
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/setup-w240.webp`} />
|
||||
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/setup-w480.webp`} />
|
||||
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/setup-w800.webp`} />
|
||||
<img alt="antenna setup" src={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/setup-w800.webp`} />
|
||||
</picture>
|
||||
|
||||
<p>The mastholder, bit of a mess currently. I should be able to improve this...</p>
|
||||
|
||||
<picture>
|
||||
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/mast-w240.webp`} />
|
||||
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/mast-w480.webp`} />
|
||||
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/mast-w800.webp`} />
|
||||
<img alt="mast" src={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/mast-w800.webp`} />
|
||||
</picture>
|
||||
|
||||
<p>The sign, that I sadly did not notice. It is important to respect these areas, so pay attention to the surroundings when you will do an activation.</p>
|
||||
<p>"Kwetsbaar gebied" = Vulnerable area, "Geen toegang" = Access denied.</p>
|
||||
|
||||
<picture>
|
||||
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/geen-toegang-w240.webp`} />
|
||||
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/geen-toegang-w480.webp`} />
|
||||
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/geen-toegang-w800.webp`} />
|
||||
<img alt="geen toegang bordje" src={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/geen-toegang-w800.webp`} />
|
||||
</picture>
|
||||
|
||||
<p>The maintainer of Staatsbosbeheer comes to write the fine.</p>
|
||||
|
||||
<picture>
|
||||
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/staatsbosbeheer-w240.webp`} />
|
||||
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/staatsbosbeheer-w480.webp`} />
|
||||
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/staatsbosbeheer-w800.webp`} />
|
||||
<img alt="staatsbosbeheer" src={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/staatsbosbeheer-w800.webp`} />
|
||||
</picture>
|
||||
|
||||
<p>I admit being wrong here, I had no problem accepting the fine. It is important to respect the rules of the park. Make sure you are not in a closed-off area and start putting pegs in the ground. For the ground and the life in it may be disturbed. Do not annoy others with your hobby and respect the rules.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FD20240121EN;
|
||||
34
src/Pages/Radio/fielddays/en/20240121.md
Normal file
34
src/Pages/Radio/fielddays/en/20240121.md
Normal file
@ -0,0 +1,34 @@
|
||||
Field day - De Groote Peel, Kokmeeuwenweg
|
||||
=========================================
|
||||
|
||||
_2024-01-20_
|
||||
|
||||
This day was a failure to me.
|
||||
|
||||
I was only to make 1 park-to-park QSO with SP3W/P, in SP-1888 and SP-1878 in Poland.
|
||||
|
||||
I had to suddenly tear down my station immediately (and rightfully so) by Staatsbosbeheer, the organization that maintains nature preserves in the Netherlands. I was deployed in a vulnerable area. There was a sign, which I did not see. Stupid of me.
|
||||
|
||||
It was a succesful test for my new antenna deployment though. I made use of a plastic tube, strong screwing pegs and special hooks from Nite Ize.
|
||||
|
||||
* [Nite Ize CamJam hooks](https://www.niteize.nl/p/camjam-spanhaak-zwart-ni-ncj-01-r3)
|
||||
* [60mm HWA tube](https://www.praxis.nl/bouwmaterialen/waterafvoer/dakgoten-en-accessoires/martens-hwa-buis-60mm-2-meter-grijs/2215168)
|
||||
* [Wurmi Erdsandwurm pegs](https://www.wurmi-shop.de/)
|
||||
|
||||
|
||||
|
||||
The mastholder, bit of a mess currently. I should be able to improve this...
|
||||
|
||||
|
||||
|
||||
The sign, that I sadly did not notice. It is important to respect these areas, so pay attention to the surroundings when you will do an activation.
|
||||
|
||||
"Kwetsbaar gebied" = _Vulnerable area_, "Geen toegang" = _Access denied_.
|
||||
|
||||
|
||||
|
||||
The maintainer of Staatsbosbeheer comes to write the fine.
|
||||
|
||||
|
||||
|
||||
I admit being wrong here, I had no problem accepting the fine. It is important to respect the rules of the park. Make sure you are not in a closed-off area and start putting pegs in the ground. For the ground and the life in it may be disturbed. Do not annoy others with your hobby and respect the rules.
|
||||
@ -1,70 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const FD20240121NL = () => {
|
||||
return (
|
||||
<div className='row'>
|
||||
<div className="sidebar col-3 position-fixed">
|
||||
<div id="list-example" className="list-group">
|
||||
<a className="list-group-item list-group-item-action list-group-item-primary" href="#list-intro">intro</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
|
||||
<section className="content-section">
|
||||
<div id="list-intro" className='content-item'>
|
||||
<h1 className="text-primary">Velddag - De Groote Peel, Kokmeeuwenweg</h1>
|
||||
<p><i>2024-01-20</i></p>
|
||||
|
||||
<p>Deze dag was een mislukking voor me.</p>
|
||||
<p>Ik heb slechts 1 park-to-park QSO kunnen maken met SP3W/P, in SP-1888 en SP-1878 in Polen.</p>
|
||||
<p>Ik moest plotseling mijn opstelling direct (en terecht) verwijderen van Staatsbosbeheer. Ik stond opgesteld op een kwetsbaar gebied. Er stond een bordje, maar helaas had ik het zelf niet gezien, stom van me.</p>
|
||||
<p>Het was wel een test voor mijn nieuwe antenne-opstelling. Ik had een plastic buis gebruikt met sterke haringen en speciale spanhaken van Nite Ize.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://www.niteize.nl/p/camjam-spanhaak-zwart-ni-ncj-01-r3">Nite Ize CamJam spanhaken</a></li>
|
||||
<li><a href="https://www.praxis.nl/bouwmaterialen/waterafvoer/dakgoten-en-accessoires/martens-hwa-buis-60mm-2-meter-grijs/2215168">60mm HWA buis</a></li>
|
||||
<li><a href="https://www.wurmi-shop.de/">Wurmi Erdsandwurm haring</a></li>
|
||||
</ul>
|
||||
|
||||
<picture>
|
||||
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/setup-w240.webp`} />
|
||||
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/setup-w480.webp`} />
|
||||
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/setup-w800.webp`} />
|
||||
<img alt="antenna setup" src={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/setup-w800.webp`} />
|
||||
</picture>
|
||||
|
||||
<p>De masthouder, een provisorische opstelling. Moet veel beter kunnen denk ik...</p>
|
||||
|
||||
<picture>
|
||||
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/mast-w240.webp`} />
|
||||
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/mast-w480.webp`} />
|
||||
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/mast-w800.webp`} />
|
||||
<img alt="mast" src={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/mast-w800.webp`} />
|
||||
</picture>
|
||||
|
||||
<p>Het bordje, dat ik helaas niet had opgemerkt. Het is belangrijk om deze gebieden te respecteren, dus let goed op als je een activatie gaat doen.</p>
|
||||
|
||||
<picture>
|
||||
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/geen-toegang-w240.webp`} />
|
||||
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/geen-toegang-w480.webp`} />
|
||||
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/geen-toegang-w800.webp`} />
|
||||
<img alt="geen toegang bordje" src={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/geen-toegang-w800.webp`} />
|
||||
</picture>
|
||||
|
||||
<p>De handhaver van Staatsbosbeheer komt de boete schrijven.</p>
|
||||
|
||||
<picture>
|
||||
<source media="(max-width: 799px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/staatsbosbeheer-w240.webp`} />
|
||||
<source media="(min-width: 800px) and (max-width: 1199px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/staatsbosbeheer-w480.webp`} />
|
||||
<source media="(min-width: 1200px)" srcset={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/staatsbosbeheer-w800.webp`} />
|
||||
<img alt="staatsbosbeheer" src={`${process.env.PUBLIC_URL}/images/radio/velddagen/2024-01-21/staatsbosbeheer-w800.webp`} />
|
||||
</picture>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FD20240121NL;
|
||||
32
src/Pages/Radio/fielddays/nl/20240121.md
Normal file
32
src/Pages/Radio/fielddays/nl/20240121.md
Normal file
@ -0,0 +1,32 @@
|
||||
Velddag - De Groote Peel, Kokmeeuwenweg
|
||||
=======================================
|
||||
|
||||
_2024-01-20_
|
||||
|
||||
Deze dag was een mislukking voor me.
|
||||
|
||||
Ik heb slechts 1 park-to-park QSO kunnen maken met SP3W/P, in SP-1888 en SP-1878 in Polen.
|
||||
|
||||
Ik moest plotseling mijn opstelling direct (en terecht) verwijderen van Staatsbosbeheer. Ik stond opgesteld op een kwetsbaar gebied. Er stond een bordje, maar helaas had ik het zelf niet gezien, stom van me.
|
||||
|
||||
Het was wel een test voor mijn nieuwe antenne-opstelling. Ik had een plastic buis gebruikt met sterke haringen en speciale spanhaken van Nite Ize.
|
||||
|
||||
* [Nite Ize CamJam spanhaken](https://www.niteize.nl/p/camjam-spanhaak-zwart-ni-ncj-01-r3)
|
||||
* [60mm HWA buis](https://www.praxis.nl/bouwmaterialen/waterafvoer/dakgoten-en-accessoires/martens-hwa-buis-60mm-2-meter-grijs/2215168)
|
||||
* [Wurmi Erdsandwurm haring](https://www.wurmi-shop.de/)
|
||||
|
||||
|
||||
|
||||
De masthouder, een provisorische opstelling. Moet veel beter kunnen denk ik...
|
||||
|
||||
|
||||
|
||||
Het bordje, dat ik helaas niet had opgemerkt. Het is belangrijk om deze gebieden te respecteren, dus let goed op als je een activatie gaat doen.
|
||||
|
||||
|
||||
|
||||
De handhaver van Staatsbosbeheer komt de boete schrijven.
|
||||
|
||||
|
||||
|
||||
Ik geef toe dat ik hier fout was en had geen probleem met het accepteren van deze boete. Het is belangrijk om de regels van het park te respecteren. Dus voordat je haringen de grond in slaat, bedenk dat je de bodem en het leven daarmee verstoord. Zorg dat je geen last bent tot anderen met je hobbies en respecteer de regels.
|
||||
53
src/Pages/markdownPage.js
Normal file
53
src/Pages/markdownPage.js
Normal file
@ -0,0 +1,53 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
|
||||
const MarkdownPage = ({ md }) => {
|
||||
const file_name = md;
|
||||
const [markdownContent, setPost] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
import(`./${file_name}`)
|
||||
.then(res => {
|
||||
fetch(res.default)
|
||||
.then(res => res.text())
|
||||
.then(res => setPost(res))
|
||||
.catch(err => console.log(err));
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
});
|
||||
|
||||
const MyArticle = ({ children }) => <article className="main-page">{children}</article>
|
||||
|
||||
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>)
|
||||
}
|
||||
|
||||
return (
|
||||
<Markdown options={{
|
||||
wrapper: MyArticle,
|
||||
overrides: {
|
||||
h1: {
|
||||
component: MyParagraph,
|
||||
props: {
|
||||
className: 'text-primary',
|
||||
},
|
||||
},
|
||||
img: {
|
||||
component: MyImage
|
||||
}
|
||||
},
|
||||
}}>
|
||||
{markdownContent}
|
||||
</Markdown>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarkdownPage;
|
||||
@ -16,6 +16,7 @@ const Footer = () => {
|
||||
<a className={`link-${theme}`} href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> and
|
||||
<a className={`link-${theme}`} href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> on
|
||||
<a className={`link-${theme}`} href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a> cloud droplets.</p>
|
||||
<p className="small">Content is parsed by: <a className={`link-${theme}`} href="https://github.com/quantizor/markdown-to-jsx" target="_blank" rel="noopener noreferrer">markdown-to-jsx</a></p>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
@ -15,6 +15,10 @@ $theme-colors: (
|
||||
// Import Bootstrap and its default variables
|
||||
@import '~bootstrap/scss/bootstrap.scss';
|
||||
|
||||
.main-page {
|
||||
padding: 0px 40px 0px 40px;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
background-color: map-get($theme-colors, "dark") !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user