From 475ba4ddaf14097799abd585ee3c14fb5f447bdc Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Mon, 2 Oct 2023 12:41:51 +0200 Subject: [PATCH] re-structure navigation Signed-off-by: Jens Langhammer --- website/docusaurus.config.js | 177 ++++++++++++++++++++++++++++++++--- website/sidebarsDev.js | 5 + website/src/css/custom.css | 67 ++++++++----- website/src/utils.js | 22 +++++ 4 files changed, 233 insertions(+), 38 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 41df7d8b2..30c97cb21 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -1,4 +1,5 @@ const fs = require("fs").promises; +const generateNavbarDropdown = require("./src/utils.js").generateNavbarDropdown; /** @type {import('@docusaurus/types').DocusaurusConfig} */ module.exports = async function () { @@ -21,23 +22,179 @@ module.exports = async function () { navbar: { logo: { alt: "authentik logo", - src: "img/icon_left_brand.svg", + src: "img/icon.svg", }, items: [ - { to: "blog", label: "Blog", position: "left" }, + { to: "blog", label: "Why authentik", position: "left" }, { - to: "docs/", - label: "Documentation", + type: "html", + className: + "dropdown dropdown--hoverable dropdown--custom", + value: generateNavbarDropdown( + "Platform", + [ + { + label: "Get started", + items: [ + { + label: "Docker compose", + to: "docs/installation/docker-compose", + }, + { + label: "Kubernetes", + to: "docs/installation/kubernetes", + }, + ], + }, + { + label: "Documentation", + items: [ + { + label: "Installation", + to: "docs/installation/", + }, + { + label: "Integrations", + to: "integrations/", + }, + { + label: "Release notes", + to: "docs/releases/", + }, + { + label: "Roadmap", + to: "docs/", + }, + ], + }, + { + label: "Solutions", + items: [ + { + label: "Work", + to: "docs/installation/", + }, + { + label: "foo", + to: "docs/", + }, + { + label: "bar", + to: "integrations/", + }, + { + label: "baz", + to: "integrations/", + }, + ], + }, + ], + `
+

Enterprise

+ +
`, + ), position: "left", }, { - to: "integrations/", label: "Integrations", + to: "integrations/", + }, + { + label: "Pricing", + to: "pricing/", + }, + { + type: "html", + className: + "dropdown dropdown--hoverable dropdown--custom", + value: generateNavbarDropdown("Community", [ + { + label: "Connect", + items: [ + { + label: "Blog", + to: "blog/", + }, + { + label: "Discord", + to: "https://goauthentik.io/discord", + }, + { + label: "GitHub", + to: "https://github.com/goauthentik/authentik", + }, + ], + }, + { + label: "Developer", + items: [ + { + label: "Set up authentik", + to: "developer-docs/setup/full-dev-environment/", + }, + { + label: "Writing documentation", + to: "developer-docs/docs/writing-documentation", + }, + ], + }, + { + label: "Community", + items: [ + { + label: "Contributing", + to: "developer-docs/", + }, + { + label: "Events", + to: "developer-docs/events", + }, + ], + }, + { + label: "Resources", + items: [ + { + label: "Icons & Branding", + to: "developer-docs/", + }, + ], + }, + ]), position: "left", }, { - to: "pricing/", - label: "Pricing", + type: "html", + className: + "dropdown dropdown--hoverable dropdown--custom", + value: generateNavbarDropdown("About us", [ + { + label: "", + items: [ + { + label: "The company", + to: "", + }, + { + label: "Jobs", + to: "", + }, + { + label: "Team", + to: "", + }, + { + label: "Contact us", + to: "", + }, + ], + }, + ]), position: "left", }, { @@ -46,12 +203,6 @@ module.exports = async function () { "aria-label": "GitHub repository", position: "right", }, - { - href: "https://goauthentik.io/discord", - className: "header-discord-link", - "aria-label": "GitHub repository", - position: "right", - }, ], }, footer: { diff --git a/website/sidebarsDev.js b/website/sidebarsDev.js index 00b62918a..f71289f72 100644 --- a/website/sidebarsDev.js +++ b/website/sidebarsDev.js @@ -55,6 +55,11 @@ module.exports = { { type: "category", label: "Community Events", + link: { + type: "generated-index", + title: "Events", + slug: "events", + }, items: ["hackathon/index"], }, ], diff --git a/website/src/css/custom.css b/website/src/css/custom.css index aec8cb4ef..010b1b92b 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -6,6 +6,7 @@ --ifm-color-primary-light: #fd644b; --ifm-color-primary-lighter: #fd7159; --ifm-color-primary-lightest: #fe9786; + --purple: rgba(47, 6, 75, 1); --white: #e3e3e3; --ifm-navbar-link-color: var(--white); --ifm-navbar-link-hover-color: var(--ifm-color-gray-1000); @@ -40,7 +41,7 @@ .hero--primary { background: radial-gradient( circle, - rgba(47, 6, 75, 1) 0%, + var(--purple) 0%, var(--ifm-color-primary) 50% ); padding-bottom: 5.3rem !important; @@ -68,19 +69,6 @@ no-repeat; } -.header-discord-link:hover { - opacity: 0.6; -} - -.header-discord-link::before { - content: ""; - width: 24px; - height: 19px; - display: flex; - background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127.14%2096.36%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E5%9B%BE%E5%B1%82_2%22%20data-name%3D%22%E5%9B%BE%E5%B1%82%202%22%3E%3Cg%20id%3D%22Discord_Logos%22%20data-name%3D%22Discord%20Logos%22%3E%3Cg%20id%3D%22Discord_Logo_-_Large_-_White%22%20data-name%3D%22Discord%20Logo%20-%20Large%20-%20White%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M107.7%2C8.07A105.15%2C105.15%2C0%2C0%2C0%2C81.47%2C0a72.06%2C72.06%2C0%2C0%2C0-3.36%2C6.83A97.68%2C97.68%2C0%2C0%2C0%2C49%2C6.83%2C72.37%2C72.37%2C0%2C0%2C0%2C45.64%2C0%2C105.89%2C105.89%2C0%2C0%2C0%2C19.39%2C8.09C2.79%2C32.65-1.71%2C56.6.54%2C80.21h0A105.73%2C105.73%2C0%2C0%2C0%2C32.71%2C96.36%2C77.7%2C77.7%2C0%2C0%2C0%2C39.6%2C85.25a68.42%2C68.42%2C0%2C0%2C1-10.85-5.18c.91-.66%2C1.8-1.34%2C2.66-2a75.57%2C75.57%2C0%2C0%2C0%2C64.32%2C0c.87.71%2C1.76%2C1.39%2C2.66%2C2a68.68%2C68.68%2C0%2C0%2C1-10.87%2C5.19%2C77%2C77%2C0%2C0%2C0%2C6.89%2C11.1A105.25%2C105.25%2C0%2C0%2C0%2C126.6%2C80.22h0C129.24%2C52.84%2C122.09%2C29.11%2C107.7%2C8.07ZM42.45%2C65.69C36.18%2C65.69%2C31%2C60%2C31%2C53s5-12.74%2C11.43-12.74S54%2C46%2C53.89%2C53%2C48.84%2C65.69%2C42.45%2C65.69Zm42.24%2C0C78.41%2C65.69%2C73.25%2C60%2C73.25%2C53s5-12.74%2C11.44-12.74S96.23%2C46%2C96.12%2C53%2C91.08%2C65.69%2C84.69%2C65.69Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") - no-repeat; -} - @media (min-width: 1600px) { #__docusaurus_skipToContent_fallback > div { align-self: center; @@ -94,17 +82,6 @@ max-width: 1600px; } -/* Load new font as Roboto */ - -@font-face { - font-family: "superMario"; - src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"); -} - -body { - font-family: "Roboto", sans-serif; -} - /* Container styles */ .content { width: 100vw; @@ -135,3 +112,43 @@ body { .navbar-sidebar__items { background-color: var(--ifm-color-primary); } + +/* Custom navbar dropdown */ + +.dropdown--custom div.dropdown__menu { + display: flex; + font-size: calc(var(--ifm-font-size-base) * 1.2); + border-radius: 0; +} +.dropdown--custom div.category { + min-width: 10rem; +} +.dropdown--custom div.category p { + color: var(--purple); + font-weight: bold; + margin: calc(var(--ifm-paragraph-margin-bottom) / 2); +} +.dropdown--custom div.category ul { + list-style: none; + font-size: calc(var(--ifm-font-size-base) * 1.2); + padding-left: calc(var(--ifm-paragraph-margin-bottom) / 2); +} +.dropdown--custom div.category .dropdown__link { + font-size: 1rem; +} + +.dropdown--custom div.category.enterprise { + background-color: #2f064b2e; + margin: -8px; + padding: 8px; +} + +@media screen and (max-width: 830px) { + .dropdown--custom div.dropdown__menu { + flex-direction: column; + } + .dropdown--custom div.category.enterprise { + margin-top: 8px; + padding-top: 0px; + } +} diff --git a/website/src/utils.js b/website/src/utils.js index b2d2d4938..c98ef0753 100644 --- a/website/src/utils.js +++ b/website/src/utils.js @@ -1,3 +1,24 @@ +function generateNavbarDropdown(label, categories, extra) { + return ` +
+ ${categories + .map(({ label, items }) => { + return `
+

${label}

+
    + ${items + .map(({ to, label }) => { + return `
  • ${label}
    • `; + }) + .join("")} +
+
`; + }) + .join("")} + ${extra ?? ""} +
`; +} + function generateVersionDropdown(sidebar) { const releases = sidebar.docs .filter((doc) => doc.link?.slug === "releases")[0] @@ -28,4 +49,5 @@ function generateVersionDropdown(sidebar) { module.exports = { generateVersionDropdown, + generateNavbarDropdown, };