✨ [#667] created a landing page for the api.

build/paths.js

@@ -33,6 +33,8 @@ module.exports = {
     // Path to the scss entry point
     scssEntry: sourcesRoot + 'scss/screen.scss',
 
+    scssAPIEntry: sourcesRoot + 'scss/api.scss',
+
     // Path to the scss (sources) directory
     scssSrcDir: sourcesRoot + 'scss/',
 
@@ -58,4 +60,4 @@ module.exports = {
     coverageDir: 'reports/jstests/',
 
     sitePackages: sitePackages,
-};
+};

src/sdg/api/urls.py

@@ -1,10 +1,12 @@
 from django.urls import include, path
+from django.views.generic.base import TemplateView
 
 from drf_spectacular.views import (
     SpectacularJSONAPIView,
     SpectacularRedocView,
     SpectacularYAMLAPIView,
 )
+from rest_framework.settings import api_settings
 from vng_api_common import routers
 
 from sdg.api.views import (
@@ -40,6 +42,13 @@
 router.register("locaties", LocatieViewSet, basename="locatie")
 
 urlpatterns = [
+    path(
+        "",
+        TemplateView.as_view(
+            template_name="api/index.html",
+            extra_context={"version": api_settings.DEFAULT_VERSION},
+        ),
+    ),
     path("v1/", include(router.urls)),
     path(
         "v1/",

src/sdg/scss/api.scss

@@ -0,0 +1,3 @@
+@import 'reseter.css/css/reseter.css';
+@import './views/api/index';
+@import 'settings';

src/sdg/scss/views/_index.scss

@@ -1 +1,2 @@
 @import './organisaties';
+@import './api'

src/sdg/scss/views/api/_button.scss

@@ -0,0 +1,24 @@
+.button {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+  background-color: #04a5bb;
+  border: 1px solid #04a5bb;
+  border-radius: 0.2rem;
+  color: #fff;
+
+  &:hover {
+    background-color: #017092;
+    border-color: #017092;
+  }
+
+  &--alert {
+    background-color: #dc3545;
+    border-color: #dc3545;
+
+    &:hover {
+      background-color: #bd2130;
+      border-color: #bd2130;
+    }
+  }
+}

src/sdg/scss/views/api/_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/sdg/scss/views/api/_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/sdg/scss/views/api/_index.scss

@@ -0,0 +1,7 @@
+@import './button';
+@import './container';
+@import './footer';
+@import './link';
+@import './nav';
+@import './space';
+@import './title';

src/sdg/scss/views/api/_link.scss

@@ -0,0 +1,17 @@
+.link {
+  text-decoration: none;
+  color: #017092;
+
+  &:hover {
+    text-decoration: underline;
+    color: #051f31;
+  }
+
+  &--muted {
+    color: #6c757d;
+
+    &:hover {
+      color: #6c757d;
+    }
+  }
+}

src/sdg/scss/views/api/_nav.scss

@@ -0,0 +1,44 @@
+.nav {
+  margin-bottom: 2rem;
+  border-bottom: 1px solid #c6c6c6;
+
+  p {
+    margin-bottom: 7px;
+  }
+
+  &__list {
+    display: flex;
+    justify-content: center;
+    border-bottom: 1px solid #c6c6c6;
+    list-style: none;
+  }
+
+  &__item {
+    display: block;
+    padding: 0.5rem 1rem;
+    border: 1px solid transparent;
+    color: #017092;
+    cursor: pointer;
+
+    &:hover {
+      border-color: #f3f3f3 #f3f3f3
+      #c6c6c6;
+      color: #051f31;
+    }
+
+    &--active {
+      border-color: #c6c6c6 #c6c6c6
+      #f2f2f2;
+      margin-bottom: -1px;
+    }
+  }
+
+  &__pane {
+    display: none;
+    text-align: left;
+
+    &--active {
+      display: block;
+    }
+  }
+}

src/sdg/scss/views/api/_space.scss

@@ -0,0 +1,3 @@
+.space {
+    margin-bottom: 16px
+}

src/sdg/scss/views/api/_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/sdg/static/js/mocks/api.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));