RDoc-3494 Feature-specific page

src/components/ColGrid.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import clsx from "clsx";
+
+export type GridColCount = 1 | 2 | 3;
+
+export interface ColGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    colCount: GridColCount;
+}
+
+function getGridColsClass(colCount: GridColCount): string {
+    if (colCount === 1) {
+        return "grid grid-cols-1";
+    }
+    if (colCount === 2) {
+        return "grid grid-cols-1 sm:grid-cols-2";
+    }
+    if (colCount === 3) {
+        return "grid grid-cols-1 xl:grid-cols-3";
+    }
+    return "";
+}
+
+export default function ColGrid({
+    children,
+    className = "",
+    colCount = 1,
+    ...props
+}: ColGridProps) {
+    return (
+        <div
+            className={clsx(getGridColsClass(colCount), "gap-4", className)}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+}

src/components/Common/Badge.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Icon } from "./Icon";
+import { IconName } from "@site/src/typescript/iconName";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+  className?: string;
+  variant?: "default" | "secondary" | "outline" | "success" | "warning" | "destructive";
+  size?: "sm" | "md";
+  iconName?: IconName;
+  iconPosition?: "left" | "right";
+}
+
+const variantClasses: Record<NonNullable<BadgeProps["variant"]>, string> = {
+  default: "bg-primary-light/80 backdrop-blur-xs text-white border border-primary/10 dark:text-black",
+  secondary: "bg-gray-200/70 backdrop-blur-xs text-black dark:bg-secondary/70 dark:text-black border border-gray-300/10 dark:border-secondary/10",
+  outline: "bg-stone-100/30 backdrop-blur-xs text-black border border-black/70",
+  success: "bg-green-300/80 backdrop-blur-xs text-green-950 border border-green-400/10",
+  warning: "bg-orange-300/80 backdrop-blur-xs text-orange-950 border border-orange-400/10",
+  destructive: "bg-red-300/80 backdrop-blur-xs text-red-950 border border-red-400/10",
+}
+
+const sizeClasses: Record<NonNullable<BadgeProps["size"]>, string> = {
+  sm: "text-[11px] leading-4 h-5 px-2",
+  md: "text-xs leading-5 h-6 px-2.5",
+};
+
+export default function Badge({
+  children,
+  className = "",
+  variant = "secondary",
+  size = "sm",
+  iconName,
+  iconPosition = "left",
+  ...props
+}: BadgeProps) {
+  const baseClasses = clsx(
+    "inline-flex items-center gap-1 select-none",
+    "font-medium",
+    "rounded-full",
+    variantClasses[variant],
+    sizeClasses[size],
+    className,
+  );
+
+  const iconElement = iconName ? <Icon icon={iconName} size="xs" className="shrink-0" /> : null;
+
+  return (
+    <span className={baseClasses} {...props}>
+      {iconElement && iconPosition === "left" && iconElement}
+      <span>{children}</span>
+      {iconElement && iconPosition === "right" && iconElement}
+    </span>
+  );
+}
+
+

src/components/Common/Button.tsx

@@ -1,18 +1,31 @@
 import * as React from "react";
 import Link from "@docusaurus/Link";
 import clsx from "clsx";
+import { IconName } from "@site/src/typescript/iconName";
+import { Icon } from "./Icon";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+
+export type ButtonVariant =
+| "default"
+| "outline" 
+| "ghost" 
+| "destructive" 
+| "secondary";
+
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   url?: string;
   className?: string;
-  variant?: "default" | "outline" | "ghost" | "destructive";
+  variant?: ButtonVariant;
   size?: "sm" | "md" | "lg";
+  iconName?: IconName;
 }
 
