diff --git a/main/docs/css/styles.css b/main/docs/css/styles.css index 59d02fff6..56e30d22a 100644 --- a/main/docs/css/styles.css +++ b/main/docs/css/styles.css @@ -455,6 +455,14 @@ ul.flex.items-center > li > a[href*="/u/login"] { justify-content: space-between; } +a.libraries_card { + border-bottom: 1px solid rgb(229 231 235 / var(--tw-border-opacity)) !important; +} + +.dark a.libraries_card { + border-bottom: 1px solid rgb(31 41 55 / var(--tw-border-opacity)) !important; +} + .libraries_card:hover { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); } diff --git a/main/docs/fr-ca/quickstarts.mdx b/main/docs/fr-ca/quickstarts.mdx index 0ef91f05e..6f431ec72 100644 --- a/main/docs/fr-ca/quickstarts.mdx +++ b/main/docs/fr-ca/quickstarts.mdx @@ -16,56 +16,50 @@ Guides pas-à-pas pour intégrer Auth0 rapidement dans votre application ## Popular - - - - - + + + + + + + + + ## Application à page unique @@ -73,410 +67,367 @@ Guides pas-à-pas pour intégrer Auth0 rapidement dans votre application Application Web JavaScript qui s’exécute dans le navigateur - - - - - - + + + + + + + + + + + + + ## Application Web classique Application Web classique qui s’exécute sur le serveur - - + + - - - - - - - - - - - - - - - ## Application native/mobile Application mobile ou de bureau à exécution native - - - - - - - - - - - - - - - @@ -485,113 +436,93 @@ Application mobile ou de bureau à exécution native Une API ou un service protégé par Auth0 - - - - - - - - - - diff --git a/main/docs/ja-jp/quickstarts.mdx b/main/docs/ja-jp/quickstarts.mdx index 5dce15664..e15ea8a71 100644 --- a/main/docs/ja-jp/quickstarts.mdx +++ b/main/docs/ja-jp/quickstarts.mdx @@ -17,56 +17,50 @@ import {SectionCard} from "/snippets/SectionsWithCards.jsx"; ## Popular - - - - - + + + + + + + + + ## シングルページアプリ @@ -74,239 +68,227 @@ import {SectionCard} from "/snippets/SectionsWithCards.jsx"; ブラウザー内で動作するJavaScript Webアプリ - - - - - + + + + + + + + + + + + + - ## 通常のWebアプリ サーバー上で動作する従来型のWebアプリ - + + - - - - - - - - - - - - - - - @@ -316,169 +298,139 @@ import {SectionCard} from "/snippets/SectionsWithCards.jsx"; デバイス上でネイティブに動作するモバイルまたはデスクトップのアプリ - - - - - - - - - - - - - - - @@ -487,113 +439,93 @@ import {SectionCard} from "/snippets/SectionsWithCards.jsx"; Auth0で保護されたAPIまたはサービス - - - - - - - - - - diff --git a/main/docs/quickstarts.mdx b/main/docs/quickstarts.mdx index 7122afb56..420f6f248 100644 --- a/main/docs/quickstarts.mdx +++ b/main/docs/quickstarts.mdx @@ -9,9 +9,8 @@ sidebarTitle: Quickstarts of application in minutes. 'twitter:title': Auth0 --- -import {QuickstartPage, QuickstartBanner} from "/snippets/QuickstartPage.mdx"; -import {SectionCard} from "/snippets/SectionsWithCards.jsx"; +import {QuickstartCard} from "/snippets/SectionsWithCards.jsx"; Step-by-step guides to quickly integrate Auth0 into your application @@ -20,145 +19,118 @@ Step-by-step guides to quickly integrate Auth0 into your application Quickstarts for popular frameworks - - - - - - - - ## Single Page App JavaScript web app that runs in the browser - - - - - - - @@ -167,365 +139,298 @@ JavaScript web app that runs in the browser Traditional web app that runs on the server - - - - - - - - - - - - - - - - - - - - ## Native/Mobile App Mobile or Desktop app that runs natively on a device - - - - - - - - - - - - - - - @@ -534,113 +439,93 @@ Mobile or Desktop app that runs natively on a device An API or service protected by Auth0 - - - - - - - - - - diff --git a/main/snippets/SectionsWithCards.jsx b/main/snippets/SectionsWithCards.jsx index 79913b5fe..b9c0948bd 100644 --- a/main/snippets/SectionsWithCards.jsx +++ b/main/snippets/SectionsWithCards.jsx @@ -1,362 +1,5 @@ -export const SectionsWithCards = ({ sections }) => { - const [query, setQuery] = useState(""); - - const filteredSections = sections - .map((s) => ({ - ...s, - items: s.items.filter((it) => it.name.toLowerCase().includes(query.toLowerCase())), - })) - .filter((s) => s.items.length > 0); - - const getLink = (item, label) => item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); - - const Card = ({ item }) => { - const github = getLink(item, "github"); - const sample = getLink(item, "sample app"); - const quickstart = getLink(item, "quickstart"); - const docs = getLink(item, "documentation"); - - const title = item?.name ?? ""; - const subtext = item?.subtext ?? ""; - const badge = item?.badge ?? ""; - const date = item?.date ?? ""; // plain string like "Jan 16, 2024" - - const tertiary = quickstart || docs; - const tertiaryLabel = quickstart ? "Quickstart" : docs ? "Documentation" : ""; - - return ( -
-
-
-
- {item?.logo && ( - {title} - )} - -
-

