Merge pull request #13 from acmucsd/website-colab

feat(website): add open in colab link to every notebook

Author: duanwilliam

website/src/layout/components/BeforeMarkdown/index.tsx

@@ -0,0 +1,17 @@
+import s from "./styles.module.scss";
+
+import type { ReactNode } from "react"
+
+interface BeforeMarkdownProps {
+  children: ReactNode
+}
+
+const BeforeMarkdown = ({ children }: BeforeMarkdownProps) => {
+  return (
+    <div className={s.wrapper}>
+      {children}
+    </div>
+  )
+}
+
+export default BeforeMarkdown

website/src/layout/components/BeforeMarkdown/styles.module.scss

@@ -0,0 +1,3 @@
+.wrapper {
+  margin-bottom: 2rem;
+}

website/src/layout/components/BeforeMarkdown/styles.module.scss.d.ts

@@ -0,0 +1,10 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    wrapper: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;

website/src/layout/components/OpenInColab/index.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from "react"
+import Link from "next/link"
+
+import s from "./styles.module.scss"
+
+const REPO_OWNER = 'acmucsd'
+const REPO_NAME = 'acm-ai-workshops'
+const DEFAULT_BRANCH = 'main'
+const getColabUrl = (fsPath: string[]) => `https://colab.research.google.com/github/${REPO_OWNER}/${REPO_NAME}/blob/${DEFAULT_BRANCH}/${fsPath.map(encodeURIComponent).join('/')}`
+
+interface OpenInColabProps {
+  fsPath: string[]
+}
+
+const OpenInColab = ({ fsPath }: OpenInColabProps) => {
+  const colabUrl = useMemo(() => getColabUrl(fsPath), [fsPath])
+
+  return (
+    <Link href={colabUrl}><a className={s.link}>
+      Open in Colab
+      <svg className={s.external} width="1em" height="1em" viewBox="0 0 48 48" fill="currentColor">
+        <path d="M36 24c-1.2 0-2 0.8-2 2v12c0 1.2-0.8 2-2 2h-22c-1.2
+        0-2-0.8-2-2v-22c0-1.2 0.8-2 2-2h12c1.2 0 2-0.8 2-2s-0.8-2-2-2h-12c-3.4
+        0-6 2.6-6 6v22c0 3.4 2.6 6 6 6h22c3.4 0 6-2.6
+        6-6v-12c0-1.2-0.8-2-2-2z" />
+        <path d="M43.8 5.2c-0.2-0.4-0.6-0.8-1-1-0.2-0.2-0.6-0.2-0.8-0.2h-12c-1.2
+        0-2 0.8-2 2s0.8 2 2 2h7.2l-18.6 18.6c-0.8 0.8-0.8 2 0 2.8 0.4 0.4 0.8
+        0.6 1.4 0.6s1-0.2 1.4-0.6l18.6-18.6v7.2c0 1.2 0.8 2 2 2s2-0.8
+        2-2v-12c0-0.2 0-0.6-0.2-0.8z" />
+      </svg>
+    </a></Link>
+  )
+}
+
+export default OpenInColab

website/src/layout/components/OpenInColab/styles.module.scss

@@ -0,0 +1,20 @@
+@use "@/styles/colors";
+
+.link {
+  padding: 0.5rem;
+  font-weight: 600;
+
+  transition: color 400ms ease;
+
+  &:hover {
+    color: colors.$red;
+  }
+}
+
+.external {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  text-align: baseline;
+  margin-left: 0.25em;
+}

website/src/layout/components/OpenInColab/styles.module.scss.d.ts

@@ -0,0 +1,11 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    external: string;
+    link: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;

website/src/layout/pages/CategoryPage/index.tsx

@@ -10,7 +10,7 @@ import ContentWrapper from "@/layout/components/ContentWrapper";
 import ContentContainer from "@/layout/components/ContentContainer";
 import CategoryItemsGrid from "@/layout/components/CategoryItemsGrid";
 