-const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
+const variantClasses: Record<ButtonVariant, string> = {
   default: "bg-primary !text-white dark:!text-black hover:bg-primary-darker",
+  secondary: "bg-gray-300 hover:bg-gray-400 dark:bg-secondary !text-black dark:hover:bg-secondary-darker",
   outline:
     "border !text-black border-black/25 !text-foreground hover:bg-black/5 dark:!text-white dark:border-white/25 dark:hover:bg-white/5",
   ghost: "hover:bg-muted !text-foreground",
@@ -29,8 +42,9 @@ export default function Button({
   children,
   url,
   className = "",
-  variant = "default",
+  variant = "secondary",
   size = "md",
+  iconName,
   ...props
 }: ButtonProps) {
   const baseClasses = clsx(
@@ -43,16 +57,21 @@ export default function Button({
   );
 
   if (url) {
+    const isExternal = !isInternalUrl(url);
     return (
-      <Link to={url} className={baseClasses}>
-        {children}
+      <Link
+        {...(isExternal ? { href: url } : { to: url })}
+        className={baseClasses}
+      >
+        {children} {iconName && <Icon icon={iconName} />}
+        {isExternal && <Icon icon="newtab" className="ml-2" size="xs"/>}
       </Link>
     );
   }
 
   return (
     <button className={baseClasses} {...props}>
-      {children}
+      {children} {iconName && <Icon icon={iconName} />}
     </button>
   );
 }

src/components/Common/CardWithImage.tsx

@@ -1,14 +1,21 @@
 import React, { ReactNode } from "react";
 import Heading from "@theme/Heading";
-import Button from "@site/src/components/Common/Button";
+import Button, { type ButtonVariant } from "@site/src/components/Common/Button";
+import { Icon } from "@site/src/components/Common/Icon";
+import { IconName } from "@site/src/typescript/iconName";
+import Badge from "@site/src/components/Common/Badge";
+import isInternalUrl from "@docusaurus/isInternalUrl";
 
 export interface CardWithImageProps {
   title: string;
   description: ReactNode;
   imgSrc: string;
   imgAlt?: string;
   url?: string;
+  buttonVariant?: ButtonVariant;
   ctaLabel?: string;
+  iconName?: IconName;
+  imgIcon?: IconName;
 }
 
 export default function CardWithImage({
@@ -17,23 +24,36 @@ export default function CardWithImage({
   imgSrc,
   imgAlt = "",
   url,
+  buttonVariant = "secondary",
   ctaLabel = "Read now",
+  iconName,
+  imgIcon,
 }: CardWithImageProps) {
+  const hasImage = Boolean(imgSrc);
   return (
     <div className="card group flex flex-col overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
-      <div className="flex items-center justify-center rounded-xl bg-black/40 mb-4 overflow-hidden">
-        <img
-          src={imgSrc}
-          alt={imgAlt}
-          className="pointer-events-none object-cover transition-transform origin-bottom duration-500 group-hover:scale-105 group-hover:translate-y-1"
-        />
+      <div className={`flex items-center justify-center rounded-xl mb-4 overflow-hidden relative aspect-[79/24] ${hasImage ? "bg-black/40" : "bg-gradient-to-b from-[#204879] to-[#0F1425] to-[70%]"}`}> 
+        {hasImage ? (
+          <img
+            src={imgSrc}
+            alt={imgAlt}
+            className="pointer-events-none w-full h-full object-cover object-center transition-transform origin-bottom duration-500 group-hover:scale-105 group-hover:translate-y-1"
+          />
+        ) : (
+          <Icon icon={imgIcon ?? "default"} size="xl" className="filter brightness-0 invert" />
+        )}
+        {url && !isInternalUrl(url) && (
+          <Badge className="absolute top-2 right-2" variant="default" size="sm">
+            External
+          </Badge>
+        )}
       </div>
       <Heading as="h4" className="!mb-2">
         {title}
       </Heading>
       <p className="!mb-3 text-sm">{description}</p>
       {url && (
-        <Button variant="default" url={url} className="mt-auto">
+        <Button variant={buttonVariant} url={url} className="mt-auto">
           {ctaLabel}
         </Button>
       )}

src/components/Common/CardWithImageHorizontal.tsx

@@ -0,0 +1,59 @@
+import React, { ReactNode } from "react";
+import Heading from "@theme/Heading";
+import Button, { type ButtonVariant } from "@site/src/components/Common/Button";
+import { IconName } from "@site/src/typescript/iconName";
+import Badge from "@site/src/components/Common/Badge";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+
+export interface CardWithImageHorizontalProps {
+    title: string;
+    description: ReactNode;
+    imgSrc: string;
+    imgAlt?: string;
+    url?: string;
+    buttonVariant?: ButtonVariant;
+    ctaLabel?: string;
+    iconName?: IconName;
+}
+
+export default function CardWithImageHorizontal({
+    title,
+    description,
+    imgSrc,
+    imgAlt = "",
+    url,
+    buttonVariant = "secondary",
+    ctaLabel = "Read now",
+}: CardWithImageHorizontalProps) {
+    return (
+        <div className="card group !grid grid-cols-1 xl:grid-cols-[minmax(10rem,_230px)_1fr] 2xl:grid-cols-[minmax(10rem,_270px)_1fr] items-center gap-4 overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
+            <div className="aspect-[537/281] overflow-hidden rounded-xl relative flex items-center">
+                <img
+                    src={imgSrc}
+                    alt={imgAlt}
+                    className="pointer-events-none w-full h-auto object-contain transition-transform origin-bottom duration-500 group-hover:scale-105"
+                />
+                {url && !isInternalUrl(url) && (
+                    <Badge
+                        className="absolute top-2 right-2"
+                        variant="default"
+                        size="sm"
+                    >
+                        External
+                    </Badge>
+                )}
+            </div>
+            <div className="flex flex-col min-w-0 justify-center gap-1">
+                <Heading as="h4" className="!mb-1">
+                    {title}
+                </Heading>
+                <p className="!mb-3 text-sm">{description}</p>
+                {url && (
+                    <Button variant={buttonVariant} url={url}>
+                        {ctaLabel}
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}

src/components/Homepage/UseCases/UseCaseItem.tsx

@@ -12,6 +12,7 @@ export default function UseCaseItem(props: CardWithImageProps) {
       imgSrc={imgSrc}
       imgAlt={imgAlt}
       ctaLabel={ctaLabel}
-    />
+      buttonVariant="default"
+      />
   );
 }

src/components/VersionConditional.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { useActiveDocContext } from "@docusaurus/plugin-content-docs/client";
+
+interface VersionConditionalProps {
+    minimumVersion: string;
+    children: ReactNode;
+}
+
+export default function VersionConditional({
+    minimumVersion,
+    children,
+}: VersionConditionalProps) {
+    const pluginId = "default";
+    const { activeVersion } = useActiveDocContext(pluginId);
+
+    if (
+        activeVersion.label.localeCompare(minimumVersion, undefined, {
+            numeric: true,
+        }) < 0
+    ) {
+        return null;
+    }
+
+    return <>{children}</>;
+}

src/css/custom.css

@@ -103,6 +103,8 @@
   --color-primary-light: var(--ifm-color-primary-light);
   --color-primary-lighter: var(--ifm-color-primary-lighter);
   --color-primary-lightest: var(--ifm-color-primary-lightest);
+  --color-secondary: var(--ifm-color-secondary);
+  --color-secondary-darker: var(--ifm-color-secondary-darker);
   --color-ifm-background: var(--ifm-background-color);
   --color-ifm-background-surface: var(--ifm-background-surface-color);
   --color-ifm-menu: var(--ifm-menu-color);