summaryrefslogtreecommitdiffhomepage
path: root/app/packages/web/src
diff options
context:
space:
mode:
authorFrank <[email protected]>2025-05-23 14:17:45 -0400
committerDax Raad <[email protected]>2025-05-26 12:40:17 -0400
commit83974e0c95d65c72d12e7d58a287514c39f3768f (patch)
tree274625aa4693b0d71b50eae3cfedb5d6245f99f9 /app/packages/web/src
parent59d43fa5da0619655c7ba3360e969bcbda1716ea (diff)
downloadopencode-83974e0c95d65c72d12e7d58a287514c39f3768f.tar.gz
opencode-83974e0c95d65c72d12e7d58a287514c39f3768f.zip
Share: sync
Diffstat (limited to 'app/packages/web/src')
-rw-r--r--app/packages/web/src/app.css39
-rw-r--r--app/packages/web/src/app.tsx20
-rw-r--r--app/packages/web/src/entry-client.tsx4
-rw-r--r--app/packages/web/src/entry-server.tsx21
-rw-r--r--app/packages/web/src/global.d.ts1
-rw-r--r--app/packages/web/src/routes/[...404].tsx19
-rw-r--r--app/packages/web/src/routes/index.tsx14
-rw-r--r--app/packages/web/src/routes/share/[id].tsx150
8 files changed, 268 insertions, 0 deletions
diff --git a/app/packages/web/src/app.css b/app/packages/web/src/app.css
new file mode 100644
index 000000000..8596998a4
--- /dev/null
+++ b/app/packages/web/src/app.css
@@ -0,0 +1,39 @@
+body {
+ font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+a {
+ margin-right: 1rem;
+}
+
+main {
+ text-align: center;
+ padding: 1em;
+ margin: 0 auto;
+}
+
+h1 {
+ color: #335d92;
+ text-transform: uppercase;
+ font-size: 4rem;
+ font-weight: 100;
+ line-height: 1.1;
+ margin: 4rem auto;
+ max-width: 14rem;
+}
+
+p {
+ max-width: 14rem;
+ margin: 2rem auto;
+ line-height: 1.35;
+}
+
+@media (min-width: 480px) {
+ h1 {
+ max-width: none;
+ }
+
+ p {
+ max-width: none;
+ }
+}
diff --git a/app/packages/web/src/app.tsx b/app/packages/web/src/app.tsx
new file mode 100644
index 000000000..e6ad8f9df
--- /dev/null
+++ b/app/packages/web/src/app.tsx
@@ -0,0 +1,20 @@
+import { MetaProvider, Title } from "@solidjs/meta"
+import { Router } from "@solidjs/router"
+import { FileRoutes } from "@solidjs/start/router"
+import { Suspense } from "solid-js"
+import "./app.css"
+
+export default function App() {
+ return (
+ <Router
+ root={(props) => (
+ <MetaProvider>
+ <Title>SolidStart - Basic</Title>
+ <Suspense>{props.children}</Suspense>
+ </MetaProvider>
+ )}
+ >
+ <FileRoutes />
+ </Router>
+ )
+}
diff --git a/app/packages/web/src/entry-client.tsx b/app/packages/web/src/entry-client.tsx
new file mode 100644
index 000000000..0ca4e3c30
--- /dev/null
+++ b/app/packages/web/src/entry-client.tsx
@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => <StartClient />, document.getElementById("app")!);
diff --git a/app/packages/web/src/entry-server.tsx b/app/packages/web/src/entry-server.tsx
new file mode 100644
index 000000000..401eff83f
--- /dev/null
+++ b/app/packages/web/src/entry-server.tsx
@@ -0,0 +1,21 @@
+// @refresh reload
+import { createHandler, StartServer } from "@solidjs/start/server";
+
+export default createHandler(() => (
+ <StartServer
+ document={({ assets, children, scripts }) => (
+ <html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" href="/favicon.ico" />
+ {assets}
+ </head>
+ <body>
+ <div id="app">{children}</div>
+ {scripts}
+ </body>
+ </html>
+ )}
+ />
+));
diff --git a/app/packages/web/src/global.d.ts b/app/packages/web/src/global.d.ts
new file mode 100644
index 000000000..dc6f10c22
--- /dev/null
+++ b/app/packages/web/src/global.d.ts
@@ -0,0 +1 @@
+/// <reference types="@solidjs/start/env" />
diff --git a/app/packages/web/src/routes/[...404].tsx b/app/packages/web/src/routes/[...404].tsx
new file mode 100644
index 000000000..4ea71ec7f
--- /dev/null
+++ b/app/packages/web/src/routes/[...404].tsx
@@ -0,0 +1,19 @@
+import { Title } from "@solidjs/meta";
+import { HttpStatusCode } from "@solidjs/start";
+
+export default function NotFound() {
+ return (
+ <main>
+ <Title>Not Found</Title>
+ <HttpStatusCode code={404} />
+ <h1>Page Not Found</h1>
+ <p>
+ Visit{" "}
+ <a href="https://start.solidjs.com" target="_blank">
+ start.solidjs.com
+ </a>{" "}
+ to learn how to build SolidStart apps.
+ </p>
+ </main>
+ );
+}
diff --git a/app/packages/web/src/routes/index.tsx b/app/packages/web/src/routes/index.tsx
new file mode 100644
index 000000000..415b32744
--- /dev/null
+++ b/app/packages/web/src/routes/index.tsx
@@ -0,0 +1,14 @@
+import { Title } from "@solidjs/meta"
+import { A } from "@solidjs/router"
+
+export default function Home() {
+ return (
+ <main>
+ <Title>Share Demo</Title>
+ <h1>Share Demo</h1>
+ <p>
+ <A href="/share/test-share-id">Go to test share</A>
+ </p>
+ </main>
+ )
+}
diff --git a/app/packages/web/src/routes/share/[id].tsx b/app/packages/web/src/routes/share/[id].tsx
new file mode 100644
index 000000000..d7f80e06a
--- /dev/null
+++ b/app/packages/web/src/routes/share/[id].tsx
@@ -0,0 +1,150 @@
+import { Title } from "@solidjs/meta"
+import { createSignal, onCleanup, onMount, Show, For } from "solid-js"
+import { useParams } from "@solidjs/router"
+
+type Message = {
+ filename: string
+ content: string
+}
+
+export default function SharePage() {
+ const params = useParams<{ id: string }>()
+ const [messages, setMessages] = createSignal<Message[]>([])
+ const [connectionStatus, setConnectionStatus] = createSignal("Disconnected")
+
+ onMount(() => {
+ // Get the API URL from environment
+ const apiUrl = import.meta.env.VITE_API_URL
+ const shareId = params.id
+
+ console.log("Mounting Share component with ID:", shareId)
+ console.log("API URL:", apiUrl)
+
+ if (!apiUrl) {
+ console.error("API URL not found in environment variables")
+ setConnectionStatus("Error: API URL not found")
+ return
+ }
+
+ let reconnectTimer: number | undefined
+ let socket: WebSocket | null = null
+
+ // Function to create and set up WebSocket with auto-reconnect
+ const setupWebSocket = () => {
+ // Close any existing connection
+ if (socket) {
+ socket.close()
+ }
+
+ setConnectionStatus("Connecting...")
+
+ // Always use secure WebSocket protocol (wss)
+ const wsBaseUrl = apiUrl.replace(/^https?:\/\//, 'wss://')
+ const wsUrl = `${wsBaseUrl}/share_poll?share_id=${shareId}`
+ console.log("Connecting to WebSocket URL:", wsUrl)
+
+ // Create WebSocket connection
+ socket = new WebSocket(wsUrl)
+
+ // Handle connection opening
+ socket.onopen = () => {
+ setConnectionStatus("Connected")
+ console.log("WebSocket connection established")
+ }
+
+ // Handle incoming messages
+ socket.onmessage = (event) => {
+ console.log("WebSocket message received")
+ try {
+ const data = JSON.parse(event.data) as Message
+ setMessages((prev) => [...prev, data])
+ } catch (error) {
+ console.error("Error parsing WebSocket message:", error)
+ }
+ }
+
+ // Handle errors
+ socket.onerror = (error) => {
+ console.error("WebSocket error:", error)
+ setConnectionStatus("Error: Connection failed")
+ }
+
+ // Handle connection close and reconnection
+ socket.onclose = (event) => {
+ console.log(`WebSocket closed: ${event.code} ${event.reason}`)
+ setConnectionStatus("Disconnected, reconnecting...")
+
+ // Try to reconnect after 2 seconds
+ clearTimeout(reconnectTimer)
+ reconnectTimer = window.setTimeout(
+ setupWebSocket,
+ 2000
+ ) as unknown as number
+ }
+ }
+
+ // Initial connection
+ setupWebSocket()
+
+ // Clean up on component unmount
+ onCleanup(() => {
+ console.log("Cleaning up WebSocket connection")
+ if (socket) {
+ socket.close()
+ }
+ clearTimeout(reconnectTimer)
+ })
+ })
+
+ return (
+ <main>
+ <Title>Share: {params.id}</Title>
+ <h1>Share: {params.id}</h1>
+
+ <div style={{ margin: "2rem 0" }}>
+ <h2>WebSocket Connection</h2>
+ <p>
+ Status: <strong>{connectionStatus()}</strong>
+ </p>
+
+ <h3>Live Updates</h3>
+ <div
+ style={{
+ border: "1px solid #ccc",
+ padding: "1rem",
+ borderRadius: "0.5rem",
+ maxHeight: "500px",
+ overflowY: "auto",
+ }}
+ >
+ <Show
+ when={messages().length > 0}
+ fallback={<p>Waiting for messages...</p>}
+ >
+ <ul style={{ listStyleType: "none", padding: 0 }}>
+ <For each={messages()}>
+ {(msg) => (
+ <li
+ style={{
+ padding: "0.5rem",
+ margin: "0.5rem 0",
+ backgroundColor: "#f5f5f5",
+ borderRadius: "0.25rem",
+ }}
+ >
+ <div>
+ <strong>Filename:</strong> {msg.filename}
+ </div>
+ <div>
+ <strong>Content:</strong> {msg.content}
+ </div>
+ </li>
+ )}
+ </For>
+ </ul>
+ </Show>
+ </div>
+ </div>
+ </main>
+ )
+}
generated by cgit v1.2.3 (git 2.39.1) at 2026-07-20 14:17:05 +0000