Skip to content

Commit 329f6af

Browse files
lihebilihebi
committed
add v1 and v2 screenshots
1 parent 6e0307c commit 329f6af

File tree

6 files changed

+395
-49
lines changed

6 files changed

+395
-49
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@
1616
"dependencies": {
1717
"@docusaurus/core": "2.0.0-beta.14",
1818
"@docusaurus/preset-classic": "2.0.0-beta.14",
19+
"@emotion/react": "^11.10.4",
20+
"@emotion/styled": "^11.10.4",
1921
"@mdx-js/react": "^1.6.21",
22+
"@mui/material": "^5.10.8",
2023
"clsx": "^1.1.1",
2124
"prism-react-renderer": "^1.2.1",
2225
"react": "^17.0.1",
@@ -34,4 +37,4 @@
3437
"last 1 safari version"
3538
]
3639
}
37-
}
40+
}

‎src/components/HomepageFeatures.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,17 @@ import styles from "./HomepageFeatures.module.css";
44

55
const FeatureList = [
66
{
7-
title: "Easy to Use",
7+
title: "Open Source",
88
Svg: require("../../static/img/undraw_docusaurus_mountain.svg").default,
99
description: (
1010
<>
1111
{/* Docusaurus was designed from the ground up to be easily installed and
1212
used to get your website up and running quickly. */}
13-
Easily create and maintain a tree of code pods, write code, and execute.
13+
Like you, we believe in open-source. You can find the{" "}
14+
<a href="https://github.com/lihebi/codepod" target="_blank">
15+
source code
16+
</a>{" "}
17+
on GitHub. We'd like your contribution to make it a better tool!
1418
</>
1519
),
1620
},

‎src/pages/index.js

Lines changed: 62 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@ import HomepageFeatures from "../components/HomepageFeatures";
88

99
import Admonition from "@theme/Admonition";
1010

11+
// import * as React from "react";
12+
import { styled } from "@mui/material/styles";
13+
import Box from "@mui/material/Box";
14+
import Paper from "@mui/material/Paper";
15+
import Grid from "@mui/material/Unstable_Grid2";
16+
17+
const Item = styled(Paper)(({ theme }) => ({
18+
backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
19+
...theme.typography.body2,
20+
padding: theme.spacing(1),
21+
textAlign: "center",
22+
color: theme.palette.text.secondary,
23+
}));
24+
1125
function HomepageHeader() {
1226
const { siteConfig } = useDocusaurusContext();
1327
return (
@@ -17,49 +31,26 @@ function HomepageHeader() {
1731
{siteConfig.title}
1832
{/* CodePod */}
1933
</h1>
20-
<p className="hero__subtitle">
21-
{/* {siteConfig.tagline} */}A{" "}
22-
<span
23-
style={{
24-
color: "black",
25-
background: "greenyellow",
26-
borderRadius: "5px",
27-
}}
28-
>
29-
Hierarchical Jupyter
30-
</span>{" "}
31-
for{" "}
32-
<span
33-
style={{
34-
marginRight: "2px",
35-
color: "black",
36-
background: "yellow",
37-
borderRadius: "5px",
38-
}}
39-
>
40-
Scalable
41-
</span>
42-
<span
43-
style={{
44-
color: "black",
45-
background: "cyan",
46-
borderRadius: "5px",
47-
}}
48-
>
49-
Interactive Development
50-
</span>
51-
</p>
52-
<Admonition type="caution">
53-
<p>Site Under Construction. Expected release Sep 2022</p>
34+
<p className="hero__subtitle">Coding on a canvas, more organized.</p>
35+
<Admonition type="info">
36+
<p>
37+
(new, 09/19/2022) We are open for internal testing. The v1 of the
38+
app:{" "}
39+
<Link
40+
to="https://relay.codepod.io"
41+
className="button button--secondary button--lg"
42+
>
43+
relay.codepod.io
44+
</Link>
45+
</p>
46+
<p>
47+
Please refer to the{" "}
48+
<Link to="https://youtu.be/3puYJ-rM46g">
49+
3 min tutorial video (in Chinese)
50+
</Link>{" "}
51+
for how to use it.
52+
</p>
5453
</Admonition>
55-
<div className={styles.buttons}>
56-
<Link
57-
className="button button--secondary button--lg"
58-
to="/docs/intro"
59-
>
60-
Tutorial - 5min ⏱️
61-
</Link>
62-
</div>
6354
</div>
6455
</header>
6556
);
@@ -75,6 +66,35 @@ export default function Home() {
7566
<HomepageHeader />
7667
<main>
7768
<HomepageFeatures />
69+
<hr />
70+
<div>
71+
<Box sx={{ flexGrow: 1, width: "80%", mx: "auto" }}>
72+
<Grid container spacing={2}>
73+
<Grid xs={6}>
74+
<Box>v1: Tree-based design</Box>
75+
<Item
76+
// sx={{
77+
// width: "100px",
78+
// }}
79+
>
80+
<img src="/img/tree-based.png" alt="an image" />
81+
</Item>
82+
</Grid>
83+
<Grid xs={6}>
84+
<Box>V2: Graph-based design</Box>
85+
<Item>
86+
<img src="/img/graph-based.png" alt="an image" />
87+
</Item>
88+
</Grid>
89+
{/* <Grid xs={4}>
90+
<Item>xs=4</Item>
91+
</Grid>
92+
<Grid xs={8}>
93+
<Item>xs=8</Item>
94+
</Grid> */}
95+
</Grid>
96+
</Box>
97+
</div>
7898
</main>
7999
</Layout>
80100
);

‎static/img/graph-based.png

2 MB
Loading

‎static/img/tree-based.png

595 KB
Loading

0 commit comments

Comments
 (0)