examples

Update page.tsx Update page.tsx examples 12-20
dagrs-dev · Dec 23, 2024 · ec4eb65 · ec4eb65
1 parent 12ef6be
commit ec4eb65
Show file tree

Hide file tree

Showing 18 changed files with 550 additions and 17 deletions.
diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
@@ -31,7 +31,7 @@ export default async function DocsPage(props: PageProps) {
             {res.frontmatter.description}
           </p>
           <div>{res.content}</div>
-          <Pagination pathname={pathName} />
+          <Pagination pathname={pathName}/>
         </Typography>
       </div>
       <Toc path={pathName} />

diff --git a/app/examples/[[...slug]]/page.tsx b/app/examples/[[...slug]]/page.tsx
@@ -0,0 +1,39 @@
+import DocsBreadcrumb from "@/components/docs-breadcrumb";
+import { ExamplePagination } from "@/components/pagination";
+import { ExampleToc } from "@/components/toc";
+import { notFound } from "next/navigation";
+import { getExamplsForSlug } from "@/lib/markdown";
+import { Typography } from "@/components/typography";
+
+type PageProps = {
+  params: Promise<{ slug: string[] }>;
+};
+
+export default async function ExamplesPage(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug = []
+  } = params;
+
+  const pathName = slug.join("/");
+  const res = await getExamplsForSlug(pathName);
+
+  if (!res) notFound();
+  return (
+    <div className="flex items-start gap-10">
+      <div className="flex-[4.5] pt-10">
+        <DocsBreadcrumb paths={slug} />
+        <Typography>
+          <h1 className="text-3xl !-mt-0.5">{res.frontmatter.title}</h1>
+          <p className="-mt-4 text-muted-foreground text-[16.5px]">
+            {res.frontmatter.description}
+          </p>
+          <div>{res.content}</div>
+          <ExamplePagination pathname={pathName}/>
+        </Typography>
+      </div>
+      <ExampleToc path={pathName} />
+    </div>
+  );
+}
diff --git a/app/examples/layout.tsx b/app/examples/layout.tsx
@@ -0,0 +1,14 @@
+import { Leftbar } from "@/components/examples-menu";
+
+export default function ExamplesLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="flex items-start gap-8">
+      <Leftbar key="leftbar" />
+      <div className="flex-[5.25]">{children}</div>
+    </div>
+  );
+}
diff --git a/app/opengraph-image.jpg b/app/opengraph-image.jpg
diff --git a/components/examples-menu.tsx b/components/examples-menu.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { EXAMPLE_ROUTES } from "@/lib/routes-config";
+import SubLink from "./sublink";
+import { usePathname } from "next/navigation";
+
+export default function ExamplesMenu({ isSheet = false }) {
+  const pathname = usePathname();
+  if (!pathname.startsWith("/examples")) return null;
+
+  return (
+    <div className="flex flex-col gap-3.5 mt-5 pr-2 pb-6">
+      {EXAMPLE_ROUTES.map((item, index) => {
+        const modifiedItems = {
+          ...item,
+          href: `/examples${item.href}`,
+          level: 0,
+          isSheet,
+        };
+        return <SubLink key={item.title + index} {...modifiedItems} />;
+      })}
+    </div>
+  );
+}
+
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export function Leftbar() {
+  return (
+    <aside className="md:flex hidden flex-[1.5] min-w-[238px] sticky top-16 flex-col h-[93.75vh] overflow-y-auto">
+      <ScrollArea className="py-4">
+        <ExamplesMenu />
+      </ScrollArea>
+    </aside>
+  );
+}
diff --git a/components/markdown/outlet.tsx b/components/markdown/outlet.tsx
@@ -1,4 +1,4 @@
-import { BaseMdxFrontmatter, getAllChilds } from "@/lib/markdown";
+import { BaseMdxFrontmatter, getAllChilds, getAllExampleChilds } from "@/lib/markdown";
 import Link from "next/link";
 
 export default async function Outlet({ path }: { path: string }) {
@@ -14,6 +14,19 @@ export default async function Outlet({ path }: { path: string }) {
   );
 }
 
