From cca4cd6772477072dc57216ff967c2c8619c60bb Mon Sep 17 00:00:00 2001 From: Moanes Ben Amor Date: Fri, 27 Sep 2024 18:27:23 +0200 Subject: [PATCH] change: base colors of docusaurus and add menu item documentation --- .idea/workspace.xml | 16 +++++++++++++--- mainzelliste-doc/docusaurus.config.ts | 21 +++++++++++++-------- mainzelliste-doc/src/css/custom.css | 14 +++++++------- src/components/Header/index.tsx | 23 ++++++++++++++++++++++- 4 files changed, 55 insertions(+), 19 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 4459ae3..aa4b353 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -5,8 +5,10 @@ - + + + diff --git a/mainzelliste-doc/docusaurus.config.ts b/mainzelliste-doc/docusaurus.config.ts index 5f0df34..1bf2740 100644 --- a/mainzelliste-doc/docusaurus.config.ts +++ b/mainzelliste-doc/docusaurus.config.ts @@ -60,10 +60,10 @@ const config: Config = { image: 'img/mainzelliste-logo.jpg', navbar: { hideOnScroll: false, - title: 'My Site', logo: { - alt: 'My Site Logo', - src: 'img/logo.svg', + alt: 'Mainzelliste Logo', + src: 'img/mainzelliste-logo.png', + href: 'https://medicalinformatics.github.io/mainzelliste.de/' }, items: [ { @@ -73,13 +73,18 @@ const config: Config = { label: 'Tutorial', }, // {to: '/blog', label: 'Blog', position: 'left'}, - // { - // href: 'https://github.com/facebook/docusaurus', - // label: 'GitHub', - // position: 'right', - // }, + { + href: 'https://medicalinformatics.github.io/mainzelliste.de/api-doc/', + label: 'API Doc', + position: 'right', + }, ], }, + colorMode: { + defaultMode: 'light', + disableSwitch: true, + respectPrefersColorScheme: false, + }, footer: { style: 'dark', links: [ diff --git a/mainzelliste-doc/src/css/custom.css b/mainzelliste-doc/src/css/custom.css index 2bc6a4c..0019d36 100644 --- a/mainzelliste-doc/src/css/custom.css +++ b/mainzelliste-doc/src/css/custom.css @@ -6,13 +6,13 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary: #2a4ea3; + --ifm-color-primary-dark: #22428d; + --ifm-color-primary-darker: #1c3672; + --ifm-color-primary-darkest: #1D2430; + --ifm-color-primary-light: #3053a4; + --ifm-color-primary-lighter: #3b60b6; + --ifm-color-primary-lightest: #547ad2; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index dce00e5..baff6f1 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -32,6 +32,7 @@ const Header = () => { let $features: HTMLElement; let $contact: HTMLElement; let $apiDoc: HTMLElement; + let $docs: HTMLElement; if (typeof document !== 'undefined') { sections = document.querySelectorAll("section[id]"); @@ -39,6 +40,7 @@ const Header = () => { $features = document.getElementById('features_'); $contact = document.getElementById('contact_'); $apiDoc = document.getElementById('apiDoc_'); + $docs = document.getElementById('docs_'); window.addEventListener("scroll", navHighlighter); } @@ -70,6 +72,7 @@ const Header = () => { $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + $docs.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" break; } case "features": { @@ -77,6 +80,7 @@ const Header = () => { $features.className = "text-primary dark:text-white" $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + $docs.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" break; } case "contact": { @@ -84,14 +88,23 @@ const Header = () => { $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" $contact.className = "text-primary dark:text-white" $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + $docs.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" break; } case "apiDoc": { $home.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" - // "flex items-center py-2 text-lg lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 transition-transform cursor-pointer" $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + $docs.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + break; + } + case "docs": { + $home.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" + $docs.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white" break; } default: { @@ -182,6 +195,14 @@ const Header = () => { ))}
  • + Documentation +
    • +