RDoc-3729 Rebase fixes

mateuszbartosik · mateuszbartosik · commit 6ff1e5385aed · 2026-04-02T14:11:12.000+02:00
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -208,18 +208,27 @@ category: "Ecommerce"
 license: "MIT License"
 license_url: "https://opensource.org/licenses/MIT"
 repository_url: "https://github.com/ravendb/sample-repo"
+demo_url: "https://demo.example.com"
 languages: ["C#"]
 gallery:
   - src: "/img/samples/my-sample/screenshot-1.webp"
     alt: "Main interface"
   - src: "/img/samples/my-sample/screenshot-2.webp"
     alt: "Admin dashboard"
+related_resources:
+  - type: documentation
+    documentation_type: docs
+    subtitle: "Vector Search Overview"
+    article_key: "ai-integration/vector-search/overview"
+  - type: guide
+    subtitle: "Related Guide Title"
+    article_key: "guide-slug"
 ---
 ```
 
 **Required fields**: `title`, `description`, `challenges_solutions_tags`, `feature_tags`, `tech_stack_tags`
 
-**Optional fields**: `image`, `img_alt`, `category`, `license`, `license_url`, `repository_url`, `languages`, `gallery`
+**Optional fields**: `image`, `img_alt`, `category`, `license`, `license_url`, `repository_url`, `demo_url`, `languages`, `gallery`, `related_resources`
 
 **SEO**: `repository_url` and `languages` feed `SoftwareSourceCode` JSON-LD schema for better search visibility.
 
diff --git a/samples/the-ravens-library.mdx b/samples/the-ravens-library.mdx
@@ -18,39 +18,23 @@ gallery:
     alt: "The Library of Ravens - Author Profile"
   - src: "/img/samples/library-of-ravens/03.webp"
     alt: "The Library of Ravens - User Profile"
+related_resources:
+  - type: documentation
+    documentation_type: docs
+    subtitle: "Vector Search Overview"
+    article_key: "ai-integration/vector-search/overview"
+  - type: documentation
+    documentation_type: docs
+    subtitle: "Azure Storage Queues ETL"
+    article_key: "server/ongoing-tasks/etl/queue-etl/azure-queue"
+  - type: video
+    subtitle: "Learn How to Build a Modern .NET App with ease: Azure Functions and Aspire with RavenDB"
+    url: "https://www.youtube.com/watch?v=TEvBGNMSq9g"
 ---
 
-import { ActionsCard, RelatedResource, FeatureAccordion, SampleMetadataColumn, SampleLayout } from '@site/src/components/Samples';
-import Gallery from '@site/src/components/Common/Gallery';
-
-export const sampleDetails = (
-    <SampleMetadataColumn
-        actionsCard={
-            <ActionsCard
-                githubUser="ravendb"
-                githubRepo="samples-library"
-            />
-        }
-        relatedResources={
-            <>
-                <RelatedResource
-                    type="documentation"
-                    documentationType="docs"
-                    subtitle="Vector Search Overview"
-                    articleKey="ai-integration/vector-search/overview"
-                />
-                <RelatedResource
-                    type="documentation"
-                    documentationType="docs"
-                    subtitle="Azure Storage Queues ETL"
-                    articleKey="server/ongoing-tasks/etl/queue-etl/azure-queue"
-                />
-            </>
-        }
-    />
-);
-
-<SampleLayout details={sampleDetails} gallery={<Gallery images={frontMatter.gallery} />}>
+import { FeatureAccordion, SampleLayout } from '@site/src/components/Samples';
+
+<SampleLayout>
 
 ## Overview
 
diff --git a/src/components/Common/CardWithImage.tsx b/src/components/Common/CardWithImage.tsx
@@ -104,7 +104,12 @@ export default function CardWithImage({
                         {hasTags && (
                             <div className="flex gap-1 items-center flex-wrap">
                                 {visibleTags.map((tag) => (
-                                    <Tag key={tag.label} size="xs" permalink={tag.permalink} className="pointer-events-auto">
+                                    <Tag
+                                        key={tag.label}
+                                        size="xs"
+                                        permalink={tag.permalink}
+                                        className="pointer-events-auto"
+                                    >
                                         {tag.label}
                                     </Tag>
                                 ))}
diff --git a/src/components/Samples/Hub/Partials/FilterCategory.tsx b/src/components/Samples/Hub/Partials/FilterCategory.tsx
@@ -27,11 +27,7 @@ export default function FilterCategory({
     isExpanded,
     onToggleExpanded,
 }: FilterCategoryProps) {
-    const {
-        value: isTagsExpanded,
-        setTrue: expandTags,
-        setFalse: collapseTags,
-    } = useBoolean(false);
+    const { value: isTagsExpanded, setTrue: expandTags, setFalse: collapseTags } = useBoolean(false);
     const [manuallyCollapsed, setManuallyCollapsed] = React.useState(false);
 
     const visibleTags = isTagsExpanded ? tags : tags.slice(0, 5);
diff --git a/src/components/Samples/Hub/Partials/SamplesGrid.tsx b/src/components/Samples/Hub/Partials/SamplesGrid.tsx
@@ -28,11 +28,7 @@ export default function SamplesGrid({ samples, selectedTags, matchLogic, onTagCl
         });
     }, [samples, selectedTags, matchLogic]);
 
-    const sortedSamples = useMemo(() => {
-        return filteredSamples;
-    }, [filteredSamples]);
-
-    if (sortedSamples.length === 0) {
+    if (filteredSamples.length === 0) {
         return (
             <div className="flex items-center justify-center py-12">
                 <p className="text-center text-black/60 dark:text-white/60">No samples found matching your filters.</p>
@@ -54,11 +50,11 @@ export default function SamplesGrid({ samples, selectedTags, matchLogic, onTagCl
                         "dark:bg-white/20 dark:text-white"
                     )}
                 >
-                    {sortedSamples.length}
+                    {filteredSamples.length}
                 </span>
             </div>
             <div className={clsx("grid grid-cols-1 md:grid-cols-2 gap-4", "animate-in fade-in")}>
-                {sortedSamples.map((sample) => (
+                {filteredSamples.map((sample) => (
                     <SampleCard
                         key={sample.id}
                         title={sample.title}
diff --git a/src/components/Samples/Hub/SamplesHomePage.tsx b/src/components/Samples/Hub/SamplesHomePage.tsx
@@ -91,16 +91,6 @@ export default function SamplesHomePage() {
         setSelectedTags(newSelected);
     };
 
-    const handleTagClick = (tagKey: string) => {
-        const newSelected = new Set(selectedTags);
-        if (newSelected.has(tagKey)) {
-            newSelected.delete(tagKey);
-        } else {
-            newSelected.add(tagKey);
-        }
-        setSelectedTags(newSelected);
-    };
-
     const { value: isFilterDrawerOpen, setTrue: openFilterDrawer, setFalse: closeFilterDrawer } = useBoolean(false);
 
     const hasActiveFilters = selectedTags.size > 0 || matchLogic !== "any";
@@ -116,8 +106,7 @@ export default function SamplesHomePage() {
         "@type": "CollectionPage",
         "@id": samplesUrl,
         name: "RavenDB Code Samples",
-        description:
-            "Production-ready code samples, architecture patterns, and starter kits built with RavenDB.",
+        description: "Production-ready code samples, architecture patterns, and starter kits built with RavenDB.",
         url: samplesUrl,
         isPartOf: { "@type": "WebSite", "@id": `${siteUrl}/` },
         breadcrumb: {
@@ -218,10 +207,10 @@ export default function SamplesHomePage() {
 
                 <div className="lg:col-span-3">
                     <SamplesGrid
-                        samples={samples.filter((s) => s.id !== "home")}
+                        samples={filteredSamples}
                         selectedTags={selectedTags}
                         matchLogic={matchLogic}
-                        onTagClick={handleTagClick}
+                        onTagClick={handleTagToggle}
                     />
                 </div>
             </div>
diff --git a/src/components/Samples/Overview/Partials/ActionsCard.tsx b/src/components/Samples/Overview/Partials/ActionsCard.tsx
@@ -4,14 +4,11 @@ import Button from "@site/src/components/Common/Button";
 
 export interface ActionsCardProps {
     className?: string;
-    githubUser?: string;
-    githubRepo?: string;
+    githubUrl?: string;
     demoUrl?: string;
 }
 
-export default function ActionsCard({ className, githubUser, githubRepo, demoUrl }: ActionsCardProps) {
-    const githubUrl = githubUser && githubRepo ? `https://github.com/${githubUser}/${githubRepo}` : undefined;
-
+export default function ActionsCard({ className, githubUrl, demoUrl }: ActionsCardProps) {
     return (
         <div
             className={clsx(
diff --git a/src/components/Samples/Overview/Partials/RelatedResource.tsx b/src/components/Samples/Overview/Partials/RelatedResource.tsx
@@ -5,7 +5,7 @@ import { IconName } from "@site/src/typescript/iconName";
 import Link from "@docusaurus/Link";
 import { useLatestVersion } from "@site/src/hooks/useLatestVersion";
 
-type ResourceType = "guide" | "documentation";
+type ResourceType = "guide" | "documentation" | "video";
 
 type DocumentationType = "docs" | "cloud";
 
@@ -14,7 +14,8 @@ export interface RelatedResourceProps {
     type: ResourceType;
     documentationType?: DocumentationType;
     subtitle: string;
-    articleKey: string;
+    articleKey?: string;
+    externalUrl?: string;
 }
 
 const TYPE_CONFIG: Record<ResourceType, { title: string; icon: IconName }> = {
@@ -26,6 +27,10 @@ const TYPE_CONFIG: Record<ResourceType, { title: string; icon: IconName }> = {
         title: "Documentation",
         icon: "database",
     },
+    video: {
+        title: "Video Walkthrough",
+        icon: "play",
+    },
 };
 
 export default function RelatedResource({
@@ -34,18 +39,23 @@ export default function RelatedResource({
     documentationType = "docs",
     subtitle,
     articleKey,
+    externalUrl,
 }: RelatedResourceProps) {
     const latestVersion = useLatestVersion() as string;
     const config = TYPE_CONFIG[type];
 
     const url = React.useMemo(() => {
+        if (externalUrl) {
+            return externalUrl;
+        }
+
         if (type === "guide") {
             return `/guides/${articleKey}`;
         }
 
         const basePath = documentationType === "cloud" ? "/cloud" : `/${latestVersion}`;
         return `${basePath}/${articleKey}`;
-    }, [type, documentationType, articleKey, latestVersion]);
+    }, [type, documentationType, articleKey, externalUrl, latestVersion]);
 
     const icon = type === "documentation" && documentationType === "cloud" ? "cloud" : config.icon;
 
@@ -72,8 +82,12 @@ export default function RelatedResource({
                 <Icon icon={icon} size="2xs" className="text-black dark:text-white" />
             </div>
             <div className="flex flex-col flex-1 min-w-0">
-                <p className="text-sm leading-5 text-black dark:text-white !mb-0 truncate">{config.title}</p>
-                <p className="text-xs leading-4 text-black/60 dark:text-white/60 !mb-0 truncate">{subtitle}</p>
+                <p className="text-sm leading-5 text-black dark:text-white !mb-0 truncate" title={config.title}>
+                    {config.title}
+                </p>
+                <p className="text-xs leading-4 text-black/60 dark:text-white/60 !mb-0 truncate" title={subtitle}>
+                    {subtitle}
+                </p>
             </div>
         </Link>
     );
diff --git a/src/components/Samples/Overview/Partials/SampleMetadataColumn.tsx b/src/components/Samples/Overview/Partials/SampleMetadataColumn.tsx
@@ -1,15 +1,15 @@
-import React, { ReactNode, useMemo } from "react";
+import React, { useMemo } from "react";
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import clsx from "clsx";
 import Heading from "@theme/Heading";
 import Tag from "@site/src/theme/Tag";
 import type { PluginData } from "@site/src/components/Samples/types";
+import ActionsCard from "./ActionsCard";
+import RelatedResource from "./RelatedResource";
 
 export interface SampleMetadataColumnProps {
     className?: string;
-    actionsCard?: ReactNode;
-    relatedResources?: ReactNode;
 }
 
 interface TagData {
@@ -59,7 +59,7 @@ function TagSection({ title, tags }: TagSectionProps) {
     );
 }
 
-export default function SampleMetadataColumn({ className, actionsCard, relatedResources }: SampleMetadataColumnProps) {
+export default function SampleMetadataColumn({ className }: SampleMetadataColumnProps) {
     const { frontMatter } = useDoc();
     const pluginData = usePluginData("recent-samples-plugin") as PluginData | undefined;
 
@@ -94,14 +94,17 @@ export default function SampleMetadataColumn({ className, actionsCard, relatedRe
     const category = frontMatter.category;
     const license = frontMatter.license;
     const licenseUrl = frontMatter.license_url;
+    const repositoryUrl = frontMatter.repository_url;
+    const demoUrl = frontMatter.demo_url;
+    const relatedResourceItems = frontMatter.related_resources;
 
     const challengesSolutionsTags = getTagsWithLabels(challengesSolutionsTagKeys, challengesSolutionsTagsData);
     const featureTags = getTagsWithLabels(featureTagKeys, featureTagsData);
     const techStackTags = getTagsWithLabels(techStackTagKeys, techStackTagsData);
 
     return (
         <div className={clsx("sticky top-[90px] flex flex-col gap-4", className)}>
-            {actionsCard}
+            {(repositoryUrl || demoUrl) && <ActionsCard githubUrl={repositoryUrl} demoUrl={demoUrl} />}
 
             <TagSection title="Challenges & Solutions" tags={challengesSolutionsTags} />
             <TagSection title="Feature" tags={featureTags} />
@@ -123,11 +126,7 @@ export default function SampleMetadataColumn({ className, actionsCard, relatedRe
                     </Heading>
                     <p className="text-sm text-black dark:text-white !mb-0">
                         {licenseUrl ? (
-                            <a
-                                href={licenseUrl}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
+                            <a href={licenseUrl} target="_blank" rel="noopener noreferrer">
                                 {license}
                             </a>
                         ) : (
@@ -137,12 +136,23 @@ export default function SampleMetadataColumn({ className, actionsCard, relatedRe
                 </div>
             )}
 
-            {relatedResources && (
+            {relatedResourceItems && relatedResourceItems.length > 0 && (
                 <div className="flex flex-col gap-2">
                     <Heading as="h5" className="!mb-0 text-sm font-semibold">
                         Related Resources
                     </Heading>
-                    <div className="flex flex-col gap-1">{relatedResources}</div>
+                    <div className="flex flex-col gap-1">
+                        {relatedResourceItems.map((resource, index) => (
+                            <RelatedResource
+                                key={index}
+                                type={resource.type}
+                                documentationType={resource.documentation_type}
+                                subtitle={resource.subtitle}
+                                articleKey={resource.article_key}
+                                externalUrl={resource.url}
+                            />
+                        ))}
+                    </div>
                 </div>
             )}
         </div>
diff --git a/src/components/Samples/Overview/SampleLayout.tsx b/src/components/Samples/Overview/SampleLayout.tsx
@@ -1,12 +1,16 @@
 import React, { ReactNode } from "react";
+import SampleMetadataColumn from "./Partials/SampleMetadataColumn";
+import Gallery from "@site/src/components/Common/Gallery";
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
 
 interface SampleLayoutProps {
     children: ReactNode;
-    details: ReactNode;
-    gallery?: ReactNode;
 }
 
-export default function SampleLayout({ children, details, gallery }: SampleLayoutProps) {
+export default function SampleLayout({ children }: SampleLayoutProps) {
+    const { frontMatter } = useDoc();
+    const gallery = frontMatter.gallery?.length ? <Gallery images={frontMatter.gallery} /> : null;
+
     return (
         <div className="flex flex-col-reverse lg:flex-row flex-wrap gap-8">
             <div className="flex-1 min-w-0">
@@ -15,7 +19,7 @@ export default function SampleLayout({ children, details, gallery }: SampleLayou
             </div>
             <div className="lg:w-[300px] shrink-0">
                 <div className="lg:hidden">{gallery}</div>
-                {details}
+                <SampleMetadataColumn />
             </div>
         </div>
     );
diff --git a/src/typescript/docMetadata.d.ts b/src/typescript/docMetadata.d.ts
diff --git a/templates/best-practices-samples.mdx b/templates/best-practices-samples.mdx
diff --git a/templates/components-samples.mdx b/templates/components-samples.mdx
diff --git a/templates/new-samples.mdx b/templates/new-samples.mdx
