Skip to content

Commit

Permalink
upgrade docs template
Browse files Browse the repository at this point in the history
  • Loading branch information
oscarotero committed Dec 23, 2023
1 parent e40d8ce commit ca031bb
Show file tree
Hide file tree
Showing 10 changed files with 43 additions and 32 deletions.
2 changes: 1 addition & 1 deletion docs/_config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import lume from "lume/mod.ts";
import wiki from "https://deno.land/x/lume_theme_simple_wiki@v0.5.0/mod.ts";
import wiki from "https://deno.land/x/lume_theme_simple_wiki@v0.6.0/mod.ts";

import "npm:[email protected]/components/prism-markup-templating.js";
import "../prism-vento.js";
Expand Down
16 changes: 9 additions & 7 deletions docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const env = vento({

### dataVarname

Vento provides the `it` variable with all data available in
the template. For example:
Vento provides the `it` variable with all data available in the template. For
example:

```vento
{{ it.title }}
Expand All @@ -43,10 +43,13 @@ Now you can use the `global` variable:

### useWith

Vento use [`with` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with) to convert the variables from `it` to global. For example, instead of `{{ it.title }}` you can simply write `{{ title }}`.
Vento use
[`with` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with)
to convert the variables from `it` to global. For example, instead of
`{{ it.title }}` you can simply write `{{ title }}`.

Note that if the variable doesn't exist, the error _(ReferenceError: title is not
defined)_ is thrown.
Note that if the variable doesn't exist, the error _(ReferenceError: title is
not defined)_ is thrown.

You can disable the `with` behavior by setting this option to `false`:

Expand All @@ -72,12 +75,11 @@ const result = env.runString("{{ title }}", {

// Like in Nunjucks, you can use the `safe` filter for trusted content:
const result = env.runString("{{ title |> safe }}", {
title: "<h1>Hello world</h1>"
title: "<h1>Hello world</h1>",
});
// <h1>Hello world</h1>
```


### includes

The path of the directory that Vento will use to look for includes templates.
Expand Down
2 changes: 1 addition & 1 deletion docs/deno.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
},
"lock": false,
"imports": {
"lume/": "https://deno.land/x/lume@v1.18.5/"
"lume/": "https://deno.land/x/lume@v2.0.1/"
}
}
8 changes: 5 additions & 3 deletions docs/editor-integrations.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ order: 3

## Visual Studio Code

The [Vento for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=oscarotero.vento-syntax) extension
enables syntax highlighting and provides some useful snippets.
The
[Vento for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=oscarotero.vento-syntax)
extension enables syntax highlighting and provides some useful snippets.

[**Quick Install**](vscode:extension/oscarotero.vento-syntax){role="button" .button}
[**Quick Install**](vscode:extension/oscarotero.vento-syntax){role="button"
.button}
11 changes: 6 additions & 5 deletions docs/syntax/for.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ dictionaries, numbers, strings, etc.
{{ /for }}
```

Vento will evaluate any code in the `[collection]` spot as JavaScript code, so you
can use any expression you'd like:
Vento will evaluate any code in the `[collection]` spot as JavaScript code, so
you can use any expression you'd like:

```vento
{{ for odd_number of [1, 2, 3].filter((n) => n%2) }}
Expand Down Expand Up @@ -90,8 +90,8 @@ is equivalent to:

### `null` and `undefined` values

Any `null` or `undefined` variable is converted to an empty array so the code won't
fail.
Any `null` or `undefined` variable is converted to an empty array so the code
won't fail.

```vento
{{ for item of undefined }}
Expand All @@ -109,7 +109,8 @@ The above example is equivalent to:

## Pipes

You can use Pipes to transform the iterable object before iterating it. For example, to filter by even numbers:
You can use Pipes to transform the iterable object before iterating it. For
example, to filter by even numbers:

```vento
{{ for even_number of [1, 2, 3] |> filter((n) => n % 2 === 0) }}
Expand Down
8 changes: 4 additions & 4 deletions docs/syntax/function.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Function

Functions are similar to JavaScript functions and allow you to define
reusable chunks of content.
Functions are similar to JavaScript functions and allow you to define reusable
chunks of content.

```vento
{{ function hello }}
Expand Down Expand Up @@ -50,5 +50,5 @@ Use the `async` keyword to create asynchronous functions.

## Importing/exporting functions

See [Imports and exports](./import-export.md) to learn how to import and
export functions from other templates.
See [Imports and exports](./import-export.md) to learn how to import and export
functions from other templates.
3 changes: 2 additions & 1 deletion docs/syntax/include.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ order: 4
# Include

Use `{{ include [filename] }}` to insert other templates in place. Vento will
look for the included file in the [`includes` folder](../configuration.md#includes).
look for the included file in the
[`includes` folder](../configuration.md#includes).

```vento
{{ include "filename.vto" }}
Expand Down
13 changes: 8 additions & 5 deletions docs/syntax/pipes.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,15 @@ Pipes can run three types of functions, in this order of priority:
## Filters

Filters are custom functions that you can configure to transform variables. By
default Vento has the `escape`, `unescape` and `safe` filters out of the box,
to escape and unescape HTML code:
default Vento has the `escape`, `unescape` and `safe` filters out of the box, to
escape and unescape HTML code:

```vento
{{ "<h1>Hello, world!</h1>" |> escape }}
```

The `safe` filter does not transform the content, but can be used to mark HTML data as trusted when in autoescaping mode;
The `safe` filter does not transform the content, but can be used to mark HTML
data as trusted when in autoescaping mode;

```vento
{{ myTrustedSource.getHtml() |> safe }}
Expand All @@ -42,7 +43,8 @@ parenthesis:

## Global functions

Vento will execute functions available in the standard JavaScript namespace, such as `JSON.stringify()`:
Vento will execute functions available in the standard JavaScript namespace,
such as `JSON.stringify()`:

```vento
{{ { name: "Óscar", surname: "Otero" } |> JSON.stringify }}
Expand Down Expand Up @@ -95,7 +97,8 @@ async functions. For example:

- [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) is a global
async function.
- [`json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json) is an async method of the `Response` object returned by `fetch`.
- [`json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json) is an
async method of the `Response` object returned by `fetch`.
- [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
is a global function.

Expand Down
4 changes: 3 additions & 1 deletion docs/syntax/print.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ Or an async operation (using `await`):

## Autoescaping

If autoescaping is enabled [See Configuration for more info](../configuration.md#autoescape), any HTML content will be escaped automatically. For example:
If autoescaping is enabled
[See Configuration for more info](../configuration.md#autoescape), any HTML
content will be escaped automatically. For example:

```vento
{{ "<h1>Hello, world!</h1>" }}
Expand Down
8 changes: 4 additions & 4 deletions docs/syntax/set.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ Block mode supports pipes too:

## Differences between `set` and creating the variable with JavaScript

Vento allows you to [run JavaScript](./javascript.md), so it's possible to create
new variables using normal JavaScript code:
Vento allows you to [run JavaScript](./javascript.md), so it's possible to
create new variables using normal JavaScript code:

```vento
{{> const name = "Óscar" }}
Expand Down Expand Up @@ -68,5 +68,5 @@ The `set` tag provides the following benefits:

## Importing/exporting variables

See [Imports and exports](./import-export.md) to learn how to export and
import variables from other templates.
See [Imports and exports](./import-export.md) to learn how to export and import
variables from other templates.

0 comments on commit ca031bb

Please sign in to comment.