website: dynamically render index.mdx page for integrations

[dominic-r]

What?

This PR updates the default welcome page for integrations (at http://localhost:3000/integrations/) to be dynamically generated based on the existing integrations and sorted by category header. An updated version of #11341, but integrations are no longer sorted alphabetically, as it looked out of place to me.

Might be redundant to sort them twice by category? Once in the sidebar and once in the main page itself. I have a local copy of this component for when integrations are sorted alphabetically instead if that's what preferred by y'all.

Whatever option is chosen, I find it adds a nice touch and looks nicer than a few pixelated images. Mabye the menu on the left could be hidden on this page?

Do note I've rarely used React or frontend technology, this may be far from optimal. Created this PR for fun/necessity

How?

• Uses Docusaurus' useDocsSidebar hook to access documentation structure
• Accesses sidebar items through the plugin-content-docs API
• Processes nested sidebar items through recursive processItems calls
• Skips categories (isCategory type guard)
• Collects links (isLink type guard) while ignoring URLs in IGNORED_URLS
• Creates CategorySection components for each group
• Uses Docusaurus' component

Testing:

• Run make website-install, make website-build, and make website-watch
• Navigate to http://localhost:3000/integrations/

Details

REPLACE ME

---

Checklist

• Local tests pass (ak test authentik/)
• The code has been formatted (make lint-fix)

If an API change has been made

• The API schema has been updated (make gen-build)

If changes to the frontend have been made

• The code has been formatted (make web)

If applicable

• The documentation has been updated
• The documentation has been formatted (make website)

[netlify]

✅ Deploy Preview for authentik-docs canceled.

Name	Link
🔨 Latest commit	f120afe
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/679d929b0cdfe2000881aaac

[netlify]

✅ Deploy Preview for authentik-storybook canceled.

Name	Link
🔨 Latest commit	f120afe
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/679d929b54f60f0008ee6746

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.73%. Comparing base (7686d12) to head (f120afe).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #12897   +/-   ##
=======================================
  Coverage   92.72%   92.73%           
=======================================
  Files         770      770           
  Lines       38945    38945           
=======================================
+ Hits        36113    36115    +2     
+ Misses       2832     2830    -2     

Flag	Coverage Δ
e2e	48.55% <ø> (+<0.01%)	⬆️
integration	24.59% <ø> (ø)
unit	90.37% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[BeryJu]

I love the idea for this (I think I experimented with something similar some time ago), especially with #12893 moving the support badge to the frontmatter making the first line in the card be an excerpt of the service.

One thing we should do in the future is add icons to these integrations, however we'd a) need to backport that for all existing services and b) figure out a better place to store them (I'm not a fan of putting them in this repo too)

LGTM from me, cc @tanberry for adding some copy on top of the integrations page and @kensternberg-authentik / @GirlBossRush for reviewing the react components