From b1c057097b3bc32d623bb13a2e98e9a4bbc43fdb Mon Sep 17 00:00:00 2001 From: Wassim Bougarfa <12980387+wassimoo@users.noreply.github.com> Date: Wed, 21 Jan 2026 17:31:17 +0100 Subject: [PATCH 1/4] feat: redesign welcome page --- src/components/OryHeroDemo.jsx | 79 +- .../DeploymentAndFrameworkSection.tsx | 804 ++++++++++++++++++ .../welcomePage/HowToUseSection.tsx | 176 ++++ src/components/welcomePage/OtherGuides.tsx | 224 +++++ src/components/welcomePage/StartHeading.tsx | 39 + src/components/welcomePage/StepBadge.tsx | 35 + src/components/welcomePage/tokens.ts | 70 ++ src/css/theme.css | 422 +++++++++ src/navbar.ts | 125 +-- src/pages/welcome.module.css | 213 +++++ src/pages/welcome.tsx | 564 +----------- src/static/img/background-pattern.png | Bin 0 -> 606 bytes src/static/img/icons/copy.svg | 3 + src/static/img/icons/go.svg | 3 + src/static/img/icons/nextjs.svg | 3 + src/static/img/icons/terminal.svg | 3 + src/static/img/icons/typescript.svg | 3 + src/static/img/icons/vue.svg | 3 + src/static/img/logos/ory-logo.svg | 7 + 19 files changed, 2035 insertions(+), 741 deletions(-) create mode 100644 src/components/welcomePage/DeploymentAndFrameworkSection.tsx create mode 100644 src/components/welcomePage/HowToUseSection.tsx create mode 100644 src/components/welcomePage/OtherGuides.tsx create mode 100644 src/components/welcomePage/StartHeading.tsx create mode 100644 src/components/welcomePage/StepBadge.tsx create mode 100644 src/components/welcomePage/tokens.ts create mode 100644 src/pages/welcome.module.css create mode 100644 src/static/img/background-pattern.png create mode 100644 src/static/img/icons/copy.svg create mode 100644 src/static/img/icons/go.svg create mode 100644 src/static/img/icons/nextjs.svg create mode 100644 src/static/img/icons/terminal.svg create mode 100644 src/static/img/icons/typescript.svg create mode 100644 src/static/img/icons/vue.svg create mode 100644 src/static/img/logos/ory-logo.svg diff --git a/src/components/OryHeroDemo.jsx b/src/components/OryHeroDemo.jsx index c42c861b19..ec3a4bb6bf 100644 --- a/src/components/OryHeroDemo.jsx +++ b/src/components/OryHeroDemo.jsx @@ -7,68 +7,7 @@ const OryHeroDemo = () => { const terminalRef = useRef(null) const script = [ - // CLI setup - { type: "comment", text: "# One-time project setup via Ory CLI", delay: 0 }, - { type: "command", text: "brew install ory/tap/cli", delay: 300 }, - { type: "output", text: "Installing ory...", delay: 500 }, - { type: "success", text: "✓ Installed", delay: 600 }, - { type: "command", text: "ory auth", delay: 400 }, - { - type: "output", - text: "Opening browser to create your Ory developer account...", - delay: 500, - }, - { type: "success", text: "✓ Authenticated as ", delay: 700 }, - { type: "command", text: 'ory create project --name "MyApp"', delay: 400 }, - { type: "output", text: "Project slug: myapp-abc123", delay: 600 }, - { type: "success", text: "✓ Project created", delay: 200 }, - - // API registration - { type: "comment", text: "# Register a user via Ory API", delay: 600 }, - { - type: "note", - text: "Note: Traits depend on your identity schema. This sample uses Ory's 'username' preset schema.", - delay: 400, - }, - { type: "command", text: "curl -s -X GET \\", delay: 300 }, - { - type: "command-cont", - text: ' "https://.projects.oryapis.com/self-service/registration/api"', - delay: 100, - }, - { - type: "output", - text: '{ "id": "", "type": "api", "expires_at":"...","issued_at":"...","request_url":"/self-service/registration/api","ui":{"action":".projects.oryapis.com/self-service/registration?flow=","method":"POST", ... } }', - delay: 500, - }, - { type: "command", text: "curl -s -X POST \\", delay: 400 }, - { - type: "command-cont", - text: ' -H "Content-Type: application/json" \\', - delay: 100, - }, - { - type: "command-cont", - text: ' -d \'{"traits":{"username":""},"password":"","method":"password"}\' \\', - delay: 100, - }, - { - type: "command-cont", - text: ' "https://.projects.oryapis.com/self-service/registration?flow="', - delay: 100, - }, - { - type: "output", - text: '{"identity":{"id":"...","schema_id":"preset://username","schema_url":".projects.oryapis.com/schemas/cHJlc2V0Oi8vdXNlcm5hbWU","state":"active", ... } }', - delay: 600, - }, - { type: "success", text: "✓ User registered!", delay: 400 }, - { - type: "link", - text: "Create your free project via Ory Console →", - url: "https://console.ory.sh/", - delay: 300, - }, + { type: "command", text: "npm install @ory/elements-react @ory/nextjs", delay: 300 }, ] const runDemo = async () => { @@ -255,8 +194,7 @@ const OryHeroDemo = () => { {/* Initial prompt when empty */} {lines.length === 0 && !isRunning && (
- $ From zero to registered user - in minutes! Click 'Run'. + ${" "}
)} @@ -320,21 +258,10 @@ const OryHeroDemo = () => { ...(isRunning ? styles.runButtonDisabled : styles.runButton), }} > - {isRunning ? "Running..." : hasRun ? "Run Again" : "Run"} + Try it - {hasRun && !isRunning && ( - - )} - - {/* Caption */} -

