0.2.10 • Published 7 years ago
lokum v0.2.10
lokum
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
Live online preview
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
Download a website zip
Static HTML
https://us-central1-royal-icing.cloudfunctions.net/serveWebFromTrelloBoard/YOUR_BOARD_ID.zipNext.js 3
https://us-central1-royal-icing.cloudfunctions.net/serveWebFromTrelloBoard/YOUR_BOARD_ID.next.zipHow 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:
- 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.
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 })0.2.10
7 years ago
0.2.9
7 years ago
0.2.8
7 years ago
0.2.7
7 years ago
0.2.6
7 years ago
0.2.5
7 years ago
0.2.4
7 years ago
0.2.3
7 years ago
0.2.2
7 years ago
0.2.1
7 years ago
0.2.0-a2
7 years ago
0.2.0-a1
7 years ago
0.1.6
8 years ago
0.1.5
8 years ago
0.1.4
8 years ago
0.1.3
8 years ago
0.1.2
8 years ago
0.1.1
8 years ago
0.1.0
8 years ago