- {title} -

- {!!subtext &&

{subtext}

} -
-
- -
- {!!badge && ( - - {badge} - - )} - - {!!date && ( - on {date.replace(/^on\s+/i, "")} - )} -
-
-
- -
- -
-
- {github && ( - - - Github - - )} - - {sample && ( - - - Sample App - - )} - - {tertiary && ( - - - {tertiaryLabel} - - )} -
-
-
- ); - }; - - return ( -
-
-
-
-
-
- - - - -
- setQuery(e.target.value)} - className=" - w-full border-0 bg-transparent pl-10 pr-10 py-2.5 - placeholder:text-gray-400 focus:outline-none text-sm - dark:placeholder:text-gray-500 - " - /> - {query && ( - - )} -
-
-
- - {filteredSections.length === 0 ? ( -

No results for “{query}”.

- ) : ( - filteredSections.map((section) => ( -
-

{section.title}

-

{section.description}

- -
- {section.items.map((it, idx) => ( - - ))} -
-
- )) - )} -
-
- ); -}; - -export const LibrariesCards = ({ cards }) => { - const getLink = (item, label) => item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); - - const Card = ({ item }) => { - const github = getLink(item, "github"); - const sample = getLink(item, "sample app"); - const quickstart = getLink(item, "quickstart"); - const docs = getLink(item, "Get started"); - - const title = item?.name ?? ""; - const subtext = item?.subtext ?? ""; - const badge = item?.badge ?? ""; - const date = item?.date ?? ""; // plain string like "Jan 16, 2024" - - const tertiary = quickstart || docs; - const tertiaryLabel = quickstart ? "Quickstart" : docs ? "Get started" : ""; - - return ( - - ); - }; - - return ( -
- {cards.map((it, idx) => ( - - ))} -
- ); -}; - export const SectionCard = ({ item }) => { - const getLink = (item, label) => item.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); + const getLink = (item, label) => item?.links?.find((l) => l.label?.toLowerCase() === label.toLowerCase()); const github = getLink(item, "github"); const sample = getLink(item, "sample app"); const quickstart = getLink(item, "quickstart"); @@ -391,8 +34,8 @@ export const SectionCard = ({ item }) => {
{item?.logo && ( <> - {title} - {title} + {title} + {title} )} @@ -494,3 +137,85 @@ export const SectionCard = ({ item }) => { ); }; + +export const QuickstartCard = ({ item }) => { + const title = item?.name ?? ""; + const subtext = item?.subtext ?? ""; + const badge = item?.badge ?? ""; + const date = item?.date ?? ""; + const link = item?.link ?? ""; + + const isHttpsLogo = typeof item?.logo === "string" && /^https:\/\//i.test(item.logo); + + const src = isHttpsLogo ? item.logo : `/docs/images/icons/light/${item?.logo}`; + const srcDark = isHttpsLogo ? item.logo : `/docs/images/icons/dark/${item?.logo}`; + + // Add grayscale class only if https + const imgClass = "!my-0 w-8 h-8 object-contain shrink-0 " + (isHttpsLogo ? "mint-filter mint-grayscale" : ""); + + return ( + +
+
+
+
+ {item?.logo && ( + <> + {title} + {title} + + )} + +
+

+ {title} +

+ {!!subtext && ( +

{subtext}

+ )} +
+
+ +
+ {!!badge && ( + + {badge} + + )} + {!!date && ( + + on {date.replace(/^on\s+/i, "")} + + )} +
+
+
+ +
+ +
+
+
+ + Quickstart +
+
+
+
+ + ); +};