A walkthrough of some of the pitfalls and ways to solve them.
Accessing the current article metatdata
Because server components do not have access to the router object, or obvious way to access the current route path, another approach is needed.
One way is to use a client component to display the metadata in the heading.
Code syntax highlighting
After trying a few options I settled on Rehype Pretty Code as it ticked a lot of the boxes I was looking for:
- Build time compilation
- Language support
- Line numbers
- Highlight inline code
- Multiple themes (dark/light)
The documentation site uses Tailwind and the config file is a good example of how to configure the plugin.
Glsl rendering
Use client component and import the GlslCanvas library dynamically to avoid SSR issues as it uses window.