Add content

docs/reference/Pipfile

@@ -16,6 +16,8 @@ sphinx-tabs = ">=3.4.5"
 sphinx-markdown-tables = ">=0.0.15"
 sphinx_book_theme = ">=1.1.3"
 sphinxcontrib-jquery = ">=4.1"
+sphinx-copybutton = ">=0.5.2"
+linkify-it-py = ">=2.0.3"
 
 [requires]
 python_version = "3"

docs/reference/conf.py

@@ -35,7 +35,7 @@
 # Add any Sphinx extension module names here, as strings. They can be
 # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
 # ones.
-extensions = ["myst_parser", "sphinx_markdown_tables", "sphinx.ext.autosectionlabel", "sphinxcontrib.jquery", "sphinx_tabs.tabs", "sphinx_design"]
+extensions = ["myst_parser", "sphinx_markdown_tables", "sphinx.ext.autosectionlabel", "sphinxcontrib.jquery", "sphinx_tabs.tabs", "sphinx_design", "sphinx_copybutton"]
 
 # Add any paths that contain templates here, relative to this directory.
 templates_path = ["_templates"]
@@ -119,7 +119,7 @@
 html_show_sourcelink = False
 
 myst_enable_extensions = [
-    "html_image", "colon_fence"
+    "html_image", "colon_fence", "linkify"
 ]
 
 myst_url_schemes = {

docs/reference/index.rst

@@ -7,18 +7,43 @@
 .. toctree::
    :hidden:
    :maxdepth: 2
-   :caption: Reference
 
-   src/reference/syntax/index.rst
+   SlintPad <https://slintpad.com>
+   Showcase <https://madewithslint.com>
+   Blog <https://blog.slint.dev>
+   Video Tutorials <https://www.youtube.com/@Slint-UI/playlists>
 
 .. toctree::
    :hidden:
    :maxdepth: 2
-   :caption: Introduction (Old)
+   :caption: Setting Up
 
    src/introduction/index.rst
-   src/introduction/supported_platforms.md
-   src/quickstart/index.rst
+   src/introduction/embedded.rst
+   src/introduction/desktop.rst
+   src/introduction/mobile.rst
+
+.. toctree::
+   :hidden:
+   :maxdepth: 2
+   :caption: First Steps
+
+   src/quickstart/getting_started.rst
+   src/quickstart/memory_tile.md   
+   src/quickstart/polishing_the_tile.md   
+   src/quickstart/from_one_to_multiple_tiles.md   
+   src/quickstart/creating_the_tiles.md   
+   src/quickstart/game_logic.md   
+   src/quickstart/running_in_a_browser.md
+   src/quickstart/ideas_for_the_reader.md   
+   src/quickstart/conclusion.md
+
+.. toctree::
+   :hidden:
+   :maxdepth: 2
+   :caption: Reference
+
+   src/reference/syntax/index.rst
 
 .. toctree::
    :hidden:

docs/reference/src/introduction/desktop.md

@@ -0,0 +1,52 @@
+<!-- Copyright © SixtyFPS GmbH <[email protected]> ; SPDX-License-Identifier: MIT -->
+
+# Build Desktop Applications
+
+Slint runs on many desktop and embedded platforms and micro-controllers.
+
+The platform descriptions below cover what has been tested for deployment. For the development environment,
+we recommend using a recent desktop operating system and compiler version.
+
+Contact [SixtyFPS GmbH](https://slint.dev/contact) if you need to support specific or older versions.
+
+## Desktop Platforms
+
+Generally, Slint runs on Windows, macOS, and popular Linux distributions. The following tables
+cover versions that we specifically test. The general objective is to support the operating systems that
+are supported by their vendors at the time of a Slint version release.
+
+### Windows
+
+| Operating System | Architecture |
+| ---------------- | ------------ |
+| Windows 10       | x86-64       |
+| Windows 11       | x86-64       |
+
+### macOS
+
+| Operating System  | Architecture    |
+| ----------------- | --------------- |
+| macOS 12 Monterey | x86-64, aarch64 |
+| macOS 13 Ventura  | x86-64, aarch64 |
+| macOS 14 Sonoma   | x86-64, aarch64 |
+
+### Linux
+
+Linux desktop distribution present a diverse landscape, and Slint should run on any of them, provided that they
+are using Wayland or X-Windows, glibc, and d-bus. If a Linux distribution provides Long Term Support (LTS),
+Slint should run on the most recent LTS or newer, at the time of a Slint version release.
+
+## Embedded Platforms
+
+Slint runs on a variety of embedded platforms. Generally speaking, Slint requires a modern Linux userspace
+with working OpenGL ES 2.0 (or newer) or Vulkan drivers. We've had success running Slint on
+
+-   Yocto based distributions. For C++ applications see [meta-slint](https://github.com/slint-ui/meta-slint) for recipes. Rust application work out of the box with Yocto's rust support.
+-   BuildRoot based distributions.
+-   [TorizonCore](https://www.torizon.io/torizoncore-os).
+
+### Microcontrollers
+
+Slint's platform abstraction allows for integration into any Rust or C++ based Microcontroller development
+environment. Developers need to implement functionality to feed input events such as touch or keyboard, as
+well as displaying the pixels rendered by Slint into a frame- or linebuffer.

docs/reference/src/introduction/embedded.md

@@ -0,0 +1,52 @@
+<!-- Copyright © SixtyFPS GmbH <[email protected]> ; SPDX-License-Identifier: MIT -->
+
+# Build Embedded Applications
+
+Slint runs on many desktop and embedded platforms and micro-controllers.
+
+The platform descriptions below cover what has been tested for deployment. For the development environment,
+we recommend using a recent desktop operating system and compiler version.
+
+Contact [SixtyFPS GmbH](https://slint.dev/contact) if you need to support specific or older versions.
+
+## Desktop Platforms
+
+Generally, Slint runs on Windows, macOS, and popular Linux distributions. The following tables
+cover versions that we specifically test. The general objective is to support the operating systems that
+are supported by their vendors at the time of a Slint version release.
+
+### Windows
+
+| Operating System | Architecture |
+| ---------------- | ------------ |
+| Windows 10       | x86-64       |
+| Windows 11       | x86-64       |
+
+### macOS
+
+| Operating System  | Architecture    |
+| ----------------- | --------------- |
+| macOS 12 Monterey | x86-64, aarch64 |
+| macOS 13 Ventura  | x86-64, aarch64 |
+| macOS 14 Sonoma   | x86-64, aarch64 |
+
+### Linux
+
+Linux desktop distribution present a diverse landscape, and Slint should run on any of them, provided that they
+are using Wayland or X-Windows, glibc, and d-bus. If a Linux distribution provides Long Term Support (LTS),
+Slint should run on the most recent LTS or newer, at the time of a Slint version release.
+
+## Embedded Platforms
+
+Slint runs on a variety of embedded platforms. Generally speaking, Slint requires a modern Linux userspace
+with working OpenGL ES 2.0 (or newer) or Vulkan drivers. We've had success running Slint on
+
+-   Yocto based distributions. For C++ applications see [meta-slint](https://github.com/slint-ui/meta-slint) for recipes. Rust application work out of the box with Yocto's rust support.
+-   BuildRoot based distributions.
+-   [TorizonCore](https://www.torizon.io/torizoncore-os).
+
+### Microcontrollers
+
+Slint's platform abstraction allows for integration into any Rust or C++ based Microcontroller development
+environment. Developers need to implement functionality to feed input events such as touch or keyboard, as
+well as displaying the pixels rendered by Slint into a frame- or linebuffer.

docs/reference/src/introduction/index.md

@@ -2,23 +2,138 @@
 
 # Getting Started
 
-Using Slint in your projects needs two components:
+Slint is a toolkit for creating reactive and fluent user interfaces across a range of targets, from embedded devices with limited resources to powerful mobile devices and desktop machines. 
 
-1. `.slint` files, which contain a textual description of the user interface, written in the Slint language.
-2. The programming language of the project where you embed the `.slint` files.
+Slint features an easy-to-learn domain-specific language (DSL) that compiles into native code, optimizing for the target device's capabilities. It facilitates collaboration between designers and developers on shared projects and supports business logic development in Rust, C++, JavaScript, or Python.
 
-    - Slint supports C++, Rust, and JavaScript.
+## Installation
 
-There are three different pathways to get started with Slint:
+### Prerequisites
 
-1. [SlintPad](https://slint.dev/editor) - Use this browser-based tool to get a feel for the Slint language.
-2. As a **UI Designer**, working with Slint files locally, we recommend the following combination of software tools:
+::::{tab-set}
+:::{tab-item} Cargo
+:sync: rust
+:selected: true
 
-    - [Visual Studio Code](https://code.visualstudio.com)
-    - [The Slint for Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=Slint.slint)
+```sh
+cargo add slint
+```
 
-3. As a **Software Developer**, integrating Slint into a new or existing code base, [follow the quickstart](slint-qs:index.html) and then for more in-depth next steps read the language-specific documentation:
+:::
 
-    - [C++](slint-cpp:index.html)
-    - [Rust](slint-rust:index.html)
-    - [JavaScript](slint-node:index.html)
+:::{tab-item} GitHub
+:sync: cpp
+
+```sh
+git clone https://github.com/slint-ui/slint.git
+```
+
+:::
+
+:::{tab-item} NPM
+:sync: nodejs
+
+```sh
+npm init && npm install slint-ui
+```
+
+:::
+
+:::{tab-item} PIP
+:sync: python
+
+```sh
+pip install slint
+```
+
+:::
+
+::::
+
+## Setting up Editors
+
+::::{tab-set}
+:::{tab-item} JetBrains IDE
+
+1. Download and install VS Code
+2. Install [Slint VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Slint.slint)
+
+:::
+
+:::{tab-item} Kate
+
+1. Download and install VS Code
+2. Install [Slint VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Slint.slint)
+
+:::
+
+:::{tab-item} Qt Creator
+
+1. Download and install VS Code
+2. Install [Slint VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Slint.slint)
+
+:::
+
+:::{tab-item} Sublime Text
+
+1. Download and install VS Code
+2. Install [Slint VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Slint.slint)
+
+:::
+
+:::{tab-item} Vim
+
+1. Download and install VS Code
+2. Install [Slint VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Slint.slint)
+
+:::
+
+:::{tab-item} Visual Studio Code
+:selected: true
+
+1. Download and install VS Code
+2. Install [Slint VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Slint.slint)
+
+:::
+
+:::{tab-item} Zed
+
+1. Download and install VS Code
+2. Install [Slint VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Slint.slint)
+
+:::
+
+::::
+
+## Start with a Template
+
+::::{tab-set}
+:::{tab-item} C++
+:sync: cpp
+
+```sh
+git clone https://github.com/slint-ui/slint.git
+```
+
+:::
+
+:::{tab-item} NodeJS
+:sync: nodejs
+
+```sh
+git clone https://github.com/slint-ui/slint.git
+```
+
+:::
+
+:::{tab-item} Rust
+:sync: rust
+:selected: true
+
+```sh
+git clone https://github.com/slint-ui/slint.git
+```
+
+:::
+
+::::

docs/reference/src/introduction/supported_platforms.md → docs/reference/src/introduction/mobile.md

@@ -1,6 +1,6 @@
 <!-- Copyright © SixtyFPS GmbH <[email protected]> ; SPDX-License-Identifier: MIT -->
 
-# Supported Platforms
+# Build Mobile Applications
 
 Slint runs on many desktop and embedded platforms and micro-controllers.
 

docs/reference/src/quickstart/getting_started.md

@@ -1,12 +1,20 @@
 <!-- Copyright © SixtyFPS GmbH <[email protected]> ; SPDX-License-Identifier: MIT -->
 
-# Getting started
+# Quickstart
 
-This tutorial shows you how to use the languages that Slint supports as the host programming language.
+This tutorial introduces you to the Slint framework in a playful way by implementing a memory game. It combines the Slint language for the graphics with the game rules implemented in C++, Rust, or NodeJS.
 
-We recommend using [our editor integrations for Slint](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
+The game consists of a grid of 16 rectangular tiles. Clicking on a tile uncovers an icon underneath.
+There are 8 different icons in total, so each tile has a sibling somewhere in the grid with the
+same icon. The objective is to locate all icon pairs. The player can uncover two tiles at the same time. If they
+aren't the same, the game obscures the icons again.
+If the player uncovers two tiles with the same icon, then they remain visible - they're solved.
 
-Slint has application templates you can use to create a project with dependencies already set up that follows recommended best practices.
+This is how the game looks in action:
+
+<!-- .. raw:: html -->
+
+   <video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/memory_clip.mp4" class="img-fluid img-thumbnail rounded"></video>
 
 ## Prerequisites