Skip to content

Latest commit

 

History

History
89 lines (65 loc) · 2.88 KB

README.md

File metadata and controls

89 lines (65 loc) · 2.88 KB

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