-export default function CategoryPage ({ breadcrumb, sidebar, items }: CategoryPageProps) {
+export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProps) {
   const { asPath } = useRouter()
 
   return (

website/src/layout/pages/DocPage/index.tsx

@@ -7,6 +7,8 @@ import SidebarContainer from "@/layout/components/SidebarContainer";
 import ContentWrapper from "@/layout/components/ContentWrapper";
 import ContentContainer from "@/layout/components/ContentContainer";
 import TocContainer from "@/layout/components/TocContainer";
+import BeforeMarkdown from "@/layout/components/BeforeMarkdown";
+import OpenInColab from "@/layout/components/OpenInColab";
 import MarkdownWrapper from "@/layout/components/MarkdownWrapper";
 import Navbar from "@/components/Navbar";
 import Sidebar from "@/components/Sidebar";
@@ -15,7 +17,7 @@ import components from "@/mdx/components";
 
 import type { DocPageProps } from "@/layout/pages/types";
 
-export default function DocPage ({ breadcrumb, sidebar, code  }: DocPageProps) {
+export default function DocPage ({ slug, fsPath, sidebar, code }: DocPageProps) {
   const { asPath } = useRouter();
   const { default: Component, toc } = useMemo(() => getMDXExport(code), [code])
 
@@ -30,6 +32,9 @@ export default function DocPage ({ breadcrumb, sidebar, code  }: DocPageProps) {
         <SidebarContainer><Sidebar items={sidebar} activePath={asPath} /></SidebarContainer>
         <ContentWrapper>
           <ContentContainer>
+            <BeforeMarkdown>
+              <OpenInColab fsPath={fsPath} />
+            </BeforeMarkdown>
             <MarkdownWrapper>
               <MDXContent />
             </MarkdownWrapper>

website/src/layout/pages/types/index.d.ts

@@ -7,13 +7,15 @@ export type Doc = {
   title: string;
   description?: string;
   href: string;
+  fsPath: string[];
 }
 
 export type Category = {
   type: Doc['category'];
   title: string;
   description?: string;
   href: string;
+  fsPath: string[];
 }
 
 export type Item = Doc | Category;
@@ -22,16 +24,19 @@ export interface WithSidebar {
   sidebar: SidebarItemType[];
 }
 
-export interface WithBreadcrumbs {
-  breadcrumb: string[];
-  sidebar: SidebarItemType[];
+export interface WithSlug {
+  slug: string[];
 }
 
 export interface WithPath {
   path: string;
 }
 
-export interface CommonPageProps extends WithSidebar, WithBreadcrumbs {}
+export interface WithFsPath {
+  fsPath: string[];
+}
+
+export interface CommonPageProps extends WithSidebar, WithSlug, WithFsPath { }
 
 export interface DocPageProps extends CommonPageProps {
   type: Doc['type'];

website/src/pages/workshops/[...slug].tsx

@@ -4,8 +4,6 @@ import { createPipeline } from "@/lib/pipeline";
 import { workshopsConfig } from "@/lib/pipeline/workshops";
 import { slugToHref } from "@/utils/slugToHref";
 
-import { useRouter } from "next/router";
-
 import CategoryPage from "@/layout/pages/CategoryPage";
 import DocPage from "@/layout/pages/DocPage";
 
@@ -33,13 +31,14 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
       case 'directory':
         const flattenedItems = Object.values(entry.items)
           .map((entry) => {
-            const { type, title, description } = (() => {
+            const { type, title, description, fsPath } = (() => {
               switch (entry.type) {
                 case 'file':
                   return {
                     type: 'doc',
                     title: entry.title,
                     description: entry.description,
+                    fsPath: entry.fsPath
                   } as Doc
                 case 'directory':
                   const numItems = Object.keys(entry.items).length;
@@ -49,16 +48,18 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
                     description: numItems === 1
                       ? `${numItems} item`
                       : `${numItems} items`,
+                    fsPath: entry.fsPath,
                   } as Category
               }
             })();
             const href = slugToHref(entry.slug, workshopsConfig.baseUrl);
 
             return {
               type,
-              href,
               title,
               description,
+              href,
+              fsPath,
             }
           })
         ;
@@ -75,12 +76,13 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
           title: entry.title,
           // source: mdx,
           code,
+          fsPath: entry.fsPath,
         } as Omit<DocPageProps, keyof CommonPageProps>
     }
   })();
 
   const props = {
-    breadcrumb: slug,
+    slug,
     sidebar,
     ...uniqueProps,
   }