Skip to content
This repository was archived by the owner on Aug 26, 2024. It is now read-only.

Commit 9f8f75c

Browse files
TeaByteTeaByte
committed
fixing
1 parent aed0815 commit 9f8f75c

File tree

10 files changed

+166
-135
lines changed

10 files changed

+166
-135
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/python.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<script src="https://cdn.jsdelivr.net/npm/pyodide@0.24/pyodide.min.js"></script>
7+
<script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
88
<title>Python Playground</title>
99
</head>
1010
<body>

‎package-lock.json

Lines changed: 57 additions & 29 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@
1313
"@monaco-editor/react": "^4.6.0",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
16-
"react-split-pane": "^0.1.92"
16+
"split-pane-react": "^0.1.3"
1717
},
1818
"devDependencies": {
1919
"@types/react": "^18.2.15",
2020
"@types/react-dom": "^18.2.7",
2121
"@vitejs/plugin-react": "^4.0.3",
2222
"autoprefixer": "^10.4.16",
23+
"daisyui": "^3.9.3",
2324
"eslint": "^8.45.0",
2425
"eslint-plugin-react": "^7.32.2",
2526
"eslint-plugin-react-hooks": "^4.6.0",

‎public/slide.svg

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

‎src/App.jsx

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
11
import { useState, useEffect } from "react";
2-
import SplitPane from "react-split-pane";
2+
import SplitPane from "split-pane-react";
3+
import "split-pane-react/esm/themes/default.css";
34

45
import Loader from "./pyodide-loader";
56
import CodeEditor from "./components/editor";
67
import NavButtons from "./components/nav-buttons";
78

89
function App() {
910
const [pythonCode, setPythonCode] = useState(
10-
"print('https://github.com/TeaByte/python-playground')"
11+
`import snowballstemmer\n
12+
stemmer = snowballstemmer.stemmer('english')
13+
print(stemmer.stemWords('go goes going gone'.split()))
14+
15+
print('https://github.com/TeaByte/python-playground')
16+
`
1117
);
18+
1219
const [pythonResult, setPythonResult] = useState("");
1320
const [isError, setIsError] = useState(false);
1421

1522
const [pyodideLoaded, setPyodideLoaded] = useState(false);
1623
const [position, setPosition] = useState("horizontal");
24+
const [sizes, setSizes] = useState([100, "9%", "auto"]);
1725

1826
useEffect(() => {
1927
(async function pyodideLoader() {
20-
let pyodide = await window.loadPyodide();
28+
const pyodide = await window.loadPyodide();
29+
await pyodide.loadPackage("micropip");
30+
const micropip = pyodide.pyimport("micropip");
31+
await micropip.install("snowballstemmer");
32+
2133
window.pyodide = pyodide;
22-
console.log(pyodide);
34+
window.micropip = micropip;
35+
2336
setPyodideLoaded(true);
2437
setPythonResult(pyodide.runPython("import sys;sys.version.split()[0]"));
2538
})();
@@ -34,18 +47,18 @@ function App() {
3447
}
3548

3649
return (
37-
<main>
50+
<main className="bg-base-200" style={{ height: "100vh" }}>
3851
{pyodideLoaded ? (
3952
<SplitPane
53+
className="splitrow"
4054
split={position}
41-
minSize={100}
42-
defaultSize="70%"
43-
className="flex flex-col"
55+
sizes={sizes}
56+
onChange={setSizes}
4457
>
4558
<section className="w-full h-full">
4659
{pyodideLoaded ? (
4760
<NavButtons
48-
className="flex gap-2 p-2 py-2 bg-[#1E1E1E] items-center justify-center md:justify-start overflow-x-auto"
61+
className="flex gap-2 p-2 py-2 bg-base-200 items-center justify-center md:justify-start overflow-x-auto"
4962
setPythonResult={setPythonResult}
5063
setPythonCode={setPythonCode}
5164
pythonCode={pythonCode}
@@ -57,11 +70,10 @@ function App() {
5770
)}
5871
<CodeEditor setPythonCode={setPythonCode} pythonCode={pythonCode} />
5972
</section>
60-
<section className="w-full h-full bg-black">
73+
<section className="w-full h-full bg-base-200">
6174
<pre
6275
className={
63-
"bg-black text-green-400 p-4 " +
64-
(isError ? "text-red-400" : "")
76+
"bg-base-200 p-4 " + (isError ? "text-error" : "text-success")
6577
}
6678
style={{ maxHeight: "500px", overflowY: "auto" }}
6779
>

‎src/components/button.jsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,7 @@ Button.propTypes = {
77

88
export default function Button(props) {
99
return (
10-
<button
11-
className={
12-
"bg-[#3f3c3c] text-white p-2 rounded hover:bg-[#504b4b] transition " +
13-
props.appendclass
14-
}
15-
{...props}
16-
>
10+
<button className={"btn " + props.appendclass} {...props}>
1711
<div className="flex justify-center items-center gap-1">
1812
{props.children}
1913
</div>

‎src/components/nav-buttons/index.jsx

Lines changed: 65 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Button from "../button";
22
import { RunIcon, ClearIcon, RotateIcon, DownloadIcon } from "../icons";
3-
3+
import { useState } from "react";
44
import PropTypes from "prop-types";
55

66
NavButtons.propTypes = {
@@ -13,6 +13,8 @@ NavButtons.propTypes = {
1313
};
1414

1515
export default function NavButtons(props) {
16+
const [pipValue, setPipValue] = useState("");
17+
1618
function executeCode() {
1719
const pythonCode = props.pythonCode;
1820
const setPythonResult = props.setPythonResult;
@@ -60,24 +62,68 @@ result
6062
document.body.removeChild(link);
6163
}
6264

65+
async function pipInstall() {
66+
const lib = pipValue.replace("pip install ", "");
67+
try {
68+
const micropip = window.micropip;
69+
await micropip.install(lib);
70+
props.setPythonResult(`pip install ${lib} successfully installed`);
71+
props.setIsError(false);
72+
} catch (e) {
73+
props.setPythonResult(`Failed to install ${lib}, ${e}`);
74+
props.setIsError(true);
75+
}
76+
}
77+
6378
return (
64-
<nav className={props.className}>
65-
<Button onClick={executeCode}>
66-
<RunIcon />
67-
Run
68-
</Button>
69-
<Button onClick={clearCode}>
70-
<ClearIcon />
71-
Clear
72-
</Button>
73-
<Button onClick={props.rotate} appendclass="hidden md:flex">
74-
<RotateIcon />
75-
Rotate
76-
</Button>
77-
<Button onClick={downloadCode}>
78-
<DownloadIcon />
79-
Download
80-
</Button>
81-
</nav>
79+
<>
80+
<nav className={props.className}>
81+
<Button onClick={executeCode} appendclass="btn-info">
82+
<RunIcon />
83+
Run
84+
</Button>
85+
<Button onClick={clearCode} appendclass="btn-outline btn-info">
86+
<ClearIcon />
87+
Clear
88+
</Button>
89+
<Button
90+
onClick={props.rotate}
91+
appendclass="hidden md:flex btn-outline btn-info"
92+
>
93+
<RotateIcon />
94+
Rotate
95+
</Button>
96+
<Button onClick={downloadCode} appendclass="btn-outline btn-info">
97+
<DownloadIcon />
98+
Download
99+
</Button>
100+
{/* DESKTOP VIEW */}
101+
<div className="hidden md:flex gap-1 ml-2 bg-base-200">
102+
<input
103+
type="text"
104+
value={pipValue}
105+
onChange={(e) => setPipValue(e.target.value)}
106+
placeholder="pip install ..."
107+
className="input input-bordered input-info w-[50%] max-w-xs"
108+
/>
109+
<Button onClick={pipInstall} appendclass="btn-outline btn-info">
110+
<DownloadIcon />
111+
</Button>
112+
</div>
113+
</nav>
114+
{/* PHONE VIEW */}
115+
<div className="md:hidden flex gap-1 ml-2 bg-base-200 w-full justify-center pb-2">
116+
<input
117+
type="text"
118+
value={pipValue}
119+
onChange={(e) => setPipValue(e.target.value)}
120+
placeholder="pip install ..."
121+
className="input input-bordered input-info w-[50%] max-w-xs"
122+
/>
123+
<Button onClick={pipInstall} appendclass="btn-outline btn-info">
124+
<DownloadIcon />
125+
</Button>
126+
</div>
127+
</>
82128
);
83129
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy