docs(site): i18n handler, prettier code blocks and highlighting (#951)

* fix: sirv, commonjs plugin, add rollup sig

* replace deprecated rollup plugins

* remove dollarsign

* fix i18n setting, code snippet styling, lng switch

* fix segment, rm unused styles

site/docs/integrate/01-singlepageapp.en.md

@@ -15,6 +15,8 @@ This flow has great support with most modern languages and frameworks and is the
 
 #### Typescript Authentication Example
 
+---
+
 If you use a framework like Angular, Vue, React, ... you can use this code snippet here to integrate **ZITADEL** into you application
 
 Library used for this example [https://github.com/IdentityModel/oidc-client-js](https://github.com/IdentityModel/oidc-client-js)
@@ -60,3 +62,5 @@ export default class AuthService {
     }
 }
 ```
+
+---

site/src/components/LanguageSwitcher.svelte

@@ -1,5 +1,4 @@
 <script context="module">
-    import { setCookie } from '../modules/cookie.js';
     import { goto } from '@sapper/app';
     import { docLanguages } from '../modules/language-store.js'
     import {LANGUAGES} from '../../config.js';
@@ -40,7 +39,6 @@
         height: var(--height);
         margin: .5rem 1rem;
         font-size: 12px;
-        color: white;
         display: flex;
         align-items: center;
         cursor: pointer;
@@ -49,12 +47,12 @@
     }
 
     button.current {
-        color: var(--prime);
+        color: var(--grey-text);
     }
 </style>
 
 <div class="language-switcher">
 	{#each LANGUAGES as lang}
-        <button on:click="{() => reload(lang)}" class="{lang == group ? 'current': ''}">{lang == 'de'? 'Deutsch' : 'English'}</button>
+        <button on:click="{() => reload(lang)}" disabled="{lang == group}" class="{lang == group ? 'current': ''}">{lang == 'de'? 'Deutsch' : 'English'}</button>
 	{/each}
 </div>

site/src/i18n.js

@@ -1,5 +1,6 @@
 import { getLocaleFromNavigator, init, locale as $locale, register } from 'svelte-i18n';
 
+import { LANGUAGES } from '../config.js';
 import { getCookie, setCookie } from './modules/cookie.js';
 
 export const INIT_OPTIONS = {
@@ -8,6 +9,7 @@ export const INIT_OPTIONS = {
     loadingDelay: 200,
     formats: {},
     warnOnMissingMessages: true,
+    localeOptions: LANGUAGES,
 };
 
 let currentLocale = null;
@@ -28,9 +30,10 @@ $locale.subscribe((value) => {
 
 // initialize the i18n library in client
 export function startClient() {
+    console.log('nav', getLocaleFromNavigator());
     init({
         ...INIT_OPTIONS,
-        initialLocale: getCookie('locale') || getLocaleFromNavigator(),
+        initialLocale: getCookie('locale') || INIT_OPTIONS.localeOptions.find(option => option == cropCountryCode(getLocaleFromNavigator())) || INIT_OPTIONS.initialLocale,
     });
 }
 
@@ -53,8 +56,13 @@ export function i18nMiddleware() {
         // no cookie, let's get the first accepted language
         if (locale == null) {
             if (req.headers['accept-language']) {
-                const headerLang = req.headers['accept-language'].split(',')[0].trim();
-                if (headerLang.length > 1) {
+                const headerLngs = req.headers['accept-language'].split(',');
+                const headerLngCodes = headerLngs.map(lng => lng.split(';')[0].trim());
+                const headerLang = headerLngCodes.find(code => {
+                    return INIT_OPTIONS.localeOptions.find(option => option == code);
+                });
+
+                if (headerLang) {
                     locale = headerLang;
                 }
             } else {
@@ -69,3 +77,7 @@ export function i18nMiddleware() {
         next();
     };
 }
+
+function cropCountryCode(code) {
+    return code.split('-')[0].trim();
+}

site/src/routes/_layout.svelte

@@ -7,7 +7,6 @@
   import PhotoSwipe from '../components/PhotoSwipe.svelte';
   const { page } = stores();
   export let segment;
-  console.log('seg:'+segment);
 </script>
 
 <script context="module">
@@ -26,8 +25,6 @@
   }
 </style>
 
-<!-- <Nav {segment} title="{manifest.name}" logo="logos/zitadel-logo-light.svg"></Nav> -->
-
 <main>
   <slot />
   <PhotoSwipe/>

site/src/routes/index.svelte

@@ -19,6 +19,10 @@
             locale.set(language);
         }
     }
+
+    locale.subscribe(l => {
+        console.log(l);
+    })
 </script>
 
 <style>
@@ -206,6 +210,7 @@
         <div class="section">
             <div class="left">
                 <blockquote>
+                
                     <p>{$_('languagealsoavailable')}:
                     {#each LANGUAGES as lang}
                         {#if lang != $locale}

site/src/template.html

@@ -37,19 +37,19 @@
         }
 
         .hljs-tag {
-            color: #3dc9b0;
+            color: #f8b886;
         }
 
         .hljs-keyword {
-            color: #ff5370;
+            color: #ff2069;
         }
 
         .hljs-attr {
-            color: #666;
+            color: #a3acb9;
         }
 
         .hljs-number {
-            color: #3dc9b0;
+            color: #f8b886;
         }
 
         .hljs-type,
@@ -59,16 +59,16 @@
         .hljs-quote,
         .hljs-template-tag,
         .hljs-deletion {
-            color: #298372;
+            color: #1ea672;
         }
 
         .hljs-title,
         .hljs-section {
-            color: #298372;
+            color: #1ea672;
         }
 
         .hljs-literal {
-            color: #3dc9b0;
+            color: #f8b886;
         }
 
         .hljs-meta {

site/static/base.css

@@ -184,7 +184,7 @@ strong {
 }
 
 tt,
-code,
+/* code, */
 kbd,
 samp {
 	font: 400 var(--code-fs)/1.7 var(--font-mono);
@@ -196,6 +196,7 @@ code {
 	white-space: nowrap;
 	color: var(--text);
     -webkit-font-smoothing: initial;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 }
 
 pre code {

site/static/prism.css

@@ -3,7 +3,7 @@ code[class*="language-"] {
 	color: #d4d4d4;
 	font-size: 13px;
 	text-shadow: none;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
 	direction: ltr;
 	text-align: left;
 	white-space: pre;
@@ -36,7 +36,7 @@ pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-    background: #3c4257;
+    background: #2A2F45;
     border-radius: 8px;
 }