npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lokum

v0.2.10

Published

Host a website from JSON API. e.g. Trello

Downloads

30

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

burntcaramelburntcaramel

Keywords

lokumwebservertrello

Readme

Lokum logo

lokum

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

Deploy to Netlify

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.

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