Skip to content

test: move jsx to mdx #910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
smwest3 wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

test: move jsx to mdx #910

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c70e0ce
fix: move all homepage react components into index mdx
smwest3 Apr 8, 2026
e6dacff
use dom rendered version of first two page sections
smwest3 Apr 8, 2026
7f224bb
revert to previous approach + additional formatting
smwest3 Apr 9, 2026
39dad70
Revert "revert to previous approach + additional formatting"
smwest3 Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 225 additions & 11 deletions main/docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,228 @@ mode: custom
sidebarTitle: Welcome to Auth0 Docs
---

import {DocsBanner, DocsFeatureCards, LanguageGrid, ProductGrid, LearnBasicsGrid} from "/snippets/home.jsx";
import {BgImage} from "/snippets/BgImage.jsx";
import {Footer} from "/snippets/Footer.jsx";

<BgImage/>
<DocsBanner/>
<DocsFeatureCards/>
<LanguageGrid/>
<ProductGrid/>
<LearnBasicsGrid/>
<Footer/>
<div class="mint-gap-5 mint-flex mint-justify-center mint-p-6 bg-[radial-gradient(1200px_600px_at_50%_-10%,rgba(180,160,255,.45)_0%,rgba(255,235,240,.35)_40%,rgba(255,245,235,.6)_100%)]">
<div class="w-[min(860px,90vw)] mint-text-center mint-px-0 mint-py-2 md:mint-px-6 md:mint-py-12">
<h1 class="mint-mb-5 font-inter mint-font-semibold mint-text-5xl mint-text-center mint-text-gray-900 dark:mint-text-white">
Auth0 Docs
</h1>
<span
data-as="p"
class="mint-mt-4 mint-mb-10 font-inter mint-font-normal text-body-l leading-body-l tracking-body-l mint-text-center mint-text-gray-600 mint-max-w-2xl mint-mx-auto dark:mint-text-white"
>
Browse the latest sample code, articles, tutorials,
<br /> and API reference.
</span>
<div class="mint-flex mint-justify-center mint-mt-5">
<img
alt="Auth0 Docs Banner"
class="rounded mint-block mint-w-full mint-h-auto sm:mint-hidden"
src="/docs/images/home/banner-mobile.svg"
/>
<img
alt="Auth0 Docs Banner"
class="rounded mint-hidden mint-w-full mint-h-auto sm:mint-block dark:mint-hidden"
src="/docs/images/home/banner.svg"
/>
<img
alt="Auth0 Docs Banner (dark)"
class="rounded mint-hidden mint-w-full mint-h-auto sm:dark:mint-block"
src="/docs/images/home/banner-dark.svg"
/>
</div>
</div>
</div>
<div class="mint-grid mint-grid-cols-1 md:mint-grid-cols-3 mint-gap-6 mint-max-w-[962px] mint-mx-auto mint-py-6 mint-px-8 lg:mint-px-0">
<a
class="link mint-group mint-flex mint-flex-col mint-items-start mint-justify-between mint-rounded-2xl mint-px-6 mint-py-6 mint-bg-white dark:mint-bg-neutral-900/60 mint-border mint-border-gray-200 dark:mint-border-white/10 hover:mint-border-black dark:hover:mint-border-white mint-transition no_external_icon"
href="/docs/get-started"
>
<div class="mint-flex mint-flex-col mint-items-start mint-gap-3 mint-w-full">
<div class="mint-h-9 mint-w-9 mint-flex mint-items-center mint-justify-center mint-rounded-md">
<span aria-owns="rmiz-modal-9df8cb489c0e" data-rmiz="">
<span data-rmiz-content="not-found" style={{ visibility: "visible" }}>
<img
alt="Documentation"
class="rounded mint-block dark:mint-hidden mint-h-7 mint-w-7"
src="/docs/images/home/icon1.svg"
/>
</span>
</span>
<span aria-owns="rmiz-modal-888878639148" data-rmiz="">
<span data-rmiz-content="found" style={{ visibility: "visible" }}>
<img
alt="Documentation"
class="rounded mint-hidden dark:mint-block mint-h-7 mint-w-7"
src="/docs/images/home/icon1-dark.svg"
/>
</span>
<span
data-rmiz-ghost=""
style={{ height: "28px", left: "28px", width: "28px", top: "28px" }}
>
<button
aria-label="Expand image: Documentation"
data-rmiz-btn-zoom=""
type="button"
>
<svg
aria-hidden="true"
data-rmiz-btn-zoom-icon="true"
fill="currentColor"
focusable="false"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z"></path>
</svg>
</button>
</span>
</span>
</div>
<div class="mint-flex mint-items-center mint-justify-between mint-w-full">
<h3 class="font-inter mint-font-medium mint-text-gray-900 dark:mint-text-gray-100 mint-text-xl">
Documentation
</h3>
<span class="mint-opacity-0 mint-translate-x-2 group-hover:mint-opacity-100 group-hover:mint-translate-x-0 mint-transition-all mint-duration-200 mint-ease-out mint-flex mint-items-center mint-justify-center mint-h-7 mint-w-7 mint-rounded-full mint-bg-black dark:mint-bg-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 256 256"
class="mint-fill-white dark:mint-fill-black"
>
<path d="M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z"></path>
</svg>
</span>
</div>
</div>
</a>
<a
class="link mint-group mint-flex mint-flex-col mint-items-start mint-justify-between mint-rounded-2xl mint-px-6 mint-py-6 mint-bg-white dark:mint-bg-neutral-900/60 mint-border mint-border-gray-200 dark:mint-border-white/10 hover:mint-border-black dark:hover:mint-border-white mint-transition no_external_icon"
href="/docs/api"
>
<div class="mint-flex mint-flex-col mint-items-start mint-gap-3 mint-w-full">
<div class="mint-h-9 mint-w-9 mint-flex mint-items-center mint-justify-center mint-rounded-md">
<span aria-owns="rmiz-modal-50485eb82118" data-rmiz="">
<span data-rmiz-content="not-found" style={{ visibility: "visible" }}>
<img
alt="API References"
class="rounded mint-block dark:mint-hidden mint-h-7 mint-w-7"
src="/docs/images/home/icon2.svg"
/>
</span>
</span>
<span aria-owns="rmiz-modal-9e8b8388ba78" data-rmiz="">
<span data-rmiz-content="found" style={{ visibility: "visible" }}>
<img
alt="API References"
class="rounded mint-hidden dark:mint-block mint-h-7 mint-w-7"
src="/docs/images/home/icon2-dark.svg"
/>
</span>
<span
data-rmiz-ghost=""
style={{ height: "28px", left: "28px", width: "28px", top: "28px" }}
>
<button
aria-label="Expand image: API References"
data-rmiz-btn-zoom=""
type="button"
>
<svg
aria-hidden="true"
data-rmiz-btn-zoom-icon="true"
fill="currentColor"
focusable="false"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z"></path>
</svg>
</button>
</span>
</span>
</div>
<div class="mint-flex mint-items-center mint-justify-between mint-w-full">
<h3 class="font-inter mint-font-medium mint-text-gray-900 dark:mint-text-gray-100 mint-text-xl">
API References
</h3>
<span class="mint-opacity-0 mint-translate-x-2 group-hover:mint-opacity-100 group-hover:mint-translate-x-0 mint-transition-all mint-duration-200 mint-ease-out mint-flex mint-items-center mint-justify-center mint-h-7 mint-w-7 mint-rounded-full mint-bg-black dark:mint-bg-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 256 256"
class="mint-fill-white dark:mint-fill-black"
>
<path d="M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z"></path>
</svg>
</span>
</div>
</div>
</a>
<a
class="link mint-group mint-flex mint-flex-col mint-items-start mint-justify-between mint-rounded-2xl mint-px-6 mint-py-6 mint-bg-white dark:mint-bg-neutral-900/60 mint-border mint-border-gray-200 dark:mint-border-white/10 hover:mint-border-black dark:hover:mint-border-white mint-transition no_external_icon"
href="/docs/libraries"
>
<div class="mint-flex mint-flex-col mint-items-start mint-gap-3 mint-w-full">
<div class="mint-h-9 mint-w-9 mint-flex mint-items-center mint-justify-center mint-rounded-md">
<span aria-owns="rmiz-modal-46c824f18a9d" data-rmiz="">
<span data-rmiz-content="not-found" style={{ visibility: "visible" }}>
<img
alt="SDKs"
class="rounded mint-block dark:mint-hidden mint-h-7 mint-w-7"
src="/docs/images/home/icon3.svg"
/>
</span>
</span>
<span aria-owns="rmiz-modal-2938d4e80768" data-rmiz="">
<span data-rmiz-content="found" style={{ visibility: "visible" }}>
<img
alt="SDKs"
class="rounded mint-hidden dark:mint-block mint-h-7 mint-w-7"
src="/docs/images/home/icon3-dark.svg"
/>
</span>
<span
data-rmiz-ghost=""
style={{ height: "28px", left: "28px", width: "28px", top: "28px" }}
>
<button
aria-label="Expand image: SDKs"
data-rmiz-btn-zoom=""
type="button"
>
<svg
aria-hidden="true"
data-rmiz-btn-zoom-icon="true"
fill="currentColor"
focusable="false"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z"></path>
</svg>
</button>
</span>
</span>
</div>
<div class="mint-flex mint-items-center mint-justify-between mint-w-full">
<h3 class="font-inter mint-font-medium mint-text-gray-900 dark:mint-text-gray-100 mint-text-xl">
SDKs
</h3>
<span class="mint-opacity-0 mint-translate-x-2 group-hover:mint-opacity-100 group-hover:mint-translate-x-0 mint-transition-all mint-duration-200 mint-ease-out mint-flex mint-items-center mint-justify-center mint-h-7 mint-w-7 mint-rounded-full mint-bg-black dark:mint-bg-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 256 256"
class="mint-fill-white dark:mint-fill-black"
>
<path d="M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z"></path>
</svg>
</span>
</div>
</div>
</a>
</div>
Loading