From c2d72e09747a2a4abe9602e1ba49a1b4649c9d3c Mon Sep 17 00:00:00 2001
From: Jieiku
Date: Fri, 14 Aug 2026 15:10:15 -0700
Subject: Update for Zola 0.23.3

---
 templates/components/audio.html      |  30 +++
 templates/components/components.html | 504 +++++++++++++++++++++++++++++++++++
 templates/components/gif.html        |  30 +++
 templates/components/image.html      |  64 +++++
 templates/components/img.html        |  52 ++++
 templates/components/imgswap.html    | 103 +++++++
 templates/components/katex.html      |   3 +
 templates/components/showdata.html   |   9 +
 templates/components/streamable.html |   5 +
 templates/components/video.html      |  30 +++
 templates/components/vimeo.html      |   5 +
 templates/components/youtube.html    |   5 +
 12 files changed, 840 insertions(+)
 create mode 100644 templates/components/audio.html
 create mode 100644 templates/components/components.html
 create mode 100644 templates/components/gif.html
 create mode 100644 templates/components/image.html
 create mode 100644 templates/components/img.html
 create mode 100644 templates/components/imgswap.html
 create mode 100644 templates/components/katex.html
 create mode 100644 templates/components/showdata.html
 create mode 100644 templates/components/streamable.html
 create mode 100644 templates/components/video.html
 create mode 100644 templates/components/vimeo.html
 create mode 100644 templates/components/youtube.html

(limited to 'templates/components')

