Web Development Notes

A website for all kind of notes about web development.

Live preview

Table of Contents

• Requirements
  • Node js LTS
• Installation
  • Development
  • Install Dependency
  • Development Server
  • Production
  • Deployment
• Usage
  • Feature overview
  • How to create new notes
  • Syntax highlighting for code block

Requirements

• Node js LTS (Node.js)

Node js LTS

Assuming you have Node Version Manager installed

$ nvm install --lts

Installation

Development

Clone the repository

$ git clone https://github.com/fpelletier-gh/web-development-notes

Change directory

$ cd web-development-notes

Install Dependency

Install node module

$ npm install

Development Server

Launch the development server

$ npm run dev

Production

Create the production build

$ npm run build

Deployment

Some Deployment options

• Vercel (Recomended)
• Netlify

Usage

Feature overview

• The /posts folder is where all the notes are located
• It will recursively search in subfolder for all .mdx (MDX) and create pages for every files
• The URL will match the folder structure
• The folder structure will represent the side menu navigation (the subfolder will become submenu)
• Snake_case is required as a naming convention for file and folder name
• File and folder name will be converted to title case and "and" will be converted to "&"
• Styling for the generated pages will be done automatically
• Code block will have syntax highlighting (more info)

How to create new notes

Create a .mdx(MDX) file in the /posts folder.

The side menu navigation will be generated from the folder structure inside the /posts directory.

ex. /posts/javascript/algorithm_and_data-structure.mdx will create a submenu named Javascript with a link named Algorithm & Data-Structure inside it

Syntax highlighting for code block

To enable syntax highlighting for code block in .mdx files you need to specify the language

ex. The following code block will have syntax highlighting enable for javascript

```js
console.log("Syntax highlighting for javascript")

```