website/docs: Prepare for monorepo. (#14119)

* docusaurus-theme: Fix header alignment, overscroll, vertical padding.

* docusaurus-theme: Lint.

* website/docs: Prepare for monorepo packages.

* website/docs: Clean up dependencies. Tidy table.

* website/docs: Fix issue where Prettier affects example content.

* website/docs: Temp fix for stale packages.

website/src/components/SupportBadge.tsx

@@ -1,8 +1,5 @@
+import { SupportLevelToLabel, isSupportLevel } from "@site/remark/support-directive.mjs";
 import React from "react";
-import {
-    isSupportLevel,
-    SupportLevelToLabel,
-} from "@site/remark/support-directive";
 
 export interface SupportBadgeProps {
     level: string;

website/src/components/VersionBadge.tsx

@@ -18,9 +18,7 @@ export const VersionBadge: React.FC<AuthentikVersionProps> = ({ semver }) => {
     const yearCutoff = new Date().getFullYear() - 2;
 
     if (parsed.major <= yearCutoff) {
-        throw new Error(
-            `Semver version <= ${yearCutoff} is not supported: ${semver}`,
-        );
+        throw new Error(`Semver version <= ${yearCutoff} is not supported: ${semver}`);
     }
 
     return (

website/src/hooks/title.ts

@@ -14,8 +14,7 @@ import { useDoc } from "@docusaurus/plugin-content-docs/client";
  */
 export function useSyntheticTitle(): string | null {
     const { metadata, frontMatter, contentTitle } = useDoc();
-    const shouldRender =
-        !frontMatter.hide_title && typeof contentTitle === "undefined";
+    const shouldRender = !frontMatter.hide_title && typeof contentTitle === "undefined";
     if (!shouldRender) {
         return null;
     }

website/src/pages/index.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { Redirect } from "@docusaurus/router";
+import React from "react";
 
 function Home() {
     return <Redirect to="/docs" />;

website/src/theme/DocItem/Content/index.tsx

@@ -1,3 +1,4 @@
+/// <reference types="@docusaurus/plugin-content-docs" />
 /**
  * @file Swizzled DocItemContent component.
  *
@@ -7,21 +8,17 @@
  * the content of a documentation page. However, it also adds support for
  * support badges, and Authentik version badges.
  */
-
-import React from "react";
-import clsx from "clsx";
-import { ThemeClassNames } from "@docusaurus/theme-common";
-import {
-    DocContextValue,
-    useDoc,
-} from "@docusaurus/plugin-content-docs/client";
-import Heading from "@theme/Heading";
-import MDXContent from "@theme/MDXContent";
-import type { Props } from "@theme/DocItem/Content";
 import { DocFrontMatter } from "@docusaurus/plugin-content-docs";
-import { useSyntheticTitle } from "@site/src/hooks/title";
+import { DocContextValue, useDoc } from "@docusaurus/plugin-content-docs/client";
+import { ThemeClassNames } from "@docusaurus/theme-common";
 import { SupportBadge } from "@site/src/components/SupportBadge";
 import { VersionBadge } from "@site/src/components/VersionBadge";
+import { useSyntheticTitle } from "@site/src/hooks/title";
+import type { Props } from "@theme/DocItem/Content";
+import Heading from "@theme/Heading";
+import MDXContent from "@theme/MDXContent";
+import clsx from "clsx";
+import React from "react";
 
 interface SwizzledDocFrontMatter extends DocFrontMatter {
     support_level?: string;
@@ -37,12 +34,8 @@ interface SwizzledDocContextValue extends DocContextValue {
 const DocItemContent: React.FC<Props> = ({ children }) => {
     const syntheticTitle = useSyntheticTitle();
     const { frontMatter } = useDoc() as SwizzledDocContextValue;
-    const {
-        support_level,
-        authentik_version,
-        authentik_enterprise,
-        authentik_preview,
-    } = frontMatter;
+    const { support_level, authentik_version, authentik_enterprise, authentik_preview } =
+        frontMatter;
 
     const badges: JSX.Element[] = [];
 
@@ -71,9 +64,7 @@ const DocItemContent: React.FC<Props> = ({ children }) => {
                     {badges.length ? (
                         <p className="badge-group">
                             {badges.map((badge, index) => (
-                                <React.Fragment key={index}>
-                                    {badge}
-                                </React.Fragment>
+                                <React.Fragment key={index}>{badge}</React.Fragment>
                             ))}
                         </p>
                     ) : null}

website/src/theme/EditMetaRow/index.tsx

@@ -1,13 +1,12 @@
-import React, { type ReactNode } from "react";
-import clsx from "clsx";
-import EditThisPage from "@theme/EditThisPage";
-import type { Props } from "@theme/EditMetaRow";
-
-import LastUpdated from "@theme/LastUpdated";
-import Admonition from "@theme/Admonition";
-import styles from "./styles.module.css";
 import Translate from "@docusaurus/Translate";
-import IconNote from "@theme/Admonition/Icon/Note";
+import Admonition from "@theme/Admonition";
+import type { Props } from "@theme/EditMetaRow";
+import EditThisPage from "@theme/EditThisPage";
+import LastUpdated from "@theme/LastUpdated";
+import clsx from "clsx";
+import React from "react";
+
+import styles from "./styles.module.css";
 
 const EditMetaRow: React.FC<Props> = ({
     className,
@@ -40,22 +39,20 @@ const EditMetaRow: React.FC<Props> = ({
                         id="theme.common.contributor.footerDescription1"
                         description="The description for the contribution footer"
                     >
-                        We welcome your knowledge and expertise. If you see
-                        areas of the documentation that you can improve (fix a
-                        typo, correct a technical detail, add additional
-                        context, etc.) we would really appreciate your
-                        contribution.
+                        We welcome your knowledge and expertise. If you see areas of the
+                        documentation that you can improve (fix a typo, correct a technical detail,
+                        add additional context, etc.) we would really appreciate your contribution.
                     </Translate>
                 </p>
 
                 <div className="row">
                     <div className="col col--12">
                         <ul>
-                            {editUrl && (
+                            {editUrl ? (
                                 <li>
                                     <EditThisPage editUrl={editUrl} />
                                 </li>
-                            )}
+                            ) : null}
 
                             <li>
                                 <a
@@ -108,12 +105,9 @@ const EditMetaRow: React.FC<Props> = ({
 
             <div className="row">
                 <div className={clsx("col", styles.lastUpdated)}>
-                    {(lastUpdatedAt || lastUpdatedBy) && (
-                        <LastUpdated
-                            lastUpdatedAt={lastUpdatedAt}
-                            lastUpdatedBy={lastUpdatedBy}
-                        />
-                    )}
+                    {lastUpdatedAt || lastUpdatedBy ? (
+                        <LastUpdated lastUpdatedAt={lastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />
+                    ) : null}
                 </div>
             </div>
         </>

website/src/theme/EditMetaRow/styles.module.css

@@ -52,8 +52,7 @@ html[data-theme="dark"] {
             display: flex;
             gap: var(--ifm-spacing-horizontal);
             justify-content: center;
-            margin: calc(var(--ifm-spacing-horizontal) * 2) 0
-                var(--ifm-spacing-horizontal);
+            margin: calc(var(--ifm-spacing-horizontal) * 2) 0 var(--ifm-spacing-horizontal);
             padding: 0;
         }
 

website/src/theme/EditThisPage/index.tsx

@@ -1,8 +1,8 @@
-import React, { type ReactNode } from "react";
+import Link from "@docusaurus/Link";
 import Translate from "@docusaurus/Translate";
 import { ThemeClassNames } from "@docusaurus/theme-common";
-import Link from "@docusaurus/Link";
 import type { Props } from "@theme/EditThisPage";
+import React, { type ReactNode } from "react";
 
 export default function EditThisPage({ editUrl }: Props): ReactNode {
     return (

website/src/utils.js

@@ -1,27 +1,68 @@
-export function generateVersionDropdown(allReleases) {
-    const releases = allReleases.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>
+/**
+ * @file Sidebar utilities.
+ *
+ * @todo This needs a revision to better align with Docusaurus's components.
+ */
+
+const html = String.raw;
+
+/**
+ *
+ * @param {string[]} releases
+ * @returns
+ */
+export function generateVersionDropdown(releases) {
+    return html`<div
+            class="navbar__item dropdown dropdown--hoverable dropdown--right psuedo-dropdown"
+        >
+            <style>
+                .psuedo-dropdown .navbar__link.menu__link {
+                    display: flex;
+                    width: 100%;
+                    justify-content: space-between;
+                    font-weight: var(--ifm-font-weight-semibold);
+                }
+                .psuedo-dropdown .navbar__link.menu__link::after {
+                    color: var(--ifm-color-emphasis-400);
+                    filter: var(--ifm-menu-link-sublist-icon-filter);
+                    margin-inline-end: calc(var(--ifm-navbar-padding-horizontal) * 0.5);
+                }
+
+                .psuedo-dropdown .dropdown__menu {
+                    background: var(--ifm-dropdown-background-color);
+                    box-shadow: var(--ifm-global-shadow-lw);
+                    border: 1px solid var(--ifm-color-emphasis-200);
+                }
+            </style>
+
+            <div
+                aria-haspopup="true"
+                aria-expanded="false"
+                role="button"
+                class="navbar__link menu__link"
+            >
+                Version: Pre-Release
+            </div>
+
+            <ul class="dropdown__menu menu__list-item--collapsed">
+                ${releases
+                    .map((release, idx) => {
+                        const version = release.replace(/releases\/\d+\/v/, "");
+                        const subdomain = `version-${version.replace(".", "-")}`;
+                        const label = `Version: ${version}${idx === 0 ? " (Current)" : ""}`;
+
+                        return html`<li>
                             <a
                                 href="https://${subdomain}.goauthentik.io/docs"
-                                target="_blank" rel="noopener noreferrer"
-                                class="dropdown__link">${label}</a>
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="dropdown__link menu__link"
+                                >${label}</a
+                            >
                         </li>`;
-                })
-                .join("")}
-        </ul>
-    </div>
-    <hr>`;
+                    })
+                    .join("")}
+            </ul>
+        </div>
+        <hr />`;
 }