Dependencies

• yarn
• TypeScript
• Next.js
• Netlify
• MDX

Getting started

Install dependencies:

yarn

Spin up development server:

yarn dev

Note: The local development server will publish to the live site. Do not publish anything locally that you don't want to go live!

View the CMS interface at http://localhost:3000/admin/index.html.

Debugging

You can use the provided Visual Studio Code configs to debug both the dev server and client.

Attach the VSCode Debugger to the Dev Server

1. Use Visual Studio Code to set debugger breakpoints.
2. Start yarn dev:inspect in a terminal.
3. In Visual Studio Code's Run and Debug sidebar (Command + Shift + D), select the Dev Server debugger profile from the menu and start it.
   • Note: You can click the "…" menu and choose "Start Additional Session" to run multiple debugger sessions simultaneously.
4. Perform an action (such as loading a web page in-browser) which will trigger the breakpoint/s.
5. Wait for the VSCode debugger to pause on your breakpoint/s.

Launch and Debug Google Chrome or Microsoft Edge

1. Use Visual Studio Code to set debugger breakpoints.
2. Start yarn dev:inspect in a terminal.
3. In Visual Studio Code's Run and Debug sidebar (Command + Shift + D), select either the [Chrome] Launch Dev Client or [Edge] Launch Dev Client debugger profile from the menu and start it.
   • Note: You can click the "…" menu and choose "Start Additional Session" to run multiple debugger sessions simultaneously.
4. Once the browser launches, perform an action (such as loading the page or clicking on an element) which will trigger the breakpoint/s.
5. Wait for the VSCode debugger to pause on your breakpoint/s.

Demo Video: VSCode Dev Server and Client Debugging

VSCode.Dev.Server.and.Client.Debugging.-.600kbps.mp4

Scripts

Processing Headshots

To preprocess headshots for the testimonials section of the website, you'll need to make sure you have imagemagicks mogrify command installed (on macOS, this can be installed via homebrew with brew install imagemagick).

Create a directory somewhere with your input files (say, ~/headshots). Then run yarn process:headshots ~/headshots/*, which will process your input files (desaturate, adjust levels, resize, crop, and strip metadata) and output them in public/images, where they will be available to set as headshots for testimonials!

Processes

Updating Holiday Calendar

To update the holiday calendar download, update the .ics files in public/ and update the resource links in src/pages/resources.mdx.

See Also

• Debugging in Visual Studio Code
• Advanced Features: Debugging | Next.js
• vscode-js-debug - VSCode's built-in, DAP-based JavaScript debugger for Node.js, Chrome, Edge, etc.

References

• Netlify CMS Documentation
• Building a Markdown blog with Next 9.4 and Netlify
• Hugo Theme - Codex
• Next.js Starter Template for TypeScript
• Building Blog with NextJS and Netlify CMS
• Unicons

License

MIT