diff --git a/.env.example b/.env.example index bca6ff57c3..86f57b3b76 100644 --- a/.env.example +++ b/.env.example @@ -19,7 +19,48 @@ # Optional (for persisting preview images to redis) # NOTE: if you want to enable redis, only REDIS_HOST and REDIS_PASSWORD are required # NOTE: don't forget to set isRedisEnabled to true in the site.config.ts file + +#REDIS_ENABLED= #REDIS_HOST= #REDIS_PASSWORD= #REDIS_USER='default' #REDIS_NAMESPACE='preview-images' + +#NOTION_ROOT_PAGE_ID= +#NOTION_ROOT_SPACE_ID= + +# Optional (for site configuration) +#NEXT_PUBLIC_SITE_NAME= +#NEXT_PUBLIC_SITE_DOMAIN= +#NEXT_PUBLIC_SITE_AUTHOR= +#NEXT_PUBLIC_SITE_DESCRIPTION= + +#NEXT_PUBLIC_SOCIAL_TWITTER= +#NEXT_PUBLIC_SOCIAL_GITHUB= +#NEXT_PUBLIC_SOCIAL_LINKEDIN= +#NEXT_PUBLIC_SOCIAL_YOUTUBE= + +#DEFAULT_PAGE_ICON= +#DEFAULT_PAGE_COVER= +#DEFAULT_PAGE_COVER_POSITION= + +#PREVIEW_IMAGES_ENABLED= + +# ------------------------------------------------------------------------------ +# parse json stringify PageUrlOverridesMap objects +# example: +# PAGE_URL_OVERRIDES='{"/foo": "067dd719a912471ea9a3ac10710e7fdf", "/bar": "0be6efce9daf42688f65c76b89f8eb27"}' +# ------------------------------------------------------------------------------ +#PAGE_URL_OVERRIDES= + +# ------------------------------------------------------------------------------ +# if you want to use custom navigation, set this to 'custom' +#NAVIGATION_STYLE= + +# ------------------------------------------------------------------------------ +# if you want to use custom navigation, define json stringify NavigationLink objects +# example: +# NAVIGATION_LINKS='[{"title": "About", "pageId": "f1199d37579b41cbabfc0b5174f4256a"}, {"title": "Contact", "pageId": "6a29ebcb935a4f0689fe661ab5f3b8d1"}]' +# ------------------------------------------------------------------------------ +#NAVIGATION_LINKS= + diff --git a/pages/_document.tsx b/pages/_document.tsx index 28cc023758..8316ad5e0b 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -12,7 +12,7 @@ export default class MyDocument extends Document { rel='icon' type='image/png' sizes='32x32' - href='favicon.png' + href='favicon-32x32.png' /> diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000000..fabaf6a3a2 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000000..f67ee7ae35 Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000000..365555623a Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-128x128.png b/public/favicon-128x128.png deleted file mode 100644 index 8be6cf3486..0000000000 Binary files a/public/favicon-128x128.png and /dev/null differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000000..f3cdac4a7b Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-192x192.png b/public/favicon-192x192.png deleted file mode 100644 index a53861f38e..0000000000 Binary files a/public/favicon-192x192.png and /dev/null differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000000..23342e8007 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index ea2f437d9d..9459bbbd90 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon.png b/public/favicon.png deleted file mode 100644 index d91bdfb3cb..0000000000 Binary files a/public/favicon.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json index f961a3cec2..9f193bcd7c 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,24 +1,24 @@ { - "name": "Next.js Notion Starter Kit", - "short_name": "Starter Kit", - "icons": [ - { - "src": "/favicon.png", - "type": "image/png", - "sizes": "32x32" - }, - { - "src": "/favicon-128x128.png", - "type": "image/png", - "sizes": "128x128" - }, - { - "src": "/favicon-192x192.png", - "type": "image/png", - "sizes": "192x192" - } - ], - "theme_color": "#000000", - "background_color": "#000000", - "display": "standalone" -} + "name": "", + "short_name": "", + "icons": [ + { + "src": "/favicon-32x32.png", + "type": "image/png", + "sizes": "32x32" + }, + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} \ No newline at end of file diff --git a/readme.md b/readme.md index fcc548ce3d..21a58c5af3 100644 --- a/readme.md +++ b/readme.md @@ -43,12 +43,51 @@ It uses Notion as a CMS, [react-notion-x](https://github.com/NotionX/react-notio This project requires a recent version of Node.js (we recommend >= 16). 1. Fork / clone this repo -2. Change a few values in [site.config.ts](./site.config.ts) +2. Configure your site by either: + - Editing [site.config.ts](./site.config.ts) directly + - Creating a `.env` file based on `.env.example` to override default values 3. `npm install` 4. `npm run dev` to test locally 5. `npm run deploy` to deploy to vercel 💪 6. Double check your [Vercel project settings](#vercel-configuration) +### Environment Variables Configuration + +The easiest way to configure your site is by creating a `.env` file. Copy `.env.example` to `.env` and customize the values: + +```bash +# Basic site configuration +NEXT_PUBLIC_SITE_NAME="Your Site Name" +NEXT_PUBLIC_SITE_DOMAIN="yoursite.com" +NEXT_PUBLIC_SITE_AUTHOR="Your Name" +NEXT_PUBLIC_SITE_DESCRIPTION="Your site description" + +# Social media handles +NEXT_PUBLIC_SOCIAL_TWITTER="yourtwitter" +NEXT_PUBLIC_SOCIAL_GITHUB="yourgithub" +NEXT_PUBLIC_SOCIAL_LINKEDIN="yourlinkedin" +NEXT_PUBLIC_SOCIAL_YOUTUBE="@youryoutube" + +# Notion configuration +NOTION_ROOT_PAGE_ID="your-notion-page-id" +NOTION_ROOT_SPACE_ID="optional-workspace-id" + +# Feature flags +PREVIEW_IMAGES_ENABLED="true" +REDIS_ENABLED="false" + +# Optional customization +DEFAULT_PAGE_ICON="optional-default-icon" +DEFAULT_PAGE_COVER="optional-cover-image-url" +DEFAULT_PAGE_COVER_POSITION="0.5" + +# Custom navigation (optional) +NAVIGATION_STYLE="default" # or "custom" +NAVIGATION_LINKS='[{"title": "About", "pageId": "page-id"}, {"title": "Contact", "pageId": "page-id"}]' +``` + +Any values not defined in your `.env` file will use the defaults from `site.config.ts`. + I tried to make configuration as easy as possible — All you really need to do to get started is edit `rootNotionPageId`. We recommend duplicating the [default page](https://notion.so/7875426197cf461698809def95960ebf) as a starting point, but you can use any public notion page you want. @@ -108,7 +147,7 @@ REDIS_PASSWORD='TODO' If you're not sure which Redis provider to use, we recommend [Redis Labs](https://redis.com), which provides a free plan. -Note that preview images and redis caching are both optional features. If you’d rather not deal with them, just disable them in your site config. +Note that preview images and redis caching are both optional features. If you'd rather not deal with them, just disable them in your site config. ## Styles diff --git a/site.config.ts b/site.config.ts index cded79c3bf..e5854dd3a7 100644 --- a/site.config.ts +++ b/site.config.ts @@ -1,42 +1,49 @@ -import { siteConfig } from './lib/site-config' +import { type NavigationLink, siteConfig } from './lib/site-config' +import { type NavigationStyle, type PageUrlOverridesMap } from './lib/types' export default siteConfig({ // the site's root Notion page (required) - rootNotionPageId: '7875426197cf461698809def95960ebf', + rootNotionPageId: + process.env.NOTION_ROOT_PAGE_ID || '7875426197cf461698809def95960ebf', // if you want to restrict pages to a single notion workspace (optional) // (this should be a Notion ID; see the docs for how to extract this) - rootNotionSpaceId: null, + rootNotionSpaceId: process.env.NOTION_ROOT_SPACE_ID || null, // basic site info (required) - name: 'Next.js Notion Starter Kit', - domain: 'nextjs-notion-starter-kit.transitivebullsh.it', - author: 'Travis Fischer', + name: process.env.NEXT_PUBLIC_SITE_NAME || 'Next.js Notion Starter Kit', + domain: + process.env.NEXT_PUBLIC_SITE_DOMAIN || + 'nextjs-notion-starter-kit.transitivebullsh.it', + author: process.env.NEXT_PUBLIC_SITE_AUTHOR || 'Travis Fischer', // open graph metadata (optional) - description: 'Example Next.js Notion Starter Kit Site', + description: + process.env.NEXT_PUBLIC_SITE_DESCRIPTION || + 'Example Next.js Notion Starter Kit Site', // social usernames (optional) - twitter: 'transitive_bs', - github: 'transitive-bullshit', - linkedin: 'fisch2', + twitter: process.env.NEXT_PUBLIC_SOCIAL_TWITTER || 'transitive_bs', + github: process.env.NEXT_PUBLIC_SOCIAL_GITHUB || 'transitive-bullshit', + linkedin: process.env.NEXT_PUBLIC_SOCIAL_LINKEDIN || 'fisch2', // mastodon: '#', // optional mastodon profile URL, provides link verification // newsletter: '#', // optional newsletter URL - // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX` + youtube: process.env.NEXT_PUBLIC_SOCIAL_YOUTUBE || '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX` // default notion icon and cover images for site-wide consistency (optional) // page-specific values will override these site-wide defaults - defaultPageIcon: null, - defaultPageCover: null, - defaultPageCoverPosition: 0.5, + defaultPageIcon: process.env.DEFAULT_PAGE_ICON || null, + defaultPageCover: process.env.DEFAULT_PAGE_COVER || null, + defaultPageCoverPosition: + Number(process.env.DEFAULT_PAGE_COVER_POSITION) || 0.5, // whether or not to enable support for LQIP preview images (optional) - isPreviewImageSupportEnabled: true, + isPreviewImageSupportEnabled: process.env.PREVIEW_IMAGES_ENABLED === 'true', // whether or not redis is enabled for caching generated preview images (optional) // NOTE: if you enable redis, you need to set the `REDIS_HOST` and `REDIS_PASSWORD` // environment variables. see the readme for more info - isRedisEnabled: false, + isRedisEnabled: process.env.REDIS_ENABLED === 'true', // map of notion page IDs to URL paths (optional) // any pages defined here will override their default URL paths @@ -46,12 +53,17 @@ export default siteConfig({ // '/foo': '067dd719a912471ea9a3ac10710e7fdf', // '/bar': '0be6efce9daf42688f65c76b89f8eb27' // } - pageUrlOverrides: null, + pageUrlOverrides: process.env.PAGE_URL_OVERRIDES + ? (JSON.parse(process.env.PAGE_URL_OVERRIDES) as PageUrlOverridesMap) + : null, // whether to use the default notion navigation style or a custom one with links to // important pages. To use `navigationLinks`, set `navigationStyle` to `custom`. - navigationStyle: 'default' - // navigationStyle: 'custom', + navigationStyle: + (process.env.NAVIGATION_STYLE as NavigationStyle) || 'default', // or 'custom' + navigationLinks: process.env.NAVIGATION_LINKS + ? (JSON.parse(process.env.NAVIGATION_LINKS) as NavigationLink[]) + : [] // navigationLinks: [ // { // title: 'About',