/chris.lu

My Blog (chris.lu) 🚀

Primary LanguageMDXOtherNOASSERTION

chris.lu banner

chris.lu

Hello World! 👋

This repository contains the source code for my blog (chris.lu)

On chris.lu, you will find my tutorials and can learn more about me

Technologies used

During the development of the blog, I wrote a "Next.js static MDX blog" tutorial that showcases most of the technologies that I used

The framework I used is Next.js 14 with React 18 (I plan on upgrading to Next.js 15 and React 19 as soon as the first stable versions get released and will update my tutorial accordingly)

I added MDX support to be able to create content using next/mdx. I then also used several remark and rehype plugins and even built two myself, rehype-github-alerts and remark-table-of-contents

I had a lot of fun doing my WebGL header animation using react-three-fiber (a React renderer for three.js)

I also added a jukebox on top using my web-audio-api-player and added a dynamic waveform using my waveform-visualizer and waveform-data-generator packages

Feedback & bug reports

If you have feedback or want to discuss something, please use the chris.lu github discussions, and if you find a bug, please report it using the github issues

Scripts

npm run dev: launch a dev server instance
npm run dev-ssl: same as dev but with a self signed SSL certificate for local HTTPS requests
npm run build: production build
npm run build-debug: production build with more verbose output, useful to debug builds
npm run start: start production server
npm run next-lint: backup of the default next.js lint command (use the next command instead)
npm run lint: custom linting script for code and MDX content
npm run lint-nocache: same as previous but without using the cache, useful when debugging
npm run lint-debug: linting command but more verbose output
npm run lint-fix: linting command that also attempts to automatically fix problems
npm run info: the default next.js script to get some info about the project
npm run check-urls: check if URLs in documents are alive or not, this linting is seperate from the main linting script so that it can be used sporadically, as it makes lots of calls to 3rd party URLs to check if they are alive, it does not run during the build process so that a unreachable URL of a third party won't break the build

License

Link to the license document