Skip to content

Commit dc85e23

Browse files
AceTheCreatorAceTheCreator
committed
feat: 💄 Added the about page
1 parent cd33efe commit dc85e23

11 files changed

Lines changed: 341 additions & 80 deletions

File tree

‎.eslintrc.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ module.exports = {
1818
Atomics: "readonly",
1919
SharedArrayBuffer: "readonly",
2020
},
21-
21+
parser: "babel-eslint",
2222
parserOptions: {
23-
ecmaVersion: 2018,
23+
ecmaVersion: 2019,
2424
sourceType: "module",
2525
},
2626
rules: {

‎src/Cell.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export default function Cell({
3535
setCurrentCell,
3636
cellId,
3737
}) {
38+
const cellOutputId = `#cell-output-${cellId}`;
3839
const refCode = useRef(null);
3940
const refOutput = useRef("");
4041
const [showMoreCellButton, setShowMoreCellButton] = useState("none");
@@ -46,6 +47,7 @@ export default function Cell({
4647
}
4748
}, [cellId, currentCell]);
4849
const getCode = async () => {
50+
window.current_cell = cellId;
4951
if (cell.type === "code") {
5052
const input = refCode.current.getCodeMirror().getValue();
5153
try {
@@ -75,6 +77,14 @@ export default function Cell({
7577
}
7678
}
7779
}
80+
if (
81+
input.includes("table") ||
82+
input.includes("plot") ||
83+
input.includes("console.log(")
84+
) {
85+
// eslint-disable-next-line no-eval
86+
console.log("hello world");
87+
}
7888
// eslint-disable-next-line no-eval
7989
const cellstate = { ...cell, input, output };
8090
dispatch({ type: "CHANGE_CELL", payload: cellstate });
@@ -159,7 +169,7 @@ export default function Cell({
159169
dispatch({ type: "DELETE_CELL", payload: cell.id });
160170
};
161171
return (
162-
<>
172+
<div style={{ paddingBottom: "30px" }}>
163173
<CellContainer>
164174
<RunContainer>
165175
{currentCell === cellId ? (
@@ -292,10 +302,10 @@ export default function Cell({
292302
onClick={() => {
293303
disableOutput();
294304
}}
295-
id="cell-output"
305+
id={cellOutputId}
296306
></Output>
297307
</div>
298-
</>
308+
</div>
299309
);
300310
}
301311

‎src/components/NavBar/navbar.js‎

Lines changed: 48 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable import/no-extraneous-dependencies */
2-
import React, { useState } from "react";
3-
import { NavLink } from "react-router-dom";
2+
import React, { useState, useEffect } from "react";
3+
import { NavLink, useHistory } from "react-router-dom";
44
import SideDrawer from "../SideDrawer/SideDrawer";
55
import {
66
NavBg,
@@ -13,32 +13,45 @@ import {
1313
} from "./navbar.style";
1414
import logo from "../../static/logo.svg";
1515

16-
export default function NavBar() {
17-
const links = [
18-
{
19-
title: "Getting Started",
20-
link: "/getting-started",
21-
},
22-
{
23-
title: "Demo",
24-
link: "/demo",
25-
},
26-
{
27-
title: "About",
28-
link: "/about",
29-
},
30-
{
31-
title: "Github",
32-
link: "https://github.com/opensource9ja/dnotebook-react",
33-
},
34-
];
16+
const links = [
17+
{
18+
title: "Getting Started",
19+
link: "/getting-started",
20+
},
21+
{
22+
title: "Demo",
23+
link: "/demo",
24+
},
25+
{
26+
title: "About",
27+
link: "/about",
28+
},
29+
{
30+
title: "Github",
31+
link: "https://github.com/opensource9ja/dnotebook-react",
32+
},
33+
];
3534

35+
export default function NavBar() {
36+
const history = useHistory();
37+
const { pathname } = history.location;
3638
const [openDrawer, setOpenDrawer] = useState(false);
39+
const [active, setActive] = useState("/getting-started");
3740

3841
const handleDrawer = () => {
3942
setOpenDrawer(() => !openDrawer);
4043
};
41-
44+
useEffect(() => {
45+
if (pathname.includes("getting-started" || pathname === "/")) {
46+
setActive("/getting-started");
47+
}
48+
if (pathname.includes("demo")) {
49+
setActive("/demo");
50+
}
51+
if (pathname.includes("about")) {
52+
setActive("/about");
53+
}
54+
}, [pathname]);
4255
return (
4356
<>
4457
<NavBg>
@@ -68,7 +81,19 @@ export default function NavBar() {
6881
{item.link.includes(":") ? (
6982
<a href={item.link}>{item.title}</a>
7083
) : (
71-
<NavLink to={item.link}>{item.title}</NavLink>
84+
<NavLink onClick={() => setActive(item.link)} to={item.link}>
85+
{active === item.link ? (
86+
<div
87+
style={{
88+
color: " #ffdf28",
89+
}}
90+
>
91+
{item.title}
92+
</div>
93+
) : (
94+
<div>{item.title}</div>
95+
)}
96+
</NavLink>
7297
)}
7398
</NavLinkItem>
7499
))}

‎src/components/layout/layout.style.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ import styled from "styled-components";
44
export const Layout = styled.div`
55
margin: 0px auto;
66
max-width: 1400px;
7+
padding: 1rem;
78
`;

‎src/index.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,8 @@ textarea{
2525
}
2626
textarea:focus{
2727
outline: none;
28-
}
28+
}
29+
a{
30+
color: #36c5ce;
31+
text-decoration: none;
32+
}

‎src/pages/about/about.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* eslint-disable react/no-unescaped-entities */
2+
import React from "react";
3+
import {
4+
Case,
5+
CaseHead,
6+
CaseSummary,
7+
Heading,
8+
Summary,
9+
UseCases,
10+
} from "./style";
11+
import { useCase } from "./usecase";
12+
13+
export default function about() {
14+
return (
15+
<div>
16+
<Heading>About Dnotebook</Heading>
17+
<Summary>
18+
Danfo Notebook (Dnotebook) is an open-source project, born out of the
19+
need to perform quick and interactive experimentation/prototyping with{" "}
20+
<a href="https://danfo.jsdata.org/" target="_blank ">
21+
Danfo.js
22+
</a>
23+
. DNotebook is a similar to the popular{" "}
24+
<a href="https://jupyter.org/" target="_blank ">
25+
Jupyter Notebook
26+
</a>{" "}
27+
but is customized for the JavaScript environment. Dnotebook is part of
28+
our grand vision at{" "}
29+
<a href="https://github.com/opensource9ja" target="_blank ">
30+
JSdata
31+
</a>{" "}
32+
to bring more Data Science and Machine Learning tools to the JavaScript
33+
ecosystem.
34+
</Summary>
35+
<div style={{ marginTop: "50px" }}>
36+
<Heading>What can it be used for?</Heading>
37+
<Summary>
38+
DNotebook allows you to create and share pages that contain live code,
39+
text and visualizations in textbook-like manner.
40+
</Summary>
41+
<UseCases>
42+
{useCase.map((i) => (
43+
<Case key={i.title}>
44+
<CaseHead>{i.title}</CaseHead>
45+
<CaseSummary>{i.summary}</CaseSummary>
46+
</Case>
47+
))}
48+
</UseCases>
49+
</div>
50+
<div style={{ marginTop: "50px" }}>
51+
<Heading>Creators and Core Maintainers</Heading>
52+
<Summary>
53+
Dnotebooks was created by{" "}
54+
<a href="https://github.com/risenW" target="_blank" rel="noreferrer">
55+
Rising Odegua
56+
</a>{" "}
57+
and{" "}
58+
<a
59+
href="https://github.com/steveoni/"
60+
target="_blank"
61+
rel="noreferrer"
62+
>
63+
Stephen Oni
64+
</a>{" "}
65+
. It is actively maintained by them as well. If you're looking to
66+
contribute to making it better, you can raise issues here. Dnotebook
67+
is hosted on GitHub.
68+
</Summary>
69+
</div>
70+
</div>
71+
);
72+
}

‎src/pages/about/style.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* eslint-disable import/prefer-default-export */
2+
import styled from "styled-components";
3+
4+
export const Heading = styled.h1`
5+
font-weight: bold;
6+
font-size: 40px;
7+
color: #2e2e2e;
8+
@media (max-width: 992px) {
9+
font-size: 28px;
10+
}
11+
`;
12+
13+
export const Summary = styled.p`
14+
font-size: 18px;
15+
color: #2e2e2e;
16+
`;
17+
18+
export const UseCases = styled.div`
19+
margin-top: 20px;
20+
margin-bottom: 20px;
21+
@media (min-width: 992px) {
22+
display: flex;
23+
align-items: center;
24+
justify-content: space-between;
25+
flex-wrap: wrap;
26+
}
27+
`;
28+
29+
export const Case = styled.div`
30+
width: 100%;
31+
margin-top: 20px;
32+
padding-top: 20px;
33+
padding-bottom: 20px;
34+
text-align: center;
35+
background: #ffffff;
36+
box-shadow: 2px 2px 1px #ffdf28;
37+
border-radius: 5px;
38+
@media (min-width: 992px) {
39+
width: 49%;
40+
}
41+
`;
42+
43+
export const CaseHead = styled.h6`
44+
font-weight: bold;
45+
font-size: 18px;
46+
margin: 0px;
47+
color: #2e2e2e;
48+
`;
49+
50+
export const CaseSummary = styled(Summary)`
51+
font-size: 16px;
52+
padding: 10px;
53+
`;

‎src/pages/about/usecase.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/* eslint-disable import/prefer-default-export */
2+
export const useCase = [
3+
{
4+
title: "Data Science/Analysis",
5+
summary:
6+
"Easily perform interactive data exploration and analysis using efficient JavaScript packages like Danfo.js.",
7+
},
8+
{
9+
title: "Machine Learning",
10+
summary:
11+
"Easily build, train and prototype machine learning models using different tools like Tensorflow.js.",
12+
},
13+
{
14+
title: "Learning JavaScript Interactively",
15+
summary:
16+
"Learn/teach JavaScript in an interactive/visual style. This can hasten learning and understanding.",
17+
},
18+
{
19+
title: "Plain Experimentation/Prototype",
20+
summary:
21+
"Any experimentation performed in JavaScript can run on Dnotebooks.",
22+
},
23+
];

src/pages/demo.js renamed to src/pages/demo/demo.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useState, useReducer } from "react";
2-
import Cell from "../Cell";
3-
import { reducer } from "../reducer";
4-
import { downLoad_notebook, load_notebook } from "../utils";
5-
import Header from "../components/header/header";
2+
import Cell from "../../Cell";
3+
import { reducer } from "../../reducer";
4+
import { downLoad_notebook, load_notebook } from "../../utils";
5+
import Header from "../../components/header/header";
66

77
const defaultState = {
88
cells: [{ id: "cell_1", input: "", output: "", type: "code" }],

‎src/routes/routes.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
import React from "react";
1+
import React, { lazy, Suspense } from "react";
22
import { Route, Switch } from "react-router-dom";
3-
import Demo from "../pages/demo";
3+
4+
const Demo = lazy(() => import("../pages/demo/demo"));
5+
const About = lazy(() => import("../pages/about/about"));
46

57
export default function Routes() {
68
return (
7-
<Switch>
8-
<Route exact component={Demo} path="/demo" />
9-
</Switch>
9+
<Suspense fallback={<div>loading</div>}>
10+
<Switch>
11+
<Route exact component={Demo} path="/demo" />
12+
<Route exact component={About} path="/about" />
13+
</Switch>
14+
</Suspense>
1015
);
1116
}

0 commit comments

Comments
 (0)