Now the code blocks are not highlighted in any way.

I found out this package which would probably be good: https://rehype-pretty.pages.dev/ https://github.com/rehype-pretty/rehype-pretty-code

• Check out the package in depth
• Install and setup the package to be used

The search should filter out posts -- I need to implement good matching algorithm for this one though.

Similar as there is in the post footer currently

We want to deploy our application on GitHub releases to Vercel. Also each push to master should create a new staging release to the staging environment in Vercel

• Build pipeline for release
• Build pipeline for push on master

Create somekind of About page to introduce myself

Now the featured post styling breaks a little on wide screen width

Let's do a few things to optimize the image user experience.

Make the image placeholder automatic and blurred -- for this we have to somehow create a blurred base64 encoded image that is super small to be served as the placeholder image while loading the actual image. SEE: https://nextjs.org/docs/app/api-reference/components/image#blurdataurl

Update: We can use something like https://github.com/cloudinary/js-url-builder to programmatically build our Cloudinary URL and for the placeholder we can fetch the image using w_10,q_auto,f_auto,e_blur:1000 (adjust the width, but Next recommended something super small). Then we can base64 encode this url and serve the base64 encoded image URL on the blurDataURL attribute of Next Image component.

We wan't to serve correct sized images for users with different size screen. Also we are using cloudinary so we want to automate the Cloudinary image url using loaders. SEE: https://nextjs.org/docs/app/building-your-application/optimizing/images#loaders

Steps

• Make the image placeholder automatic and blurred.
• Create dynamic ImageProps for responsive image optimization

The old posts must be transferred someway from WordPress to Markdown files.

• Find a way to automatically do the Migration
• Fix code highlighting
• Add post images into cloudinary and fix image sources
• Find a way to display videos -- Maybe needs another rehype plugin?
• Add missing cover images to posts without them

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	eslint-config-standard-with-typescript

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): replace dependency eslint-config-standard-with-typescript with eslint-config-love ^43.0.1

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@types/node, @types/react, eslint-config-next, husky, next)
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-airbnb-typescript to v18
• chore(deps): update dependency eslint-plugin-n to v17
• chore(deps): update dependency eslint-plugin-promise to v7
• chore(deps): update typescript-eslint monorepo to v8 (major) (@typescript-eslint/eslint-plugin, typescript-eslint)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

MDX will allow for better blog experience as I can just code some React stuff and the users can interact with the code instead of just reading code blocks

We need to add new routes to the sitemap file also such as '/about', '/contact', '/posts' once the routes and pages are finished for these.

Now the sitemap.js file has invalid path for the blog posts

SEE documentation for the sitemap:
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Back to top button that is sticky and will take the reader to the top of the page

The page.tsx in /app root is missing generateMetadata.

Also implement some OG shit

The single post page is now lacking alot of features I want to bring in. Currently it has some basic styles from the Tailwind typography plugin and basic functionality. However there is alot of things to implement.

• Add post metadata to the start of the page along with the cover image
• Allow for raw HTML in Markdown -- this is for videos mostly
• At the bottom of the page suggest similar posts around the same keywords or categories -- for this some kind of algorithm needs to be implemented
• #14

• SC 1.4.11 - Non-text Contrast (Level AA): The CTA color #6ae255 fails contrast requirement of 3:1, this was conscious decision.
• (PERHAPS) SC 2.4.7 - Focus Visible (Level AA) and SC 1.3.1 Info and Relationships (Level A): The main menu is inside a dialog element which might prevent the menu to be opened using the menu shortcut using assistive technology.
• SC 1.4.11 - Non-text Contrast (Level AA): Focus indicators fail to provide sufficient color contrast on certain elements on the page.

The hero section should include something about the blogs content etc. H1 tag etc etc.