re-structure navigation
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
parent
406bcd8850
commit
475ba4ddaf
|
@ -1,4 +1,5 @@
|
||||||
const fs = require("fs").promises;
|
const fs = require("fs").promises;
|
||||||
|
const generateNavbarDropdown = require("./src/utils.js").generateNavbarDropdown;
|
||||||
|
|
||||||
/** @type {import('@docusaurus/types').DocusaurusConfig} */
|
/** @type {import('@docusaurus/types').DocusaurusConfig} */
|
||||||
module.exports = async function () {
|
module.exports = async function () {
|
||||||
|
@ -21,23 +22,179 @@ module.exports = async function () {
|
||||||
navbar: {
|
navbar: {
|
||||||
logo: {
|
logo: {
|
||||||
alt: "authentik logo",
|
alt: "authentik logo",
|
||||||
src: "img/icon_left_brand.svg",
|
src: "img/icon.svg",
|
||||||
},
|
},
|
||||||
items: [
|
items: [
|
||||||
{ to: "blog", label: "Blog", position: "left" },
|
{ to: "blog", label: "Why authentik", position: "left" },
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
to: "docs/",
|
|
||||||
label: "Documentation",
|
label: "Documentation",
|
||||||
position: "left",
|
items: [
|
||||||
|
{
|
||||||
|
label: "Installation",
|
||||||
|
to: "docs/installation/",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
to: "integrations/",
|
|
||||||
label: "Integrations",
|
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/",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
`<div class="category enterprise">
|
||||||
|
<p>Enterprise</p>
|
||||||
|
<ul>
|
||||||
|
<li><a class="dropdown__link" href="">Advantages</a></li>
|
||||||
|
<li><a class="dropdown__link" href="">Support</a></li>
|
||||||
|
<li><a class="dropdown__link" href="">Pricing</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>`,
|
||||||
|
),
|
||||||
position: "left",
|
position: "left",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
to: "pricing/",
|
label: "Integrations",
|
||||||
|
to: "integrations/",
|
||||||
|
},
|
||||||
|
{
|
||||||
label: "Pricing",
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
position: "left",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -46,12 +203,6 @@ module.exports = async function () {
|
||||||
"aria-label": "GitHub repository",
|
"aria-label": "GitHub repository",
|
||||||
position: "right",
|
position: "right",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
href: "https://goauthentik.io/discord",
|
|
||||||
className: "header-discord-link",
|
|
||||||
"aria-label": "GitHub repository",
|
|
||||||
position: "right",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
footer: {
|
footer: {
|
||||||
|
|
|
@ -55,6 +55,11 @@ module.exports = {
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
label: "Community Events",
|
label: "Community Events",
|
||||||
|
link: {
|
||||||
|
type: "generated-index",
|
||||||
|
title: "Events",
|
||||||
|
slug: "events",
|
||||||
|
},
|
||||||
items: ["hackathon/index"],
|
items: ["hackathon/index"],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
--ifm-color-primary-light: #fd644b;
|
--ifm-color-primary-light: #fd644b;
|
||||||
--ifm-color-primary-lighter: #fd7159;
|
--ifm-color-primary-lighter: #fd7159;
|
||||||
--ifm-color-primary-lightest: #fe9786;
|
--ifm-color-primary-lightest: #fe9786;
|
||||||
|
--purple: rgba(47, 6, 75, 1);
|
||||||
--white: #e3e3e3;
|
--white: #e3e3e3;
|
||||||
--ifm-navbar-link-color: var(--white);
|
--ifm-navbar-link-color: var(--white);
|
||||||
--ifm-navbar-link-hover-color: var(--ifm-color-gray-1000);
|
--ifm-navbar-link-hover-color: var(--ifm-color-gray-1000);
|
||||||
|
@ -40,7 +41,7 @@
|
||||||
.hero--primary {
|
.hero--primary {
|
||||||
background: radial-gradient(
|
background: radial-gradient(
|
||||||
circle,
|
circle,
|
||||||
rgba(47, 6, 75, 1) 0%,
|
var(--purple) 0%,
|
||||||
var(--ifm-color-primary) 50%
|
var(--ifm-color-primary) 50%
|
||||||
);
|
);
|
||||||
padding-bottom: 5.3rem !important;
|
padding-bottom: 5.3rem !important;
|
||||||
|
@ -68,19 +69,6 @@
|
||||||
no-repeat;
|
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) {
|
@media (min-width: 1600px) {
|
||||||
#__docusaurus_skipToContent_fallback > div {
|
#__docusaurus_skipToContent_fallback > div {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
@ -94,17 +82,6 @@
|
||||||
max-width: 1600px;
|
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 */
|
/* Container styles */
|
||||||
.content {
|
.content {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
@ -135,3 +112,43 @@ body {
|
||||||
.navbar-sidebar__items {
|
.navbar-sidebar__items {
|
||||||
background-color: var(--ifm-color-primary);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,3 +1,24 @@
|
||||||
|
function generateNavbarDropdown(label, categories, extra) {
|
||||||
|
return `<a aria-haspopup="true" aria-expanded="false" role="button" class="menu__link">${label}</a>
|
||||||
|
<div class="dropdown__menu">
|
||||||
|
${categories
|
||||||
|
.map(({ label, items }) => {
|
||||||
|
return `<div class="category">
|
||||||
|
<p>${label}</p>
|
||||||
|
<ul>
|
||||||
|
${items
|
||||||
|
.map(({ to, label }) => {
|
||||||
|
return `<li><a class="dropdown__link" href="${to}">${label}</a></li>`;
|
||||||
|
})
|
||||||
|
.join("")}
|
||||||
|
</ul>
|
||||||
|
</div>`;
|
||||||
|
})
|
||||||
|
.join("")}
|
||||||
|
${extra ?? ""}
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
function generateVersionDropdown(sidebar) {
|
function generateVersionDropdown(sidebar) {
|
||||||
const releases = sidebar.docs
|
const releases = sidebar.docs
|
||||||
.filter((doc) => doc.link?.slug === "releases")[0]
|
.filter((doc) => doc.link?.slug === "releases")[0]
|
||||||
|
@ -28,4 +49,5 @@ function generateVersionDropdown(sidebar) {
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
generateVersionDropdown,
|
generateVersionDropdown,
|
||||||
|
generateNavbarDropdown,
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue