Giter Club home page Giter Club logo

notion-covers's Introduction

Notion Cover Image Image Generator

Deploy with Vercel

Service that dynamically generates cover images for gallery view databases in Notion. These look something like

🧐 How It Works

Images are generated through the /api/image route. When you hit this route the following happens

  • Query params are parsed
  • Layout is looked up in list of layouts using the layoutName query param
  • layout.getCSS called with all query params
  • layout.Component is rendered with all query params as config prop
  • HTML page built, rendered with Puppeteer, and screenshot
  • Screenshot returned with a long cache max age

Layouts

This service can generate images using multiple layouts. A layout is defined as a

  • Collection of properties that are user configurable. The UI for these properties is auto genearted
  • Function that takes in layout config and returns CSS needed to render
  • A React component that takes in layout config as a prop

🚀 Development

To start hacking, do the following:

One-click Deploy

Use the button below to fork this repo and deploy to Vercel straight away!

Deploy with Vercel

Advanced Users

  1. Fork this repo and clone it
  2. Run yarn or npm install to install all dependencies
  3. Run locally with yarn dev and visit localhost:3000

Now you're ready to start local development!

The frontend is a NextJS site and the image generation happens in an API route.

# Start local development server
yarn dev

# Build for production
yarn build

# Start in production
yarn start

🙌 Acknowledgement

Credit where credit is due. This started as a forked repo from Nest's OpenGraph image generator

License

This project is distributed under The MIT Licese

notion-covers's People

Contributors

caolanxyz avatar maximousblk avatar dependabot[bot] avatar

Watchers

avatar

notion-covers's Issues

[v2] Built-in Notion Database Watcher

Remove the need for an intermediary entirely by building in a notion database watcher, which will allow users to define which databases they want automatic covers on, which the system will then periodically retrieve newly created items and populate them with dynamic cover URLs.

Spitballing here, but would potentially work by grabbing database items (pages) sorted by last created, saving the latest created item, and then filtering it and all older items out on each iteration, leaving only newly created items.

Example Flow: Fruit Bowl Database

  • User Links database to notioncovers on 02/01/2022 12:00, and sets it to check every 4 hours
  • Initial Run @ 02/01/2022 12:00 [0]
    • Search:
      • Apple created 01/01/2022 10:00
      • Banana created 01/01/2022 15:00
      • Orange created 01/01/2022 17:00
    • Apple, Banana, Orange updated with cover URLs
    • Last Created Item saved as Orange
  • Scheduled Run @ 02/01/2022 16:00 [1]
    • Search:
      • Apple created 01/01/2022 10:00
      • Banana created 01/01/2022 15:00
      • Orange created 01/01/2022 17:00
      • Pear created 02/01/2022 13:00
    • Orange was latest created during previous run, so is discarded along with everything older
    • Pear updated with cover URL
    • Last Created Item saved as Pear
  • Scheduled Run @ 02/01/2022 20:00 [2]
    • Search:
      • Apple created 01/01/2022 10:00
      • Banana created 01/01/2022 15:00
      • Orange created 01/01/2022 17:00
      • Pear created 02/01/2022 13:00
    • Pear was latest created during previous run, so is discarded along with everything older
    • No new items, so no action

Hoping Notion will implement webhooks at some point, but for now, this seems to be the best option.

Maybe even potential here for a paid hosted setup?

[v2] Direct Notion Integration

Rather than simply feeding specific properties from Notion in as "title"/"subtitle"/etc query strings, v2 should allow the user to connect a notion integration, and get an image via [domain.com]/api/images/{database_item_id.png

The generator should get the specified database item and return the correct image as requested, based on item type (ie: which database it's in - Projects/Tasks/Assets/etc), and whether a featured image is present.

End goal: Intermediaries (eg Integromat) should only require a "New Database Item Created" trigger, and an "Update Database Item" trigger, as the new link format will always return the latest image for the page regardless of content updates. This also removes the need for AWS S3 or other external file hosting

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.