Merge branch '404-add-back-to-root-link' into 'main'

planning#404: add back-to-root button to nav,

See merge request !179

docs/getting-started/encryption.mdx

@@ -6,8 +6,8 @@ Ziel von FIT-Connect ist es, ein möglichst einfaches, sicheres und klar definie
 Deshalb erfolgt eine Übertragung von Antragsdaten mit FIT-Connect ausschließlich verschlüsselt.
 
 ## Warum ist Ende-zu-Ende-Verschlüsselung wichtig?
-Im Kontext von Anträgen an Behörden werden häufig personenbezogene Daten übermittelt. 
-Solche Daten dürfen nach den [Vorgaben des BSI](https://www.bsi.bund.de/SharedDocs/Downloads/DE/BSI/Publikationen/TechnischeRichtlinien/TR03107/TR-03107-1.pdf?__blob=publicationFile&v=4) nur Ende-zu-Ende-verschlüsselt übertragen werden. 
+Im Kontext von Anträgen an Behörden werden häufig personenbezogene Daten übermittelt.
+Solche Daten dürfen nach den [Vorgaben des BSI](https://www.bsi.bund.de/SharedDocs/Downloads/DE/BSI/Publikationen/TechnischeRichtlinien/TR03107/TR-03107-1.pdf?__blob=publicationFile&v=4) nur Ende-zu-Ende-verschlüsselt übertragen werden.
 Die FIT-Connect Architektur unterstützt dafür zwei Umsetzungs-Varianten - abhängig vom Schutzbedarf der zu übermittelnden Daten.
 
 <img src={useBaseUrl('/images/encryption/ende-zu-ende.png')} alt="Grafik zur Veranschaulichung einer Ende-zu-Ende-Verschlüsselung" width="600" />
@@ -18,7 +18,7 @@ Für besonders schutzbedürftige personenbezogene Daten ist es notwendig, dass d
 
 Dafür stehen Anbietern von Online-Antragsverfahren eine Vielzahl von Bibliotheken zu Verfügung, um die erforderlichen Operationen im Browser der  Anwender:in auszuführen.
 So verlassen sämtliche Inhaltsdaten das Endgerät der Nutzer:in immer verschlüsselt.
-Beispiele wie Anträge im Rahmen von FIT-Connect verschlüsselt werden können, finden Sie unter [Verschlüsselung](./sending/encrypt.mdx).
+Beispiele wie Anträge im Rahmen von FIT-Connect verschlüsselt werden können, finden Sie unter [Verschlüsselung](../sending/encrypt.mdx).
 
 ## Grundlagen zur eingesetzten Verschlüsselung
 

docs/getting-started/first-steps.mdx

 # Erste Schritte
 
 Im folgenden "Getting Started"-Guide wird beschrieben, wie die ersten Interaktionen mit FIT-Connect ablaufen und FIT-Connect in IT-Systeme zum Versand und Empfang von Antragsdaten integriert werden kann.
-In den nächsten Abschnitten wird beschrieben, wie man sich [gegenüber FIT-Connect authentifiziert](./authentication.mdx), Daten für die Übertragung [ver- und entschlüsselt](./encryption.mdx) werden, sowie welche Schritte für das [Einreichen](./sending/overview.mdx) bzw. [Empfangen](./receiving/overview.mdx) von Einreichungen (Anträge oder Berichte) notwendig sind.
+In den nächsten Abschnitten wird beschrieben, wie man sich [gegenüber FIT-Connect authentifiziert](./authentication.mdx), Daten für die Übertragung [ver- und entschlüsselt](./encryption.mdx) werden, sowie welche Schritte für das [Einreichen](../sending/overview.mdx) bzw. [Empfangen](../receiving/overview.mdx) von Einreichungen (Anträge oder Berichte) notwendig sind.
 
 :::note Zielgruppe
 Die folgenden Seiten beinhalten technische Details zur Umsetzung einer Anbindung an die FIT-Connect-Schnittstellen.

docs/sending/accept-reject.mdx

@@ -2,6 +2,8 @@
 title: Empfangsbestätigung oder Zurückweisung
 ---
 
+import ApiLink from '@site/src/components/ApiLink'
+
 Eine Einreichung wird immer mit einer Empfangsbestätigung (`accept-submission`) akzeptiert oder mit einer Zurückweisung
 (`reject-submission`) abgelehnt.
 Eine Empfangsbestätigung kann, eine Zurückweisung muss eine Liste von Problemen (`problems`) enthalten.

docusaurus.config.js

@@ -26,16 +26,23 @@ module.exports = {
     colorMode: {
       disableSwitch: true,
     },
+    docs: {
+      sidebar: {
+        hideable: true,
+      },
+    },
     prism: {
       additionalLanguages: ['java', 'csharp'],
     },
     navbar: {
       title: 'FIT-Connect',
-      logo: {
-        alt: 'FITKO',
-        src: '/fitko-logo.svg',
-      },
       items: [
+        {
+          type: 'html',
+          value: `<a href="/"><img src="${baseUrl}icons/chevron-left.svg" alt="Zurück" /></a>`,
+          position: 'left',
+          className: 'fitko-navbar-icon--back',
+        },
         {to: '/docs/changelog', label: 'Dokumentation', position: 'left'},
         {
           type: 'dropdown',
@@ -110,7 +117,6 @@ module.exports = {
       style: 'light',
       copyright: `Copyright © ${new Date().getFullYear()} FITKO (Föderale IT-Kooperation) | Zum Gottschalkhof 3 | 60594 Frankfurt am Main | E-Mail: poststelle@fitko.de | https://www.fitko.de | Die FITKO ist eine Anstalt des öffentlichen Rechts. Sie wird vertreten durch die Präsidentin Frau Dr. Annette Schmidt.`,
     },
-    hideableSidebar: true,
   },
   themes: [
     [
@@ -152,6 +158,7 @@ module.exports = {
         editUrl: ({ version, versionDocsDirPath, docPath }) =>
           `https://git.fitko.de/-/ide/project/fit-connect/docs/edit/${gitBranch}/-/${versionDocsDirPath}/${docPath}`,
         routeBasePath: 'docs',
+        breadcrumbs: false,
       },
     ],
     [
@@ -163,4 +170,9 @@ module.exports = {
       },
     ],
   ],
+  scripts: [ {
+      src: `${baseUrl}js/custom.js`,
+      async: false,
+    },
+  ],
 }

package.json

@@ -12,13 +12,13 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.13",
-    "@docusaurus/plugin-client-redirects": "^2.0.0-beta.13",
-    "@docusaurus/plugin-content-blog": "^2.0.0-beta.13",
-    "@docusaurus/plugin-content-docs": "^2.0.0-beta.13",
-    "@docusaurus/plugin-content-pages": "^2.0.0-beta.13",
-    "@docusaurus/plugin-sitemap": "^2.0.0-beta.13",
-    "@docusaurus/theme-classic": "^2.0.0-beta.13",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/plugin-client-redirects": "2.0.0-beta.21",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.21",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.21",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.21",
+    "@docusaurus/plugin-sitemap": "2.0.0-beta.21",
+    "@docusaurus/theme-classic": "2.0.0-beta.21",
     "@mdx-js/react": "^1.6.21",
     "@stoplight/json-schema-viewer": "^4.5.0",
     "@stoplight/markdown-viewer": "^5.4.5",

src/css/style.scss

@@ -61,9 +61,52 @@ img {
   top: -70px;
 }
 
-// import css-vars directly from mosaic theme
+/* import css-vars directly from mosaic theme */
 @import '~@stoplight/mosaic/themes/default.css';
 .json-schema-viewer {
-  // load via meta-load in wrapper class, to prevent css leaking to rest of the site
+  /* load via meta-load in wrapper class, to prevent css leaking to rest of the site */
   @include meta.load-css('../../node_modules/@stoplight/mosaic/styles.css');
 }
+
+/* custom navbar back-to-root link */
+.navbar__items {
+  position: relative;
+}
+
+@media screen and (min-width: 1000px) {
+  .navbar__brand {
+    margin-left: 32px;
+  }
+
+  .hidden-back-btn .navbar__brand {
+    margin-left: 0;
+  }
+}
+
+.navbar__toggle.clean-btn {
+  margin-left: 32px;
+}
+
+.fitko-navbar-icon--back {
+  display: inline-block !important;
+  padding: 0;
+  position: absolute;
+  left: 2px;
+  top: 13px;
+}
+
+.fitko-navbar-icon--back a {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+}
+
+.fitko-navbar-icon--back img {
+  display: inline-block;
+  height: 18px;
+}
+
+.fitko-navbar-icon--back.hidden {
+  display: none !important;
+}

src/views/ApiSpec.js

@@ -2,7 +2,7 @@ import React, {useEffect} from 'react'
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
 import BrowserOnly from '@docusaurus/BrowserOnly'
 
-import {useActivePlugin, useActiveVersion,} from '@theme/hooks/useDocs'
+import {useActivePlugin, useActiveVersion,} from '@docusaurus/plugin-content-docs/client'
 
 import useAsync from '@hooks/useAsync'
 import getLatestVersion from "@lib/utils/getLatestVersion";

src/views/JSONSchema.js

@@ -4,7 +4,7 @@ import BrowserOnly from '@docusaurus/BrowserOnly'
 import axios from 'axios'
 import { JsonSchemaViewer } from "@stoplight/json-schema-viewer"
 
-import {useActivePlugin, useActiveVersion,} from '@theme/hooks/useDocs'
+import {useActivePlugin, useActiveVersion,} from '@docusaurus/plugin-content-docs/client'
 
 import useAsync from '@hooks/useAsync'
 import getLatestVersion from "@lib/utils/getLatestVersion";

static/icons/chevron-left.svg

+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 66.91 122.88" style="enable-background:new 0 0 66.91 122.88" xml:space="preserve"><g><path fill="rgb(255 200 25)" d="M64.96,111.2c2.65,2.73,2.59,7.08-0.13,9.73c-2.73,2.65-7.08,2.59-9.73-0.14L1.97,66.01l4.93-4.8l-4.95,4.8 c-2.65-2.74-2.59-7.1,0.15-9.76c0.08-0.08,0.16-0.15,0.24-0.22L55.1,2.09c2.65-2.73,7-2.79,9.73-0.14 c2.73,2.65,2.78,7.01,0.13,9.73L16.5,61.23L64.96,111.2L64.96,111.2L64.96,111.2z"/></g></svg>

static/js/custom.js

+window.addEventListener("load", function() {
+    const btn = document.getElementsByClassName('fitko-navbar-icon--back')[0];
+    const nav = document.getElementsByClassName('navbar__items')[0];
+
+    // checks URL to see if "back to root" button should be visible
+    const checkBackBtnVisibility = () => {
+        if (window.location.pathname === '/' && !btn.classList.contains('hidden')) {
+            btn.classList.add('hidden');
+            nav.classList.add('hidden-back-btn');
+        } else if (window.location.pathname !== '/' && btn.classList.contains('hidden')) {
+            btn.classList.remove('hidden');
+            nav.classList.remove('hidden-back-btn');
+        }
+    };
+
+    this.setInterval(checkBackBtnVisibility, 200);
+});