website: update release notes (#6590)

* move 2023.7 to 2023.8

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* move version dropdown from navbar to sidebar, and only have it on applicable sites

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* remove title instead of just hiding it

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix some styling for the mobile navbar sidebar

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add social image

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* Optimised images with calibre/image-actions

* fix website tests

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: authentik-automation[bot] <135050075+authentik-automation[bot]@users.noreply.github.com>

website/docs/releases/2023/v2023.8.md

@@ -1,6 +1,6 @@
 ---
-title: Release 2023.7
+title: Release 2023.8
-slug: "/releases/2023.7"
+slug: "/releases/2023.8"
 ---
 
 ## Breaking changes
@@ -32,7 +32,7 @@ This release does not introduce any new requirements.
 To upgrade, download the new docker-compose file and update the Docker stack with the new version, using these commands:
 
 ```
-wget -O docker-compose.yml https://goauthentik.io/version/2023.7/docker-compose.yml
+wget -O docker-compose.yml https://goauthentik.io/version/2023.8/docker-compose.yml
 docker-compose up -d
 ```
 
@@ -45,7 +45,7 @@ Update your values to use the new images:
 ```yaml
 image:
     repository: ghcr.io/goauthentik/server
-    tag: 2023.7.0
+    tag: 2023.8.0
 ```
 
 ## Minor changes/fixes

website/docusaurus.config.js

@@ -1,9 +1,4 @@
 const fs = require("fs").promises;
-const sidebar = require("./sidebars.js");
-
-const releases = sidebar.docs
-    .filter((doc) => doc.link?.slug === "releases")[0]
-    .items.filter((release) => typeof release === "string");
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = async function () {
@@ -21,8 +16,8 @@ module.exports = async function () {
         organizationName: "Authentik Security Inc.",
         projectName: "authentik",
         themeConfig: {
+            image: "img/social.png",
             navbar: {
-                title: "authentik",
                 logo: {
                     alt: "authentik logo",
                     src: "img/icon_left_brand.svg",
@@ -49,26 +44,6 @@ module.exports = async function () {
                         label: "Pricing",
                         position: "left",
                     },
-                    {
-                        type: "dropdown",
-                        label: `Version: ${releases[0].replace(
-                            /releases\/\d+\/v/,
-                            "",
-                        )}`,
-                        position: "right",
-                        items: releases.map((release) => {
-                            const version = release.replace(
-                                /releases\/\d+\/v/,
-                                "",
-                            );
-                            const subdomain = version.replace(".", "-");
-                            const label = `Version: ${version}`;
-                            return {
-                                label: label,
-                                href: `https://version-${subdomain}.goauthentik.io`,
-                            };
-                        }),
-                    },
                     {
                         href: "https://github.com/goauthentik/authentik",
                         className: "header-github-link",

website/sidebars.js

@@ -1,5 +1,11 @@
-module.exports = {
+const generateVersionDropdown =
+    require("./src/utils.js").generateVersionDropdown;
+
+const docsSidebar = {
     docs: [
+        {
+            type: "html",
+        },
         {
             type: "doc",
             id: "index",
@@ -351,3 +357,6 @@ module.exports = {
         },
     ],
 };
+
+docsSidebar.docs[0].value = generateVersionDropdown(docsSidebar);
+module.exports = docsSidebar;

website/sidebarsDev.js

@@ -1,5 +1,13 @@
+const docsSidebar = require("./sidebars.js");
+const generateVersionDropdown =
+    require("./src/utils.js").generateVersionDropdown;
+
 module.exports = {
     docs: [
+        {
+            type: "html",
+            value: generateVersionDropdown(docsSidebar),
+        },
         {
             type: "doc",
             id: "index",

website/sidebarsIntegrations.js

@@ -1,5 +1,13 @@
+const docsSidebar = require("./sidebars.js");
+const generateVersionDropdown =
+    require("./src/utils.js").generateVersionDropdown;
+
 module.exports = {
     integrations: [
+        {
+            type: "html",
+            value: generateVersionDropdown(docsSidebar),
+        },
         {
             type: "category",
             label: "Applications",

website/src/css/custom.css

@@ -26,18 +26,15 @@
     box-shadow: none;
 }
 
-/* Don't display text title */
-.navbar__title {
-    display: none;
-}
-
 .navbar__logo {
     margin: 0 0.75rem;
 }
 
 /* Match color of light/dark theme switch */
-.navbar__items--right svg {
+.navbar__items--right svg,
+.navbar-sidebar__brand svg {
     color: var(--white);
+    stroke: var(--white);
 }
 
 .hero--primary {
@@ -116,3 +113,27 @@ body {
     align-items: center;
     justify-content: center;
 }
+
+/* styling for version selector in sidebar */
+.theme-doc-sidebar-menu .dropdown {
+    display: block;
+    padding: 0;
+}
+.theme-doc-sidebar-menu .navbar__link {
+    color: var(--ifm-menu-color);
+}
+.theme-doc-sidebar-menu .dropdown__menu {
+    left: 0;
+}
+.theme-doc-sidebar-menu hr {
+    margin-top: calc(var(--ifm-hr-margin-vertical) / 2);
+}
+
+/* Nav header background color on mobile */
+.navbar-sidebar__brand,
+.navbar-sidebar__items {
+    background-color: var(--ifm-color-primary);
+}
+.navbar-sidebar__items .menu__link {
+    color: var(--white);
+}

website/src/utils.js

@@ -0,0 +1,31 @@
+function generateVersionDropdown(sidebar) {
+    const releases = sidebar.docs
+        .filter((doc) => doc.link?.slug === "releases")[0]
+        .items.filter((release) => typeof release === "string");
+    const latest = releases[0].replace(/releases\/\d+\/v/, "");
+    return `<div class="navbar__item dropdown dropdown--hoverable dropdown--right">
+        <div aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link menu__link">
+            Version: ${latest}
+        </div>
+        <ul class="dropdown__menu">
+            ${releases
+                .map((release) => {
+                    const version = release.replace(/releases\/\d+\/v/, "");
+                    const subdomain = `version-${version.replace(".", "-")}`;
+                    const label = `Version: ${version}`;
+                    return `<li>
+                            <a
+                                href="https://${subdomain}.goauthentik.io/docs"
+                                target="_blank" rel="noopener noreferrer"
+                                class="dropdown__link">${label}</a>
+                        </li>`;
+                })
+                .join("")}
+        </ul>
+    </div>
+    <hr>`;
+}
+
+module.exports = {
+    generateVersionDropdown,
+};

website/test/sidebarIntegrations.mjs

@@ -6,6 +6,9 @@ import glob from "glob";
 const getSidebarItems = () => {
     const allItems = [];
     const mapper = (category) => {
+        if (!category.items) {
+            return;
+        }
         category.items.forEach((item) => {
             if (item.constructor === String) {
                 allItems.push(item);