enable opening workshops and directories in github

website/src/helpers/github.ts

@@ -0,0 +1,5 @@
+export const REPO_OWNER = 'acmucsd'
+export const REPO_NAME = 'acm-ai-workshops'
+export const DEFAULT_BRANCH = 'main'
+
+export const getGithubSlug = (fsPath: string[]) => `${REPO_OWNER}/${REPO_NAME}/blob/${DEFAULT_BRANCH}/${fsPath.map(encodeURIComponent).join('/')}`

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

@@ -1,6 +1,6 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, min(100%, minmax(360px , 1fr))); // TODO
+  grid-template-columns: repeat(auto-fill, minmax(360px , 1fr)); // TODO
   gap: 2rem;
 
   .card {

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

@@ -0,0 +1,36 @@
+import { useMemo } from "react"
+import Link from "next/link"
+
+import { getGithubSlug } from "@/helpers/github"
+
+import s from "../styles.module.scss"
+
+const getColabUrl = (fsPath: string[]) => `https://colab.research.google.com/github/${getGithubSlug(fsPath)}`
+
+interface OpenInColabProps {
+  fsPath: string[]
+}
+
+export default function OpenInColab ({ fsPath }: OpenInColabProps) {
+  const colabUrl = useMemo(() => getColabUrl(fsPath), [fsPath])
+
+  return (
+    <Link href={colabUrl}><a className={s.link}>
+      <span className={s.label}>Open in Colab</span>
+      {ExternalLinkSvg}
+    </a></Link>
+  )
+}
+
+const ExternalLinkSvg = (
+  <svg className={s.svg} 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>
+)

website/src/layout/components/OpenElsewhereLinks/OpenInGithub/index.tsx

@@ -0,0 +1,39 @@
+import { useMemo } from "react"
+import Link from "next/link"
+
+import { getGithubSlug } from "@/helpers/github"
+
+import s from "../styles.module.scss"
+
+const getGithubUrl = (fsPath: string[]) => `https://github.com/${getGithubSlug(fsPath)}`
+
+interface OpenInGithubProps {
+  fsPath: string[]
+}
+
+export default function OpenInGithub ({ fsPath }: OpenInGithubProps) {
+  const githubUrl = useMemo(() => getGithubUrl(fsPath), [fsPath])
+
+  return (
+    <Link href={githubUrl}><a className={s.link}>
+      {GithubSvg}
+      <span className={s.label}>Open in GitHub</span>
+    </a></Link>
+  )
+}
+
+// TODO: we use github svg here (because we want to animate changing its color) but use img with svg source in header. the way we use it should be standardized
+const GithubSvg = (
+  <svg className={s.svg} width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+      <path
+        fillRule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
+        0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
+        1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
+        0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18
+        1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16
+        1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54
+        1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+      />
+  </svg>
+)

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

@@ -0,0 +1,16 @@
+import s from "./styles.module.scss"
+import OpenInColab from "./OpenInColab"
+import OpenInGithub from "./OpenInGithub"
+
+interface OpenElsewhereLinksProps {
+  fsPath: string[]
+}
+
+export default function OpenElsewhereLinks ({ fsPath }: OpenElsewhereLinksProps) {
+  return (
+    <div className={s.links}>
+      <OpenInColab fsPath={fsPath} />
+      <OpenInGithub fsPath={fsPath} />
+    </div>
+  )
+}

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

@@ -0,0 +1,38 @@
+@use "@/styles/colors";
+
+.links {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem 2rem;
+  flex-wrap: wrap;
+}
+
+.link {
+  padding: 0.5rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+
+  transition: color 400ms ease;
+  &:hover {
+    color: colors.$red;
+
+    & .svg {
+      fill: colors.$red;
+    }
+  }
+
+  .label, .svg {
+    flex: 0 0 auto;
+  }
+
+  .svg {
+    width: 1em;
+    height: 1em;
+
+    fill: currentColor;
+    transition: fill 400ms ease;
+  }
+}

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

@@ -1,8 +1,10 @@
 // AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
 declare namespace StylesModuleScssNamespace {
   export interface IStylesModuleScss {
-    external: string;
+    label: string;
     link: string;
+    links: string;
+    svg: string;
   }
 }
 

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

@@ -10,8 +10,10 @@ import CategoryItemsGrid from "@/layout/components/CategoryItemsGrid";
 import PageProvider from "@/layout/context/Page";
 
 import type { CategoryPageProps } from "@/layout/pages/types";
+import BeforeMarkdown from "@/layout/components/BeforeMarkdown";
+import OpenInGithub from "@/layout/components/OpenElsewhereLinks/OpenInGithub";
 
-export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProps) {
+export default function CategoryPage ({ slug, sidebar, items, fsPath }: CategoryPageProps) {
   const { asPath } = useRouter()
 
   return (
@@ -21,6 +23,9 @@ export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProp
         <SidebarContainer><Sidebar items={sidebar} activePath={asPath} /></SidebarContainer>
         <ContentWrapper>
           <ContentContainer>
+            <BeforeMarkdown>
+              <OpenInGithub fsPath={fsPath} />
+            </BeforeMarkdown>
             <CategoryItemsGrid items={items} />
           </ContentContainer>
         </ContentWrapper>

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

@@ -9,7 +9,7 @@ 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 OpenElsewhereLinks from "@/layout/components/OpenElsewhereLinks";
 import MarkdownWrapper from "@/layout/components/MarkdownWrapper";
 import PageProvider from "@/layout/context/Page";
 
@@ -31,7 +31,7 @@ export default function DocPage ({ source, slug, fsPath, sidebar, toc }: DocPage
         <ContentWrapper>
           <ContentContainer>
             <BeforeMarkdown>
-              <OpenInColab fsPath={fsPath} />
+              <OpenElsewhereLinks fsPath={fsPath} />
             </BeforeMarkdown>
             <MarkdownWrapper>
               <MDXComponent />

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

@@ -56,6 +56,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
         return {
           type: 'category',
           items: flattenedItems,
+          fsPath: entry.fsPath,
         } as Omit<CategoryPageProps, keyof CommonPageProps>;
 
       case 'file':