nextjs-site

The current website for jenntesolin.com — built with Next.js and React, with older notes now migrated to MDX.

🚧 This site has been significantly reworked. Content migration is complete, the domain is still being transferred, and a few improvements are still on the way.

---

Table of Contents

• Requirements
• Version Information
• Current Stack
• Quick Start
• Linting
• Content Structure
• Notes and MDX
• Search, Sitemap, and Metadata
• Headers and Caching
• Project Notes
• License
• humans.txt
• Acknowledgments

Requirements

• Node.js: v25.9.0
• npm: 11.12.1

Version Information

• Next.js: 16.x
• React / React DOM: 19.x
• Pico CSS: 2.x
• MDX: 3.x
• ESLint: 9.x

Current Stack

This site currently uses:

• Next.js for routing and page generation
• React for components
• MDX for notes and older post content
• Pico CSS (classless) for base styling
• Custom CSS in styles/style.css for layout and site-specific tweaks
• ESLint for linting

Styling Notes

The site is being rebuilt with a simple, accessibility-first styling approach.

Base classless styling comes from styles/pico.classless.min.css, while most custom styling changes should be made in styles/style.css.

In general:

• Use Pico CSS for sensible default HTML styling.
• Use styles/style.css for custom layout and component tweaks.
• Avoid overcomplicating page-level styles unless needed.

Quick Start

1. Clone the repo:

   git clone https://github.com/jennifert/nextjs-site.git
   cd nextjs-site

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build the site:

   npm run build

5. Start the production server locally:

   npm run start

Linting

Run ESLint with:

npm run lint

Content Structure

This project currently uses a mix of standard Next.js pages and MDX content.

Main pages

Top-level pages live in pages/, for example:

• pages/index.js
• pages/about.js
• pages/projects.js
• pages/photography.js
• pages/notes.js

Notes content

Notes are stored in:

content/notes/*.mdx

Supporting note utilities live in:

• lib/notes.js
• pages/notes/[slug].js

Notes and MDX

Older post content is being migrated from .js page files to .mdx.

Each note should include frontmatter similar to:

---
title: "Example Note Title"
description: "A short description for search, metadata, and previews."
date: "2026-04-20"
tags: ["tag1", "tag2"]
---

Notes are used by:

• the notes index page
• the site search
• the sitemap
• structured data / page metadata

Available MDX components

Notes can also use a small set of custom components when needed:

• Image — wraps next/image for screenshots and note images
• SafeIframe — wraps iframe embeds in a reusable container for safer styling and future tweaks

These components are mapped in pages/notes/[slug].js.

Search, Sitemap, and Metadata

Search and sitemap pages currently rely on generated metadata and site content.

Files commonly involved include:

• public/meta.json
• public/sitemap.xml
• public/feed.xml

As the site is updated, metadata generation should account for both:

• standard pages in pages/
• MDX notes in content/notes/

Headers and Caching (DigitalOcean App Platform)

To help avoid overly aggressive caching on deployed pages, a _headers file can be included in the output.

Example: public/_headers

/*
  Cache-Control: no-cache, no-store, must-revalidate
  Pragma: no-cache
  Expires: 0

This helps ensure static pages are refreshed more consistently after deploys.

Project Notes

See TODO.md for the current task list and migration notes, and CHANGELOG.md for recent project updates.

License

• Code is licensed under the MIT License
• Content (articles, notes, and media) is licensed under CC BY-NC-SA 4.0

humans.txt

For developer credits and site stack details, see public/humans.txt

Acknowledgments

• Shields.io for README badges
• MDX for content authoring
• Next.js for the site framework
• Awesome README — For formatting inspiration