fix: ensure colab url uses blob

Author: duanwilliam

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

@@ -5,7 +5,7 @@ import { getGithubSlug } from "../utils/github"
 
 import s from "../styles.module.scss"
 
-const getColabUrl = (fsPath: string[]) => `https://colab.research.google.com/github/${getGithubSlug(fsPath)}`
+const getColabUrl = (fsPath: string[]) => `https://colab.research.google.com/github/${getGithubSlug(fsPath, { blob: true })}`
 
 interface OpenInColabProps {
   fsPath: string[]

website/src/layout/components/OpenElsewhereLinks/utils/github.ts

@@ -2,4 +2,12 @@ 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}/tree/${DEFAULT_BRANCH}/${fsPath.map(encodeURIComponent).join('/')}`
+// GitHub uses `blob` for files and `tree` for directories
+// `/tree/file` auto redirects to `/blob/file` but not vice versa so we want to use `tree` by default
+// but Colab expects a well-formed `blob`
+export const getGithubSlug = (
+  fsPath: string[],
+  { blob = false }: { blob?: boolean } = {},
+) => (
+  `${REPO_OWNER}/${REPO_NAME}/${blob ? 'blob' : 'tree'}/${DEFAULT_BRANCH}/${fsPath.map(encodeURIComponent).join('/')}`
+)