updated docs theme

ventojs · Jan 13, 2025 · 24cfcba · 24cfcba
1 parent 7eb5a6d
commit 24cfcba
Show file tree

Hide file tree

Showing 23 changed files with 74 additions and 130 deletions.
diff --git a/docs/getting-started.md → docs/1.getting-started.md b/docs/getting-started.md → docs/1.getting-started.md
@@ -1,7 +1,3 @@
----
-order: 1
----
-
 # Getting Started
 
 ## Install
@@ -69,8 +65,8 @@ console.log(result.content);
 
 ### Clearing cache
 
-Vento implements a cache to prevent excessive compilation. If you need to
-reload your templates at runtime (ie. for development), you can clear the cache.
+Vento implements a cache to prevent excessive compilation. If you need to reload
+your templates at runtime (ie. for development), you can clear the cache.
 
 ```js
 env.cache.clear();

diff --git a/docs/configuration.md → docs/2.configuration.md b/docs/configuration.md → docs/2.configuration.md
@@ -1,7 +1,3 @@
----
-order: 2
----
-
 # Configuration
 
 ## Options
@@ -43,10 +39,13 @@ Now you can use the `global` variable:
 
 ### autoDataVarname
 
-Vento can append automatically the `dataVarname` prefix (which by default is `.it`) to any variable that need it. For example, instead of
-`{{ it.title }}` you can simply write `{{ title }}` and vento automatically convert it to `{{ it.title }}`.
+Vento can append automatically the `dataVarname` prefix (which by default is
+`.it`) to any variable that need it. For example, instead of `{{ it.title }}`
+you can simply write `{{ title }}` and vento automatically convert it to
+`{{ it.title }}`.
 
-You can disable this behavior by setting the `autoDataVarname` option to `false`:
+You can disable this behavior by setting the `autoDataVarname` option to
+`false`:
 
 ```js
 const env = vento({
@@ -56,7 +55,9 @@ const env = vento({
 
 > [!warning]
 >
-> The `useWith` option is an alias for backward compatibility ([when `with` was used](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with)) but it will be removed in the future.
+> The `useWith` option is an alias for backward compatibility
+> ([when `with` was used](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with))
+> but it will be removed in the future.
 
 ### autoescape
 

diff --git a/docs/editor-integrations.md → docs/3.editor-integrations.md b/docs/editor-integrations.md → docs/3.editor-integrations.md
@@ -1,7 +1,3 @@
----
-order: 3
----
-
 # Editor Integrations
 
 ## Visual Studio Code
@@ -10,29 +6,33 @@ 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){.button .is-secondary}
+[**Quick Install**](vscode:extension/oscarotero.vento-syntax){.button
+.is-secondary}
 
 ### Open VSX Registry
 
 [Vento plugin is also available in Open VSX](https://open-vsx.org/extension/oscarotero/vento-syntax).
 
 ## Neovim
 
-Vento syntax highlighting is available for Neovim through [nvim-treesitter](https://github.com/nvim-treesitter/nvim-treesitter).
+Vento syntax highlighting is available for Neovim through
+[nvim-treesitter](https://github.com/nvim-treesitter/nvim-treesitter).
 
 To use it, add the "vento" filetype
 
 ```js
 vim.filetype.add({
-    extension = {
-        vto = "vento",
-    }
-})
+  extension: {
+    vto: "vento",
+  },
+});
 ```
 
-And install the "vento" parser with `TSInstall`, or add it to the `ensure_installed` list in the `setup` function.
+And install the "vento" parser with `TSInstall`, or add it to the
+`ensure_installed` list in the `setup` function.
 
-It's also recommended to install "javascript" and "html" parsers to get better syntax highlighting inside vento files.
+It's also recommended to install "javascript" and "html" parsers to get better
+syntax highlighting inside vento files.
 
 ```js
 require("nvim-treesitter.configs").setup({
@@ -42,7 +42,6 @@ require("nvim-treesitter.configs").setup({
 
 ## Zed
 
-The
-[Vento extension for Zed](https://github.com/dz4k/zed-vento)
-provides syntax highlighting. It can be installed from the Zed
+The [Vento extension for Zed](https://github.com/dz4k/zed-vento) provides syntax
+highlighting. It can be installed from the Zed
 [extensions gallery](https://zed.dev/docs/extensions/installing-extensions).
diff --git a/docs/syntax/print.md → docs/4.syntax/1.print.md b/docs/syntax/print.md → docs/4.syntax/1.print.md
@@ -1,7 +1,3 @@
----
-order: 1
----
-
 # Printing variables
 
 Put a variable or expression between `{{ }}` to output the result.
@@ -33,11 +29,11 @@ Or an async operation (using `await`):
 
 ## Autoescaping
 
-> [!important]
-> Autoescaping is **disabled by default**. [See configuration](../configuration.md#autoescape) to learn how to enable it.
+> [!important] Autoescaping is **disabled by default**.
+> [See configuration](../configuration.md#autoescape) to learn how to enable it.
 
-If autoescaping is enabled any HTML
-content will be escaped automatically. For example:
+If autoescaping is enabled any HTML content will be escaped automatically. For
+example:
 
 ```vento
 {{ "<h1>Hello, world!</h1>" }}
@@ -55,7 +51,6 @@ To mark this variable as trust, use the `safe` filter:
 {{ "<h1>Hello, world!</h1>" |> safe }}
 ```
 
-
 ## Trimming the previous/next content
 
 Use the `-` character next to the opening tag or previous to the closing tag to
@@ -73,7 +68,8 @@ the white space before the printing tag:
 The result is:
 
 ```html
-<h1>Hello, world!
+<h1>
+  Hello, world!
 </h1>
 ```
 
@@ -92,8 +88,8 @@ The result is:
 <h1>Hello, world!</h1>
 ```
 
-> [!tip]
-> The [plugin autoTrim](../plugins/auto-trim.md) can trim automatically some tags.
+> [!tip] The [plugin autoTrim](../plugins/auto-trim.md) can trim automatically
+> some tags.
 
 ## Pipes
 

diff --git a/docs/syntax/import-export.md → docs/4.syntax/10.import-export.md b/docs/syntax/import-export.md → docs/4.syntax/10.import-export.md
@@ -1,7 +1,3 @@
----
-order: 9
----
-
 # Imports and exports
 
 Vento templates not only render content but also can export other things like

diff --git a/docs/syntax/javascript.md → docs/4.syntax/11.javascript.md b/docs/syntax/javascript.md → docs/4.syntax/11.javascript.md
@@ -1,7 +1,3 @@
----
-order: 10
----
-
 # JavaScript code
 
 You can insert any JavaScript code in the templates between the tags

diff --git a/docs/syntax/pipes.md → docs/4.syntax/2.pipes.md b/docs/syntax/pipes.md → docs/4.syntax/2.pipes.md
@@ -1,7 +1,3 @@
----
-order: 1.4
----
-
 # Pipes
 
 Pipes are the way to chain functions to transform a value. Vento uses the

diff --git a/docs/syntax/set.md → docs/4.syntax/3.set.md b/docs/syntax/set.md → docs/4.syntax/3.set.md
@@ -1,7 +1,3 @@
----
-order: 1.5
----
-
 # Set
 
 The `{{ set [name] = [value] }}` tag allows to create or modify a global

diff --git a/docs/syntax/for.md → docs/4.syntax/4.for.md b/docs/syntax/for.md → docs/4.syntax/4.for.md
@@ -1,7 +1,3 @@
----
-order: 3
----
-
 # For
 
 Use `{{ for [value] of [collection] }}` tag to iterate over arrays,

diff --git a/docs/syntax/if.md → docs/4.syntax/5.if.md b/docs/syntax/if.md → docs/4.syntax/5.if.md
@@ -1,7 +1,3 @@
----
-order: 2
----
-
 # If
 
 Use `{{ if [expression] }}` to test a condition. Any code you want to test will

diff --git a/docs/syntax/include.md → docs/4.syntax/6.include.md b/docs/syntax/include.md → docs/4.syntax/6.include.md
@@ -1,7 +1,3 @@
----
-order: 4
----
-
 # Include
 
 Use `{{ include [filename] }}` to insert other templates in place. Vento will

diff --git a/docs/syntax/layout.md → docs/4.syntax/7.layout.md b/docs/syntax/layout.md → docs/4.syntax/7.layout.md
@@ -1,7 +1,3 @@
----
-order: 5
----
-
 # Layout
 
 The `{{ layout }}` tag allows to capture some content in a template and render
@@ -68,6 +64,6 @@ This code outputs:
 
 ```html
 <div class="container">
-	<h1>HELLO, WORLD!</h1>
+  <h1>HELLO, WORLD!</h1>
 </div>
 ```
diff --git a/docs/syntax/comments.md → docs/4.syntax/8.comments.md b/docs/syntax/comments.md → docs/4.syntax/8.comments.md
@@ -1,7 +1,3 @@
----
-order: 8
----
-
 # Comments
 
 Use `{{#` to start a comment and `#}}` to end it. The commented code will be
@@ -13,7 +9,8 @@ ignored by Vento.
 
 ## Trimming spaces
 
-Like other tags, it's possible to trim the space after and/or before a comment using the `-` character.
+Like other tags, it's possible to trim the space after and/or before a comment
+using the `-` character.
 
 ```vento
 <h1>

diff --git a/docs/syntax/function.md → docs/4.syntax/9.function.md b/docs/syntax/function.md → docs/4.syntax/9.function.md
@@ -1,6 +1,3 @@
----
-order: 8
----
 # Function
 
 Functions are similar to JavaScript functions and allow you to define reusable

diff --git a/docs/syntax/index.md → docs/4.syntax/index.md b/docs/syntax/index.md → docs/4.syntax/index.md
@@ -1,6 +1,3 @@
----
-order: 10
----
 # Syntax
 
 The API of Vento is designed to be very simple but flexible.

diff --git a/docs/plugins/auto-trim.md → docs/5.plugins/auto-trim.md b/docs/plugins/auto-trim.md → docs/5.plugins/auto-trim.md
@@ -1,12 +1,12 @@
 # Auto Trim
 
-By default, Vento doesn't automatically try to trim the whitespace from around tags. Using the
-`autoTrim` plugin, you can enable this behavior.
+By default, Vento doesn't automatically try to trim the whitespace from around
+tags. Using the `autoTrim` plugin, you can enable this behavior.
 
 ## Usage
 
-`autoTrim` comes included with Vento, so you don't need to install any additional packages.
-Simply import it and use it in your instance.
+`autoTrim` comes included with Vento, so you don't need to install any
+additional packages. Simply import it and use it in your instance.
 
 ```js
 import autoTrim from "vento/plugins/auto_trim.ts";
@@ -15,22 +15,24 @@ import autoTrim from "vento/plugins/auto_trim.ts";
 env.use(autoTrim());
 ```
 
-By default, the tags that are trimmed are:
-`set`, `if`, `else`, `for`, `function`, `async`, `export`, `import`, comments and JavaScript.
+By default, the tags that are trimmed are: `set`, `if`, `else`, `for`,
+`function`, `async`, `export`, `import`, comments and JavaScript.
 
-If you want to add or remove tags from the list, you can pass an array of tags to the plugin.
+If you want to add or remove tags from the list, you can pass an array of tags
+to the plugin.
 
 ```js
 import autoTrim, { defaultTags } from "vento/plugins/auto_trim.ts";
 // import autoTrim, { defaultTags } from "ventojs/plugins/auto_trim.js";
 
 env.use(autoTrim({
-  tags: ["tag", ...defaultTags]
+  tags: ["tag", ...defaultTags],
 }));
 ```
 
-If enabled, any of the listed tags will be trimmed away, as if it didn't exist in the markup.
-It respects newlines, so it only snips out the tag, while preserving your markup.
+If enabled, any of the listed tags will be trimmed away, as if it didn't exist
+in the markup. It respects newlines, so it only snips out the tag, while
+preserving your markup.
 
 For example,
 
@@ -42,14 +44,13 @@ For example,
 ```
 
 Will be rendered as:
+
 ```
-  Hello, Name!
+Hello, Name!
 ```
 
 Instead of the following:
-```
-
-  Hello, Name!
-  
 
 ```
+Hello, Name!
+```
diff --git a/docs/plugins/fragments.md → docs/5.plugins/fragments.md b/docs/plugins/fragments.md → docs/5.plugins/fragments.md
@@ -1,7 +1,7 @@
 # Fragments
 
-> [!warning]
-> This is a third-party plugin. [Source code](https://github.com/wrapperup/vento-plugin-fragments).
+> [!warning] This is a third-party plugin.
+> [Source code](https://github.com/wrapperup/vento-plugin-fragments).
 
 Adds support for
 [template fragments](https://htmx.org/essays/template-fragments), which allows

diff --git a/docs/5.plugins/index.md b/docs/5.plugins/index.md
@@ -0,0 +1,7 @@
+# Plugins
+
+Vento features a powerful plugin system that allows you to extend the engine
+with new features.
+
+Nearly all of Vento's core features are implemented as plugins, so you can
+easily add, remove or modify them to fit your needs.
diff --git a/docs/framework-integrations.md → docs/6.framework-integrations.md b/docs/framework-integrations.md → docs/6.framework-integrations.md
@@ -1,15 +1,13 @@
----
-order: 3
----
-
 # Framework integrations
 
 Vento can be used with the following frameworks:
 
 - Lume: [supported by default](https://lume.land/plugins/vento/)
-- Eleventy: [eleventy-plugin-vento](https://www.npmjs.com/package/eleventy-plugin-vento).
+- Eleventy:
+  [eleventy-plugin-vento](https://www.npmjs.com/package/eleventy-plugin-vento).
 - Express: [express-vento](https://www.npmjs.com/package/express-vento)
 
 ---
 
-Did you create an integration? [Open a PR](https://github.com/ventojs/vento/issues/new).
+Did you create an integration?
+[Open a PR](https://github.com/ventojs/vento/issues/new).
diff --git a/docs/formatter.md → docs/7.formatter.md b/docs/formatter.md → docs/7.formatter.md
@@ -1,14 +1,13 @@
----
-order: 4
----
-
 # Formatter
 
 ## markup_fmt with dprint
 
-[markup_fmt](https://github.com/g-plane/markup_fmt) can format Vento templates. This can be used in dprint as a plugin.
-You can also install other dprint plugins that can format JavaScript code, so the expressions in templates can get formatted.
-It can also format the code inside `<script>` tag and `<style>` tag if you installed some dprint plugins that can format JavaScript code or CSS code, for example, [Malva](https://github.com/g-plane/malva).
+[markup_fmt](https://github.com/g-plane/markup_fmt) can format Vento templates.
+This can be used in dprint as a plugin. You can also install other dprint
+plugins that can format JavaScript code, so the expressions in templates can get
+formatted. It can also format the code inside `<script>` tag and `<style>` tag
+if you installed some dprint plugins that can format JavaScript code or CSS
+code, for example, [Malva](https://github.com/g-plane/malva).
 
 Once you installed dprint, run the commands below to add plugins: