Skip to content

Use css variables and tailwind styles in custom components #804

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Use css variables and tailwind styles in custom components #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/articles/step-2-add-rate-limiting-local.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ limiter.
1. Add the rate-limiting Policy

Open the local **Route Designer** by navigating to http://localhost:9100/.
Select your route and click **Add Policy** on the incoming Requeset policies
Select your route and click **Add Policy** on the incoming Request policies
section.

<BrowserScreenshot url="http://localhost:9100/?path=routes.oas.json">
Expand Down
2 changes: 1 addition & 1 deletion docs/articles/step-3-add-api-key-auth-local.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ Let's get started.
1. Add the API Key Authentication Policy

Open the local **Route Designer** by navigating to http://localhost:9100/.
Select your route and click **Add Policy** on the incoming Requeset policies
Select your route and click **Add Policy** on the incoming Request policies
section.

<BrowserScreenshot url="http://localhost:9100/?path=routes.oas.json">
Expand Down
3 changes: 2 additions & 1 deletion scripts/generate-cli-docs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,8 @@ async function createCommandPage(
}

if (command.usage) {
props.push(formatJsxProp("usage", command.usage));
// Wrap long usage commands for better readability
props.push(formatJsxProp("usage", wrapCliCommand(command.usage)));
}

// Get custom content from partial files
Expand Down
165 changes: 21 additions & 144 deletions src/BrowserScreenshot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import type { CSSProperties, PropsWithChildren, ReactElement } from "react";
import type { PropsWithChildren, ReactElement } from "react";

interface BrowserScreenshotProps {
url?: string;
browserTheme?: "light" | "dark";
browserShadow?: string;
borderRadius?: number;
className?: string;
style?: CSSProperties;
size?: "sm" | "md" | "lg";
}

Expand All @@ -19,162 +14,51 @@ const marginClasses = {
export function BrowserScreenshot({
children,
url = "https://example.com",
browserTheme = "light",
browserShadow = "0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04)",
borderRadius = 8,
className = "",
style,
size,
}: PropsWithChildren<BrowserScreenshotProps>): ReactElement {
const isDark = browserTheme === "dark";

const browserWindowStyle: CSSProperties = {
borderRadius: `${borderRadius}px`,
overflow: "hidden",
boxShadow: browserShadow,
backgroundColor: isDark ? "#1a1a1a" : "#fafafa",
border: `1px solid ${isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)"}`,
margin: "0 auto",
maxWidth: "90%",
...style,
};

const browserBarStyle: CSSProperties = {
height: "40px",
backgroundColor: isDark ? "#262626" : "#f6f6f6",
display: "flex",
alignItems: "center",
padding: "0 16px",
gap: "16px",
position: "relative" as const,
};

const trafficLightStyle: CSSProperties = {
display: "flex",
gap: "8px",
alignItems: "center",
};

const dotStyle: CSSProperties = {
width: "12px",
height: "12px",
borderRadius: "50%",
};

const navigationStyle: CSSProperties = {
display: "flex",
gap: "16px",
alignItems: "center",
};

const navButtonStyle: CSSProperties = {
width: "14px",
height: "14px",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
opacity: 0.6,
};

const urlBarStyle: CSSProperties = {
flex: 1,
maxWidth: "320px",
height: "28px",
backgroundColor: isDark ? "#1a1a1a" : "#fafafa",
border: `1px solid ${isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"}`,
borderRadius: "20px",
padding: "0 12px",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "13px",
color: isDark ? "#888888" : "#666666",
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
};

const contentStyle: CSSProperties = {
backgroundColor: "#ffffff",
display: "block",
};

const marginClass = size
? marginClasses[size]
? marginClasses[size]
: "mx-auto"
: "mx-auto";
const marginClass = size ? (marginClasses[size] ?? "mx-auto") : "mx-auto";

return (
<div
className={`[&>p]:m-0 [&>p]:p-0 [&>p>img]:m-0 [&>p>img]:p-0 my-8 ${marginClass}`}
>
<div
className={`browser-screenshot-wrapper ${className}`}
style={browserWindowStyle}
>
<style
dangerouslySetInnerHTML={{
__html: `
.browser-screenshot-wrapper img {
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
max-width: 100% !important;
height: auto !important;
}
.browser-screenshot-wrapper p {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
`,
}}
/>
<div style={browserBarStyle}>
<div style={trafficLightStyle}>
<div className="overflow-hidden mx-auto max-w-[90%] rounded-lg shadow-lg border border-border bg-card [&_img]:!border-0 [&_img]:!rounded-none [&_img]:!p-0 [&_img]:!m-0 [&_img]:!block [&_img]:!max-w-full [&_img]:!h-auto [&_p]:!m-0 [&_p]:!p-0 [&_p]:!leading-[0]">
<div className="h-10 flex items-center px-4 gap-4 relative bg-gray-100 dark:bg-gray-900">
<div className="flex gap-2 items-center">
<div
style={{
...dotStyle,
backgroundColor: "#FE5F57",
}}
className="w-3 h-3 rounded-full"
style={{ backgroundColor: "#FE5F57" }}
/>
<div
style={{
...dotStyle,
backgroundColor: "#FEBB2E",
}}
className="w-3 h-3 rounded-full"
style={{ backgroundColor: "#FEBB2E" }}
/>
<div
style={{
...dotStyle,
backgroundColor: "#26C941",
}}
className="w-3 h-3 rounded-full"
style={{ backgroundColor: "#26C941" }}
/>
</div>
<div style={navigationStyle}>
<div style={navButtonStyle}>
<svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
<div className="flex gap-4 items-center">
<div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
<svg viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.46966 13.7803L6.99999 14.3107L8.06065 13.25L7.53032 12.7197L3.56065 8.75001H14.25H15V7.25001H14.25H3.56065L7.53032 3.28034L8.06065 2.75001L6.99999 1.68935L6.46966 2.21968L1.39644 7.2929C1.00592 7.68342 1.00592 8.31659 1.39644 8.70711L6.46966 13.7803Z"
/>
</svg>
</div>
<div style={navButtonStyle}>
<svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
<div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
<svg viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z"
/>
</svg>
</div>
<div style={navButtonStyle}>
<svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
<div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
<svg viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
Expand All @@ -183,20 +67,13 @@ export function BrowserScreenshot({
</svg>
</div>
</div>
<div style={urlBarStyle}>
<span
style={{
fontSize: "13px",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
<div className="flex-1 max-w-xs h-7 rounded-full px-3 flex items-center justify-center text-[13px] font-sans bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400">
<span className="text-[13px] whitespace-nowrap overflow-hidden text-ellipsis">
{url}
</span>
</div>
</div>
<div style={contentStyle}>{children}</div>
<div className="bg-card block">{children}</div>
</div>
</div>
);
Expand Down
25 changes: 14 additions & 11 deletions src/BundlesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,19 @@ export const BundlesTable = () => {

return (
<table className="w-full border-collapse text-sm">
<tr className="bg-gray-50 border-b">
<th className="px-3 py-2 text-left font-medium text-gray-600">
<tr className="bg-secondary border-b">
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
Module
</th>
<th className="px-3 py-2 text-left font-medium text-gray-600">
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
Status
</th>
<th className="px-3 py-2 text-left font-medium text-gray-600">
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
Version
</th>{" "}
<th className="px-3 py-2 text-left font-medium text-gray-600">Notes</th>
<th className="px-3 py-2 text-left font-medium text-muted-foreground">
Notes
</th>
</tr>
{data?.bundles
.filter((bundle) => bundle.isPublic)
Expand All @@ -52,16 +54,17 @@ export const BundlesTable = () => {
let status = issue?.status ?? "Unknown";

const statusClass = {
Unknown: "bg-gray-200 text-gray-700",
Issues: "bg-red-100 text-red-800",
Working: "bg-green-200 text-green-800",
Unknown: "bg-secondary text-foreground",
Issues: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
Working:
"bg-green-200 text-green-800 dark:bg-green-900 dark:text-green-200",
};

return (
<tr className="border-b hover:bg-gray-50" key={i}>
<tr className="border-b hover:bg-accent" key={i}>
<td className="px-3 py-2 align-top">
<a
className="text-blue-600 hover:underline font-medium"
className="text-primary hover:underline font-medium"
href={
bundle.url ?? `https://www.npmjs.com/package/${bundle.name}`
}
Expand All @@ -80,7 +83,7 @@ export const BundlesTable = () => {
{bundle.version}
</td>

<td className="px-3 py-2 align-top text-gray-700 text-xs">
<td className="px-3 py-2 align-top text-foreground text-xs">
{notes}
</td>
</tr>
Expand Down
20 changes: 9 additions & 11 deletions src/CliCommand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const CliCommand: React.FC<CliCommandProps> = ({
<h2 className="text-2xl font-bold mb-6">Examples</h2>
{examples.map(([cmd, desc], index) => (
<div key={index} className="mb-6">
<p className="mb-2 text-gray-700">{desc}</p>
<p className="mb-2 text-foreground">{desc}</p>
<SyntaxHighlight language="bash">
{cmd.replace(/\$0/g, "zuplo")}
</SyntaxHighlight>
Expand All @@ -184,53 +184,51 @@ export const CliCommand: React.FC<CliCommandProps> = ({
<code>--{option.name}</code>
</h3>
{option.description && (
<p className="mb-3 text-gray-700">{option.description}</p>
<p className="mb-3 text-foreground">{option.description}</p>
)}
<div className="text-sm text-gray-600">
<div className="text-sm text-muted-foreground">
{option.type && (
<span className="mr-3">
Type:{" "}
<code className="bg-gray-100 px-1 rounded">
{option.type}
</code>
<code className="bg-muted px-1 rounded">{option.type}</code>
</span>
)}
{option.default !== undefined && (
<span className="mr-3">
Default:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
{JSON.stringify(option.default)}
</code>
</span>
)}
{option.choices && option.choices.length > 0 && (
<span className="mr-3">
Choices:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
{option.choices.join(", ")}
</code>
</span>
)}
{option.alias && option.alias.length > 0 && (
<span className="mr-3">
Alias:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
-{option.alias.join(", -")}
</code>
</span>
)}
{option.envVar && (
<span className="mr-3">
Env:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
{option.envVar}
</code>
</span>
)}
{option.conflicts && option.conflicts.length > 0 && (
<span className="mr-3">
Conflicts:{" "}
<code className="bg-gray-100 px-1 rounded">
<code className="bg-muted px-1 rounded">
--{option.conflicts.join(", --")}
</code>
</span>
Expand Down
8 changes: 4 additions & 4 deletions src/CopyPrompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,15 @@ export const CopyPrompt = ({ children, src }: CopyPromptProps) => {
};

return (
<div className="relative border border-[#eaecef] rounded-lg overflow-hidden bg-gray-50 dark:bg-gray-800 dark:border-gray-700 my-6">
<div className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 whitespace-pre-wrap">
<div className="relative border border-border rounded-lg overflow-hidden bg-secondary my-6">
<div className="px-4 py-3 text-sm text-foreground bg-card whitespace-pre-wrap">
{displayContent()}
</div>
<div className="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-t border-[#eaecef] dark:border-gray-600 flex justify-end">
<div className="px-4 py-2 bg-secondary border-t border-border flex justify-end">
<button
onClick={copyToClipboard}
disabled={loading || !!error}
className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded hover:bg-gray-50 dark:hover:bg-gray-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-card border border-border rounded hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<CopyIcon size={14} />
{copied ? "Copied!" : "Copy prompt"}
Expand Down
Loading
Loading