Publish a research site
Put a Flowershow site in the research style in about half an hour.
This guide sets up a new research or knowledge-base site on Flowershow in the Life Itself / Seeds of Renaissance research style. You need a GitHub repository for the site and a Flowershow Premium account.
- Copy two files into the site.
- Load the script through the site config.
- Write pages in plain Markdown.
- Check the result on a phone and on a wide screen.
1. Copy the style
From the design repo, copy research-flowershow-theme/custom.css to the root of the site as custom.css, and house.js to js/house.js.
cp ~/src/life-itself/design/research-flowershow-theme/custom.css ./custom.css
mkdir -p js && cp ~/src/life-itself/design/research-flowershow-theme/house.js js/house.js
Keep the style as it is and add anything the site needs at the bottom of custom.css, under a comment that says what it is for. Then the style can be updated by replacing the top part.
2. Load the script
The script turns footnotes into cards and adds the contents rail. Add it to config.json with the head field, so it loads once on every page:
{
"head": "<script defer src=\"/js/house.js\"></script>"
}
Custom head code needs Flowershow Premium. Without it the site still reads well: footnotes stay at the end of the page and the contents panel is hidden.
3. Write pages
Pages are plain Markdown. Give each page a title and a description in its frontmatter: the description is set under the title as a short summary.
| Write | You get |
|---|---|
## Heading | a section, listed in the contents |
[^1] and [^1]: note | a footnote that opens as a card |
> [!note] Title | a callout in the note colour |
| a pipe table | a table across the column, with a tinted header |
Callout types
Use note for background, tip for advice, warning for something that can go wrong, and summary for "in this page" boxes. Each type keeps its own colour; don't mix more than two on a screen.
4. Check it
Open a long page at phone width and on a wide screen. On a phone the contents sit in a block under the title; on a wide screen they are ticks at the far left that open on hover. Click a footnote number and check the card opens and "Jump to note" lands on the note.1
Footnotes
-
The script sets itself up again each time Flowershow swaps in a new page, so also click from one page to another and check the contents change with it. ↩
