Skip to content

Commit 39ab7e3

Browse files
duanwilliamduanwilliam
authored
Merge pull request #25 from acmucsd/open-in-github
enable opening workshops and directories in github
2 parents 3b931b0 + 2541220 commit 39ab7e3

File tree

12 files changed

+147
-60
lines changed

12 files changed

+147
-60
lines changed

‎website/src/helpers/github.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const REPO_OWNER = 'acmucsd'
2+
export const REPO_NAME = 'acm-ai-workshops'
3+
export const DEFAULT_BRANCH = 'main'
4+
5+
export const getGithubSlug = (fsPath: string[]) => `${REPO_OWNER}/${REPO_NAME}/blob/${DEFAULT_BRANCH}/${fsPath.map(encodeURIComponent).join('/')}`

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.grid {
22
display: grid;
3-
grid-template-columns: repeat(auto-fill, min(100%, minmax(360px , 1fr))); // TODO
3+
grid-template-columns: repeat(auto-fill, minmax(360px , 1fr)); // TODO
44
gap: 2rem;
55

66
.card {

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { useMemo } from "react"
2+
import Link from "next/link"
3+
4+
import { getGithubSlug } from "@/helpers/github"
5+
6+
import s from "../styles.module.scss"
7+
8+
const getColabUrl = (fsPath: string[]) => `https://colab.research.google.com/github/${getGithubSlug(fsPath)}`
9+
10+
interface OpenInColabProps {
11+
fsPath: string[]
12+
}
13+
14+
export default function OpenInColab ({ fsPath }: OpenInColabProps) {
15+
const colabUrl = useMemo(() => getColabUrl(fsPath), [fsPath])
16+
17+
return (
18+
<Link href={colabUrl}><a className={s.link}>
19+
<span className={s.label}>Open in Colab</span>
20+
{ExternalLinkSvg}
21+
</a></Link>
22+
)
23+
}
24+
25+
const ExternalLinkSvg = (
26+
<svg className={s.svg} width="1em" height="1em" viewBox="0 0 48 48" fill="currentColor">
27+
<path d="M36 24c-1.2 0-2 0.8-2 2v12c0 1.2-0.8 2-2 2h-22c-1.2
28+
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
29+
0-6 2.6-6 6v22c0 3.4 2.6 6 6 6h22c3.4 0 6-2.6
30+
6-6v-12c0-1.2-0.8-2-2-2z" />
31+
<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
32+
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
33+
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
34+
2-2v-12c0-0.2 0-0.6-0.2-0.8z" />
35+
</svg>
36+
)

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { useMemo } from "react"
2+
import Link from "next/link"
3+
4+
import { getGithubSlug } from "@/helpers/github"
5+
6+
import s from "../styles.module.scss"
7+
8+
const getGithubUrl = (fsPath: string[]) => `https://github.com/${getGithubSlug(fsPath)}`
9+
10+
interface OpenInGithubProps {
11+
fsPath: string[]
12+
}
13+
14+
export default function OpenInGithub ({ fsPath }: OpenInGithubProps) {
15+
const githubUrl = useMemo(() => getGithubUrl(fsPath), [fsPath])
16+
17+
return (
18+
<Link href={githubUrl}><a className={s.link}>
19+
{GithubSvg}
20+
<span className={s.label}>Open in GitHub</span>
21+
</a></Link>
22+
)
23+
}
24+
25+
// 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
26+
const GithubSvg = (
27+
<svg className={s.svg} width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
28+
<path
29+
fillRule="evenodd"
30+
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
31+
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
32+
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
33+
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
34+
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
35+
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
36+
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"
37+
/>
38+
</svg>
39+
)

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import s from "./styles.module.scss"
2+
import OpenInColab from "./OpenInColab"
3+
import OpenInGithub from "./OpenInGithub"
4+
5+
interface OpenElsewhereLinksProps {
6+
fsPath: string[]
7+
}
8+
9+
export default function OpenElsewhereLinks ({ fsPath }: OpenElsewhereLinksProps) {
10+
return (
11+
<div className={s.links}>
12+
<OpenInColab fsPath={fsPath} />
13+
<OpenInGithub fsPath={fsPath} />
14+
</div>
15+
)
16+
}

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@use "@/styles/colors";
2+
3+
.links {
4+
display: flex;
5+
align-items: center;
6+
justify-content: space-between;
7+
gap: 0.5rem 2rem;
8+
flex-wrap: wrap;
9+
}
10+
11+
.link {
12+
padding: 0.5rem;
13+
font-weight: 600;
14+
display: flex;
15+
align-items: center;
16+
gap: 0.25em;
17+
18+
transition: color 400ms ease;
19+
&:hover {
20+
color: colors.$red;
21+
22+
& .svg {
23+
fill: colors.$red;
24+
}
25+
}
26+
27+
.label, .svg {
28+
flex: 0 0 auto;
29+
}
30+
31+
.svg {
32+
width: 1em;
33+
height: 1em;
34+
35+
fill: currentColor;
36+
transition: fill 400ms ease;
37+
}
38+
}

‎website/src/layout/components/OpenInColab/styles.module.scss.d.ts‎ renamed to ‎website/src/layout/components/OpenElsewhereLinks/styles.module.scss.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
22
declare namespace StylesModuleScssNamespace {
33
export interface IStylesModuleScss {
4-
external: string;
4+
label: string;
55
link: string;
6+
links: string;
7+
svg: string;
68
}
79
}
810

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

Lines changed: 0 additions & 35 deletions
This file was deleted.

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

Lines changed: 0 additions & 20 deletions
This file was deleted.

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ import CategoryItemsGrid from "@/layout/components/CategoryItemsGrid";
1010
import PageProvider from "@/layout/context/Page";
1111

1212
import type { CategoryPageProps } from "@/layout/pages/types";
13+
import BeforeMarkdown from "@/layout/components/BeforeMarkdown";
14+
import OpenInGithub from "@/layout/components/OpenElsewhereLinks/OpenInGithub";
1315

14-
export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProps) {
16+
export default function CategoryPage ({ slug, sidebar, items, fsPath }: CategoryPageProps) {
1517
const { asPath } = useRouter()
1618

1719
return (
@@ -21,6 +23,9 @@ export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProp
2123
<SidebarContainer><Sidebar items={sidebar} activePath={asPath} /></SidebarContainer>
2224
<ContentWrapper>
2325
<ContentContainer>
26+
<BeforeMarkdown>
27+
<OpenInGithub fsPath={fsPath} />
28+
</BeforeMarkdown>
2429
<CategoryItemsGrid items={items} />
2530
</ContentContainer>
2631
</ContentWrapper>

0 commit comments

Comments
 (0)