Added feature preview

.docs/index.md

 ---
-title: Home
+template: home.html
 author: Martin Weise
 hide:
 - navigation
+- toc
+social:
+  cards_layout_options:
+    title: Documentation that simply works
 ---
 
-# DBRepo: A Database Repository to Support Research
-
 ## Problem Statement
 
 Digital repositories see themselves more frequently encountered with the problem of making databases accessible in their
@@ -14,9 +16,6 @@ collection. Challenges revolve around organizing, searching and retrieving conte
 constitute a major technical burden as their internal representation greatly differs from static documents most digital
 repositories are designed for.
 
-[System Description](./system){ .action-button .md-button .md-button--secondary }
-[How to use](./usage-overview){ .action-button .md-button .md-button--primary }
-
 ## Application Areas
 
 We present a database repository system that allows researchers to ingest data into a central, versioned repository

.docs/overrides/home.html

+{% extends "main.html" %}
+
+<!-- Render hero under tabs -->
+{% block tabs %}
+{{ super() }}
+
+<!-- Additional styles for landing page -->
+<style>
+
+    /* Application header should be static for the landing page */
+    .md-header {
+        position: initial;
+    }
+
+    .md-content > article h1 {
+        display: none;
+        visibility: hidden;
+    }
+
+    /*!* Remove spacing, as we cannot hide it completely *!*/
+    .md-main__inner {
+        margin-top: 0;
+    }
+
+    /*!* Hide main content for now *!*/
+    /*.md-content {*/
+    /*  display: none;*/
+    /*}*/
+
+    /*!* Hide table of contents *!*/
+    /*@media screen and (min-width: 60em) {*/
+    /*  .md-sidebar--secondary {*/
+    /*    display: none;*/
+    /*  }*/
+    /*}*/
+
+    /*!* Hide navigation *!*/
+    /*@media screen and (min-width: 76.25em) {*/
+    /*  .md-sidebar--primary {*/
+    /*    display: none;*/
+    /*  }*/
+    /*}*/
+</style>
+
+<!-- Hero for landing page -->
+<section class="mdx-container">
+    <div class="md-grid md-typeset">
+        <div class="mdx-hero">
+
+            <!-- Hero image -->
+            <div class="mdx-hero__image">
+                <img
+                        src="images/hero.png"
+                        alt=""
+                        class="img-border"
+                        width="100%"
+                        draggable="false"/>
+            </div>
+
+            <!-- Hero content -->
+            <div class="mdx-hero__content" style="margin-top:24px;margin-bottom:24px;">
+                <h1>DBRepo: A Database Repository to Support Research</h1>
+                <p>Set up in a few minutes.</p>
+                <a
+                        href="{{ page.next_page.url | url }}"
+                        title="{{ page.next_page.title | e }}"
+                        style="margin-right: 10px;"
+                        class="action-button md-button md-button--primary">
+                    Get started
+                </a>
+                <a
+                        href="{{ 'insiders/' | url }}"
+                        title="Material for MkDocs Insiders"
+                        class="action-button md-button md-button--secondary">
+                    Learn more
+                </a>
+            </div>
+        </div>
+    </div>
+</section>
+<section>
+    <div class="md-grid md-typeset">
+        <div class="mdx-spotlight">
+            <figure class="mdx-spotlight__feature">
+                <a href="setup/setting-up-site-search/" tabindex="-1" title="Built-in search">
+                    <img src="images/screenshots/jupyterhub4.png"
+                         alt="Built-in search" loading="lazy"
+                         width="500"
+                         height="327">
+                </a>
+                <figcaption class="md-typeset">
+                    <h2>Built-in search</h2>
+                    <p>Reusable datasets</p>
+                    <p>
+                        <a href="setup/setting-up-site-search/" aria-label="Built-in search">Learn more</a>
+                    </p>
+                </figcaption>
+            </figure>
+            <figure class="mdx-spotlight__feature">
+                <a href="setup/setting-up-site-search/" tabindex="-1" title="Built-in search">
+                    <img src="images/screenshots/jupyterhub4.png"
+                         alt="Built-in search" loading="lazy"
+                         width="500"
+                         height="327">
+                </a>
+                <figcaption class="md-typeset">
+                    <h2>Citable datasets</h2>
+                    <p>OAI-PMH, Google Datasets, FAIR Signposting</p>
+                    <p>
+                        <a href="setup/setting-up-site-search/" aria-label="Built-in search">Learn more</a>
+                    </p>
+                </figcaption>
+            </figure>
+            <figure class="mdx-spotlight__feature">
+                <a href="setup/setting-up-site-search/" tabindex="-1" title="Built-in search">
+                    <img src="images/screenshots/jupyterhub4.png"
+                         alt="Built-in search" loading="lazy"
+                         width="500"
+                         height="327">
+                </a>
+                <figcaption class="md-typeset">
+                    <h2>Powerful API for Data Scientists</h2>
+                    <p>Python Library, Pandas, Juypter Notebook, etc.</p>
+                    <p>
+                        <a href="setup/setting-up-site-search/" aria-label="Built-in search">Learn more</a>
+                    </p>
+                </figcaption>
+            </figure>
+            <figure class="mdx-spotlight__feature">
+                <a href="setup/setting-up-site-search/" tabindex="-1" title="Built-in search">
+                    <img src="images/screenshots/jupyterhub4.png"
+                         alt="Built-in search" loading="lazy"
+                         width="500"
+                         height="327">
+                </a>
+                <figcaption class="md-typeset">
+                    <h2>Cloud Native</h2>
+                    <p>Easy deployment</p>
+                    <p>
+                        <a href="setup/setting-up-site-search/" aria-label="Built-in search">Learn more</a>
+                    </p>
+                </figcaption>
+            </figure>
+        </div>
+    </div>
+</section>
+{% endblock %}

