/kotlin-web-site

The Kotlin Programming Language Website

Primary LanguageJavaScriptApache License 2.0Apache-2.0

official project

This is the source for the Kotlin Web Site

Filing Bugs

We use YouTrack for bug reports and suggestions. Click here to report an issue.

Installation

Prerequisites

  • Python 3. Kotlinlang is a Flask-based site, so you'll need Python 3 to get it working.
  • Ruby + kramdown. Python has very poor support for Markdown, so kramdown is used as the Markdown-to-HTML converter.
  • nodejs + npm to build frontend assets

Installation

After installation of required tools run npm i to download all frontend dependencies and pip install -r requirements.txt to download backend dependencies.

Working with this site

Running this site

  • Use npm run build command to build assets. If you are going to modify js/scss files use npm start instead.
  • To run site use python kotlin-website.py command

Data

All data is stored in the *.yml files in folder _data:

  • _nav.yml site navigation and PDF building.
  • releases.yml info about releases.
  • videos.yml data for the Videos page. The content property is used to create categories. It contains a list of videos or other categories. Maximum tree depth level is 3.
  • events.yml event data.

Templates

Kotlinlang uses Jinja2 templates that can be found in templates folder. Note that all Markdown files are processed as Jinja templates before being converted to HTML. This allows you to use all Jinja power inside Markdown (for example, build urls with url_for function).

Page metadata

Every page can have an unlimited number of metadata fields. More information here. The most important of them are the page template (e.g. layout: reference) and its type (e.g. type: tutorial). category and title fields are added for future development.

Kotlin grammar reference

The Kotlin grammar reference (grammar.xml) is generated by the Kotlin grammar generator from the Kotlin grammar definition.

Writing content

Markup

kramdown with some additions (like GitHub fenced code blocks) is used as Markdown parser. See the complete syntax reference at the kramdown site.

Specifying page element attributes

With kramdown you can assign HTML attributes to page elements via {:%param%}. E.g.:

  • *important text*{:.important} - produces <em class="important">important text</em>
  • *important text*{:#id} - produces <em id="id">important text</em>

For block elements this instruction must be specified on the line following element definition:

This is a paragraph
{:.important}

This is a paragraph

More information about attributes can be found here.

Custom element styles

Inline elements

  • {:.keyword} highlights a keyword.
  • {:.error} highlights an error.
  • {:.warning} highlights a warning.

Tables

  • {:.wide} stretches a table to occupy the entire width of a page.
  • {:.zebra} interleaves table rows.

E.g.:

| Expression | Translated to |
|------------|---------------|
| `a++` | `a.inc()` + see below |
| `a--` | `a.dec()` + see below |
{:.wide.zebra}

Quotation blocks

They're used in a slightly other manner that they were originally designed for: as universal block container elements.

  • {:.note} highlights a note block.

E.g.:

> **`inc()/dec()` shouldn't mutate the receiver object**.
>
> By "changing the receiver" we mean `the receiver-variable`, not the receiver object.
{:.note}