Skip to content

Add templates for presentation viewer #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PrajwolAmatya merged 14 commits into from
Nov 21, 2025
Merged

Add templates for presentation viewer #111

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ec7b7e6
add templates
PrajwolAmatya Oct 15, 2025
72d5434
add docs related to templating
PrajwolAmatya Oct 27, 2025
306f108
fix image size in title content image slide
PrajwolAmatya Oct 28, 2025
a42c554
scope selectors inside slide container
PrajwolAmatya Oct 30, 2025
f25b932
update docs
PrajwolAmatya Nov 3, 2025
8c70f79
address docs review
PrajwolAmatya Nov 4, 2025
24e3c5c
fix presentation template when slide is missing on default metadata
PrajwolAmatya Nov 5, 2025
e1e65e6
adress review
PrajwolAmatya Nov 12, 2025
eb5f5ee
dynamically load templated related css
PrajwolAmatya Nov 13, 2025
80441ef
add tests
PrajwolAmatya Nov 18, 2025
d52e122
update plugin
PrajwolAmatya Nov 19, 2025
63547de
fix logo url
PrajwolAmatya Nov 20, 2025
0e98466
add test for slide sanitization
PrajwolAmatya Nov 20, 2025
9234b96
update logo url on markdown file
PrajwolAmatya Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 216 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,222 @@ This app has the following default slide separators:
- Horizontal separator: `---` (`← →`)
- Vertical separator: `--` (`↓ ↑`)

## Using Templates

To use the templates in the presentation viewer, use the front matter to provide default metadata followed by slide
contents.

The front matter is used to define the default values for the presentation and will be applied to every slides. The
default metadata can be defined as below:

```markdown
---
slide: <default-slide-type>
presenter: <name-of-the-presenter>
logo: <path-to-logo>
color: <font-color-for-slide-title>
footer: <footer-content>
aboutUs:
- title: <about-us-title1>
text: <text-for-title1>
Copy link
Member

@individual-it individual-it Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how difficult would it be to allow links here?
Currently

  - title: WWW
     text: [www.jankaritech.com](www.jankaritech.com)

makes the whole presentation to fall apart

Object { name: "YAMLException", reason: "bad indentation of a mapping entry", mark: {…}, message: "bad indentation of a mapping entry at line 7, column 10:\n         text: [www.jankaritech.com](www.jank ... \n             ^", stack: "", … }
​
mark: Object { buffer: "slide: title-content\npresenter:  JankariTech Pvt. Ltd. \nlogo: Logo-colour.png\nfooter: Markdown Presentation Viewer\naboutUs:\n  - title: WWW\n     text: [www.jankaritech.com](www.jankaritech.com)\n  - title: linkedin\n    text: www.linkedin.com/company/jankaritech\n  - title: facebook\n    text: www.facebook.com/jankaritech\n\u0000", position: 148, line: 6, … }
​
message: "bad indentation of a mapping entry at line 7, column 10:\n         text: [www.jankaritech.com](www.jank ... \n             ^"
​
name: "YAMLException"
​
reason: "bad indentation of a mapping entry"

If links are not supported that is fine, but the presentation should not break

Copy link
Member

@individual-it individual-it Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doing something invalid here, e.g text:www.jankaritech.com leads now to this error:

YAMLException: can not read an implicit mapping pair; a colon is missed at line 7, column 29: text:www.jankaritech.com ^

it gives some hint, but might still be hard for users to understand. Do we want to accept that kind of error message for now?

- title: <about-us-title2>
text: <text-for-title2>
- title: <about-us-title3>
text: <text-for-title3>
---
```

These are the supported metadata required for the presentation template.

| Default Metadata | Description |
|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `slide` | Default slide for presentation. Most used slide template can be given in the default metadata. |
| `presenter` | Name of the presenter. |
| `logo` | Logo appears on the top right corner of the slide. The logo path should be relative to the markdown file. |
| `color` | Font color of the slide title. |
| `footer` | Content to be shown in the footer of the slide. |
| `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) |
| `aboutUs:title` | Title for each column in about-us slide. |
| `aboutUs:text` | Text under each title for column in about-us slide. |

Following the front matter, create slides as described in [Creating Presentation](#creating-presentation)

Besides default metadata, you can also provide inline metadata for each slide. This will be useful when you want to
override the default metadata for a specific slide and this will be applied to that slide only. The inline metadata can
be defined by adding metadata directly on the slide title as below:

```markdown
# Title of the slide ::metadata_key_1:metadata_value_1 ::metadata_key_2:metadata_value_2
```

Example:
```markdown
# Title of slide ::slide:title-content-image ::logo:logo.png
```

For this slide, the `slide` template will be set to `title-content-image`, and the `logo` will be set to `logo.png`.

### Slide Templates

The slide template should be provided in the default metadata. The slide type set in the default metadata will be used as the default. The mostly used slide template can be set as default. When you set a slide template in the default metadata, you don’t need to specify the slide type again in the inline metadata for slides that are already defined in the default metadata.

| Slide Template | Desctiption | Usage |
|-----------------------|-----------------------------------------------------------------------------------|-------------------------------|
| `cover` | This slide template can be used for cover slide | `::slide:cover` |
| `title-content` | A slide with a title and some content (the content can also be an image) | `::slide:title-content` |
| `title-content-image` | A slide with a title, and content on the left side and an image on the right side | `::slide:title-content-image` |
| `about-us` | The slide with about-us info (e.g., Values, mission, Vision) | `::slide:about-us` |

#### Slide "Cover"

Code:

```markdown
# TITLE ::slide:cover
```

Preview:

```text
┌────────────────────────────────────────────────────┐
│ │
│ │
│ LOGO │
│ TITLE │
│ PRESENTER NAME │
│ │
│ │
├────────────────────────────────────────────────────┤
│ LOGO │
└────────────────────────────────────────────────────┘
```

#### Slide "title-content"

Code:

```markdown
# TITLE ::slide:title-content

