+
+
-
-
-
{title}
-
- {content}
-
- {cta} ->
-
-
-
-
{cta}
+
-
+
+ )
+}
+
+function Logo({ className }: { className?: string }) {
+ return (
+
)
}
diff --git a/src/css/theme.css b/src/css/theme.css
index e905c7de9..330a6a505 100644
--- a/src/css/theme.css
+++ b/src/css/theme.css
@@ -1,11 +1,17 @@
@import url("./fonts.css");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
:root {
- --ifm-font-family-base: "Inter", sans-serif;
- --ifm-font-family-monospace: "JetBrains Mono", monospace;
+ --ifm-font-family-base-fallback: sans-serif;
+ --ifm-font-family-monospace-fallback: monospace;
+ --ifm-font-family-base: "InterVariable", var(--ifm-font-family-base-fallback);
+ --ifm-font-family-monospace: "JetBrains Mono",
+ var(--ifm-font-family-monospace-fallback);
--ifm-color-primary: #312e81; /* Indigo 900 */
--ifm-heading-color: #312e81; /* Indigo 900 - Color used for headings in text */
- --ifm-heading-font-family: "Inter";
+ --ifm-heading-font-family: "InterVariable";
--ifm-navbar-link-hover-color: #06b6d4; /* Cyan 500 */
--ifm-menu-color-active: #06b6d4; /* Cyan 500 - Active text in sidebar */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -16,8 +22,9 @@
@supports (font-variation-settings: normal) {
:root {
- --ifm-font-family-base: InterVariable;
- --ifm-heading-font-family: InterVariable;
+ --ifm-font-family-base: InterVariable, var(--ifm-font-family-base-fallback);
+ --ifm-heading-font-family: InterVariable,
+ var(--ifm-font-family-base-fallback);
}
}
@@ -75,3 +82,66 @@ svg[class*="iconExternalLink"] {
margin-top: 1em;
}
}
+
+.all-docs-link a:before {
+ content: "";
+ mask: url('data:image/svg+xml,
')
+ no-repeat 100% 100%;
+ display: flex;
+ height: 20px;
+ width: 20px;
+ mask-size: cover;
+ background-color: #2c3e50;
+ margin-right: 8px;
+ transition: transform 0.2s;
+}
+
+.all-docs-link a:hover:before {
+ transform: translateX(-4px);
+}
+
+.theme-doc-sidebar-item-link,
+.theme-doc-sidebar-item-category-level-2 {
+ font-size: 14px;
+}
+
+.theme-doc-sidebar-item-link-level-1 > a {
+ font-size: 16px;
+}
+
+.theme-doc-sidebar-item-link-level-2,
+.theme-doc-sidebar-item-category-level-2 {
+ border-left: 1px solid #eaecef;
+ margin-left: 0.5rem;
+}
+
+.theme-doc-sidebar-item-link .menu__link:hover,
+.theme-doc-sidebar-item-category .menu__link:hover,
+.theme-doc-sidebar-item-category .menu__list-item-collapsible:hover {
+ background-color: unset !important;
+ color: var(--ifm-color-primary);
+}
+
+.theme-doc-sidebar-item-link .menu__link--active {
+ background-color: unset !important;
+ color: var(--ifm-color-primary);
+}
+
+.theme-doc-sidebar-item-link:not(:first-child),
+.theme-doc-sidebar-item-category-level-2:not(:first-child) {
+ margin-top: 0;
+}
+
+.theme-doc-sidebar-item-link .menu__link {
+ padding: 0.5rem 0.75rem;
+}
+
+.config-editor .unsupported-field pre {
+ max-width: 100%;
+ overflow: hidden;
+ white-space: pre-wrap;
+}
+
+.config-editor p {
+ margin: unset;
+}
diff --git a/src/theme/KapaWidget.tsx b/src/theme/KapaWidget.tsx
new file mode 100644
index 000000000..88970fe20
--- /dev/null
+++ b/src/theme/KapaWidget.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from "react"
+import "./KapaWidget.css"
+
+export default function KapaWidget() {
+ const [isScriptLoaded, setIsScriptLoaded] = useState(false)
+
+ const loadKapaWidget = () => {
+ if (isScriptLoaded) {
+ return
+ }
+
+ const script = document.createElement("script")
+ script.src = "https://widget.kapa.ai/kapa-widget.bundle.js"
+ script.async = true
+ script.setAttribute(
+ "data-website-id",
+ "e89e7663-df2c-4c7f-974a-1bf8accdd615",
+ )
+ script.setAttribute("data-project-name", "Ory")
+ script.setAttribute("data-project-color", "#083344")
+ script.setAttribute(
+ "data-modal-disclaimer",
+ "By utilizing this chatbot, you consent to the collection and transmission of data to kapa.ai, which may include your IP address. Please be advised that your privacy and data protection are of utmost importance to us. We assure you that any data collected will be handled in compliance with applicable laws and regulations. For further details on how your data is processed and used, we encourage you to review our Privacy Policy. If you do not agree with these terms, we kindly request that you refrain from using this chatbot.",
+ )
+ script.setAttribute("data-modal-title", "Ory AI Copilot")
+ script.setAttribute("data-button-text", "Ask AI")
+ script.setAttribute("data-button-bg-color", "#083344")
+ script.setAttribute("data-project-logo", "/docs/img/kapa-logo.png")
+ script.setAttribute("data-consent-required", "true")
+ script.setAttribute("data-button-hide", "true")
+ script.setAttribute("data-modal-override-open-id", "kapa-ai-button")
+ script.setAttribute("data-modal-open-by-default", "true")
+ script.onload = () => setIsScriptLoaded(true)
+ document.body.appendChild(script)
+ }
+
+ return (
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..562a312ef
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./src/**/*.html",
+ "./src/**/*.js",
+ "./src/**/*.jsx",
+ "./src/**/*.ts",
+ "./src/**/*.tsx",
+ "./docs/**/*.mdx",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+ corePlugins: {
+ preflight: false,
+ },
+ blocklist: ["container"],
+}