.docs/overrides/main.html

-{% extends "base.html" %}
-
-{% block announce %}
-<label for="version">Version</label>
-<select style="margin-left:8px;" id="version" name="version" onchange="switchVersion(this.options[this.selectedIndex].value)">
-    <option value="latest">latest</option>
-    <option value="1.4.2">1.4.2</option>
-    <option value="1.4.1">1.4.1</option>
-    <option value="1.4.0">1.4.0</option>
-    <option value="1.3.0">1.3.0</option>
-</select>
-{% endblock %}

.docs/scripts/extra.js

-function getVersion() {
-    const segments = location.pathname.split('/');
-    if (segments.length > 4 && (segments[3].match(/[0-9]\.[0-9]\.[0-9]/g) || segments[3] == 'latest')) {
-        console.debug('version', segments[3]);
-        return segments[3];
-    }
-    console.debug('default version', '__APPVERSION__');
-    return '__APPVERSION__';
-}
-function switchVersion(value) {
-    if (!value) { return }
-    this.location.href = location.protocol + '//' + location.host + '/infrastructures/dbrepo/' + value + '/';
-}
-document.getElementById("version").value = getVersion();
\ No newline at end of file

.docs/stylesheets/_config.scss

+// ----------------------------------------------------------------------------
+// Variables: breakpoints
+// ----------------------------------------------------------------------------
+
+// Device-specific breakpoints
+$break-devices: (
+  mobile: (
+    portrait:  px2em(220px)  px2em(479.75px),
+    landscape: px2em(480px)  px2em(719.75px)
+  ),
+  tablet: (
+    portrait:  px2em(720px)  px2em(959.75px),
+    landscape: px2em(960px)  px2em(1219.75px)
+  ),
+  screen: (
+    small:     px2em(1220px) px2em(1599.75px),
+    medium:    px2em(1600px) px2em(1999.75px),
+    large:     px2em(2000px)
+  )
+);
\ No newline at end of file

.docs/stylesheets/custom.css

