website: edit the new footer with links (#13433)

* changes requested

* tweaks

* tweak

* fix github text

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

* improve styling

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

* keep opacity

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

* fix missing bash highlight

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

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Tana M Berry <tana@goauthentik.com>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>

website/docusaurus.config.ts

@@ -92,6 +92,7 @@ const createConfig = (): Config => {
                     "json",
                     "nginx",
                     "python",
+                    "bash",
                 ],
             },
         },

website/src/theme/EditMetaRow/index.tsx

@@ -21,31 +21,30 @@ const EditMetaRow: React.FC<Props> = ({
 
             <Admonition
                 className={clsx(styles.admonitionContrib, className)}
-                icon={<IconNote className={styles.contribIcon} />}
-                title={
-                    <span className={styles.headerContent}>
-                        Help us improve this content
-                    </span>
-                }
-                type="info"
+                icon={null}
+                title={null}
+                type="note"
             >
+                <div className={clsx(styles.admonitionHeader)}>
+                    <strong>
+                        <Translate
+                            id="theme.common.contributor.footerHeader"
+                            description="The header for the contribution footer"
+                        >
+                            Help us improve this content
+                        </Translate>
+                    </strong>
+                </div>
                 <p>
                     <Translate
                         id="theme.common.contributor.footerDescription1"
-                        description="The initial description for the contribution footer"
+                        description="The 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.
+                        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>
 
@@ -75,7 +74,7 @@ const EditMetaRow: React.FC<Props> = ({
 
                             <li>
                                 <a
-                                    href="https://github.com/goauthentik/authentik/issues/new/choose"
+                                    href="https://github.com/goauthentik/authentik/issues/new"
                                     target="_blank"
                                     rel="noreferrer noopener"
                                 >

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

@@ -20,13 +20,18 @@
     text-transform: none;
 }
 
-.admonitionContrib {
-    --ifm-h5-font-size: 1.25rem;
+.admonitionHeader {
+    padding-bottom: 8px;
+}
 
+.admonitionContrib {
+    --ifm-h5-font-size: 1rem;
+    --ifm-alert-background-color: var(--ifm-color-secondary-lighter);
     display: block;
+    border-left-style: none;
 
     @media (min-width: 768px) {
-        --ifm-h5-font-size: 1.5rem;
+        --ifm-h5-font-size: 1.2rem;
         --ifm-paragraph-margin-bottom: 0;
 
         p:first-child {

website/src/theme/EditThisPage/index.tsx

@@ -10,7 +10,7 @@ export default function EditThisPage({ editUrl }: Props): ReactNode {
             <Translate
                 id="theme.common.editThisPage"
                 values={{
-                    github: <strong>GitHub</strong>,
+                    github: "GitHub",
                 }}
                 description="The link label to edit the current page"
             >