RDoc-3729 Rebase fixes

Author: mateuszbartosik

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.
 

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
 

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}

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";
@@ -218,10 +208,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>

src/components/Samples/Overview/Partials/ActionsCard.tsx

@@ -4,13 +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

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>
     );

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,19 @@ 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} />
@@ -137,12 +142,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>

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>
     );

src/typescript/docMetadata.d.ts

@@ -8,6 +8,14 @@ export interface GalleryImage {
     alt?: string;
 }
 
+export interface RelatedResourceFrontMatter {
+    type: "guide" | "documentation" | "video";
+    documentation_type?: "docs" | "cloud";
+    subtitle: string;
+    article_key?: string;
+    url?: string;
+}
+
 export interface CustomDocFrontMatter extends DocFrontMatter {
     supported_languages?: DocsLanguage[];
     see_also?: SeeAlsoItemType[];
@@ -26,8 +34,10 @@ export interface CustomDocFrontMatter extends DocFrontMatter {
     license?: string;
     license_url?: string;
     repository_url?: string;
+    demo_url?: string;
     languages?: string[];
     external_url?: string;
+    related_resources?: RelatedResourceFrontMatter[];
 }
 
 type CustomDocContextValue = Omit<DocContextValue, "frontMatter" | "metadata"> & {