Kivy.org Website (https://www.kivy.org)

Folder structure

• configs : contains the configurations needed to build the page templates via the build tool (during development and also distribution).
• content : This folder will be copied as-is to the website distribution (dist) during build. Please make sure that everything included in this folder is expected to be publicly accessible via kivy.org.
• templates : All the HTML templates needed to build the Kivy website are here.
• tools: Contains build.py, which is needed in order to build the website.

How do we generate the page from templates?

The build tool (tools/build.py) uses the config/config.json file in order to know which pages should be built and how to build them.

Multiple pages are defined in config/config.json, and each page has its own template and env.

But in templates/index.html, there's an [[ include "components/header.html" ]]. What that does mean? And how we should use env?

The build tool uses Renoir under the hood as a templating engine. Renoir is easy, production-ready and has quite complete documentation.

env should contain all the variables that need to be accessed during the page generation.

As an example, with the following configuration:

...
{
    "template": "index.html",
    "env": {
        "name": "Kivy"
    }
}
...

And the following snippet in index.html

<p>Hi, [[ =name ]]</p>

Will produce the following output, when the template has been built:

<p>Hello, Kivy</p>

How about the styling (CSS)?

Writing CSS code from scratch can be boring and stressful, and sometimes it is a pain to maintain.

TailwindCSS fills this gap, marking itself as a utility-first CSS framework for rapidly building custom user interfaces. It also comes with an extensive documentation and offers a lot of examples: Getting Started with Tailwind CSS.

Quick start:

First-time setup

• Clone the kivy-website repository and move into the kivy-website folder

  git clone https://github.com/kivy/kivy-website.git
  cd kivy-website

• Install node requirements (tailwindcss)

  npm install

• Install the required python deps to build the website templates. (a virtualenv is recommended)

  pip install -r requirements.txt

Building the website (output is placed in the dist folder)

Development mode

Both tailwindcss and the build tool come with auto-reload options in order to speed up site development.

npm run develop

python tools/build.py --watch

Building for production

npm run build

python tools/build.py