Manage your website’s content using a Trello board. Watch it in action here.
Deploy with Now
- Install Now: https://zeit.co/now
- Find your public Trello board’s ID (e.g. mQ6WXDAQ)
- Run, passing your board ID:
now RoyalIcing/lokum -e TRELLO_BOARD_ID=mQ6WXDAQ
You can preview your boards here: https://lokum.icing.space — just paste the URL of your public Trello board.
- My portfolio: https://lokum.icing.space/#mQ6WXDAQ/ · Made from this board
- Royal Icing home page: https://lokum.icing.space/#YJxWDVRO/ · board
- Collected home page: https://lokum.icing.space/#kIL3DloM/ · board
https://us-central1-royal-icing.cloudfunctions.net/serveWebFromTrelloBoard/YOUR_BOARD_ID.zip
https://us-central1-royal-icing.cloudfunctions.net/serveWebFromTrelloBoard/YOUR_BOARD_ID.next.zip
Lokum uses the lofi format of hashtagging text. Any trailing #hashtags are added as booleans, and any trailing #hashtag: any text you like become key-value pairs.
- The list’s name will become the page’s title
- The #path tag pair lets you specify the absolute path for this page.
- The #class tag pair lets you specify custom classes for this page.
- A card’s title becomes an
<h2>. - The card’s description is parsed as markdown, and follows the
<h2>. - Attached images become
<img>above the content
- Use the #link tag pair to make the subheading link out to a URL.
- Add #primary to the subheading you want to make a
<h1>instead of an<h2>. Similarly #tertiary can be used for<h3>.
- Use the #slug tag pair to specify a child-page. The content stays part of the parent page, but also appears solely as a page at its slug’s path. The
<h2>then links out to the child-page.
- Add a card with name #nav to specify that the cards following should be together grouped in a
<nav>.
- Add a card with name #article to specify that the cards following should be each an
<article>.
- Add a card with name #meta to add
<meta>and<link>tags from the card’s description as HTML to the<head>.
- A list named #all will have its cards used across all pages, e.g. shared meta tags.
- Use a card named #above for HTML that will be added above every page.
- A list with name #redirects
- Each card must have #from and #to tag pairs for the original (from) path and destination (to) path for a redirect.
Lokum supports live-reloading of a site with the latest content from the source Trello board:
- Generate a secret, and scan the QR code into your Google Authenticator app.
- Use that secret as environment variable
RELOAD_SECRET(-e RELOAD_SECRET=XXXwith Now). - Visit
/-reload/:latest-tokento reload with fresh data from Trello.
- boardID (String): The ID (not full URL) of the Trello Board to use as a content source
- seo (Boolean): Whether to enable a /robots.txt route
- reloadSecret (String): The OTP secret
- host (String): Domain to use as host, usually fine to omit
- port (String): Port to start the server on
- Returns a Promise which resolves once the content has loaded and the server is ready
import { startServerForBoard } from 'lokum'
const boardID = 'mQ6WXDAQ' // From public Trello board https://trello.com/b/mQ6WXDAQ/burntcaramel-com
startServerForBoard(boardID, { port: process.env.PORT })
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent