jekyll-vitepress-theme 0.9.0

data/_includes/home.html

@@ -0,0 +1,315 @@
+{% assign home_hero = page.hero %}
+{% assign home_features = page.features %}
+{% assign home_body = include.content | strip %}
+
+<div class="VPHome">
+  {% if home_hero %}
+    {% assign hero_image = home_hero.image %}
+    <div class="VPHero{% if hero_image %} has-image{% endif %}">
+      <div class="container">
+        <div class="main">
+          {% if home_hero.logo %}
+            {% assign hero_logo = home_hero.logo %}
+            {% assign hero_logo_alt = hero_logo.alt | default: home_hero.name | default: site.title %}
+            {% assign hero_logo_width = hero_logo.width | default: 560 %}
+            {% assign hero_logo_height = hero_logo.height | default: 160 %}
+            {% assign hero_logo_light = hero_logo.light %}
+            {% assign hero_logo_dark = hero_logo.dark %}
+            {% assign hero_logo_src = nil %}
+            {% if hero_logo.src %}
+              {% assign hero_logo_src = hero_logo.src %}
+            {% elsif hero_logo.path %}
+              {% assign hero_logo_src = hero_logo.path %}
+            {% elsif hero_logo_light == nil and hero_logo_dark == nil %}
+              {% assign hero_logo_src = hero_logo %}
+            {% endif %}
+            <div class="hero-logo">
+              {% if hero_logo_light and hero_logo_dark %}
+                {% assign hero_logo_light_external = false %}
+                {% if hero_logo_light contains '://' or hero_logo_light contains 'data:' %}
+                  {% assign hero_logo_light_external = true %}
+                {% endif %}
+                {% assign hero_logo_dark_external = false %}
+                {% if hero_logo_dark contains '://' or hero_logo_dark contains 'data:' %}
+                  {% assign hero_logo_dark_external = true %}
+                {% endif %}
+                <img class="VPImage hero-logo-image light" src="{% if hero_logo_light_external %}{{ hero_logo_light }}{% else %}{{ hero_logo_light | relative_url }}{% endif %}" alt="{{ hero_logo_alt | escape }}" width="{{ hero_logo_width }}" height="{{ hero_logo_height }}">
+                <img class="VPImage hero-logo-image dark" src="{% if hero_logo_dark_external %}{{ hero_logo_dark }}{% else %}{{ hero_logo_dark | relative_url }}{% endif %}" alt="{{ hero_logo_alt | escape }}" width="{{ hero_logo_width }}" height="{{ hero_logo_height }}">
+              {% elsif hero_logo_light %}
+                {% assign hero_logo_light_external = false %}
+                {% if hero_logo_light contains '://' or hero_logo_light contains 'data:' %}
+                  {% assign hero_logo_light_external = true %}
+                {% endif %}
+                <img class="VPImage hero-logo-image" src="{% if hero_logo_light_external %}{{ hero_logo_light }}{% else %}{{ hero_logo_light | relative_url }}{% endif %}" alt="{{ hero_logo_alt | escape }}" width="{{ hero_logo_width }}" height="{{ hero_logo_height }}">
+              {% elsif hero_logo_dark %}
+                {% assign hero_logo_dark_external = false %}
+                {% if hero_logo_dark contains '://' or hero_logo_dark contains 'data:' %}
+                  {% assign hero_logo_dark_external = true %}
+                {% endif %}
+                <img class="VPImage hero-logo-image" src="{% if hero_logo_dark_external %}{{ hero_logo_dark }}{% else %}{{ hero_logo_dark | relative_url }}{% endif %}" alt="{{ hero_logo_alt | escape }}" width="{{ hero_logo_width }}" height="{{ hero_logo_height }}">
+              {% elsif hero_logo_src %}
+                {% assign hero_logo_src_external = false %}
+                {% if hero_logo_src contains '://' or hero_logo_src contains 'data:' %}
+                  {% assign hero_logo_src_external = true %}
+                {% endif %}
+                <img class="VPImage hero-logo-image" src="{% if hero_logo_src_external %}{{ hero_logo_src }}{% else %}{{ hero_logo_src | relative_url }}{% endif %}" alt="{{ hero_logo_alt | escape }}" width="{{ hero_logo_width }}" height="{{ hero_logo_height }}">
+              {% endif %}
+            </div>
+          {% endif %}
+
+          {% if home_hero.name or home_hero.text %}
+            <h1 class="heading">
+              {% if home_hero.name %}
+                <span class="name clip">{{ home_hero.name }}</span>
+              {% endif %}
+              {% if home_hero.text %}
+                <span class="text">{{ home_hero.text }}</span>
+              {% endif %}
+            </h1>
+          {% endif %}
+
+          {% if home_hero.tagline %}
+            <p class="tagline">{{ home_hero.tagline }}</p>
+          {% endif %}
+
+          {% if home_hero.actions and home_hero.actions.size > 0 %}
+            <div class="actions">
+              {% for action in home_hero.actions %}
+                {% assign action_href = action.link | default: '#' | append: '' %}
+                {% assign action_external = false %}
+                {% assign action_href_parts = action_href | split: '://' %}
+                {% assign action_mailto = action_href | slice: 0, 7 %}
+                {% assign action_tel = action_href | slice: 0, 4 %}
+                {% if action_href_parts.size > 1 or action_mailto == 'mailto:' or action_tel == 'tel:' %}
+                  {% assign action_external = true %}
+                {% endif %}
+                {% assign action_target = action.target %}
+                {% assign action_rel = action.rel %}
+                {% if action_external %}
+                  {% if action_target == nil or action_target == '' %}
+                    {% assign action_target = '_blank' %}
+                  {% endif %}
+                  {% if action_rel == nil or action_rel == '' %}
+                    {% assign action_rel = 'noreferrer' %}
+                  {% endif %}
+                {% endif %}
+                <div class="action">
+                  <a
+                    class="VPButton medium {{ action.theme | default: 'brand' }}"
+                    href="{% if action_external %}{{ action_href }}{% else %}{{ action_href | relative_url }}{% endif %}"
+                    {% if action_target %}target="{{ action_target }}"{% endif %}
+                    {% if action_rel %}rel="{{ action_rel }}"{% endif %}
+                  >
+                    {{ action.text }}
+                  </a>
+                </div>
+              {% endfor %}
+            </div>
+          {% endif %}
+        </div>
+
+        {% if hero_image %}
+          <div class="image">
+            <div class="image-container">
+              <div class="image-bg"></div>
+              {% assign hero_alt = hero_image.alt | default: home_hero.name | default: site.title %}
+              {% assign hero_width = hero_image.width | default: 320 %}
+              {% assign hero_height = hero_image.height | default: 320 %}
+              {% assign hero_light = hero_image.light %}
+              {% assign hero_dark = hero_image.dark %}
+              {% assign hero_src = nil %}
+              {% if hero_image.src %}
+                {% assign hero_src = hero_image.src %}
+              {% elsif hero_image.path %}
+                {% assign hero_src = hero_image.path %}
+              {% elsif hero_light == nil and hero_dark == nil %}
+                {% assign hero_src = hero_image %}
+              {% endif %}
+
+              {% if hero_light and hero_dark %}
+                {% assign hero_light_external = false %}
+                {% if hero_light contains '://' or hero_light contains 'data:' %}
+                  {% assign hero_light_external = true %}
+                {% endif %}
+                {% assign hero_dark_external = false %}
+                {% if hero_dark contains '://' or hero_dark contains 'data:' %}
+                  {% assign hero_dark_external = true %}
+                {% endif %}
+                <img class="VPImage image-src light" src="{% if hero_light_external %}{{ hero_light }}{% else %}{{ hero_light | relative_url }}{% endif %}" alt="{{ hero_alt | escape }}" width="{{ hero_width }}" height="{{ hero_height }}">
+                <img class="VPImage image-src dark" src="{% if hero_dark_external %}{{ hero_dark }}{% else %}{{ hero_dark | relative_url }}{% endif %}" alt="{{ hero_alt | escape }}" width="{{ hero_width }}" height="{{ hero_height }}">
+              {% elsif hero_light %}
+                {% assign hero_light_external = false %}
+                {% if hero_light contains '://' or hero_light contains 'data:' %}
+                  {% assign hero_light_external = true %}
+                {% endif %}
+                <img class="VPImage image-src" src="{% if hero_light_external %}{{ hero_light }}{% else %}{{ hero_light | relative_url }}{% endif %}" alt="{{ hero_alt | escape }}" width="{{ hero_width }}" height="{{ hero_height }}">
+              {% elsif hero_dark %}
+                {% assign hero_dark_external = false %}
+                {% if hero_dark contains '://' or hero_dark contains 'data:' %}
+                  {% assign hero_dark_external = true %}
+                {% endif %}
+                <img class="VPImage image-src" src="{% if hero_dark_external %}{{ hero_dark }}{% else %}{{ hero_dark | relative_url }}{% endif %}" alt="{{ hero_alt | escape }}" width="{{ hero_width }}" height="{{ hero_height }}">
+              {% elsif hero_src %}
+                {% assign hero_src_external = false %}
+                {% if hero_src contains '://' or hero_src contains 'data:' %}
+                  {% assign hero_src_external = true %}
+                {% endif %}
+                <img class="VPImage image-src" src="{% if hero_src_external %}{{ hero_src }}{% else %}{{ hero_src | relative_url }}{% endif %}" alt="{{ hero_alt | escape }}" width="{{ hero_width }}" height="{{ hero_height }}">
+              {% endif %}
+            </div>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  {% endif %}
+
+  {% if home_features and home_features.size > 0 %}
+    {% assign feature_count = home_features.size %}
+    {% assign feature_mod = feature_count | modulo: 3 %}
+    {% assign feature_grid = '' %}
+    {% if feature_count == 2 %}
+      {% assign feature_grid = 'grid-2' %}
+    {% elsif feature_count == 3 %}
+      {% assign feature_grid = 'grid-3' %}
+    {% elsif feature_count > 3 and feature_mod == 0 %}
+      {% assign feature_grid = 'grid-6' %}
+    {% elsif feature_count > 3 %}
+      {% assign feature_grid = 'grid-4' %}
+    {% endif %}
+
+    <div class="VPFeatures VPHomeFeatures">
+      <div class="container">
+        <div class="items">
+          {% for feature in home_features %}
+            <div class="item{% if feature_grid %} {{ feature_grid }}{% endif %}">
+              {% capture feature_body %}
+                <article class="box">
+                  {% if feature.icon %}
+                    {% assign feature_icon = feature.icon %}
+                    {% assign icon_is_object = false %}
+                    {% if feature_icon.src or feature_icon.path or feature_icon.light or feature_icon.dark %}
+                      {% assign icon_is_object = true %}
+                    {% endif %}
+
+                    {% if icon_is_object %}
+                      {% assign icon_alt = feature_icon.alt | default: feature.title %}
+                      {% assign icon_width = feature_icon.width | default: 48 %}
+                      {% assign icon_height = feature_icon.height | default: 48 %}
+                      {% assign icon_wrap = feature_icon.wrap %}
+                      {% assign icon_light = feature_icon.light %}
+                      {% assign icon_dark = feature_icon.dark %}
+                      {% assign icon_src = nil %}
+                      {% if feature_icon.src %}
+                        {% assign icon_src = feature_icon.src %}
+                      {% elsif feature_icon.path %}
+                        {% assign icon_src = feature_icon.path %}
+                      {% elsif icon_light == nil and icon_dark == nil %}
+                        {% assign icon_src = feature_icon %}
+                      {% endif %}
+
+                      {% capture icon_images %}
+                        {% if icon_light and icon_dark %}
+                          {% assign icon_light_external = false %}
+                          {% if icon_light contains '://' or icon_light contains 'data:' %}
+                            {% assign icon_light_external = true %}
+                          {% endif %}
+                          {% assign icon_dark_external = false %}
+                          {% if icon_dark contains '://' or icon_dark contains 'data:' %}
+                            {% assign icon_dark_external = true %}
+                          {% endif %}
+                          <img class="VPImage{% if icon_wrap %} icon-image{% endif %} light" src="{% if icon_light_external %}{{ icon_light }}{% else %}{{ icon_light | relative_url }}{% endif %}" alt="{{ icon_alt | escape }}" width="{{ icon_width }}" height="{{ icon_height }}">
+                          <img class="VPImage{% if icon_wrap %} icon-image{% endif %} dark" src="{% if icon_dark_external %}{{ icon_dark }}{% else %}{{ icon_dark | relative_url }}{% endif %}" alt="{{ icon_alt | escape }}" width="{{ icon_width }}" height="{{ icon_height }}">
+                        {% elsif icon_light %}
+                          {% assign icon_light_external = false %}
+                          {% if icon_light contains '://' or icon_light contains 'data:' %}
+                            {% assign icon_light_external = true %}
+                          {% endif %}
+                          <img class="VPImage{% if icon_wrap %} icon-image{% endif %}" src="{% if icon_light_external %}{{ icon_light }}{% else %}{{ icon_light | relative_url }}{% endif %}" alt="{{ icon_alt | escape }}" width="{{ icon_width }}" height="{{ icon_height }}">
+                        {% elsif icon_dark %}
+                          {% assign icon_dark_external = false %}
+                          {% if icon_dark contains '://' or icon_dark contains 'data:' %}
+                            {% assign icon_dark_external = true %}
+                          {% endif %}
+                          <img class="VPImage{% if icon_wrap %} icon-image{% endif %}" src="{% if icon_dark_external %}{{ icon_dark }}{% else %}{{ icon_dark | relative_url }}{% endif %}" alt="{{ icon_alt | escape }}" width="{{ icon_width }}" height="{{ icon_height }}">
+                        {% elsif icon_src %}
+                          {% assign icon_src_external = false %}
+                          {% if icon_src contains '://' or icon_src contains 'data:' %}
+                            {% assign icon_src_external = true %}
+                          {% endif %}
+                          <img class="VPImage{% if icon_wrap %} icon-image{% endif %}" src="{% if icon_src_external %}{{ icon_src }}{% else %}{{ icon_src | relative_url }}{% endif %}" alt="{{ icon_alt | escape }}" width="{{ icon_width }}" height="{{ icon_height }}">
+                        {% endif %}
+                      {% endcapture %}
+
+                      {% if icon_wrap %}
+                        <div class="icon">{{ icon_images }}</div>
+                      {% else %}
+                        {{ icon_images }}
+                      {% endif %}
+                    {% else %}
+                      <div class="icon">{{ feature_icon }}</div>
+                    {% endif %}
+                  {% endif %}
+
+                  <h2 class="title">{{ feature.title }}</h2>
+                  {% if feature.details %}
+                    <p class="details">{{ feature.details }}</p>
+                  {% endif %}
+                  {% if feature.linkText %}
+                    <div class="link-text">
+                      <p class="link-text-value">{{ feature.linkText }} <span class="vpi-arrow-right link-text-icon"></span></p>
+                    </div>
+                  {% endif %}
+                </article>
+              {% endcapture %}
+
+              {% if feature.link %}
+                {% assign feature_href = feature.link | append: '' %}
+                {% assign feature_external = false %}
+                {% assign feature_href_parts = feature_href | split: '://' %}
+                {% assign feature_mailto = feature_href | slice: 0, 7 %}
+                {% assign feature_tel = feature_href | slice: 0, 4 %}
+                {% if feature_href_parts.size > 1 or feature_mailto == 'mailto:' or feature_tel == 'tel:' %}
+                  {% assign feature_external = true %}
+                {% endif %}
+                {% assign feature_target = feature.target %}
+                {% assign feature_rel = feature.rel %}
+                {% if feature_external %}
+                  {% if feature_target == nil or feature_target == '' %}
+                    {% assign feature_target = '_blank' %}
+                  {% endif %}
+                  {% if feature_rel == nil or feature_rel == '' %}
+                    {% assign feature_rel = 'noreferrer' %}
+                  {% endif %}
+                {% endif %}
+                <a
+                  class="VPFeature link"
+                  href="{% if feature_external %}{{ feature_href }}{% else %}{{ feature_href | relative_url }}{% endif %}"
+                  {% if feature_target %}target="{{ feature_target }}"{% endif %}
+                  {% if feature_rel %}rel="{{ feature_rel }}"{% endif %}
+                >
+                  {{ feature_body }}
+                </a>
+              {% else %}
+                <div class="VPFeature">
+                  {{ feature_body }}
+                </div>
+              {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if home_body != '' %}
+    {% if page.markdownStyles == false %}
+      {{ include.content }}
+    {% else %}
+      <div class="VPHomeContent">
+        <div class="vp-doc container">
+          {{ include.content }}
+        </div>
+      </div>
+    {% endif %}
+  {% endif %}
+</div>

