chore: docker site gen for docs, update npm base image, fix chrome in docs page, jwt profile (#1019)

* initial version with docker

* move folder

* use correct path

* remove typo scanner

* change in site

* move dockerignore

* use proper path

* docs: chrome moving header, max width table, overflow on mobile (#1012)

* fix: table renderer, chrome moving header, mobile table

* card elevation

* chore(deps): bump node from 12 to 15 in /build (#967)

Bumps node from 12 to 15.

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* docs(oauth2): jwt profile (#954)

* first draft of JWT profile

* additional infos

* WIP Claim matrix

* restructure docs

* extend matrix

* typo

* use correct translation

* order tables a to z

* claim description

* remark

* describe username

Co-authored-by: Florian Forster <ffo@ffo-macbook.localdomain>
Co-authored-by: Max Peintner <max@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

site/src/components/Docs.svelte

@@ -84,6 +84,21 @@
 </script>
 
 <style>
+  .overlay {
+      position: fixed;
+      top: var(--nav-h);
+      right: 0;
+      left: 0;
+      bottom: 0;
+      background: #00000050;
+      backdrop-filter: blur(10px);
+      visibility: hidden;
+  }
+
+  .overlay.visible {
+      visibility: visible;
+  }
+
   aside {
     position: fixed;
     background-color: var(--side-nav-back);
@@ -108,7 +123,7 @@
 
   aside.open {
     width: calc(100vw - 1.5rem);
-    height: calc(100vh - var(--nav-h) - 9rem);
+    height: calc(100vh - var(--nav-h) - 15rem);
   }
 
   aside.open::before {
@@ -144,7 +159,7 @@
     overflow-y: auto;
     width: 100%;
     height: 100%;
-    padding: 4em 1.6rem 2em 3.2rem;
+    padding: 4em 1.6rem 2em 0;
     bottom: 2em;
   }
 
@@ -499,12 +514,15 @@
   {/each}
 </div>
 
+<div class="overlay {show_contents ? 'visible' : ''}"></div>
+
 <aside bind:this={aside} class="sidebar-container" class:open={show_contents}>
   <div class="sidebar" on:click={() => (show_contents = false)}>
     <a rel="prefetch" href="." class="home" title="Zitadel Docs">
       <img src="logos/zitadel-logo-light.svg" alt="zitadel-logo" />
       <span>DOCS</span>
     </a>
+
     <SearchTrigger on:click={handleSearch}/>
 
     <!-- scroll container -->
@@ -516,6 +534,7 @@
   <button on:click={() => (show_contents = !show_contents)}>
     <Icon name={show_contents ? 'las la-times' : 'las la-bars'} />
   </button>
+
 </aside>
 
 {#if searchEnabled == true}

site/src/components/GuideContents.svelte

@@ -44,7 +44,7 @@
 	.reference-toc li {
 		display: block;
 		line-height: 1.2;
-		margin: 0 0 4rem 0;
+        margin: 0 0 4rem 0;
 	}
 
 	a {

site/src/components/LanguageSwitcher.svelte

@@ -31,7 +31,6 @@
         display: flex;
         align-items: center;
         z-index: 1;
-        width: var(--sidebar-w);
         justify-content: center;
     }
 

site/src/messages/de.json

@@ -22,12 +22,12 @@
     "administratelink_orgs":"Organisationen bearbeiten",
     "administratelink_projects":"Projekte bearbeiten",
     "administratelink_apps":"Applikationen bearbeiten",
-    "developlink":"Architektur und Technologien",
+    "developlink":"ZITADEL APIs",
     "developlink_desc":"Erfahren Sie mehr über die ZITADEL-APIs und wie Sie mit ihnen entwickeln können.",
     "developlink_authapi":"Authentication API",
     "developlink_mgmtapi":"Management API",
     "developlink_adminapi":"Admin API",
-    "docslink":"Dokumentation",
+    "docslink":"Architektur und Technologien",
     "docslink_desc":"Erfahren Sie mehr über Konstruktion- und Designprinzipien und eingesetzte Technologien.",
     "docslink_principles":"Prizipien",
     "docslink_architecture":"Architektur",

site/src/routes/index.svelte

@@ -166,6 +166,11 @@
             max-width: 500px;
             flex: 1 0 auto;
             max-height: 350px;
+            transition: box-shadow .2 ease;
+        }
+
+        .doc-container .doc:hover {
+            box-shadow: 0 1px 8px rgba(0,0,0,0.2);
         }
 
         .doc-container .doc img{

site/src/utils/generate_docs.js

@@ -51,6 +51,19 @@ export default function generate_docs(dirpath, dir, lang) {
                 return '<div class="side-by-side"><div class="copy">';
             };
 
+            renderer.table = (header, body) => {
+                if (body) body = '<tbody>' + body + '</tbody>';
+
+                return '<div class="table-wrapper">\n'
+                    + '<table>\n'
+                    + '<thead>\n'
+                    + header
+                    + '</thead>\n'
+                    + body
+                    + '</table>\n'
+                    + '</div>';
+            };
+
             renderer.code = (source, lang) => {
                 source = source.replace(/^ +/gm, (match) => match.split('    ').join('\t'));