From zero to registered user in minutes.

) } diff --git a/src/components/welcomePage/DeploymentAndFrameworkSection.tsx b/src/components/welcomePage/DeploymentAndFrameworkSection.tsx new file mode 100644 index 0000000000..a11fa65c44 --- /dev/null +++ b/src/components/welcomePage/DeploymentAndFrameworkSection.tsx @@ -0,0 +1,804 @@ +import React, { useState } from "react" +import Link from "@docusaurus/Link" +import Mermaid from "@theme/Mermaid" +import IconTerminal from "@site/src/static/img/icons/terminal.svg" +import IconTypescript from "@site/src/static/img/icons/typescript.svg" +import IconNextjs from "@site/src/static/img/icons/nextjs.svg" +import IconVue from "@site/src/static/img/icons/vue.svg" +import IconGo from "@site/src/static/img/icons/go.svg" +import IconCopy from "@site/src/static/img/icons/copy.svg" +import { StepBadge } from "./StepBadge" +import { colors, radius, spacing, typography } from "./tokens" + +const MermaidAny = Mermaid as any + +export function DeploymentAndFrameworkSection() { + type FrameworkValue = "typescript" | "nextjs" | "vue" | "go" + const [selectedFramework, setSelectedFramework] = + useState("nextjs") + + const cards = [ + { + label: "Ory Network", + description: + "Managed identity, OAuth2/OIDC, and permissions. Best choice for new projects.", + to: "/network/getting-started", + tags: ["Cloud", "Multi-region", "Production ready"], + }, + { + label: "Ory Enterprise License", + description: + "Self-host Ory with enterprise support, SLAs, and advanced compliance options.", + to: "/oel/getting-started", + tags: ["Self-hosted", "Enterprise"], + }, + { + label: "Open Source", + description: + "Use the individual Ory projects directly and run everything yourself.", + to: "/oss/getting-started", + tags: ["Open Source", "Multi-region"], + }, + ] + + const langs: Array<{ + value: FrameworkValue + label: string + Icon: React.ComponentType> + snippet: string + }> = [ + { + value: "typescript", + label: "Typescript", + Icon: IconTypescript as React.ComponentType< + React.SVGProps + >, + snippet: `npm install @ory/elements-react @ory/nextjs`, + }, + { + value: "nextjs", + label: "Next.js", + Icon: IconNextjs as React.ComponentType>, + snippet: `npm install @ory/elements-react @ory/nextjs`, + }, + { + value: "vue", + label: "Vue", + Icon: IconVue as React.ComponentType>, + snippet: `npm install @ory/elements-react @ory/nextjs`, + }, + { + value: "go", + label: "Go", + Icon: IconGo as React.ComponentType>, + snippet: `npm install @ory/elements-react @ory/nextjs`, + }, + ] + + const selectedLang = langs.find((l) => l.value === selectedFramework) ?? langs[1] + const selectedSnippet = selectedLang.snippet + const snippetPrefix = selectedSnippet.startsWith("npm install ") + ? "npm install " + : "" + const snippetRest = snippetPrefix + ? selectedSnippet.slice(snippetPrefix.length) + : selectedSnippet + + return ( +
+
+
+ {/* Choose a deployment option */} +
+
+ +

+ Choose a deployment option +

+

+ Choose the deployment option that fits your organization and + build secure IAM into your apps. You can switch later — the core + concepts stay the same. +

+
+ +
+ {cards.map((card) => ( +
+
+
+

+ {card.label} +

+

+ {card.description} +

+
+
+ {card.tags.map((tag) => { + const isCloud = tag === "Cloud" + const isEnterprise = tag === "Enterprise" + return ( + + {tag} + + ) + })} +
+ + Learn more + + → + + +
+
+ ))} +
+
+ + {/* Design your Ory solution */} +
+
+ +

+ Design your Ory solution +

+

+ The following steps will help us tailor a better developer + experience for you +

+
+ +
+
+
+
+ API Endpoint 2" } + +User --> Devices +Devices --> Oathkeeper +Oathkeeper -->|protects| API +Oathkeeper -->|authenticates credentials with| Hydra +User -->|Registers, log in,
manages profile via API| Kratos +User -->|Registers, logs in,
manages profile via prebuilt UI| Elements +Elements --> Kratos +Elements --> Hydra +Oathkeeper -->|checks session with| Kratos +Oathkeeper -->|checks permissions with| Keto +Devices --> API +API -->|OAuth2| Hydra +API -->|Checks session with| Kratos +API -->|Checks permissions with| Keto +Kratos -->|OIDC| Polis + +style Kratos fill:transparent,stroke:none +style Hydra fill:transparent,stroke:none +style Keto fill:transparent,stroke:none +style Polis fill:transparent,stroke:none +style Oathkeeper fill:transparent,stroke:none +style Elements fill:transparent,stroke:none`} + /> + + +
+
+
+ +
+
+ + Step 1 out of 6 + +
+ +
+
+

+ Do you need identity management (user registration, profile + management)? +

+
+ +
+
+ {[ + { + value: "yes", + label: "Yes, I need an identity system", + key: "1", + }, + { + value: "no", + label: "No, I have an existing identity system", + key: "2", + }, + { value: "idk", label: "I don’t know", key: "3" }, + ].map((option) => ( + + ))} +
+
+
+
+ +
+ + Create a architecture diagram based on your requirements + + +
+
+
+ + {/* Select your framework or language */} +
+
+ +

+ Select your framework or language +

+

+ Drop Ory into an existing app. Pick your stack and follow the + step-by-step integration guides. +

+
+ +
+
+
+ +
+ +
+ {langs.map((lang) => { + const active = lang.value === selectedFramework + const LangIcon = lang.Icon + const iconStroke = active + ? colors.brandOnTertiary + : colors.textPrimary + return ( + + ) + })} +
+ + +
+ +
+ + 1 + + + {snippetPrefix ? ( + <> + + {snippetPrefix} + + + {snippetRest} + + + ) : ( + + {selectedSnippet} + + )} + +
+
+
+
+
+
+ ) +} + diff --git a/src/components/welcomePage/HowToUseSection.tsx b/src/components/welcomePage/HowToUseSection.tsx new file mode 100644 index 0000000000..310c596768 --- /dev/null +++ b/src/components/welcomePage/HowToUseSection.tsx @@ -0,0 +1,176 @@ +import React from "react" +import Link from "@docusaurus/Link" +import { colors, spacing, typography } from "./tokens" +import styles from "@site/src/pages/welcome.module.css" + +export function HowToUseSection() { + const guides = [ + { + title: "Want to learn more about a specific product suite or solution?", + description: "Go directly to product and solution specific information.", + links: [ + { label: "Products", to: "/products/products-overview" }, + { label: "Solutions", to: "/solutions/solutions-overview" }, + ], + }, + { + title: "Want to start coding and need an example?", + description: "Want to start coding and need an example?", + links: [{ label: "Quickstarts", to: "/getting-started/overview" }], + }, + { + title: "Want to find the right API to use?", + description: "Go directly to the REST API, SDKs, or CLI references.", + links: [{ label: "Reference", to: "/reference/reference-overview" }], + }, + ] + + return ( +
+
+
+

+ How to use the Ory Developer Portal +

+

+ Not sure where to start? Follow our guided paths—structured journeys + that walk you through Ory's products and solutions so you can learn + and build faster. +

+
+ +
+ {guides.map((guide, index) => ( +
+
+

+ {guide.title} +

+

+ {guide.description} +

+
+
+ {guide.links.map((link, linkIndex) => ( + + {link.label} + + → + + + ))} +
+
+ ))} +
+
+
+ ) +} + diff --git a/src/components/welcomePage/OtherGuides.tsx b/src/components/welcomePage/OtherGuides.tsx new file mode 100644 index 0000000000..5a2cceff13 --- /dev/null +++ b/src/components/welcomePage/OtherGuides.tsx @@ -0,0 +1,224 @@ +import React from "react" +import Link from "@docusaurus/Link" +import { colors, radius, spacing, typography } from "./tokens" + +export function OtherGuides() { + const guides = [ + { + label: "Installl from green-field", + to: "/getting-started/overview", + description: "What Ory Identities (Kratos) is and when to use it", + }, + { + label: "Migrate to Ory", + to: "/kratos/self-service/flows/user-login-user-registration", + description: "Day 1 essentials for browser-based authentication", + }, + { + label: "Ory Architecture", + to: "/kratos/self-service/flows/user-login-user-registration", + description: "What Ory Identities (Kratos) is and when to use it", + tags: ["Ory / Kratos", "Tutorial"], + }, + ] + + return ( +
+
+
+

+ Other guides +

+

+ Not sure where to start? Follow our guided paths—structured journeys + that walk you through Ory's products and solutions so you can learn + and build faster. +

+
+ +
+
+ {guides.slice(0, 2).map((guide) => ( +
+
+
+
+

+ + {guide.label} + +

+

+ {guide.description} +

+
+
+ ))} +
+
+ {guides.slice(2).map((guide) => ( +
+
+
+
+
+

+ + {guide.label} + +

+ {guide.tags?.map((tag) => ( + + {tag} + + ))} +
+

+ {guide.description} +

+
+
+ ))} +
+
+
+
+ ) +} + diff --git a/src/components/welcomePage/StartHeading.tsx b/src/components/welcomePage/StartHeading.tsx new file mode 100644 index 0000000000..fb18eb14d7 --- /dev/null +++ b/src/components/welcomePage/StartHeading.tsx @@ -0,0 +1,39 @@ +import React from "react" +import OryHeroDemo from "@site/src/components/OryHeroDemo" +import backgroundPattern from "@site/src/static/img/background-pattern.png" +import { colors, spacing } from "./tokens" +import styles from "@site/src/pages/welcome.module.css" + +export function StartHeading() { + return ( +
+
+
+
+

Welcome to the Ory Developer Portal

+

+ Ory gives you authentication, authorization, and user management + APIs designed for modern applications. Start fast, scale to + millions, and keep security best practices baked in. +

+
+
+ +
+
+
+
+ ) +} + diff --git a/src/components/welcomePage/StepBadge.tsx b/src/components/welcomePage/StepBadge.tsx new file mode 100644 index 0000000000..7d87eea4e2 --- /dev/null +++ b/src/components/welcomePage/StepBadge.tsx @@ -0,0 +1,35 @@ +import React from "react" +import { colors, radius, typography } from "./tokens" + +export function StepBadge({ step }: { step: number }) { + return ( +
+ + {step} + +
+ ) +} + diff --git a/src/components/welcomePage/tokens.ts b/src/components/welcomePage/tokens.ts new file mode 100644 index 0000000000..cb6539d1b9 --- /dev/null +++ b/src/components/welcomePage/tokens.ts @@ -0,0 +1,70 @@ +// Shared tokens for `src/pages/welcome.tsx` sections + +export const colors = { + textPrimary: "#0f172a", + textSecondary: "#334155", + textTertiary: "#64748b", + textTertiaryAlt: "#94a3b8", + brandPrimary: "#383bca", + brandPrimaryAlt: "#6366f1", + brandOnPrimary: "#eef", + brandOnTertiary: "#2e3081", + backgroundPrimary: "#ffffff", + backgroundSecondary: "#f8fafc", + backgroundSecondaryHover: "#e2e8f0", + backgroundTertiary: "#e2e8f0", + backgroundDark: "#0f172a", + backgroundDarkSecondary: "#1e293b", + backgroundBrandTertiary: "#e0e1ff", + borderPrimary: "#cbd5e1", + borderDark: "#334155", + borderBrandTertiary: "#6366f1", + borderInfoTertiary: "#0ea5e9", + infoPrimary: "#0ea5e9", + infoSecondary: "#bae6fd", + infoTertiary: "#e0f2fe", + infoOnTertiary: "#0c4a6e", + disabled: "#e2e8f0", + disabledBorder: "#cbd5e1", + disabledText: "#94a3b8", +} as const + +export const spacing = { + size0: "0px", + size0_5: "2px", + size1: "4px", + size1_5: "6px", + size2: "8px", + size2_5: "10px", + size3: "12px", + size4: "16px", + size5: "20px", + size6: "24px", + size8: "32px", + size12: "48px", + size16: "64px", +} as const + +export const typography = { + fontFamily: "Inter, sans-serif", + fontFamilyMono: "JetBrains Mono, monospace", + fontSizeXs: "12px", + fontSizeSm: "14px", + fontSizeBase: "16px", + fontSizeLg: "20px", + fontSizeXl: "24px", + fontSize2xl: "40px", + lineHeightTight: "1.25", + lineHeightNormal: "1.5", + lineHeightRelaxed: "1.65", + fontWeightNormal: "400", + fontWeightMedium: "500", +} as const + +export const radius = { + badge: "6px", + keyboard: "6px", + buttons: "4px", + general: "4px", +} as const + diff --git a/src/css/theme.css b/src/css/theme.css index d5647d7020..61c1799040 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -358,6 +358,321 @@ "calt" 1; /* fix for Chrome */ } +/* ---------------------------- + Navbar (Figma node 5046:5330) + Exact styling from Figma design +----------------------------- */ +:root { + --ory-navbar-height: 48px; + --ory-navbar-bg: #ffffff; + --ory-navbar-border: #cbd5e1; + --ory-navbar-text: #0f172a; + --ory-navbar-link: #0f172a; + --ory-navbar-link-hover: #383bca; + --ory-navbar-font-size: 14px; + --ory-navbar-gap: 24px; + --ory-navbar-left-width: 312px; + --ory-navbar-left-padding-x: 16px; + --ory-navbar-content-padding-left: 32px; + --ory-navbar-right-width: auto; + --ory-navbar-right-gap: 24px; + --ory-search-width: 200px; +} + +.navbar { + height: 48px !important; + min-height: 48px !important; + max-height: 48px !important; + background: var(--ory-navbar-bg); + border-bottom: 1px solid var(--ory-navbar-border); + box-shadow: none; + padding: 0; +} + +.navbar__inner { + height: 100%; + max-width: 1920px; + margin: 0 auto; + display: flex; + gap: 0; + align-items: center; + padding: 0 8px; +} + +/* Left logo section - 312px with borders */ +.navbar__brand { + width: var(--ory-navbar-left-width); + max-width: var(--ory-navbar-left-width); + border-left: 1px solid var(--ory-navbar-border); + border-right: 1px solid var(--ory-navbar-border); + padding: 0 var(--ory-navbar-left-padding-x); + height: 100%; + display: flex; + align-items: center; + flex-shrink: 0; + position: relative; +} + +.navbar__logo { + display: flex; + align-items: center; + gap: 6px; + height: 24px; + flex: 1 0 0; + padding: 4px; +} + +.navbar__logo img { + height: 14.6px; + width: 40.15px; + display: block; + flex-shrink: 0; +} + +.navbar__logo::after { + content: "/ Documentation"; + display: inline-block; + font-family: Inter, sans-serif; + font-size: 20px; + font-weight: 400; + line-height: 1; + flex-shrink: 0; + margin-left: 6px; + white-space: nowrap; + background: linear-gradient( + to right, + #383bca 0, + #383bca 1ch, + var(--ory-navbar-text) 1ch, + var(--ory-navbar-text) 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: var(--ory-navbar-text); +} + +/* Dropdown icon after logo area */ +.navbar__brand::after { + content: ""; + display: block; + width: 16px; + height: 16px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%230f172a' stroke-width='1.5' fill='none' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center; + background-size: contain; + margin-left: 4px; + flex-shrink: 0; +} + +/* Middle nav links */ +.navbar__items { + flex: 1 0 0; + gap: var(--ory-navbar-gap); + font-size: var(--ory-navbar-font-size); + font-weight: 400; + line-height: 1; + color: var(--ory-navbar-text); + padding-left: var(--ory-navbar-content-padding-left); + display: flex; + align-items: center; +} + +.navbar__link { + color: var(--ory-navbar-link); + font-weight: 400; + font-size: 14px; + line-height: 1; + white-space: nowrap; +} + +.navbar__link:hover, +.navbar__link--active { + color: var(--ory-navbar-link-hover); +} + +/* Ensure all navbar items have consistent width */ +.navbar__item { + flex-shrink: 0; + min-width: fit-content; +} + +.navbar__item .navbar__link { + display: inline-block; + width: auto; + min-width: fit-content; +} + +/* Right section - Links and Search */ +.navbar__items--right { + gap: var(--ory-navbar-right-gap); + display: flex; + align-items: center; + flex-shrink: 0; +} + +/* Search input styling from Figma node 5211:5845 */ +.navbar .DocSearch-Button, +.navbar__items--right .DocSearch-Button, +.DocSearch-Button { + width: var(--ory-search-width) !important; + max-width: var(--ory-search-width) !important; + height: auto !important; + min-height: 32px !important; + border: 1px solid var(--ory-navbar-border) !important; + background: #fff !important; + border-radius: 0 !important; + box-shadow: none !important; + color: var(--ory-navbar-text) !important; + font-size: 16px !important; + font-family: Inter, sans-serif !important; + font-weight: 400 !important; + line-height: 1.25 !important; + padding: 0 !important; + padding-left: 4px !important; + padding-right: 12px !important; + display: flex !important; + align-items: center !important; + gap: 0 !important; + flex-shrink: 0 !important; + margin: 0 !important; +} + +.navbar .DocSearch-Button-Placeholder, +.navbar__items--right .DocSearch-Button-Placeholder { + color: #64748b !important; + font-size: 16px !important; + font-family: Inter, sans-serif !important; + font-weight: 400 !important; + padding: 8px !important; + flex: 1 0 0 !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +/* Search icon wrapper - DocSearch uses SVG */ +.navbar .DocSearch-Button .DocSearch-Search-Icon, +.navbar__items--right .DocSearch-Button .DocSearch-Search-Icon, +.navbar .DocSearch-Button svg, +.navbar__items--right .DocSearch-Button svg { + padding: 8px !important; + flex-shrink: 0 !important; + width: 16px !important; + height: 16px !important; + color: var(--ory-navbar-text) !important; + margin: 0 !important; +} + +/* ⌘K keyboard shortcut badge - Figma node 5211:5845 */ +/* Container for keyboard keys */ +.navbar .DocSearch-Button-Key, +.navbar__items--right .DocSearch-Button-Key, +.navbar .DocSearch-Button-Keys, +.navbar__items--right .DocSearch-Button-Keys, +.DocSearch-Button-Key, +.DocSearch-Button-Keys { + background: #e2e8f0 !important; + color: #64748b !important; + border-radius: 6px !important; + box-shadow: none !important; + border: none !important; + height: 20px !important; + min-width: 20px !important; + padding: 0 4px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + font-family: Inter, sans-serif !important; + font-size: 12px !important; + font-weight: 500 !important; + line-height: 1.25 !important; + margin-left: auto !important; + gap: 2px !important; + opacity: 1 !important; + visibility: visible !important; +} + +/* All text content inside keyboard badge - ensure visibility */ +.navbar .DocSearch-Button-Key *, +.navbar__items--right .DocSearch-Button-Key *, +.navbar .DocSearch-Button-Keys *, +.navbar__items--right .DocSearch-Button-Keys *, +.DocSearch-Button-Key *, +.DocSearch-Button-Keys * { + color: #64748b !important; + opacity: 1 !important; + visibility: visible !important; +} + +/* Individual key elements (kbd tags) inside the badge */ +.navbar .DocSearch-Button-Key kbd, +.navbar__items--right .DocSearch-Button-Key kbd, +.navbar .DocSearch-Button-Keys kbd, +.navbar__items--right .DocSearch-Button-Keys kbd, +.DocSearch-Button-Key kbd, +.DocSearch-Button-Keys kbd, +.navbar .DocSearch-Button-Key > kbd, +.navbar__items--right .DocSearch-Button-Key > kbd, +.navbar .DocSearch-Button-Keys > kbd, +.navbar__items--right .DocSearch-Button-Keys > kbd { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + margin: 0 !important; + font-family: Inter, sans-serif !important; + font-size: 12px !important; + font-weight: 500 !important; + line-height: 1.25 !important; + color: #64748b !important; + min-width: auto !important; + height: auto !important; + display: inline !important; + opacity: 1 !important; + visibility: visible !important; +} + +/* Text/span elements inside the keyboard badge */ +.navbar .DocSearch-Button-Key span, +.navbar__items--right .DocSearch-Button-Key span, +.navbar .DocSearch-Button-Keys span, +.navbar__items--right .DocSearch-Button-Keys span, +.DocSearch-Button-Key span, +.DocSearch-Button-Keys span, +.navbar .DocSearch-Button-Key > span, +.navbar__items--right .DocSearch-Button-Key > span, +.navbar .DocSearch-Button-Keys > span, +.navbar__items--right .DocSearch-Button-Keys > span { + font-family: Inter, sans-serif !important; + font-size: 12px !important; + font-weight: 500 !important; + line-height: 1.25 !important; + color: #64748b !important; + display: inline !important; + opacity: 1 !important; + visibility: visible !important; +} + +/* Direct text content and any other elements */ +.navbar .DocSearch-Button-Key, +.navbar__items--right .DocSearch-Button-Key, +.navbar .DocSearch-Button-Keys, +.navbar__items--right .DocSearch-Button-Keys { + text-align: center !important; + white-space: nowrap !important; + color: #64748b !important; +} + +/* Ensure text nodes are visible */ +.navbar .DocSearch-Button-Key::before, +.navbar__items--right .DocSearch-Button-Key::before, +.navbar .DocSearch-Button-Keys::before, +.navbar__items--right .DocSearch-Button-Keys::before { + display: none !important; +} + + + @supports (font-variation-settings: normal) { :root { --ifm-font-family-base: InterVariable, var(--ifm-font-family-base-fallback); @@ -564,3 +879,110 @@ svg[class*="iconExternalLink"] { transform: scale(0.667) !important; transform-origin: center center !important; } + +/* Code sample tabs styling for welcome page */ +.tabs-container[data-group-id="language-quickstarts"] .tabs { + display: flex; + gap: 0; + margin-bottom: 16px; + padding-left: 0; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item { + background: #ffffff; + border: 1px solid #cbd5e1; + border-right: none; + border-radius: 0; + padding: 10px 16px; + display: inline-flex; + align-items: center; + gap: 12px; + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: #0f172a; + cursor: pointer; + transition: none; + border-bottom: 3px solid transparent; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item:last-child { + border-right: 1px solid #cbd5e1; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item:hover { + background-color: #ffffff; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item--active { + background: #e0e1ff; + border-color: #6366f1; + border-right: 1px solid #6366f1; + color: #2e3081; + border-bottom-color: #6366f1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + z-index: 1; + position: relative; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item--active:hover { + background-color: #e0e1ff; +} + +/* Override CodeBlock background in code sample tabs */ +.tabs-container[data-group-id="language-quickstarts"] ~ * [class*="theme-code-block"], +.tabs-container[data-group-id="language-quickstarts"] [class*="theme-code-block"], +.tabs-container[data-group-id="language-quickstarts"] pre, +.tabs-container[data-group-id="language-quickstarts"] code { + background: #ffffff !important; + border: none !important; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item > div > div:last-child { + background: #ffffff !important; + border: none !important; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item > div > div:last-child code { + background: transparent !important; + border: none !important; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item > div > div:last-child span { + background: transparent !important; + border: none !important; +} + +.tabs-container[data-group-id="language-quickstarts"] .tabs__item > div > div:last-child * { + border: none !important; +} + +/* Override Docusaurus styles for code sample body in framework selection section */ +.code-sample-body { + background: #ffffff !important; + border: 1px solid #cbd5e1 !important; +} + +.code-sample-body code { + background: transparent !important; + border: none !important; + padding: 0 !important; + font-family: "JetBrains Mono", monospace !important; + font-size: 14px !important; + line-height: 1.65 !important; + color: #0f172a !important; +} + +.code-sample-body code span { + background: transparent !important; + border: none !important; + padding: 0 !important; +} + +.code-sample-body span { + background: transparent !important; + border: none !important; + padding: 0 !important; +} diff --git a/src/navbar.ts b/src/navbar.ts index 2ff779fe1b..839aa25b36 100644 --- a/src/navbar.ts +++ b/src/navbar.ts @@ -7,11 +7,11 @@ export const navbar: Navbar = { hideOnScroll: false, logo: { alt: "Ory", - src: `/docs/img/logos/logo-docs-2023-02-15.svg`, - srcDark: `/docs/img/logos/logo-docs-dark-2023-02-15.svg`, + src: `/docs/img/logos/ory-logo.svg`, + srcDark: `/docs/img/logos/ory-logo.svg`, href: `https://www.ory.com`, - width: 63, - height: 32, + width: 44, + height: 16, }, items: [ @@ -27,129 +27,36 @@ export const navbar: Navbar = { position: "left", }, { - type: "dropdown", - to: "products/products-overview", + type: "doc", + docId: "products/products-overview", label: "Products", position: "left", - items: [ - { - type: "doc", - docId: "network/getting-started/index", - label: "Ory Network", - }, - { - type: "doc", - docId: "oel/getting-started/index", - label: "Ory Enterprise License", - }, - { - type: "doc", - docId: "oss/getting-started/index", - label: "Ory Open Source", - }, - ], }, { - type: "dropdown", - to: "/docs/solutions/solutions-overview", + type: "doc", + docId: "solutions/solutions-overview", label: "Solutions", position: "left", - items: [ - { - type: "doc", - docId: "solutions/solution_CIAM", - label: "CIAM", - }, - { - type: "doc", - docId: "solutions/solution_B2B", - label: "B2B IAM", - }, - { - type: "doc", - docId: "solutions/solution_agentic", - label: "Agentic IAM", - }, - ], }, - { - type: "dropdown", - to: "/docs/reference/reference-overview", + type: "doc", + docId: "reference/reference-overview", label: "Reference", position: "left", - items: [ - { - to: "/docs/reference/api", - label: "REST API", - }, - { - to: "/docs/category/ory-cli-reference", - label: "Ory CLI", - }, - { - to: "/docs/sdk", - label: "Ory SDKs", - }, - { - to: "/docs/category/operations-reference", - label: "Operations", - }, - ], }, { - label: "Change Log", + label: "Change log", + to: "/docs/ecosystem/changelog", position: "left", - items: [ - { - to: "https://changelog.ory.com/?categories=cat_6MGGeXN7WohDH", - label: "Ory Network", - }, - { - to: "https://changelog.ory.com/?categories=cat_s3C6qgDr7FEyo%2Ccat_n9fSarZSCxDTl%2Ccat_ZTXuym1ZfOYZx%2Ccat_YZLKJTlx35HVW", - label: "Ory OEL", - }, - - { - to: "/docs/oss/changelog", - label: "Ory OSS", - }, - ], }, { - label: "Need Support?", + label: "Need support?", + href: "https://www.ory.com/support", position: "right", - items: [ - { - to: "https://www.ory.com/support", - label: "Enterprise Support", - }, - { - to: "https://www.ory.com/docs/search", - label: "Search the docs", - }, - { - to: "https://www.ory.com/chat", - label: "Ory Community Slack", - }, - { - to: "https://github.com/orgs/ory/discussions", - label: "GitHub Discussions", - }, - { - to: "https://stackoverflow.com/questions/tagged/ory", - label: "Stack Overflow", - }, - { - to: "https://www.ory.com/contact", - label: "Schedule a discovery call", - }, - ], }, - { - href: `https://github.com/ory`, - label: "GitHub", + label: "Github", + href: "https://github.com/ory", position: "right", }, ], diff --git a/src/pages/welcome.module.css b/src/pages/welcome.module.css new file mode 100644 index 0000000000..beadfa3760 --- /dev/null +++ b/src/pages/welcome.module.css @@ -0,0 +1,213 @@ + :root { + /* Local page tokens from Figma node 4994:5842/6425 */ + --home-text-primary: #0f172a; + --home-text-secondary: #334155; + --home-text-tertiary: #64748b; + --home-text-tertiary-alt: #94a3b8; + --home-brand-primary: #383bca; + --home-brand-primary-alt: #6366f1; + --home-brand-on-primary: #eef; + --home-brand-on-tertiary: #2e3081; + + --home-bg-primary: #fff; + --home-bg-secondary: #f8fafc; + --home-bg-secondary-hover: #e2e8f0; + --home-bg-tertiary: #e2e8f0; + --home-bg-dark: #0f172a; + --home-bg-dark-secondary: #1e293b; + --home-bg-brand-tertiary: #e0e1ff; + + --home-border-primary: #cbd5e1; + --home-border-dark: #334155; + --home-border-brand-tertiary: #6366f1; + --home-border-info-tertiary: #0ea5e9; + + --home-info-primary: #0ea5e9; + --home-info-tertiary: #e0f2fe; + --home-info-on-tertiary: #0c4a6e; + + --home-disabled: #e2e8f0; + --home-disabled-border: #cbd5e1; + --home-disabled-text: #94a3b8; + + --home-radius: 6px; + + --home-s0: 0px; + --home-s0_5: 2px; + --home-s1: 4px; + --home-s1_5: 6px; + --home-s2: 8px; + --home-s2_5: 10px; + --home-s3: 12px; + --home-s4: 16px; + --home-s5: 20px; + --home-s6: 24px; + --home-s12: 48px; + --home-s16: 64px; +} + +.container1024 { + max-width: 1024px; +} +.heroTop { + padding-top: var(--home-s16); + padding-bottom: 0; + background-size: auto auto, 208px 112px; + background-position: top left; +} +.heroRow { + display: flex; + gap: var(--home-s6); + align-items: center; + margin-bottom: var(--home-s6); +} +.heroCopy { + flex: 1 0 0; + display: flex; + flex-direction: column; + gap: var(--home-s6); +} +.h1 { + font-family: Inter, sans-serif; + font-size: 40px; + font-weight: 400; + line-height: 1.25; + color: var(--home-text-primary); + margin: 0; +} +.pBase { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: var(--home-text-secondary); + margin: 0; +} +.sectionTitle { + font-family: Inter, sans-serif; + font-size: 24px; + font-weight: 400; + line-height: 1.5; + color: var(--home-text-primary); + margin: 0; +} +.sectionSubtitle { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: var(--home-text-secondary); + margin: 0; +} +.guidesGrid { + display: flex; + gap: var(--home-s6); + margin-bottom: var(--home-s6); +} +.guideCard { + flex: 1 0 0; + background: var(--home-bg-primary); + border-radius: var(--home-radius); + padding: var(--home-s6); + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 325px; +} +.guideTitle { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.25; + color: var(--home-text-primary); + margin: 0; +} +.guideDesc { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: var(--home-text-tertiary); + margin: 0; +} +.linkArrow { + display: inline-flex; + gap: var(--home-s1); + align-items: center; + text-decoration: none; + color: var(--home-brand-primary); + font-family: Inter, sans-serif; + font-size: 16px; + line-height: 1.5; +} +.deploymentSection { + padding-top: var(--home-s16); + padding-bottom: var(--home-s16); +} +.deployGrid { + display: flex; + gap: var(--home-s3); +} +.deployCard { + flex: 1 0 0; + background: var(--home-bg-primary); + border: 1px solid var(--home-border-primary); + overflow: hidden; + display: flex; + flex-direction: column; +} +.deployBody { + display: flex; + flex-direction: column; + gap: var(--home-s6); + padding: var(--home-s6); +} +.badge { + background: var(--home-bg-tertiary); + padding: var(--home-s0_5) var(--home-s2); + border-radius: var(--home-radius); + font-family: Inter, sans-serif; + font-size: 12px; + line-height: 1.5; + color: var(--home-text-secondary); +} +.deployFooter { + background: var(--home-bg-secondary); + border-top: 1px solid var(--home-border-primary); + padding: var(--home-s3) var(--home-s6); +} +.setupSection { + padding-top: var(--home-s16); + padding-bottom: var(--home-s16); + background: var(--home-bg-secondary); +} +.uxContainer { + background: var(--home-bg-primary); + border: 1px solid var(--home-border-primary); + overflow: hidden; +} +.tabsPanel { + background: var(--home-bg-secondary-hover); + border: 1px solid var(--home-border-primary); + display: flex; + flex-direction: column; +} +.tabsPanelHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--home-s2) var(--home-s4); +} +.tabsPanelBody { + background: var(--home-bg-secondary); + border-top: 1px solid var(--home-border-primary); + padding: var(--home-s6); +} +.infoBox { + background: var(--home-info-tertiary); + border: 1px solid var(--home-border-info-tertiary); + padding: var(--home-s6); + display: flex; + gap: var(--home-s6); + align-items: center; +} diff --git a/src/pages/welcome.tsx b/src/pages/welcome.tsx index 481e0419c1..7d102a963a 100644 --- a/src/pages/welcome.tsx +++ b/src/pages/welcome.tsx @@ -1,566 +1,18 @@ -// src/pages/welcome.tsx - import React from "react" import Layout from "@theme/Layout" -import Link from "@docusaurus/Link" -import CodeBlock from "@theme/CodeBlock" -import Tabs from "@theme/Tabs" -import TabItem from "@theme/TabItem" -import OryHeroDemo from "@site/src/components/OryHeroDemo" -import heroBg from "@site/src/static/img/background_image2.png" -import { ProductSelectorStepper } from "./_assets/product-selector-stepper" - -function StartHeading() { - const guides = [ - { - to: "/products", - }, - { - to: "/quickstarts", - }, - { - to: "/reference", - }, - ] - - return ( -
-
-
-

Welcome to the Ory Developer Portal

-
- - {/* Intro text and demo in two columns */} -
-
-

- Ory gives you authentication, authorization, and user management - APIs designed for modern applications.{" "} -

-

- Start fast, scale to millions, and keep security best practices - baked in. -

-
-
- -
-
- -
-

- How to use the Ory Developer Portal -

-
-
-

- Not sure where to start? Follow our guided - paths—structured journeys that walk you through Ory's products and - solutions so you can learn and build faster. -

-
- -
- {guides.map((guide, index) => ( -
-
- {index === 0 && ( -
-

- - Want to learn more about a specific product suite or - solution? - {" "} - Go directly to product and solution specific information. -

-
- )} - {index === 1 && ( -
-

- Want to start coding and need an example?{" "} - Take a look in the Quickstarts to find the framework and - language you want to use. -

-
- )} - {index === 2 && ( -
-

- Want to find the right API to use? Go - directly to the REST API, SDKs, or CLI references. -

-
- )} - {index === 0 && ( -
-

- Click on - - Products - {" "} - or{" "} - - Solutions - -

-
- )} - {index === 1 && ( -
-

- Click on - - Quickstarts - -

-
- )} - {index === 2 && ( -
-

- Click on - - Reference - -

-
- )} -
-
- ))} -
-
-
- ) -} - -function Hero() { - const cards = [ - { - label: "Ory Network", - description: - "Managed identity, OAuth2/OIDC, and permissions. Best choice for new projects.", - to: "/network/getting-started", - meta: "Cloud · multi-region · production-ready", - }, - { - label: "Ory Enterprise License", - description: - "Self-host Ory with enterprise support, SLAs, and advanced compliance options.", - to: "/oel/getting-started", - meta: "Self-hosted · enterprise", - }, - { - label: "Ory Open Source", - description: - "Use the individual Ory projects directly and run everything yourself.", - to: "/oss/getting-started", - meta: "Open source · fully self-managed", - }, - ] - - return ( -
-
- {/* Heading row above cards */} -
-
- Choose a deployment option -

- Choose the deployment option that fits your organization and build - secure IAM into your apps. You can switch later — the core - concepts stay the same. -

-
-
- - {/* Product cards - 3 columns */} -
- {cards.map((card) => ( -
-
-
-

- {card.label} -

-
-
-

- {card.description} -

-

- {card.meta} -

- - Learn more - -
-
-
- ))} -
-
-
- ) -} - -function ProductQuickstarts() { - return ( -
-
- Design your Ory solution - -
-
- ) -} - -function LanguageQuickstarts() { - const langs = [ - { - value: "javascript", - label: "JavaScript / TypeScript", - docs: "/getting-started/integrate-auth/react", - snippet: `npm install @ory/client`, - }, - { - value: "nextjs", - label: "Next.js", - docs: "/getting-started/integrate-auth/nextjs-app-router-quickstart", - snippet: `npx create-next-app my-app`, - }, - { - value: "vue", - label: "Vue", - docs: "/getting-started/integrate-auth/vue", - snippet: `npm create vue@latest`, - }, - { - value: "go", - label: "Go", - docs: "/getting-started/integrate-auth/go", - snippet: `go get github.com/ory/client-go`, - }, - ] - - return ( -
-
-
-
- - Select your framework or language - -

- Drop Ory into an existing app. Pick your stack and follow the - step-by-step integration guides. -

-
-
- - - {langs.map((lang) => ( - -
-
- {lang.snippet} -
-
-
-

- Follow the full guide for{" "} - {lang.label}. -

-
    -
  • Set up Ory SDK and environment variables
    • -
  • Protect routes with login and sessions
    • -
  • Handle logout, recovery, and verification flows
    • -
-
-
-
- - ))} - -
-
- ) -} - -function OtherGuides() { - const guides = [ - { - label: "Install from green-field", - to: "/getting-started/overview", - description: "Replace your home-grown IAM system.", - }, - { - label: "Migrate to Ory", - to: "/kratos/self-service/flows/user-login-user-registration", - description: "Plan your migration to Ory from an existing system.", - }, - { - label: "Ory architecture", - to: "/kratos/self-service/flows/user-login-user-registration", - description: "Understand the core building blocks and architecture.", - }, - ] - - return ( -
-
-
-
-

Other guides

-

- Opinionated, end-to-end walkthroughs to help you ship real - features, not just hello-world demos. -

-
-
- -
- {guides.map((guide) => ( -
-
-
-

- {guide.label} -

-
-
-

{guide.description}

-
-
-
- ))} -
-
-
- ) -} - -function ComponentsTools() { - const items = [ - { - label: "Ory Console", - to: "/cli/ory", - description: - "User interface to manage projects, configurations, and more.", - }, - { - label: "Ory Account Experience", - to: "/reference/api", - description: - "User interface for all self-service screens like login, registration, or consent.", - }, - { - label: "Ory Elements", - to: "/docs/elements", - description: - "Pre-built UI components for login, registration, and account flows.", - }, - { - label: "Ory Actions", - to: "/docs/kratos/hooks/configure-hooks", - description: - "Define custom business logic, automating system behavior in response to events, and integrating with third-party services.", - }, - { - label: "Changelog", - to: "/ecosystem/changelog", - description: "See what shipped recently across Ory products.", - }, - { - label: "Status & SLA", - to: "https://status.ory.com/", - description: "Monitor uptime and incident history for Ory services.", - }, - ] - - return ( -
-
-
-
-

Components & tools

-

- Everything around the core APIs: observability, tooling. -

-
-
- -
- {items.map((item) => ( -
-
-
-

- {item.to.startsWith("http") ? ( - {item.label} - ) : ( - {item.label} - )} -

-
-
-

{item.description}

-
-
-
- ))} -
-
-
- ) -} - -function SectionDivider() { - return ( -
- ) -} - -function StepHeading({ - step, - children, -}: { - step: number - children: React.ReactNode -}) { - return ( -

- - {step} - - {children} -

- ) -} - -function StepHeading2({ - step, - children, -}: { - step: number - children: React.ReactNode -}) { - return ( -

- - {step} - - {children} -

- ) -} +import { StartHeading } from "@site/src/components/welcomePage/StartHeading" +import { HowToUseSection } from "@site/src/components/welcomePage/HowToUseSection" +import { DeploymentAndFrameworkSection } from "@site/src/components/welcomePage/DeploymentAndFrameworkSection" +import { OtherGuides } from "@site/src/components/welcomePage/OtherGuides" export default function WelcomePage() { return ( - + - - - + + - ) } + diff --git a/src/static/img/background-pattern.png b/src/static/img/background-pattern.png new file mode 100644 index 0000000000000000000000000000000000000000..5897445c69bea06fb0cdd7efdc5bb9dd176aee8b GIT binary patch literal 606 zcmeAS@N?(olHy`uVBq!ia0y~yU|axXKj2^klCF}Q8i5pNfk$L91A~|<2s3&HseAwm zG8PB9J29*~C-V}>VM%xNb!1@J*w6hZkrgQS+0(@_q=ND7*@KK<_xqPPKRUMU$4?;G`#YKuXbO>_!SeT=S4Kz91Ht>d_dzZv7M!{H zJZ!pR9SFSt7e=fupt^)}cH4LHeEbXq)!(->k)X5q+s>=09rJ + + diff --git a/src/static/img/icons/go.svg b/src/static/img/icons/go.svg new file mode 100644 index 0000000000..63c9a6013e --- /dev/null +++ b/src/static/img/icons/go.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/static/img/icons/nextjs.svg b/src/static/img/icons/nextjs.svg new file mode 100644 index 0000000000..2183cd6eba --- /dev/null +++ b/src/static/img/icons/nextjs.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/static/img/icons/terminal.svg b/src/static/img/icons/terminal.svg new file mode 100644 index 0000000000..3e77aabd70 --- /dev/null +++ b/src/static/img/icons/terminal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/static/img/icons/typescript.svg b/src/static/img/icons/typescript.svg new file mode 100644 index 0000000000..5d84bacc8f --- /dev/null +++ b/src/static/img/icons/typescript.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/static/img/icons/vue.svg b/src/static/img/icons/vue.svg new file mode 100644 index 0000000000..a995964517 --- /dev/null +++ b/src/static/img/icons/vue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/static/img/logos/ory-logo.svg b/src/static/img/logos/ory-logo.svg new file mode 100644 index 0000000000..8c80577c2c --- /dev/null +++ b/src/static/img/logos/ory-logo.svg @@ -0,0 +1,7 @@ + + + + + + + From 4d7353814318180cd0bbeb784b1d2c6f5ddda8bc Mon Sep 17 00:00:00 2001 From: Wassim Bougarfa <12980387+wassimoo@users.noreply.github.com> Date: Thu, 29 Jan 2026 12:52:35 +0100 Subject: [PATCH 2/4] feat: redesign navigation and welcome page layout --- docusaurus.config.ts | 2 +- src/components/OryHeroDemo.jsx | 162 +++++++++++----- .../DeploymentAndFrameworkSection.tsx | 22 ++- .../welcomePage/HowToUseSection.tsx | 153 +++++++-------- src/components/welcomePage/OtherGuides.tsx | 7 +- src/components/welcomePage/StartHeading.tsx | 17 +- src/components/welcomePage/StepBadge.tsx | 1 - src/components/welcomePage/tokens.ts | 3 +- src/css/theme.css | 178 ++++++++++++------ src/navbar.ts | 117 ++++++++++-- src/pages/welcome.module.css | 4 +- src/pages/welcome.tsx | 6 +- src/static/img/home-bg-grid.svg | 11 ++ src/static/img/icons/nav-dropdown-chevron.svg | 3 + 14 files changed, 452 insertions(+), 234 deletions(-) create mode 100644 src/static/img/home-bg-grid.svg create mode 100644 src/static/img/icons/nav-dropdown-chevron.svg diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 29452a7a52..42689ad393 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -93,7 +93,7 @@ const config: Config = { copyright: `Copyright © ${new Date().getFullYear()} Ory Corp`, links: [ { - label: "Need Support?", + label: "Support?", href: "https://www.ory.com/support", }, { diff --git a/src/components/OryHeroDemo.jsx b/src/components/OryHeroDemo.jsx index ec3a4bb6bf..52f6d06fd9 100644 --- a/src/components/OryHeroDemo.jsx +++ b/src/components/OryHeroDemo.jsx @@ -1,13 +1,26 @@ import React, { useState, useEffect, useRef } from "react" const OryHeroDemo = () => { - const [lines, setLines] = useState([]) + const [lines, setLines] = useState([ + { + type: "line", + number: 1, + text: "From zero to registered user in minutes!", + }, + { type: "line", number: 2, text: "Click 'Run'." }, + ]) const [isRunning, setIsRunning] = useState(false) const [hasRun, setHasRun] = useState(false) const terminalRef = useRef(null) const script = [ - { type: "command", text: "npm install @ory/elements-react @ory/nextjs", delay: 300 }, + { + type: "line", + number: 1, + text: "From zero to registered user in minutes!", + delay: 300, + }, + { type: "line", number: 2, text: "Click 'Run'.", delay: 300 }, ] const runDemo = async () => { @@ -26,7 +39,14 @@ const OryHeroDemo = () => { } const reset = () => { - setLines([]) + setLines([ + { + type: "line", + number: 1, + text: "From zero to registered user in minutes!", + }, + { type: "line", number: 2, text: "Click 'Run'." }, + ]) setHasRun(false) } @@ -38,25 +58,28 @@ const OryHeroDemo = () => { const styles = { wrapper: { - width: "80%", - maxWidth: "500px", + width: "416px", margin: "0 auto", - maxHeight: "500px", }, terminal: { + width: "416px", + height: "280px", borderRadius: "8px", overflow: "hidden", - boxShadow: "0 12px 30px rgba(0,0,0,0.25)", - background: "#1a1033", - border: "1px solid #3d2a6d", + boxShadow: + "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", + background: "#ffffff", + border: "1px solid #e2e8f0", + display: "flex", + flexDirection: "column", }, header: { display: "flex", alignItems: "center", gap: "8px", padding: "12px 16px", - background: "#241845", - borderBottom: "1px solid #3d2a6d", + background: "#f8fafc", + borderBottom: "1px solid #e2e8f0", }, trafficLights: { display: "flex", @@ -69,47 +92,59 @@ const OryHeroDemo = () => { background: color, }), headerText: { - color: "#888", + color: "#64748b", fontSize: "13px", - fontFamily: "monospace", - marginLeft: "8px", + fontFamily: "Inter, sans-serif", + fontWeight: "400", }, body: { padding: "16px", - fontFamily: "monospace", + fontFamily: "JetBrains Mono, monospace", fontSize: "13px", - height: "200px", + flex: "1", overflowY: "auto", + background: "#ffffff", + color: "#0f172a", + lineHeight: "1.6", + }, + lineNumber: { + color: "#94a3b8", + marginRight: "12px", + fontFamily: "JetBrains Mono, monospace", + fontSize: "13px", }, comment: { - color: "#d2a8ff", + color: "#64748b", marginTop: "12px", }, note: { - color: "#d2a8ff", + color: "#64748b", fontSize: "11px", marginTop: "4px", marginBottom: "8px", paddingLeft: "16px", }, command: { - color: "#ffffff", + color: "#0f172a", + display: "flex", + alignItems: "flex-start", }, commandCont: { - color: "#ffffff", + color: "#0f172a", paddingLeft: "16px", }, prompt: { - color: "#67e8f9", + color: "#64748b", + marginRight: "8px", }, output: { - color: "#a5d6ff", + color: "#334155", paddingLeft: "8px", }, success: { - color: "#ff7b72", + color: "#334155", paddingLeft: "8px", - fontWeight: "600", + fontWeight: "400", }, linkWrapper: { paddingLeft: "8px", @@ -119,7 +154,7 @@ const OryHeroDemo = () => { display: "inline-flex", alignItems: "center", padding: "6px 12px", - background: "#0e639c", + background: "#383bca", color: "#fff", fontSize: "13px", fontWeight: "500", @@ -130,45 +165,61 @@ const OryHeroDemo = () => { display: "inline-block", width: "8px", height: "16px", - background: "#d4d4d4", + background: "#0f172a", animation: "blink 1s infinite", }, controls: { display: "flex", + justifyContent: "space-between", + alignItems: "center", gap: "8px", padding: "12px 16px", - background: "#241845", - borderTop: "1px solid #3d2a6d", + background: "#f1f5f9", + borderTop: "1px solid #e2e8f0", + }, + controlsText: { + color: "#94a3b8", + fontSize: "13px", + fontFamily: "Inter, sans-serif", + fontWeight: "400", }, button: { - padding: "6px 16px", + padding: "8px 16px", fontSize: "13px", - fontWeight: "500", - borderRadius: "4px", + fontWeight: "600", + borderRadius: "0", border: "none", cursor: "pointer", + display: "inline-flex", + alignItems: "center", + gap: "6px", }, runButton: { - background: "#0e639c", - color: "#fff", + background: "#6366f1", + color: "#ffffff", }, runButtonDisabled: { - background: "#555", - color: "#999", + background: "#e2e8f0", + color: "#94a3b8", cursor: "not-allowed", }, resetButton: { - background: "#3c3c3c", - color: "#d4d4d4", + background: "#e2e8f0", + color: "#334155", + }, + buttonIcon: { + fontSize: "14px", + lineHeight: "1", + fontWeight: "400", }, caption: { textAlign: "center", - color: "#888", + color: "#64748b", fontSize: "14px", marginTop: "16px", }, placeholder: { - color: "#6a9955", + color: "#94a3b8", }, } @@ -186,21 +237,30 @@ const OryHeroDemo = () => {
- terminal + Terminal
{/* Terminal body */}
- {/* Initial prompt when empty */} - {lines.length === 0 && !isRunning && ( -
- ${" "} -
- )} - {/* Script output */} {lines.map((line, i) => ( -
+
+ {line.type === "line" && ( + <> + {line.number} + $ + + {line.text} + + + )} {line.type === "comment" && (
{ {/* Controls */}
+ + From zero to registered user in minutes +
diff --git a/src/components/welcomePage/DeploymentAndFrameworkSection.tsx b/src/components/welcomePage/DeploymentAndFrameworkSection.tsx index a11fa65c44..6c47b36149 100644 --- a/src/components/welcomePage/DeploymentAndFrameworkSection.tsx +++ b/src/components/welcomePage/DeploymentAndFrameworkSection.tsx @@ -75,7 +75,8 @@ export function DeploymentAndFrameworkSection() { }, ] - const selectedLang = langs.find((l) => l.value === selectedFramework) ?? langs[1] + const selectedLang = + langs.find((l) => l.value === selectedFramework) ?? langs[1] const selectedSnippet = selectedLang.snippet const snippetPrefix = selectedSnippet.startsWith("npm install ") ? "npm install " @@ -89,7 +90,9 @@ export function DeploymentAndFrameworkSection() { style={{ paddingTop: spacing.size16, paddingBottom: spacing.size16, - background: colors.backgroundSecondary, + background: colors.backgroundPrimary, + borderTop: `1px solid ${colors.borderPrimary}`, + borderBottom: `1px solid ${colors.borderPrimary}`, }} >
- Do you need identity management (user registration, profile - management)? + Do you need identity management (user registration, + profile management)?

@@ -669,7 +676,9 @@ style Elements fill:transparent,stroke:none`}
-
+
{langs.map((lang) => { const active = lang.value === selectedFramework const LangIcon = lang.Icon @@ -801,4 +810,3 @@ style Elements fill:transparent,stroke:none`} ) } - diff --git a/src/components/welcomePage/HowToUseSection.tsx b/src/components/welcomePage/HowToUseSection.tsx index 310c596768..11e69fe0eb 100644 --- a/src/components/welcomePage/HowToUseSection.tsx +++ b/src/components/welcomePage/HowToUseSection.tsx @@ -6,22 +6,25 @@ import styles from "@site/src/pages/welcome.module.css" export function HowToUseSection() { const guides = [ { - title: "Want to learn more about a specific product suite or solution?", - description: "Go directly to product and solution specific information.", - links: [ - { label: "Products", to: "/products/products-overview" }, - { label: "Solutions", to: "/solutions/solutions-overview" }, - ], + title: "Learn about a specific product", + description: "Go directly to product specific information.", + link: { label: "Products", to: "/products/products-overview" }, }, { - title: "Want to start coding and need an example?", - description: "Want to start coding and need an example?", - links: [{ label: "Quickstarts", to: "/getting-started/overview" }], + title: "Learn about a specific solution", + description: "Go directly to solution specific information.", + link: { label: "Solutions", to: "/solutions/solutions-overview" }, }, { - title: "Want to find the right API to use?", + title: "Start coding with an example", + description: + "Take a look in the Quickstarts to find the framework and language you want to use.", + link: { label: "Quickstarts", to: "/getting-started/overview" }, + }, + { + title: "Find the right API to use", description: "Go directly to the REST API, SDKs, or CLI references.", - links: [{ label: "Reference", to: "/reference/reference-overview" }], + link: { label: "API reference", to: "/reference/reference-overview" }, }, ] @@ -42,7 +45,7 @@ export function HowToUseSection() { display: "flex", flexDirection: "column", gap: spacing.size4, - marginBottom: spacing.size8, + marginBottom: spacing.size12, }} >

+ {/* Horizontal separator */} +
+
@@ -87,85 +100,60 @@ export function HowToUseSection() { key={index} style={{ flex: "1 0 0", - background: colors.backgroundSecondary, - padding: spacing.size4, display: "flex", flexDirection: "column", - justifyContent: "space-between", - minHeight: "auto", + gap: spacing.size4, }} > -
-

- {guide.title} -

-

- {guide.description} -

-
-
+

+ {guide.description} +

+ - {guide.links.map((link, linkIndex) => ( - - {link.label} - - → - - - ))} -
+ {guide.link.label} + + → + +
))}
@@ -173,4 +161,3 @@ export function HowToUseSection() { ) } - diff --git a/src/components/welcomePage/OtherGuides.tsx b/src/components/welcomePage/OtherGuides.tsx index 5a2cceff13..fb184df40e 100644 --- a/src/components/welcomePage/OtherGuides.tsx +++ b/src/components/welcomePage/OtherGuides.tsx @@ -90,8 +90,7 @@ export function OtherGuides() { minHeight: "200px", }} > -
-
+