diff --git a/templates/components/audio.html b/templates/components/audio.html
new file mode 100644
index 0000000..f31488d
--- /dev/null
+++ b/templates/components/audio.html
@@ -0,0 +1,30 @@
+{% component audio(page, config, sources, caption="", class="", autoplay=false, loop=false, muted=false, playsinline=false) %}
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif  %}
+<audio controls{% if class %} class="{{class}}"{% endif %}{% if autoplay %} autoplay{% endif %}{% if loop %} loop{% endif %}{% if muted %} muted{% endif %}{% if playsinline %} playsinline{% endif %}>
+  {% for src in sources  %}
+
+  {%- set file = src | split(pat="/") | last %}
+  {%- set dirtest = src | trim_start(pat="./") %}
+  {%- if dirtest is containing(pat="/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page and page.path %}{%- set pagepath = page.path %}{%- elif section and section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if src is starting_with(pat="./") and reldir %}{# Relative Path #}
+    {%- set path = (src | trim_start(pat="./") | split(pat="/"))[:-1] | join(sep="/") | trim_start(pat="/") -%}
+    {%- set path = path ~ "/" %}
+
+  {%- elif src is starting_with(pat="/") %}{# Root Path #}
+    {%- set rootpath = (src | split(pat="/"))[:-1] | join(sep="/") -%}
+    {%- set path = (config.base_url if config else "") ~ rootpath ~ "/" %}
+
+  {%- else %}{# Same Directory Path #}
+    {%- set path = "" %}
+
+  {%- endif %}
+
+  {%- set type = src | split(pat=".") | last %}
+  {%- if type is matching(pat="^mov$") %}{% set type = "quicktime" %}{% endif %}
+  <source src="{{ path | safe }}{{ file | safe }}" type="{{ 'audio/' ~ type }}" />
+  {%- endfor -%}Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!</audio>
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif %}
+
+{% endcomponent audio %}
diff --git a/templates/components/components.html b/templates/components/components.html
new file mode 100644
index 0000000..7ce9ef3
--- /dev/null
+++ b/templates/components/components.html
@@ -0,0 +1,504 @@
+{# Former macro components #}
+
+{% component translate(key: string, i18n, default="") %}
+{{- i18n[key] | default(value=default) | safe -}}
+{% endcomponent translate %}
+
+{%- component page_listing(page, config) %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
+{%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{%- set uglyurls = true %}{%- endif %}{%- endif %}
+        <div class="tpad">
+          <a href="{{ page.permalink | safe}}{%- if uglyurls %}index.html{%- endif %}">{{ page.title | markdown(inline=true) | safe }}</a>
+        </div>
+{%- endcomponent page_listing %}
+
+{%- component series_link(inner, page, config) %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
+{%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{%- set uglyurls = true %}{%- endif %}{%- endif %}
+  {%- if inner.content == page.content %}
+        <a class="scur" href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
+    {%- else %}
+        <a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
+  {%- endif %}
+{%- endcomponent series_link %}
+
+{%- component title_post(page, config) %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false) %}
+{%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{%- set uglyurls = true %}{%- endif %}{%- endif %}
+      <h1><a href="{{ page.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ page.title | markdown(inline=true) | safe }}</a></h1>
+{%- endcomponent title_post %}
+
+{%- component meta_post(page, config) -%}
+{#- Load current language i18n data from .toml files in user's '/i18n' folder, use theme as fallback. -#}
+{%- set i18n = load_data(path="i18n/" ~ page.lang ~ '.toml', required=false) -%}
+{%- if not i18n -%}{%- set i18n = load_data(path="themes/abridge/i18n/" ~ page.lang ~ ".toml", required=false) -%}{%- endif -%}
+
+{%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
+{%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{%- set uglyurls = true -%}{%- endif %}{%- endif %}
+      <span{%- if config.extra.meta_post?.size %} class="{{ config.extra.meta_post?.size }}"{% endif %}>
+
+        {#- Author #}
+        {%- if page.taxonomies.authors and config.taxonomies %}
+          {%- for author in page.taxonomies.authors %}
+          {%- if author_flag %}, {% endif %}
+          <a href="{{ get_taxonomy_url(kind='authors', term=author) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ author }}</a>
+          {%- set_global author_flag = true %}
+          {%- endfor %}
+        {%- elif page.extra.authors and config.extra.meta_post?.author %}
+          {%- if config.extra.icon_author %}<i class="{{ config.extra.icon_author }}"></i> {% endif %}
+          {%- for author in page.extra.authors %}
+          {%- if author_flag %}, {% endif %} {{ author }}
+          {%- set_global author_flag = true %}
+          {%- endfor %}
+        {%- elif config.extra.author and config.extra.meta_post?.author %}
+          {%- if config.extra.icon_author %}<i class="{{ config.extra.icon_author }}"></i> {% endif %} {{ config.extra.author }}
+        {%- endif %}
+
+          {#- divider #}
+          {%- if config.extra.meta_post?.author %}
+          {%- if config.extra.meta_post?.readtime or config.extra.meta_post?.date or config.extra.meta_post?.updated or config.extra.meta_post?.categories_tags %}
+          {%- if config.extra.meta_post?.divider %}<span class="hpad">{{ config.extra.meta_post?.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}
+          {%- endif %}
+          {%- endif %}
+
+        {#- ReadTime #}
+          {%- if config.extra.meta_post?.readtime %} {%- if config.extra.icon_read %}<i class="{{ config.extra.icon_read }}"></i> {% endif %} {{ page.reading_time }} {{ config.extra.meta_post?.readstring | default(value="min") }}
+          {#- divider #}
+          {%- if config.extra.meta_post?.date or config.extra.meta_post?.updated or config.extra.meta_post?.categories_tags %}
+          {%- if config.extra.meta_post?.divider %}<span class="hpad">{{ config.extra.meta_post?.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{%- endif %}
+
+        {#- Date #}
+          {%- if config.extra.meta_post?.date %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i> {% endif %}
+          {%- set lang_locale %}{{<translate key='date_locale'  default='en_US'  i18n={i18n} />}}{% endset  %}
+          {%- set page_date = page.date | date(format="%B %d, %Y", locale=lang_locale)  %}
+          {%- if page_date %} {{ page_date }} {%- else %} {{ page.date | date(format="%B %d, %Y") }} {%- endif %}
+          {#- divider #}
+          {%- if config.extra.meta_post?.updated or config.extra.meta_post?.categories_tags %}
+          {%- if config.extra.meta_post?.divider %}<span class="hpad">{{ config.extra.meta_post?.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{% endif %}
+
+        {#- Updated #}
+          {%- if config.extra.meta_post?.updated and page.updated %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i> {% endif  %}
+          {{<translate key="Updated"  default="Updated"  i18n={i18n} />}}:
+          {%- set lang_locale %}{{<translate key='date_locale'  default='en_US'  i18n={i18n} />}}{% endset  %}
+          {%- set page_updated = page.updated | date(format="%B %d, %Y", locale=lang_locale)  %}
+          {%- if page_updated %} {{ page_updated }} {%- else %} {{ page.updated | date(format="%B %d, %Y") }} {%- endif %}
+          {#- divider #}
+          {%- if config.extra.meta_post?.categories_tags %}
+          {%- if config.extra.meta_post?.divider %}<span class="hpad">{{ config.extra.meta_post?.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{% endif %}
+
+        {#- Categories #}
+          {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %}<i class="{{ config.extra.icon_info }}"></i> {% endif %} [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', term=cat, lang=page.lang) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ cat }}</a>{%- if not loop.last %}, {% endif %}{% endfor %}]{% endif %}
+
+        {#- Tags #}
+          {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', term=tag, lang=page.lang) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor  %}{%- endif %}</span>
+{%- endcomponent meta_post %}
+
+{%- component title_index(page, config) %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false)  -%}
+{%- if config.extra.search_library -%}{%- if config.extra.search_library == "offline" -%}{%- set uglyurls = true -%}{%- endif -%}{%- endif -%}
+        <big>{% if config.extra.title_size_index %}<span class="{{ config.extra.title_size_index }}">{% endif %}<a href="{{ page.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ page.title | markdown(inline=true) | safe }}</a>{% if config.extra.title_size_index %}</span>{% endif %}</big>
+{%- endcomponent title_index -%}
+
+{%- component meta_index(page, config) %}
+{#- Load current language i18n data from .toml files in user's '/i18n' folder, use theme as fallback. -#}
+{%- set i18n = load_data(path="i18n/" ~ page.lang ~ '.toml', required=false)  -%}
+{%- if not i18n  %}{%- set i18n = load_data(path="themes/abridge/i18n/" ~ page.lang ~ ".toml", required=false)  %}{%- endif %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false)  -%}
+{%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{%- set uglyurls = true -%}{%- endif -%}{%- endif -%}
+        <span{%- if config.extra.meta_index?.size %} class="{{ config.extra.meta_index?.size }}"{% endif %}>
+
+        {#- Author #}
+        {%- if page.taxonomies.authors and config.taxonomies %}
+          {%- for author in page.taxonomies.authors %}
+          {%- if author_flag %}, {% endif %}
+          <a href="{{ get_taxonomy_url(kind='authors', term=author, lang=page.lang) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ author }}</a>
+          {%- set_global author_flag = true %}
+          {%- endfor %}
+        {%- elif page.extra.authors and config.extra.meta_index?.author %}
+          {%- if config.extra.icon_author %}<i class="{{ config.extra.icon_author }}"></i> {% endif %}
+          {%- for author in page.extra.authors %}
+          {%- if author_flag %}, {% endif %} {{ author }}
+          {%- set_global author_flag = true %}
+          {%- endfor %}
+        {%- elif config.extra.author and config.extra.meta_index?.author %}
+          {%- if config.extra.icon_author %}<i class="{{ config.extra.icon_author }}"></i> {% endif %} {{ config.extra.author }}
+        {%- endif %}
+
+          {#- divider #}
+          {%- if config.extra.meta_index?.author %}
+          {%- if config.extra.meta_index?.readtime or config.extra.meta_index?.date or config.extra.meta_index?.updated or config.extra.meta_index?.categories_tags %}
+          {%- if config.extra.meta_index?.divider %}<span class="hpad">{{ config.extra.meta_index?.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}
+          {%- endif %}
+          {%- endif %}
+
+        {#- ReadTime #}
+          {%- if config.extra.meta_index?.readtime %} {%- if config.extra.icon_read %}<i class="{{ config.extra.icon_read }}"></i> {% endif %} {{ page.reading_time }} {{ config.extra.meta_index?.readstring | default(value="min") }}
+          {#- divider #}
+          {%- if config.extra.meta_index?.date or config.extra.meta_index?.updated or config.extra.meta_index?.categories_tags %}
+          {%- if config.extra.meta_index?.divider %}<span class="hpad">{{ config.extra.meta_index?.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{%- endif %}
+
+        {#- Date #}
+          {%- if config.extra.meta_index?.date %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i> {% endif %}
+          {%- set lang_locale %}{{<translate key='date_locale'  default='en_US'  i18n={i18n} />}}{% endset  %}
+          {%- set page_date = page.date | date(format="%B %d, %Y", locale=lang_locale)  %}
+          {%- if page_date %} {{ page_date }} {%- else %} {{ page.date | date(format="%B %d, %Y") }} {%- endif %}
+          {#- divider #}
+          {%- if config.extra.meta_index?.updated or config.extra.meta_index?.categories_tags %}
+          {%- if config.extra.meta_index?.divider %}<span class="hpad">{{ config.extra.meta_index?.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{% endif %}
+
+        {#- Updated #}
+          {%- if config.extra.meta_index?.updated and page.updated %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i> {% endif  %}
+          {{<translate key="Updated"  default="Updated"  i18n={i18n} />}}:
+          {%- set lang_locale %}{{<translate key='date_locale'  default='en_US'  i18n={i18n} />}}{% endset  %}
+          {%- set page_updated = page.updated | date(format="%B %d, %Y", locale=lang_locale)  %}
+          {%- if page_updated %} {{ page_updated }} {%- else %} {{ page.updated | date(format="%B %d, %Y") }} {%- endif %}
+          {#- divider #}
+          {%- if config.extra.meta_index?.categories_tags %}
+          {%- if config.extra.meta_index?.divider %}<span class="hpad">{{ config.extra.meta_index?.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{% endif %}
+
+        {#- Categories #}
+          {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %}<i class="{{ config.extra.icon_info }}"></i> {% endif %} [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', term=cat, lang=page.lang) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ cat }}</a>{%- if not loop.last %}, {% endif %}{% endfor %}]{% endif %}
+
+        {#- Tags #}
+          {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', term=tag, lang=page.lang) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor  %}{%- endif %}</span>
+{%- endcomponent meta_index -%}
+
+{%- component footer(page, config) %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
+{%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{%- set uglyurls = true %}{%- endif %}{%- endif %}
+      {#- prev/next content page nextprev title pagination -#}
+      {%- if not config.extra.hide_page_nextprev_titles | default(value=false) %}
+      {%- if page.lower or page.higher %}
+      <nav>
+        <div>
+          {%- if page.lower %}
+          <a href="{{ page.lower.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">&#8249; {{ page.lower.title | truncate(length=100) | markdown(inline=true) | safe }}</a>
+          {%- endif %}
+        </div>
+        <div>
+          {%- if page.higher %}
+          <a href="{{ page.higher.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}"> {{ page.higher.title | truncate(length=100) | markdown(inline=true) | safe }} &#8250;</a>
+          {%- endif %}
+        </div>
+      </nav>
+      {%- endif %}
+      {%- endif %}
+{%- endcomponent footer %}
+
+{% component pagination(paginator, config) %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false)  %}
+{%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{% set uglyurls = true %}{% endif %}{% endif %}
+  {%- if paginator.number_pagers > 1 %}
+            {%- if paginator.number_pagers <= 5 %}  {# 5 or less pager is simple, just display all 5 #}
+                {%- set start = 1 %}
+                {%- set end = paginator.number_pagers %}
+            {%- endif %}
+
+            {%- if paginator.number_pagers > 5 %}
+
+                {%- if paginator.current_index >= 3 %}                {# Check if the first number will be 1 or not #}
+                    {%- set start = paginator.current_index - 2 %}    {# Set the start number #}
+                    {%- if paginator.number_pagers - paginator.current_index < 2 %}  {# the last two pages your no longer centered with equal pages start and end #}
+                        {%- set difference = paginator.number_pagers - paginator.current_index %}
+                        {%- set compensation =  1 - difference %}
+                        {%- set start = paginator.current_index - 3 - compensation %}  {# however many pages are missing on the end, add offset to start #}
+                    {%- endif %}
+                {%- else %}
+                    {%- set start = 1 %}
+                {%- endif %}
+
+                {%- if paginator.number_pagers >= paginator.current_index + 2 %}  {# Check if the last page is beyond our range #}
+                    {%- set end = paginator.current_index + 2 %}  {# End is beyond our range so we can safely set it to our range #}
+                    {%- if paginator.current_index <= 3 %}  {# check offset start, if on page 1 or 2 then set the end to page 5 #}
+                        {%- set end = 5 %}
+                    {%- endif %}
+                {%- else %}
+                    {%- set end = paginator.number_pagers %}
+                {%- endif %}
+            {%- endif %}
+      <nav class="vpad">
+        {%- set icon_first=config.extra.icon_first | default(value="svgs svgh angll")  %}
+        {%- set icon_prev=config.extra.icon_prev | default(value="svgs svgh angl")  %}
+        {%- set icon_next=config.extra.icon_next | default(value="svgs svgh angr")  %}
+        {%- set icon_last=config.extra.icon_last | default(value="svgs svgh angrr")  %}
+        {%- if paginator.previous  %}
+          <a class="on outp" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" title="First Page">
+          {%- if icon_first  %}<i class="{{ icon_first }}" alt="First Page"></i>
+          {%- else  %}&#171;
+          {%- endif  %}
+          </a>
+        {%- else  %}
+          <span class="off outp">
+          {%- if icon_first  %}<i class="{{ icon_first }}" alt="First Page"></i>
+          {%- else  %}&#171;
+          {%- endif  %}
+          </span>
+        {%- endif  %}
+
+        {%- if paginator.previous  %}
+          <a class="on outp" href="{{ paginator.previous | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Previous Page">
+          {%- if icon_prev  %}<i class="{{ icon_prev }}" alt="Previous Page"></i>
+          {%- else  %}&#8249;
+          {%- endif  %}
+          </a>
+        {%- else  %}
+          <span class="off outp">
+          {%- if icon_prev  %}<i class="{{ icon_prev }}" alt="Previous Page"></i>
+          {%- else  %}&#8249;
+          {%- endif  %}
+          </span>
+        {%- endif  %}
+
+        {%- for i in range(start=start, end=end+1)  %}
+            {%- if i == paginator.current_index  %}
+            <a class="inp on cnav" href="#">{{i}}</a>
+            {%- elif i > 1  %}
+            <a class="inp on" href="{{ paginator.base_url | safe }}{{ i ~ '/' }}{%- if uglyurls %}index.html{%- endif %}">{{i}}</a>
+            {%- else  %}
+            <a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ i }}</a>
+            {%- endif  %}
+        {%- endfor  %}
+
+        {%- if paginator.next  %}
+          <a class="on outp" href="{{ paginator.next | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Next Page">
+          {%- if icon_next  %}<i class="{{ icon_next }}" alt="Next Page"></i>
+          {%- else  %}&#8250;
+          {%- endif  %}
+          </a>
+        {%- else  %}
+          <span class="off outp">
+          {%- if icon_next  %}<i class="{{ icon_next }}" alt="Next Page"></i>
+          {%- else  %}&#8250;
+          {%- endif  %}
+          </span>
+        {%- endif  %}
+
+        {%- if paginator.next  %}
+          <a class="on outp" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">
+          {%- if icon_last  %}<i class="{{ icon_last }}" alt="Last Page"></i>
+          {%- else  %}&#187;
+          {%- endif  %}
+          </a>
+        {%- else  %}
+          <span class="off outp">
+          {%- if icon_last  %}<i class="{{ icon_last }}" alt="Last Page"></i>
+          {%- else  %}&#187;
+          {%- endif  %}
+          </span>
+        {%- endif  %}
+      </nav>
+  {%- endif %}
+{% endcomponent pagination %}
+
+{% component numpagination(paginator, config) %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false)  %}
+{%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{% set uglyurls = true %}{% endif %}{% endif %}
+  {%- if paginator.number_pagers > 1 %}
+            {%- if paginator.number_pagers <= 5 %}  {# 5 or less pager is simple, just display all 5 #}
+                {%- set start = 1 %}
+                {%- set end = paginator.number_pagers %}
+            {%- endif %}
+
+            {%- if paginator.number_pagers > 5 %}
+
+                {%- if paginator.current_index >= 3 %}                {# Check if the first number will be 1 or not #}
+                    {%- set start = paginator.current_index - 2 %}    {# Set the start number #}
+                    {%- if paginator.number_pagers - paginator.current_index < 2 %}  {# the last two pages your no longer centered with equal pages start and end #}
+                        {%- set difference = paginator.number_pagers - paginator.current_index %}
+                        {%- set compensation =  1 - difference %}
+                        {%- set start = paginator.current_index - 3 - compensation %}  {# however many pages are missing on the end, add offset to start #}
+                    {%- endif %}
+                {%- else %}
+                    {%- set start = 1 %}
+                {%- endif %}
+
+                {%- if paginator.number_pagers >= paginator.current_index + 2 %}  {# Check if the last page is beyond our range #}
+                    {%- set end = paginator.current_index + 2 %}  {# End is beyond our range so we can safely set it to our range #}
+                    {%- if paginator.current_index <= 3 %}  {# check offset start, if on page 1 or 2 then set the end to page 5 #}
+                        {%- set end = 5 %}
+                    {%- endif %}
+                {%- else %}
+                    {%- set end = paginator.number_pagers %}
+                {%- endif %}
+            {%- endif %}
+      <nav class="vpad">
+        {%- if paginator.current_index > 6 and paginator.number_pagers > 7 %}
+          <a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="First Page">1</a>
+          <a class="inp on" href="{{ paginator.base_url | safe }}{{ 2 ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Page 2">2</a>
+          <span class="dis outp">...</span>
+        {%- elif paginator.current_index > 5 and paginator.number_pagers > 7 %}
+          <a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="First Page">1</a>
+          <a class="inp on" href="{{ paginator.base_url | safe }}{{ 2 ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Page 2">2</a>
+          <a class="inp on" href="{{ paginator.base_url | safe }}{{ 3 ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Page 3">3</a>
+        {%- elif paginator.current_index > 4 and paginator.number_pagers > 6 %}
+          <a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="First Page">1</a>
+          <a class="inp on" href="{{ paginator.base_url | safe }}{{ 2 ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Page 2">2</a>
+        {%- elif paginator.current_index > 3 and paginator.number_pagers > 5  %}
+          <a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="First Page">1</a>
+        {%- endif  %}
+
+        {%- for i in range(start=start, end=end+1)  %}
+            {%- if i == paginator.current_index  %}
+            <a class="inp on cnav" href="#">{{i}}</a>
+            {%- elif i > 1  %}
+            <a class="inp on" href="{{ paginator.base_url | safe }}{{ i ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Page {{i}}">{{i}}</a>
+            {%- else  %}
+            <a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Page {{i}}">{{ i }}</a>
+            {%- endif  %}
+        {%- endfor  %}
+
+        {%- if paginator.number_pagers > paginator.current_index+5 and paginator.number_pagers > 7 %}
+          <span class="dis outp">...</span>
+          <a class="inp on" href="{{ paginator.base_url | safe }}{{paginator.number_pagers-1}}/{%- if uglyurls %}index.html{%- endif %}" aria-label="Page {{paginator.number_pagers-1}}">{{paginator.number_pagers-1}}</a>
+          <a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Last Page">{{paginator.number_pagers}}</a>
+        {%- elif paginator.number_pagers > paginator.current_index+4 and paginator.number_pagers > 7 %}
+          <a class="inp on" href="{{ paginator.base_url | safe }}{{paginator.number_pagers-2}}/{%- if uglyurls %}index.html{%- endif %}" aria-label="Page {{paginator.number_pagers-2}}">{{paginator.number_pagers-2}}</a>
+          <a class="inp on" href="{{ paginator.base_url | safe }}{{paginator.number_pagers-1}}/{%- if uglyurls %}index.html{%- endif %}" aria-label="Page {{paginator.number_pagers-1}}">{{paginator.number_pagers-1}}</a>
+          <a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Last Page">{{paginator.number_pagers}}</a>
+        {%- elif paginator.number_pagers > paginator.current_index+3 and paginator.number_pagers > 6 %}
+          <a class="inp on" href="{{ paginator.base_url | safe }}{{paginator.number_pagers-1}}/{%- if uglyurls %}index.html{%- endif %}" aria-label="Page {{paginator.number_pagers-1}}">{{paginator.number_pagers-1}}</a>
+          <a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Last Page">{{paginator.number_pagers}}</a>
+        {%- elif paginator.number_pagers > paginator.current_index+2 and paginator.number_pagers > 5 %}
+          <a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" aria-label="Last Page">{{paginator.number_pagers}}</a>
+        {%- endif  %}
+      </nav>
+  {%- endif %}
+{% endcomponent numpagination %}
+
+{% component seo( config, title="", title_addition="", description="", type="website", is_home=false, is_404=false, is_page=false, page_images="", page_section="", created_time="2023-05-15T07:07:00-07:00", updated_time="2023-05-15T07:07:00-07:00", page="" ) -%}
+{#- Load current language i18n data from .toml files in user's '/i18n' folder, use theme as fallback. -#}
+{%- set _lang = page.lang if page else config.default_language -%}
+{%- set i18n = load_data(path="i18n/" ~ _lang ~ '.toml', required=false) -%}
+{%- if not i18n -%}{%- set i18n = load_data(path="themes/abridge/i18n/" ~ _lang ~ ".toml", required=false) -%}{%- endif -%}
+{%- set lang_locale %}{{<translate key='date_locale'  default='en_US'  i18n={i18n} />}}{% endset -%}
+{%- if is_404 %}
+  <meta name="robots" content="noindex, follow" />
+{%- else %}
+  <meta name="robots" content="index, follow" />
+  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+  <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+{%- endif  %}
+
+{%- if current_url %}
+  {%- set page_url = current_url %}
+{%- else %}
+  {%- set page_url = get_url(path="404.html", trailing_slash=true) %}
+{%- endif %}
+  <title>{{ title ~ title_addition }}</title>
+
+{%- if config.extra?.author %}
+  <meta name="author" content="{{ config.extra?.author }}" />
+{%- endif %}
+{%- if config.extra?.facebook_publisher %}
+  <meta property="article:publisher" content="https://www.facebook.com/{{ config.extra?.facebook_publisher }}" />
+{%- endif %}
+  <meta name="copyright" content="{{ config.title }}" />
+{%- if config.extra?.facebook_author %}
+  <meta property="article:author" content="https://www.facebook.com/{{ config.extra?.facebook_author }}" />
+{%- endif %}
+{%- if page?.description %}
+  <meta name="description" content="{{ page?.description }}" />
+{%- else %}
+  <meta name="description" content="{{ config.description }}" />
+{%- endif %}
+  <link rel="canonical" href="{{ page_url | safe }}" />
+{%- if page?.extra?.keywords and config.extra?.keywords %}
+  <meta name="keywords" content="{{ page?.extra?.keywords }}, {{ config.extra?.keywords }}" />
+{%- elif page?.extra?.keywords %}
+  <meta name="keywords" content="{{ page?.extra?.keywords }}" />
+{%- elif config.extra?.keywords %}
+  <meta name="keywords" content="{{ config.extra?.keywords }}" />
+{%- endif %}
+
+{#- Extra SEO START #}
+{%- if config.extra?.seo | default(value=true) %}
+{%- if not is_404 %}
+
+{%- if config.extra?.google %}
+  <meta name="google-site-verification" content="{{ config.extra?.google | safe }}" />
+{%- endif %}
+
+{%- if config.extra?.bing %}
+  <meta name="msvalidate.01" content="{{ config.extra?.bing | safe}}" />
+{%- endif %}
+  <meta property="og:url" content="{{ page_url | safe }}" />
+  <meta name="twitter:url" content="{{ page_url | safe }}" />
+
+{%- if page?.description %}
+  <meta property="og:description" content="{{ page?.description }}" />
+  <meta name="twitter:description" content="{{ page?.description }}" />
+{%- else %}
+  <meta property="og:description" content="{{ config.description }}" />
+  <meta name="twitter:description" content="{{ config.description}}" />
+{%- endif %}
+
+{%- if page?.title %}
+  <meta property="og:title" content="{{ page?.title }} | {{ config.title }}" />
+  <meta name="twitter:title" content="{{ page?.title }} | {{ config.title }}" />
+{%- else %}
+  <meta property="og:title" content="{{ config.title }}" />
+  <meta name="twitter:title" content="{{ config.title }}" />
+{%- endif %}
+
+
+{#- SEO MEDIA START #}
+{%- if page?.extra?.thumbnail %}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="{{ get_url(path=page?.path ~ page?.extra?.thumbnail, trailing_slash=false) }}" />
+  <meta property="og:image" content="{{ get_url(path=page?.path ~ page?.extra?.thumbnail, trailing_slash=false) }}" />
+
+{%- elif page?.extra?.static_thumbnail %}
+  <meta name="twitter:card" content="summary_large_image" />
+  {%- if page?.extra?.static_thumbnail is matching(pat="^http[s]?://") %}
+  <meta name="twitter:image" content="{{ page?.extra?.static_thumbnail }}" />
+  <meta property="og:image" content="{{ page?.extra?.static_thumbnail }}" />
+  {%- else %}
+  <meta name="twitter:image" content="{{ get_url(path=page?.extra?.static_thumbnail, trailing_slash=false) }}" />
+  <meta property="og:image" content="{{ get_url(path=page?.extra?.static_thumbnail, trailing_slash=false) }}" />
+  {%- endif %}
+
+{%- elif config.extra?.banner %}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="{{ get_url(path=config.extra?.banner, trailing_slash=false) }}" />
+  <meta property="og:image" content="{{ get_url(path=config.extra?.banner, trailing_slash=false) }}" />
+
+{%- else %}
+  <meta name="twitter:card" content="summary" />
+
+{%- endif %}
+
+{%- if config.extra?.open?.audio %}
+  <meta property="og:audio" content="{{ config.extra?.open?.audio }}" />
+{%- endif %}
+
+{%- if config.extra?.open?.locale %}
+  <meta property="og:locale" content="{{ config.extra?.open?.locale }}" />
+{%- endif %}
+
+{%- if config.extra?.open?.videos %}
+  {%- for video in config.extra?.open?.videos %}
+  <meta property="og:video" content="{{ get_url(path=video) }}" />
+  {%- endfor %}
+{%- endif %}
+
+{#- SEO MEDIA END #}
+  <meta property="og:site_name" content="{{ config.title }}" />
+  <meta property="og:locale" content="{{ lang_locale }}" />
+  <meta property="og:type" content="website" />
+{%- if page?.updated %}
+  <meta property="og:updated_time" content="{{ page?.updated | date(format='%F') }}" />
+{%- elif page?.date %}
+  <meta property="og:updated_time" content="{{ page?.date | date(format='%F') }}" />
+{%- else %}
+  <meta property="og:updated_time" content="{{ updated_time }}" />
+{%- endif %}
+
+{%- if config.extra?.twitter_meta %}
+  <meta name="twitter:site" content="@{{ config.extra?.twitter_meta }}" />
+  <meta name="twitter:creator" content="@{{ config.extra?.twitter_meta }}" />
+{%- endif -%}
+{%- endif -%}
+{%- endif -%}
+{#- Extra SEO END -#}
+{% endcomponent seo %}
+
diff --git a/templates/components/gif.html b/templates/components/gif.html
new file mode 100644
index 0000000..cf4d264
--- /dev/null
+++ b/templates/components/gif.html
@@ -0,0 +1,30 @@
+{% component gif(page, config, sources, caption="", class="", w=0, h=0) %}
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif  %}
+<video controls{% if class %} class="{{class}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} autoplay loop muted playsinline>
+  {% for src in sources  %}
+
+  {%- set video = src | split(pat="/") | last %}
+  {%- set dirtest = src | trim_start(pat="./") %}
+  {%- if dirtest is containing(pat="/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page and page.path %}{%- set pagepath = page.path %}{%- elif section and section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if src is starting_with(pat="./") and reldir %}{# Relative Path #}
+    {%- set path = (src | trim_start(pat="./") | split(pat="/"))[:-1] | join(sep="/") | trim_start(pat="/") -%}
+    {%- set path = path ~ "/" %}
+
+  {%- elif src is starting_with(pat="/") %}{# Root Path #}
+    {%- set rootpath = (src | split(pat="/"))[:-1] | join(sep="/") -%}
+    {%- set path = (config.base_url if config else "") ~ rootpath ~ "/"  %}
+
+  {%- else %}{# Same Directory Path #}
+    {%- set path = "" %}
+
+  {%- endif %}
+
+  {%- set type = src | split(pat=".") | last  %}
+  {%- if type is matching(pat="^mov$") %}{% set type = "quicktime" %}{% endif  %}
+  <source src="{{ path | safe }}{{ video | safe }}" type="{{ 'video/' ~ type }}" />
+  {%- endfor -%}Your browser doesn't support the video tag and/or the video formats in use here – sorry!</video>
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif %}
+
+{% endcomponent gif %}
diff --git a/templates/components/image.html b/templates/components/image.html
new file mode 100644
index 0000000..c8230e1
--- /dev/null
+++ b/templates/components/image.html
@@ -0,0 +1,64 @@
+{% component image(page, config, sources, caption="", class="", alt="", w=0, h=0) %}
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif  %}
+<picture{% if class %} class="{{class}}"{% endif %}>
+  {%- for src in sources %}
+
+  {%- set video = src | split(pat="/") | last %}
+  {%- set dirtest = src | trim_start(pat="./") %}
+  {%- if dirtest is containing(pat="/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page and page.path %}{%- set pagepath = page.path %}{%- elif section and section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if src is starting_with(pat="./") and reldir %}{# Relative Path #}
+    {%- set path = (src | trim_start(pat="./") | split(pat="/"))[:-1] | join(sep="/") | trim_start(pat="/") -%}
+    {%- set path = path ~ "/" %}
+    {%- if not w or not h %}
+      {%- if page.lang != config.default_language %}
+        {%- set metapath = (pagepath ~ path ~ video) | replace(from="/" ~ page.lang ~ "/", to="/") %}
+      {%- else %}
+        {%- set metapath = pagepath ~ path ~ video %}
+      {%- endif %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- elif src is starting_with(pat="/") %}{# Root Path #}
+    {%- set rootpath = (src | split(pat="/"))[:-1] | join(sep="/") -%}
+    {%- set path = (config.base_url if config else "") ~ rootpath ~ "/"  %}
+    {%- if not w or not h %}
+      {%- set metapath = rootpath ~ "/" ~ video %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- else %}{# Same Directory Path #}
+    {%- set path = "" %}
+    {%- if not w or not h %}
+      {%- if page.lang != config.default_language %}
+        {%- set metapath = (pagepath ~ video) | replace(from="/" ~ page.lang ~ "/", to="/") %}
+      {%- else %}
+        {%- set metapath = pagepath ~ video %}
+      {%- endif %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- endif %}
+
+  {%- set type = src | split(pat=".") | last  %}
+  {%- if type is matching(pat="^mov$") %}{%- set type = "quicktime"  %}{% endif  %}
+  {%- if loop.last %}
+  {%- if not alt %}
+    {%- set alt = video | split(pat=".") | first %}
+  {%- endif %}
+  <img src="{{ path | safe }}{{ video | safe }}" alt="{{ alt }}"{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />
+  {%- else %}
+  <source srcset="{{ path | safe }}{{ video | safe }}" type="{{ 'image/' ~ type }}" />
+  {%- endif %}
+  {%- endfor %}
+</picture>
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif  %}
+
+{% endcomponent image %}
diff --git a/templates/components/img.html b/templates/components/img.html
new file mode 100644
index 0000000..6aa5b2e
--- /dev/null
+++ b/templates/components/img.html
@@ -0,0 +1,52 @@
+{% component img(page, config, src, caption="", class="", alt="", w=0, h=0, link="") %}
+{%- set img = src | split(pat="/") | last %}
+{%- set dirtest = src | trim_start(pat="./") %}
+{%- if dirtest is containing(pat="/") %} {%- set reldir = true %} {%- endif %}
+{%- if page and page.path %}{%- set pagepath = page.path %}{%- elif section and section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+{%- if src is starting_with(pat="./") and reldir %} {# Relative Path #}
+  {%- set path = (src | trim_start(pat="./") | split(pat="/"))[:-1] | join(sep="/") | trim_start(pat="/") -%}
+  {%- set path = path ~ "/" %}
+  {%- if not w or not h %}
+    {%- if page.lang != config.default_language %}
+      {%- set metapath = (pagepath ~ path ~ img) | replace(from="/" ~ page.lang ~ "/", to="/") %}
+    {%- else %}
+      {%- set metapath = pagepath ~ path ~ img %}
+    {%- endif %}
+    {%- set meta = get_image_metadata(path=metapath) %}
+    {%- set w = meta.width %}
+    {%- set h = meta.height %}
+  {%- endif %}
+
+{%- elif src is starting_with(pat="/") %} {# Root Path #}
+  {%- set rootpath = (src | split(pat="/"))[:-1] | join(sep="/") -%}
+  {%- set path = (config.base_url if config else "") ~ rootpath ~ "/"  %}
+  {%- if not w or not h %}
+    {%- set metapath = rootpath ~ "/" ~ img %}
+    {%- set meta = get_image_metadata(path=metapath) %}
+    {%- set w = meta.width %}
+    {%- set h = meta.height %}
+  {%- endif %}
+
+{%- else %} {# Same Directory Path #}
+  {%- set path = "" %}
+  {%- if not w or not h %}
+    {%- if page.lang != config.default_language %}
+      {%- set metapath = (pagepath ~ img) | replace(from="/" ~ page.lang ~ "/", to="/") %}
+    {%- else %}
+      {%- set metapath = pagepath ~ img %}
+    {%- endif %}
+    {%- set meta = get_image_metadata(path=metapath) %}
+    {%- set w = meta.width %}
+    {%- set h = meta.height %}
+  {%- endif %}
+{%- endif %}
+
+{%- if not alt %}
+  {%- set alt = img | split(pat=".") | first %}
+{%- endif %}
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif  %}
+{%- if link %}<a href="{{link | safe}}">{% endif %}<img src="{{ path | safe }}{{ img | safe }}"{% if class %} class="{{class}}"{% endif %}{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />{% if link %}</a>{% endif  %}
+{%- if caption %}<figcaption>{{ caption | safe }}</figcaption></figure>{%- endif %}
+
+{% endcomponent img %}
diff --git a/templates/components/imgswap.html b/templates/components/imgswap.html
new file mode 100644
index 0000000..b260615
--- /dev/null
+++ b/templates/components/imgswap.html
@@ -0,0 +1,103 @@
+{% component imgswap(page, config, main_src, swap_src, caption="", class="", alt="", w=0, h=0) %}
+<div class="img-swap-div">
+  {%- set img = main_src | split(pat="/") | last %}
+  {%- set dirtest = main_src | trim_start(pat="./") %}
+  {%- if dirtest is containing(pat="/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page and page.path %}{%- set pagepath = page.path %}{%- elif section and section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if main_src is starting_with(pat="./") and reldir %} {# Relative Path #}
+    {%- set path = (main_src | trim_start(pat="./") | split(pat="/"))[:-1] | join(sep="/") | trim_start(pat="/") -%}
+    {%- set path = path ~ "/" %}
+    {%- if not w or not h %}
+      {%- if page.lang != config.default_language %}
+        {%- set metapath = (pagepath ~ path ~ img) | replace(from="/" ~ page.lang ~ "/", to="/") %}
+      {%- else %}
+        {%- set metapath = pagepath ~ path ~ img %}
+      {%- endif %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- elif main_src is starting_with(pat="/") %} {# Root Path #}
+    {%- set rootpath = (main_src | split(pat="/"))[:-1] | join(sep="/") -%}
+    {%- set path = (config.base_url if config else "") ~ rootpath ~ "/"  %}
+    {%- if not w or not h %}
+      {%- set metapath = rootpath ~ "/" ~ img %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- else %} {# Same Directory Path #}
+    {%- set path = "" %}
+    {%- if not w or not h %}
+      {%- if page.lang != config.default_language %}
+        {%- set metapath = (pagepath ~ img) | replace(from="/" ~ page.lang ~ "/", to="/") %}
+      {%- else %}
+        {%- set metapath = pagepath ~ img %}
+      {%- endif %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+  {%- endif %}
+
+  {%- if not alt %}
+    {%- set alt = img | split(pat=".") | first %}
+  {%- endif %}
+  {%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif  %}
+  {%- if link %}<a href="{{link | safe}}">{% endif %}<img src="{{ path | safe }}{{ img | safe }}" class="img-main{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />{% if link %}</a>{% endif  %}
+  {%- if caption %}<figcaption>{{caption}}</figcaption></figure>{%- endif %}
+
+  {%- set img = swap_src | split(pat="/") | last %}
+  {%- set dirtest = swap_src | trim_start(pat="./") %}
+  {%- if dirtest is containing(pat="/") %} {%- set reldir = true %} {%- endif %}
+
+  {%- if swap_src is starting_with(pat="./") and reldir %} {# Relative Path #}
+    {%- set path = (swap_src | trim_start(pat="./") | split(pat="/"))[:-1] | join(sep="/") | trim_start(pat="/") -%}
+    {%- set path = path ~ "/" %}
+    {%- if not w or not h %}
+      {%- if page.lang != config.default_language %}
+        {%- set metapath = (pagepath ~ path ~ img) | replace(from="/" ~ page.lang ~ "/", to="/") %}
+      {%- else %}
+        {%- set metapath = pagepath ~ path ~ img %}
+      {%- endif %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- elif swap_src is starting_with(pat="/") %} {# Root Path #}
+    {%- set rootpath = (swap_src | split(pat="/"))[:-1] | join(sep="/") -%}
+    {%- set path = (config.base_url if config else "") ~ rootpath ~ "/"  %}
+    {%- if not w or not h %}
+      {%- set metapath = rootpath ~ "/" ~ img %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- else %} {# Same Directory Path #}
+    {%- set path = "" %}
+    {%- if not w or not h %}
+      {%- if page.lang != config.default_language %}
+        {%- set metapath = (pagepath ~ img) | replace(from="/" ~ page.lang ~ "/", to="/") %}
+      {%- else %}
+        {%- set metapath = pagepath ~ img %}
+      {%- endif %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+  {%- endif %}
+
+  {%- if not alt %}
+    {%- set alt = img | split(pat=".") | first %}
+  {%- endif %}
+  {%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif  %}
+  {%- if link %}<a href="{{link | safe}}">{% endif %}<img src="{{ path | safe }}{{ img | safe }}" class="img-swap{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />{% if link %}</a>{% endif  %}
+  {%- if caption %}<figcaption>{{caption}}</figcaption></figure>{%- endif %}
+</div>
+
+{% endcomponent imgswap %}
diff --git a/templates/components/katex.html b/templates/components/katex.html
new file mode 100644
index 0000000..71e27dd
--- /dev/null
+++ b/templates/components/katex.html
@@ -0,0 +1,3 @@
+{% component katex(block=false) %}
+<script type="math/tex{% if block %};mode=display{% endif %}">{{ body | safe }}</script>
+{% endcomponent katex %}
diff --git a/templates/components/showdata.html b/templates/components/showdata.html
new file mode 100644
index 0000000..2aba3b1
--- /dev/null
+++ b/templates/components/showdata.html
@@ -0,0 +1,9 @@
+{%- component showdata(page, config, src, type="", key="") -%}
+{%- if src and key and type -%}
+{%- if src is matching(pat="^http[s]?://") -%}{%- set data = load_data(url=src, format=type) -%}{%- else -%}{%- set data = load_data(path=src, format=type) -%}{%- endif -%}
+{{- data[key] }}
+{%- else -%}
+{%- if src is matching(pat="^http[s]?://") -%}{%- set data = load_data(url=src) -%}{%- else -%}{%- set data = load_data(path=src) -%}{%- endif -%}
+{{- data }}
+{%- endif -%}
+{%- endcomponent showdata -%}
diff --git a/templates/components/streamable.html b/templates/components/streamable.html
new file mode 100644
index 0000000..94dfc45
--- /dev/null
+++ b/templates/components/streamable.html
@@ -0,0 +1,5 @@
+{% component streamable(id, class="", title="") %}
+<div class="yv{% if class %} {{class}}{% endif %}">
+    <iframe src="https://www.streamable.com/e/{{id}}" title="{{title | default(value='Streamable') }}" class="yvi" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+</div>
+{% endcomponent streamable %}
diff --git a/templates/components/video.html b/templates/components/video.html
new file mode 100644
index 0000000..ee8130d
--- /dev/null
+++ b/templates/components/video.html
@@ -0,0 +1,30 @@
+{% component video(page, config, sources, caption="", class="", w=0, h=0, autoplay=false, loop=false, muted=false, playsinline=false) %}
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif  %}
+<video controls{% if class %} class="{{class}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %}{% if autoplay %} autoplay{% endif %}{% if loop %} loop{% endif %}{% if muted %} muted{% endif %}{% if playsinline %} playsinline{% endif %}>
+  {% for src in sources  %}
+
+  {%- set video = src | split(pat="/") | last %}
+  {%- set dirtest = src | trim_start(pat="./") %}
+  {%- if dirtest is containing(pat="/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page and page.path %}{%- set pagepath = page.path %}{%- elif section and section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if src is starting_with(pat="./") and reldir %}{# Relative Path #}
+    {%- set path = (src | trim_start(pat="./") | split(pat="/"))[:-1] | join(sep="/") | trim_start(pat="/") -%}
+    {%- set path = path ~ "/" %}
+
+  {%- elif src is starting_with(pat="/") %}{# Root Path #}
+    {%- set rootpath = (src | split(pat="/"))[:-1] | join(sep="/") -%}
+    {%- set path = (config.base_url if config else "") ~ rootpath ~ "/"  %}
+
+  {%- else %}{# Same Directory Path #}
+    {%- set path = "" %}
+
+  {%- endif %}
+
+  {%- set type = src | split(pat=".") | last  %}
+  {%- if type is matching(pat="^mov$") %}{% set type = "quicktime" %}{% endif  %}
+  <source src="{{ path | safe }}{{ video | safe }}" type="{{ 'video/' ~ type }}" />
+  {%- endfor -%}Your browser doesn't support the video tag and/or the video formats in use here – sorry!</video>
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif %}
+
+{% endcomponent video %}
diff --git a/templates/components/vimeo.html b/templates/components/vimeo.html
new file mode 100644
index 0000000..d5a9e70
--- /dev/null
+++ b/templates/components/vimeo.html
@@ -0,0 +1,5 @@
+{% component vimeo(id, class="", title="", autoplay=false, loop=false, noautopause=false, cookie=true) %}
+<div class="yv{% if class %} {{class}}{% endif %}">
+    <iframe src="https://player.vimeo.com/video/{{id}}?embedded=true{% if autoplay %}&autoplay=1{% endif %}{% if loop %}&loop=1{% endif %}{% if noautopause %}&autopause=0{% endif %}{% if not cookie %}&dnt=1{% endif %}" title="{{title | default(value='Vimeo') }}" class="yvi" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+</div>
+{% endcomponent vimeo %}
diff --git a/templates/components/youtube.html b/templates/components/youtube.html
new file mode 100644
index 0000000..1022825
--- /dev/null
+++ b/templates/components/youtube.html
@@ -0,0 +1,5 @@
+{% component youtube(id, class="", title="", playlist="", autoplay=false, cookie=false) %}
+<div class="yv{% if class %} {{class}}{% endif %}">
+    <iframe src="https://www.youtube{% if not cookie %}-nocookie{% endif %}.com/embed/{{id}}{% if playlist %}?list={{playlist}}{% endif %}{% if autoplay %}?autoplay=1{% endif %}" title="{{title | default(value='Youtube') }}" class="yvi" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+</div>
+{% endcomponent youtube %}
-- 
cgit v1.3.1