@tscircuit/fake-snippets 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.js +19 -2
- package/fake-snippets-api/routes/api/package_releases/get.ts +21 -1
- package/index.html +103 -21
- package/package.json +1 -1
- package/src/App.tsx +12 -1
|
@@ -15,7 +15,27 @@ export default withRouteSpec({
|
|
|
15
15
|
package_release: zt.packageReleaseSchema,
|
|
16
16
|
}),
|
|
17
17
|
})(async (req, ctx) => {
|
|
18
|
-
const { package_release_id } = req.jsonBody
|
|
18
|
+
const { package_release_id, package_name_with_version } = req.jsonBody
|
|
19
|
+
|
|
20
|
+
if (package_name_with_version && !package_release_id) {
|
|
21
|
+
const [packageName, parsedVersion] = package_name_with_version.split("@")
|
|
22
|
+
const pkg = ctx.db.packages.find((x) => x.name === packageName)
|
|
23
|
+
const pkgRelease = ctx.db.packageReleases.find((x) => {
|
|
24
|
+
return x.version == parsedVersion && x.package_id == pkg?.package_id
|
|
25
|
+
})
|
|
26
|
+
|
|
27
|
+
if (!pkgRelease) {
|
|
28
|
+
return ctx.error(404, {
|
|
29
|
+
error_code: "package_release_not_found",
|
|
30
|
+
message: "Package release not found",
|
|
31
|
+
})
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return ctx.json({
|
|
35
|
+
ok: true,
|
|
36
|
+
package_release: publicMapPackageRelease(pkgRelease),
|
|
37
|
+
})
|
|
38
|
+
}
|
|
19
39
|
|
|
20
40
|
const foundRelease =
|
|
21
41
|
package_release_id && ctx.db.getPackageReleaseById(package_release_id)
|
package/index.html
CHANGED
|
@@ -1,23 +1,105 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="robots" content="index, follow, NOODP" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
|
|
9
|
+
<title>tscircuit - Code Electronics with React</title>
|
|
10
|
+
<meta name="description"
|
|
11
|
+
content="tscircuit is an open-source electronics design tool that lets you create circuits using React components. Design schematics, generate PCB layouts, export and manufacture PCBs online!" />
|
|
12
|
+
<meta name="keywords"
|
|
13
|
+
content="electronic design, PCB design, schematic capture, React components, circuit design, electronics CAD, open source EDA" />
|
|
14
|
+
<meta property="og:title" content="tscircuit - Design Electronics with React Components" />
|
|
15
|
+
<meta property="og:description"
|
|
16
|
+
content="Create electronic circuits using React components. Design schematics, generate PCB layouts, and manufacture custom PCBs with this free open-source tool." />
|
|
17
|
+
<meta property="og:type" content="website" />
|
|
18
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
19
|
+
<meta name="twitter:title" content="tscircuit - Design Electronics with React Components" />
|
|
20
|
+
<meta name="twitter:description"
|
|
21
|
+
content="Create electronic circuits using React components. Free open-source electronics design tool." />
|
|
22
|
+
<link rel="canonical" href="https://tscircuit.com" />
|
|
23
|
+
|
|
24
|
+
<style>
|
|
25
|
+
/* Loader Styles */
|
|
26
|
+
.loading-overlay {
|
|
27
|
+
position: fixed;
|
|
28
|
+
top: 0;
|
|
29
|
+
left: 0;
|
|
30
|
+
width: 100%;
|
|
31
|
+
height: 100%;
|
|
32
|
+
background: rgba(255, 255, 255, 0.7);
|
|
33
|
+
display: flex;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
align-items: center;
|
|
36
|
+
z-index: 9999;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.loading-container {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
align-items: center;
|
|
43
|
+
gap: 1em;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.loading {
|
|
47
|
+
background-color: lightgrey;
|
|
48
|
+
height: 2px;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
position: relative;
|
|
51
|
+
width: 12em;
|
|
52
|
+
border-radius: 2px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.loading-bar {
|
|
56
|
+
animation: side2side 2s ease-in-out infinite;
|
|
57
|
+
background-color: dodgerblue;
|
|
58
|
+
height: 100%;
|
|
59
|
+
position: absolute;
|
|
60
|
+
width: 45%;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes side2side {
|
|
64
|
+
0%, 100% {
|
|
65
|
+
transform: translateX(-50%);
|
|
66
|
+
}
|
|
67
|
+
50% {
|
|
68
|
+
transform: translateX(150%);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
72
|
+
|
|
73
|
+
<script>
|
|
74
|
+
window.onload = function() {
|
|
75
|
+
const loader = document.getElementById("loader");
|
|
76
|
+
const root = document.getElementById("root");
|
|
77
|
+
|
|
78
|
+
// Hide the loader and show the root when the page has fully loaded
|
|
79
|
+
loader.style.transition = "opacity 0.3s ease";
|
|
80
|
+
loader.style.opacity = "0"; // Fade out the loader
|
|
81
|
+
setTimeout(function() {
|
|
82
|
+
loader.style.display = "none"; // Hide loader completely
|
|
83
|
+
root.style.visibility = "visible"; // Show the root content
|
|
84
|
+
}, 300); // Match the opacity transition duration
|
|
85
|
+
};
|
|
86
|
+
</script>
|
|
87
|
+
</head>
|
|
88
|
+
|
|
89
|
+
<body>
|
|
90
|
+
<div class="loaderanimation">
|
|
91
|
+
<div id="loader" class="loading-overlay">
|
|
92
|
+
<div class="loading-container">
|
|
93
|
+
<div class="loading">
|
|
94
|
+
<div class="loading-bar"></div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div id="root" class="loaderanimation" style="visibility: hidden;"></div> <!-- Initially hidden -->
|
|
101
|
+
|
|
102
|
+
<script type="module" src="./src/main.tsx"></script>
|
|
103
|
+
</body>
|
|
104
|
+
|
|
105
|
+
</html>
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -5,9 +5,20 @@ import "./components/CmdKMenu"
|
|
|
5
5
|
import { ContextProviders } from "./ContextProviders"
|
|
6
6
|
import React from "react"
|
|
7
7
|
|
|
8
|
+
const FullPageLoader = () => (
|
|
9
|
+
<div className="fixed inset-0 flex items-center justify-center bg-white z-50">
|
|
10
|
+
<div className="w-48">
|
|
11
|
+
<div className="loading">
|
|
12
|
+
<div className="loading-bar"></div>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
)
|
|
17
|
+
|
|
8
18
|
const lazyImport = (importFn: () => Promise<any>) =>
|
|
9
19
|
lazy<ComponentType<any>>(async () => {
|
|
10
20
|
try {
|
|
21
|
+
await new Promise((resolve) => setTimeout(resolve, 500))
|
|
11
22
|
const module = await importFn()
|
|
12
23
|
|
|
13
24
|
if (module.default) {
|
|
@@ -85,7 +96,7 @@ function App() {
|
|
|
85
96
|
return (
|
|
86
97
|
<ContextProviders>
|
|
87
98
|
<ErrorBoundary>
|
|
88
|
-
<Suspense fallback={<
|
|
99
|
+
<Suspense fallback={<FullPageLoader />}>
|
|
89
100
|
<Switch>
|
|
90
101
|
<Route path="/" component={LandingPage} />
|
|
91
102
|
<Route path="/editor" component={EditorPage} />
|