data/_includes/local_nav.html

@@ -0,0 +1,23 @@
+<div class="VPLocalNav has-sidebar" id="vp-local-nav">
+  <div class="container">
+    <button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" id="vp-local-menu-button">
+      <span class="vpi-align-left menu-icon"></span>
+      <span class="menu-text">{{ site.vp_theme.sidebar_menu_label | default: 'Menu' }}</span>
+    </button>
+
+    <div class="VPLocalNavOutlineDropdown" id="vp-local-outline-dropdown">
+      <button type="button" id="vp-local-outline-button">
+        <span class="menu-text">{{ site.vp_theme.outline_title | default: 'On this page' }}</span>
+        <span class="vpi-chevron-right icon"></span>
+      </button>
+      <div class="items" hidden>
+        <div class="header">
+          <a class="top-link" href="#top" id="vp-local-top-link">{{ site.vp_theme.return_to_top_label | default: 'Return to top' }}</a>
+        </div>
+        <div class="outline">
+          <ul class="VPDocOutlineItem"></ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/_includes/nav.html

@@ -0,0 +1,232 @@
+{% assign vp_version = site.vp_theme.version %}
+{% assign vp_version_absolute_links = false %}
+{% if site.data.versions and site.data.versions.items and site.data.versions.items.size > 0 %}
+  {% assign vp_version = site.data.versions %}
+  {% assign vp_version_absolute_links = true %}
+{% endif %}
+
+<header class="VPNav">
+  <div class="VPNavBar{% if include.has_sidebar %} has-sidebar{% endif %}{% if include.is_home %} home{% endif %} top" id="vp-nav-bar">
+    <div class="wrapper">
+      <div class="container">
+        <div class="title">
+          <div class="VPNavBarTitle{% if include.has_sidebar %} has-sidebar{% endif %}">
+            <a class="title" href="{{ '/' | relative_url }}">
+              {% assign nav_logo_light = site.vp_theme.logo_light | default: site.vp_theme.logo %}
+              {% assign nav_logo_dark = site.vp_theme.logo_dark %}
+              {% assign nav_site_title = site.vp_theme.site_title %}
+              {% assign nav_logo_width = site.vp_theme.logo_width | default: 24 %}
+              {% assign nav_logo_height = site.vp_theme.logo_height | default: 24 %}
+              {% if nav_logo_light %}
+                <img class="VPImage logo{% if nav_logo_dark %} light{% endif %}" src="{{ nav_logo_light | relative_url }}" width="{{ nav_logo_width }}" height="{{ nav_logo_height }}" alt="{{ site.vp_theme.logo_alt | default: '' | escape }}">
+              {% endif %}
+              {% if nav_logo_dark %}
+                <img class="VPImage logo dark" src="{{ nav_logo_dark | relative_url }}" width="{{ nav_logo_width }}" height="{{ nav_logo_height }}" alt="{{ site.vp_theme.logo_alt | default: '' | escape }}">
+              {% endif %}
+              {% if nav_site_title == nil %}
+                <span>{{ site.title }}</span>
+              {% elsif nav_site_title %}
+                <span>{{ nav_site_title }}</span>
+              {% endif %}
+            </a>
+          </div>
+        </div>
+
+        <div class="content">
+          <div class="content-body">
+            <div class="VPNavBarSearch search">
+              <button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" aria-controls="vp-search" aria-expanded="false" id="vp-search-button">
+                <span class="vpi-search" aria-hidden="true"></span>
+                <span class="text">Search</span>
+                <span class="keys" aria-hidden="true">
+                  <kbd class="key-cmd">⌘</kbd>
+                  <kbd class="key-ctrl">Ctrl</kbd>
+                  <kbd>K</kbd>
+                </span>
+              </button>
+            </div>
+
+            <nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu">
+              <span id="main-nav-aria-label" class="visually-hidden">Main Navigation</span>
+              {% for item in site.vp_theme.nav %}
+                {% assign is_active = false %}
+                {% if item.collections and item.collections contains page.collection %}
+                  {% assign is_active = true %}
+                {% elsif page.url == item.link %}
+                  {% assign is_active = true %}
+                {% endif %}
+                <a class="VPLink link VPNavBarMenuLink{% if is_active %} active{% endif %}" href="{{ item.link | relative_url }}">
+                  <span>{{ item.text }}</span>
+                </a>
+              {% endfor %}
+
+              {% if vp_version and vp_version.items and vp_version.items.size > 0 %}
+                <div class="VPVersionSelector" id="vp-version-selector">
+                  <button type="button" class="button" id="vp-version-button" aria-haspopup="true" aria-expanded="false" aria-controls="vp-version-menu">
+                    <span class="text">
+                      <span>{{ vp_version.current | default: 'Version' }}</span>
+                      <span class="vpi-chevron-down text-icon"></span>
+                    </span>
+                  </button>
+                  <div class="menu" id="vp-version-menu" hidden>
+                    {% for version in vp_version.items %}
+                      {% assign version_external = false %}
+                      {% assign version_link_first_char = version.link | slice: 0, 1 %}
+                      {% if version.external or version.link contains '://' %}
+                        {% assign version_external = true %}
+                      {% endif %}
+                      {% assign version_href = version.link %}
+                      {% if version_external %}
+                        {% assign version_href = version.link %}
+                      {% elsif vp_version_absolute_links and version_link_first_char == '/' %}
+                        {% assign version_href = version.link %}
+                      {% else %}
+                        {% assign version_href = version.link | relative_url %}
+                      {% endif %}
+                      <a class="VPLink link{% if version_external %} vp-external-link-icon{% endif %}" href="{{ version_href }}"{% if version_external %} target="_blank" rel="noreferrer"{% endif %}>
+                        <span>{{ version.text }}</span>
+                      </a>
+                    {% endfor %}
+                  </div>
+                </div>
+              {% endif %}
+            </nav>
+
+            <div class="VPNavBarAppearance appearance">
+              <button class="VPSwitch VPSwitchAppearance theme-toggle" type="button" role="switch" aria-checked="false" title="{{ site.vp_theme.dark_mode_switch_title | default: 'Switch to dark theme' }}">
+                <span class="check">
+                  <span class="icon">
+                    <span class="vpi-sun sun"></span>
+                    <span class="vpi-moon moon"></span>
+                  </span>
+                </span>
+              </button>
+            </div>
+
+            <div class="VPSocialLinks VPNavBarSocialLinks social-links">
+              {% for social in site.vp_theme.social_links %}
+                {% assign social_icon_name = social.icon %}
+                {% assign social_icon_svg = nil %}
+                {% assign social_aria = social.aria_label %}
+                {% if social.icon and social.icon.svg %}
+                  {% assign social_icon_svg = social.icon.svg %}
+                  {% assign social_icon_name = nil %}
+                {% endif %}
+                {% if social_aria == nil or social_aria == '' %}
+                  {% if social.icon and social.icon.title %}
+                    {% assign social_aria = social.icon.title %}
+                  {% elsif social_icon_name %}
+                    {% assign social_aria = social_icon_name %}
+                  {% else %}
+                    {% assign social_aria = 'social link' %}
+                  {% endif %}
+                {% endif %}
+                <a class="VPSocialLink no-icon" href="{{ social.link }}" aria-label="{{ social_aria }}" target="_blank" rel="me noopener">
+                  {% if social_icon_svg %}
+                    {{ social_icon_svg }}
+                  {% else %}
+                    <span class="vpi-social-{{ social_icon_name }}"></span>
+                  {% endif %}
+                </a>
+              {% endfor %}
+            </div>
+
+            <button type="button" class="VPNavBarHamburger hamburger" id="vp-nav-hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen">
+              <span class="container">
+                <span class="top"></span>
+                <span class="middle"></span>
+                <span class="bottom"></span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="divider">
+      <div class="divider-line"></div>
+    </div>
+  </div>
+
+  <div class="VPNavScreen" id="VPNavScreen" hidden>
+    <div class="container">
+      <nav class="VPNavScreenMenu">
+        {% for item in site.vp_theme.nav %}
+          {% assign is_active = false %}
+          {% if item.collections and item.collections contains page.collection %}
+            {% assign is_active = true %}
+          {% elsif page.url == item.link %}
+            {% assign is_active = true %}
+          {% endif %}
+          <a class="VPLink link VPNavScreenMenuLink{% if is_active %} active{% endif %}" href="{{ item.link | relative_url }}">
+            <span>{{ item.text }}</span>
+          </a>
+        {% endfor %}
+      </nav>
+
+      {% if vp_version and vp_version.items and vp_version.items.size > 0 %}
+        <div class="VPNavScreenVersion version">
+          <p class="text">{{ vp_version.current | default: 'Version' }}</p>
+          {% for version in vp_version.items %}
+            {% assign version_external = false %}
+            {% assign version_link_first_char = version.link | slice: 0, 1 %}
+            {% if version.external or version.link contains '://' %}
+              {% assign version_external = true %}
+            {% endif %}
+            {% assign version_href = version.link %}
+            {% if version_external %}
+              {% assign version_href = version.link %}
+            {% elsif vp_version_absolute_links and version_link_first_char == '/' %}
+              {% assign version_href = version.link %}
+            {% else %}
+              {% assign version_href = version.link | relative_url %}
+            {% endif %}
+            <a class="VPLink link VPNavScreenMenuLink version-link" href="{{ version_href }}"{% if version_external %} target="_blank" rel="noreferrer"{% endif %}>
+              <span>{{ version.text }}</span>
+            </a>
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      <div class="VPNavScreenAppearance appearance">
+        <p class="text">{{ site.vp_theme.dark_mode_switch_label | default: 'Appearance' }}</p>
+        <button class="VPSwitch VPSwitchAppearance theme-toggle" type="button" role="switch" aria-checked="false" title="{{ site.vp_theme.dark_mode_switch_title | default: 'Switch to dark theme' }}">
+          <span class="check">
+            <span class="icon">
+              <span class="vpi-sun sun"></span>
+              <span class="vpi-moon moon"></span>
+            </span>
+          </span>
+        </button>
+      </div>
+
+      <div class="VPSocialLinks VPNavScreenSocialLinks social-links">
+        {% for social in site.vp_theme.social_links %}
+          {% assign social_icon_name = social.icon %}
+          {% assign social_icon_svg = nil %}
+          {% assign social_aria = social.aria_label %}
+          {% if social.icon and social.icon.svg %}
+            {% assign social_icon_svg = social.icon.svg %}
+            {% assign social_icon_name = nil %}
+          {% endif %}
+          {% if social_aria == nil or social_aria == '' %}
+            {% if social.icon and social.icon.title %}
+              {% assign social_aria = social.icon.title %}
+            {% elsif social_icon_name %}
+              {% assign social_aria = social_icon_name %}
+            {% else %}
+              {% assign social_aria = 'social link' %}
+            {% endif %}
+          {% endif %}
+          <a class="VPSocialLink no-icon" href="{{ social.link }}" aria-label="{{ social_aria }}" target="_blank" rel="me noopener">
+            {% if social_icon_svg %}
+              {{ social_icon_svg }}
+            {% else %}
+              <span class="vpi-social-{{ social_icon_name }}"></span>
+            {% endif %}
+          </a>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</header>

