, 3 min read

Embedding Content in Simplified Saaze

Original post is here eklausmeier.goip.de/blog/2023/04-29-embedding-content-in-simplified-saaze.


This blog is powered by Simplified Saaze. This static site generator allows to embed various external content, like:

  1. Twitter
  2. YouTube
  3. TikTok
  4. Vimeo
  5. WordPress Video

This post gives some examples.

Before we show the easy way to embed them, let's just reiterate that you can embed the plain HTML code directly into your Markdown file. The Markdown converter employed by Simplified Saaze is MD4C. And MD4C accepts HTML code in Markdown. Very simple.

1. Twitter tweets. Add below line to frontmatter:

Twitter: true

The actual code in Markdown is:

[twitter] https://twitter.com/ValaAfshar/status/548891185268666369 [/twitter]

This gives:

Alternatively you could embed below HTML code into your Markdown file:

<blockquote class="twitter-tweet">
    <p lang="en" dir="ltr">&quot;The amount of energy necessary to refute BS is an order of magnitude bigger than to produce it.&quot;
    <a href="http://t.co/uuPG1iDslb">pic.twitter.com/uuPG1iDslb</a></p>&mdash; Vala Afshar (@ValaAfshar)
    <a href="https://twitter.com/ValaAfshar/status/548891185268666369?ref_src=twsrc%5Etfw">December 27, 2014</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2. YouTube videos. No special tag is required in the frontmatter. In the Markdown file just add:

[youtube] WFKjKPkbzoI [/youtube]

This gives:

YouTube requires quite some JavaScript. To refrain using all this JavaScript overhead, use below code using YouTube-light (lt) instead:

[youtubelt] WFKjKPkbzoI [/youtubelt]

This will just show a thumbnail picture. If you want to actually watch the movie, you have to click on the thumbnail.

YouTube

No flag is required in the frontmatter.

3. TikTok videos. TikTok videos have become very popular in recent years. Embedding these videos in Simplified Saaze is simple. Add below code to your frontmatter:

TikTok: true

Put below code into your Markdown file:

[tiktok] https://www.tiktok.com/@sumitsinvestmenttakes/video/7296719275937647918 [/tiktok]

This produces:

@sumitsinvestmenttakes

Alternatively you can embed below HTML code into your Markdown.

<blockquote class="tiktok-embed"
        cite="https://www.tiktok.com/@neuroscienceandyou/video/7223065474198818053"
        data-video-id="7223065474198818053" style="max-width: 605px;min-width: 325px;" >
    <section><a target="_blank" title="@neuroscienceandyou" href="https://www.tiktok.com/@neuroscienceandyou?refer=embed">@neuroscienceandyou</a></section>
</blockquote>

4. Vimeo videos. Vimeo has lost of its traction and is currently losing money. Nevertheless, it is easy to embed a Vimeo video.

Alternatively you could embed below HTML code:

<iframe src="https://player.vimeo.com/video/116679405?h=705f66bf98" width="640" height="360"
    frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>
<p><a href="https://vimeo.com/116679405">Milonga - Lima Guitar Duo (sesi&oacute;n en vivo)</a>
from <a href="https://vimeo.com/emedape">Eme</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

5. Wordpress video. Also called Videopress. It seems to be no longer of major relevance. Even Matt Mullenweg doesn't use it on his own website anymore for new posts. Nevertheless, you can easily embed Wordpress videos in Simplified Saaze. Type below code into your Markdown file:

[wpvideo cmA03MuQ w=400 h=224]

Result is:

No flag is required in the frontmatter.

6. Notes on frontmatter. For Twitter and TikTok you must include special code in the frontmatter, so that the templates in Simplified Saaze can then add the required JavaScript libraries. In the case of Twitter the logic is as below in bottom-layout.php, one part of the templates.

<?php if (isset($entry['Twitter'])) { ?>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<?php } ?>

For TikTok the logic is similar.

<?php if (isset($entry['TikTok'])) { ?>
    <script async src="https://www.tiktok.com/embed.js"></script>
<?php } ?>

The reason for all these conditionals is that the JavaScript libraries in question are quite big. So if they are not required, you want to avoid to load them.