Improve docs

docs/.vuepress/config.js

@@ -10,7 +10,11 @@ module.exports = {
     sidebar: [
       'introduction',
       'instalation',
-      'api',
+      {
+        title: 'Api',
+        children: ['/api/instance-methods', '/api/v-t-directive', '/api/i18n-component'],
+        collapsable: false,
+      },
       {
         title: 'HOWTO',
         children: ['/howto/date-time', '/howto/access-outside-of-component'],

docs/README.md

@@ -1,5 +1,8 @@
 ---
 home: true
+meta:
+  - name: keywords
+    content: vue i18n l10n vue.js fluent.js translation localization
 tagline: Vue.js integration for Project Fluent
 actionText: Get Started →
 actionLink: /introduction.html
@@ -12,3 +15,9 @@ features:
   details: With fluent-vue-loader you can include localization messages with rest of your single file component code.
 footer: MIT Licensed | Copyright © 2020-present Ivan Demchuk
 ---
+
+## Example
+
+<<< @/components/Simple.vue#snippet
+
+<simple-input />

docs/api/i18n-component.md

@@ -0,0 +1,56 @@
+# `i18n` component
+
+Allows to use Vue components and html elements inside translation messages.
+
+* Props:
+  * `path {string}` localization message key
+  * `tag {string}` html tag to generate. Default is span
+  * `args {object}` message parameters
+
+Message:
+```
+greeting = Hello, {$userName}!
+```
+
+Template:
+```html
+<i18n path="greeting" tag="div">
+  <template #userName>
+    <b>World</b>
+  </template>
+</i18n>
+```
+
+Result:
+```html
+<div>Hello, <b>World</b>!</div>
+```
+
+### Scoped slots
+
+Message attributes are passed as scoped slot parameters. This allows to not split translation into multiple messages. And attributes have access to same parameters entire message has access to.
+
+Message:
+```
+sign-in-or-sign-up =
+  {$signInLink} or {$signUpLink} to the site.
+  .sign-in-label = Sign in
+  .sign-up-label = sign up
+```
+
+Template:
+```html
+<i18n path="sign-in-or-sign-up" tag="p">
+  <template #signInLink="{ signInLabel }">
+    <a href="/login">{{ signInLabel }}</a>
+  </template>
+  <template #signUpLink="{ signUpLabel }">
+    <a href="/sign-up">{{ signUpLabel }}</a>
+  </template>
+</i18n>
+```
+
+Result:
+```html
+<p>⁨<a href="/login">Sign in</a>⁩ or ⁨<a href="/sign-up">sign up</a>⁩ to the site.</p>
+```

docs/api/instance-methods.md

@@ -0,0 +1,56 @@
+# `$t` and `$ta` instance methods
+
+### `$t` method
+
+Formats message  with `key` identifier. `args` will be used to resolve references to variables passed as arguments to the translation.
+
+* Arguments
+  * `{string} key`: required
+  * `{object} args`: optional
+
+* Returns: `{string}`
+
+Template:
+```html
+<p>{{ $t('greeting', { name: 'World' }) }}</p>
+```
+
+Message:
+```
+greating = Hello, {$name}
+```
+
+Result:
+```html
+<p>Hello, World</p>
+```
+
+### `$ta` method
+
+Formats message with `key` identifier, but only returns message attributes. `args` will be used to resolve references to variables passed as arguments to the translation.
+
+This method should be used mostly for passing parameters to custom components. For localization of regular html elements [v-t](/api/v-t-directive) directive is more convenient.
+
+* Arguments
+  * `{string} key`: required
+  * `{object} args`: optional
+
+* Returns: `{object}`
+
+Template:
+```html
+<input v-bind="$ta('login-input')" type="email">
+```
+
+Message:
+```
+login-input =
+    .placeholder = email@example.com
+    .aria-label = Login input value
+    .title = Type your login email
+```
+
+Result:
+```html
+<input placeholder="email@example.com" aria-label="Login input value" title="Type your login email" type="email">
+```

docs/api/v-t-directive.md

@@ -0,0 +1,32 @@
+# `v-t` directive
+
+Combines `$t` and `$ta` methods binding message and its attributes to `innerText` and html attributes of a html element.
+
+::: tip Note
+By default only localizable html attributes are bound (aria-label, title, alt, etc). Directive modifiers allow specifying additional attributes to bind.
+:::
+
+Usage: `v-t:key="values"`.
+
+* Argument:
+  * `key {string}`: required
+* Value:
+  * `values {object}`: optional
+* Modifiers:
+  * `{string}`: optional
+
+Template:
+```html
+<a v-t:link="{ userName }" href="/login"></a>
+```
+
+Message:
+```
+link = Hello, {$userName}!
+    .aria-label = Welcome message for {$userName}
+```
+
+Result:
+```html
+<a href="/login" aria-label="Welcome message for ⁨Jonh Doe⁩">Hello, ⁨Jonh Doe⁩</a>
+```

docs/integrations/webpack.md

@@ -2,10 +2,6 @@
 
 `fluent-vue-loader` allows to use custom blocks in your single file componens.
 
-Example:
-
-<<< @/components/Simple.vue#snippet
-
 1. Install `fluent-vue-loader` package
 
 <code-group>

docs/introduction.md

@@ -4,11 +4,21 @@
 
 Project Fluent keeps simple things simple and makes complex things possible. The syntax used for describing translations is easy to read and understand. At the same time it allows, when necessary, to represent complex concepts from natural languages like gender, plurals, conjugations, and others.
 
-## Example
-
-<<< @/components/Simple.vue#snippet
-
-<simple-input />
+```
+# Simple things are simple.
+hello-user = Hello, {$userName}!
+
+# Complex things are possible.
+shared-photos =
+  {$userName} {$photoCount ->
+     [one] added one photo
+    *[other] added {$photoCount} new photos
+  } to {$userGender ->
+     [male] his stream
+     [female] her stream
+    *[other] their stream
+  }.
+```
 
 ## FTL syntax
 

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "dist",
-    "sourceMap": false,
+    "sourceMap": true,
     "target": "ES2019",
     "module": "esnext",
     "moduleResolution": "node",