-
-
+
) } - diff --git a/src/components/welcomePage/StartHeading.tsx b/src/components/welcomePage/StartHeading.tsx index fb18eb14d7..4af3392652 100644 --- a/src/components/welcomePage/StartHeading.tsx +++ b/src/components/welcomePage/StartHeading.tsx @@ -1,17 +1,19 @@ import React from "react" +import useBaseUrl from "@docusaurus/useBaseUrl" import OryHeroDemo from "@site/src/components/OryHeroDemo" -import backgroundPattern from "@site/src/static/img/background-pattern.png" import { colors, spacing } from "./tokens" import styles from "@site/src/pages/welcome.module.css" export function StartHeading() { + const backgroundPattern = useBaseUrl("/img/home-bg-grid.svg") + return (
-

Welcome to the Ory Developer Portal

+

How to use the Ory Developer Portal

- Ory gives you authentication, authorization, and user management - APIs designed for modern applications. Start fast, scale to - millions, and keep security best practices baked in. + Not sure where to start? Follow our guided paths and structured + journeys that walk you through Ory's products and solutions so you + can learn and build faster.

@@ -36,4 +38,3 @@ export function StartHeading() {
) } - diff --git a/src/components/welcomePage/StepBadge.tsx b/src/components/welcomePage/StepBadge.tsx index 7d87eea4e2..af0298bfe1 100644 --- a/src/components/welcomePage/StepBadge.tsx +++ b/src/components/welcomePage/StepBadge.tsx @@ -32,4 +32,3 @@ export function StepBadge({ step }: { step: number }) {
) } - diff --git a/src/components/welcomePage/tokens.ts b/src/components/welcomePage/tokens.ts index cb6539d1b9..8b8922641f 100644 --- a/src/components/welcomePage/tokens.ts +++ b/src/components/welcomePage/tokens.ts @@ -1,4 +1,4 @@ -// Shared tokens for `src/pages/welcome.tsx` sections +// Shared tokens for `src/pages/welcome.tsx` sections export const colors = { textPrimary: "#0f172a", @@ -67,4 +67,3 @@ export const radius = { buttons: "4px", general: "4px", } as const - diff --git a/src/css/theme.css b/src/css/theme.css index 61c1799040..9315c62a0f 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -363,26 +363,33 @@ Exact styling from Figma design ----------------------------- */ :root { - --ory-navbar-height: 48px; + --ory-navbar-height: 64px; --ory-navbar-bg: #ffffff; --ory-navbar-border: #cbd5e1; --ory-navbar-text: #0f172a; --ory-navbar-link: #0f172a; --ory-navbar-link-hover: #383bca; --ory-navbar-font-size: 14px; - --ory-navbar-gap: 24px; - --ory-navbar-left-width: 312px; + --ory-navbar-gap: 8px; + --ory-navbar-left-width: 80px; --ory-navbar-left-padding-x: 16px; --ory-navbar-content-padding-left: 32px; --ory-navbar-right-width: auto; - --ory-navbar-right-gap: 24px; + --ory-navbar-right-gap: 8px; --ory-search-width: 200px; + /* Button hover effect variables */ + --button-button-height: 32px; + --size-25: 10px; + --size-05: 2px; + --radius-buttons: 4px; + --border-transparent-transparent: rgba(255, 255, 255, 0); + --background-transparent-primary-hover: rgba(0, 0, 0, 0.02); } .navbar { - height: 48px !important; - min-height: 48px !important; - max-height: 48px !important; + height: 64px !important; + min-height: 64px !important; + max-height: 64px !important; background: var(--ory-navbar-bg); border-bottom: 1px solid var(--ory-navbar-border); box-shadow: none; @@ -416,52 +423,23 @@ .navbar__logo { display: flex; align-items: center; + justify-content: center; gap: 6px; height: 24px; - flex: 1 0 0; + width: 100%; padding: 4px; } .navbar__logo img { - height: 14.6px; - width: 40.15px; + height: 16px; + width: auto; display: block; flex-shrink: 0; } +.navbar__logo::before, .navbar__logo::after { - content: "/ Documentation"; - display: inline-block; - font-family: Inter, sans-serif; - font-size: 20px; - font-weight: 400; - line-height: 1; - flex-shrink: 0; - margin-left: 6px; - white-space: nowrap; - background: linear-gradient( - to right, - #383bca 0, - #383bca 1ch, - var(--ory-navbar-text) 1ch, - var(--ory-navbar-text) 100% - ); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - color: var(--ory-navbar-text); -} - -/* Dropdown icon after logo area */ -.navbar__brand::after { - content: ""; - display: block; - width: 16px; - height: 16px; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%230f172a' stroke-width='1.5' fill='none' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center; - background-size: contain; - margin-left: 4px; - flex-shrink: 0; + display: none; } /* Middle nav links */ @@ -483,23 +461,57 @@ font-size: 14px; line-height: 1; white-space: nowrap; + display: flex; + height: var(--button-button-height, 32px); + padding: 0 var(--size-25, 10px); + justify-content: center; + align-items: center; + gap: var(--size-05, 2px); + border-radius: var(--radius-buttons, 4px); + border: 1px solid + var(--border-transparent-transparent, rgba(255, 255, 255, 0)); + transition: background-color 0.2s ease; } .navbar__link:hover, .navbar__link--active { color: var(--ory-navbar-link-hover); + background: var(--background-transparent-primary-hover, rgba(0, 0, 0, 0.02)); +} + +/* Style dropdown chevrons in top navbar only (nav/Button/right) */ +.navbar .dropdown > .navbar__link::after { + border: none; + content: ""; + display: inline-block; + width: 16px; + height: 16px; + background: url("../static/img/icons/nav-dropdown-chevron.svg") no-repeat + center; + background-size: contain; + margin-left: 2px; + position: static; + top: auto; + transform: none; + vertical-align: middle; } /* Ensure all navbar items have consistent width */ .navbar__item { flex-shrink: 0; min-width: fit-content; + margin: 0 !important; } -.navbar__item .navbar__link { - display: inline-block; - width: auto; - min-width: fit-content; +/* Ensure dropdown items have same spacing as direct links */ +.navbar__item.dropdown { + margin: 0 !important; + padding: 0; +} + +/* Ensure dropdown links have same styling as direct links */ +.navbar__item.dropdown > .navbar__link { + margin: 0; } /* Right section - Links and Search */ @@ -550,6 +562,21 @@ white-space: nowrap !important; } +/* Override search placeholder text - hide original and show new */ +.navbar .DocSearch-Button-Placeholder, +.navbar__items--right .DocSearch-Button-Placeholder { + font-size: 0 !important; +} + +.navbar .DocSearch-Button-Placeholder::after, +.navbar__items--right .DocSearch-Button-Placeholder::after { + content: "Search or ask AI ✨" !important; + font-size: 16px !important; + font-family: Inter, sans-serif !important; + font-weight: 400 !important; + color: #64748b !important; +} + /* Search icon wrapper - DocSearch uses SVG */ .navbar .DocSearch-Button .DocSearch-Search-Icon, .navbar__items--right .DocSearch-Button .DocSearch-Search-Icon, @@ -671,8 +698,6 @@ display: none !important; } - - @supports (font-variation-settings: normal) { :root { --ifm-font-family-base: InterVariable, var(--ifm-font-family-base-fallback); @@ -858,9 +883,15 @@ svg[class*="iconExternalLink"] { justify-content: flex-end !important; } -.theme-doc-sidebar-item-category-level-2 .menu__list-item-collapsible > .menu__caret, -.theme-doc-sidebar-item-category-level-3 .menu__list-item-collapsible > .menu__caret, -.theme-doc-sidebar-item-category-level-4 .menu__list-item-collapsible > .menu__caret { +.theme-doc-sidebar-item-category-level-2 + .menu__list-item-collapsible + > .menu__caret, +.theme-doc-sidebar-item-category-level-3 + .menu__list-item-collapsible + > .menu__caret, +.theme-doc-sidebar-item-category-level-4 + .menu__list-item-collapsible + > .menu__caret { margin-left: 0 !important; margin-right: 8px !important; opacity: 0.6 !important; @@ -871,9 +902,15 @@ svg[class*="iconExternalLink"] { transform-origin: center center !important; } -.theme-doc-sidebar-item-category-level-2 .menu__list-item-collapsible > .menu__caret:hover, -.theme-doc-sidebar-item-category-level-3 .menu__list-item-collapsible > .menu__caret:hover, -.theme-doc-sidebar-item-category-level-4 .menu__list-item-collapsible > .menu__caret:hover { +.theme-doc-sidebar-item-category-level-2 + .menu__list-item-collapsible + > .menu__caret:hover, +.theme-doc-sidebar-item-category-level-3 + .menu__list-item-collapsible + > .menu__caret:hover, +.theme-doc-sidebar-item-category-level-4 + .menu__list-item-collapsible + > .menu__caret:hover { background: transparent !important; opacity: 0.6 !important; transform: scale(0.667) !important; @@ -927,35 +964,54 @@ svg[class*="iconExternalLink"] { position: relative; } -.tabs-container[data-group-id="language-quickstarts"] .tabs__item--active:hover { +.tabs-container[data-group-id="language-quickstarts"] + .tabs__item--active:hover { background-color: #e0e1ff; } /* Override CodeBlock background in code sample tabs */ -.tabs-container[data-group-id="language-quickstarts"] ~ * [class*="theme-code-block"], -.tabs-container[data-group-id="language-quickstarts"] [class*="theme-code-block"], +.tabs-container[data-group-id="language-quickstarts"] + ~ * + [class*="theme-code-block"], +.tabs-container[data-group-id="language-quickstarts"] + [class*="theme-code-block"], .tabs-container[data-group-id="language-quickstarts"] pre, .tabs-container[data-group-id="language-quickstarts"] code { background: #ffffff !important; border: none !important; } -.tabs-container[data-group-id="language-quickstarts"] .tabs__item > div > div:last-child { +.tabs-container[data-group-id="language-quickstarts"] + .tabs__item + > div + > div:last-child { background: #ffffff !important; border: none !important; } -.tabs-container[data-group-id="language-quickstarts"] .tabs__item > div > div:last-child code { +.tabs-container[data-group-id="language-quickstarts"] + .tabs__item + > div + > div:last-child + code { background: transparent !important; border: none !important; } -.tabs-container[data-group-id="language-quickstarts"] .tabs__item > div > div:last-child span { +.tabs-container[data-group-id="language-quickstarts"] + .tabs__item + > div + > div:last-child + span { background: transparent !important; border: none !important; } -.tabs-container[data-group-id="language-quickstarts"] .tabs__item > div > div:last-child * { +.tabs-container[data-group-id="language-quickstarts"] + .tabs__item + > div + > div:last-child + * { border: none !important; } diff --git a/src/navbar.ts b/src/navbar.ts index 839aa25b36..ae6bfbca37 100644 --- a/src/navbar.ts +++ b/src/navbar.ts @@ -27,36 +27,129 @@ export const navbar: Navbar = { position: "left", }, { - type: "doc", - docId: "products/products-overview", + type: "dropdown", + to: "products/products-overview", label: "Products", position: "left", + items: [ + { + type: "doc", + docId: "network/getting-started/index", + label: "Ory Network", + }, + { + type: "doc", + docId: "oel/getting-started/index", + label: "Ory Enterprise License", + }, + { + type: "doc", + docId: "oss/getting-started/index", + label: "Ory Open Source", + }, + ], }, { - type: "doc", - docId: "solutions/solutions-overview", + type: "dropdown", + to: "/docs/solutions/solutions-overview", label: "Solutions", position: "left", + items: [ + { + type: "doc", + docId: "solutions/solution_CIAM", + label: "CIAM", + }, + { + type: "doc", + docId: "solutions/solution_B2B", + label: "B2B IAM", + }, + { + type: "doc", + docId: "solutions/solution_agentic", + label: "Agentic IAM", + }, + ], }, + { - type: "doc", - docId: "reference/reference-overview", + type: "dropdown", + to: "/docs/reference/reference-overview", label: "Reference", position: "left", + items: [ + { + to: "/docs/reference/api", + label: "REST API", + }, + { + to: "/docs/category/ory-cli-reference", + label: "Ory CLI", + }, + { + to: "/docs/sdk", + label: "Ory SDKs", + }, + { + to: "/docs/category/operations-reference", + label: "Operations", + }, + ], }, { - label: "Change log", - to: "/docs/ecosystem/changelog", + label: "Change Log", position: "left", + items: [ + { + to: "https://changelog.ory.com/?categories=cat_6MGGeXN7WohDH", + label: "Ory Network", + }, + { + to: "https://changelog.ory.com/?categories=cat_s3C6qgDr7FEyo%2Ccat_n9fSarZSCxDTl%2Ccat_ZTXuym1ZfOYZx%2Ccat_YZLKJTlx35HVW", + label: "Ory OEL", + }, + + { + to: "/docs/oss/changelog", + label: "Ory OSS", + }, + ], }, { - label: "Need support?", - href: "https://www.ory.com/support", + label: "Support", position: "right", + items: [ + { + to: "https://www.ory.com/support", + label: "Enterprise Support", + }, + { + to: "https://www.ory.com/docs/search", + label: "Search the docs", + }, + { + to: "https://www.ory.com/chat", + label: "Ory Community Slack", + }, + { + to: "https://github.com/orgs/ory/discussions", + label: "GitHub Discussions", + }, + { + to: "https://stackoverflow.com/questions/tagged/ory", + label: "Stack Overflow", + }, + { + to: "https://www.ory.com/contact", + label: "Schedule a discovery call", + }, + ], }, + { - label: "Github", - href: "https://github.com/ory", + href: `https://github.com/ory`, + label: "GitHub", position: "right", }, ], diff --git a/src/pages/welcome.module.css b/src/pages/welcome.module.css index beadfa3760..de2ea13a96 100644 --- a/src/pages/welcome.module.css +++ b/src/pages/welcome.module.css @@ -1,4 +1,4 @@ - :root { +:root { /* Local page tokens from Figma node 4994:5842/6425 */ --home-text-primary: #0f172a; --home-text-secondary: #334155; @@ -52,8 +52,6 @@ .heroTop { padding-top: var(--home-s16); padding-bottom: 0; - background-size: auto auto, 208px 112px; - background-position: top left; } .heroRow { display: flex; diff --git a/src/pages/welcome.tsx b/src/pages/welcome.tsx index 7d102a963a..4727dc1a7f 100644 --- a/src/pages/welcome.tsx +++ b/src/pages/welcome.tsx @@ -7,7 +7,10 @@ import { OtherGuides } from "@site/src/components/welcomePage/OtherGuides" export default function WelcomePage() { return ( - + @@ -15,4 +18,3 @@ export default function WelcomePage() { ) } - diff --git a/src/static/img/home-bg-grid.svg b/src/static/img/home-bg-grid.svg new file mode 100644 index 0000000000..da8a0c9478 --- /dev/null +++ b/src/static/img/home-bg-grid.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/static/img/icons/nav-dropdown-chevron.svg b/src/static/img/icons/nav-dropdown-chevron.svg new file mode 100644 index 0000000000..c252723782 --- /dev/null +++ b/src/static/img/icons/nav-dropdown-chevron.svg @@ -0,0 +1,3 @@ + + + From 4e008d8fb05a640b54849c9fe37acff9811dcfca Mon Sep 17 00:00:00 2001 From: Wassim Bougarfa <12980387+wassimoo@users.noreply.github.com> Date: Thu, 29 Jan 2026 13:04:57 +0100 Subject: [PATCH 3/4] feat: enhance OryHeroDemo with CLI setup and user registration API steps; remove unused background pattern image --- src/components/OryHeroDemo.jsx | 65 ++++++++++++++++++++++++-- src/static/img/background-pattern.png | Bin 606 -> 0 bytes 2 files changed, 60 insertions(+), 5 deletions(-) delete mode 100644 src/static/img/background-pattern.png diff --git a/src/components/OryHeroDemo.jsx b/src/components/OryHeroDemo.jsx index 52f6d06fd9..4cbe1acb13 100644 --- a/src/components/OryHeroDemo.jsx +++ b/src/components/OryHeroDemo.jsx @@ -14,13 +14,68 @@ const OryHeroDemo = () => { const terminalRef = useRef(null) const script = [ + // CLI setup + { type: "comment", text: "# One-time project setup via Ory CLI", delay: 0 }, + { type: "command", text: "brew install ory/tap/cli", delay: 300 }, + { type: "output", text: "Installing ory...", delay: 500 }, + { type: "success", text: "✓ Installed", delay: 600 }, + { type: "command", text: "ory auth", delay: 400 }, { - type: "line", - number: 1, - text: "From zero to registered user in minutes!", - delay: 300, + type: "output", + text: "Opening browser to create your Ory developer account...", + delay: 500, + }, + { type: "success", text: "✓ Authenticated as ", delay: 700 }, + { type: "command", text: 'ory create project --name "MyApp"', delay: 400 }, + { type: "output", text: "Project slug: myapp-abc123", delay: 600 }, + { type: "success", text: "✓ Project created", delay: 200 }, + + // API registration + { type: "comment", text: "# Register a user via Ory API", delay: 600 }, + { + type: "note", + text: "Note: Traits depend on your identity schema. This sample uses Ory's 'username' preset schema.", + delay: 400, + }, + { type: "command", text: "curl -s -X GET \\", delay: 300 }, + { + type: "command-cont", + text: ' "https://.projects.oryapis.com/self-service/registration/api"', + delay: 100, + }, + { + type: "output", + text: '{ "id": "", "type": "api", "expires_at":"...","issued_at":"...","request_url":"/self-service/registration/api","ui":{"action":".projects.oryapis.com/self-service/registration?flow=","method":"POST", ... } }', + delay: 500, + }, + { type: "command", text: "curl -s -X POST \\", delay: 400 }, + { + type: "command-cont", + text: ' -H "Content-Type: application/json" \\', + delay: 100, + }, + { + type: "command-cont", + text: ' -d \'{"traits":{"username":""},"password":"","method":"password"}\' \\', + delay: 100, + }, + { + type: "command-cont", + text: ' "https://.projects.oryapis.com/self-service/registration?flow="', + delay: 100, + }, + { + type: "output", + text: '{"identity":{"id":"...","schema_id":"preset://username","schema_url":".projects.oryapis.com/schemas/cHJlc2V0Oi8vdXNlcm5hbWU","state":"active", ... } }', + delay: 600, + }, + { type: "success", text: "✓ User registered!", delay: 400 }, + { + type: "link", + text: "Create your free project via Ory Console →", + url: "https://console.ory.sh/", + delay: 400, }, - { type: "line", number: 2, text: "Click 'Run'.", delay: 300 }, ] const runDemo = async () => { diff --git a/src/static/img/background-pattern.png b/src/static/img/background-pattern.png deleted file mode 100644 index 5897445c69bea06fb0cdd7efdc5bb9dd176aee8b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 606 zcmeAS@N?(olHy`uVBq!ia0y~yU|axXKj2^klCF}Q8i5pNfk$L91A~|<2s3&HseAwm zG8PB9J29*~C-V}>VM%xNb!1@J*w6hZkrgQS+0(@_q=ND7*@KK<_xqPPKRUMU$4?;G`#YKuXbO>_!SeT=S4Kz91Ht>d_dzZv7M!{H zJZ!pR9SFSt7e=fupt^)}cH4LHeEbXq)!(->k)X5q+s>=09rJ Date: Thu, 29 Jan 2026 13:25:13 +0100 Subject: [PATCH 4/4] fix: standardize formatting in sidebars and documentation; ensure consistent item array syntax and add missing newlines --- docs/oel/getting-started/index.mdx | 2 +- docs/oss/index.md | 2 +- docs/oss/telemetry.mdx | 4 +- docs/products/overview.mdx | 36 +- sidebars-network.ts | 8 +- sidebars-oel.ts | 702 ++++++++++---------- sidebars-oss.ts | 32 +- sidebars-quickstarts.ts | 71 +- src/components/QuickStarts/constants.ts | 27 +- src/components/welcomePage/OtherGuides.tsx | 5 +- src/components/welcomePage/StartHeading.tsx | 11 +- src/css/theme.css | 25 +- 12 files changed, 458 insertions(+), 467 deletions(-) diff --git a/docs/oel/getting-started/index.mdx b/docs/oel/getting-started/index.mdx index 13531e04ff..8b4056f63e 100644 --- a/docs/oel/getting-started/index.mdx +++ b/docs/oel/getting-started/index.mdx @@ -64,4 +64,4 @@ All Ory Enterprise builds share common advantages over their open-source counter The Ory Enterprise License is leveraged by organizations requiring robust and scalable identity infrastructure. For instance, OpenAI utilizes the Ory Enterprise License with Ory Hydra Enterprise to manage authentication for its 400 million weekly active users, ensuring reliability, massive scale, and uninterrupted service. Read more about -[OpenAI's use of Ory](https://www.ory.com/case-studies/openai). \ No newline at end of file +[OpenAI's use of Ory](https://www.ory.com/case-studies/openai). diff --git a/docs/oss/index.md b/docs/oss/index.md index 702b26be3d..ad78d74cc0 100644 --- a/docs/oss/index.md +++ b/docs/oss/index.md @@ -1,4 +1,4 @@ --- title: Ory Open Source hide_title: true ---- \ No newline at end of file +--- diff --git a/docs/oss/telemetry.mdx b/docs/oss/telemetry.mdx index a2965ed7f0..bf0da68d2f 100644 --- a/docs/oss/telemetry.mdx +++ b/docs/oss/telemetry.mdx @@ -3,8 +3,8 @@ id: telemetry title: Product telemetry and privacy --- -To continuously improve reliability and performance, Ory collects a limited set of fully anonymized product telemetry. This -page documents the data collected, its purpose, and the privacy protections applied. +To continuously improve reliability and performance, Ory collects a limited set of fully anonymized product telemetry. This page +documents the data collected, its purpose, and the privacy protections applied. Our goal is to provide you with the fastest and most reliable open source services. To achieve this goal, we collect metrics on endpoint performance and send a **fully anonymized** telemetry report ("anonymous usage statistics") to our servers. This data diff --git a/docs/products/overview.mdx b/docs/products/overview.mdx index fafb255740..fe306a4bde 100644 --- a/docs/products/overview.mdx +++ b/docs/products/overview.mdx @@ -22,53 +22,59 @@ import * as welcomeContent from "@site/src/pages/_assets/welcome-content" ## Authentication -Kratos — fully standalone. Handles the complete identity lifecycle (registration, login, recovery, MFA, profile management) without dependencies. +Kratos — fully standalone. Handles the complete identity lifecycle (registration, login, recovery, MFA, profile management) +without dependencies. ## Authorization -Hydra — needs an identity provider. It's deliberately "headless"—it issues OAuth tokens but doesn't manage users. It asks "who is this user?" and needs Kratos (or another IdP) to answer. +Hydra — needs an identity provider. It's deliberately "headless"—it issues OAuth tokens but doesn't manage users. It asks "who is +this user?" and needs Kratos (or another IdP) to answer. -Keto — needs an identity provider. It answers "can this subject do this action?" but needs something upstream to authenticate who the subject is. +Keto — needs an identity provider. It answers "can this subject do this action?" but needs something upstream to authenticate who +the subject is. ## Authentication & Authorization -Kratos + Keto — when you need authentication and fine-grained permissions within your own application(s). Users log in via Kratos, and Keto controls what they can access internally. +Kratos + Keto — when you need authentication and fine-grained permissions within your own application(s). Users log in via Kratos, +and Keto controls what they can access internally. -Kratos + Hydra — when you need authentication plus OAuth 2.0/OIDC capabilities: SSO across multiple apps, third-party integrations, or federating identity to external services. +Kratos + Hydra — when you need authentication plus OAuth 2.0/OIDC capabilities: SSO across multiple apps, third-party +integrations, or federating identity to external services. Kratos + Hydra + Keto — when you need all three: user login, token issuance/SSO, and fine-grained permissions. The choice depends on whether you're solving for internal permissions vs. external/delegated access. -```mermaid +````mermaid flowchart TD Start([What are you building?]) --> Q1{Need to manage
user identities?} - + Q1 -->|Yes| Kratos[✓ Kratos] Q1 -->|No, using existing IdP| ExternalIdP[Use your existing IdP] - + Kratos --> Q2{Need B2B features?
Organizations, teams,
org-level SSO?} ExternalIdP --> Q3 - + Q2 -->|Yes| Polis[✓ Add Polis] Q2 -->|No| Q3 Polis --> Q3 - + Q3{Need SSO across apps
or third-party integrations?} - + Q3 -->|Yes| Hydra[✓ Add Hydra] Q3 -->|No| Q4 Hydra --> Q4 - + Q4{Need fine-grained
permissions?
e.g. can user X edit doc Y} - + Q4 -->|Yes| Keto[✓ Add Keto] Q4 -->|No| Q5 Keto --> Q5 - + Q5{Microservices or
zero-trust architecture?} - + Q5 -->|Yes| Oathkeeper[✓ Add Oathkeeper] Q5 -->|No| Done([Your stack is ready]) Oathkeeper --> Done ``` +```` diff --git a/sidebars-network.ts b/sidebars-network.ts index a06104a4c5..065be70a1a 100644 --- a/sidebars-network.ts +++ b/sidebars-network.ts @@ -42,9 +42,7 @@ const networkSidebar = [ link: { type: "generated-index", }, - items: [ - "identities/get-started/setup", - ], + items: ["identities/get-started/setup"], }, { type: "category", @@ -228,7 +226,7 @@ const networkSidebar = [ "actions/integrations/hubspot", "actions/integrations/mailchimp", "actions/integrations/segment", - ], + ], }, ], }, @@ -700,4 +698,4 @@ const networkSidebar = [ }, ] -export default networkSidebar \ No newline at end of file +export default networkSidebar diff --git a/sidebars-oel.ts b/sidebars-oel.ts index 2dafac34fc..c3dad33024 100644 --- a/sidebars-oel.ts +++ b/sidebars-oel.ts @@ -18,7 +18,8 @@ const oelSidebar = [ collapsible: false, link: { type: "doc", - id: "oel/getting-started/index"}, + id: "oel/getting-started/index", + }, items: [ "oel/getting-started/index", { @@ -30,93 +31,15 @@ const oelSidebar = [ "self-hosted/oel/quickstart", "self-hosted/oel/monitoring/monitoring", "self-hosted/oel/high-performance-pooling", - ] - }, - { - type: "category", - label: "Ory Kratos Identities", - items: [ - "self-hosted/oel/kratos/upgrade", - "self-hosted/oel/kratos/changelog", - "self-hosted/oel/kratos/configuration", - "kratos/install", - "kratos/quickstart", - { - type: "category", - label: "Configuration", - items: [ - "kratos/configuring", - "kratos/guides/configuring-cookies", - "kratos/guides/multi-domain-cookies", - "self-hosted/kratos/configuration/password", - "kratos/self-hosted/mfa", - "kratos/guides/setting-up-cors", - "self-hosted/kratos/configuration/oidc", - "kratos/guides/setting-up-password-hashing-parameters", - "kratos/guides/select-cipher-algorithm", - "kratos/self-hosted/email-http", - "kratos/reference/configuration-editor", - ], - }, - { - type: "category", - label: "Guides", - items: [ - "kratos/guides/docker", - "kratos/guides/deploy-kratos-example", - "kratos/guides/upgrade", - "kratos/guides/production", - "kratos/guides/multi-tenancy-multitenant", - "self-hosted/operations/scalability", - "kratos/self-hosted/mail-courier-templates", - "kratos/guides/tracing", - "kratos/guides/zero-trust-iap-proxy-identity-access-proxy", - "kratos/guides/https-tls", - "kratos/guides/hosting-own-have-i-been-pwned-api", - "kratos/guides/secret-key-rotation", - { - type: "category", - label: "Troubleshooting", - items: [ - { - type: "autogenerated", - dirName: "kratos/debug", - }, - ], - }, ], }, { type: "category", - label: "Reference", - items: [ - "kratos/reference/api", - { - "Command Line Interface (CLI)": [ - { - type: "autogenerated", - dirName: "kratos/cli", - }, - ], - }, - { - SDK: ["kratos/sdk/overview", "kratos/self-hosted/go"], - }, - "kratos/reference/configuration", - "kratos/reference/json-schema-json-paths", - "kratos/reference/html-forms", - ], - }, - { - type: "category", - label: "Self-Hosted", - collapsed: false, - collapsible: false, - link: { - type: "doc", - id: "kratos/quickstart", - }, + label: "Ory Kratos Identities", items: [ + "self-hosted/oel/kratos/upgrade", + "self-hosted/oel/kratos/changelog", + "self-hosted/oel/kratos/configuration", "kratos/install", "kratos/quickstart", { @@ -185,219 +108,316 @@ const oelSidebar = [ "kratos/reference/html-forms", ], }, - ], - }, - ], - }, - { - type: "category", - label: "Ory Hydra OAuth2", - items: [ - "self-hosted/oel/oauth2/migrate", - "self-hosted/oel/oauth2/upgrade", - "self-hosted/oel/oauth2/changelog", - "self-hosted/oel/oauth2/token-prefix", - "self-hosted/oel/oauth2/stateless-jwt", - "self-hosted/oel/oauth2/migrate-postgresql-ttl", - "self-hosted/oel/oauth2/revert-database-migrations", - "self-hosted/oel/oauth2/configuration", - { - type: "category", - label: "Self-Hosted", - collapsed: false, - collapsible: false, - items: ["hydra/self-hosted/install", "hydra/self-hosted/quickstart"], - }, - { - type: "category", - label: "Configuration", - collapsed: false, - collapsible: false, - items: [ - "hydra/reference/configuration", - "hydra/reference/configuration-editor", - "hydra/self-hosted/configure-deploy", - "hydra/self-hosted/dependencies-environment", - "hydra/self-hosted/production", - "hydra/self-hosted/hsm-support", - "self-hosted/operations/scalability", - "hydra/self-hosted/merge-multiple-db-secrets", - "hydra/self-hosted/gitlab", - "hydra/self-hosted/secrets-key-rotation", - "hydra/self-hosted/kubernetes-helm-chart", - "hydra/self-hosted/ssl-https-tls", - "self-hosted/operations/tracing", - "hydra/guides/cookies", - "hydra/guides/cors", - "self-hosted/hydra/debug/csrf", - ], - }, - { - type: "category", - label: "Guides", - items: [ - "hydra/self-hosted/deploy-hydra-example", - "hydra/self-hosted/upgrade", - ], - }, - { - type: "category", - label: "Reference", - items: [ - "hydra/reference/api", { - "Command Line Interface (CLI)": [ + type: "category", + label: "Self-Hosted", + collapsed: false, + collapsible: false, + link: { + type: "doc", + id: "kratos/quickstart", + }, + items: [ + "kratos/install", + "kratos/quickstart", { - type: "autogenerated", - dirName: "hydra/cli", + type: "category", + label: "Configuration", + items: [ + "kratos/configuring", + "kratos/guides/configuring-cookies", + "kratos/guides/multi-domain-cookies", + "self-hosted/kratos/configuration/password", + "kratos/self-hosted/mfa", + "kratos/guides/setting-up-cors", + "self-hosted/kratos/configuration/oidc", + "kratos/guides/setting-up-password-hashing-parameters", + "kratos/guides/select-cipher-algorithm", + "kratos/self-hosted/email-http", + "kratos/reference/configuration-editor", + ], + }, + { + type: "category", + label: "Guides", + items: [ + "kratos/guides/docker", + "kratos/guides/deploy-kratos-example", + "kratos/guides/upgrade", + "kratos/guides/production", + "kratos/guides/multi-tenancy-multitenant", + "self-hosted/operations/scalability", + "kratos/self-hosted/mail-courier-templates", + "kratos/guides/tracing", + "kratos/guides/zero-trust-iap-proxy-identity-access-proxy", + "kratos/guides/https-tls", + "kratos/guides/hosting-own-have-i-been-pwned-api", + "kratos/guides/secret-key-rotation", + { + type: "category", + label: "Troubleshooting", + items: [ + { + type: "autogenerated", + dirName: "kratos/debug", + }, + ], + }, + ], + }, + { + type: "category", + label: "Reference", + items: [ + "kratos/reference/api", + { + "Command Line Interface (CLI)": [ + { + type: "autogenerated", + dirName: "kratos/cli", + }, + ], + }, + { + SDK: ["kratos/sdk/overview", "kratos/self-hosted/go"], + }, + "kratos/reference/configuration", + "kratos/reference/json-schema-json-paths", + "kratos/reference/html-forms", + ], }, - ], - }, - { - SDK: [ - "hydra/sdk/overview", - "hydra/self-hosted/go", - "hydra/self-hosted/js", ], }, ], }, - ], - }, - { - type: "category", - label: "Ory Keto Permissions", - items: [ - "self-hosted/oel/keto/changelog", - "self-hosted/oel/keto/configuration", { type: "category", - label: "Self-Hosted", - collapsed: false, - collapsible: false, + label: "Ory Hydra OAuth2", items: [ - "keto/install", - "keto/quickstart", + "self-hosted/oel/oauth2/migrate", + "self-hosted/oel/oauth2/upgrade", + "self-hosted/oel/oauth2/changelog", + "self-hosted/oel/oauth2/token-prefix", + "self-hosted/oel/oauth2/stateless-jwt", + "self-hosted/oel/oauth2/migrate-postgresql-ttl", + "self-hosted/oel/oauth2/revert-database-migrations", + "self-hosted/oel/oauth2/configuration", + { + type: "category", + label: "Self-Hosted", + collapsed: false, + collapsible: false, + items: [ + "hydra/self-hosted/install", + "hydra/self-hosted/quickstart", + ], + }, { type: "category", label: "Configuration", + collapsed: false, + collapsible: false, items: [ - "keto/reference/configuration", - "keto/reference/configuration-editor", + "hydra/reference/configuration", + "hydra/reference/configuration-editor", + "hydra/self-hosted/configure-deploy", + "hydra/self-hosted/dependencies-environment", + "hydra/self-hosted/production", + "hydra/self-hosted/hsm-support", + "self-hosted/operations/scalability", + "hydra/self-hosted/merge-multiple-db-secrets", + "hydra/self-hosted/gitlab", + "hydra/self-hosted/secrets-key-rotation", + "hydra/self-hosted/kubernetes-helm-chart", + "hydra/self-hosted/ssl-https-tls", + "self-hosted/operations/tracing", + "hydra/guides/cookies", + "hydra/guides/cors", + "self-hosted/hydra/debug/csrf", ], }, { type: "category", label: "Guides", items: [ - "keto/guides/production", - "keto/guides/v0.7-migration", - "keto/guides/migrating-legacy-policies", - "keto/guides/upgrade", + "hydra/self-hosted/deploy-hydra-example", + "hydra/self-hosted/upgrade", ], }, { - Reference: [ - "keto/reference/rest-api", - "keto/reference/proto-api", + type: "category", + label: "Reference", + items: [ + "hydra/reference/api", { "Command Line Interface (CLI)": [ { type: "autogenerated", - dirName: "keto/cli", + dirName: "hydra/cli", }, ], }, { - SDK: ["keto/sdk/overview", "keto/self-hosted/go"], + SDK: [ + "hydra/sdk/overview", + "hydra/self-hosted/go", + "hydra/self-hosted/js", + ], }, ], }, ], }, - ], - }, - { - type: "category", - label: "Ory Polis", - items: [ - "self-hosted/oel/polis/changelog", { type: "category", - label: "Ory Polis", - collapsed: true, - collapsible: true, + label: "Ory Keto Permissions", items: [ - "polis/index", - "polis/install", - "polis/quickstart", - "polis/reference/api", + "self-hosted/oel/keto/changelog", + "self-hosted/oel/keto/configuration", { type: "category", - label: "Enterprise SSO", + label: "Self-Hosted", collapsed: false, collapsible: false, - link: { - type: "doc", - id: "polis/saml-federation/index", - }, items: [ + "keto/install", + "keto/quickstart", { type: "category", - label: "Concepts", - link: { - type: "doc", - id: "polis/sso-flow/index", - }, + label: "Configuration", items: [ - "polis/sso-flow/index", - "polis/sso-flow/example-flow", - "polis/security", + "keto/reference/configuration", + "keto/reference/configuration-editor", ], }, { type: "category", - label: "Configuration", + label: "Guides", items: [ - "polis/deploy/env-variables", - "polis/guides/configuring-saml-sso", - "polis/guides/login-with-saml-sso", - "polis/deploy/pre-loaded-connections", + "keto/guides/production", + "keto/guides/v0.7-migration", + "keto/guides/migrating-legacy-policies", + "keto/guides/upgrade", ], }, + { + Reference: [ + "keto/reference/rest-api", + "keto/reference/proto-api", + { + "Command Line Interface (CLI)": [ + { + type: "autogenerated", + dirName: "keto/cli", + }, + ], + }, + { + SDK: ["keto/sdk/overview", "keto/self-hosted/go"], + }, + ], + }, + ], + }, + ], + }, + { + type: "category", + label: "Ory Polis", + items: [ + "self-hosted/oel/polis/changelog", + { + type: "category", + label: "Ory Polis", + collapsed: true, + collapsible: true, + items: [ + "polis/index", + "polis/install", + "polis/quickstart", + "polis/reference/api", { type: "category", - label: "Guides", + label: "Enterprise SSO", + collapsed: false, + collapsible: false, link: { type: "doc", - id: "polis/guides/service", + id: "polis/saml-federation/index", }, items: [ - "polis/guides/service", - "polis/guides/npm-library", - "polis/upgrade", - "polis/guides/examples", - "polis/sbom", - "polis/container-signing", - "polis/events", - "polis/observability", { type: "category", - label: "Frameworks", + label: "Concepts", + link: { + type: "doc", + id: "polis/sso-flow/index", + }, items: [ + "polis/sso-flow/index", + "polis/sso-flow/example-flow", + "polis/security", + ], + }, + { + type: "category", + label: "Configuration", + items: [ + "polis/deploy/env-variables", + "polis/guides/configuring-saml-sso", + "polis/guides/login-with-saml-sso", + "polis/deploy/pre-loaded-connections", + ], + }, + { + type: "category", + label: "Guides", + link: { + type: "doc", + id: "polis/guides/service", + }, + items: [ + "polis/guides/service", + "polis/guides/npm-library", + "polis/upgrade", + "polis/guides/examples", + "polis/sbom", + "polis/container-signing", + "polis/events", + "polis/observability", { - type: "autogenerated", - dirName: "polis/guides/frameworks", + type: "category", + label: "Frameworks", + items: [ + { + type: "autogenerated", + dirName: "polis/guides/frameworks", + }, + ], + }, + { + type: "category", + label: "Deployment", + items: [ + { + type: "autogenerated", + dirName: "polis/guides/deployment", + }, + ], }, ], }, { type: "category", - label: "Deployment", + label: "SAML SSO Providers", + link: { + type: "doc", + id: "polis/sso-providers/index", + }, items: [ { type: "autogenerated", - dirName: "polis/guides/deployment", + dirName: "polis/sso-providers", }, ], }, @@ -405,173 +425,157 @@ const oelSidebar = [ }, { type: "category", - label: "SAML SSO Providers", + label: "Directory Sync", + collapsed: false, + collapsible: false, link: { type: "doc", - id: "polis/sso-providers/index", + id: "polis/directory-sync/index", }, items: [ + "polis/directory-sync/quickstart", + "polis/directory-sync/api-reference", { - type: "autogenerated", - dirName: "polis/sso-providers", + type: "category", + label: "Guides", + collapsed: true, + link: { + type: "generated-index", + // slug: "polis/directory-sync/guides", + }, + items: [ + "polis/directory-sync/webhooks", + "polis/directory-sync/events", + "polis/directory-sync/observability", + "polis/directory-sync/examples", + "polis/directory-sync/faq", + // { + // type: "category", + // label: "Directory providers", + // link: { + // type: "generated-index", + // slug: "polis/directory-sync/providers", + // }, + // items: [ + // { + // type: "autogenerated", + // dirName: "polis/directory-sync/providers", + // }, + //], + // }, + // { + // type: "category", + // label: "Frameworks", + // items: [ + // { + // type: "autogenerated", + // dirName: "polis/directory-sync/guides", + // }, + //], + // }, + ], }, ], }, - ], - }, - { - type: "category", - label: "Directory Sync", - collapsed: false, - collapsible: false, - link: { - type: "doc", - id: "polis/directory-sync/index", - }, - items: [ - "polis/directory-sync/quickstart", - "polis/directory-sync/api-reference", { type: "category", - label: "Guides", - collapsed: true, + label: "Admin Portal", + collapsed: false, + collapsible: false, link: { - type: "generated-index", - // slug: "polis/directory-sync/guides", + type: "doc", + id: "polis/admin-portal/index", }, items: [ - "polis/directory-sync/webhooks", - "polis/directory-sync/events", - "polis/directory-sync/observability", - "polis/directory-sync/examples", - "polis/directory-sync/faq", - // { - // type: "category", - // label: "Directory providers", - // link: { - // type: "generated-index", - // slug: "polis/directory-sync/providers", - // }, - // items: [ - // { - // type: "autogenerated", - // dirName: "polis/directory-sync/providers", - // }, - //], - // }, - // { - // type: "category", - // label: "Frameworks", - // items: [ - // { - // type: "autogenerated", - // dirName: "polis/directory-sync/guides", - // }, - //], - // }, + { + type: "category", + label: "Guides", + collapsed: true, + link: { + type: "generated-index", + //slug: "polis/admin-portal/guides", + }, + items: [ + "polis/admin-portal/enterprise-sso", + "polis/admin-portal/setup-links-enterprise-sso", + "polis/admin-portal/directory-sync", + "polis/admin-portal/setup-links-directory-sync", + ], + }, ], }, ], }, + ], + }, + { + type: "category", + label: "Ory Oathkeeper Zero Trust Proxy", + collapsed: true, + collapsible: true, + items: [ + "self-hosted/oel/oathkeeper/upgrade-oathkeeper", + "self-hosted/oel/oathkeeper/changelog", + "self-hosted/oel/oathkeeper/configuration", + "oathkeeper/index", + "oathkeeper/install", + "oathkeeper/reference/api", { type: "category", - label: "Admin Portal", + label: "Concepts", collapsed: false, collapsible: false, - link: { - type: "doc", - id: "polis/admin-portal/index", - }, items: [ + "oathkeeper/api-access-rules", { type: "category", - label: "Guides", - collapsed: true, - link: { - type: "generated-index", - //slug: "polis/admin-portal/guides", - }, + label: "Handlers", items: [ - "polis/admin-portal/enterprise-sso", - "polis/admin-portal/setup-links-enterprise-sso", - "polis/admin-portal/directory-sync", - "polis/admin-portal/setup-links-directory-sync", + "oathkeeper/pipeline", + "oathkeeper/pipeline/authn", + "oathkeeper/pipeline/authz", + "oathkeeper/pipeline/mutator", + "oathkeeper/pipeline/error", ], }, + "oathkeeper/grpc-middleware", ], }, - ], - }, - ], - }, - { - type: "category", - label: "Ory Oathkeeper Zero Trust Proxy", - collapsed: true, - collapsible: true, - items: [ - "self-hosted/oel/oathkeeper/upgrade-oathkeeper", - "self-hosted/oel/oathkeeper/changelog", - "self-hosted/oel/oathkeeper/configuration", - "oathkeeper/index", - "oathkeeper/install", - "oathkeeper/reference/api", - { - type: "category", - label: "Concepts", - collapsed: false, - collapsible: false, - items: [ - "oathkeeper/api-access-rules", { type: "category", - label: "Handlers", + label: "Guides", + collapsed: false, + collapsible: false, items: [ - "oathkeeper/pipeline", - "oathkeeper/pipeline/authn", - "oathkeeper/pipeline/authz", - "oathkeeper/pipeline/mutator", - "oathkeeper/pipeline/error", + "oathkeeper/configure-deploy", + "oathkeeper/guides/proxy-websockets", + "oathkeeper/guides/traefik-proxy-integration", + "oathkeeper/guides/upgrade", ], }, - "oathkeeper/grpc-middleware", - ], - }, - { - type: "category", - label: "Guides", - collapsed: false, - collapsible: false, - items: [ - "oathkeeper/configure-deploy", - "oathkeeper/guides/proxy-websockets", - "oathkeeper/guides/traefik-proxy-integration", - "oathkeeper/guides/upgrade", - ], - }, - { - type: "category", - label: "Reference", - collapsed: false, - collapsible: false, - items: [ - "oathkeeper/reference/configuration", - "oathkeeper/reference/configuration-editor", { - "Command Line Interface (CLI)": [ + type: "category", + label: "Reference", + collapsed: false, + collapsible: false, + items: [ + "oathkeeper/reference/configuration", + "oathkeeper/reference/configuration-editor", { - type: "autogenerated", - dirName: "oathkeeper/cli", + "Command Line Interface (CLI)": [ + { + type: "autogenerated", + dirName: "oathkeeper/cli", + }, + ], }, + "oathkeeper/sdk", ], }, - "oathkeeper/sdk", ], }, ], }, -], - }, - ] +] export default oelSidebar diff --git a/sidebars-oss.ts b/sidebars-oss.ts index 473d37ed1e..de7bdce42e 100644 --- a/sidebars-oss.ts +++ b/sidebars-oss.ts @@ -21,20 +21,20 @@ const ossSidebar = [ id: "oss/getting-started/index", }, items: [ - "oss/getting-started/index", - { - type: "category", - label: "Open Source", - collapsed: true, - collapsible: true, - items: [ - "oss/open-source", - "oss/community", - "oss/contributing", - "oss/commitment", - "oss/software-architecture-philosophy", - ], - }, + "oss/getting-started/index", + { + type: "category", + label: "Open Source", + collapsed: true, + collapsible: true, + items: [ + "oss/open-source", + "oss/community", + "oss/contributing", + "oss/commitment", + "oss/software-architecture-philosophy", + ], + }, { type: "category", label: "Getting started", @@ -88,6 +88,6 @@ const ossSidebar = [ }, ], }, -] +] -export default ossSidebar \ No newline at end of file +export default ossSidebar diff --git a/sidebars-quickstarts.ts b/sidebars-quickstarts.ts index 3628030f61..df97103bc7 100644 --- a/sidebars-quickstarts.ts +++ b/sidebars-quickstarts.ts @@ -28,33 +28,25 @@ const quickstartsSidebar = [ type: "category", label: "Delegated Scope-based AuthZ & Federated AuthN", className: "sidebar-icon sidebar-icon-hydra", - items: [ - "oauth2-oidc/index", - "getting-started/ory-network-oauth2", - ], + items: ["oauth2-oidc/index", "getting-started/ory-network-oauth2"], }, { type: "category", label: "Fine-grained AuthZ & Permissions", className: "sidebar-icon sidebar-icon-keto", - items: [ - "keto/index", - ], + items: ["keto/index"], }, - { + { type: "category", label: "Enterprise SSO AuthZ", className: "sidebar-icon sidebar-icon-polis", - items: [ - "polis/index", - ], - }, { + items: ["polis/index"], + }, + { type: "category", label: "Proxy-based Access Control", className: "sidebar-icon sidebar-icon-oathkeeper", - items: [ - "oathkeeper/index", - ], + items: ["oathkeeper/index"], }, ], }, @@ -63,14 +55,15 @@ const quickstartsSidebar = [ label: "Ory Enterprise License", collapsed: false, collapsible: false, - items: [, + items: [ + , { type: "category", label: "Ory Kratos", collapsed: true, collapsible: true, items: [ - "identities/index", + "identities/index", "kratos/quickstart", "kratos/manage-identities/overview", "kratos/mfa/overview", @@ -81,40 +74,28 @@ const quickstartsSidebar = [ label: "Ory Hydra", collapsed: true, collapsible: true, - items: [ - "oauth2-oidc/index", - "hydra/self-hosted/quickstart", - ], + items: ["oauth2-oidc/index", "hydra/self-hosted/quickstart"], }, { type: "category", label: "Ory Keto", collapsed: true, collapsible: true, - items: [ - "keto/index", - "keto/quickstart", - ], + items: ["keto/index", "keto/quickstart"], }, { type: "category", label: "Ory Polis", collapsed: true, collapsible: true, - items: [ - "polis/index", - "polis/quickstart", - ], + items: ["polis/index", "polis/quickstart"], }, { type: "category", label: "Ory Oathkeeper", collapsed: true, collapsible: true, - items: [ - "oathkeeper/index", - "oathkeeper/configure-deploy", - ], + items: ["oathkeeper/index", "oathkeeper/configure-deploy"], }, ], }, @@ -130,7 +111,7 @@ const quickstartsSidebar = [ collapsed: true, collapsible: true, items: [ - "identities/index", + "identities/index", "kratos/quickstart", "kratos/manage-identities/overview", "kratos/mfa/overview", @@ -141,43 +122,31 @@ const quickstartsSidebar = [ label: "Ory Hydra", collapsed: true, collapsible: true, - items: [ - "oauth2-oidc/index", - "hydra/self-hosted/quickstart", - ], + items: ["oauth2-oidc/index", "hydra/self-hosted/quickstart"], }, { type: "category", label: "Ory Keto", collapsed: true, collapsible: true, - items: [ - "keto/index", - "keto/quickstart", - ], + items: ["keto/index", "keto/quickstart"], }, { type: "category", label: "Ory Polis", collapsed: true, collapsible: true, - items: [ - "polis/index", - "polis/quickstart", - ], + items: ["polis/index", "polis/quickstart"], }, { type: "category", label: "Ory Oathkeeper", collapsed: true, collapsible: true, - items: [ - "oathkeeper/index", - "oathkeeper/configure-deploy", - ], + items: ["oathkeeper/index", "oathkeeper/configure-deploy"], }, ], }, ] -export default quickstartsSidebar \ No newline at end of file +export default quickstartsSidebar diff --git a/src/components/QuickStarts/constants.ts b/src/components/QuickStarts/constants.ts index f652c92e36..897d840c87 100644 --- a/src/components/QuickStarts/constants.ts +++ b/src/components/QuickStarts/constants.ts @@ -21,11 +21,10 @@ export const CATEGORIES: QuickstartCategory[] = [ { label: "Get started with identity management", to: "/docs/kratos/manage-identities/overview", - description: - "Identity management and authentication.", + description: "Identity management and authentication.", deploymentModes: ["network", "oel", "oss"], }, - { + { label: "Get started with authentication", to: "/docs/guides/authentication", description: @@ -35,8 +34,7 @@ export const CATEGORIES: QuickstartCategory[] = [ { label: "Get started with multi-factor authentication", to: "/docs/kratos/mfa/overview", - description: - "Multi-factor authentication.", + description: "Multi-factor authentication.", deploymentModes: ["network", "oel", "oss"], }, ], @@ -48,23 +46,21 @@ export const CATEGORIES: QuickstartCategory[] = [ { label: "Introduction to Ory Hydra", to: "/docs/oauth2-oidc", - description: - "OAuth2 & OpenID Connect social sign-in concepts.", - deploymentModes: ["network", "oel", "oss"], + description: "OAuth2 & OpenID Connect social sign-in concepts.", + deploymentModes: ["network", "oel", "oss"], }, { label: "Get started with Ory Hydra", to: "/docs/getting-started/ory-network-oauth2", - description: - "Client credential and authorization code grant.", - deploymentModes: ["network"], + description: "Client credential and authorization code grant.", + deploymentModes: ["network"], }, { label: "Get started with Ory Hydra", to: "/docs/hydra/self-hosted/quickstart", description: "Run Ory Hydra locally and try the most important OAuth2 flows.", - deploymentModes: ["oel", "oss"], + deploymentModes: ["oel", "oss"], }, ], }, @@ -83,7 +79,7 @@ export const CATEGORIES: QuickstartCategory[] = [ to: "/docs/keto/quickstart", description: "Quickstart for understanding relationships and permission checks.", - deploymentModes: ["oel", "oss"], + deploymentModes: ["oel", "oss"], }, ], }, @@ -112,7 +108,8 @@ export const CATEGORIES: QuickstartCategory[] = [ { label: "Introduction to Ory Polis", to: "/docs/polis", - description: "Enterprise SSO for SAML and OIDC identity providers and SCIM provising.", + description: + "Enterprise SSO for SAML and OIDC identity providers and SCIM provising.", deploymentModes: ["network", "oel", "oss"], }, { @@ -120,7 +117,7 @@ export const CATEGORIES: QuickstartCategory[] = [ to: "/docs/polis/quickstart", description: "Quickstart for Enterprise SSO authentication and SCIM provisioning.", - deploymentModes: ["oel", "oss"], + deploymentModes: ["oel", "oss"], }, ], }, diff --git a/src/components/welcomePage/OtherGuides.tsx b/src/components/welcomePage/OtherGuides.tsx index fb184df40e..ed781a6e4c 100644 --- a/src/components/welcomePage/OtherGuides.tsx +++ b/src/components/welcomePage/OtherGuides.tsx @@ -62,9 +62,8 @@ export function OtherGuides() { maxWidth: "680px", }} > - Not sure where to start? Follow our guided paths—structured journeys - that walk you through Ory's products and solutions so you can learn - and build faster. + Opinionated, end-to-end walkthroughs to help you ship real features, + not just hello-world demos.

diff --git a/src/components/welcomePage/StartHeading.tsx b/src/components/welcomePage/StartHeading.tsx index 4af3392652..fe6d151fb9 100644 --- a/src/components/welcomePage/StartHeading.tsx +++ b/src/components/welcomePage/StartHeading.tsx @@ -23,11 +23,14 @@ export function StartHeading() {
-

How to use the Ory Developer Portal

+

Welcome to the Ory Developer Portal

- Not sure where to start? Follow our guided paths and structured - journeys that walk you through Ory's products and solutions so you - can learn and build faster. + Ory gives you authentication, authorization, and user management + APIs designed for modern applications. +
+
+ Start fast, scale to millions, and keep security best practices + baked in.

diff --git a/src/css/theme.css b/src/css/theme.css index c8431aed02..edd7414c4b 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -1067,11 +1067,17 @@ svg[class*="iconExternalLink"] { } /* Icon variants */ -.sidebar-icon-hydra > .menu__list-item-collapsible > .menu__link > span::before { +.sidebar-icon-hydra + > .menu__list-item-collapsible + > .menu__link + > span::before { background-image: url("/img/ory-hydra-icon.svg"); } -.sidebar-icon-kratos > .menu__list-item-collapsible > .menu__link > span::before { +.sidebar-icon-kratos + > .menu__list-item-collapsible + > .menu__link + > span::before { background-image: url("/img/ory-kratos-icon.svg"); } @@ -1079,14 +1085,23 @@ svg[class*="iconExternalLink"] { background-image: url("/img/ory-keto-icon.svg"); } -.sidebar-icon-oathkeeper > .menu__list-item-collapsible > .menu__link > span::before { +.sidebar-icon-oathkeeper + > .menu__list-item-collapsible + > .menu__link + > span::before { background-image: url("/img/ory-oathkeeper-icon.svg"); } -.sidebar-icon-polis > .menu__list-item-collapsible > .menu__link > span::before { +.sidebar-icon-polis + > .menu__list-item-collapsible + > .menu__link + > span::before { background-image: url("/img/ory-polis-icon.svg"); } -.sidebar-icon-network > .menu__list-item-collapsible > .menu__link > span::before { +.sidebar-icon-network + > .menu__list-item-collapsible + > .menu__link + > span::before { background-image: url("/img/ory-network-icon.svg"); }