+:root,
+[data-md-color-accent=indigo] {
+  --md-primary-fg-color: #006699;
+  --md-accent-fg-color: #005c8a /* darken 10% */;
+  --md-primary-fg-color--dark: #00537c /* darken 10% */; }
+
+img.img-border {
+  border: 1px solid #b3b3b3; }
+
+.md-main .md-content a:not(.action-button):not([tabindex]),
+.md-main .md-content a:not(.action-button):not([tabindex]) {
+  color: var(--md-typeset-color);
+  border-bottom: 2px solid var(--md-primary-fg-color); }
+
+.md-main .md-content a:not(.action-button):not([tabindex]):focus,
+.md-main .md-content a:not(.action-button):not([tabindex]):hover {
+  color: var(--md-typeset-color);
+  border-bottom: 2px solid var(--md-primary-fg-color--dark); }
+
+.md-banner {
+  background-color: var(--md-primary-fg-color--dark); }
+
+@keyframes heart {
+  0%,
+  40%,
+  80%,
+  100% {
+    transform: scale(1); }
+  20%,
+  60% {
+    transform: scale(1.15); } }
+.md-typeset .twitter {
+  color: #00acee; }
+.md-typeset .mastodon {
+  color: #897ff8; }
+.md-typeset .mdx-video {
+  width: auto; }
+  .md-typeset .mdx-video__inner {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.138%; }
+  .md-typeset .mdx-video iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: none; }
+.md-typeset .mdx-heart {
+  animation: heart 1000ms infinite; }
+.md-typeset .mdx-badge {
+  font-size: 0.85em; }
+  .md-typeset .mdx-badge--right {
+    float: right;
+    margin-left: 0.35em; }
+.md-typeset .mdx-switch button {
+  cursor: pointer;
+  transition: opacity 250ms; }
+  .md-typeset .mdx-switch button:is(:focus, :hover) {
+    opacity: 0.75; }
+  .md-typeset .mdx-switch button > code {
+    display: block;
+    color: var(--md-primary-bg-color);
+    background-color: var(--md-primary-fg-color); }
+.md-typeset .mdx-columns ol,
+.md-typeset .mdx-columns ul {
+  columns: 2; }
+.md-typeset .mdx-columns li {
+  break-inside: avoid; }
+.md-typeset .mdx-flags {
+  margin: 2em auto; }
+  .md-typeset .mdx-flags ol {
+    list-style: none; }
+    .md-typeset .mdx-flags ol li {
+      margin-bottom: 1em; }
+  .md-typeset .mdx-flags__item {
+    display: flex;
+    gap: 0.125rem; }
+  .md-typeset .mdx-flags__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column; }
+    .md-typeset .mdx-flags__content span {
+      display: inline-flex;
+      align-items: baseline;
+      justify-content: space-between; }
+    .md-typeset .mdx-flags__content > span:nth-child(2) {
+      font-size: 80%; }
+    .md-typeset .mdx-flags__content code {
+      float: right; }
+
+.mdx-container {
+  padding-top: 0.25rem;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom, linear-gradient(to bottom, var(--md-primary-fg-color), #363949 99%, var(--md-default-bg-color) 99%); }
+  [data-md-color-scheme="slate"] .mdx-container {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(230, 15%, 14%, 1)' /></svg>") no-repeat bottom, linear-gradient(to bottom, var(--md-primary-fg-color), #363949 99%, var(--md-default-bg-color) 99%); }
+
+.mdx-hero {
+  margin: 0 16px;
+  color: var(--md-primary-bg-color); }
+  .mdx-hero h1 {
+    margin-bottom: 20px;
+    font-weight: 700;
+    color: currentcolor; }
+  .mdx-hero__content {
+    padding-bottom: 120px; }
+
+.mdx-spotlight__feature {
+  flex-direction: row-reverse; }
+
+.mdx-spotlight .mdx-spotlight__feature {
+  width: 100%;
+  display: flex;
+  flex: 1 0 48%;
+  flex-flow: row nowrap;
+  gap: 3.2rem;
+  margin: 0 0 3.2rem; }
+  .mdx-spotlight .mdx-spotlight__feature:nth-child(odd) {
+    flex-direction: row-reverse; }
+  .mdx-spotlight .mdx-spotlight__feature > figcaption {
+    text-align: left;
+    font-style: inherit;
+    max-width: inherit;
+    margin: 1em auto 0 .8rem; }
+  .mdx-spotlight .mdx-spotlight__feature > a {
+    margin: 2rem 0;
+    display: block;
+    flex-shrink: 0; }
+    .mdx-spotlight .mdx-spotlight__feature > a > img {
+      border-radius: .2rem;
+      box-shadow: var(--md-shadow-z2);
+      display: block;
+      height: auto;
+      max-width: 100%;
+      width: 25rem; }
+
+[data-md-component=announce] .md-banner__inner {
+  margin-top: 0.2rem;
+  margin-bottom: 0.2rem; }
+
+/*# sourceMappingURL=custom.css.map */

.docs/stylesheets/custom.css.map

+{
+"version": 3,
+"mappings": "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",
+"sources": ["custom/_colors.scss","custom/_typeset.scss","custom/layout/_hero.scss","custom.scss"],
+"names": [],
+"file": "custom.css"
+}

.docs/stylesheets/custom.scss

+// ----------------------------------------------------------------------------
+// Local imports
+// ----------------------------------------------------------------------------
+
+@import "config";
+
+@import "custom/colors";
+@import "custom/typeset";
+
+@import "custom/layout/hero";
+
+[data-md-component=announce] .md-banner__inner {
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+}
\ No newline at end of file

.docs/stylesheets/extra.css → .docs/stylesheets/custom/_colors.scss

@@ -5,7 +5,7 @@
     --md-primary-fg-color--dark: #00537c /* darken 10% */;
 }
 
-figure img.img-border {
+img.img-border {
     border: 1px solid #b3b3b3;
 }
 
@@ -23,9 +23,4 @@ figure img.img-border {
 
 .md-banner {
     background-color: var(--md-primary-fg-color--dark);
-}
-
-[data-md-component=announce] .md-banner__inner {
-    margin-top: 0.2rem;
-    margin-bottom: 0.2rem;
 }
\ No newline at end of file

.docs/stylesheets/custom/_typeset.scss

+// ----------------------------------------------------------------------------
+// Keyframes
+// ----------------------------------------------------------------------------
+
+// Pumping heart animation
+@keyframes heart {
+  0%,
+  40%,
+  80%,
+  100% {
+    transform: scale(1);
+  }
+
+  20%,
+  60% {
+    transform: scale(1.15);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Twitter icon
+  .twitter {
+    color: #00acee;
+  }
+
+  // Mastodon icon - it's not the exact brand color, because that doesn't work
+  // well on dark backgrounds, so we lightened it up a bit.
+  .mastodon {
+    color: #897ff8;
+  }
+
+  // Insiders video
+  .mdx-video {
+    width: auto;
+
+    // Insiders video container
+    &__inner {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-bottom: 56.138%;
+    }
+
+    // Insiders video iframe
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border: none;
+    }
+  }
+
+  // Pumping heart
+  .mdx-heart {
+    animation: heart 1000ms infinite;
+  }
+
+  // BETA #####################################################################
+
+  // Badge
+  .mdx-badge {
+    font-size: 0.85em;
+
+    // Badge moved to the right
+    &--right {
+      float: right;
+      margin-left: 0.35em;
+    }
+
+  }
+
+  // BETA #####################################################################
+
+  // Switch buttons
+  .mdx-switch button {
+    cursor: pointer;
+    transition: opacity 250ms;
+
+    // Button on focus/hover
+    &:is(:focus, :hover) {
+      opacity: 0.75;
+    }
+
+    // Code block
+    > code {
+      display: block;
+      color: var(--md-primary-bg-color);
+      background-color: var(--md-primary-fg-color);
+    }
+  }
+
+  // Two-column layout
+  .mdx-columns {
+
+    // Column
+    ol,
+    ul {
+      columns: 2;
+    }
+
+    // Column item
+    li {
+      break-inside: avoid;
+    }
+  }
+
+  // Language list
+  .mdx-flags {
+    margin: 2em auto;
+
+    // Language list
+    ol {
+      list-style: none;
+
+      // Language list item
+      li {
+        margin-bottom: 1em;
+      }
+    }
+
+    // Language item
+    &__item {
+      display: flex;
+      gap: 0.125rem;
+    }
+
+    // Language content
+    &__content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      // Language name
+      span {
+        display: inline-flex;
+        align-items: baseline;
+        justify-content: space-between;
+      }
+
+      // Language link
+      > span:nth-child(2) {
+        font-size: 80%;
+      }
+
+      // Language code
+      code {
+        float: right;
+      }
+    }
+  }
+}
\ No newline at end of file