feat: moved docs to Ewwii-sh/docs
This commit is contained in:
Byson94
31
.github/workflows/gh-pages.yml
vendored
31
.github/workflows/gh-pages.yml
vendored
@@ -1,31 +0,0 @@
|
||||
name: Build and deploy Github pages
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
paths:
|
||||
- "docs/**"
|
||||
- "gen-docs.ts"
|
||||
- "crates/eww/src/widgets/widget_definitions.rs"
|
||||
- "crates/eww/src/config/inbuilt.rs"
|
||||
- ".github/workflows/**"
|
||||
jobs:
|
||||
build:
|
||||
name: Build mdBook
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
# Checkout
|
||||
- uses: actions/checkout@master
|
||||
|
||||
# Build & deploy
|
||||
- name: build mdBook page
|
||||
uses: peaceiris/actions-mdbook@v1
|
||||
with:
|
||||
mdbook-version: "0.4.8"
|
||||
- run: mdbook build docs
|
||||
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./docs/book/
|
||||
1
docs/.gitignore
vendored
1
docs/.gitignore
vendored
@@ -1 +0,0 @@
|
||||
book
|
||||
@@ -1,11 +0,0 @@
|
||||
[book]
|
||||
authors = ["byson94"]
|
||||
language = "en"
|
||||
multilingual = false
|
||||
src = "src"
|
||||
title = "Ewii documentation"
|
||||
|
||||
[output.html]
|
||||
default-theme = "navy"
|
||||
git-repository-url = "https://github.com/byson94/ewwii/tree/master/docs"
|
||||
site-url = "/"
|
||||
@@ -1,36 +0,0 @@
|
||||
# Summary
|
||||
|
||||
[Introduction](introduction.md)
|
||||
|
||||
- [Getting Started](getting_started.md)
|
||||
|
||||
- [Installation](installation.md)
|
||||
|
||||
- [Configuration & Syntax](config/config_and_syntax.md)
|
||||
|
||||
- [Configuration](config/configuration.md)
|
||||
- [Rendering and Best Practices](config/rendering_and_best_practices.md)
|
||||
- [Fundamentals](config/config_fundamentals.md)
|
||||
- [Variables](config/variables.md)
|
||||
- [Expression Language](config/expression_language.md)
|
||||
<!-- - [Magic Variables](magic-vars.md) -->
|
||||
|
||||
- [Theming & UI](theming/theming_and_ui.md)
|
||||
|
||||
- [Working With GTK](theming/working_with_gtk.md)
|
||||
- [Styling Widgets](theming/styling_widgets.md)
|
||||
|
||||
- [Modules](modules/modules.md)
|
||||
|
||||
- [Widgets](widgets/widgets.md)
|
||||
|
||||
- [Widgets & Parameters](widgets/widgets_and_params.md)
|
||||
- [Widget Properties](widgets/props.md)
|
||||
|
||||
- [Examples](examples/examples.md)
|
||||
|
||||
- [Common Layouts](examples/common_layouts.md)
|
||||
- [Interactive Widgets](examples/interactive.md)
|
||||
- [Theming Tricks](examples/theming.md)
|
||||
|
||||
- [Troubleshooting](troubleshooting.md)
|
||||
@@ -1,14 +0,0 @@
|
||||
# Configuration & Syntax
|
||||
|
||||
This section introduces the foundational systems that define how you configure your UI, express logic, and work with dynamic data in Rahi (Ewwii's configuration language).
|
||||
|
||||
The configuration model is imparative by nature but will be used in a declarative format that is made to make configuring ewwii easy as well as to provide a logical way of configuring. You'll also work with special built in functions and modules that expose live system state and other information.
|
||||
|
||||
We'll cover:
|
||||
|
||||
- The structure of configuration files
|
||||
- Embedding expressions within properties and attributes
|
||||
- Accessing and using built-in variables
|
||||
- Interpolation, scoping, and reactivity rules
|
||||
|
||||
> If you're coming from EWW's Yuck, expect similarities in structure but with much more flexibility and logical programming.
|
||||
@@ -1,119 +0,0 @@
|
||||
# Fundamentals
|
||||
|
||||
Ewwii uses Rhai as its configuration language. But instead of just pure Rhai, ewwii has its own layout that users should follow to create widgets using Rhai. And you may be wondering why ewwii has a "custom" layout instead of allowing users to just use pure Rhai. It's good question and the reason why ewwii has a custom layout is because it tries to remove unnecessary complexity.
|
||||
|
||||
The full reasons for this layout wont be explained much more because it goes way deeper than just "decreasing complexity".
|
||||
|
||||
For more information about Rhai, you can read [their documentation](https://rhai.rs/book/).
|
||||
|
||||
## Widgets and their parameters
|
||||
|
||||
Each widget in ewwii is a function (e.g: `button(#{...})` is a function call to create a button). So each one requires its own parameters.
|
||||
|
||||
For example, `defwindow` expects a **String**, **Properties**, and a function call that **returns a widget.**
|
||||
|
||||
**Example:**
|
||||
|
||||
```rust,ignore
|
||||
enter([
|
||||
// the string here (the text in "") is the name of the window
|
||||
// the content in #{} is the properties
|
||||
// and the 3rd `root_widget()` call is the function that returns a child.
|
||||
|
||||
// defwindow cant have children in [] directly, but it expects a function returning it for it.
|
||||
defwindow("example", #{
|
||||
monitor: 0,
|
||||
windowtype: "dock",
|
||||
stacking: "fg",
|
||||
wm_ignore: false,
|
||||
geometry: #{
|
||||
x: "0%",
|
||||
y: "2px",
|
||||
width: "90%",
|
||||
height: "30px",
|
||||
anchor: "top center"
|
||||
},
|
||||
reserve: #{ distance: "40px" side: "top" }
|
||||
}, root_widget())
|
||||
])
|
||||
```
|
||||
|
||||
This is not that complex once you know the parameters of defwindow as most of the other widgets only take in properties or optinally children. **Poll/Listen** are the only things that is similar to `defwindow` and you will learn about it later in the [variables chapter](./variables.md).
|
||||
|
||||
## The root
|
||||
|
||||
It is an important concept that users must know to go forward with this documentaiton. Ewwii's Rhai layout is made to be **logical and powerful**, so the user is given access the root of the entire widget system.
|
||||
|
||||
The root is defined as `enter()` and it is where you should write `defwindow`.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```rust,ignore
|
||||
enter([
|
||||
defwindow("example", #{
|
||||
monitor: 0,
|
||||
windowtype: "dock",
|
||||
stacking: "fg",
|
||||
wm_ignore: false,
|
||||
geometry: #{
|
||||
x: "0%",
|
||||
y: "2px",
|
||||
width: "90%",
|
||||
height: "30px",
|
||||
anchor: "top center"
|
||||
},
|
||||
reserve: #{ distance: "40px" side: "top" }
|
||||
}, root_widget())
|
||||
])
|
||||
```
|
||||
|
||||
Now that you saw this example, you may be wondering why we are doing `enter([])` instead of `enter()`. That is due to another fundamental concept in ewwii which is very important. You will learn about it in the [properties and child definition section](#properties-and-child-definition).
|
||||
|
||||
## Semi-colons
|
||||
|
||||
Semi-colon is an important character in Rhai. Just like programming languages like JavaScript, Java, Rust etc.
|
||||
|
||||
You can use the following link to read about semi-colons in the Rhai book as they have an awesome documentation.
|
||||
|
||||
[https://rhai.rs/book/ref/statements.html#statements](https://rhai.rs/book/ref/statements.html#statements)
|
||||
|
||||
## Properties and child definition
|
||||
|
||||
The part where most people get confused is the use of `[]` and `#{}`. Let's get into what those are and how you can use them.
|
||||
|
||||
The `[]` is used for adding **children** to a widget.
|
||||
|
||||
**Example:**
|
||||
|
||||
```rust,ignore
|
||||
fn greeter(foo) {
|
||||
return box(#{
|
||||
orientation: "horizontal",
|
||||
halign: "center"
|
||||
}, [
|
||||
// the `[]` holds a button which is the child widget of the box widget
|
||||
// each element in a `[]` should end in a comma (,) instead of a semi-colon (;).
|
||||
button(#{ onclick: `notify-send '${foo}'`, label: "baz" }),
|
||||
label(#{ text: "example" }),
|
||||
]);
|
||||
};
|
||||
```
|
||||
|
||||
The `#{}` works similar to the `[]` but, it is used to add properties into the widget.
|
||||
|
||||
**Example:**
|
||||
|
||||
```rust,ignore
|
||||
fn greeter(foo) {
|
||||
// the `#{}` holds the properties of the box widget
|
||||
// each element in a `#{}` should end in a comma (,) instead of a semi-colon (;).
|
||||
return box(#{
|
||||
orientation: "horizontal",
|
||||
halign: "center"
|
||||
}, [
|
||||
// properties are assigned to both button and label using the #{}.
|
||||
button(#{ onclick: `notify-send '${foo}'`, label: "baz" }),
|
||||
label(#{ text: "example" }),
|
||||
]);
|
||||
};
|
||||
```
|
||||
@@ -1,139 +0,0 @@
|
||||
# Writing your ewwii configuration
|
||||
|
||||
(For a list of all built-in widgets (i.e. `box`, `label`, `button`), see [Widget Documentation](../widgets/widgets.md).)\
|
||||
Ewwii is configured using its own language called `rhai`.
|
||||
Using rhai, you declare the structure and content of your widgets, the geometry, position, and behavior of any windows,
|
||||
as well as any state and data that will be used in your widgets.
|
||||
Rhai is based around imparative syntax, which you may know from programming languages like C, Rust etc.
|
||||
If you're using vim, you can make use of [vim-rhai](https://github.com/rhaiscript/vim-rhai) for editor support.
|
||||
If you're using VSCode, you can get syntax highlighting and formatting from [vscode-rhai](https://marketplace.visualstudio.com/items?itemName=rhaiscript.vscode-rhai).
|
||||
|
||||
Additionally, any styles are defined in CSS or SCSS (which is mostly just slightly improved CSS syntax).
|
||||
While ewwii supports a significant portion of the CSS you know from the web,
|
||||
not everything is supported, as ewwii relies on GTK's own CSS engine.
|
||||
Notably, some animation features are unsupported,
|
||||
as well as most layout-related CSS properties such as flexbox, `float`, absolute position or `width`/`height`.
|
||||
|
||||
To get started, you'll need to create two files: `ewwii.rhai` and `ewwii.scss` (or `ewwii.css`, if you prefer).
|
||||
These files must be placed under `$XDG_CONFIG_HOME/ewwii` (this is most likely `~/.config/ewwii`).
|
||||
|
||||
Now that those files are created, you can start writing your first widget!
|
||||
|
||||
## Creating your first window
|
||||
|
||||
Firstly, you will need to create a top-level window. Here, you configure things such as the name, position, geometry, and content of your window.
|
||||
|
||||
Let's look at an example window definition:
|
||||
|
||||
```rust,ignore
|
||||
enter([ // Add all defwindow inside enter. Enter is the root of the config.
|
||||
defwindow("example", #{
|
||||
monitor: 0,
|
||||
windowtype: "dock",
|
||||
stacking: "fg",
|
||||
wm_ignore: false,
|
||||
geometry: #{
|
||||
x: "0%",
|
||||
y: "2px",
|
||||
width: "90%",
|
||||
height: "30px",
|
||||
anchor: "top center"
|
||||
},
|
||||
reserve: #{ distance: "40px" side: "top" }
|
||||
}, label(#{ text: "example content" }))
|
||||
])
|
||||
```
|
||||
|
||||
Here, we are defining a window named `example`, which we then define a set of properties for. Additionally, we set the content of the window to be the text `"example content"`.
|
||||
|
||||
You can now open your first window by running `eww open example`! Glorious!
|
||||
|
||||
### `defwindow`-properties
|
||||
|
||||
| Property | Description |
|
||||
| ---------: | ------------------------------------------------------------------------ |
|
||||
| `monitor` | Which monitor this window should be displayed on. See below for details. |
|
||||
| `geometry` | Geometry of the window. |
|
||||
|
||||
**`monitor`-property**
|
||||
|
||||
This field can be:
|
||||
|
||||
- the string `<primary>`, in which case ewwii tries to identify the primary display (which may fail, especially on wayland)
|
||||
- an integer, declaring the monitor index
|
||||
- the name of the monitor
|
||||
- a string containing a JSON-array of monitor matchers, such as: `'["<primary>", "HDMI-A-1", "PHL 345B1C", 0]'`. Ewwii will try to find a match in order, allowing you to specify fallbacks.
|
||||
|
||||
**`geometry`-properties**
|
||||
|
||||
| Property | Description |
|
||||
| ----------------: | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| `x`, `y` | Position of the window. Values may be provided in `px` or `%`. Will be relative to `anchor`. |
|
||||
| `width`, `height` | Width and height of the window. Values may be provided in `px` or `%`. |
|
||||
| `anchor` | Anchor-point of the window. Either `center` or combinations of `top`, `center`, `bottom` and `left`, `center`, `right`. |
|
||||
|
||||
<br/>
|
||||
Depending on if you are using X11 or Wayland, some additional properties exist:
|
||||
|
||||
#### X11
|
||||
|
||||
| Property | Description |
|
||||
| -----------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `stacking` | Where the window should appear in the stack. Possible values: `fg`, `bg`. |
|
||||
| `wm_ignore` | Whether the window manager should ignore this window. This is useful for dashboard-style widgets that don't need to interact with other windows at all. Note that this makes some of the other properties not have any effect. Either `true` or `false`. |
|
||||
| `reserve` | Specify how the window manager should make space for your window. This is useful for bars, which should not overlap any other windows. |
|
||||
| `windowtype` | Specify what type of window this is. This will be used by your window manager to determine how it should handle your window. Possible values: `normal`, `dock`, `toolbar`, `dialog`, `desktop`. Default: `dock` if `reserve` is specified, `normal` otherwise. |
|
||||
|
||||
#### Wayland
|
||||
|
||||
| Property | Description |
|
||||
| ----------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `stacking` | Where the window should appear in the stack. Possible values: `fg`, `bg`, `overlay`, `bottom`. |
|
||||
| `exclusive` | Whether the compositor should reserve space for the window automatically. Either `true` or `false`. If `true` `:anchor` has to include `center`. |
|
||||
| `focusable` | Whether the window should be able to be focused. This is necessary for any widgets that use the keyboard to work. Possible values: `none`, `exclusive` and `ondemand`. |
|
||||
| `namespace` | Set the wayland layersurface namespace ewwii uses. Accepts a `string` value. |
|
||||
|
||||
## Your first widget
|
||||
|
||||
While our bar is already looking great, it's a bit boring. Thus, let's add some actual content!
|
||||
|
||||
```rust,ignore
|
||||
fn greeter(name) {
|
||||
return box(#{
|
||||
orientation: "horizontal",
|
||||
halign: "center"
|
||||
}, [
|
||||
button(#{ onclick: `notify-send 'Hello' 'Hello, ${name}'`, label: "Greet" })
|
||||
]);
|
||||
};
|
||||
```
|
||||
|
||||
To show this, let's replace the text in our window definition with a call to this new widget:
|
||||
|
||||
```rust,ignore
|
||||
enter([
|
||||
defwindow("example", #{
|
||||
// ... properties omitted
|
||||
}, greeter("Bob"))
|
||||
])
|
||||
```
|
||||
|
||||
There is a lot going on here, so let's step through this.
|
||||
|
||||
We are creating a function named `greeter` and a function is equal to a component that returns a child (widget). So function has two uses: one to return a component, and the other to do a set of functions.
|
||||
And this function takes one parameters, called `name`. The `name` parameter _must_ be provided or else, you should emit it. Rhai does allow adding optional parameters, but we will talk about it later for the sake of beginners who are in-experienced with imprative programming languages.
|
||||
|
||||
Now inside the function, we declare the body of our widget that we are returning. We make use of a `box`, which we set a couple properties of.
|
||||
|
||||
We need this `box`, as a function can only ever contain a single widget - otherwise,
|
||||
ewwii would not know if it should align them vertically or horizontally, how it should space them, and so on.
|
||||
Thus, we wrap multiple children in a `box`.
|
||||
This box then contains a button.
|
||||
In that button's `onclick` property, we refer to the provided `name` using string-interpolation syntax: `` `${name}` ``. It is not possible to use a variable within a `""` or `''` just like javascript. You can learn more about it [here](https://rhai.rs/book/ref/strings-chars.html?interpolation#string-interpolation).
|
||||
|
||||
<!-- TODO -->
|
||||
<!-- In fact, there is a lot more you can do within `${...}` - more on that in the chapter about the [expression language](expression_language.md). -->
|
||||
|
||||
To then use our widget, we call the function that provides the widget with the necessary parameters passed.
|
||||
|
||||
As you may have noticed, we are using a couple predefined widgets here. These are all listed and explained in the [widgets chapter](widgets.md).
|
||||
@@ -1,87 +0,0 @@
|
||||
# The Rhai Expression Engine
|
||||
|
||||
Ewwii uses [Rhai](https://rhai.rs/) as its core expression and scripting engine. This means your configuration is more than just static values or simple substitutions—it’s **real code**, and you can use it anywhere dynamic behavior is needed.
|
||||
|
||||
Rhai expressions can:
|
||||
|
||||
- Perform logic and branching (`if`, `match`, `? :`)
|
||||
- Handle mathematical calculations and string operations
|
||||
- Access nested data from arrays, maps, or JSON
|
||||
- Run custom functions
|
||||
- Be used directly in layout definitions, widget attributes, and style rules
|
||||
|
||||
Unlike Yuck, where expressions were embedded in `{ ... }` or `${ ... }`, Rhai treats expressions as **native**. They don’t need to be wrapped in special delimiters. If you can write it in Rhai, it just works.
|
||||
|
||||
## Example
|
||||
|
||||
```rust,ignore
|
||||
let value = 12 + foo * 10;
|
||||
|
||||
box(#{
|
||||
class: "baz"
|
||||
orientation: "h",
|
||||
}, [
|
||||
button(#{
|
||||
class: button_active ? "active" : "inactive",
|
||||
on_click: "toggle_thing",
|
||||
label: `Some math: ${value}`,
|
||||
}),
|
||||
]);
|
||||
```
|
||||
|
||||
## Core Features
|
||||
|
||||
Rhai supports a wide range of expression capabilities:
|
||||
|
||||
- **Mathematics**: `+`, `-`, `*`, `/`, `%`
|
||||
- **Comparisons**: `==`, `!=`, `<`, `>`, `<=`, `>=`
|
||||
- **Boolean logic**: `&&`, `||`, `!`
|
||||
- **Conditionals**: `if/else`, ternary (`cond ? a : b`)
|
||||
- **Regex matching**: `=~` operator (Rust-style regex)
|
||||
- **Optional access**: `?.` and `?.[index]`
|
||||
- **Data structures**: maps/arrays (`obj.field`, `arr[3]`, `map["key"]`)
|
||||
- **Function calls**: standard and Ewwii-specific built-ins (see below)
|
||||
- **String interpolation**: `` `Value is ${value}` `` (standard Rhai feature)
|
||||
|
||||
> Note
|
||||
>
|
||||
> ---
|
||||
>
|
||||
> Rhai only allows string interpolation only for the strings that are quoted in `` similar to JavaScript.
|
||||
>
|
||||
> > Learn more about it [here](https://rhai.rs/book/ref/strings-chars.html?interpolation#string-interpolation).
|
||||
|
||||
## Common Built-in Functions
|
||||
|
||||
💡 _You may recognize some of these from the old expression system—but now they're just Rhai functions._
|
||||
|
||||
Examples include:
|
||||
|
||||
- `round()`, `floor()`, `ceil()`, `powi()`, `powf()`
|
||||
- `min()`, `max()`, `sin()`, `cos()`, etc.
|
||||
- `replace()`, `matches()`, `captures()`
|
||||
- `strlength()`, `arraylength()`, `objectlength()`
|
||||
- `jq()` – run jaq-compatible filters on JSON data
|
||||
- `get_env()` – read environment variables
|
||||
- `formattime()` – format UNIX timestamps
|
||||
- `formatbytes()` – format file sizes (IEC or SI)
|
||||
|
||||
## Dynamic Usage
|
||||
|
||||
Because expressions are just Rhai, you can now write real logic inline or break it into reusable functions:
|
||||
|
||||
```rust,ignore
|
||||
fn status_text(active) {
|
||||
return active ? "enabled" : "disabled";
|
||||
}
|
||||
|
||||
label({
|
||||
text: `Status: ${status_text(system_active)}`
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### TL;DR
|
||||
|
||||
> If you’ve used scripting languages like JavaScript or Lua, you’ll feel at home. Rhai gives you real control—not just interpolation tricks.
|
||||
@@ -1,133 +0,0 @@
|
||||
# Rendering and Best Practices
|
||||
|
||||
## Rendering children in your widgets
|
||||
|
||||
As your configuration grows, you might want to improve its structure by factoring out pieces into reusable functions.
|
||||
|
||||
In Ewwii’s Rhai-based configuration system, you can define wrapper functions that return widgets and accept a `children` parameter (or any parameter that you prefer), just like built-in widgets such as `box()` or `button()`.
|
||||
|
||||
Here's an example of a custom container that adds a label before its children:
|
||||
|
||||
```rust,ignore
|
||||
fn labeled_container(name, children = []) {
|
||||
return box(#{ class: "container" }, [label(#{text: name})] + children)
|
||||
}
|
||||
```
|
||||
|
||||
You can call it like this:
|
||||
|
||||
```rust,ignore
|
||||
labeled_container("foo", [
|
||||
button(#{ onclick: "notify-send hey ho", label: "Click me" })
|
||||
]);
|
||||
```
|
||||
|
||||
Because children are just a list of widgets, you can also write functions that structure them however you'd like. For example, here's a layout that places the first two children side by side:
|
||||
|
||||
```rust,ignore
|
||||
fn two_boxes(children = []) {
|
||||
return box(#{}, [
|
||||
box(#{ class: "first" }, [children[0]]),
|
||||
box(#{ class: "second" }, [children[1]])
|
||||
]);
|
||||
}
|
||||
```
|
||||
|
||||
And call it like this:
|
||||
|
||||
```rust,ignore
|
||||
two_boxes([
|
||||
label(#{ text: "First" }),
|
||||
label(#{ text: "Second" })
|
||||
]);
|
||||
```
|
||||
|
||||
If a child is missing (e.g., children[1] doesn't exist), make sure to handle that gracefully or document the expected number of children.
|
||||
|
||||
<!-- TODO: add it once literal is implemented -->
|
||||
<!-- ## Dynamically generated widgets with `literal`
|
||||
|
||||
In some cases, you want to not only change the text,
|
||||
value, or color of a widget dynamically, but instead want to generate an entire widget structure dynamically.
|
||||
This is necessary if you want to display lists of things (for example notifications)
|
||||
where the amount is not necessarily known,
|
||||
or if you want to change the widget structure in some other, more complex way.
|
||||
|
||||
For this, you can make use of one of ewwii's most powerful features: the `literal` widget.
|
||||
|
||||
```rust,ignore
|
||||
let variable_containing_rhai = "(box (button 'foo') (button 'bar'))";
|
||||
|
||||
// Then, inside your widget, use:
|
||||
literal(#{ content: variable_containing_rhai })
|
||||
```
|
||||
|
||||
Here, you specify the content of your literal by providing it a string (most likely stored in a variable) which contains a single yuck widget tree.
|
||||
Ewwii then reads the provided value and renders the resulting widget. Whenever it changes, the widget will be rerendered.
|
||||
|
||||
Note that this is not all that efficient. Make sure to only use `literal` when necessary! -->
|
||||
|
||||
## Window ID
|
||||
|
||||
In some cases you may want to use the same window configuration for multiple widgets, e.g. for multiple windows. This is where arguments and ids come in.
|
||||
|
||||
Firstly let us start off with ids. An id can be specified in the `open` command
|
||||
with `--id`, by default the id will be set to the name of the window
|
||||
configuration. These ids allow you to spawn multiple of the same windows. So
|
||||
for example you can do:
|
||||
|
||||
```bash
|
||||
ewwii open my_bar --screen 0 --id primary
|
||||
ewwii open my_bar --screen 1 --id secondary
|
||||
```
|
||||
|
||||
## Generating a list of widgets from array using `for`
|
||||
|
||||
If you want to display a list of values, you can use the `for`-Element to fill a container with a list of elements generated from a JSON-array.
|
||||
|
||||
```rust,ignore
|
||||
let my_array = [1, 2, 3];
|
||||
|
||||
// Then, inside your widget, you can use
|
||||
box(#{}, [
|
||||
for entry in my_array {
|
||||
button(#{ onclick: `notify-send 'click' 'button ${entry}'`, label: entry.to_string() })
|
||||
}
|
||||
])
|
||||
```
|
||||
|
||||
This can be useful in many situations, for example when generating a workspace list from an array representation of your workspaces.
|
||||
In many cases, this can be used instead of `literal`, and should most likely be preferred in those cases.
|
||||
|
||||
<!-- To see how to declare and use more advanced data structures, check out the [data structures example](/examples/data-structures/ewwii.rhai). -->
|
||||
|
||||
## Splitting up your configuration
|
||||
|
||||
As time passes, your configuration might grow larger and larger. Luckily, you can easily split up your configuration into multiple files!
|
||||
|
||||
There are two options to achieve this:
|
||||
|
||||
### Using `import/export`
|
||||
|
||||
```rust,ignore
|
||||
// in ./foo/baz.rhai
|
||||
fn greet() { return "Greetings!" }
|
||||
export greet;
|
||||
|
||||
// in ./ewwii.rhai
|
||||
import "foo/baz" as example;
|
||||
print(example::greet()); // output: Greetings!
|
||||
```
|
||||
|
||||
A rhai file may import the contents of any other rhai file that they export. For this, make use of the `import` directive. If you are exporting a variable/function, make use the `export` directive.
|
||||
|
||||
### Using a separate ewwii configuration directory
|
||||
|
||||
If you want to separate different widgets even further, you can create a new ewwii config folder anywhere else.
|
||||
Then, you can tell ewwii to use that configuration directory by passing _every_ command the `--config /path/to/your/config/dir` flag.
|
||||
Make sure to actually include this in all your `ewwii` calls, including `ewwii kill`, `eww logs`, etc.
|
||||
This launches a separate instance of the ewwii daemon that has separate logs and state from your main ewwii configuration.
|
||||
|
||||
```bash
|
||||
ewwii --config "/path/to/your/config/dir"
|
||||
```
|
||||
@@ -1,131 +0,0 @@
|
||||
# Variables
|
||||
|
||||
Now that you feel sufficiently greeted by your bar, you may realize that showing data like the time and date might be even more useful than having a button that greets you.
|
||||
|
||||
To implement dynamic content in your widgets, you make use of _variables_.
|
||||
|
||||
All variables are only locally available so you would need to pass it around using function parameters. And whenever the variable changes, the value in the widget will update!
|
||||
|
||||
## Static variables
|
||||
|
||||
In Rhai, all variables are dynamically typed bindings to values. You can define variables using let, pass them as function parameters.
|
||||
|
||||
**Basic variables (`let`)**
|
||||
|
||||
```rust,ignore
|
||||
let foo = "value";
|
||||
```
|
||||
|
||||
This is the simplest type of variable.
|
||||
Basic variables don't ever change automatically, if you need a dynamic variable, you can use built in functions like `poll()` and `listen()` to register dynamic values which we will talk about in the following section.
|
||||
|
||||
## Dynamic variables
|
||||
|
||||
Just having static variables that wont update is pretty limiting. So, ewwii has two built in functions to register dynamic variables that can change according to the command.
|
||||
|
||||
**Polling variables (`poll`)**
|
||||
|
||||
```rust,ignore
|
||||
poll("var_name", #{
|
||||
// It is recommended to have initial property passed.
|
||||
// If not provided, it will default to no value which may cause problems when used.
|
||||
// You can pass something like "" if you want no initial value.
|
||||
initial: "inital value",
|
||||
interval: "2s",
|
||||
cmd: "date +%H:%M:%S", // command to execute
|
||||
})
|
||||
```
|
||||
|
||||
A polling variable is a variable which runs a provided shell-script repeatedly, in a given interval.
|
||||
|
||||
This may be the most commonly used type of variable.
|
||||
They are useful to access any quickly retrieved value repeatedly,
|
||||
and thus are the perfect choice for showing your time, date, as well as other bits of information such as pending package updates, weather, and battery level.
|
||||
But it is important to note that these variables are locally available only in enter (a.k.a the root) and you need to pass it to other functions with something like `some_fn(foo)` when you want to use a polled variable.
|
||||
|
||||
<!-- You can also specify an initial-value. This should prevent ewwii from waiting for the result of a given command during startup, thus
|
||||
making the startup time faster. -->
|
||||
|
||||
To externally update a polling variable, `ewwii update` can be used like with basic variables to assign a value.
|
||||
|
||||
**Listening variables (`listen`)**
|
||||
|
||||
```rust,ignore
|
||||
listen("foo", #{
|
||||
initial: "whatever",
|
||||
cmd: "tail -F /tmp/some_file",
|
||||
})
|
||||
```
|
||||
|
||||
Listening variables might be the most confusing of the bunch.
|
||||
A listening variable runs a script once, and reads its output continously.
|
||||
Whenever the script outputs a new line, the value will be updated to that new line.
|
||||
In the example given above, the value of `foo` will start out as `"whatever"`, and will change whenever a new line is appended to `/tmp/some_file`.
|
||||
|
||||
These are particularly useful when you want to apply changes instantaneously when an operation happens if you have a script
|
||||
that can monitor some value on its own. Volume, brightness, workspaces that get added/removed at runtime,
|
||||
monitoring currently focused desktop/tag, etc. are the most common usecases of this type of variable.
|
||||
These are particularly efficient and should be preffered if possible.
|
||||
|
||||
For example, the command `xprop -spy -root _NET_CURRENT_DESKTOP` writes the currently focused desktop whenever it changes.
|
||||
Another example usecase is monitoring the currently playing song with playerctl: `playerctl --follow metadata --format {{title}}`.
|
||||
|
||||
<!--
|
||||
**Built-in "magic" variables**
|
||||
|
||||
In addition to defining your own variables, ewwii provides some values for you to use out of the box.
|
||||
These include values such as your CPU and RAM usage.
|
||||
These mostly contain their data as JSON, which you can then get using the [json access syntax](expression_language.md).
|
||||
All available magic variables are listed [here](magic-vars.md). -->
|
||||
|
||||
## Passing variables
|
||||
|
||||
As we discussed earlier, all variables are only available locally. So, you would need to pass it around from the current scope.
|
||||
|
||||
Here is an example of how it is done:
|
||||
|
||||
```rust,ignore
|
||||
let foo = "example";
|
||||
|
||||
poll("time", #{
|
||||
initial: "inital value",
|
||||
interval: "2s",
|
||||
cmd: "date +%H:%M:%S",
|
||||
})
|
||||
|
||||
// Here we have 2 variables named "time" (registered dynamically by poll) and foo (a static variable)
|
||||
|
||||
// here is an example of something that wont
|
||||
fn wont_work() {
|
||||
return box(#{}, [ label(#{ text: time }), label(#{ text: foo }) ]);
|
||||
}
|
||||
```
|
||||
|
||||
## dyn_id
|
||||
|
||||
`dyn_id`'s are one of the most important properties of all. It is the property that decides if a widget should get updated dynamic or not.
|
||||
|
||||
`dyn_id` property is used to assign an id to a widget which the system will track to update if there is a change in property under the same id.
|
||||
|
||||
**Example usage:**
|
||||
|
||||
```rust,ignore
|
||||
fn foo(foo_var) {
|
||||
return box(#{}, [
|
||||
label(#{ text: foo_var, dyn_id: "foo_var_user" }); // dyn_id used to make label dynamic
|
||||
]);
|
||||
}
|
||||
|
||||
enter([
|
||||
defpoll("foo", #{
|
||||
cmd: "echo baz",
|
||||
initial: "",
|
||||
interval: "1s"
|
||||
}),
|
||||
defwindow("bar", #{
|
||||
// .. properties omitted
|
||||
}, bar(foo)),
|
||||
])
|
||||
```
|
||||
|
||||
Here, when the variable foo changes, the text of label changes as well. If there is no `dyn_id` defined, then ewwii will ingore that change. But if it is defined with a unique value, then it will find the widget that is defined with the id that matches dyn_id and then update its text property which will result in a change in the UI.
|
||||
@@ -1,13 +0,0 @@
|
||||
# Examples
|
||||
|
||||
This section provides hands-on, practical demonstrations of everything covered so far. Real layouts, interactive components, and theming techniques will be used in these examples.
|
||||
|
||||
Each example is minimal but complete, focusing on a particular design pattern or technique. You can copy-paste them into your own config to experiment.
|
||||
|
||||
Included:
|
||||
|
||||
- Common layout patterns (e.g., bars, panels, dashboards)
|
||||
- Interactive elements like buttons, sliders, toggles
|
||||
- Theming techniques and tricks to override or enhance GTK styles
|
||||
|
||||
If you're stuck or just looking for inspiration, this is your go-to reference.
|
||||
@@ -1 +0,0 @@
|
||||
# Common Layouts
|
||||
@@ -1 +0,0 @@
|
||||
# Examples
|
||||
@@ -1 +0,0 @@
|
||||
# Interactive Widgets
|
||||
@@ -1 +0,0 @@
|
||||
# Theming Tricks
|
||||
@@ -1,3 +0,0 @@
|
||||
# Getting Started
|
||||
|
||||
Getting starting with Ewwii. This section will cover how you can install and use ewwii.
|
||||
@@ -1,90 +0,0 @@
|
||||
# Installation
|
||||
|
||||
The first step of using Ewwii is installing it. You would need to have the following prerequesties installed on your system to build/install ewwii.
|
||||
|
||||
**Prerequesties:**
|
||||
|
||||
- rustc
|
||||
- cargo
|
||||
|
||||
Rather than with your system package manager,
|
||||
I **strongly** recommend installing it using [rustup](https://rustup.rs/).
|
||||
|
||||
Additionally, eww requires some dynamic libraries to be available on your system.
|
||||
The exact names of the packages that provide these may differ depending on your distribution.
|
||||
The following list of package names should work for arch linux:
|
||||
|
||||
<details>
|
||||
<summary><strong>Packages (click here)</strong></summary>
|
||||
|
||||
- gtk3 (libgdk-3, libgtk-3)
|
||||
- gtk-layer-shell (only on Wayland)
|
||||
- pango (libpango)
|
||||
- gdk-pixbuf2 (libgdk_pixbuf-2)
|
||||
- libdbusmenu-gtk3
|
||||
- cairo (libcairo, libcairo-gobject)
|
||||
- glib2 (libgio, libglib-2, libgobject-2)
|
||||
- gcc-libs (libgcc)
|
||||
- glibc
|
||||
|
||||
</details>
|
||||
|
||||
> **Note** that you will most likely need the -devel variants of your distro's packages to be able to compile ewwii.
|
||||
|
||||
## Building
|
||||
|
||||
Once you have the prerequisites ready, you're ready to install and build ewwii.
|
||||
|
||||
First clone the repo:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/byson94/ewwii
|
||||
```
|
||||
|
||||
```bash
|
||||
cd ewwii
|
||||
```
|
||||
|
||||
Then build:
|
||||
|
||||
```bash
|
||||
cargo build --release --no-default-features --features x11
|
||||
```
|
||||
|
||||
**NOTE:**
|
||||
When you're on Wayland, build with:
|
||||
|
||||
```bash
|
||||
cargo build --release --no-default-features --features=wayland
|
||||
```
|
||||
|
||||
## Running ewwii
|
||||
|
||||
Once you've built it you can now run it by entering:
|
||||
|
||||
```bash
|
||||
cd target/release
|
||||
```
|
||||
|
||||
Then make the Eww binary executable:
|
||||
|
||||
```bash
|
||||
chmod +x ./ewwii
|
||||
```
|
||||
|
||||
Then to run it, enter:
|
||||
|
||||
```bash
|
||||
./ewwii daemon
|
||||
./ewwii open <window_name>
|
||||
```
|
||||
|
||||
## Installing via package managers
|
||||
|
||||
If you don't want to go through the _very_ tedious task of cloning and building ewwii, you can install it using Cargo (Rust crate manager).
|
||||
|
||||
You can run the following command to install ewwii from cargo:
|
||||
|
||||
```bash
|
||||
cargo install --git https://github.com/byson94/ewwii
|
||||
```
|
||||
@@ -1,26 +0,0 @@
|
||||
# Ewwii - Widgets for everyone made better!
|
||||
|
||||
Ewwii (ElKowar's Wacky Widgets improved interface) is a foork of
|
||||
Eww (ElKowar's Wacky Widgets) which is a
|
||||
widget system made in [Rust](https://www.rust-lang.org/),
|
||||
which lets you create your own widgets similarly to how you can in AwesomeWM.
|
||||
|
||||
**Strength of Ewwii over Eww:**
|
||||
|
||||
- Full-fledged scripting & expressions
|
||||
- User-defined widget trees & composition
|
||||
- Built-in configuration libraries
|
||||
- Builtin tooling for better developer experience
|
||||
- Full control over reactive updates (user defines if widget should update dynamically)
|
||||
|
||||
Ewwii is configured in [Rhai](https://rhai.rs/)
|
||||
and themed using [CSS](https://en.wikipedia.org/wiki/CSS)
|
||||
or [SCSS](<https://en.wikipedia.org/wiki/Sass_(style_sheet_language)>),
|
||||
it is easy to customize and is powerful and dynamic.
|
||||
The main goal of Ewwii is to make configuration easy
|
||||
and to give the user all the power that they need.
|
||||
|
||||
Rhai is not just a basic markup language. It is a full embeddable scripting language!
|
||||
This makes ewwii's configuration even more flexible and powerful.
|
||||
|
||||
Whether you're building a tiling-friendly status bar, a floating dashboard, or a themed control panel, Ewwii gives you the tools to design it, script it, and make it your own.
|
||||
@@ -1,6 +0,0 @@
|
||||
# Magic variables
|
||||
|
||||
These are variables that are always there, without you having to import them.
|
||||
|
||||
The delay between all the updating variables except `EWW_TIME` is 2s, for `EWW_TIME` it is 1s.
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
# Modules
|
||||
|
||||
Modules undoubtedly are one of the most powerful features in Rhai. They provide infinite extensibility to ewwii.
|
||||
|
||||
Every module follows the syntax:
|
||||
|
||||
```rust,ignore
|
||||
import "std::env" as env;
|
||||
let home = env::get_home_dir();
|
||||
```
|
||||
|
||||
This allows you to write expressive, modular Rhai code with functions grouped logically under `std` or custom namespaces.
|
||||
|
||||
## `std::env`
|
||||
|
||||
The `std::env` module provides access to common system-level environment queries. It is supported on Unix-based systems (Linux, macOS).
|
||||
|
||||
### Usage
|
||||
|
||||
```rust,ignore
|
||||
import "std::env" as env;
|
||||
|
||||
// Get an environment variable, or fallback to a default
|
||||
let shell = env::get_env("SHELL") ?? "unknown";
|
||||
|
||||
// Set an environment variable (current process only)
|
||||
env::set_env("DEBUG_MODE", "true");
|
||||
|
||||
// Get the user's home directory
|
||||
let home = env::get_home_dir() ?? "/home/user";
|
||||
|
||||
// Get the current working directory
|
||||
let cwd = env::get_current_dir() ?? "/";
|
||||
|
||||
// Get the current username
|
||||
let user = env::get_username() ?? "nobody";
|
||||
```
|
||||
|
||||
### Functions
|
||||
|
||||
| Function | Description |
|
||||
| ----------------- | ------------------------------------------------------- |
|
||||
| `get_env` | Gets an environment variable's value |
|
||||
| `set_env` | Sets an environment variable (current process only) |
|
||||
| `get_home_dir` | Returns the current user's home directory path if found |
|
||||
| `get_current_dir` | Returns the current working directory |
|
||||
| `get_username` | Gets the current user's username from `$USER` |
|
||||
|
||||
## `std::text`
|
||||
|
||||
The `std::text` module provides access to more string manipulation that Rhai lacks.
|
||||
|
||||
### Usage
|
||||
|
||||
```rust,ignore
|
||||
import "std::text" as text;
|
||||
|
||||
// Convert a string to a URL-friendly slug
|
||||
let slug = text::to_slug("Ewwii is cool!"); // output: "ewwii-is-cool"
|
||||
|
||||
// Convert a string to camelCase
|
||||
let camel = text::to_camel_case("my cool project"); // output: "myCoolProject"
|
||||
|
||||
// Truncate a string to N characters (without splitting in the middle of a character)
|
||||
let short = text::truncate_chars("hello world", 5); // output: "hello"
|
||||
|
||||
// Convert a string to uppercase
|
||||
let upper = text::to_upper("hello"); // output: "HELLO"
|
||||
|
||||
// Convert a string to lowercase
|
||||
let lower = text::to_lower("HELLO"); // output: "hello"
|
||||
```
|
||||
|
||||
### Functions
|
||||
|
||||
| Function | Description |
|
||||
| ---------------- | ---------------------------------------------------------------------- |
|
||||
| `to_slug` | Converts a string into a lowercase, hyphen-separated slug |
|
||||
| `to_camel_case` | Converts a string into camelCase, removing non-alphanumeric characters |
|
||||
| `truncate_chars` | Truncates a string to a maximum number of characters (UTF-8 safe) |
|
||||
| `to_upper` | Converts a string to uppercase |
|
||||
| `to_lower` | Converts a string to lowercase |
|
||||
|
||||
## Future Plans
|
||||
|
||||
Other modules coming soon under `std`:
|
||||
|
||||
- `std::fs` — Filesystem operations (e.g., `read_file`, `write_file`, `list_dir`)
|
||||
- `std::path` — Path helpers (e.g., `join`, `basename`, `dirname`)
|
||||
- `std::time` — Time utilities (e.g., `now`, `sleep`, `format_time`)
|
||||
- `std::math` — Numeric functions (e.g., `clamp`, `lerp`, `map_range`)
|
||||
- `std::color` — Color parsing and manipulation (e.g., `hex_to_rgb`, `blend`)
|
||||
|
||||
You can easily extend or override these by adding `.rhai` modules in your config path.
|
||||
@@ -1,15 +0,0 @@
|
||||
# Styling Widgets
|
||||
|
||||
Ewwii also allows writing inline styles to widgets using the `style` property. These styles are then applied at runtime using GTK's CSS system.
|
||||
|
||||
**Example:**
|
||||
|
||||
```rust,ignore
|
||||
fn foo() {
|
||||
return box(#{
|
||||
style: "color: black; background-color: #fff;",
|
||||
}, [ label(#{ text: "baz" }) ]);
|
||||
}
|
||||
```
|
||||
|
||||
> This example makes the text color of all child widgets of box to black and sets the background color of the box to white (`#fff` is the hexadecimal for white).
|
||||
@@ -1,11 +0,0 @@
|
||||
# Theming & UI
|
||||
|
||||
This section focuses on visual styling and user interface customization. The core visual layer is built atop GTK, allowing deep integration with system themes while also enabling custom overrides through SCSS-style syntax.
|
||||
|
||||
We'll explore:
|
||||
|
||||
- How GTK theming works under the hood
|
||||
- Styling your widgets using theme classes and custom CSS
|
||||
- Layout implications of theme decisions (e.g., spacing, margins, z-order)
|
||||
|
||||
Whether you're trying to match your system's look or building a highly customized UI, this section gives you the tools to style confidently.
|
||||
@@ -1,27 +0,0 @@
|
||||
# Working with GTK
|
||||
|
||||
## Gtk Theming
|
||||
|
||||
Ewwii is styled in GTK CSS.
|
||||
You can use `Vanilla CSS` or `SCSS` to make theming even easier. The latter is compiled into CSS for you.
|
||||
If you don't know any way to style something check out the [GTK CSS Overview wiki](https://docs.gtk.org/gtk3/css-overview.html),
|
||||
the [GTK CSS Properties Overview wiki ](https://docs.gtk.org/gtk3/css-properties.html),
|
||||
or use the [GTK-Debugger](#gtk-debugger).
|
||||
|
||||
If you have **NO** clue about how to do CSS, check out some online guides or tutorials.
|
||||
|
||||
SCSS is _very_ close to CSS, so if you know CSS you'll have no problem learning SCSS.
|
||||
|
||||
## GTK Debugger
|
||||
|
||||
The debugger can be used for **a lot** of things, especially if something doesn't work or isn't styled right.
|
||||
|
||||
To open the GTK debugger, simply run
|
||||
|
||||
```bash
|
||||
eww inspector
|
||||
```
|
||||
|
||||
If a style or something similar doesn't work, you can click on the icon in the top left to select the thing that isn't being styled correctly.
|
||||
|
||||
Then you can click on the drop down menu in the top right corner and select CSS Nodes. Here you will see everything about styling it, CSS Properties, and how it's structured.
|
||||
@@ -1,35 +0,0 @@
|
||||
# Troubleshooting
|
||||
|
||||
Here you will find help if something doesn't work. If the issue isn't listed here, please [open an issue on the GitHub repo.](https://github.com/byson94/ewwii/issues)
|
||||
|
||||
## Ewwii does not compile
|
||||
|
||||
1. Make sure that you are compiling ewwii using a recent version of rust (run `rustup update` to be sure you have the latest version available)
|
||||
2. Make sure you have all the necessary dependencies. If there are compile-errors, the compiler will tell you what you're missing.
|
||||
|
||||
## Ewwii does not work on Wayland
|
||||
|
||||
1. Make sure you compiled ewwii with the `--no-default-features --features=wayland` flags.
|
||||
2. Make sure that you're not trying to use X11-specific features (these are (hopefully) explicitly specified as such in the documentation).
|
||||
|
||||
## My configuration is not loaded correctly
|
||||
|
||||
1. Make sure the `ewwii.rhai` and `ewwii.(s)css` files are in the correct places.
|
||||
2. Sometimes, ewwii might fail to load your configuration as a result of a configuration error. Make sure your configuration is valid.
|
||||
|
||||
## Something isn't styled correctly!
|
||||
|
||||
Check the [GTK-Debugger](working_with_gtk.md#gtk-debugger) to get more insight into what styles GTK is applying to which elements.
|
||||
|
||||
## General issues
|
||||
|
||||
You should try the following things before opening an issue or doing more specialized troubleshooting:
|
||||
|
||||
- Kill the ewwii daemon by running `ewwii kill` and re-open your window with the `--debug`-flag to get additional log output.
|
||||
- Now you can take a look at the logs by running `ewwii logs`.
|
||||
- Use `ewwii state` to see the state of all variables.
|
||||
- Use `ewwii debug` to see the structure of your widget and other information.
|
||||
- Update to the latest ewwii version.
|
||||
- Sometimes hot reloading doesn't work. In that case, you can make use of `ewwii reload` manually.
|
||||
|
||||
Remember, if your issue isn't listed here, [open an issue on the GitHub repo](https://github.com/byson94/ewwii/issues).
|
||||
@@ -1,251 +0,0 @@
|
||||
# Widget Properties
|
||||
|
||||
## widget
|
||||
|
||||
These properties apply to all widgets, and can be used anywhere!
|
||||
|
||||
**Properties**
|
||||
|
||||
- `class`: `string` css class name
|
||||
- `valign`: `string` how to align this vertically. possible values: "fill", "baseline", "center", "start", "end"
|
||||
- `halign`: `string` how to align this horizontally. possible values: "fill", "baseline", "center", "start", "end"
|
||||
- `vexpand`: `bool` should this container expand vertically. Default: false
|
||||
- `hexpand`: `bool` should this widget expand horizontally. Default: false
|
||||
- `width`: `int` width of this element
|
||||
- `height`: `int` height of this element
|
||||
- `active`: `bool` If this widget can be interacted with
|
||||
- `tooltip`: `string` tooltip text (on hover)
|
||||
- `visible`: `bool` visibility of the widget
|
||||
- `style`: `string` inline scss style applied to the widget
|
||||
- `css`: `string` scss code applied to the widget
|
||||
|
||||
## combo-box-text
|
||||
|
||||
**Properties**
|
||||
|
||||
- `items`: `vec` Items displayed in the combo box
|
||||
- `timeout`: `duration` timeout of the command. Default: "200ms"
|
||||
- `onchange`: `string` runs when an item is selected, replacing `{}` with the item
|
||||
|
||||
## expander
|
||||
|
||||
**Properties**
|
||||
|
||||
- `name`: `string` name of the expander
|
||||
- `expanded`: `bool` sets whether it's expanded
|
||||
|
||||
## revealer
|
||||
|
||||
**Properties**
|
||||
|
||||
- `transition`: `string` animation name ("slideright", "slideleft", etc.)
|
||||
- `reveal`: `bool` whether the child is revealed
|
||||
- `duration`: `duration` how long the transition lasts. Default: "500ms"
|
||||
|
||||
## checkbox
|
||||
|
||||
**Properties**
|
||||
|
||||
- `checked`: `bool` initial checked state
|
||||
- `timeout`: `duration` command timeout. Default: "200ms"
|
||||
- `onchecked`: `string` command when checked
|
||||
- `onunchecked`: `string` command when unchecked
|
||||
|
||||
## color-button
|
||||
|
||||
**Properties**
|
||||
|
||||
- `use-alpha`: `bool` use alpha channel
|
||||
- `onchange`: `string` command on color select
|
||||
- `timeout`: `duration` Default: "200ms"
|
||||
|
||||
## color-chooser
|
||||
|
||||
**Properties**
|
||||
|
||||
- `use-alpha`: `bool` use alpha channel
|
||||
- `onchange`: `string` command on color select
|
||||
- `timeout`: `duration` Default: "200ms"
|
||||
|
||||
## slider
|
||||
|
||||
**Properties**
|
||||
|
||||
- `flipped`: `bool` reverse direction
|
||||
- `marks`: `string` draw marks
|
||||
- `draw-value`: `bool` show value
|
||||
- `value-pos`: `string` where to show value ("left", "right", etc.)
|
||||
- `round-digits`: `int` number of decimal places
|
||||
- `value`: `float` current value
|
||||
- `min`: `float` minimum value
|
||||
- `max`: `float` maximum value
|
||||
- `timeout`: `duration` Default: "200ms"
|
||||
- `onchange`: `string` command on change (use `{}` for value)
|
||||
- `orientation`: `string` layout direction
|
||||
|
||||
## progress
|
||||
|
||||
**Properties**
|
||||
|
||||
- `flipped`: `bool` reverse direction
|
||||
- `value`: `float` progress (0–100)
|
||||
- `orientation`: `string` layout direction
|
||||
|
||||
## input
|
||||
|
||||
**Properties**
|
||||
|
||||
- `value`: `string` current text
|
||||
- `onchange`: `string` command on change
|
||||
- `timeout`: `duration` Default: "200ms"
|
||||
- `onaccept`: `string` command on Enter
|
||||
- `password`: `bool` obscure input
|
||||
|
||||
## button
|
||||
|
||||
**Properties**
|
||||
|
||||
- `timeout`: `duration` Default: "200ms"
|
||||
- `onclick`: `string` command on activation
|
||||
- `onmiddleclick`: `string` command on middle click
|
||||
- `onrightclick`: `string` command on right click
|
||||
|
||||
## image
|
||||
|
||||
**Properties**
|
||||
|
||||
- `path`: `string` image file path
|
||||
- `image-width`: `int` image width
|
||||
- `image-height`: `int` image height
|
||||
- `preserve-aspect-ratio`: `bool` keep aspect ratio
|
||||
- `fill-svg`: `string` fill color for SVGs
|
||||
- `icon`: `string` theme icon name
|
||||
- `icon-size`: `string` size of the icon
|
||||
|
||||
## box
|
||||
|
||||
**Properties**
|
||||
|
||||
- `spacing`: `int` spacing between children
|
||||
- `orientation`: `string` direction of children
|
||||
- `space-evenly`: `bool` distribute children evenly
|
||||
|
||||
## overlay
|
||||
|
||||
**Properties**
|
||||
|
||||
_None_
|
||||
|
||||
## tooltip
|
||||
|
||||
**Properties**
|
||||
|
||||
_None listed_
|
||||
|
||||
## centerbox
|
||||
|
||||
**Properties**
|
||||
|
||||
- `orientation`: `string` direction of layout
|
||||
|
||||
## scroll
|
||||
|
||||
**Properties**
|
||||
|
||||
- `hscroll`: `bool` allow horizontal scrolling
|
||||
- `vscroll`: `bool` allow vertical scrolling
|
||||
|
||||
## eventbox
|
||||
|
||||
**Properties**
|
||||
|
||||
- `timeout`: `duration` Default: "200ms"
|
||||
- `onscroll`: `string` command on scroll (`{}` becomes direction)
|
||||
- `onhover`: `string` command on hover
|
||||
- `onhoverlost`: `string` command on hover exit
|
||||
- `cursor`: `string` cursor type
|
||||
- `ondropped`: `string` command on drop (`{}` is URI)
|
||||
- `dragvalue`: `string` URI to drag from this widget
|
||||
- `dragtype`: `string` type to drag ("file", "text")
|
||||
- `onclick`: `string` command on click
|
||||
- `onmiddleclick`: `string` command on middle click
|
||||
- `onrightclick`: `string` command on right click
|
||||
|
||||
## label
|
||||
|
||||
**Properties**
|
||||
|
||||
- `text`: `string` text to display
|
||||
- `truncate`: `bool` truncate text
|
||||
- `limit-width`: `int` max characters to show
|
||||
- `truncate-left`: `bool` truncate beginning
|
||||
- `show-truncated`: `bool` show truncation
|
||||
- `unindent`: `bool` strip leading spaces
|
||||
- `markup`: `string` Pango markup
|
||||
- `wrap`: `bool` wrap text
|
||||
- `angle`: `float` rotation angle
|
||||
- `gravity`: `string` text gravity
|
||||
- `xalign`: `float` horizontal alignment
|
||||
- `yalign`: `float` vertical alignment
|
||||
- `justify`: `string` text justification
|
||||
- `wrap-mode`: `string` wrap mode ("word", "char", etc.)
|
||||
- `lines`: `int` max lines (−1 = unlimited)
|
||||
|
||||
## literal
|
||||
|
||||
**Properties**
|
||||
|
||||
- `content`: `string` raw yuck
|
||||
|
||||
## calendar
|
||||
|
||||
**Properties**
|
||||
|
||||
- `day`: `float` selected day
|
||||
- `month`: `float` selected month
|
||||
- `year`: `float` selected year
|
||||
- `show-details`: `bool` show details
|
||||
- `show-heading`: `bool` show heading
|
||||
- `show-day-names`: `bool` show day names
|
||||
- `show-week-numbers`: `bool` show week numbers
|
||||
- `onclick`: `string` command with `{0}`, `{1}`, `{2}` for day/month/year
|
||||
- `timeout`: `duration` Default: "200ms"
|
||||
|
||||
## stack
|
||||
|
||||
**Properties**
|
||||
|
||||
- `selected`: `int` child index
|
||||
- `transition`: `string` animation name
|
||||
- `same-size`: `bool` equal child size
|
||||
|
||||
## transform
|
||||
|
||||
**Properties**
|
||||
|
||||
- `rotate`: `float` rotation angle
|
||||
- `transform-origin-x`: `string` transform origin x
|
||||
- `transform-origin-y`: `string` transform origin y
|
||||
- `translate-x`: `string` shift x
|
||||
- `translate-y`: `string` shift y
|
||||
- `scale-x`: `string` scale x
|
||||
- `scale-y`: `string` scale y
|
||||
|
||||
## circular-progress
|
||||
|
||||
**Properties**
|
||||
|
||||
- `value`: `float` 0–100 progress
|
||||
- `start-at`: `float` start percentage
|
||||
- `thickness`: `float` line thickness
|
||||
- `clockwise`: `bool` direction
|
||||
|
||||
## graph
|
||||
|
||||
**Properties**
|
||||
|
||||
- `value`: `float` current value
|
||||
- `thickness`: `float` line thickness
|
||||
- `time-range`: `duration` duration to track
|
||||
- `min`: `float` minimum value
|
||||
- `max`: `float` maximum value
|
||||
@@ -1,12 +0,0 @@
|
||||
# Widgets
|
||||
|
||||
Widgets are the building blocks of your interface. Each widget represents a visual element—text, images, containers, interactive components—that can be composed, styled, and updated dynamically.
|
||||
|
||||
This section introduces:
|
||||
|
||||
- The basic anatomy of a widget definition
|
||||
- How widgets are laid out within windows
|
||||
- The attributes and properties available to each widget type
|
||||
- Patterns for building reusable or dynamic widget trees
|
||||
|
||||
You’ll also learn how widget properties interact with the expression language and how reactivity is handled across updates.
|
||||
@@ -1,49 +0,0 @@
|
||||
# Widgets & Parameters
|
||||
|
||||
Below is a list of available widgets and the parameters each accepts.
|
||||
|
||||
## Widget Functions
|
||||
|
||||
These functions correspond to actual GTK widgets and render visible UI elements.
|
||||
|
||||
- **box**: `props`, `children`
|
||||
- **centerbox**: `props`, `children`
|
||||
- **eventbox**: `props`, `children`
|
||||
- **tooltip**: `children`
|
||||
- **circular_progress**: `props`
|
||||
- **graph**: `props`
|
||||
- **transform**: `props`
|
||||
- **slider**: `props`
|
||||
- **progress**: `props`
|
||||
- **image**: `props`
|
||||
- **button**: `props`
|
||||
- **label**: `props`
|
||||
- **input**: `props`
|
||||
- **calendar**: `props`
|
||||
- **color_button**: `props`
|
||||
- **expander**: `props`, `children`
|
||||
- **color_chooser**: `props`
|
||||
- **combo_box_text**: `props`
|
||||
- **checkbox**: `props`
|
||||
- **revealer**: `props`, `children`
|
||||
- **scroll**: `props`, `children`
|
||||
- **overlay**: `children`
|
||||
- **stack**: `props`, `children`
|
||||
|
||||
## Utility Functions
|
||||
|
||||
These are not visible UI widgets but are essential for layout, data binding, or dynamic behavior.
|
||||
|
||||
- **defwindow**: `string`, `props`, `children`
|
||||
- **poll**: `props`
|
||||
- **listen**: `props`
|
||||
|
||||
> **Let's recall**
|
||||
>
|
||||
> ---
|
||||
>
|
||||
> `props` param: Defined in `#{}`
|
||||
>
|
||||
> `children` param: Defined in `[]`
|
||||
>
|
||||
> > Both of these are discussed in [chapter 2.2](../config/config_fundamentals.md)
|
||||
660
docs/theme/book.js
vendored
660
docs/theme/book.js
vendored
@@ -1,660 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// Fix back button cache problem
|
||||
window.onunload = function () { };
|
||||
|
||||
// Global variable, shared between modules
|
||||
function playground_text(playground) {
|
||||
let code_block = playground.querySelector("code");
|
||||
|
||||
if (window.ace && code_block.classList.contains("editable")) {
|
||||
let editor = window.ace.edit(code_block);
|
||||
return editor.getValue();
|
||||
} else {
|
||||
return code_block.textContent;
|
||||
}
|
||||
}
|
||||
|
||||
(function codeSnippets() {
|
||||
function fetch_with_timeout(url, options, timeout = 6000) {
|
||||
return Promise.race([
|
||||
fetch(url, options),
|
||||
new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout))
|
||||
]);
|
||||
}
|
||||
|
||||
var playgrounds = Array.from(document.querySelectorAll(".playground"));
|
||||
if (playgrounds.length > 0) {
|
||||
fetch_with_timeout("https://play.rust-lang.org/meta/crates", {
|
||||
headers: {
|
||||
'Content-Type': "application/json",
|
||||
},
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => {
|
||||
// get list of crates available in the rust playground
|
||||
let playground_crates = response.crates.map(item => item["id"]);
|
||||
playgrounds.forEach(block => handle_crate_list_update(block, playground_crates));
|
||||
});
|
||||
}
|
||||
|
||||
function handle_crate_list_update(playground_block, playground_crates) {
|
||||
// update the play buttons after receiving the response
|
||||
update_play_button(playground_block, playground_crates);
|
||||
|
||||
// and install on change listener to dynamically update ACE editors
|
||||
if (window.ace) {
|
||||
let code_block = playground_block.querySelector("code");
|
||||
if (code_block.classList.contains("editable")) {
|
||||
let editor = window.ace.edit(code_block);
|
||||
editor.addEventListener("change", function (e) {
|
||||
update_play_button(playground_block, playground_crates);
|
||||
});
|
||||
// add Ctrl-Enter command to execute rust code
|
||||
editor.commands.addCommand({
|
||||
name: "run",
|
||||
bindKey: {
|
||||
win: "Ctrl-Enter",
|
||||
mac: "Ctrl-Enter"
|
||||
},
|
||||
exec: _editor => run_rust_code(playground_block)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// updates the visibility of play button based on `no_run` class and
|
||||
// used crates vs ones available on http://play.rust-lang.org
|
||||
function update_play_button(pre_block, playground_crates) {
|
||||
var play_button = pre_block.querySelector(".play-button");
|
||||
|
||||
// skip if code is `no_run`
|
||||
if (pre_block.querySelector('code').classList.contains("no_run")) {
|
||||
play_button.classList.add("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
// get list of `extern crate`'s from snippet
|
||||
var txt = playground_text(pre_block);
|
||||
var re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g;
|
||||
var snippet_crates = [];
|
||||
var item;
|
||||
while (item = re.exec(txt)) {
|
||||
snippet_crates.push(item[1]);
|
||||
}
|
||||
|
||||
// check if all used crates are available on play.rust-lang.org
|
||||
var all_available = snippet_crates.every(function (elem) {
|
||||
return playground_crates.indexOf(elem) > -1;
|
||||
});
|
||||
|
||||
if (all_available) {
|
||||
play_button.classList.remove("hidden");
|
||||
} else {
|
||||
play_button.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function run_rust_code(code_block) {
|
||||
var result_block = code_block.querySelector(".result");
|
||||
if (!result_block) {
|
||||
result_block = document.createElement('code');
|
||||
result_block.className = 'result hljs language-bash';
|
||||
|
||||
code_block.append(result_block);
|
||||
}
|
||||
|
||||
let text = playground_text(code_block);
|
||||
let classes = code_block.querySelector('code').classList;
|
||||
let has_2018 = classes.contains("edition2018");
|
||||
let edition = has_2018 ? "2018" : "2015";
|
||||
|
||||
var params = {
|
||||
version: "stable",
|
||||
optimize: "0",
|
||||
code: text,
|
||||
edition: edition
|
||||
};
|
||||
|
||||
if (text.indexOf("#![feature") !== -1) {
|
||||
params.version = "nightly";
|
||||
}
|
||||
|
||||
result_block.innerText = "Running...";
|
||||
|
||||
fetch_with_timeout("https://play.rust-lang.org/evaluate.json", {
|
||||
headers: {
|
||||
'Content-Type': "application/json",
|
||||
},
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
body: JSON.stringify(params)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => result_block.innerText = response.result)
|
||||
.catch(error => result_block.innerText = "Playground Communication: " + error.message);
|
||||
}
|
||||
|
||||
// Syntax highlighting Configuration
|
||||
hljs.configure({
|
||||
tabReplace: ' ', // 4 spaces
|
||||
languages: [], // Languages used for auto-detection
|
||||
});
|
||||
|
||||
let code_nodes = Array
|
||||
.from(document.querySelectorAll('code'))
|
||||
// Don't highlight `inline code` blocks in headers.
|
||||
.filter(function (node) {return !node.parentElement.classList.contains("header"); });
|
||||
|
||||
if (window.ace) {
|
||||
// language-rust class needs to be removed for editable
|
||||
// blocks or highlightjs will capture events
|
||||
Array
|
||||
.from(document.querySelectorAll('code.editable'))
|
||||
.forEach(function (block) { block.classList.remove('language-rust'); });
|
||||
|
||||
Array
|
||||
.from(document.querySelectorAll('code:not(.editable)'))
|
||||
.forEach(function (block) { hljs.highlightBlock(block); });
|
||||
} else {
|
||||
code_nodes.forEach(function (block) { hljs.highlightBlock(block); });
|
||||
}
|
||||
|
||||
// Adding the hljs class gives code blocks the color css
|
||||
// even if highlighting doesn't apply
|
||||
code_nodes.forEach(function (block) { block.classList.add('hljs'); });
|
||||
|
||||
Array.from(document.querySelectorAll("code.language-rust")).forEach(function (block) {
|
||||
|
||||
var lines = Array.from(block.querySelectorAll('.boring'));
|
||||
// If no lines were hidden, return
|
||||
if (!lines.length) { return; }
|
||||
block.classList.add("hide-boring");
|
||||
|
||||
var buttons = document.createElement('div');
|
||||
buttons.className = 'buttons';
|
||||
buttons.innerHTML = "<button class=\"fa fa-eye\" title=\"Show hidden lines\" aria-label=\"Show hidden lines\"></button>";
|
||||
|
||||
// add expand button
|
||||
var pre_block = block.parentNode;
|
||||
pre_block.insertBefore(buttons, pre_block.firstChild);
|
||||
|
||||
pre_block.querySelector('.buttons').addEventListener('click', function (e) {
|
||||
if (e.target.classList.contains('fa-eye')) {
|
||||
e.target.classList.remove('fa-eye');
|
||||
e.target.classList.add('fa-eye-slash');
|
||||
e.target.title = 'Hide lines';
|
||||
e.target.setAttribute('aria-label', e.target.title);
|
||||
|
||||
block.classList.remove('hide-boring');
|
||||
} else if (e.target.classList.contains('fa-eye-slash')) {
|
||||
e.target.classList.remove('fa-eye-slash');
|
||||
e.target.classList.add('fa-eye');
|
||||
e.target.title = 'Show hidden lines';
|
||||
e.target.setAttribute('aria-label', e.target.title);
|
||||
|
||||
block.classList.add('hide-boring');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (window.playground_copyable) {
|
||||
Array.from(document.querySelectorAll('pre code')).forEach(function (block) {
|
||||
var pre_block = block.parentNode;
|
||||
if (!pre_block.classList.contains('playground')) {
|
||||
var buttons = pre_block.querySelector(".buttons");
|
||||
if (!buttons) {
|
||||
buttons = document.createElement('div');
|
||||
buttons.className = 'buttons';
|
||||
pre_block.insertBefore(buttons, pre_block.firstChild);
|
||||
}
|
||||
|
||||
var clipButton = document.createElement('button');
|
||||
clipButton.className = 'fa fa-copy clip-button';
|
||||
clipButton.title = 'Copy to clipboard';
|
||||
clipButton.setAttribute('aria-label', clipButton.title);
|
||||
clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';
|
||||
|
||||
buttons.insertBefore(clipButton, buttons.firstChild);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Process playground code blocks
|
||||
Array.from(document.querySelectorAll(".playground")).forEach(function (pre_block) {
|
||||
// Add play button
|
||||
var buttons = pre_block.querySelector(".buttons");
|
||||
if (!buttons) {
|
||||
buttons = document.createElement('div');
|
||||
buttons.className = 'buttons';
|
||||
pre_block.insertBefore(buttons, pre_block.firstChild);
|
||||
}
|
||||
|
||||
var runCodeButton = document.createElement('button');
|
||||
runCodeButton.className = 'fa fa-play play-button';
|
||||
runCodeButton.hidden = true;
|
||||
runCodeButton.title = 'Run this code';
|
||||
runCodeButton.setAttribute('aria-label', runCodeButton.title);
|
||||
|
||||
buttons.insertBefore(runCodeButton, buttons.firstChild);
|
||||
runCodeButton.addEventListener('click', function (e) {
|
||||
run_rust_code(pre_block);
|
||||
});
|
||||
|
||||
if (window.playground_copyable) {
|
||||
var copyCodeClipboardButton = document.createElement('button');
|
||||
copyCodeClipboardButton.className = 'fa fa-copy clip-button';
|
||||
copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>';
|
||||
copyCodeClipboardButton.title = 'Copy to clipboard';
|
||||
copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);
|
||||
|
||||
buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);
|
||||
}
|
||||
|
||||
let code_block = pre_block.querySelector("code");
|
||||
if (window.ace && code_block.classList.contains("editable")) {
|
||||
var undoChangesButton = document.createElement('button');
|
||||
undoChangesButton.className = 'fa fa-history reset-button';
|
||||
undoChangesButton.title = 'Undo changes';
|
||||
undoChangesButton.setAttribute('aria-label', undoChangesButton.title);
|
||||
|
||||
buttons.insertBefore(undoChangesButton, buttons.firstChild);
|
||||
|
||||
undoChangesButton.addEventListener('click', function () {
|
||||
let editor = window.ace.edit(code_block);
|
||||
editor.setValue(editor.originalCode);
|
||||
editor.clearSelection();
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
(function themes() {
|
||||
var html = document.querySelector('html');
|
||||
var themeToggleButton = document.getElementById('theme-toggle');
|
||||
var themePopup = document.getElementById('theme-list');
|
||||
var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
|
||||
var stylesheets = {
|
||||
ayuHighlight: document.querySelector("[href$='ayu-highlight.css']"),
|
||||
tomorrowNight: document.querySelector("[href$='tomorrow-night.css']"),
|
||||
highlight: document.querySelector("[href$='highlight.css']"),
|
||||
};
|
||||
|
||||
function showThemes() {
|
||||
themePopup.style.display = 'block';
|
||||
themeToggleButton.setAttribute('aria-expanded', true);
|
||||
themePopup.querySelector("button#" + get_theme()).focus();
|
||||
}
|
||||
|
||||
function hideThemes() {
|
||||
themePopup.style.display = 'none';
|
||||
themeToggleButton.setAttribute('aria-expanded', false);
|
||||
themeToggleButton.focus();
|
||||
}
|
||||
|
||||
function get_theme() {
|
||||
var theme;
|
||||
try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { }
|
||||
if (theme === null || theme === undefined) {
|
||||
return default_theme;
|
||||
} else {
|
||||
return theme;
|
||||
}
|
||||
}
|
||||
|
||||
function set_theme(theme, store = true) {
|
||||
let ace_theme;
|
||||
|
||||
if (theme == 'coal' || theme == 'navy') {
|
||||
stylesheets.ayuHighlight.disabled = true;
|
||||
stylesheets.tomorrowNight.disabled = false;
|
||||
stylesheets.highlight.disabled = true;
|
||||
|
||||
ace_theme = "ace/theme/tomorrow_night";
|
||||
} else if (theme == 'ayu') {
|
||||
stylesheets.ayuHighlight.disabled = false;
|
||||
stylesheets.tomorrowNight.disabled = true;
|
||||
stylesheets.highlight.disabled = true;
|
||||
ace_theme = "ace/theme/tomorrow_night";
|
||||
} else {
|
||||
stylesheets.ayuHighlight.disabled = true;
|
||||
stylesheets.tomorrowNight.disabled = true;
|
||||
stylesheets.highlight.disabled = false;
|
||||
ace_theme = "ace/theme/dawn";
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
themeColorMetaTag.content = getComputedStyle(document.body).backgroundColor;
|
||||
}, 1);
|
||||
|
||||
if (window.ace && window.editors) {
|
||||
window.editors.forEach(function (editor) {
|
||||
editor.setTheme(ace_theme);
|
||||
});
|
||||
}
|
||||
|
||||
var previousTheme = get_theme();
|
||||
|
||||
if (store) {
|
||||
try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
|
||||
}
|
||||
|
||||
html.classList.remove(previousTheme);
|
||||
html.classList.add(theme);
|
||||
}
|
||||
|
||||
// Set theme
|
||||
var theme = get_theme();
|
||||
|
||||
set_theme(theme, false);
|
||||
|
||||
themeToggleButton.addEventListener('click', function () {
|
||||
if (themePopup.style.display === 'block') {
|
||||
hideThemes();
|
||||
} else {
|
||||
showThemes();
|
||||
}
|
||||
});
|
||||
|
||||
themePopup.addEventListener('click', function (e) {
|
||||
var theme = e.target.id || e.target.parentElement.id;
|
||||
set_theme(theme);
|
||||
});
|
||||
|
||||
themePopup.addEventListener('focusout', function(e) {
|
||||
// e.relatedTarget is null in Safari and Firefox on macOS (see workaround below)
|
||||
if (!!e.relatedTarget && !themeToggleButton.contains(e.relatedTarget) && !themePopup.contains(e.relatedTarget)) {
|
||||
hideThemes();
|
||||
}
|
||||
});
|
||||
|
||||
// Should not be needed, but it works around an issue on macOS & iOS: https://github.com/rust-lang/mdBook/issues/628
|
||||
document.addEventListener('click', function(e) {
|
||||
if (themePopup.style.display === 'block' && !themeToggleButton.contains(e.target) && !themePopup.contains(e.target)) {
|
||||
hideThemes();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
|
||||
if (!themePopup.contains(e.target)) { return; }
|
||||
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
hideThemes();
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
var li = document.activeElement.parentElement;
|
||||
if (li && li.previousElementSibling) {
|
||||
li.previousElementSibling.querySelector('button').focus();
|
||||
}
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
var li = document.activeElement.parentElement;
|
||||
if (li && li.nextElementSibling) {
|
||||
li.nextElementSibling.querySelector('button').focus();
|
||||
}
|
||||
break;
|
||||
case 'Home':
|
||||
e.preventDefault();
|
||||
themePopup.querySelector('li:first-child button').focus();
|
||||
break;
|
||||
case 'End':
|
||||
e.preventDefault();
|
||||
themePopup.querySelector('li:last-child button').focus();
|
||||
break;
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
(function sidebar() {
|
||||
var html = document.querySelector("html");
|
||||
var sidebar = document.getElementById("sidebar");
|
||||
var sidebarLinks = document.querySelectorAll('#sidebar a');
|
||||
var sidebarToggleButton = document.getElementById("sidebar-toggle");
|
||||
var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
|
||||
var firstContact = null;
|
||||
|
||||
function showSidebar() {
|
||||
html.classList.remove('sidebar-hidden')
|
||||
html.classList.add('sidebar-visible');
|
||||
Array.from(sidebarLinks).forEach(function (link) {
|
||||
link.setAttribute('tabIndex', 0);
|
||||
});
|
||||
sidebarToggleButton.setAttribute('aria-expanded', true);
|
||||
sidebar.setAttribute('aria-hidden', false);
|
||||
try { localStorage.setItem('mdbook-sidebar', 'visible'); } catch (e) { }
|
||||
}
|
||||
|
||||
|
||||
var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle');
|
||||
|
||||
function toggleSection(ev) {
|
||||
ev.currentTarget.parentElement.classList.toggle('expanded');
|
||||
}
|
||||
|
||||
Array.from(sidebarAnchorToggles).forEach(function (el) {
|
||||
el.addEventListener('click', toggleSection);
|
||||
});
|
||||
|
||||
function hideSidebar() {
|
||||
html.classList.remove('sidebar-visible')
|
||||
html.classList.add('sidebar-hidden');
|
||||
Array.from(sidebarLinks).forEach(function (link) {
|
||||
link.setAttribute('tabIndex', -1);
|
||||
});
|
||||
sidebarToggleButton.setAttribute('aria-expanded', false);
|
||||
sidebar.setAttribute('aria-hidden', true);
|
||||
try { localStorage.setItem('mdbook-sidebar', 'hidden'); } catch (e) { }
|
||||
}
|
||||
|
||||
// Toggle sidebar
|
||||
sidebarToggleButton.addEventListener('click', function sidebarToggle() {
|
||||
if (html.classList.contains("sidebar-hidden")) {
|
||||
var current_width = parseInt(
|
||||
document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
|
||||
if (current_width < 150) {
|
||||
document.documentElement.style.setProperty('--sidebar-width', '150px');
|
||||
}
|
||||
showSidebar();
|
||||
} else if (html.classList.contains("sidebar-visible")) {
|
||||
hideSidebar();
|
||||
} else {
|
||||
if (getComputedStyle(sidebar)['transform'] === 'none') {
|
||||
hideSidebar();
|
||||
} else {
|
||||
showSidebar();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
sidebarResizeHandle.addEventListener('mousedown', initResize, false);
|
||||
|
||||
function initResize(e) {
|
||||
window.addEventListener('mousemove', resize, false);
|
||||
window.addEventListener('mouseup', stopResize, false);
|
||||
html.classList.add('sidebar-resizing');
|
||||
}
|
||||
function resize(e) {
|
||||
var pos = (e.clientX - sidebar.offsetLeft);
|
||||
if (pos < 20) {
|
||||
hideSidebar();
|
||||
} else {
|
||||
if (html.classList.contains("sidebar-hidden")) {
|
||||
showSidebar();
|
||||
}
|
||||
pos = Math.min(pos, window.innerWidth - 100);
|
||||
document.documentElement.style.setProperty('--sidebar-width', pos + 'px');
|
||||
}
|
||||
}
|
||||
//on mouseup remove windows functions mousemove & mouseup
|
||||
function stopResize(e) {
|
||||
html.classList.remove('sidebar-resizing');
|
||||
window.removeEventListener('mousemove', resize, false);
|
||||
window.removeEventListener('mouseup', stopResize, false);
|
||||
}
|
||||
|
||||
document.addEventListener('touchstart', function (e) {
|
||||
firstContact = {
|
||||
x: e.touches[0].clientX,
|
||||
time: Date.now()
|
||||
};
|
||||
}, { passive: true });
|
||||
|
||||
document.addEventListener('touchmove', function (e) {
|
||||
if (!firstContact)
|
||||
return;
|
||||
|
||||
var curX = e.touches[0].clientX;
|
||||
var xDiff = curX - firstContact.x,
|
||||
tDiff = Date.now() - firstContact.time;
|
||||
|
||||
if (tDiff < 250 && Math.abs(xDiff) >= 150) {
|
||||
if (xDiff >= 0 && firstContact.x < Math.min(document.body.clientWidth * 0.25, 300))
|
||||
showSidebar();
|
||||
else if (xDiff < 0 && curX < 300)
|
||||
hideSidebar();
|
||||
|
||||
firstContact = null;
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
// Scroll sidebar to current active section
|
||||
var activeSection = document.getElementById("sidebar").querySelector(".active");
|
||||
if (activeSection) {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
|
||||
activeSection.scrollIntoView({ block: 'center' });
|
||||
}
|
||||
})();
|
||||
|
||||
(function chapterNavigation() {
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
|
||||
if (window.search && window.search.hasFocus()) { return; }
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowRight':
|
||||
e.preventDefault();
|
||||
var nextButton = document.querySelector('.nav-chapters.next');
|
||||
if (nextButton) {
|
||||
window.location.href = nextButton.href;
|
||||
}
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault();
|
||||
var previousButton = document.querySelector('.nav-chapters.previous');
|
||||
if (previousButton) {
|
||||
window.location.href = previousButton.href;
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
(function clipboard() {
|
||||
var clipButtons = document.querySelectorAll('.clip-button');
|
||||
|
||||
function hideTooltip(elem) {
|
||||
elem.firstChild.innerText = "";
|
||||
elem.className = 'fa fa-copy clip-button';
|
||||
}
|
||||
|
||||
function showTooltip(elem, msg) {
|
||||
elem.firstChild.innerText = msg;
|
||||
elem.className = 'fa fa-copy tooltipped';
|
||||
}
|
||||
|
||||
var clipboardSnippets = new ClipboardJS('.clip-button', {
|
||||
text: function (trigger) {
|
||||
hideTooltip(trigger);
|
||||
let playground = trigger.closest("pre");
|
||||
return playground_text(playground);
|
||||
}
|
||||
});
|
||||
|
||||
Array.from(clipButtons).forEach(function (clipButton) {
|
||||
clipButton.addEventListener('mouseout', function (e) {
|
||||
hideTooltip(e.currentTarget);
|
||||
});
|
||||
});
|
||||
|
||||
clipboardSnippets.on('success', function (e) {
|
||||
e.clearSelection();
|
||||
showTooltip(e.trigger, "Copied!");
|
||||
});
|
||||
|
||||
clipboardSnippets.on('error', function (e) {
|
||||
showTooltip(e.trigger, "Clipboard error!");
|
||||
});
|
||||
})();
|
||||
|
||||
(function scrollToTop () {
|
||||
var menuTitle = document.querySelector('.menu-title');
|
||||
|
||||
menuTitle.addEventListener('click', function () {
|
||||
document.scrollingElement.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
})();
|
||||
|
||||
(function controllMenu() {
|
||||
var menu = document.getElementById('menu-bar');
|
||||
|
||||
(function controllPosition() {
|
||||
var scrollTop = document.scrollingElement.scrollTop;
|
||||
var prevScrollTop = scrollTop;
|
||||
var minMenuY = -menu.clientHeight - 50;
|
||||
// When the script loads, the page can be at any scroll (e.g. if you reforesh it).
|
||||
menu.style.top = scrollTop + 'px';
|
||||
// Same as parseInt(menu.style.top.slice(0, -2), but faster
|
||||
var topCache = menu.style.top.slice(0, -2);
|
||||
menu.classList.remove('sticky');
|
||||
var stickyCache = false; // Same as menu.classList.contains('sticky'), but faster
|
||||
document.addEventListener('scroll', function () {
|
||||
scrollTop = Math.max(document.scrollingElement.scrollTop, 0);
|
||||
// `null` means that it doesn't need to be updated
|
||||
var nextSticky = null;
|
||||
var nextTop = null;
|
||||
var scrollDown = scrollTop > prevScrollTop;
|
||||
var menuPosAbsoluteY = topCache - scrollTop;
|
||||
if (scrollDown) {
|
||||
nextSticky = false;
|
||||
if (menuPosAbsoluteY > 0) {
|
||||
nextTop = prevScrollTop;
|
||||
}
|
||||
} else {
|
||||
if (menuPosAbsoluteY > 0) {
|
||||
nextSticky = true;
|
||||
} else if (menuPosAbsoluteY < minMenuY) {
|
||||
nextTop = prevScrollTop + minMenuY;
|
||||
}
|
||||
}
|
||||
if (nextSticky === true && stickyCache === false) {
|
||||
menu.classList.add('sticky');
|
||||
stickyCache = true;
|
||||
} else if (nextSticky === false && stickyCache === true) {
|
||||
menu.classList.remove('sticky');
|
||||
stickyCache = false;
|
||||
}
|
||||
if (nextTop !== null) {
|
||||
menu.style.top = nextTop + 'px';
|
||||
topCache = nextTop;
|
||||
}
|
||||
prevScrollTop = scrollTop;
|
||||
}, { passive: true });
|
||||
})();
|
||||
(function controllBorder() {
|
||||
menu.classList.remove('bordered');
|
||||
document.addEventListener('scroll', function () {
|
||||
if (menu.offsetTop === 0) {
|
||||
menu.classList.remove('bordered');
|
||||
} else {
|
||||
menu.classList.add('bordered');
|
||||
}
|
||||
}, { passive: true });
|
||||
})();
|
||||
})();
|
||||
495
docs/theme/css/chrome.css
vendored
495
docs/theme/css/chrome.css
vendored
@@ -1,495 +0,0 @@
|
||||
/* CSS for UI elements (a.k.a. chrome) */
|
||||
|
||||
@import 'variables.css';
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background: var(--bg);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar);
|
||||
}
|
||||
html {
|
||||
scrollbar-color: var(--scrollbar) var(--bg);
|
||||
}
|
||||
#searchresults a,
|
||||
.content a:link,
|
||||
a:visited,
|
||||
a > .hljs {
|
||||
color: var(--links);
|
||||
}
|
||||
|
||||
/* Menu Bar */
|
||||
|
||||
#menu-bar,
|
||||
#menu-bar-hover-placeholder {
|
||||
z-index: 101;
|
||||
margin: auto calc(0px - var(--page-padding));
|
||||
}
|
||||
#menu-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--bg);
|
||||
border-bottom-color: var(--bg);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
#menu-bar.sticky,
|
||||
.js #menu-bar-hover-placeholder:hover + #menu-bar,
|
||||
.js #menu-bar:hover,
|
||||
.js.sidebar-visible #menu-bar {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0 !important;
|
||||
}
|
||||
#menu-bar-hover-placeholder {
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
height: var(--menu-bar-height);
|
||||
}
|
||||
#menu-bar.bordered {
|
||||
border-bottom-color: var(--table-border-color);
|
||||
}
|
||||
#menu-bar i, #menu-bar .icon-button {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
z-index: 10;
|
||||
line-height: var(--menu-bar-height);
|
||||
cursor: pointer;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
@media only screen and (max-width: 420px) {
|
||||
#menu-bar i, #menu-bar .icon-button {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.icon-button i {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right-buttons {
|
||||
margin: 0 15px;
|
||||
}
|
||||
.right-buttons a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.left-buttons {
|
||||
display: flex;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.no-js .left-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
display: inline-block;
|
||||
font-weight: 200;
|
||||
font-size: 2.4rem;
|
||||
line-height: var(--menu-bar-height);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.js .menu-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-bar,
|
||||
.menu-bar:visited,
|
||||
.nav-chapters,
|
||||
.nav-chapters:visited,
|
||||
.mobile-nav-chapters,
|
||||
.mobile-nav-chapters:visited,
|
||||
.menu-bar .icon-button,
|
||||
.menu-bar a i {
|
||||
color: var(--icons);
|
||||
}
|
||||
|
||||
.menu-bar i:hover,
|
||||
.menu-bar .icon-button:hover,
|
||||
.nav-chapters:hover,
|
||||
.mobile-nav-chapters i:hover {
|
||||
color: var(--icons-hover);
|
||||
}
|
||||
|
||||
/* Nav Icons */
|
||||
|
||||
.nav-chapters {
|
||||
font-size: 2.5em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
max-width: 150px;
|
||||
min-width: 90px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
}
|
||||
|
||||
.nav-chapters:hover {
|
||||
text-decoration: none;
|
||||
background-color: var(--theme-hover);
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
margin-top: 50px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-nav-chapters {
|
||||
font-size: 2.5em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 90px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--sidebar-bg);
|
||||
}
|
||||
|
||||
.previous {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.next {
|
||||
float: right;
|
||||
right: var(--page-padding);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.nav-wide-wrapper { display: none; }
|
||||
.nav-wrapper { display: block; }
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1380px) {
|
||||
.sidebar-visible .nav-wide-wrapper { display: none; }
|
||||
.sidebar-visible .nav-wrapper { display: block; }
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
|
||||
:not(pre) > .hljs {
|
||||
display: inline;
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:not(pre):not(a) > .hljs {
|
||||
color: var(--inline-code-color);
|
||||
overflow-x: initial;
|
||||
}
|
||||
|
||||
a:hover > .hljs {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
}
|
||||
pre > .buttons {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
|
||||
color: var(--sidebar-fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
pre > .buttons :hover {
|
||||
color: var(--sidebar-active);
|
||||
}
|
||||
pre > .buttons i {
|
||||
margin-left: 8px;
|
||||
}
|
||||
pre > .buttons button {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: inherit;
|
||||
}
|
||||
pre > .result {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
#searchresults a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
border-radius: 2px;
|
||||
padding: 0 3px 1px 3px;
|
||||
margin: 0 -3px -1px -3px;
|
||||
background-color: var(--search-mark-bg);
|
||||
transition: background-color 300ms linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
mark.fade-out {
|
||||
background-color: rgba(0,0,0,0) !important;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.searchbar-outer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--content-max-width);
|
||||
}
|
||||
|
||||
#searchbar {
|
||||
width: 100%;
|
||||
margin: 5px auto 0px auto;
|
||||
padding: 10px 16px;
|
||||
transition: box-shadow 300ms ease-in-out;
|
||||
border: 1px solid var(--searchbar-border-color);
|
||||
border-radius: 3px;
|
||||
background-color: var(--searchbar-bg);
|
||||
color: var(--searchbar-fg);
|
||||
}
|
||||
#searchbar:focus,
|
||||
#searchbar.active {
|
||||
box-shadow: 0 0 3px var(--searchbar-shadow-color);
|
||||
}
|
||||
|
||||
.searchresults-header {
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
padding: 18px 0 0 5px;
|
||||
color: var(--searchresults-header-fg);
|
||||
}
|
||||
|
||||
.searchresults-outer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--content-max-width);
|
||||
border-bottom: 1px dashed var(--searchresults-border-color);
|
||||
}
|
||||
|
||||
ul#searchresults {
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
ul#searchresults li {
|
||||
margin: 10px 0px;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
ul#searchresults li.focus {
|
||||
background-color: var(--searchresults-li-bg);
|
||||
}
|
||||
ul#searchresults span.teaser {
|
||||
display: block;
|
||||
clear: both;
|
||||
margin: 5px 0 0 20px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
ul#searchresults span.teaser em {
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: var(--sidebar-width);
|
||||
font-size: 0.875em;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
background-color: var(--sidebar-bg);
|
||||
color: var(--sidebar-fg);
|
||||
}
|
||||
.sidebar-resizing {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.js:not(.sidebar-resizing) .sidebar {
|
||||
transition: transform 0.3s; /* Animation: slide away */
|
||||
}
|
||||
.sidebar code {
|
||||
line-height: 2em;
|
||||
}
|
||||
.sidebar .sidebar-scrollbox {
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
.sidebar .sidebar-resize-handle {
|
||||
position: absolute;
|
||||
cursor: col-resize;
|
||||
width: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.js .sidebar .sidebar-resize-handle {
|
||||
cursor: col-resize;
|
||||
width: 5px;
|
||||
}
|
||||
.sidebar-hidden .sidebar {
|
||||
transform: translateX(calc(0px - var(--sidebar-width)));
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
background: var(--sidebar-bg);
|
||||
}
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar);
|
||||
}
|
||||
|
||||
.sidebar-visible .page-wrapper {
|
||||
transform: translateX(var(--sidebar-width));
|
||||
}
|
||||
@media only screen and (min-width: 620px) {
|
||||
.sidebar-visible .page-wrapper {
|
||||
transform: none;
|
||||
margin-left: var(--sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
.chapter {
|
||||
list-style: none outside none;
|
||||
padding-left: 0;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
|
||||
.chapter ol {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chapter li {
|
||||
display: flex;
|
||||
color: var(--sidebar-non-existant);
|
||||
}
|
||||
.chapter li a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
color: var(--sidebar-fg);
|
||||
}
|
||||
|
||||
.chapter li a:hover {
|
||||
color: var(--sidebar-active);
|
||||
}
|
||||
|
||||
.chapter li a.active {
|
||||
color: var(--sidebar-active);
|
||||
}
|
||||
|
||||
.chapter li > a.toggle {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
padding: 0 10px;
|
||||
user-select: none;
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.chapter li > a.toggle div {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
/* collapse the section */
|
||||
.chapter li:not(.expanded) + li > ol {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chapter li.chapter-item {
|
||||
line-height: 1.5em;
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
.chapter li.expanded > a.toggle div {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.chapter .spacer {
|
||||
background-color: var(--sidebar-spacer);
|
||||
}
|
||||
|
||||
@media (-moz-touch-enabled: 1), (pointer: coarse) {
|
||||
.chapter li a { padding: 5px 0; }
|
||||
.spacer { margin: 10px 0; }
|
||||
}
|
||||
|
||||
.section {
|
||||
list-style: none outside none;
|
||||
padding-left: 20px;
|
||||
line-height: 1.9em;
|
||||
}
|
||||
|
||||
/* Theme Menu Popup */
|
||||
|
||||
.theme-popup {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: var(--menu-bar-height);
|
||||
z-index: 1000;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7em;
|
||||
color: var(--fg);
|
||||
background: var(--theme-popup-bg);
|
||||
border: 1px solid var(--theme-popup-border);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: none;
|
||||
}
|
||||
.theme-popup .default {
|
||||
color: var(--icons);
|
||||
}
|
||||
.theme-popup .theme {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 2px 10px;
|
||||
line-height: 25px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
.theme-popup .theme:hover {
|
||||
background-color: var(--theme-hover);
|
||||
}
|
||||
.theme-popup .theme:hover:first-child,
|
||||
.theme-popup .theme:hover:last-child {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
220
docs/theme/css/general.css
vendored
220
docs/theme/css/general.css
vendored
@@ -1,220 +0,0 @@
|
||||
/* Base styles and content styles */
|
||||
|
||||
@import "variables.css";
|
||||
|
||||
:root {
|
||||
/* Browser default font-size is 16px, this way 1 rem = 10px */
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: var(--fg);
|
||||
background-color: var(--bg);
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo,
|
||||
"DejaVu Sans Mono", monospace, monospace !important;
|
||||
font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Don't change font size in headers. */
|
||||
h1 code,
|
||||
h2 code,
|
||||
h3 code,
|
||||
h4 code,
|
||||
h5 code,
|
||||
h6 code {
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.boring {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.hide-boring .boring {
|
||||
display: none;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
h4,
|
||||
h5 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.header + .header h3,
|
||||
.header + .header h4,
|
||||
.header + .header h5 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
h1:target::before,
|
||||
h2:target::before,
|
||||
h3:target::before,
|
||||
h4:target::before,
|
||||
h5:target::before,
|
||||
h6:target::before {
|
||||
display: inline-block;
|
||||
content: "»";
|
||||
margin-left: -30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/* This is broken on Safari as of version 14, but is fixed
|
||||
in Safari Technology Preview 117 which I think will be Safari 14.2.
|
||||
https://bugs.webkit.org/show_bug.cgi?id=218076
|
||||
*/
|
||||
:target {
|
||||
scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
|
||||
}
|
||||
|
||||
.page {
|
||||
outline: 0;
|
||||
padding: 0 var(--page-padding);
|
||||
margin-top: calc(
|
||||
0px - var(--menu-bar-height)
|
||||
); /* Compensate for the #menu-bar-hover-placeholder */
|
||||
}
|
||||
.page-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.js:not(.sidebar-resizing) .page-wrapper {
|
||||
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow-y: auto;
|
||||
padding: 0 15px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.content main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--content-max-width);
|
||||
}
|
||||
.content p {
|
||||
line-height: 1.45em;
|
||||
}
|
||||
.content ol {
|
||||
line-height: 1.45em;
|
||||
}
|
||||
.content ul {
|
||||
line-height: 1.45em;
|
||||
}
|
||||
.content a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.content img,
|
||||
.content video {
|
||||
max-width: 100%;
|
||||
}
|
||||
.content .header:link,
|
||||
.content .header:visited {
|
||||
color: var(--fg);
|
||||
}
|
||||
.content .header:link,
|
||||
.content .header:visited:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table td {
|
||||
padding: 3px 20px;
|
||||
border: 1px var(--table-border-color) solid;
|
||||
}
|
||||
table thead {
|
||||
background: var(--table-header-bg);
|
||||
}
|
||||
table thead td {
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
}
|
||||
table thead th {
|
||||
padding: 3px 20px;
|
||||
}
|
||||
table thead tr {
|
||||
border: 1px var(--table-header-bg) solid;
|
||||
}
|
||||
/* Alternate background colors for rows */
|
||||
table tbody tr:nth-child(2n) {
|
||||
background: var(--table-alternate-bg);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 20px 0;
|
||||
padding: 0 20px;
|
||||
color: var(--fg);
|
||||
background-color: var(--quote-bg);
|
||||
border-top: 0.1em solid var(--quote-border);
|
||||
border-bottom: 0.1em solid var(--quote-border);
|
||||
}
|
||||
|
||||
:not(.footnote-definition) + .footnote-definition,
|
||||
.footnote-definition + :not(.footnote-definition) {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.footnote-definition {
|
||||
font-size: 0.9em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.footnote-definition p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.tooltiptext {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
transform: translateX(
|
||||
-50%
|
||||
); /* Center by moving tooltip 50% of its width left */
|
||||
left: -8px; /* Half of the width of the icon */
|
||||
top: -35px;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 8px;
|
||||
margin: 5px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tooltipped .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.chapter li.part-title {
|
||||
color: var(--sidebar-fg);
|
||||
margin: 5px 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
54
docs/theme/css/print.css
vendored
54
docs/theme/css/print.css
vendored
@@ -1,54 +0,0 @@
|
||||
|
||||
#sidebar,
|
||||
#menu-bar,
|
||||
.nav-chapters,
|
||||
.mobile-nav-chapters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#page-wrapper.page-wrapper {
|
||||
transform: none;
|
||||
margin-left: 0px;
|
||||
overflow-y: initial;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
overflow-y: initial;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #666666;
|
||||
border-radius: 5px;
|
||||
|
||||
/* Force background to be printed in Chrome */
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
pre > .buttons {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
a, a:visited, a:active, a:hover {
|
||||
color: #4183c4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
page-break-inside: avoid;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
page-break-inside: avoid;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.fa {
|
||||
display: none !important;
|
||||
}
|
||||
253
docs/theme/css/variables.css
vendored
253
docs/theme/css/variables.css
vendored
@@ -1,253 +0,0 @@
|
||||
|
||||
/* Globals */
|
||||
|
||||
:root {
|
||||
--sidebar-width: 300px;
|
||||
--page-padding: 15px;
|
||||
--content-max-width: 750px;
|
||||
--menu-bar-height: 50px;
|
||||
}
|
||||
|
||||
/* Themes */
|
||||
|
||||
.ayu {
|
||||
--bg: hsl(210, 25%, 8%);
|
||||
--fg: #c5c5c5;
|
||||
|
||||
--sidebar-bg: #14191f;
|
||||
--sidebar-fg: #c8c9db;
|
||||
--sidebar-non-existant: #5c6773;
|
||||
--sidebar-active: #ffb454;
|
||||
--sidebar-spacer: #2d334f;
|
||||
|
||||
--scrollbar: var(--sidebar-fg);
|
||||
|
||||
--icons: #737480;
|
||||
--icons-hover: #b7b9cc;
|
||||
|
||||
--links: #0096cf;
|
||||
|
||||
--inline-code-color: #ffb454;
|
||||
|
||||
--theme-popup-bg: #14191f;
|
||||
--theme-popup-border: #5c6773;
|
||||
--theme-hover: #191f26;
|
||||
|
||||
--quote-bg: hsl(226, 15%, 17%);
|
||||
--quote-border: hsl(226, 15%, 22%);
|
||||
|
||||
--table-border-color: hsl(210, 25%, 13%);
|
||||
--table-header-bg: hsl(210, 25%, 28%);
|
||||
--table-alternate-bg: hsl(210, 25%, 11%);
|
||||
|
||||
--searchbar-border-color: #848484;
|
||||
--searchbar-bg: #424242;
|
||||
--searchbar-fg: #fff;
|
||||
--searchbar-shadow-color: #d4c89f;
|
||||
--searchresults-header-fg: #666;
|
||||
--searchresults-border-color: #888;
|
||||
--searchresults-li-bg: #252932;
|
||||
--search-mark-bg: #e3b171;
|
||||
}
|
||||
|
||||
.coal {
|
||||
--bg: hsl(200, 7%, 8%);
|
||||
--fg: #98a3ad;
|
||||
|
||||
--sidebar-bg: #292c2f;
|
||||
--sidebar-fg: #a1adb8;
|
||||
--sidebar-non-existant: #505254;
|
||||
--sidebar-active: #3473ad;
|
||||
--sidebar-spacer: #393939;
|
||||
|
||||
--scrollbar: var(--sidebar-fg);
|
||||
|
||||
--icons: #43484d;
|
||||
--icons-hover: #b3c0cc;
|
||||
|
||||
--links: #2b79a2;
|
||||
|
||||
--inline-code-color: #c5c8c6;;
|
||||
|
||||
--theme-popup-bg: #141617;
|
||||
--theme-popup-border: #43484d;
|
||||
--theme-hover: #1f2124;
|
||||
|
||||
--quote-bg: hsl(234, 21%, 18%);
|
||||
--quote-border: hsl(234, 21%, 23%);
|
||||
|
||||
--table-border-color: hsl(200, 7%, 13%);
|
||||
--table-header-bg: hsl(200, 7%, 28%);
|
||||
--table-alternate-bg: hsl(200, 7%, 11%);
|
||||
|
||||
--searchbar-border-color: #aaa;
|
||||
--searchbar-bg: #b7b7b7;
|
||||
--searchbar-fg: #000;
|
||||
--searchbar-shadow-color: #aaa;
|
||||
--searchresults-header-fg: #666;
|
||||
--searchresults-border-color: #98a3ad;
|
||||
--searchresults-li-bg: #2b2b2f;
|
||||
--search-mark-bg: #355c7d;
|
||||
}
|
||||
|
||||
.light {
|
||||
--bg: hsl(0, 0%, 100%);
|
||||
--fg: hsl(0, 0%, 0%);
|
||||
|
||||
--sidebar-bg: #fafafa;
|
||||
--sidebar-fg: hsl(0, 0%, 0%);
|
||||
--sidebar-non-existant: #aaaaaa;
|
||||
--sidebar-active: #1f1fff;
|
||||
--sidebar-spacer: #f4f4f4;
|
||||
|
||||
--scrollbar: #8F8F8F;
|
||||
|
||||
--icons: #747474;
|
||||
--icons-hover: #000000;
|
||||
|
||||
--links: #20609f;
|
||||
|
||||
--inline-code-color: #301900;
|
||||
|
||||
--theme-popup-bg: #fafafa;
|
||||
--theme-popup-border: #cccccc;
|
||||
--theme-hover: #e6e6e6;
|
||||
|
||||
--quote-bg: hsl(197, 37%, 96%);
|
||||
--quote-border: hsl(197, 37%, 91%);
|
||||
|
||||
--table-border-color: hsl(0, 0%, 95%);
|
||||
--table-header-bg: hsl(0, 0%, 80%);
|
||||
--table-alternate-bg: hsl(0, 0%, 97%);
|
||||
|
||||
--searchbar-border-color: #aaa;
|
||||
--searchbar-bg: #fafafa;
|
||||
--searchbar-fg: #000;
|
||||
--searchbar-shadow-color: #aaa;
|
||||
--searchresults-header-fg: #666;
|
||||
--searchresults-border-color: #888;
|
||||
--searchresults-li-bg: #e4f2fe;
|
||||
--search-mark-bg: #a2cff5;
|
||||
}
|
||||
|
||||
.navy {
|
||||
--bg: hsl(226, 23%, 11%);
|
||||
--fg: #bcbdd0;
|
||||
|
||||
--sidebar-bg: #282d3f;
|
||||
--sidebar-fg: #c8c9db;
|
||||
--sidebar-non-existant: #505274;
|
||||
--sidebar-active: #2b79a2;
|
||||
--sidebar-spacer: #2d334f;
|
||||
|
||||
--scrollbar: var(--sidebar-fg);
|
||||
|
||||
--icons: #737480;
|
||||
--icons-hover: #b7b9cc;
|
||||
|
||||
--links: #2b79a2;
|
||||
|
||||
--inline-code-color: #c5c8c6;;
|
||||
|
||||
--theme-popup-bg: #161923;
|
||||
--theme-popup-border: #737480;
|
||||
--theme-hover: #282e40;
|
||||
|
||||
--quote-bg: hsl(226, 15%, 17%);
|
||||
--quote-border: hsl(226, 15%, 22%);
|
||||
|
||||
--table-border-color: hsl(226, 23%, 16%);
|
||||
--table-header-bg: hsl(226, 23%, 31%);
|
||||
--table-alternate-bg: hsl(226, 23%, 14%);
|
||||
|
||||
--searchbar-border-color: #aaa;
|
||||
--searchbar-bg: #aeaec6;
|
||||
--searchbar-fg: #000;
|
||||
--searchbar-shadow-color: #aaa;
|
||||
--searchresults-header-fg: #5f5f71;
|
||||
--searchresults-border-color: #5c5c68;
|
||||
--searchresults-li-bg: #242430;
|
||||
--search-mark-bg: #a2cff5;
|
||||
}
|
||||
|
||||
.rust {
|
||||
--bg: hsl(60, 9%, 87%);
|
||||
--fg: #262625;
|
||||
|
||||
--sidebar-bg: #3b2e2a;
|
||||
--sidebar-fg: #c8c9db;
|
||||
--sidebar-non-existant: #505254;
|
||||
--sidebar-active: #e69f67;
|
||||
--sidebar-spacer: #45373a;
|
||||
|
||||
--scrollbar: var(--sidebar-fg);
|
||||
|
||||
--icons: #737480;
|
||||
--icons-hover: #262625;
|
||||
|
||||
--links: #2b79a2;
|
||||
|
||||
--inline-code-color: #6e6b5e;
|
||||
|
||||
--theme-popup-bg: #e1e1db;
|
||||
--theme-popup-border: #b38f6b;
|
||||
--theme-hover: #99908a;
|
||||
|
||||
--quote-bg: hsl(60, 5%, 75%);
|
||||
--quote-border: hsl(60, 5%, 70%);
|
||||
|
||||
--table-border-color: hsl(60, 9%, 82%);
|
||||
--table-header-bg: #b3a497;
|
||||
--table-alternate-bg: hsl(60, 9%, 84%);
|
||||
|
||||
--searchbar-border-color: #aaa;
|
||||
--searchbar-bg: #fafafa;
|
||||
--searchbar-fg: #000;
|
||||
--searchbar-shadow-color: #aaa;
|
||||
--searchresults-header-fg: #666;
|
||||
--searchresults-border-color: #888;
|
||||
--searchresults-li-bg: #dec2a2;
|
||||
--search-mark-bg: #e69f67;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.light.no-js {
|
||||
--bg: hsl(200, 7%, 8%);
|
||||
--fg: #98a3ad;
|
||||
|
||||
--sidebar-bg: #292c2f;
|
||||
--sidebar-fg: #a1adb8;
|
||||
--sidebar-non-existant: #505254;
|
||||
--sidebar-active: #3473ad;
|
||||
--sidebar-spacer: #393939;
|
||||
|
||||
--scrollbar: var(--sidebar-fg);
|
||||
|
||||
--icons: #43484d;
|
||||
--icons-hover: #b3c0cc;
|
||||
|
||||
--links: #2b79a2;
|
||||
|
||||
--inline-code-color: #c5c8c6;;
|
||||
|
||||
--theme-popup-bg: #141617;
|
||||
--theme-popup-border: #43484d;
|
||||
--theme-hover: #1f2124;
|
||||
|
||||
--quote-bg: hsl(234, 21%, 18%);
|
||||
--quote-border: hsl(234, 21%, 23%);
|
||||
|
||||
--table-border-color: hsl(200, 7%, 13%);
|
||||
--table-header-bg: hsl(200, 7%, 28%);
|
||||
--table-alternate-bg: hsl(200, 7%, 11%);
|
||||
|
||||
--searchbar-border-color: #aaa;
|
||||
--searchbar-bg: #b7b7b7;
|
||||
--searchbar-fg: #000;
|
||||
--searchbar-shadow-color: #aaa;
|
||||
--searchresults-header-fg: #666;
|
||||
--searchresults-border-color: #98a3ad;
|
||||
--searchresults-li-bg: #2b2b2f;
|
||||
--search-mark-bg: #355c7d;
|
||||
}
|
||||
}
|
||||
BIN
docs/theme/favicon.png
vendored
BIN
docs/theme/favicon.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
22
docs/theme/favicon.svg
vendored
22
docs/theme/favicon.svg
vendored
@@ -1,22 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 199.7 184.2">
|
||||
<style>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
svg { fill: white; }
|
||||
}
|
||||
</style>
|
||||
<path d="M189.5,36.8c0.2,2.8,0,5.1-0.6,6.8L153,162c-0.6,2.1-2,3.7-4.2,5c-2.2,1.2-4.4,1.9-6.7,1.9H31.4c-9.6,0-15.3-2.8-17.3-8.4
|
||||
c-0.8-2.2-0.8-3.9,0.1-5.2c0.9-1.2,2.4-1.8,4.6-1.8H123c7.4,0,12.6-1.4,15.4-4.1s5.7-8.9,8.6-18.4l32.9-108.6
|
||||
c1.8-5.9,1-11.1-2.2-15.6S169.9,0,164,0H72.7c-1,0-3.1,0.4-6.1,1.1l0.1-0.4C64.5,0.2,62.6,0,61,0.1s-3,0.5-4.3,1.4
|
||||
c-1.3,0.9-2.4,1.8-3.2,2.8S52,6.5,51.2,8.1c-0.8,1.6-1.4,3-1.9,4.3s-1.1,2.7-1.8,4.2c-0.7,1.5-1.3,2.7-2,3.7c-0.5,0.6-1.2,1.5-2,2.5
|
||||
s-1.6,2-2.2,2.8s-0.9,1.5-1.1,2.2c-0.2,0.7-0.1,1.8,0.2,3.2c0.3,1.4,0.4,2.4,0.4,3.1c-0.3,3-1.4,6.9-3.3,11.6
|
||||
c-1.9,4.7-3.6,8.1-5.1,10.1c-0.3,0.4-1.2,1.3-2.6,2.7c-1.4,1.4-2.3,2.6-2.6,3.7c-0.3,0.4-0.3,1.5-0.1,3.4c0.3,1.8,0.4,3.1,0.3,3.8
|
||||
c-0.3,2.7-1.3,6.3-3,10.8c-1.7,4.5-3.4,8.2-5,11c-0.2,0.5-0.9,1.4-2,2.8c-1.1,1.4-1.8,2.5-2,3.4c-0.2,0.6-0.1,1.8,0.1,3.4
|
||||
c0.2,1.6,0.2,2.8-0.1,3.6c-0.6,3-1.8,6.7-3.6,11c-1.8,4.3-3.6,7.9-5.4,11c-0.5,0.8-1.1,1.7-2,2.8c-0.8,1.1-1.5,2-2,2.8
|
||||
s-0.8,1.6-1,2.5c-0.1,0.5,0,1.3,0.4,2.3c0.3,1.1,0.4,1.9,0.4,2.6c-0.1,1.1-0.2,2.6-0.5,4.4c-0.2,1.8-0.4,2.9-0.4,3.2
|
||||
c-1.8,4.8-1.7,9.9,0.2,15.2c2.2,6.2,6.2,11.5,11.9,15.8c5.7,4.3,11.7,6.4,17.8,6.4h110.7c5.2,0,10.1-1.7,14.7-5.2s7.7-7.8,9.2-12.9
|
||||
l33-108.6c1.8-5.8,1-10.9-2.2-15.5C194.9,39.7,192.6,38,189.5,36.8z M59.6,122.8L73.8,80c0,0,7,0,10.8,0s28.8-1.7,25.4,17.5
|
||||
c-3.4,19.2-18.8,25.2-36.8,25.4S59.6,122.8,59.6,122.8z M78.6,116.8c4.7-0.1,18.9-2.9,22.1-17.1S89.2,86.3,89.2,86.3l-8.9,0
|
||||
l-10.2,30.5C70.2,116.9,74,116.9,78.6,116.8z M75.3,68.7L89,26.2h9.8l0.8,34l23.6-34h9.9l-13.6,42.5h-7.1l12.5-35.4l-24.5,35.4h-6.8
|
||||
l-0.8-35L82,68.7H75.3z"/>
|
||||
</svg>
|
||||
<!-- Original image Copyright Dave Gandy — CC BY 4.0 License -->
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
83
docs/theme/highlight.css
vendored
83
docs/theme/highlight.css
vendored
@@ -1,83 +0,0 @@
|
||||
/*
|
||||
* An increased contrast highlighting scheme loosely based on the
|
||||
* "Base16 Atelier Dune Light" theme by Bram de Haan
|
||||
* (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)
|
||||
* Original Base16 color scheme by Chris Kempson
|
||||
* (https://github.com/chriskempson/base16)
|
||||
*/
|
||||
|
||||
/* Comment */
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #575757;
|
||||
}
|
||||
|
||||
/* Red */
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-attribute,
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-regexp,
|
||||
.hljs-link,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: #d70025;
|
||||
}
|
||||
|
||||
/* Orange */
|
||||
.hljs-number,
|
||||
.hljs-meta,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-literal,
|
||||
.hljs-type,
|
||||
.hljs-params {
|
||||
color: #b21e00;
|
||||
}
|
||||
|
||||
/* Green */
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #008200;
|
||||
}
|
||||
|
||||
/* Blue */
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
color: #0030f2;
|
||||
}
|
||||
|
||||
/* Purple */
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
color: #9d00ec;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
background: #f6f7f6;
|
||||
color: #000;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #22863a;
|
||||
background-color: #f0fff4;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #b31d28;
|
||||
background-color: #ffeef0;
|
||||
}
|
||||
668
docs/theme/highlight.js
vendored
668
docs/theme/highlight.js
vendored
File diff suppressed because one or more lines are too long
312
docs/theme/index.hbs
vendored
312
docs/theme/index.hbs
vendored
@@ -1,312 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="{{ language }}" class="sidebar-visible no-js {{ default_theme }}">
|
||||
<head>
|
||||
<!-- Book generated using mdBook -->
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ title }}</title>
|
||||
{{#if is_print }}
|
||||
<meta name="robots" content="noindex" />
|
||||
{{/if}}
|
||||
{{#if base_url}}
|
||||
<base href="{{ base_url }}">
|
||||
{{/if}}
|
||||
|
||||
|
||||
<!-- Custom HTML head -->
|
||||
{{> head}}
|
||||
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<meta name="description" content="{{ description }}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
|
||||
{{#if favicon_svg}}
|
||||
<link rel="icon" href="{{ path_to_root }}favicon.svg">
|
||||
{{/if}}
|
||||
{{#if favicon_png}}
|
||||
<link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
|
||||
{{/if}}
|
||||
<link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
|
||||
<link rel="stylesheet" href="{{ path_to_root }}css/general.css">
|
||||
<link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
|
||||
{{#if print_enable}}
|
||||
<link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
|
||||
{{/if}}
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
|
||||
{{#if copy_fonts}}
|
||||
<link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
|
||||
{{/if}}
|
||||
|
||||
<!-- Highlight.js Stylesheets -->
|
||||
<link rel="stylesheet" href="{{ path_to_root }}highlight.css">
|
||||
<link rel="stylesheet" href="{{ path_to_root }}tomorrow-night.css">
|
||||
<link rel="stylesheet" href="{{ path_to_root }}ayu-highlight.css">
|
||||
|
||||
<!-- Custom theme stylesheets -->
|
||||
{{#each additional_css}}
|
||||
<link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
|
||||
{{/each}}
|
||||
|
||||
{{#if mathjax_support}}
|
||||
<!-- MathJax -->
|
||||
<script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||
{{/if}}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Provide site root to javascript -->
|
||||
<script type="text/javascript">
|
||||
var path_to_root = "{{ path_to_root }}";
|
||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
|
||||
</script>
|
||||
|
||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
||||
<script type="text/javascript">
|
||||
try {
|
||||
var theme = localStorage.getItem('mdbook-theme');
|
||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
||||
|
||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
||||
}
|
||||
|
||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
||||
}
|
||||
} catch (e) { }
|
||||
</script>
|
||||
|
||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
||||
<script type="text/javascript">
|
||||
var theme;
|
||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
||||
var html = document.querySelector('html');
|
||||
html.classList.remove('no-js')
|
||||
html.classList.remove('{{ default_theme }}')
|
||||
html.classList.add(theme);
|
||||
html.classList.add('js');
|
||||
</script>
|
||||
|
||||
<!-- Hide / unhide sidebar before it is displayed -->
|
||||
<script type="text/javascript">
|
||||
var html = document.querySelector('html');
|
||||
var sidebar = 'hidden';
|
||||
if (document.body.clientWidth >= 1080) {
|
||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
||||
sidebar = sidebar || 'visible';
|
||||
}
|
||||
html.classList.remove('sidebar-visible');
|
||||
html.classList.add("sidebar-" + sidebar);
|
||||
</script>
|
||||
|
||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||||
<div class="sidebar-scrollbox">
|
||||
{{#toc}}{{/toc}}
|
||||
</div>
|
||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
||||
</nav>
|
||||
|
||||
<div id="page-wrapper" class="page-wrapper">
|
||||
|
||||
<div class="page">
|
||||
{{> header}}
|
||||
<div id="menu-bar-hover-placeholder"></div>
|
||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
||||
<div class="left-buttons">
|
||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
||||
<i class="fa fa-paint-brush"></i>
|
||||
</button>
|
||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
||||
<li role="none"><button role="menuitem" class="theme" id="light">{{ theme_option "Light" }}</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="rust">{{ theme_option "Rust" }}</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="coal">{{ theme_option "Coal" }}</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Navy" }}</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="ayu">{{ theme_option "Ayu" }}</button></li>
|
||||
</ul>
|
||||
{{#if search_enabled}}
|
||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<h1 class="menu-title">{{ book_title }}</h1>
|
||||
|
||||
<div class="right-buttons">
|
||||
{{#if print_enable}}
|
||||
<a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
|
||||
<i id="print-button" class="fa fa-print"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{#if git_repository_url}}
|
||||
<a href="{{git_repository_url}}" title="Git repository" aria-label="Git repository">
|
||||
<i id="git-repository-button" class="fa {{git_repository_icon}}"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{#if git_repository_edit_url}}
|
||||
<a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit">
|
||||
<i id="git-edit-button" class="fa fa-edit"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if search_enabled}}
|
||||
<div id="search-wrapper" class="hidden">
|
||||
<form id="searchbar-outer" class="searchbar-outer">
|
||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
||||
</form>
|
||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
||||
<div id="searchresults-header" class="searchresults-header"></div>
|
||||
<ul id="searchresults">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
||||
<script type="text/javascript">
|
||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="content" class="content">
|
||||
<main>
|
||||
{{{ content }}}
|
||||
</main>
|
||||
|
||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
||||
<!-- Mobile navigation buttons -->
|
||||
{{#previous}}
|
||||
<a rel="prev" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
{{/previous}}
|
||||
|
||||
{{#next}}
|
||||
<a rel="next" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
{{/next}}
|
||||
|
||||
<div style="clear: both"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
||||
{{#previous}}
|
||||
<a rel="prev" href="{{ path_to_root }}{{link}}" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
{{/previous}}
|
||||
|
||||
{{#next}}
|
||||
<a rel="next" href="{{ path_to_root }}{{link}}" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
{{/next}}
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
{{#if livereload}}
|
||||
<!-- Livereload script (if served using the cli tool) -->
|
||||
<script type="text/javascript">
|
||||
var socket = new WebSocket("{{{livereload}}}");
|
||||
socket.onmessage = function (event) {
|
||||
if (event.data === "reload") {
|
||||
socket.close();
|
||||
location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
window.onbeforeunload = function() {
|
||||
socket.close();
|
||||
}
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{#if google_analytics}}
|
||||
<!-- Google Analytics Tag -->
|
||||
<script type="text/javascript">
|
||||
var localAddrs = ["localhost", "127.0.0.1", ""];
|
||||
|
||||
// make sure we don't activate google analytics if the developer is
|
||||
// inspecting the book locally...
|
||||
if (localAddrs.indexOf(document.location.hostname) === -1) {
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', '{{google_analytics}}', 'auto');
|
||||
ga('send', 'pageview');
|
||||
}
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{#if playground_line_numbers}}
|
||||
<script type="text/javascript">
|
||||
window.playground_line_numbers = true;
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{#if playground_copyable}}
|
||||
<script type="text/javascript">
|
||||
window.playground_copyable = true;
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{#if playground_js}}
|
||||
<script src="{{ path_to_root }}ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="{{ path_to_root }}editor.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="{{ path_to_root }}mode-rust.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="{{ path_to_root }}theme-dawn.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="{{ path_to_root }}theme-tomorrow_night.js" type="text/javascript" charset="utf-8"></script>
|
||||
{{/if}}
|
||||
|
||||
{{#if search_js}}
|
||||
<script src="{{ path_to_root }}elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="{{ path_to_root }}mark.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="{{ path_to_root }}searcher.js" type="text/javascript" charset="utf-8"></script>
|
||||
{{/if}}
|
||||
|
||||
<script src="{{ path_to_root }}clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="{{ path_to_root }}highlight.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="{{ path_to_root }}book.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
<!-- Custom JS scripts -->
|
||||
{{#each additional_js}}
|
||||
<script type="text/javascript" src="{{ ../path_to_root }}{{this}}"></script>
|
||||
{{/each}}
|
||||
|
||||
{{#if is_print}}
|
||||
{{#if mathjax_support}}
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('load', function() {
|
||||
MathJax.Hub.Register.StartupHook('End', function() {
|
||||
window.setTimeout(window.print, 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{else}}
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('load', function() {
|
||||
window.setTimeout(window.print, 100);
|
||||
});
|
||||
</script>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user