Git Product home page Git Product logo

cards's Introduction

cards

Turn a Notion database into a deck of cards. @jdan uses this to power notes.jordanscales.com.

a desktop with notion open on the left and a rendered notion page using this library on the right

usage

As a heads up, this barely works at all. It may not handle HTML escaping correctly. Do not run on untrusted input.

  1. Create a new Notion integration

  2. Create a new database and note it's ID from the address bar

    • https://www.notion.so/[username]/[your database ID, copy this!]?v=[ignore this]
    • Add a column called "Filename" to set the output filename for a card. This is required for an index.html.
  3. Share that database with your new integration

  4. Run the script

git clone https://github.com/jdan/cards.git
npm i
NOTION_SECRET=[your token here] NOTION_DATABASE_ID=[your id here] TWITTER_HANDLE=yourHandle  node index.js
npx serve build   # build/ contains everything you need
# localhost:5000 now shows your cards

config

Configuration is provided via environment variables, a .env file, or a config file in the .env format. To specify a config file, set the CONFIG=path/to/your/file.env env var. Here's an example:

# recipes.env
TWITTER_HANDLE=jitl
OG_IMAGE=https://jake.tl/images/jake-pleasant.jpg
BASE_URL=/recipes
NOTION_SECRET=secret_XXXXXXX
NOTION_DATABASE_ID=a3aa29a6b2f242d1b4cf86fb578a5eea

Then to use the config, run:

CONFIG=./recipes.env node index.js

Take a look at the top 100 lines or so of index.js to see what env vars are available.

developing

If you're working on improving this software, consider using npm run watch, which will re-build your site whenever any of this source code changes.

CONFIG=./recipes.env npm run watch

cards's People

Contributors

jdan avatar justjake avatar

Stargazers

L3DLP avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.