Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/btahir/notion-capture
Email capture page using Notion API
https://github.com/btahir/notion-capture
email-marketing nextjs notion notion-api
Last synced: 9 days ago
JSON representation
Email capture page using Notion API
- Host: GitHub
- URL: https://github.com/btahir/notion-capture
- Owner: btahir
- License: mit
- Created: 2021-05-14T06:08:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-07T14:42:26.000Z (over 1 year ago)
- Last Synced: 2024-08-01T02:34:28.998Z (3 months ago)
- Topics: email-marketing, nextjs, notion, notion-api
- Language: JavaScript
- Homepage: https://notioncapture.vercel.app/
- Size: 982 KB
- Stars: 93
- Watchers: 4
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Notion Capture
This starter shows how to use the new Notion API with Next.js. You can capture emails that will populate a Notion database.
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example).
## How to use
Change into the project directory and run the following command:
```
yarn && yarn dev
```
### Update Notion Keys
You need to add the following to your env.local file (and in the environment variables in Vercel/Netlify when deployed).
```
MY_NOTION_TOKEN=
DATABASE_ID=
```
You can find more details on how to get these [here](https://developers.notion.com/).
### Update Site Metadata
You can update your site metadata in the next.config.js file.
```
env: {
siteTitle: 'Your Company',
siteDescription: 'Your company description.',
siteKeywords: 'your company keywords',
siteUrl: 'https://notioncapture.vercel.app',
siteImagePreviewUrl: '/images/preview.png',
twitterHandle: '@your_handle'
}
```
### Update Colors
You can update the color palette in tailwind.config.js file.
```
colors: {
palette: {
light: '',
primary: '',
dark: '',
},
},
```
### Update Image
The images are generated from the Unplash [Random API](https://source.unsplash.com/). The cool gradient effect on the images is achieved by using the Tailwind Mix Blend Mode feature. You can experiment with this effect using this [tool](https://tailblend.vercel.app/).
### Update Progressive Web App (PWA) data
Update the manifest.json file and the icons under the public/images/icons folder.
You can use free tools online such as https://realfavicongenerator.net/ to quickly generate all the different icon sizes and favicon.ico file.
## Want to have someone set it up for you?
Hit me up on [Twitter](https://twitter.com/deepwhitman) and let's chat :)
If you are looking for more choices/ production ready websites I have more [templates](https://nextails.com/) that might suit your needs.
