✨ added a landing page with dutch and english text options

src/referentielijsten/js/components/index.js

@@ -1 +1 @@
-// Use this file to include individual components.
+import './nav/';

src/referentielijsten/js/components/nav/index.js

@@ -0,0 +1,42 @@
+const navNodes = document.querySelectorAll(".nav");
+
+class TabNav {
+    /**
+     * Constructor method.
+     * @param {HTMLElement} node
+     */
+    constructor(node) {
+        // nodes
+        this.node = node;
+        this.tabButtons = this.node.querySelectorAll(".nav__item");
+        this.tabs = this.node.querySelectorAll(".nav__pane");
+
+        this.setActive(this.tabButtons[0]);
+
+        // events
+        this.tabButtons.forEach((tabButton) => {
+            tabButton.addEventListener("click", (event) => {
+                this.setActive(event.target);
+            });
+        });
+    }
+
+    setActive(tabButton) {
+        console.log("tabNode=", tabButton);
+        // make inactive all tabs and contents
+        this.tabButtons.forEach((btn) => {
+            btn.classList.remove("nav__item--active");
+        });
+        this.tabs.forEach((tab) => {
+            tab.classList.remove("nav__pane--active");
+        });
+
+        // set active for the current tab and content
+        tabButton.classList.add("nav__item--active");
+        const id = tabButton.dataset.id;
+        const tab = document.getElementById(id);
+        tab.classList.add("nav__pane--active");
+    }
+}
+
+[...navNodes].forEach((node) => new TabNav(node));

src/referentielijsten/scss/_app.scss

@@ -0,0 +1,22 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--color-text);
+}

src/referentielijsten/scss/_vars.scss

@@ -0,0 +1,45 @@
+// sass vars
+/* Colors */
+$color_primary: #04a5bb;
+$color_primary_dark: #017092;
+$color_primary_light: #c3eaef;
+
+$color_secondary: #f3f3f3;
+$color_secondary_dark: #c6c6c6;
+$color_secondary_light: #fff;
+
+$color_alert: #dc3545;
+$color_alert_dark: #bd2130;
+
+$color_darkest: #000;
+$color_dark: #333;
+$color_lightest: #fff;
+$color_muted: #6c757d;
+
+$color_link: #017092;
+$color_link_hover: #051f31;
+$color-text: $color_dark;
+$color-border: $color_secondary_dark;
+
+// css vars
+:root {
+  --color_primary: #{$color_primary};
+  --color_primary_dark: #{$color_primary_dark};
+
+  --color_secondary: #{$color_secondary};
+  --color_secondary_dark: #{$color_secondary_dark};
+  --color_secondary_light: #{$color_secondary_light};
+
+  --color_alert: #{$color_alert};
+  --color_alert_dark: #{$color_alert_dark};
+
+  --color-darkest: #{$color-darkest};
+  --color_dark: #{$color_dark};
+  --color_lightest: #{$color_lightest};
+  --color_muted: #{$color_muted};
+
+  --color_link: #{$color_link};
+  --color_link_hover: #{$color_link_hover};
+  --color-text: #{$color-text};
+  --color-border: #{$color-border};
+}

src/referentielijsten/scss/components/_button.scss

@@ -0,0 +1,24 @@
+.button {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    text-decoration: none;
+    background-color: var(--color_primary);
+    border: 1px solid var(--color_primary);
+    border-radius: 0.2rem;
+    color: var(--color_lightest);
+
+    &:hover {
+        background-color: var(--color_primary_dark);
+        border-color: var(--color_primary_dark);
+    }
+
+    &--alert {
+        background-color: var(--color_alert);
+        border-color: var(--color_alert);
+
+        &:hover {
+            background-color: var(--color_alert_dark);
+            border-color: var(--color_alert_dark);
+        }
+    }
+}

src/referentielijsten/scss/components/_container.scss

@@ -0,0 +1,11 @@
+.container {
+    max-width: 960px;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-left: auto;
+    margin-right: auto;
+
+    &--center {
+        text-align: center;
+    }
+}

src/referentielijsten/scss/components/_footer.scss

@@ -0,0 +1,35 @@
+.footer {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    border-top: 1px solid var(--color-border);
+
+    &__row {
+        display: flex;
+    }
+
+    &__col {
+        flex-grow: 1;
+        width: 100%;
+        padding-left: 15px;
+        padding-right: 15px;
+
+        &--right {
+            text-align: right;
+        }
+
+        &--small {
+            font-size: 80%;
+        }
+    }
+
+    &__header {
+        font-size: 1.25rem;
+    }
+
+    &__list {
+        padding-left: 0;
+        list-style: none;
+    }
+}

src/referentielijsten/scss/components/_index.scss

@@ -1 +1,6 @@
-// Use this file to include individual components.
+@import "button.scss";
+@import "container.scss";
+@import "footer.scss";
+@import "link.scss";
+@import "nav.scss";
+@import "title.scss";

src/referentielijsten/scss/components/_link.scss

@@ -0,0 +1,17 @@
+.link {
+    text-decoration: none;
+    color: var(--color_link);
+
+    &:hover {
+        text-decoration: underline;
+        color: var(--color_link_hover);
+    }
+
+    &--muted {
+        color: var(--color_muted);
+
+        &:hover {
+            color: var(--color_muted);
+        }
+    }
+}

src/referentielijsten/scss/components/_nav.scss

