website/docs: preserve blueprint download filenames (#21969)

* website/docs: preserve blueprint download filenames

Use a shared DownloadLink component for bundled blueprint downloads.

Closes: https://github.com/goauthentik/authentik/issues/20089

* website/docs: use download link for lockdown blueprint

website/docs/add-secure-apps/flows-stages/flow/examples/flows.md

@@ -12,13 +12,13 @@ The example flows provided below will **override** the default flows, please rev
 
 ## Enrollment (2 Stage)
 
-Flow: right-click [here](/blueprints/example/flows-enrollment-2-stage.yaml) and save the file.
+Flow: right-click <DownloadLink to="/blueprints/example/flows-enrollment-2-stage.yaml">here</DownloadLink> and save the file.
 
 Sign-up flow for new users, which prompts them for their username, email, password and name. No verification is done. Users are also immediately logged on after this flow.
 
 ## Enrollment with email verification
 
-Flow: right-click [here](/blueprints/example/flows-enrollment-email-verification.yaml) and save the file.
+Flow: right-click <DownloadLink to="/blueprints/example/flows-enrollment-email-verification.yaml">here</DownloadLink> and save the file.
 
 Same flow as above, with an extra email verification stage.
 
@@ -26,7 +26,7 @@ You'll probably have to adjust the Email stage and set your connection details.
 
 ## Two-factor Login
 
-Flow: right-click [here](/blueprints/example/flows-login-2fa.yaml) and save the file.
+Flow: right-click <DownloadLink to="/blueprints/example/flows-login-2fa.yaml">here</DownloadLink> and save the file.
 
 Login flow which follows the default pattern (username/email, then password), but also checks for the user's OTP token, if they have one configured.
 
@@ -34,7 +34,7 @@ You can force two-factor authentication by editing the _Not configured action_ i
 
 ## Login with conditional Captcha
 
-Flow: right-click [here](/blueprints/example/flows-login-conditional-captcha.yaml) and save the file.
+Flow: right-click <DownloadLink to="/blueprints/example/flows-login-conditional-captcha.yaml">here</DownloadLink> and save the file.
 
 Login flow which conditionally shows the users a captcha, based on the reputation of their IP and Username.
 
@@ -42,15 +42,15 @@ By default, the captcha test keys are used. You can get a proper key [here](http
 
 ## Recovery with email and MFA verification
 
-Flow: right-click [here](/blueprints/example/flows-recovery-email-mfa-verification.yaml) and save the file.
+Flow: right-click <DownloadLink to="/blueprints/example/flows-recovery-email-mfa-verification.yaml">here</DownloadLink> and save the file.
 
 With this recovery flow, the user is sent an email after they've identified themselves. After they click on the link in the email, they will have to verify their configured MFA device, and are prompted for a new password and immediately logged on.
 
-There's also [a version](/blueprints/example/flows-recovery-email-verification.yaml) of this flow available without MFA validation, which is not recommended.
+There's also <DownloadLink to="/blueprints/example/flows-recovery-email-verification.yaml">a version</DownloadLink> of this flow available without MFA validation, which is not recommended.
 
 ## User deletion
 
-Flow: right-click [here](/blueprints/example/flows-unenrollment.yaml) and save the file.
+Flow: right-click <DownloadLink to="/blueprints/example/flows-unenrollment.yaml">here</DownloadLink> and save the file.
 
 Flow for users to delete their account.
 

website/docs/security/account-lockdown.md

@@ -48,7 +48,7 @@ Download the lockdown blueprint by running:
 wget https://goauthentik.io/blueprints/example/flow-default-account-lockdown.yaml
 ```
 
-Alternatively, use this [link](/blueprints/example/flow-default-account-lockdown.yaml) to view and save the file.
+Alternatively, use this <DownloadLink to="/blueprints/example/flow-default-account-lockdown.yaml">link</DownloadLink> to view and save the file.
 
 ### Step 2. Import the blueprint file
 

website/docs/src/components/DownloadLink.tsx

@@ -0,0 +1,28 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import React, { type ReactNode } from "react";
+
+// Use this for static file download links, including bundled blueprints.
+// Docusaurus rewrites Markdown static-asset links into hashed asset URLs, which
+// caused blueprint downloads to lose their useful filenames:
+// https://github.com/goauthentik/authentik/issues/20089
+
+interface DownloadLinkProps {
+    children: ReactNode;
+    filename?: string;
+    to: string;
+}
+
+function getFilename(path: string): string {
+    return path.split("/").filter(Boolean).at(-1) ?? "";
+}
+
+export default function DownloadLink({ children, filename, to }: DownloadLinkProps): ReactNode {
+    const href = useBaseUrl(to);
+    const download = filename ?? getFilename(to);
+
+    return (
+        <a href={href} download={download}>
+            {children}
+        </a>
+    );
+}

website/docs/src/theme/MDXComponents.tsx

@@ -0,0 +1,8 @@
+import DownloadLink from "../components/DownloadLink";
+
+import MDXComponents from "@theme-original/MDXComponents";
+
+export default {
+    ...MDXComponents,
+    DownloadLink,
+};

website/docs/users-sources/user/invitations.md

@@ -37,7 +37,7 @@ We have two pre-defined blueprints, the`Example - Invitation-based Enrollment` b
     wget https://goauthentik.io/blueprints/example/flows-invitation-enrollment.yaml
     ```
 
-    Alternatively, use this [link](/blueprints/example/flows-invitation-enrollment.yaml) to view and save the file.
+    Alternatively, use this <DownloadLink to="/blueprints/example/flows-invitation-enrollment.yaml">link</DownloadLink> to view and save the file.
 
 - #### Option 2: Download the `Example - Enrollment (2 Stage)` blueprint
 
@@ -47,7 +47,7 @@ We have two pre-defined blueprints, the`Example - Invitation-based Enrollment` b
     wget https://goauthentik.io/blueprints/example/flows-enrollment-2-stage.yaml
     ```
 
-    Alternatively, use this [link](/blueprints/example/flows-enrollment-2-stage.yaml) to view and save the file.
+    Alternatively, use this <DownloadLink to="/blueprints/example/flows-enrollment-2-stage.yaml">link</DownloadLink> to view and save the file.
 
 ### Step 2. Import the blueprint file