Collected Notes - Static Site Template with Next.js
Next.js-based template of a static site built using the Collected Notes API.
Features
- Dark Mode Support - Detect from system preference and per-site support user preference
- Links on the note - List all the links used at the bottom of each note
- Search - Search between all of your notes
- Incremental Regeneration - Deploy once and get incremental updates on your site
- Easy to customize - Create a new repo based on this way and start customizing the look & feel
How to use it
There are two ways to use this project.
- Deploy-only
- Customize and deploy
Deploy-only
If you don't want to customize the blog, click on the button below to deploy it to Vercel and follow the steps.
Check the required environment variables at the bottom and how to get the values you need.
Customize and deploy
If you prefer to customize the design, you can use this repository as a quick starter, in that case go to this URL https://github.com/Collected-Notes/static-template-nextjs/generate to create a new repository using this one as a template.
Once you have the repo, you can start editing the files, below you can find more documentation on how it works:
Stack
These are the main technologies used to build the project
File Structure
The code is inside two main folders
publicsrc
Inside public there is a single dark-mode.js, this file is loaded first and avoid a flash of different styles between the HTML generated and the correct color schema.
Inside src you can find the style.css with global styles and types.d.ts with the types the different pages and layouts uses.
Then, there are more folders inside src
component- Hre live the few reusable components, all in TypeScript and using CSS Modules with Tailwind@applydirective to style them.layouts- Here you can edit the layouts of the three different type of pages (article, home and search), they are also in TypeScript and CSS Modules with Tailwind.pages- Pages import the layouts and are in charge of fetching the required data for each one, inside this folder you can find a custom API endpoint used to support the search feature.queries- Here there is a single custom Hook built on top of SWR to request the/api/searchendpoint.
Required Environment Variables
CN_TOKEN- Your Collected Notes API token, get it going to https://collectednotes.com/accounts/me/token (you need a Premium account).CN_EMAIL- The email address you are using in Collected Notes.CN_SITE_ID- The ID of your site in Collected Notes, you can check it adding.jsonat the end of your Collected Notes site (e.g. https://collectednotes.com/blog.json).CN_SITE_PATH- The path of your site in Collected Notes (e.g.blog).