data/_includes/search.html

@@ -0,0 +1,14 @@
+<div class="VPSearch" id="vp-search" data-search-index-url="{{ '/search.json' | relative_url }}" hidden>
+  <div class="VPSearchBackdrop" id="vp-search-backdrop"></div>
+
+  <div class="VPSearchDialog" role="dialog" aria-modal="true" aria-labelledby="vp-search-label">
+    <div class="VPSearchBar">
+      <span class="vpi-search" aria-hidden="true"></span>
+      <label class="visually-hidden" for="vp-search-input" id="vp-search-label">Search documentation</label>
+      <input id="vp-search-input" type="search" autocomplete="off" placeholder="Search docs" />
+      <kbd>Esc</kbd>
+    </div>
+
+    <div class="VPSearchResults" id="vp-search-results" role="listbox" aria-label="Search results"></div>
+  </div>
+</div>

data/_includes/sidebar.html

@@ -0,0 +1,47 @@
+<aside class="VPSidebar" id="vp-sidebar">
+  <div class="curtain"></div>
+  <nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1">
+    <span class="visually-hidden" id="sidebar-aria-label">Sidebar Navigation</span>
+
+    {% for group in site.vp_theme.sidebar_collections %}
+      {% assign docs = site[group.id] | sort: 'nav_order' %}
+      {% if docs.size > 0 %}
+        {% assign has_active = false %}
+        {% for doc in docs %}
+          {% if doc.url == page.url %}
+            {% assign has_active = true %}
+          {% endif %}
+        {% endfor %}
+
+        <div class="group no-transition">
+          <section class="VPSidebarItem level-0 collapsible{% if has_active %} has-active{% endif %}">
+            <div class="item" role="button" tabindex="0">
+              <div class="indicator"></div>
+              <h2 class="text">{{ group.text }}</h2>
+              <div class="caret" role="button" aria-label="toggle section" tabindex="0">
+                <span class="vpi-chevron-right caret-icon"></span>
+              </div>
+            </div>
+
+            <div class="items">
+              {% for doc in docs %}
+                {% assign active = false %}
+                {% if doc.url == page.url %}
+                  {% assign active = true %}
+                {% endif %}
+                <div class="VPSidebarItem level-1 is-link{% if active %} is-active{% endif %}">
+                  <div class="item">
+                    <div class="indicator"></div>
+                    <a class="VPLink link link" href="{{ doc.url | relative_url }}">
+                      <p class="text">{{ doc.title }}</p>
+                    </a>
+                  </div>
+                </div>
+              {% endfor %}
+            </div>
+          </section>
+        </div>
+      {% endif %}
+    {% endfor %}
+  </nav>
+</aside>

data/_includes/vp_slots/head.html

@@ -0,0 +1 @@
+<!-- Optional head slot override. Add custom tags in your site copy of this file. -->