Structure

The generate package, unsurprisingly, generates the site in 3 different languages. The content either comes from plain strings in the the site_content/translations.json, or from .md files if it needs more layout.

A checkerboard is an instragram-like layout; made of individual fields. Each field has its content with structured data, free text, images and models organised in simple directories. For each site to be generated, generate looks for a directory in site_content, which in turn contains the field directories. For example, to generate the principles.html, you need to have an site_content/principles folder.

The structure of such a field directory is as follows (with a toy as an example):

toys
|-- id (for example: hanachirusato)
    |-- toy.json
    |-- en.md (fixed name)
    |-- de.md (if missing, it will be generated by the i18n module)
    |-- jp.md
    |-- photo1.jpg (name is not important)
    |-- ... (more photos)
    |-- model.glb (needs to end in .glb)
    |-- poster.jpg (needs to be called poster)
|-- id (for example: ryouhi)
    |-- ...

The toy.json at least contains (also see toys/template/toy.json):

{
    "category": "chashaku" /* will be translated according to the translations.json */,
    "name": {
        "en": "Ryouhi",
        "de": "Ryouhi",
        "jp": "両樋"
    },
    "price": 80,
    "on_sale": true,
    "maker": {
        "en": "Rikyu",
        "de": "Rikyu",
        "jp": "利休"
    }
}

The .md files also support [[wikilinks]], which will point to tea.hedonisms.ch.

Translations

• the generate.py creates multilingual sites based on the templates/translations.json. The latter has the following format:

{ "key" : { "de" : "Lohrem ipsett dohler amen.",
            "en" : "Lorem ipsum dolor amet.",
            "jp" : "ロレム　イップスム　ドロル　アメト。"} }

It is converted by generate.py into a different format where keys are sorted under language.

CSS

• stick to BEM naming convention
• we're following a mobile-first approach, so all desktop styling lives in styles-768.css

Dev

• Use poetry shell then code . to get the poetry environment in VS Code

Images

• I used to apply a pretty thick saturation filter, which I then had to remove again: find /path/to/directory -type f \( -iname \*.webp -o -iname \*.jpeg -o -iname \*.png \) -exec mogrify -modulate 100,50,100 {} \;
• Use generate/convert.sh from the directory you want to change the images in to convert to .webp

UX

• small footer, Impressum, instagram
• photo / video on intro page
• outgoing links open in new window

i18n

• checkerboard field__info with writing-mode: vertical-rl
• log when files are changed so new translations can be automatically generated

Toys

• Sort toys by price
• One toy, multiple categories
• Filter toys with seasonality
• search should include romanized Japanese category names
• fuzzy search, multiword search
• price dump function
• sell function that generates a pdf for the buyers (and the bill?)
• Client side search index
• the labels are a little bit messed up
• navigation categories should be lower
• navigation categories ought to have a checkbox

DevOps

• Move hosting from github to my server
• write doc strings
• write and run the pytests, then register them on merges
• JSON schema for checkerboards