@@ -0,0 +1,37 @@
+.nav {
+    margin-bottom: 2rem;
+    border-bottom: 1px solid var(--color-border);
+
+    &__list {
+        display: flex;
+        justify-content: center;
+        border-bottom: 1px solid var(--color-border);
+        list-style: none;
+    }
+
+    &__item {
+        display: block;
+        padding: 0.5rem 1rem;
+        border: 1px solid transparent;
+        color: var(--color_link);
+        cursor: pointer;
+
+        &:hover {
+            border-color: var(--color_secondary) var(--color_secondary) var(--color-border);
+            color: var(--color_link_hover);
+        }
+
+        &--active {
+            border-color: var(--color-border) var(--color-border) var(--color_lightest) !important;
+            margin-bottom: -1px;
+        }
+    }
+
+    &__pane {
+        display: none;
+
+        &--active {
+            display: block;
+        }
+    }
+}

src/referentielijsten/scss/components/_title.scss

@@ -0,0 +1,12 @@
+.title {
+    text-align: center;
+    padding: 3rem 1rem 1.5rem 1rem;
+
+    &__header {
+        font-size: 3.5rem;
+    }
+
+    &__description {
+        font-size: 1.25rem;
+    }
+}

src/referentielijsten/scss/screen.scss

@@ -1,3 +1,5 @@
+@import "vars";
+@import "app";
 @import 'settings';
 @import 'components';
 @import 'views';

src/referentielijsten/templates/index.html

@@ -0,0 +1,43 @@
+{% extends "master.html" %}
+
+{% block content %}
+
+  <div class="title">
+    <h1 class="title__header">{{ settings.PROJECT_NAME }} API</h1>
+    <p class="title__description">{{ settings.SITE_TITLE }}</p>
+  </div>
+
+  <div class="container container--center">
+    <nav class="nav">
+      <ul class="nav__list">
+        <li class="nav__item" data-id="en">English</li>
+        <li class="nav__item" data-id="nl">Nederlands</li>
+      </ul>
+
+      <div class="nav__content">
+        <div class="nav__pane" id="en">
+          WIP TEXT
+        </div>
+        <div class="nav__pane" id="nl">
+          WIP TEKST
+        </div>
+      </div>
+    </nav>
+
+    <p>
+      <b>Licensed under the <a class="link" href="https://github.com/maykinmedia/objects-api/blob/master/LICENSE.md">
+        European Union Public License (EUPL) 1.2</a></b>
+    </p>
+
+    <p>
+      <a href="{% url "schema" version=version %}" class="button"><i class="fas fa-file-alt"></i> Open API specification</a>
+      <a href="{% url "api-root" version=version %}" class="button"><i class="fas fa-wifi"></i> API root</a>
+    </p>
+
+    <p>
+      <a href="{% url 'admin:index' %}" class="button button--alert"><i class="fas fa-lock"></i> Administration</a>
+    </p>
+
+  </div>
+
+{% endblock %}

src/referentielijsten/templates/master.html

@@ -20,6 +20,40 @@
                 to get some actual content.
             {% endblock %}
         </main>
+
+        <footer class="footer container">
+            <div class="footer__row">
+              <div class="footer__col footer__col--small">
+                <img src="{% static 'img/maykin_logo.png' %}" alt="Maykin Media logo" height="48">
+                <p>
+                Developed by <a class="link" href="https://www.maykinmedia.nl">Maykin Media</a><br>
+                </p>
+              </div>
+              <div class="footer__col">
+                <h5 class="footer__header">Referentielijsten API</h5>
+                <ul class="footer__list">
+                  <li><a class="link link--muted" href="https://hub.docker.com/r/maykinmedia/referentielijsten">Docker images</a></li>
+                  <li><a class="link link--muted" href="https://github.com/maykinmedia/referentielijsten">Code on Github</a></li>
+                </ul>
+              </div>
+              <div class="footer__col">
+                <h5 class="footer__header">Other</h5>
+                <ul class="footer__list">
+                  <li>Report <a class="link link--muted" href="https://github.com/maykinmedia/referentielijsten/issues">issues</a> for questions, bugs or wishes</li>
+                  <li>Read more on <a class="link link--muted" href="https://commonground.nl/">Common Ground</a></li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="footer__row">
+              <div class="footer__col">
+                <code>{{ settings.RELEASE }}</code>
+              </div>
+              <div class="footer__col footer__col--right">
+                <code>{{ settings.GIT_SHA|default:"" }}</code>
+              </div>
+            </div>
+          </footer>
 
         <script src="{% static 'bundles/referentielijsten-js.js' %}"></script>
     </body>

src/referentielijsten/urls.py

@@ -9,6 +9,7 @@
 
 from maykin_2fa import monkeypatch_admin
 from maykin_2fa.urls import urlpatterns, webauthn_urlpatterns
+from rest_framework.settings import api_settings
 
 from referentielijsten.accounts.views.password_reset import PasswordResetView
 
@@ -53,7 +54,13 @@
         include("referentielijsten.api.urls"),
     ),
     # Simply show the master template.
-    path("", TemplateView.as_view(template_name="master.html"), name="root"),
+    path(
+        "",
+        TemplateView.as_view(
+            template_name="index.html",
+            extra_context={"version": api_settings.DEFAULT_VERSION},
+        ),
+    ),
     path("ref/", include("vng_api_common.urls")),
 ]