mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-24 08:12:15 +00:00
docs: introduce versioned docs and migrate to fuma (#11166)
## Todos for release - [x] Configure Env in docs project on vercel - [x] Configure Root Path in the docs project on vercel - [ ] Remove old CSP https://github.com/zitadel/website/pull/1592 ## What we did This pull request migrates the project documentation from the old `docs/` directory to the new `apps/docs/` directory, introduces a new documentation system built with Next.js and Fumadocs, and updates all relevant references, configuration files, and documentation to reflect this change. It also adds new configuration and ignore files for the new documentation app, updates CI and linting to exclude the new docs from certain checks, and revises the contributing guidelines accordingly. **Documentation System Migration and New Docs App** * Migrated all documentation from `docs/` to `apps/docs/`, and updated all references in `README.md`, `CONTRIBUTING.md`, and other files to point to the new location. [[1]](diffhunk://#diff-eca12c0a30e25b4b46522ebf89465a03ba72a03f540796c979137931d8f92055L585-L640) [[2]](diffhunk://#diff-eca12c0a30e25b4b46522ebf89465a03ba72a03f540796c979137931d8f92055L660-R607) [[3]](diffhunk://#diff-eca12c0a30e25b4b46522ebf89465a03ba72a03f540796c979137931d8f92055L740-R687) [[4]](diffhunk://#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L2-R3) [[5]](diffhunk://#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L30-R30) * Added a new Next.js/Fumadocs-based documentation app under `apps/docs/`, including core app files, layouts, routing, search API, and a comprehensive `README.md` with development and contribution instructions. [[1]](diffhunk://#diff-5a1b07344a2c1b4d3f37b23ff1388b62cd9f57dea3c1cd23d8a0412b7602b132R1-R74) [[2]](diffhunk://#diff-462b9ad1eabbb7d1c29bb9c36e4931eb180fd7190900e6d2babf8f4d66ad1c28R1-R39) [[3]](diffhunk://#diff-e16ae25660ded787b10ac35dea96d5ecaacf895dae0afc8a9bd4382dc79a8c87R1-R7) [apps/docs/app/[[...slug]]/layout.tsxR1-R81](diffhunk://#diff-59e08acde4e805b7aeccef1dcf98f1d71dfc550777e6b9402085cee0e9fa4e0aR1-R81), [apps/docs/app/[[...slug]]/page.tsxR1-R79](diffhunk://#diff-e5df3f80d0fa01e12d63d81f29c57a9d14e846c78fd3beabb2ef768e38fd9580R1-R79), [[4]](diffhunk://#diff-389b34918e040cacaa87cd7201ffa462cc2b0b716736f537e3d3c660ac69353bR1-R7) [[5]](diffhunk://#diff-d3b03416d1c457b19f1c27b26f2db741412df841b875c26ccadc36e4522247f4R1-R29) [[6]](diffhunk://#diff-c8fb8339570a5305809be7c618e14705fd86390dc278e6ce8ba224a7bc8b0c3cR1-R25) **Configuration and Tooling Updates** * Updated `.github/workflows/codeql.yml`, `.golangci.yaml`, and `.github/dependabot.yml` to properly handle the new docs app: excluded `apps/docs` from certain checks, added npm dependency updates for the docs app, and excluded generated content. [[1]](diffhunk://#diff-12783128521e452af0cfac94b99b8d250413c516ec71fe6d97dbea666ff7ba27L8-R14) [[2]](diffhunk://#diff-9917ddc9f1c3304218f7269265b746d997c5c0615478177b5fceecd33ef47cb5R5-R6) [[3]](diffhunk://#diff-9917ddc9f1c3304218f7269265b746d997c5c0615478177b5fceecd33ef47cb5R126-R129) [[4]](diffhunk://#diff-dd4fbda47e51f1e35defb9275a9cd9c212ecde0b870cba89ddaaae65c5f3cd28R89-R106) * Updated `.devcontainer/devcontainer.json` to use the latest Go 1.25.3 version for consistency. **Licensing and Miscellaneous** * Added `apps/docs/` to the list of licensed directories in `LICENSING.md`. These changes ensure the documentation is now maintained in a modern, scalable system and all project tooling is updated to support the new structure. --------- Co-authored-by: Federico Coppede <[email protected]>
This commit is contained in:
Florian Forster
co-authored by
Federico Coppede
Federico Coppede
parent
7b6395c348
commit
d8ea041c56
@@ -0,0 +1,111 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import yaml from 'js-yaml';
|
||||
import { Check, X } from 'lucide-react';
|
||||
import { cn } from '@/utils/cn'; // Assuming utils/cn exists or I'll use clsx/tailwind-merge directly if not sure
|
||||
|
||||
// Fallback utility if generic cn doesn't exist, checking imports first is safer but I'll inline a simple merge if needed
|
||||
// Checking package.json I saw clsx and tailwind-merge are dependencies.
|
||||
|
||||
function classNames(...classes) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
export default function PermissionTable({ data }) {
|
||||
const { roles, permissions, matrix } = useMemo(() => {
|
||||
if (!data) return { roles: [], permissions: [], matrix: {} };
|
||||
|
||||
let parsedData = data;
|
||||
if (typeof data === 'string') {
|
||||
try {
|
||||
parsedData = yaml.load(data);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse YAML data:', e);
|
||||
return { roles: [], permissions: [], matrix: {} };
|
||||
}
|
||||
}
|
||||
|
||||
// 1. Identify all sources.
|
||||
const sources = [
|
||||
parsedData?.InternalAuthZ?.RolePermissionMappings,
|
||||
parsedData?.SystemAuthZ?.RolePermissionMappings,
|
||||
].filter(Boolean).flat();
|
||||
|
||||
// 2. Aggregate Data
|
||||
const roleMap = new Map();
|
||||
const allPermissions = new Set();
|
||||
|
||||
sources.forEach((mapping) => {
|
||||
const roleName = mapping.Role;
|
||||
const rolePerms = mapping.Permissions || [];
|
||||
|
||||
if (!roleMap.has(roleName)) {
|
||||
roleMap.set(roleName, new Set());
|
||||
}
|
||||
|
||||
rolePerms.forEach((perm) => {
|
||||
roleMap.get(roleName).add(perm);
|
||||
allPermissions.add(perm);
|
||||
});
|
||||
});
|
||||
|
||||
// 3. Sort for display
|
||||
const sortedRoles = Array.from(roleMap.keys()).sort();
|
||||
const sortedPermissions = Array.from(allPermissions).sort();
|
||||
|
||||
return {
|
||||
roles: sortedRoles,
|
||||
permissions: sortedPermissions,
|
||||
matrix: roleMap,
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
if (!roles.length) {
|
||||
return <div className="p-4 text-sm text-fd-muted-foreground bg-fd-muted rounded-md border border-fd-border">No permission data available.</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto my-6 rounded-lg border border-fd-border bg-fd-card shadow-sm">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="text-xs font-semibold text-fd-muted-foreground uppercase bg-fd-muted/50 border-b border-fd-border">
|
||||
<tr>
|
||||
<th scope="col" className="px-4 py-3 sticky left-0 z-10 bg-fd-muted/95 backdrop-blur shadow-[1px_0_0_0_rgba(0,0,0,0.1)] dark:shadow-[1px_0_0_0_rgba(255,255,255,0.1)]">
|
||||
Permission
|
||||
</th>
|
||||
{roles.map((role) => (
|
||||
<th key={role} scope="col" className="px-4 py-3 whitespace-nowrap text-center min-w-[100px]">
|
||||
{role.replace(/_/g, ' ')}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-fd-border">
|
||||
{permissions.map((perm) => (
|
||||
<tr key={perm} className="hover:bg-fd-accent/50 transition-colors">
|
||||
<th scope="row" className="px-4 py-2 font-medium text-fd-foreground whitespace-nowrap sticky left-0 z-10 bg-fd-card shadow-[1px_0_0_0_rgba(0,0,0,0.1)] dark:shadow-[1px_0_0_0_rgba(255,255,255,0.1)]">
|
||||
{perm}
|
||||
</th>
|
||||
{roles.map((role) => {
|
||||
const hasPermission = matrix.get(role).has(perm);
|
||||
return (
|
||||
<td
|
||||
key={`${role}-${perm}`}
|
||||
className={classNames(
|
||||
"px-4 py-2 text-center",
|
||||
hasPermission ? "bg-green-50/50 dark:bg-green-900/10" : ""
|
||||
)}
|
||||
>
|
||||
{hasPermission ? (
|
||||
<Check className="w-4 h-4 text-green-600 dark:text-green-400 mx-auto" strokeWidth={3} />
|
||||
) : (
|
||||
<span className="sr-only">No</span>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
'use client';
|
||||
import { defineClientConfig } from 'fumadocs-openapi/ui/client';
|
||||
|
||||
export default defineClientConfig();
|
||||
@@ -0,0 +1,27 @@
|
||||
import { createOpenAPI } from 'fumadocs-openapi/server';
|
||||
import { createAPIPage } from 'fumadocs-openapi/ui';
|
||||
import path from 'path';
|
||||
import client from './api-page.client';
|
||||
|
||||
export function APIPage({ document, operations }: { document: string; operations: any[] }) {
|
||||
|
||||
|
||||
if (!path.isAbsolute(document) && !document.startsWith('openapi/')) {
|
||||
throw new Error(`APIPage document path MUST start with 'openapi/'. Received: ${document}`);
|
||||
}
|
||||
|
||||
const absoluteDocument = path.isAbsolute(document)
|
||||
? document
|
||||
: path.join(process.cwd(), 'openapi', document.slice('openapi/'.length));
|
||||
|
||||
const openapi = createOpenAPI({
|
||||
input: [absoluteDocument],
|
||||
});
|
||||
|
||||
const InnerAPIPage = createAPIPage(openapi, {
|
||||
client,
|
||||
});
|
||||
|
||||
return <InnerAPIPage document={absoluteDocument} operations={operations} />;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "@/css/apicard.module.css";
|
||||
|
||||
export function ApiCard({ type, children }) {
|
||||
let classes = "";
|
||||
switch (type) {
|
||||
case "AUTH":
|
||||
classes = "bg-green-500/10 dark:bg-green-500/20";
|
||||
break;
|
||||
case "MGMT":
|
||||
classes = "bg-blue-500/10 dark:bg-blue-500/20";
|
||||
break;
|
||||
case "ADMIN":
|
||||
classes = "bg-red-500/10 dark:bg-red-500/20";
|
||||
break;
|
||||
case "SYSTEM":
|
||||
classes = "bg-yellow-500/10 dark:bg-yellow-500/20";
|
||||
break;
|
||||
case "ASSET":
|
||||
classes = "bg-black/10 dark:bg-black/20";
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.apicard} flex mb-4 flex-row p-4 rounded-lg ${classes} `}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
export function B2B() {
|
||||
return (
|
||||
<div className="flexrowbetween">
|
||||
<div className="b2borg">
|
||||
<span>Octagon <small>(owner)</small></span>
|
||||
<div className="b2bproject">
|
||||
<span>Portal Project</span>
|
||||
|
||||
<div className="b2bapp">
|
||||
<strong>WEBAPP</strong>
|
||||
</div>
|
||||
|
||||
<span className="b2bprojectrole">reader, writer, admin</span>
|
||||
</div>
|
||||
|
||||
<div className="b2buser">
|
||||
Bill <small>(admin)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg className="arrowright" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
|
||||
<div className="b2borg">
|
||||
<span>Pentagon</span>
|
||||
<div className="b2bproject">
|
||||
<span>Portal Project <small>(grant)</small></span>
|
||||
|
||||
<div className="b2bapp">
|
||||
<strong>WEBAPP</strong>
|
||||
</div>
|
||||
|
||||
<span className="b2bprojectrole">reader, writer</span>
|
||||
</div>
|
||||
|
||||
<div className="b2buser">
|
||||
Dimitri <small>(writer)</small>
|
||||
</div>
|
||||
|
||||
<div className="b2buser">
|
||||
Michael <small>(reader)</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import Chart from "react-google-charts";
|
||||
|
||||
export function BenchmarkChart({ testResults = [], height = '500px' } = {}) {
|
||||
if (!Array.isArray(testResults)) {
|
||||
console.error("BenchmarkChart: testResults is not an array. Received:", testResults);
|
||||
return <p>Error: Benchmark data is not available or in the wrong format.</p>;
|
||||
}
|
||||
|
||||
if (testResults.length === 0) {
|
||||
return <p>No benchmark data to display.</p>;
|
||||
}
|
||||
|
||||
const dataPerMetric = new Map();
|
||||
let maxVValue = 0;
|
||||
|
||||
testResults.forEach((result) => {
|
||||
if (!result || typeof result.metric_name === 'undefined') {
|
||||
console.warn("BenchmarkChart: Skipping invalid result item:", result);
|
||||
return;
|
||||
}
|
||||
if (!dataPerMetric.has(result.metric_name)) {
|
||||
dataPerMetric.set(result.metric_name, [
|
||||
[
|
||||
{type:"datetime", label: "timestamp"},
|
||||
{type:"number", label: "p50"},
|
||||
{type:"number", label: "p95"},
|
||||
{type:"number", label: "p99"},
|
||||
],
|
||||
]);
|
||||
}
|
||||
if (result.p99 !== undefined && result.p99 > maxVValue) {
|
||||
maxVValue = result.p99;
|
||||
}
|
||||
dataPerMetric.get(result.metric_name).push([
|
||||
result.timestamp ? new Date(result.timestamp) : null,
|
||||
result.p50,
|
||||
result.p95,
|
||||
result.p99,
|
||||
]);
|
||||
});
|
||||
const options = {
|
||||
legend: { position: 'bottom' },
|
||||
focusTarget: 'category',
|
||||
hAxis: {
|
||||
title: 'timestamp',
|
||||
},
|
||||
vAxis: {
|
||||
title: 'latency (ms)',
|
||||
maxValue: maxVValue > 0 ? maxVValue : undefined,
|
||||
},
|
||||
title: ''
|
||||
};
|
||||
const charts = [];
|
||||
|
||||
dataPerMetric.forEach((data, metric) => {
|
||||
const opt = { ...options };
|
||||
opt.title = metric;
|
||||
charts.push(
|
||||
<Chart
|
||||
key={metric}
|
||||
chartType="LineChart"
|
||||
width="100%"
|
||||
height={height}
|
||||
options={opt}
|
||||
data={data}
|
||||
legendToggle
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
if (charts.length === 0) {
|
||||
return <p>No chart data could be generated.</p>;
|
||||
}
|
||||
|
||||
return <>{charts}</>;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Column({ children }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">{children}</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
export default function Admonition({ type, title, children, icon }: any) {
|
||||
let calloutType: 'info' | 'warn' | 'error' = 'info';
|
||||
switch (type) {
|
||||
case 'note': calloutType = 'info'; break;
|
||||
case 'tip': calloutType = 'info'; break;
|
||||
case 'info': calloutType = 'info'; break;
|
||||
case 'warning': calloutType = 'warn'; break;
|
||||
case 'danger': calloutType = 'error'; break;
|
||||
case 'caution': calloutType = 'warn'; break;
|
||||
}
|
||||
|
||||
return (
|
||||
<Callout title={title} type={calloutType} icon={icon}>
|
||||
{children}
|
||||
</Callout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function BrowserOnly({ children, fallback }: any) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
if (!mounted) return fallback || null;
|
||||
|
||||
return children();
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function CodeBlock({ children, language, title, className, showLineNumbers: _showLineNumbers }: any) {
|
||||
return (
|
||||
<div className="my-4">
|
||||
{title && <div className="bg-secondary text-secondary-foreground px-4 py-2 text-sm font-medium rounded-t-md">{title}</div>}
|
||||
<pre className={`p-4 overflow-x-auto bg-secondary/50 rounded-b-md ${title ? 'rounded-t-none' : 'rounded-md'} ${className || ''}`}>
|
||||
<code className={language ? `language-${language}` : ''}>
|
||||
{children}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { Cards, Card } from 'fumadocs-ui/components/card';
|
||||
|
||||
export default function DocCardList({ items }: { items?: any[] }) {
|
||||
// If items are provided (manual list), render them
|
||||
if (items) {
|
||||
return (
|
||||
<Cards>
|
||||
{items.map((item, index) => (
|
||||
<Card key={index} href={item.href} title={item.label} />
|
||||
))}
|
||||
</Cards>
|
||||
);
|
||||
}
|
||||
|
||||
// If no items, it's likely an auto-generated list for the current sidebar category.
|
||||
// Fumadocs doesn't have a direct equivalent to "current sidebar category items" in a component easily accessible here without context.
|
||||
// For now, we'll render a placeholder or nothing to avoid build errors.
|
||||
// In a real migration, we'd use `useTreeContext` or similar if available, or rely on Fumadocs' index page generation.
|
||||
return (
|
||||
<div className="admonition admonition-info alert alert--info">
|
||||
<div className="admonition-heading">
|
||||
<h5>DocCardList Placeholder</h5>
|
||||
</div>
|
||||
<div className="admonition-content">
|
||||
<p>Auto-generated card lists are not yet fully supported in the migration.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Tabs as FumadocsTabs, Tab as FumadocsTab } from 'fumadocs-ui/components/tabs';
|
||||
import React, { isValidElement } from 'react';
|
||||
|
||||
export function TabItem({ value, label: _label, children, default: _isDefault, className, attributes }: any) {
|
||||
return <FumadocsTab value={value} className={className} {...attributes}>{children}</FumadocsTab>;
|
||||
}
|
||||
|
||||
export default function Tabs({ children, defaultValue, values, groupId, className }: any) {
|
||||
let items: string[] = [];
|
||||
|
||||
const childrenArray = React.Children.toArray(children);
|
||||
|
||||
if (values) {
|
||||
items = values.map((v: any) => v.label);
|
||||
} else {
|
||||
childrenArray.forEach((child) => {
|
||||
if (isValidElement(child)) {
|
||||
const props = child.props as any;
|
||||
const label = props.label || props.value;
|
||||
items.push(label);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const newChildren = childrenArray.map((child, index) => {
|
||||
if (isValidElement(child)) {
|
||||
const props = child.props as any;
|
||||
let label = props.label;
|
||||
if (!label && values) {
|
||||
const valObj = values.find((v: any) => v.value === props.value);
|
||||
if (valObj) label = valObj.label;
|
||||
}
|
||||
if (!label) label = props.value;
|
||||
|
||||
return <FumadocsTab key={index} value={label} {...props}>{props.children}</FumadocsTab>;
|
||||
}
|
||||
return child;
|
||||
});
|
||||
|
||||
let newDefaultValue = defaultValue;
|
||||
if (defaultValue && values) {
|
||||
const valObj = values.find((v: any) => v.value === defaultValue);
|
||||
if (valObj) newDefaultValue = valObj.label;
|
||||
} else if (defaultValue) {
|
||||
const child = childrenArray.find((c: any) => (c as any).props.value === defaultValue);
|
||||
if (child) {
|
||||
newDefaultValue = (child as any).props.label || (child as any).props.value;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<FumadocsTabs items={items} defaultValue={newDefaultValue} groupId={groupId} className={className}>
|
||||
{newChildren}
|
||||
</FumadocsTabs>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
import Image from 'next/image';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function ThemedImage({ sources, alt, ...props }: any) {
|
||||
const { resolvedTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
if (!mounted) return <Image src={sources.light} alt={alt} {...props} />;
|
||||
|
||||
const src = resolvedTheme === 'dark' ? sources.dark : sources.light;
|
||||
|
||||
return <Image src={src} alt={alt} {...props} />;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { mixpanelClient } from '@/utils/mixpanel';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { ThumbsUp, ThumbsDown } from 'lucide-react';
|
||||
import { cn } from '@/utils/cn';
|
||||
|
||||
export function Feedback() {
|
||||
const pathname = usePathname();
|
||||
const [voted, setVoted] = useState<boolean | null>(null);
|
||||
|
||||
const handleVote = (useful: boolean) => {
|
||||
setVoted(useful);
|
||||
mixpanelClient.track('helpfulness_vote', {
|
||||
path: pathname,
|
||||
useful: useful,
|
||||
});
|
||||
};
|
||||
|
||||
if (voted !== null) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2 border-t pt-8 mt-8">
|
||||
<p className="text-sm text-fd-muted-foreground">
|
||||
Thanks for your feedback!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 border-t pt-8 mt-8">
|
||||
<p className="text-sm text-fd-muted-foreground">Was this page helpful?</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleVote(true)}
|
||||
className={cn(
|
||||
"p-2 rounded-md transition-colors border hover:bg-fd-accent hover:text-fd-accent-foreground border-fd-border text-fd-muted-foreground"
|
||||
)}
|
||||
aria-label="Helpful"
|
||||
>
|
||||
<ThumbsUp className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleVote(false)}
|
||||
className={cn(
|
||||
"p-2 rounded-md transition-colors border hover:bg-fd-accent hover:text-fd-accent-foreground border-fd-border text-fd-muted-foreground"
|
||||
)}
|
||||
aria-label="Not helpful"
|
||||
>
|
||||
<ThumbsDown className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import { Tile } from "./tile";
|
||||
import frameworks from "../frameworks.json";
|
||||
|
||||
export function Frameworks({ filter }) {
|
||||
const filteredFrameworks = frameworks.filter((framework) => {
|
||||
return filter ? filter(framework) : true;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="tile-wrapper">
|
||||
{filteredFrameworks.map((framework) => (
|
||||
<Tile
|
||||
key={framework.id || framework.title}
|
||||
title={framework.title}
|
||||
imageSource={framework.imgSrcDark}
|
||||
imageSourceLight={framework.imgSrcLight}
|
||||
link={framework.docsLink}
|
||||
external={framework.external}
|
||||
></Tile>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import type { SharedProps } from "fumadocs-ui/components/dialog/search";
|
||||
import {
|
||||
InkeepModalSearchAndChat,
|
||||
type InkeepModalSearchAndChatProps,
|
||||
} from "@inkeep/cxkit-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function CustomDialog(props: SharedProps) {
|
||||
const [syncTarget, setSyncTarget] = useState<HTMLElement | null>(null);
|
||||
const { open, onOpenChange } = props;
|
||||
// We do this because document is not available in the server
|
||||
useEffect(() => {
|
||||
setSyncTarget(document.documentElement);
|
||||
}, []);
|
||||
|
||||
const config: InkeepModalSearchAndChatProps = {
|
||||
baseSettings: {
|
||||
apiKey: process.env.NEXT_PUBLIC_INKEEP_API_KEY,
|
||||
primaryBrandColor: '#425b76',
|
||||
organizationDisplayName: "Zitadel",
|
||||
colorMode: {
|
||||
sync: {
|
||||
target: syncTarget,
|
||||
attributes: ["class"],
|
||||
isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
|
||||
},
|
||||
},
|
||||
},
|
||||
modalSettings: {
|
||||
isOpen: open,
|
||||
onOpenChange,
|
||||
// optional settings
|
||||
},
|
||||
searchSettings: {
|
||||
// optional settings
|
||||
},
|
||||
aiChatSettings: {
|
||||
aiAssistantName: 'Zitadel AI Assistant',
|
||||
chatSubjectName: 'Zitadel',
|
||||
placeholder: 'How can I enable MFA?',
|
||||
introMessage: 'Hey! I’m the Zitadel AI assistant 🤖 — throw your questions my way!',
|
||||
aiAssistantAvatar: '/icons/favicon-32x32.png',
|
||||
userAvatar: '/icons/user.png',
|
||||
exampleQuestionsLabel: 'Example Questions:',
|
||||
exampleQuestions: [
|
||||
'What is an Instance?',
|
||||
'What is an Organization?',
|
||||
'How to create an Action?',
|
||||
'How to integrate Zitadel to my React app?',
|
||||
],
|
||||
isFirstExampleQuestionHighlighted: true,
|
||||
shouldOpenLinksInNewTab: true,
|
||||
isCopyChatButtonVisible: true,
|
||||
disclaimerSettings: {
|
||||
isEnabled: true,
|
||||
label: 'AI Assistant',
|
||||
tooltip: 'Responses are AI-generated and may require verification.',
|
||||
},
|
||||
toolbarButtonLabels: {
|
||||
clear: 'Start Over',
|
||||
share: 'Share Chat',
|
||||
getHelp: 'Get Help',
|
||||
stop: 'Stop',
|
||||
copyChat: 'Copy Chat',
|
||||
},
|
||||
},
|
||||
};
|
||||
return <InkeepModalSearchAndChat {...config} />;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import { initMixpanel, mixpanelClient, optInTracking, optOutTracking } from '@/utils/mixpanel';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default function MixpanelProvider({ children }: { children: React.ReactNode }) {
|
||||
useEffect(() => {
|
||||
const setup = async () => {
|
||||
await initMixpanel();
|
||||
|
||||
const CookieConsent = await import('vanilla-cookieconsent');
|
||||
const cookie = CookieConsent.getCookie();
|
||||
|
||||
// @ts-ignore
|
||||
if (!cookie || !cookie.services || !cookie.services.analytics) {
|
||||
// We only send data when people opt-in, not just if they have not opted out.
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
const hasMixpanelConsent = cookie?.services?.analytics?.indexOf('mixpanel') !== -1;
|
||||
if (hasMixpanelConsent) {
|
||||
optInTracking();
|
||||
} else {
|
||||
optOutTracking();
|
||||
}
|
||||
};
|
||||
setup().catch((error) => {
|
||||
console.error('Error setting up Mixpanel:', error);
|
||||
});
|
||||
|
||||
const handleConsentChange = async () => {
|
||||
const CookieConsent = await import('vanilla-cookieconsent');
|
||||
const cookie = CookieConsent.getCookie();
|
||||
// @ts-ignore
|
||||
const hasMixpanelConsent = cookie?.services?.analytics?.indexOf('mixpanel') !== -1;
|
||||
if (hasMixpanelConsent) {
|
||||
optInTracking();
|
||||
} else {
|
||||
optOutTracking();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('cc:onChange:mixpanel', handleConsentChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('cc:onChange:mixpanel', handleConsentChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import React from "react";
|
||||
|
||||
export function PiiTable() {
|
||||
|
||||
const pii = [
|
||||
{
|
||||
type: "Basic data",
|
||||
examples: [
|
||||
'Names',
|
||||
'Email addresses',
|
||||
'User names'
|
||||
],
|
||||
subjects: "All users as uploaded by Customer."
|
||||
},
|
||||
{
|
||||
type: "Login data",
|
||||
examples: [
|
||||
'Randomly generated ID',
|
||||
'Passwords',
|
||||
'Public keys / certificates ("FIDO2", "U2F", "x509", ...)',
|
||||
'User names or identifiers of external login providers',
|
||||
'Phone numbers',
|
||||
],
|
||||
subjects: "All users as uploaded and feature use by Customer."
|
||||
},
|
||||
{
|
||||
type: "Profile data",
|
||||
examples: [
|
||||
'Profile pictures',
|
||||
'Gender',
|
||||
'Languages',
|
||||
'Nicknames or Display names',
|
||||
'Phone numbers',
|
||||
'Metadata'
|
||||
],
|
||||
subjects: "All users as uploaded by Customer"
|
||||
},
|
||||
{
|
||||
type: "Communication data",
|
||||
examples: [
|
||||
'Emails',
|
||||
'Chats',
|
||||
'Call metadata',
|
||||
'Call recording and transcripts',
|
||||
'Form submissions',
|
||||
],
|
||||
subjects: "Customers and users who communicate with us directly (e.g. support, chat)."
|
||||
},
|
||||
{
|
||||
type: "Payment data",
|
||||
examples: [
|
||||
'Billing address',
|
||||
'Payment information',
|
||||
'Customer number',
|
||||
'Support Customer history',
|
||||
'Credit rating information',
|
||||
],
|
||||
subjects: "Customers who use services that require payment. Credit rating information: Only customers who pay by invoice."
|
||||
},
|
||||
{
|
||||
type: "Analytics data",
|
||||
examples: [
|
||||
'Usage metrics',
|
||||
'User behavior',
|
||||
'User journeys (eg, Milestones)',
|
||||
'Telemetry data',
|
||||
'Client-side anonymized session replay',
|
||||
],
|
||||
subjects: "Customers who use our services."
|
||||
},
|
||||
{
|
||||
type: "Usage metadata",
|
||||
examples: [
|
||||
'User agent',
|
||||
'IP addresses',
|
||||
'Operating system',
|
||||
'Time and date',
|
||||
'URL',
|
||||
'Referrer URL',
|
||||
'Accepted Language',
|
||||
],
|
||||
subjects: "All users"
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<table className="text-xs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type of personal data</th>
|
||||
<th>Examples</th>
|
||||
<th>Affected data subjects</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
pii.map((row) => (
|
||||
<tr key={row.type}>
|
||||
<td>{row.type}</td>
|
||||
<td>
|
||||
<ul>
|
||||
{row.examples.map((example) => (
|
||||
<li key={example}>{example}</li>
|
||||
))}
|
||||
</ul>
|
||||
</td>
|
||||
<td>{row.subjects}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import Script from 'next/script';
|
||||
|
||||
export default function PlausibleProvider() {
|
||||
const domain = process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN || 'zitadel.com';
|
||||
|
||||
return (
|
||||
<Script
|
||||
defer
|
||||
data-domain={domain}
|
||||
data-api="/docs/pl/api/event"
|
||||
src="/docs/pl/js/script.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
export function ResponsivePlayer({ url }) {
|
||||
const getYouTubeId = (url) => {
|
||||
if (!url) return null;
|
||||
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
||||
const match = url.match(regExp);
|
||||
return (match && match[2].length === 11) ? match[2] : null;
|
||||
};
|
||||
|
||||
const videoId = getYouTubeId(url);
|
||||
|
||||
if (videoId) {
|
||||
return (
|
||||
/* 1. Removed 'player-wrapper' class to avoid global.css conflict (double height).
|
||||
2. Reduced max-width to 'max-w-2xl' so it fits better in the text flow.
|
||||
*/
|
||||
<div className="relative w-full max-w-2xl mx-auto h-0 pb-[56.25%] mb-8 rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-800 bg-black shadow-md">
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
title="YouTube video player"
|
||||
className="absolute top-0 left-0 w-full h-full"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 mb-8 border border-red-200 bg-red-50 text-red-600 rounded-lg text-sm">
|
||||
Video source not supported: {url}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
import styles from '@/css/tile.module.css';
|
||||
|
||||
export function Tile({ title, imageSource, imageSourceLight, link, external }) {
|
||||
return (
|
||||
<a
|
||||
href={link}
|
||||
className={styles.tile}
|
||||
target={external ? "_blank" : "_self"}
|
||||
>
|
||||
<h3>{title}</h3>
|
||||
<img
|
||||
className={imageSourceLight ? "hideonlight" : ""}
|
||||
src={imageSource}
|
||||
alt={title}
|
||||
width={70}
|
||||
height={70}
|
||||
/>
|
||||
{imageSourceLight && (
|
||||
<img
|
||||
className={imageSourceLight ? "hideondark" : ""}
|
||||
src={imageSourceLight}
|
||||
alt={title}
|
||||
width={70}
|
||||
height={70}
|
||||
/>
|
||||
)}
|
||||
{external && (
|
||||
<div className={styles.external}>
|
||||
<i className="las la-external-link-alt"></i>
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
interface DocVersion {
|
||||
param: string;
|
||||
label: string;
|
||||
url: string;
|
||||
ref: string;
|
||||
refType: string;
|
||||
type?: 'external';
|
||||
}
|
||||
|
||||
import rawVersions from '../content/versions.json';
|
||||
const versions = rawVersions as DocVersion[];
|
||||
|
||||
export function VersionSelector() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
|
||||
// Handle basePath issues: usePathname() typically returns path relative to basePath if configured?
|
||||
// But purely relying on that is tricky. Let's normalize.
|
||||
// If pathname starts with /docs, assume it's the full path and we strip it for logic,
|
||||
// then let router handle re-adding it if needed (or we check behaviors).
|
||||
// Actually, Next.js router.push() expects path relative to basePath usually?
|
||||
// Let's implement robust segment swapping.
|
||||
|
||||
const normalizePath = (p: string) => {
|
||||
if (p.startsWith('/docs')) return p.slice(5) || '/';
|
||||
return p;
|
||||
};
|
||||
|
||||
const normalizedPath = normalizePath(pathname);
|
||||
|
||||
const currentVersionObj = versions.find((v) => {
|
||||
if (!v.param || v.param === 'latest') return false;
|
||||
return normalizedPath.startsWith(`/${v.param}`);
|
||||
});
|
||||
|
||||
const currentVersion = currentVersionObj ? currentVersionObj.param : 'latest';
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const value = e.target.value;
|
||||
const version = versions.find((v) => (v.param || v.label) === value);
|
||||
|
||||
if (!version) return;
|
||||
|
||||
if (!version.param) return;
|
||||
|
||||
// Calculate the 'tail' of the path (content path)
|
||||
let tail = normalizedPath;
|
||||
if (currentVersion !== 'latest') {
|
||||
// Strip current version prefix
|
||||
// e.g. /v4.10/foo -> /foo
|
||||
tail = normalizedPath.replace(new RegExp(`^/${currentVersion}`), '') || '/';
|
||||
}
|
||||
|
||||
// Construct new path
|
||||
let newPath = tail;
|
||||
if (version.param !== 'latest') {
|
||||
// Add new version prefix
|
||||
// e.g. /foo -> /v4.9/foo
|
||||
// Handle root slash
|
||||
if (tail === '/') {
|
||||
newPath = `/${version.param}`;
|
||||
} else {
|
||||
newPath = `/${version.param}${tail}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Next.js router handles basePath automatically if configured correctly.
|
||||
// If we push '/v4.10', it becomes '/docs/v4.10'.
|
||||
router.push(newPath);
|
||||
};
|
||||
|
||||
return (
|
||||
<select
|
||||
value={currentVersion}
|
||||
onChange={handleChange}
|
||||
className="p-2 bg-transparent text-sm font-medium rounded-md border border-fd-border hover:bg-fd-accent/50 focus:outline-none focus:ring-2 focus:ring-fd-ring text-fd-foreground w-full mb-4"
|
||||
>
|
||||
{versions.map((v) => (
|
||||
<option
|
||||
key={v.param || v.label}
|
||||
value={v.param || v.label}
|
||||
className="bg-fd-background text-fd-foreground"
|
||||
>
|
||||
{v.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user