From 354634cdf46a42c222a4b2d53c68f7eefa53c2c4 Mon Sep 17 00:00:00 2001
From: "Jens L." <jens@goauthentik.io>
Date: Thu, 6 Mar 2025 19:27:57 +0000
Subject: [PATCH] website: add a better edit this page element (#13391)

website/docs: Flesh out contributor footer.

Co-authored-by: Teffen Ellis <teffen@nirri.us>
---
 website/docusaurus.config.ts                  |   1 +
 website/src/theme/EditMetaRow/index.tsx       | 124 ++++++++++++++++++
 .../src/theme/EditMetaRow/styles.module.css   |  62 +++++++++
 website/src/theme/EditThisPage/index.tsx      |  21 +++
 4 files changed, 208 insertions(+)
 create mode 100644 website/src/theme/EditMetaRow/index.tsx
 create mode 100644 website/src/theme/EditMetaRow/styles.module.css
 create mode 100644 website/src/theme/EditThisPage/index.tsx

diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 9b899d529a..e24e74b6e2 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -102,6 +102,7 @@ const createConfig = (): Config => {
                     docs: {
                         id: "docs",
                         sidebarPath: "./sidebars.js",
+                        showLastUpdateTime: true,
                         editUrl:
                             "https://github.com/goauthentik/authentik/edit/main/website/",
                         docItemComponent: "@theme/ApiItem",
diff --git a/website/src/theme/EditMetaRow/index.tsx b/website/src/theme/EditMetaRow/index.tsx
new file mode 100644
index 0000000000..3820a06b54
--- /dev/null
+++ b/website/src/theme/EditMetaRow/index.tsx
@@ -0,0 +1,124 @@
+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";
+
+const EditMetaRow: React.FC<Props> = ({
+    className,
+    editUrl,
+    lastUpdatedAt,
+    lastUpdatedBy,
+}: Props) => {
+    return (
+        <>
+            <hr className={styles.divider} />
+
+            <Admonition
+                className={clsx(styles.admonitionContrib, className)}
+                icon={<IconNote className={styles.contribIcon} />}
+                title={
+                    <span className={styles.headerContent}>
+                        Help us improve this content
+                    </span>
+                }
+                type="info"
+            >
+                <p>
+                    <Translate
+                        id="theme.common.contributor.footerDescription1"
+                        description="The initial description for the contribution footer"
+                    >
+                        Documentation for authentik is made possible by
+                        contributors like you!
+                    </Translate>
+                </p>
+
+                <p>
+                    <Translate
+                        id="theme.common.contributor.footerDescription2"
+                        description="The initial description for the contribution footer"
+                    >
+                        You can help us improve this page, or let us know about
+                        an issue by opening a pull request on GitHub.
+                    </Translate>
+                </p>
+
+                <div className="row">
+                    <div className="col col--12">
+                        <ul>
+                            {editUrl && (
+                                <li>
+                                    <EditThisPage editUrl={editUrl} />
+                                </li>
+                            )}
+
+                            <li>
+                                <a
+                                    href="https://docs.goauthentik.io/docs/developer-docs/"
+                                    target="_blank"
+                                    rel="noreferrer noopener"
+                                >
+                                    <Translate
+                                        id="theme.common.contributor.howToContribute"
+                                        description="The link label to the contribution guide"
+                                    >
+                                        Contributor Guide
+                                    </Translate>
+                                </a>
+                            </li>
+
+                            <li>
+                                <a
+                                    href="https://github.com/goauthentik/authentik/issues/new/choose"
+                                    target="_blank"
+                                    rel="noreferrer noopener"
+                                >
+                                    <Translate
+                                        id="theme.common.contributor.createAnIssue"
+                                        description="The link label to report a documentation issue"
+                                    >
+                                        Open an issue
+                                    </Translate>
+                                </a>
+                            </li>
+
+                            <li>
+                                <a
+                                    href="https://goauthentik.io/pricing/"
+                                    target="_blank"
+                                    rel="noreferrer noopener"
+                                >
+                                    <Translate
+                                        id="theme.common.contributor.getSupport"
+                                        description="The link label to request support"
+                                    >
+                                        Get Enterprise Support
+                                    </Translate>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </Admonition>
+
+            <div className="row">
+                <div className={clsx("col", styles.lastUpdated)}>
+                    {(lastUpdatedAt || lastUpdatedBy) && (
+                        <LastUpdated
+                            lastUpdatedAt={lastUpdatedAt}
+                            lastUpdatedBy={lastUpdatedBy}
+                        />
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default EditMetaRow;
diff --git a/website/src/theme/EditMetaRow/styles.module.css b/website/src/theme/EditMetaRow/styles.module.css
new file mode 100644
index 0000000000..792e045752
--- /dev/null
+++ b/website/src/theme/EditMetaRow/styles.module.css
@@ -0,0 +1,62 @@
+.lastUpdated {
+    font-size: smaller;
+    font-style: italic;
+    margin-top: 0.2rem;
+    align-self: end;
+}
+
+.divider {
+    margin-block: calc(var(--ifm-spacing-horizontal) * 1.5);
+    margin-inline: var(--ifm-spacing-vertical);
+}
+
+@media (min-width: 997px) {
+    .lastUpdated {
+        text-align: right;
+    }
+}
+
+.headerContent {
+    text-transform: none;
+}
+
+.admonitionContrib {
+    --ifm-h5-font-size: 1.25rem;
+
+    display: block;
+
+    @media (min-width: 768px) {
+        --ifm-h5-font-size: 1.5rem;
+        --ifm-paragraph-margin-bottom: 0;
+
+        p:first-child {
+            margin-top: 0.75em;
+        }
+
+        ul {
+            --ifm-spacing-horizontal: 0.5rem;
+
+            display: flex;
+            gap: var(--ifm-spacing-horizontal);
+            justify-content: center;
+            margin: calc(var(--ifm-spacing-horizontal) * 2) 0
+                var(--ifm-spacing-horizontal);
+            padding: 0;
+        }
+
+        li {
+            vertical-align: middle;
+            display: flex;
+            align-items: center;
+        }
+
+        li:not(:first-child)::before {
+            display: inline-block;
+            content: "•";
+            list-style-type: "•";
+            font-size: 1em;
+            opacity: 0.75;
+            margin-inline-end: var(--ifm-spacing-horizontal);
+        }
+    }
+}
diff --git a/website/src/theme/EditThisPage/index.tsx b/website/src/theme/EditThisPage/index.tsx
new file mode 100644
index 0000000000..73e4703879
--- /dev/null
+++ b/website/src/theme/EditThisPage/index.tsx
@@ -0,0 +1,21 @@
+import React, { type ReactNode } from "react";
+import Translate from "@docusaurus/Translate";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import Link from "@docusaurus/Link";
+import type { Props } from "@theme/EditThisPage";
+
+export default function EditThisPage({ editUrl }: Props): ReactNode {
+    return (
+        <Link to={editUrl} className={ThemeClassNames.common.editThisPage}>
+            <Translate
+                id="theme.common.editThisPage"
+                values={{
+                    github: <strong>GitHub</strong>,
+                }}
+                description="The link label to edit the current page"
+            >
+                {"Edit on {github}"}
+            </Translate>
+        </Link>
+    );
+}