mirror of
https://github.com/d0zingcat/nextjs-notion-starter-kit.git
synced 2026-05-13 15:09:47 +00:00
feat: lots of refactors and improvements
This commit is contained in:
Travis Fischer
64
readme.md
64
readme.md
@@ -24,14 +24,11 @@ The site is then deployed to [Vercel](http://vercel.com).
|
||||
- Robust support for Notion content via [react-notion-x](https://github.com/NotionX/react-notion-x)
|
||||
- Next.js / TS / React / Notion
|
||||
- Excellent page speeds
|
||||
- Sexy LQIP image previews
|
||||
- Embedded GitHub comments
|
||||
- Automatic open graph images
|
||||
- Automatic pretty URLs
|
||||
- Automatic table of contents
|
||||
- Full support for dark mode
|
||||
- Quick search via CMD+P just like in Notion
|
||||
- Responsive for desktop / tablet / mobile
|
||||
- Responsive for different devices
|
||||
- Optimized for Next.js and Vercel
|
||||
|
||||
## Setup
|
||||
@@ -52,7 +49,7 @@ You'll want to make your root Notion page **public** and then copy the link to y
|
||||
|
||||
In order to find your Notion workspace ID (optional), just load any of your site's pages into your browser and open up the developer console. There will be a global variable that you can access called `block` which is the Notion data for the current page, and you just have to type `block.space_id` which will print out your page's workspace ID.
|
||||
|
||||
I recommend setting up a collection on your home page (optional; I use an inline gallery [here](https://notion.so/78fc5a4b88d74b0e824e29407e9f1ec1)) that contains all of your articles / projects / content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you would normally in Notion. There are a few parts of the code with logic to only show comments on blog post pages (collection item detail pages).
|
||||
I recommend setting up a collection on your home page (optional; I use an inline gallery [here](https://notion.so/78fc5a4b88d74b0e824e29407e9f1ec1)) that contains all of your articles / projects / content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you would normally in Notion.
|
||||
|
||||
## URL Paths
|
||||
|
||||
@@ -62,9 +59,9 @@ In development, it will use `/nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f073020
|
||||
|
||||
In production, it will use `/nextjs-notion-blog` which is a bit nicer as it gets rid of the extra ID clutter.
|
||||
|
||||
The mapping of Notion ID to slugified page titles is done automatically for you as part of the build process. Just keep in mind that if you plan on changing page titles over time, you probably want to make sure old links will still work, and we don't currently provide a solution for detecting old links aside from Next.js built-in [support for redirects](https://nextjs.org/docs/api-reference/next.config.js/redirects).
|
||||
The mapping of Notion ID to slugified page titles is done automatically as part of the build process. Just keep in mind that if you plan on changing page titles over time, you probably want to make sure old links will still work, and we don't currently provide a solution for detecting old links aside from Next.js's built-in [support for redirects](https://nextjs.org/docs/api-reference/next.config.js/redirects).
|
||||
|
||||
See [mapPageUrl](./lib/map-page-url.ts) and [getCanonicalPageId](https://github.com/NotionX/react-notion-x/blob/master/packages/notion-utils/src/get-canonical-page-id.ts) from for more details.
|
||||
See [mapPageUrl](./lib/map-page-url.ts) and [getCanonicalPageId](https://github.com/NotionX/react-notion-x/blob/master/packages/notion-utils/src/get-canonical-page-id.ts) for more details.
|
||||
|
||||
NOTE: if you have multiple pages in your workspace with the same slugified name, the app will throw an error letting you know that there are duplicate URL pathnames.
|
||||
|
||||
@@ -79,9 +76,9 @@ It should be pretty easy to customize most styling-related things, especially wi
|
||||
### Dark Mode
|
||||
|
||||
<p align="center">
|
||||
<img alt="Light Mode" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F83ea9f0f-4761-4c0b-b53e-1913627975fc%252Ftransitivebullsh.it_-opt.jpg%3Ftable%3Dblock%26id%3Ded7e8f60-c6d1-449e-840b-5c7762505c44%26cache%3Dv2" width="45%">
|
||||
<img alt="Light Mode" src="https://transitive-bs.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F83ea9f0f-4761-4c0b-b53e-1913627975fc%2Ftransitivebullsh.it_-opt.jpg?table=block&id=ed7e8f60-c6d1-449e-840b-5c7762505c44&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2" width="45%">
|
||||
|
||||
<img alt="Dark Mode" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fc0839d6c-7141-48df-8afd-69b27fed84aa%252Ftransitivebullsh.it__(1)-opt.jpg%3Ftable%3Dblock%26id%3D23b11fe5-d6df-422d-9674-39cf7f547523%26cache%3Dv2" width="45%">
|
||||
<img alt="Dark Mode" src="https://transitive-bs.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc0839d6c-7141-48df-8afd-69b27fed84aa%2Ftransitivebullsh.it__(1)-opt.jpg?table=block&id=23b11fe5-d6df-422d-9674-39cf7f547523&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2" width="45%">
|
||||
</p>
|
||||
|
||||
Dark mode is fully supported and can be toggled via the sun / moon icon in the footer.
|
||||
@@ -102,49 +99,6 @@ To enable analytics, just add a `NEXT_PUBLIC_FATHOM_ID` environment variable.
|
||||
|
||||
This environment variable will only be taken into account in production, so you don't have to worry about messing up your analytics with localhost development.
|
||||
|
||||
### GitHub Comments
|
||||
|
||||
<p align="center">
|
||||
<img alt="Embedded GitHub Comments" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fa43f996c-de07-4d8a-8461-b35f9d43e4b2%252Fcomments-desktop-opt.jpg%3Ftable%3Dblock%26id%3Ded07d7c2-57c9-4aba-81b3-f5fa069371d4%26cache%3Dv2" width="420">
|
||||
</p>
|
||||
|
||||
[Utteranc.es](https://utteranc.es/) is an amazing [open source project](https://github.com/utterance/utterances) which enables developers to embed GitHub issues as a comments section on their websites. Genius.
|
||||
|
||||
The integration is really simple. Just edit the `utterancesGitHubRepo` config value to point to the repo you'd like to use for issue comments.
|
||||
|
||||
You probably want to read through the Utterances docs before enabling this in production, since there are some subtleties around how issues get mapped to pages on your site, but overall the setup was super easy imho and I love the results.
|
||||
|
||||
### Preview Images
|
||||
|
||||
This is a really cool feature that's inspired by Medium's smooth image loading, where we first load a low quality, blurred version of an image and animate in the full quality version once it loads. It's such a nice effect, but it does add a bit of work to set up.
|
||||
|
||||
If `isPreviewImageSupportEnabled` is set to `true`, then the app will compute LQIP images via [lqip-modern](https://github.com/transitive-bullshit/lqip-modern) for all images referenced by your Notion workspace. These will be stored in a Google Firebase collection (as base64 JPEG data), so they only need to be computed once.
|
||||
|
||||
You'll have to set up your own Google Firebase instance of Firestore and supply three environment variables:
|
||||
|
||||
```bash
|
||||
# base64-encoded string containing your google credentials json file
|
||||
GOOGLE_APPLICATION_CREDENTIALS=
|
||||
|
||||
# name of your google cloud project
|
||||
GCLOUD_PROJECT=
|
||||
|
||||
# name of the firebase collection to store images in
|
||||
FIREBASE_COLLECTION_IMAGES=
|
||||
```
|
||||
|
||||
The actual work happens in the [create-preview-image](./api/create-preview-image) serverless function.
|
||||
|
||||
### Automatic Social Images
|
||||
|
||||
<p align="center">
|
||||
<img alt="Auto-generated social image" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fe1877c31-0bc9-46b7-8aaf-7bcae21baf2b%252Fsocial-image-opt.jpeg%3Ftable%3Dblock%26id%3D735b04d2-2a77-4035-8942-a17f8d41fe83%26cache%3Dv2" width="420">
|
||||
</p>
|
||||
|
||||
Open Graph images like this one will be generated for each page of your site automatically based each page's content.
|
||||
|
||||
Note that you shouldn't have to do anything extra to enable this feature as long as you're deploying to Vercel.
|
||||
|
||||
### Automatic Table of Contents
|
||||
|
||||
<p align="center">
|
||||
@@ -163,7 +117,7 @@ This table of contents uses the same logic that Notion uses for its built-in Tab
|
||||
|
||||
<p align="center">
|
||||
<a href="https://transitivebullsh.it/free-resources-for-indie-saas-devs">
|
||||
<img alt="Mobile Article Page" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F6c05a0f9-59a0-4322-bef9-3f08fe4efc6a%252Farticle-mobile-opt.jpg%3Ftable%3Dblock%26id%3Da1eb2263-fdf1-4d51-a3d4-8a02cb32bbba%26cache%3Dv2" width="300">
|
||||
<img alt="Mobile Article Page" src="https://transitive-bs.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6c05a0f9-59a0-4322-bef9-3f08fe4efc6a%2Farticle-mobile-opt.jpg?table=block&id=a1eb2263-fdf1-4d51-a3d4-8a02cb32bbba&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2" width="300">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -171,7 +125,7 @@ This table of contents uses the same logic that Notion uses for its built-in Tab
|
||||
|
||||
<p align="center">
|
||||
<a href="https://transitivebullsh.it">
|
||||
<img alt="Desktop Home Page" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F1d3ab4b2-60af-4b95-b35d-cac5d440b8ca%252Ftransitivebullsh.it_-opt.jpg%3Ftable%3Dblock%26id%3D97f445e8-2da1-41cd-996a-5ad0e73a1d79%26cache%3Dv2" width="600">
|
||||
<img alt="Desktop Home Page" src="https://transitive-bs.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1d3ab4b2-60af-4b95-b35d-cac5d440b8ca%2Ftransitivebullsh.it_-opt.jpg?table=block&id=97f445e8-2da1-41cd-996a-5ad0e73a1d79&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2" width="600">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -179,7 +133,7 @@ This table of contents uses the same logic that Notion uses for its built-in Tab
|
||||
|
||||
<p align="center">
|
||||
<a href="https://transitivebullsh.it/free-resources-for-indie-saas-devs">
|
||||
<img alt="Desktop Article Page" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fb564d13f-b71b-4473-8531-65b5dd9b995f%252Ftransitivebullsh.it__(4)-opt.jpg%3Ftable%3Dblock%26id%3D16e03de2-0df7-4232-a129-e1666505c4d2%26cache%3Dv2" width="600">
|
||||
<img alt="Desktop Article Page" src="https://transitive-bs.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb564d13f-b71b-4473-8531-65b5dd9b995f%2Ftransitivebullsh.it__(4)-opt.jpg?table=block&id=16e03de2-0df7-4232-a129-e1666505c4d2&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2" width="600">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user