Skip to content

Commit 452e6e2

Browse files
vwhvwh
committed
feat: better loading page
1 parent cdd933b commit 452e6e2

File tree

5 files changed

+118
-121
lines changed

5 files changed

+118
-121
lines changed

‎index.html

Lines changed: 111 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,115 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Python Playground</title>
7+
<meta name="msapplication-TileColor" content="#1e1e1e" />
8+
<meta name="theme-color" content="#1e1e1e" />
9+
<link rel="manifest" href="site.webmanifest" />
10+
<meta name="robots" content="index, follow" />
11+
<link rel="canonical" href="https://vwh.github.io/python-playground/" />
12+
<!-- Favicon and icons -->
13+
<link rel="icon" href="./icons/favicon.ico" type="image/x-icon" />
14+
<link
15+
rel="apple-touch-icon"
16+
sizes="180x180"
17+
href="./icons/apple-touch-icon.png"
18+
/>
19+
<link
20+
rel="icon"
21+
type="image/png"
22+
sizes="32x32"
23+
href="./icons/favicon-32x32.png"
24+
/>
25+
<link
26+
rel="icon"
27+
type="image/png"
28+
sizes="16x16"
29+
href="./icons/favicon-16x16.png"
30+
/>
31+
<link
32+
rel="icon"
33+
type="image/png"
34+
sizes="192x192"
35+
href="./icons/android-chrome-192x192.png"
36+
/>
37+
<link
38+
rel="icon"
39+
type="image/png"
40+
sizes="512x512"
41+
href="./icons/android-chrome-512x512.png"
42+
/>
43+
<!-- Meta Tags -->
44+
<meta
45+
name="description"
46+
content="Explore and experiment with Python code in your browser"
47+
/>
48+
<meta
49+
name="keywords"
50+
content="Python, coding, programming, interactive, learning, code playground, Python tutorials, Python experiments, code testing"
51+
/>
52+
<meta property="og:title" content="Python Playground" />
53+
<meta
54+
property="og:description"
55+
content="Explore and experiment with Python code in your browser"
56+
/>
57+
<meta
58+
property="og:image"
59+
content="https://vwh.github.io/python-playground/preview.png"
60+
/>
61+
<meta
62+
property="og:url"
63+
content="https://vwh.github.io/python-playground/"
64+
/>
65+
<meta property="og:type" content="website" />
66+
<meta name="twitter:title" content="Python Playground" />
67+
<meta
68+
name="twitter:description"
69+
content="Explore and experiment with Python code in your browser"
70+
/>
71+
<meta name="author" content="vwh" />
72+
<!-- Fonts -->
73+
<link rel="preconnect" href="https://fonts.googleapis.com" />
74+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
75+
<link
76+
rel="stylesheet"
77+
href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
78+
/>
79+
<!-- Critical CSS -->
80+
<style>
81+
* {
82+
font-family: "Fira Mono", monospace;
83+
}
384

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Python Playground</title>
8-
<meta name="msapplication-TileColor" content="#1e1e1e">
9-
<meta name="theme-color" content="#1e1e1e">
10-
<link rel="manifest" href="site.webmanifest">
11-
<meta name="robots" content="index, follow">
12-
<link rel="canonical" href="https://vwh.github.io/python-playground/">
13-
<!-- Favicon and icons -->
14-
<link rel="icon" href="./icons/favicon.ico" type="image/x-icon" />
15-
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
16-
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
17-
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
18-
<link rel="icon" type="image/png" sizes="192x192" href="./icons/android-chrome-192x192.png" />
19-
<link rel="icon" type="image/png" sizes="512x512" href="./icons/android-chrome-512x512.png" />
20-
<!-- Meta Tags -->
21-
<meta name="description" content="Explore and experiment with Python code in your browser">
22-
<meta name="keywords"
23-
content="Python, coding, programming, interactive, learning, code playground, Python tutorials, Python experiments, code testing">
24-
<meta property="og:title" content="Python Playground">
25-
<meta property="og:description" content="Explore and experiment with Python code in your browser">
26-
<meta property="og:image" content="https://vwh.github.io/python-playground/preview.png">
27-
<meta property="og:url" content="https://vwh.github.io/python-playground/">
28-
<meta property="og:type" content="website">
29-
<meta name="twitter:title" content="Python Playground">
30-
<meta name="twitter:description" content="Explore and experiment with Python code in your browser">
31-
<meta name="author" content="vwh">
32-
<!-- Fonts -->
33-
<link rel="preconnect" href="https://fonts.googleapis.com">
34-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
35-
<link rel="stylesheet"
36-
href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap">
37-
<!-- Critical CSS -->
38-
<style>
39-
* {
40-
font-family: "Fira Mono", monospace;
41-
}
85+
.no-js {
86+
text-align: center;
87+
margin-top: 20%;
88+
}
4289

43-
.no-js {
44-
text-align: center;
45-
margin-top: 20%;
46-
}
90+
.no-js h1 {
91+
font-size: 2rem;
92+
}
93+
</style>
94+
<!-- Pyodide -->
95+
<script
96+
defer
97+
src="https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js"
98+
></script>
99+
</head>
47100

48-
.no-js h1 {
49-
font-size: 2rem;
50-
}
51-
</style>
52-
<!-- Pyodide -->
53-
<script defer src="https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js"></script>
54-
</head>
55-
56-
<body>
57-
<div id="root" class="bg-background"></div>
58-
<script type="module" src="/src/main.tsx"></script>
59-
<noscript>
60-
<div class="no-js">
61-
<h1>JavaScript Required</h1>
62-
<p>
63-
We're sorry, but this application requires JavaScript to function
64-
correctly. Please enable JavaScript in your browser and reload the
65-
page.
66-
</p>
67-
</div>
68-
</noscript>
69-
</body>
70-
71-
</html>
101+
<body>
102+
<div id="root" class="bg-background"></div>
103+
<script type="module" src="/src/main.tsx"></script>
104+
<noscript>
105+
<div class="no-js">
106+
<h1>JavaScript Required</h1>
107+
<p>
108+
We're sorry, but this application requires JavaScript to function
109+
correctly. Please enable JavaScript in your browser and reload the
110+
page.
111+
</p>
112+
</div>
113+
</noscript>
114+
</body>
115+
</html>

‎public/images/logo.png

-11.8 KB
Binary file not shown.

‎public/images/logo.webp

2.2 KB
Binary file not shown.

‎src/App.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import Editor from "./components/editor/editor";
77
import ButtonsNav from "./components/nav-buttons";
88
import Stats from "./components/editor/stats";
99
import Terminal from "./components/editor/terminal";
10-
import Ripple from "@/components/ui/ripple";
1110
import {
1211
ResizableHandle,
1312
ResizablePanel,
@@ -36,10 +35,14 @@ function App() {
3635
return (
3736
<section className="absolute z-[999] flex h-screen w-full flex-col items-center justify-center gap-3 bg-background text-foreground">
3837
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden bg-background md:shadow-xl">
39-
<p className="z-10 animate-pulse whitespace-pre-wrap text-center text-2xl font-bold tracking-tighter text-white">
40-
Loading
38+
<img
39+
src="./images/logo.webp"
40+
alt="logo"
41+
className="h-52 w-52 animate-pulse"
42+
/>
43+
<p className="sm:text-1xl mt-2 animate-pulse whitespace-pre-wrap text-center text-xl font-semibold tracking-tighter text-white">
44+
Loading WebAssembly
4145
</p>
42-
<Ripple />
4346
</div>
4447
</section>
4548
);

‎src/components/ui/ripple.tsx

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

0 commit comments

Comments
 (0)