feat: add environment variable support for site configuration

.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=
+

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'
             />
 
             <link rel='manifest' href='/manifest.json' />

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"
+}

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
 

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',