Skip to content

Commit 58f1775

Browse files
committed
docs: community templates (update)
1 parent 7a600a4 commit 58f1775

File tree

2 files changed

+34
-21
lines changed

2 files changed

+34
-21
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--header-->
22
<!--/header-->
33

4-
#### ℹ️ Examples workflows
4+
## ℹ️ Examples workflows
55

66
<!--examples-->
77
<!--/examples-->

source/templates/community/README.md

+33-20
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@ with:
7979

8080
## 📪 Creating community templates
8181

82-
Templates creation requires you to be comfortable with HTML, CSS and JavaScript ([EJS](https://github.com/mde/ejs) flavored).
82+
Templates creation requires you to be comfortable with HTML, CSS and [EJS](https://github.com/mde/ejs).
83+
84+
### 💬 Quick-start
8385

8486
To create a new template, clone and setup this repository first:
8587
```shell
@@ -95,8 +97,8 @@ npm run quickstart template <template_name>
9597

9698
It will create a new directory in `/source/templates` with the following file structure:
9799
* `/source/templates/{template-name}`
98-
* `README.md`,
99-
* `metadata.yml`,
100+
* `README.md`
101+
* `metadata.yml`
100102
* `image.svg`
101103
* `partials/`
102104
* `_.json`
@@ -127,34 +129,35 @@ Usually `image.svg` doesn't need to be edited too much, but let's explain it how
127129
</svg>
128130
```
129131

130-
#### EJS syntax
132+
#### ℹ️ EJS syntax
131133

132134
[EJS](https://github.com/mde/ejs) framework is used to programmatically create content through the help of templating tags (`<% %>`).
133135

134-
#### Styling
136+
#### ℹ️ Styling
135137

136138
`fonts` and `style` variables are respectively populated with `fonts.css` and `styles.css` files content (or will fallback to those of `classic` template inexistent).
137139

138140
These will define the global design of the output.
139141

140142
`data-optimizable="true"` tells that a `style` tag can be safely minified and purged by CSS post-processors.
141143

142-
#### Partials
144+
#### ℹ️ Partials
143145

144146
`partials` variable is populated with `partials/_.json` file content and define which files should be included along with default ordering.
145147

146148
The loop iterates over this array to include all defined partials. Each partial should handle whether it should be displayed by itself.
147149

148-
### `#metrics-end` tag
150+
#### ℹ️ `#metrics-end` tag
149151

150152
`#metrics-end` is a special HTML tag which must remain at the bottom of SVG template.
151153

152154
It is used to compute height dynamically through a [puppeteer](https://github.com/puppeteer/puppeteer) headless instance. Initial height should remain a high number so it doesn't get cropped accidentally while [puppeteer](https://github.com/puppeteer/puppeteer) compute [element.getBoundingClientRect()](https://developer.mozilla.org/fr/docs/Web/API/Element/getBoundingClientRect).
153155

154156
### 💬 Filling `metadata.yml`
155157

156-
`metadata.yml` is a file which describes supported account types, output formats, scopes, etc.
158+
`metadata.yml` is a required file which describes supported account types, output formats, scopes, etc.
157159

160+
The default file looks like below:
158161
```yaml
159162
name: "🖼️ Template name"
160163
extends: classic
@@ -174,28 +177,38 @@ formats:
174177
- markdown-pdf
175178
```
176179

177-
[`🧱 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.
180+
> 💡 It is important to correctly define `metadata.yml` because *metrics* will use its content for various usage
178181

179-
`name`, `description` and `examples` are used to auto-generate documentation in the `README.md` by replacing the following:
182+
[`🧱 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.
180183

181-
```markdown
182-
<ǃ--header-->
183-
<ǃ--/header-->
184-
```
184+
`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`).
185185

186-
`extends` is used to define upon which template it should inherits its `template.mjs` when it is not trusted by user.
186+
`name`, `description` and `examples` are used to auto-generate documentation in the `README.md`.
187187

188188
### 💬 Filling `examples.yml`
189189

190-
Workflow examples from `examples.yml` are used to auto-generate documentation in the `README.md` by replacing the following:
190+
Workflow examples from `examples.yml` are used to auto-generate documentation in the `README.md`.
191+
192+
### 💬 Filling `README.md`
193+
194+
`README.md` is used as documentation.
191195

196+
Most of it will is auto-generated by `metadata.yml` and `examples.yml` content, so usually it is not required to manually edit it.
197+
198+
The default content looks like below:
192199
```markdown
193-
#### ℹ️ Examples workflows
200+
<ǃ--header-->
201+
<ǃ--/header-->
202+
203+
## ℹ️ Examples workflows
194204
195205
<ǃ--examples-->
196206
<ǃ--/examples-->
197207
```
198208

209+
- `<ǃ--header-->` will be replaced by an auto-generated header containing template name, supported features and output examples based on `metadata.yml`
210+
- `<ǃ--examples-->` will be replaced by workflows from `examples.yml`
211+
199212
### 💬 Creating partials
200213

201214
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.
204217

205218
Below is a minimal snippet of a partial:
206219
```ejs
207-
<% if (plugins.gists) { %>
208-
<% if (plugins.gists.error) { %>
209-
<%= plugins.gists.error.message %>
220+
<% if (plugins.{plugin_name}) { %>
221+
<% if (plugins.{plugin_name}.error) { %>
222+
<%= plugins.{plugin_name}.error.message %>
210223
<% } else { %>
211224
<%# content %>
212225
<% } %>

0 commit comments

Comments
 (0)