Minimal coding blog made with React & Markdown

Deployed site: Array of Sunshine

---

Homepage

---

Full article

---

Full article with code examples

---

Pagination

---

Filter term page - click on a tag or writer

Technologies

• React v18.3.1
• React router v6.23.0
• React markdown
• React syntax highlighter
• Redux & toolkit
• Sass

Features

• Easy-to-maintain blog that supports code blocks
• High-performance web app that's lightening-fast
• Each markdown article is converted into a web page
• Minimal & responsive design
• Articles automatically sorted chronologically
• Markdown syntax is removed from the truncated previews to make the homepage look neat
• Recent articles (on full article page) are displayed dynamically
• Pagination is handled dynamically
• Tags and writer collections handled dynamically

Installation

1. Install dependencies npm install
2. Write .md articles in the following format, and add them to src/app/articles

---
title: Why I Quit Hollywood and Started a Web Development Agency
date: January 01, 2016
writer: Lindsay Lohan
tags: Web Design, Celebrity
---

## Article content with markdown syntax

The Hollywood Hills shimmered in the distance, a constant reminder of the life I was leaving behind. Million-dollar contracts, screaming fans, and the intoxicating allure of the red carpet – it all felt like a faded dream. The truth was, the magic had dimmed. I craved a different kind of creation, something where my vision could truly take center stage. So, with a deep breath and a heart full of trepidation, I announced my retirement from acting. Trading scripts for code, I embarked on a new adventure.

3. Run generateARTICLES.js. ARTICLES.json will be overwritten.
4. Run npm start to start the live server or...
5. Run npm run build to build a deployable site

Troubleshooting

• Check the .md metadata is formatted correctly. There is not much scope for error
• The date must be exactly as formatted above
• Tags are comma-separated
• Check that punctuation in the title isn't causing issues with the path. Title cannot contain a colon.

To-Do List

• If you refresh the page while viewing an article, the state will change and the content will change. Install Redux Persist
• Remove unused images & icons
• Remove unused variables and rebuild
• Make metadata / link sharing previews dynamic and enable image preview for all paths. Install Redux Helmet
• Refactor some of the repetition in some of the components.
• add rel="noopener" to Footer links
• Styling of active nav link - make underline further away from text
• Create an Error page / Component
• Style the Error page with useful Back and Home buttons
• Add conditional loading to the article page to handle errors gracefully
• Write a test that checks that the number of objects in articles.json matches the number of .md files in src/articles
• Social icons could be prettier
• Implement loading progress bar at the top of the page
• Style the scroll bar in the theme colours (Maybe - actually this could be annoying)
• Clicking on home seems computationally expensive. Make more efficient, perhaps by expanding the state so that visibleArticles doesn't change when you click a filter term
• Fix: Markdown code blocks: 1st line number is weirdly indented.
• Enable code wrap
• Add subtle fade-in animation to each article preview when scrolling down the homepage
• Add copy buttons for each code block
• Scroll to the top of the element when clicking on a link
• Make the (currently hidden) search bar functional
• Organise article.md files into folders, ensuring they can still be read by main.js
• Prevent incorrect article paths from displaying an empty page
• Fancy bracket animation on site title. CSS Bracket hover animation
• Blur link on mobile after clicking pagination links. Tried event.target.blur() but this didn't work. Other people on stackOverflow mention it also doesn't work for them

To-Do List (Completed)

• Subsequent page URLs
• Clean up Pagination component
• Make the site responsive
• Nest the sass so it's neat
• Add screenshot to ReadMe
• Remove more characters from article slugs: book-review-%7C-clean-code
• Fix about page styling
• Replace the word 'author' with 'writer' everywhere for consistency
• Make FilterTermPage h1 say: 'Articles by' for writers, and 'Articles tagged:' for tags
• Rename TagPage FilterTermPage
• Turn each writer into a page of previews by that writer
• Handle edge cases for NextPrev articles. (Articles now go round in a circle. If you view the first article, the 'previous' article is the last article, and vice versa. Avoids conditional rendering and a styling issue, plus recommends more content)
• Enable dynamic pagination on individual articles (NextPrev)
• Remove spaces from tag slug (book%20review)
• Style filter term page
• Pagination on Tags pages
• Implement dynamic tags section
• Turn tags into links to Tag page
• Clicking on site icon or Home takes you to articles page 1
• Make recent article links work correctly
• Display recent articles dynamically
• Auto update footer copyright year with fallback
• Make markdown links open in a new tab
• Enable preview page sorted by tags
• Design a sidebar and dynamically display other relevant blog posts
• Tidy up Home page function
• Display the three most recent articles in the sidebar that aren't the current article
• Check article bodies for errors
• Enable dynamic pagination
• Add 'newer posts' link, which will be hidden on page one.
• Favicon
• Add line numbers to code blocks
• Turn preview text into a link
• Automatically scroll to the top of the page instantly when clicking on an article link
• Scroll smoothly when clicking on 'top of page' internal link
• Add styling to the markdown so it's consistent
• Generate author links
• Add code syntax highlighting using a library
• Remove the word 'post' from the codebase - I prefer the term 'article' and it should be consistent for clarity
• Display article tags on single article page
• Display article tags on home page
• Limit article previews to 5 most recent on home page
• This article: HTML & CSS by Jon Duckett. Is it still relevant? isn't displaying in full for some reason, possibly because I pasted it from Notion. Fix this error. Solution: wrote a function to find and replace problem characters a weird apostrophe that isn't an apostrope, and an nbsb that looks like a space. Removed question marks from the path
• Add a removeProblemCharacters function to public/main.js to prevent problems in articles.json
• Implement dynamic page title (browser tab) changes
• Buy domain name
• Add a brief site description to About page
• Homepage metadata
• Fix punctuation replacement error. Getting isn"t instead of isn't etc. Fixed! Prettify was messing everything up - solution was to wrap punctuation in backticks.
• Conditional rendering of 'Newer posts' & ''Older posts' nav as when appropriate
• Dynamic page titles when using pagination nav links
• Fix sidebar recent article paths
• Turn each tag into a link to a page of relevant article previews
• Update site title for tags & authors pages

Useful resources

• Building a Markdown React blog - YouTube tutorial All the React content is wildly out of date, but it's still helpful for converting mardown into JSON
• Enabling pagination in React
• Codecademy React Router cheatsheet