Preview to main

README.md

@@ -1 +1,50 @@
-coming soon...
+<a href="https://chris.lu">
+  <picture>
+    <source srcset="https://raw.githubusercontent.com/chrisweb/chrisweb/main/public/chris-lu_banner.avif"
+      type="image/avif" />
+    <source srcset="https://raw.githubusercontent.com/chrisweb/chrisweb/main/public/chris-lu_banner.webp"
+      type="image/webp" />
+    <img src="https://raw.githubusercontent.com/chrisweb/chrisweb/main/public/chris-lu_banner.jpg"
+      alt="chris.lu banner" />
+  </picture>
+</a>
+
+# chris.lu
+
+Hello World! 👋 
+
+This repository contains the source code for my blog ([chris.lu](https://chris.lu))
+
+On [chris.lu](https://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](https://chris.lu/web-development/tutorials/next-js-static-mdx-blog) that showcases most of the technologies that I used
+
+The framework I used is [Next.js 14](https://github.com/vercel/next.js) with [React 18](https://github.com/facebook/react) (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](https://mdxjs.com/) 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
+](https://github.com/chrisweb/rehype-github-alerts) and [remark-table-of-contents
+](https://github.com/chrisweb/remark-table-of-contents)
+
+I had a lot of fun doing my [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) header animation using [react-three-fiber](https://github.com/pmndrs/react-three-fiber) (a React renderer for [three.js](https://github.com/mrdoob/three.js))
+
+I also added a jukebox on top using my [web-audio-api-player](https://github.com/chrisweb/web-audio-api-player) and added a dynamic waveform using my [waveform-visualizer](https://github.com/chrisweb/waveform-visualizer) and [waveform-data-generator](https://github.com/chrisweb/waveform-data-generator) packages
+
+## Feedback & bug reports
+
+If you have feedback or want to discuss something, please use the [chris.lu github discussions](https://github.com/chrisweb/chris.lu/discussions), and if you find a bug, please report it using the [github issues](https://github.com/chrisweb/chris.lu/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  

app/web_development/page.mdx

@@ -32,6 +32,13 @@ export const metadata = {
 </aside>
 <section id="web_development" className="middle">
     <h1 className="h1">Web development&nbsp;<ImageAnimatedEmoji gifStaticImport={gifRocketStaticImport} webpStaticImport={webpRocketStaticImport} alt="animated emoji flying rocket" /></h1>
+    ## Tutorials
+    <div className="grid">
+        <Link href="/web_development/tutorials/next-js-static-mdx-blog" className={styles.preview}>
+            ![voodoo lady mixing potions in a big cauldron, it represents a dev using different packages to build a project using an IDE](../../public/assets/images/app/web_development/tutorials/next-js-static-mdx-blog/banner.png '{ card }')
+            <span className={styles.title}>Next.js / React static MDX Blog</span>
+        </Link>
+    </div>
     ## Posts
     <div className="grid">
         <Link href="/web_development/posts/road-to-react-19-next-js-15" className={styles.preview}>

app/web_development/tutorials/next-js-static-mdx-blog/page.mdx

@@ -0,0 +1,99 @@
+---
+title: Next.js static MDX blog - Tutorial
+keywords: ['Next.js', 'Nextjs', 'static', 'mdx', 'blog', 'tutorial', 'react', 'ssg']
+published: 2024-07-01T11:22:33.444Z
+modified: 2024-07-01T11:22:33.444Z
+permalink: https://chris.lu/web_development/tutorials/next-js-static-mdx-blog
+section: Web development
+---
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBug, faComments } from '@fortawesome/free-solid-svg-icons'
+import VideoScroll from '@/components/video/Scroll'
+import { sharedMetaDataArticle } from '@/shared/metadata-article'
+
+export const metadata = {
+    title: frontmatter.title,
+    keywords: frontmatter.keywords,
+    alternates: {
+        canonical: frontmatter.permalink,
+    },
+    openGraph: {
+        ...sharedMetaDataArticle.openGraph,
+        images: [{
+          type: "image/png",
+          width: 1200,
+          height: 630,
+          url: '/web_development/og/tutorials_next-static-mdx-blog/opengraph-image'
+        }],
+        url: frontmatter.permalink,
+        section: frontmatter.section,
+        publishedTime: frontmatter.published,
+        modifiedTime: frontmatter.modified,
+        tags: frontmatter.keywords,
+    },
+}
+
+%toc%
+
+<article>
+
+# Tutorial: Next.js static MDX blog
+
+<VideoScroll />
+
+I tried to make this tutorial as beginner-friendly as possible. If, however you have a question feel free to ask on the <FontAwesomeIcon icon={faComments} size="1x" color='rgb(255, 0, 170)' /> [discussion](https://github.com/chrisweb/chris.lu/discussions) page and if you find a bug please report it using the <FontAwesomeIcon icon={faBug} size="1x" color='rgb(255, 0, 170)' /> [issues](https://github.com/chrisweb/chris.lu/issues)
+
+In this tutorial, we will:
+
+* create a fully static site using the Next.js v14.x (compatible with v13.x) app directory
+* create several components using React v19.x (compatible with v18.x)
+* add support for MDX content formatting via the @next/mdx package
+* add a plugin to generate a table of contents for each post automatically
+* add another plugin that will handle code block styling based on your favorite VSCode template
+* add yet another plugin that will allow us to GitHub like alerts to our content
+* add linting tools for both the code of the project and the content (markdown lint)
+* add a CI/CD pipeline using Vercel.com so that every time we commit code to our GitHub repository, it gets automatically deployed (staging/production)
+* add bugs monitoring and Content Security Policy (CSP) violations logging using Sentry.io
+* install useful extensions for VSCode and learn how to use them
+
+> [!NOTE]  
+> I made this tutorial with total beginners in mind. However, if you are already an experienced Next.js dev, then there are some chapters you may want to skip
+
+## Table of Contents
+
+* [Prerequisites](/web_development/tutorials/next-js-static-mdx-blog/prerequisites)
+
+> [!NOTE]  
+> Today is the 13th of august 2024 and I have release the first page of the tutorial, the next pages listed here are almost done, I just need to finish setting the metadata, doing some spell checking, verify that the code works as intended, ... I will release the next pages over the course of the next one to two weeks, every time a page is done I will release it
+
+* Project setup and first commit
+* Typescript plugin and typed routes
+* Next.js configuration
+* First Typescript page
+* package.json scripts
+* CI/CD pipeline setup
+* Error handling and logging
+* Content Security Policy (CSP)
+* Next.js MDX setup
+* First MDX page and understanding static rendering
+* React in MDX and MDX in react
+* Linting setup using ESLint
+* Linting MDX using remark-lint
+* Linting in VSCode using ESLint and MDX extensions
+* Styling and CSS
+* Navigation and next/link
+* Navigation styling and next/font
+* The mdx-components file
+* Optimizing using next/link
+* Optimizing using next/image
+* MDX plugins
+* Code highlighting plugin
+* Headings ID plugin
+* Table of Contents plugin
+* GitHub flawored markdown plugin
+* GitHub like alerts plugin
+* Metadata (tsx and mdx pages)
+* Frontmatter plugin
+
+</article>

app/web_development/tutorials/next-js-static-mdx-blog/prerequisites/page.mdx

@@ -0,0 +1,102 @@
+---
+title: Prerequisites - Tutorial
+description: Prerequisites - Next.js static MDX blog | www.chris.lu Web development tutorials
+keywords: ['Prerequisites', 'GitHub', 'git', 'VSCode', 'Node.js', 'windows', 'linux', 'mac osx']
+published: 2024-07-01T11:22:33.444Z
+modified: 2024-07-01T11:22:33.444Z
+permalink: https://chris.lu/web_development/tutorials/next-js-static-mdx-blog/prerequisites
+section: Web development
+---
+
+import { sharedMetaDataArticle } from '@/shared/metadata-article'
+import Breadcrumbs from '@/components/tutorial/Breadcrumbs'
+import Pagination from '@/components/tutorial/Pagination'
+
+export const metadata = {
+    title: frontmatter.title,
+    description: frontmatter.description,
+    keywords: frontmatter.keywords,
+    alternates: {
+        canonical: frontmatter.permalink,
+    },
+    openGraph: {
+        ...sharedMetaDataArticle.openGraph,
+        images: [{
+          type: "image/png",
+          width: 1200,
+          height: 630,
+          url: '/web_development/og/tutorials_next-static-mdx-blog/opengraph-image'
+        }],
+        url: frontmatter.permalink,
+        section: frontmatter.section,
+        publishedTime: frontmatter.published,
+        modifiedTime: frontmatter.modified,
+        tags: frontmatter.keywords,
+    },
+}
+
+%toc%
+
+<article>
+
+<Breadcrumbs list={[
+    { label: 'Web development tutorials', href: '/web_development' },
+    { label: 'Next.js static MDX blog', href: '/web_development/tutorials/next-js-static-mdx-blog' },
+]} />
+
+# Prerequisites
+
+> [!NOTE]  
+> The Next.js static MDX website **Prerequisites** chapter is for beginners
+>  
+> For example, if you already have a GitHub account, then you can skip that step, or if you prefer to install another IDE than the one I suggest, then feel free to do so
+
+First, we need a **GitHub account** to store our code in a GitHub repository (if you prefer to use another service like [GitLab](https://about.gitlab.com/) or [Bitbucket](https://bitbucket.org/), feel free to do so), which will make it easy to access your code on multiple devices and will also allow us to share your code with others
+
+Later on, we will use GitHub to sign in to services like Vercel.com to set up an automatic CI/CD pipeline that will automatically deploy our code and sign up for a Sentry.io to add error monitoring so that when a user encounters a bug, it gets listed with a stack trace in Sentry.io.
+
+* [create a GitHub account](/web_development/posts/github)
+
+After creating a GitHub account, you need to **create a repository** on GitHub for our Code:
+
+* [create a new GitHub repository](/web_development/posts/github#create-a-repository)
+
+Next, we need to **install git**, which is a version control tool that VSCode will use:
+
+* [install git](/web_development/posts/git)
+
+Next, to be able to write code, we need an Integrated Development Environment (IDE)
+
+My preferred IDE to write Javascript (Typescript) code is VSCode (Visual Studio Code):
+
+* [install VSCode](/web_development/posts/vscode)
+
+Now we need to sign in to our GitHub account in VSCode and use the VSCode source control tool to make a local clone of our GitHub repository:
+
+* [clone GitHub repository in VSCode](/web_development/posts/vscode#cloning-your-github-repository-in-vscode)
+
+To be able to create a Javascript backend and run our Javascript code locally, we need to install the Node.js runtime:
+
+* [install Node.js (and npm)](/web_development/posts/node-js)
+
+> [!NOTE]  
+> The **Next.js 14** "app directory features" require Node.js v18.17 or later, so if you skipped the Node.js installation document because you already have Node.js installed, then just make sure you have a version installed that is high enough
+>  
+> To do that, you can, for example, use the following command: `node -v`
+
+## The road to React 19 and Next.js 15
+
+React and Next.js have evolved a lot lately 🚀
+
+The most notable additions are **server components** and **(server) actions**. With those new features came a lot of changes for how we devs build Next.js apps/websites, which is why I did a separate blog post ["The road to React 19 and Next.js 15"](/web_development/posts/road-to-react-19-next-js-15) where I list what changed during the last +-3 years in the React and Next.js ecosystem
+
+If you have not built a project with Next.js 13/14/15 and React 18/19 yet, I recommend you check it out, but if you are already an expert, feel free to skip it 😉
+
+> [!MORE]  
+> [chris.lu "The road to React 19 and Next.js 15" post](/web_development/posts/road-to-react-19-next-js-15)  
+
+<Pagination
+    next={{ label: 'Project setup and first commit', href: '/web_development/tutorials/next-js-static-mdx-blog/project-setup-and-first-commit' }}
+/>
+
+</article>