Blog Component
The component content will be based on Markdown files to make it natural for a developer to maintain.
the markdown files will be loaded and styled, added with a Copy-to-Clipboard button and a better code area styling necessary for a dev blog.
Roadmap:
- Create a new Page and instrument it into the website menu, include basic styling.
- create Article component, load the markdown and apply basic styling
- Add Code Component to render instead of the code markdown block.
- Add Copy-Paste Icon and apply functionality.
- Test the look&feel of a 'Dark' Mode
Stories:
Blog Page Skeleton
- Add the menu item "Blog"
{
label: 'Blog',
path: '/blog',
}- Add the page component
- Add basic styling
Create Article component
- Add Article component to show a single post
Loading Markdown
-
Load the markdown using markdown-to-jsx Library
-
Extract hidden fields from the Markdown
Markdown do not have a well defined standard for non visible metadata, one option is to hide them as follows: ``` [_metadata_:
then by using this regex we are able to extract them out: ``` const metadataRegex = /_metadata_:(?
Afterwards we can use the function to extend the markdown and return a more elaborated object holding the markdown, word count and additional metadata fields: ```javascript const collectMetatada = (markdown) => { const count = markdown.split(/\s+/) .map((s) => s.replace(/\W/g, '')) .filter((s) => s.length).length; const metadata = [...markdown.matchAll(metadataRegex)] .reduce((acc, match) => ({ ...acc, [match[1]]: match[4] }), {}); return { ...metadata, wordcount: count, markdown }; }; ```
- Place inside Article Component
- Style the Article frame
