You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: source/templates/community/README.md
+33-20
Original file line number
Diff line number
Diff line change
@@ -79,7 +79,9 @@ with:
79
79
80
80
## 📪 Creating community templates
81
81
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
83
85
84
86
To create a new template, clone and setup this repository first:
85
87
```shell
@@ -95,8 +97,8 @@ npm run quickstart template <template_name>
95
97
96
98
It will create a new directory in `/source/templates` with the following file structure:
97
99
* `/source/templates/{template-name}`
98
-
* `README.md`,
99
-
* `metadata.yml`,
100
+
* `README.md`
101
+
* `metadata.yml`
100
102
* `image.svg`
101
103
* `partials/`
102
104
* `_.json`
@@ -127,34 +129,35 @@ Usually `image.svg` doesn't need to be edited too much, but let's explain it how
127
129
</svg>
128
130
```
129
131
130
-
#### EJS syntax
132
+
#### ℹ️ EJS syntax
131
133
132
134
[EJS](https://github.com/mde/ejs) framework is used to programmatically create content through the help of templating tags (`<% %>`).
133
135
134
-
#### Styling
136
+
#### ℹ️ Styling
135
137
136
138
`fonts`and `style` variables are respectively populated with `fonts.css` and `styles.css` files content (or will fallback to those of `classic` template inexistent).
137
139
138
140
These will define the global design of the output.
139
141
140
142
`data-optimizable="true"`tells that a `style` tag can be safely minified and purged by CSS post-processors.
141
143
142
-
#### Partials
144
+
#### ℹ️ Partials
143
145
144
146
`partials`variable is populated with `partials/_.json` file content and define which files should be included along with default ordering.
145
147
146
148
The loop iterates over this array to include all defined partials. Each partial should handle whether it should be displayed by itself.
147
149
148
-
### `#metrics-end` tag
150
+
#### ℹ️ `#metrics-end` tag
149
151
150
152
`#metrics-end`is a special HTML tag which must remain at the bottom of SVG template.
151
153
152
154
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).
153
155
154
156
### 💬 Filling `metadata.yml`
155
157
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.
157
159
160
+
The default file looks like below:
158
161
```yaml
159
162
name: "🖼️ Template name"
160
163
extends: classic
@@ -174,28 +177,38 @@ formats:
174
177
- markdown-pdf
175
178
```
176
179
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
178
181
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.
180
183
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`).
185
185
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`.
187
187
188
188
### 💬 Filling `examples.yml`
189
189
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.
191
195
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:
192
199
```markdown
193
-
#### ℹ️ Examples workflows
200
+
<ǃ--header-->
201
+
<ǃ--/header-->
202
+
203
+
## ℹ️ Examples workflows
194
204
195
205
<ǃ--examples-->
196
206
<ǃ--/examples-->
197
207
```
198
208
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
+
199
212
### 💬 Creating partials
200
213
201
214
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.
0 commit comments