CONTENT
```

Preview:

```text
┌────────────────────────────────────────────────────┐
│ TITLE LOGO │
├────────────────────────────────────────────────────┤
│ │
│ │
│ CONTENT │
│ │
│ │
├────────────────────────────────────────────────────┤
│ FOOTER PAGENR │
└────────────────────────────────────────────────────┘
```

Image can also be included in the content of the slide.

Code:

```markdown
# TITLE ::slide:title-content

CONTENT

![This is image description](./image.png)
```

Preview:

```text
┌────────────────────────────────────────────────────┐
│ TITLE LOGO │
├────────────────────────────────────────────────────┤
│ CONTENT │
├────────────────────────────────────────────────────┤
│ │
│ IMAGE │
│ │
├────────────────────────────────────────────────────┤
│ FOOTER PAGENR │
└────────────────────────────────────────────────────┘
```

#### Slide "title-content-image"

Code:

```markdown
# TITLE ::slide:title-content-image

CONTENT

![This is image description](image.png)
```

Preview:

```text
┌────────────────────────────────────────────────────┐
│ TITLE LOGO │
├──────────────────────────┬─────────────────────────┤
│ │ │
│ │ │
│ CONTENT │ IMAGE │
│ │ │
│ │ │
├──────────────────────────┴─────────────────────────┤
│ FOOTER PAGENR │
└────────────────────────────────────────────────────┘
```

#### Slide "about-us"

Code:

```markdown
# TITLE ::slide:about-us

CONTENT
```

The `title` and `text` can be provided via default metadata in front matter as:

```markdown
---
aboutUs:
- title: Title 1
text: Some text under title 1
- title: Title 2
text: Some text under title 2
- title: Title 3
text: Some text under title 3
---
```

Preview:

```text
┌────────────────────────────────────────────────────┐
│ TITLE LOGO │
├────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────┐ │
│ │ CONTENT │ │
│ └────────────────────────────────────────────┘ │
│ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │
│ │ TITLE │ │ │ TITLE │ │ │ TITLE │ │
│ │ TEXT │ │ │ TEXT │ │ │ TEXT │ │
│ └────────┘ │ └────────┘ │ └────────┘ │
│ │
├────────────────────────────────────────────────────┤
│ FOOTER PAGENR │
└────────────────────────────────────────────────────┘
```

## Development

> [!IMPORTANT] When switching between OpenCloud and oCIS, make sure to clean the browser cache!
Expand Down
40 changes: 40 additions & 0 deletions public/templates/about-us-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<script type="x-tmpl-mustache">
<div class="content-container">
<div class="title">
<h1>

{{{ title }}}

</h1>
<div class="logo">
<img src="{{{ metadata.logo }}}" alt="Logo">
</div>
</div>

<div class="content-wrapper">
<div class="content">
<div class="about-us-text">

{{{ content }}}

</div>
<div class="info-section">

{{#metadata.aboutUs}}
<div class="info-box">
<h3>{{ title }}</h3>
<p>{{ text }}</p>
</div>
<div class="divider"></div>
{{/metadata.aboutUs}}

</div>

</div>
</div>
</div>
<footer>
<div class="footer-content">{{{ metadata.footer }}}</div>
<div class="custom-slide-number"></div>
</footer>
</script>
16 changes: 16 additions & 0 deletions public/templates/cover-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script type="x-tmpl-mustache">
<div class="content-container">
<div class="logo">
<img src="{{{ metadata.logo }}}" alt="Logo">
</div>

<div class="content">
<h1>{{{ title }}}</h1>

<p>
By: {{{ metadata.presenter }}}
</p>

</div>
</div>
</script>
26 changes: 26 additions & 0 deletions public/templates/title-content-image-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<script type="x-tmpl-mustache">
<div class="content-container">
<div class="title">
<h1>

{{{ title }}}

</h1>
<div class="logo">
<img src="{{{ metadata.logo }}}" alt="Logo">
</div>
</div>

<div class="content-wrapper">
<div class="content">

{{{ content }}}

</div>
</div>
</div>
<footer>
<div class="footer-content">{{{ metadata.footer }}}</div>
<div class="custom-slide-number"></div>
</footer>
</script>
26 changes: 26 additions & 0 deletions public/templates/title-content-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<script type="x-tmpl-mustache">
<div class="content-container">
<div class="title">
<h1>

{{{ title }}}

</h1>
<div class="logo">
<img src="{{{ metadata.logo }}}" alt="Logo">
</div>
</div>

<div class="content-wrapper">
<div class="content">

{{{ content }}}

</div>
</div>
</div>
<footer>
<div class="footer-content">{{{ metadata.footer }}}</div>
<div class="custom-slide-number"></div>
</footer>
</script>
Loading