Skip to content

Commit 4040b87

Browse files
PrajwolAmatyaPrajwolAmatya
committed
add docs related to templating
1 parent ec7b7e6 commit 4040b87

File tree

1 file changed

+200
-0
lines changed

1 file changed

+200
-0
lines changed

‎README.md‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,206 @@ This app has the following default slide separators:
5050
- Horizontal separator: `---` (`← →`)
5151
- Vertical separator: `--` (`↓ ↑`)
5252
53+
## Using Templates
54+
55+
To use the templates in the presentation viewer, use the front matter to provide default metadata followed by slide
56+
contents.
57+
58+
The front matter is used to define the default values for the presentation and will be applied to every slides. The
59+
default metadata can be defined as below:
60+
61+
```markdown
62+
---
63+
slide: <default-slide-type>
64+
presenter: <name-of-the-presenter>
65+
logo: <path-to-logo>
66+
color: <font-color-for-slide-title>
67+
footer: <footer-content>
68+
aboutUs: <content-for-about-us-slide>
69+
---
70+
```
71+
72+
These are the supported metadata required for the presentation template.
73+
74+
| Default Metadata | Description |
75+
|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
76+
| `slide` | Default slide for presentation. Most used slide template can be given in the default metadata. |
77+
| `presenter` | Name of the presenter. |
78+
| `logo` | Logo of the company. Logo appears on the top right corner of the slide |
79+
| `color` | Font color of the slide title. |
80+
| `footer` | Content to be shown in the footer of the slide. |
81+
| `aboutUs` | Column wise content to be shown in the about-us slide. Use this metadata only if about-us slide is used for the presentation. More [here](#slide-about-us) |
82+
83+
Following the front matter, create slides as described in [Creating Presentation](#creating-presentation)
84+
85+
Besides default metadata, you can also provide inline metadata for each slide. This will be useful when you want to
86+
override the default metadata for a specific slide and this will be applied to that slide only. The inline metadata can
87+
be defined by adding metadata directly after the slide title as below:
88+
89+
```markdown
90+
# Title of the slide ::metadata_key_1:metadata_value_1 ::metadata_key_2:metadata_value_2
91+
```
92+
93+
### Slide Templates
94+
95+
The slide template should be provided in the default metadata. Provide slide template that will be mostly used in the
96+
default metadata, so you don't need to add the slide metadata in every slide.
97+
98+
| Slide Template | Desctiption | Usage |
99+
|-----------------------|-----------------------------------------------------------------|-------------------------------|
100+
| `cover` | This slide template can be used for cover slide | `::slide:cover` |
101+
| `title-content` | The slide with title and content (content can be image as well) | `::slide:title-content` |
102+
| `title-content-image` | The slide with title, and content in left and image in right | `::slide:title-content-image` |
103+
| `about-us` | The slide with company info (e.g., Values, mission, Vision) | `::slide:about-us` |
104+
105+
#### Slide "Cover"
106+
107+
Preview:
108+
109+
```text
110+
┌────────────────────────────────────────────────────┐
111+
│ │
112+
│ │
113+
│ LOGO │
114+
│ TITLE │
115+
│ PRESENTER NAME │
116+
│ │
117+
│ │
118+
├────────────────────────────────────────────────────┤
119+
│ LOGO │
120+
└────────────────────────────────────────────────────┘
121+
```
122+
123+
Code:
124+
125+
```markdown
126+
# TITLE ::slide:cover
127+
```
128+
129+
#### Slide "title-content"
130+
131+
Preview:
132+
133+
```text
134+
┌────────────────────────────────────────────────────┐
135+
│ TITLE LOGO │
136+
├────────────────────────────────────────────────────┤
137+
│ │
138+
│ │
139+
│ CONTENT │
140+
│ │
141+
│ │
142+
├────────────────────────────────────────────────────┤
143+
│ FOOTER PAGENR │
144+
└────────────────────────────────────────────────────┘
145+
```
146+
147+
Code:
148+
149+
```markdown
150+
# TITLE ::slide:title-content
151+
152+
CONTENT
153+
```
154+
155+
Image can also be included in the content of the slide.
156+
157+
Preview:
158+
159+
```text
160+
┌────────────────────────────────────────────────────┐
161+
│ TITLE LOGO │
162+
├────────────────────────────────────────────────────┤
163+
│ CONTENT │
164+
├────────────────────────────────────────────────────┤
165+
│ │
166+
│ IMAGE │
167+
│ │
168+
├────────────────────────────────────────────────────┤
169+
│ FOOTER PAGENR │
170+
└────────────────────────────────────────────────────┘
171+
```
172+
173+
Code:
174+
175+
```markdown
176+
# TITLE ::slide:title-image
177+
178+
CONTENT
179+
180+
![This is image description](./image.png)
181+
```
182+
183+
#### Slide "title-content-image"
184+
185+
Preview:
186+
187+
```text
188+
┌────────────────────────────────────────────────────┐
189+
│ TITLE LOGO │
190+
├──────────────────────────┬─────────────────────────┤
191+
│ │ │
192+
│ │ │
193+
│ CONTENT │ IMAGE │
194+
│ │ │
195+
│ │ │
196+
├──────────────────────────┴─────────────────────────┤
197+
│ FOOTER PAGENR │
198+
└────────────────────────────────────────────────────┘
199+
```
200+
201+
Code:
202+
203+
```markdown
204+
# TITLE ::slide:title-content-image
205+
206+
CONTENT
207+
208+
![This is image description](image.png)
209+
```
210+
211+
#### Slide "about-us"
212+
213+
Preview:
214+
215+
```text
216+
┌────────────────────────────────────────────────────┐
217+
│ TITLE LOGO │
218+
├────────────────────────────────────────────────────┤
219+
│ │
220+
│ ┌────────────────────────────────────────────┐ │
221+
│ │ CONTENT │ │
222+
│ └────────────────────────────────────────────┘ │
223+
│ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │
224+
│ │ TITLE │ │ │ TITLE │ │ │ TITLE │ │
225+
│ │ TEXT │ │ │ TEXT │ │ │ TEXT │ │
226+
│ └────────┘ │ └────────┘ │ └────────┘ │
227+
│ │
228+
└────────────────────────────────────────────────────┘
229+
```
230+
231+
Code:
232+
233+
```markdown
234+
# TITLE ::slide:about-us
235+
236+
CONTENT
237+
```
238+
239+
The `title` and `text` can be provided via default metadat in front matter as:
240+
241+
```markdown
242+
---
243+
aboutUs:
244+
- title: Title 1
245+
text: Some text under title 1
246+
- title: Title 2
247+
text: Some text under title 2
248+
- title: Title 3
249+
text: Some text under title 3
250+
---
251+
```
252+
53253
## Development
54254

55255
> [!IMPORTANT] When switching between OpenCloud and oCIS, make sure to clean the browser cache!

0 commit comments

Comments
 (0)