https://github.com/BurntCaramel/lokum
Manage a website’s content using Trello
https://github.com/BurntCaramel/lokum
content content-management content-management-system hashtag nodejs redirects trello trello-board
Last synced: 3 months ago
JSON representation
Manage a website’s content using Trello
- Host: GitHub
- URL: https://github.com/BurntCaramel/lokum
- Owner: BurntCaramel
- Created: 2016-10-19T11:30:40.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-15T08:31:47.000Z (over 8 years ago)
- Last Synced: 2024-03-31T05:08:55.235Z (over 1 year ago)
- Topics: content, content-management, content-management-system, hashtag, nodejs, redirects, trello, trello-board
- Language: JavaScript
- Homepage: https://lokum.icing.space/
- Size: 1010 KB
- Stars: 25
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# lokum
Manage your website’s content using a Trello board. [Watch it in action here.](https://www.youtube.com/watch?v=GThjBRCbiBk)
## Deploy with [Now](https://zeit.co/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.
- My portfolio: https://lokum.icing.space/#mQ6WXDAQ/ · [Made from this board](https://trello.com/b/mQ6WXDAQ/burntcaramel-com)
- Royal Icing home page: https://lokum.icing.space/#YJxWDVRO/ · [board](https://trello.com/b/YJxWDVRO/icingspace)
- Collected home page: https://lokum.icing.space/#kIL3DloM/ · [board](https://trello.com/b/kIL3DloM/collecteddesign)
## Download a website zip
### Static HTML
```
https://us-central1-royal-icing.cloudfunctions.net/serveWebFromTrelloBoard/YOUR_BOARD_ID.zip
```
### [Next.js 3](https://github.com/zeit/next.js)
```
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 `
`.
- The card’s description is parsed as markdown, and follows the ``.
- Attached images become `![]()
` 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 `
` instead of an ``. Similarly **#tertiary** can be used for ``.
#### 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 `
` 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 ``.
#### Article
- Add a card with name **#article** to specify that the cards following should be each an ``.
#### Metatags, CSS, etc
- Add a card with name **#meta** to add `` and `` tags from the card’s description as HTML to the ``.
### 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](https://sedemo-mktb.rhcloud.com), 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 })
```