+export async function ExampleOutlet({ path }: { path: string }) {
+  if (!path) throw new Error("path not provided");
+  const output = await getAllExampleChilds(path);
+
+  return (
+    <div className="grid md:grid-cols-2 gap-5">
+      {output.map((child) => (
+        <ChildCard {...child} key={child.title} />
+      ))}
+    </div>
+  );
+}
+
 type ChildCardProps = BaseMdxFrontmatter & { href: string };
 
 function ChildCard({ description, href, title }: ChildCardProps) {

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -6,7 +6,7 @@ import { buttonVariants } from "./ui/button";
 import Search from "./search";
 import Anchor from "./anchor";
 import { SheetLeftbar } from "./leftbar";
-import { page_routes } from "@/lib/routes-config";
+import { page_routes, example_page_routes } from "@/lib/routes-config";
 import { SheetClose } from "@/components/ui/sheet";
 
 export const NAVLINKS = [
@@ -20,7 +20,7 @@ export const NAVLINKS = [
   },
   {
     title: "Examples",
-    href: "#",
+    href: `/examples${example_page_routes[0].href}`,
   },
   {
     title: "Community",

diff --git a/components/pagination.tsx b/components/pagination.tsx
@@ -1,9 +1,9 @@
-import { getPreviousNext } from "@/lib/markdown";
+import { getPreviousNext, getExamplePrevoiusNext } from "@/lib/markdown";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
 import { buttonVariants } from "./ui/button";
 
-export default function Pagination({ pathname }: { pathname: string }) {
+export default function Pagination({ pathname }: { pathname: string}) {
   const res = getPreviousNext(pathname);
 
   return (
@@ -47,3 +47,49 @@ export default function Pagination({ pathname }: { pathname: string }) {
     </div>
   );
 }
+
+
+export async function ExamplePagination({ pathname }: { pathname: string }) {
+  const res = getExamplePrevoiusNext(pathname);
+
+  return (
+    <div className="grid grid-cols-2 flex-grow sm:py-10 py-7 gap-3">
+      <div>
+        {res.prev && (
+          <Link
+            className={buttonVariants({
+              variant: "outline",
+              className:
+                "no-underline w-full flex flex-col pl-3 !py-8 !items-start",
+            })}
+            href={`/examples${res.prev.href}`}
+          >
+            <span className="flex items-center text-muted-foreground text-xs">
+              <ChevronLeftIcon className="w-[1rem] h-[1rem] mr-1" />
+              Previous
+            </span>
+            <span className="mt-1 ml-1">{res.prev.title}</span>
+          </Link>
+        )}
+      </div>
+      <div>
+        {res.next && (
+          <Link
+            className={buttonVariants({
+              variant: "outline",
+              className:
+                "no-underline w-full flex flex-col pr-3 !py-8 !items-end",
+            })}
+            href={`/examples${res.next.href}`}
+          >
+            <span className="flex items-center text-muted-foreground text-xs">
+              Next
+              <ChevronRightIcon className="w-[1rem] h-[1rem] ml-1" />
+            </span>
+            <span className="mt-1 mr-1">{res.next.title}</span>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/toc-observer.tsx b/components/toc-observer.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { getDocsTocs } from "@/lib/markdown";
+import { getDocsTocs, getExamplesTocs } from "@/lib/markdown";
 import clsx from "clsx";
 import Link from "next/link";
 import { useState, useRef, useEffect } from "react";
 
 type Props = { data: Awaited<ReturnType<typeof getDocsTocs>> };
+type ExampleProps = { data: Awaited<ReturnType<typeof getExamplesTocs>> };
 
 export default function TocObserver({ data }: Props) {
   const [activeId, setActiveId] = useState<string | null>(null);
@@ -68,3 +69,66 @@ export default function TocObserver({ data }: Props) {
     </div>
   );
 }
+
+
+export function ExampleTocObserver({ data }: ExampleProps) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const observer = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    const handleIntersect = (entries: IntersectionObserverEntry[]) => {
+      const visibleEntry = entries.find((entry) => entry.isIntersecting);
+      if (visibleEntry) {
+        setActiveId(visibleEntry.target.id);
+      }
+    };
+
+    observer.current = new IntersectionObserver(handleIntersect, {
+      root: null,
+      rootMargin: "-20px 0px 0px 0px",
+      threshold: 0.1,
+    });
+
+    const elements = data.map((item) =>
+      document.getElementById(item.href.slice(1))
+    );
+
+    elements.forEach((el) => {
+      if (el && observer.current) {
+        observer.current.observe(el);
+      }
+    });
+
+    return () => {
+      if (observer.current) {
+        elements.forEach((el) => {
+          if (el) {
+            observer.current!.unobserve(el);
+          }
+        });
+      }
+    };
+  }, [data]);
+
+  return (
+    <div className="flex flex-col gap-2.5 text-sm dark:text-stone-300/85 text-stone-800 ml-0.5">
+      {data.map(({ href, level, text }, index) => {
+        return (
+          <Link
+            key={href + text + level + index}
+            href={href}
+            className={clsx({
+              "pl-0": level == 2,
+              "pl-4": level == 3,
+              "pl-8 ": level == 4,
+              "dark:font-medium font-semibold text-primary":
+                activeId == href.slice(1),
+            })}
+          >
+            {text}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/toc.tsx b/components/toc.tsx
@@ -1,4 +1,5 @@
-import { getDocsTocs } from "@/lib/markdown";
+import { getDocsTocs, getExamplesTocs } from "@/lib/markdown";
+import {ExampleTocObserver } from "./toc-observer";
 import TocObserver from "./toc-observer";
 import { ScrollArea } from "@/components/ui/scroll-area";
 
@@ -16,3 +17,18 @@ export default async function Toc({ path }: { path: string }) {
     </div>
   );
 }
+
+export async function ExampleToc({ path }: { path: string }) {
+  const tocs = await getExamplesTocs(path);
+
+  return (
+    <div className="lg:flex hidden toc flex-[1.5] min-w-[238px] py-9 sticky top-16 h-[96.95vh]">
+      <div className="flex flex-col gap-3 w-full pl-2">
+        <h3 className="font-semibold text-sm">On this page</h3>
+        <ScrollArea className="pb-2 pt-0.5 overflow-y-auto">
+          <ExampleTocObserver data={tocs} />
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}
diff --git a/contents/docs/getting-started/components/node/index.mdx b/contents/docs/getting-started/components/node/index.mdx
@@ -98,17 +98,20 @@ Don't worry if the `DefaultNode` can't satisfy your need.
 You are free to implement a customized `Node` like the following example:
 
 ```rust showLineNumbers 
-use dagrs::{Node, NodeId, NodeName, EnvVar, Output, InChannels, OutChannels};
+use std::sync::Arc;
 
-struct HelloNode {
+use dagrs::{Content, EnvVar, InChannels, Node, NodeId, NodeName, OutChannels, Output};
+
+struct MessageNode {
     id: NodeId,
     name: NodeName,
     in_channels: InChannels,
     out_channels: OutChannels,
     /*Put your custom fields here.*/
-};
+    message: String,
+}
 
-impl Node for HelloNode {
+impl Node for MessageNode {
     fn id(&self) -> NodeId {
         self.id
     }
@@ -125,14 +128,13 @@ impl Node for HelloNode {
         &mut self.out_channels
     }
 
-    fn run(&mut self, env: Arc<EnvVar>) -> Output {
-        println!("Hello World");
-        Output::Out(None)
+    fn run(&mut self, _: Arc<EnvVar>) -> Output {
+        Output::Out(Some(Content::new(self.message.clone())))
     }
 }
 ```
 
-The `HelloNode` above simply prints "Hello World" to stdout when run. If needed,
+The `MessageNode` above simply returns its field `message` when run. If needed,
 the execution logic of this node can also be replaced with an `Action`, just like the 
 `DefaultNode`.
 

diff --git a/contents/examples/compute-dag/index.mdx b/contents/examples/compute-dag/index.mdx
@@ -0,0 +1,8 @@
+---
+title: Compute Dag
+description:  
+---
+
+```rust showLineNumbers {}
+
+```