docs: community templates (update)

This commit is contained in:
lowlighter
2022-01-16 21:25:51 -05:00
parent 7a600a4d09
commit 58f1775fbb
2 changed files with 34 additions and 21 deletions

View File

@@ -1,7 +1,7 @@
<!--header--> <!--header-->
<!--/header--> <!--/header-->
#### Examples workflows ## Examples workflows
<!--examples--> <!--examples-->
<!--/examples--> <!--/examples-->

View File

@@ -79,7 +79,9 @@ with:
## 📪 Creating community templates ## 📪 Creating community templates
Templates creation requires you to be comfortable with HTML, CSS and JavaScript ([EJS](https://github.com/mde/ejs) flavored). Templates creation requires you to be comfortable with HTML, CSS and [EJS](https://github.com/mde/ejs).
### 💬 Quick-start
To create a new template, clone and setup this repository first: To create a new template, clone and setup this repository first:
```shell ```shell
@@ -95,8 +97,8 @@ npm run quickstart template <template_name>
It will create a new directory in `/source/templates` with the following file structure: It will create a new directory in `/source/templates` with the following file structure:
* `/source/templates/{template-name}` * `/source/templates/{template-name}`
* `README.md`, * `README.md`
* `metadata.yml`, * `metadata.yml`
* `image.svg` * `image.svg`
* `partials/` * `partials/`
* `_.json` * `_.json`
@@ -127,11 +129,11 @@ Usually `image.svg` doesn't need to be edited too much, but let's explain it how
</svg> </svg>
``` ```
#### EJS syntax #### EJS syntax
[EJS](https://github.com/mde/ejs) framework is used to programmatically create content through the help of templating tags (`<% %>`). [EJS](https://github.com/mde/ejs) framework is used to programmatically create content through the help of templating tags (`<% %>`).
#### Styling #### Styling
`fonts` and `style` variables are respectively populated with `fonts.css` and `styles.css` files content (or will fallback to those of `classic` template inexistent). `fonts` and `style` variables are respectively populated with `fonts.css` and `styles.css` files content (or will fallback to those of `classic` template inexistent).
@@ -139,13 +141,13 @@ These will define the global design of the output.
`data-optimizable="true"` tells that a `style` tag can be safely minified and purged by CSS post-processors. `data-optimizable="true"` tells that a `style` tag can be safely minified and purged by CSS post-processors.
#### Partials #### Partials
`partials` variable is populated with `partials/_.json` file content and define which files should be included along with default ordering. `partials` variable is populated with `partials/_.json` file content and define which files should be included along with default ordering.
The loop iterates over this array to include all defined partials. Each partial should handle whether it should be displayed by itself. The loop iterates over this array to include all defined partials. Each partial should handle whether it should be displayed by itself.
### `#metrics-end` tag #### `#metrics-end` tag
`#metrics-end` is a special HTML tag which must remain at the bottom of SVG template. `#metrics-end` is a special HTML tag which must remain at the bottom of SVG template.
@@ -153,8 +155,9 @@ It is used to compute height dynamically through a [puppeteer](https://github.co
### 💬 Filling `metadata.yml` ### 💬 Filling `metadata.yml`
`metadata.yml` is a file which describes supported account types, output formats, scopes, etc. `metadata.yml` is a required file which describes supported account types, output formats, scopes, etc.
The default file looks like below:
```yaml ```yaml
name: "🖼️ Template name" name: "🖼️ Template name"
extends: classic extends: classic
@@ -174,28 +177,38 @@ formats:
- markdown-pdf - markdown-pdf
``` ```
[`🧱 core`](/source/plugins/core/README.md) plugin will automatically check user inputs with your defined supported `supports` and `formats` key and throw an error in case of incompatibility. > 💡 It is important to correctly define `metadata.yml` because *metrics* will use its content for various usage
`name`, `description` and `examples` are used to auto-generate documentation in the `README.md` by replacing the following: [`🧱 core`](/source/plugins/core/README.md) plugin (which is always called) will automatically verify user inputs against `supports` and `formats` values and throw an error in case of incompatibility.
```markdown `extends` is used to define the fallback for `template.mjs` when a template is not trusted by user (depending on whether you're building an user/organization or repository template, it is advised to either use `classic` or `repository`).
<ǃ--header-->
<ǃ--/header-->
```
`extends` is used to define upon which template it should inherits its `template.mjs` when it is not trusted by user. `name`, `description` and `examples` are used to auto-generate documentation in the `README.md`.
### 💬 Filling `examples.yml` ### 💬 Filling `examples.yml`
Workflow examples from `examples.yml` are used to auto-generate documentation in the `README.md` by replacing the following: Workflow examples from `examples.yml` are used to auto-generate documentation in the `README.md`.
### 💬 Filling `README.md`
`README.md` is used as documentation.
Most of it will is auto-generated by `metadata.yml` and `examples.yml` content, so usually it is not required to manually edit it.
The default content looks like below:
```markdown ```markdown
#### Examples workflows <ǃ--header-->
<ǃ--/header-->
## Examples workflows
<ǃ--examples--> <ǃ--examples-->
<ǃ--/examples--> <ǃ--/examples-->
``` ```
- `<ǃ--header-->` will be replaced by an auto-generated header containing template name, supported features and output examples based on `metadata.yml`
- `<ǃ--examples-->` will be replaced by workflows from `examples.yml`
### 💬 Creating partials ### 💬 Creating partials
Just create a new `.ejs` file in `partials` folder, and reference it into `partials/_.json`. Just create a new `.ejs` file in `partials` folder, and reference it into `partials/_.json`.
@@ -204,9 +217,9 @@ It should be able to handle gracefully plugins state and errors.
Below is a minimal snippet of a partial: Below is a minimal snippet of a partial:
```ejs ```ejs
<% if (plugins.gists) { %> <% if (plugins.{plugin_name}) { %>
<% if (plugins.gists.error) { %> <% if (plugins.{plugin_name}.error) { %>
<%= plugins.gists.error.message %> <%= plugins.{plugin_name}.error.message %>
<% } else { %> <% } else { %>
<%# content %> <%# content %>
<% } %> <% } %>