Manage a website’s content using Trello
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
services
src
.gitignore
.nvmrc
README.md
circle.yml
index.js
netlify.toml
package.json
start.js
yarn.lock

README.md

Lokum logo

lokum

Manage your website’s content using a Trello board. Watch it in action here.

Deploy with Now

  1. Install Now: https://zeit.co/now
  2. Find your public Trello board’s ID (e.g. mQ6WXDAQ)
  3. Run, passing your board ID: now RoyalIcing/lokum -e TRELLO_BOARD_ID=mQ6WXDAQ

Live online preview

You can preview your boards here: https://lokum.icing.space — just paste the URL of your public Trello board.

Download a website zip

Static HTML

https://us-central1-royal-icing.cloudfunctions.net/serveWebFromTrelloBoard/YOUR_BOARD_ID.zip

Next.js 3

https://us-central1-royal-icing.cloudfunctions.net/serveWebFromTrelloBoard/YOUR_BOARD_ID.next.zip

How to make a website board in Trello

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.

Create a board in Trello, and make it public.

Add a list for each page

  • 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.

Add cards to each page list for the content on the 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

Links

  • Use the #link tag pair to make the subheading link out to a URL.

Main heading

  • Add #primary to the subheading you want to make a <h1> instead of an <h2>. Similarly #tertiary can be used for <h3>.

Posts

  • 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.

Navigation

  • Add a card with name #nav to specify that the cards following should be together grouped in a <nav>.

Article

  • Add a card with name #article to specify that the cards following should be each an <article>.

Metatags, CSS, etc

  • Add a card with name #meta to add <meta> and <link> tags from the card’s description as HTML to the <head>.

Other lists can also be added for additional behaviour

Share on all pages

  • 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.

Path redirects

  • 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.

Reloading with Google Authenticator

Lokum supports live-reloading of a site with the latest content from the source Trello board:

  1. Generate a secret, and scan the QR code into your Google Authenticator app.
  2. Use that secret as environment variable RELOAD_SECRET (-e RELOAD_SECRET=XXX with Now).
  3. Visit /-reload/:latest-token to reload with fresh data from Trello.

API

startServerForBoard(boardID, { seo = true, reloadSecret, host, port })

  • 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 })