move demo

Author: Tsche

CNAME

@@ -1 +1 @@
-clangd.guyutongxue.site
+clangd.cpp.social

Dockerfile

@@ -26,7 +26,7 @@ RUN pnpm install --frozen-lockfile --prefer-offline
 COPY --chown=node:node . .
 
 ENV NODE_ENV=development
-EXPOSE 4173 4174 4175 4176
+EXPOSE 4173
 
 USER node
 CMD ["pnpm", "dev", "--host", "0.0.0.0"]

README.md

@@ -96,8 +96,6 @@ The renderer creates text nodes and styled spans rather than injecting HTML. The
 
 Status events have a `type` of `monaco-loading`, `monaco-ready`, `clangd-downloading`, `clangd-starting`, `clangd-ready`, or `clangd-error`. Download events also contain `loaded` and, when the server provides it, `total` bytes.
 
-See [demo/index.html](demo/index.html), [demo/demo.js](demo/demo.js), and [demo/demo.css](demo/demo.css) for a complete framework-free highlighted fallback editor, seamless handoff, ANSI-aware Run output, and Compiler Explorer link. The demo's **Show fallback / Show Monaco** toggle recreates the fallback on demand for visual comparison; the normal one-way startup handoff still removes and cleans up the fallback.
-
 ## Headers
 
 The host document must be cross-origin isolated for clangd's SharedArrayBuffer/pthread build:
@@ -161,29 +159,6 @@ Install an existing artifact directory or archive with:
 
 The input must contain `clangd.js`, `clangd.wasm`, and any other `clangd*` files produced by Emscripten. `build.sh` remains a separate manual reference workflow and is not invoked by `pnpm build` or CI.
 
-## Cross-origin demo and tests
-
-Build first, then start all acceptance origins:
-
-```bash
-pnpm build
-pnpm demo:origins
-```
-
-- `http://localhost:4173` serves the demo host with COOP/COEP.
-- `http://localhost:4174` serves runtime assets with CORS/CORP.
-- `http://localhost:4175` serves the same runtime at `/assets/clangd/` for same-origin testing.
-- `http://localhost:4176` serves a non-isolated host for graceful-degradation testing.
-
-Run the Chromium acceptance suite with:
-
-```bash
-pnpm exec playwright install chromium
-pnpm test:browser
-```
-
-The tests cover immediate fallback editing and Run, delayed runtime/WASM, edit-preserving handoff, DOM ownership, cross-origin isolation and worker startup, real clangd diagnostics, failure behavior, and same-origin extraction layout.
-
 ## Compiler Explorer Run UI
 
 Compilation is intentionally a host concern. The demo keeps an `activeEditor.getValue()` abstraction that initially reads the textarea and later points to Monaco, then sends that source directly to the Compiler Explorer API. This makes Run independent of both Monaco and clangd readiness.

package.json

@@ -5,11 +5,10 @@
   "type": "module",
   "scripts": {
     "clean": "vite-node --config ./scripts/vite.node.ts ./scripts/clean.ts",
-    "dev": "pnpm build && pnpm demo:origins",
+    "dev": "pnpm build",
     "watch": "tsc -w",
     "build": "pnpm run clean && tsc && vite build && node scripts/copy-runtime-assets.mjs",
     "pack:runtime": "pnpm build && bash scripts/package-runtime.sh",
-    "demo:origins": "node scripts/serve-demo.mjs",
     "test:browser": "playwright test"
   },
   "devDependencies": {

playwright.config.ts

@@ -9,10 +9,7 @@ const initialFallbackHost = document.querySelector("[data-fallback]");
 const initialTextarea = initialFallbackHost.querySelector("textarea");
 
 const params = new URLSearchParams(location.search);
-const editorUrl = params.get("runtime") ??
-  (location.port === "4175"
-    ? "/assets/clangd/editor.js"
-    : `http://localhost:4174/editor.js${params.get("delay") ? `?delay=${params.get("delay")}` : ""}`);
+const editorUrl = params.get("runtime") ?? "./editor.js";
 const runtimeBase = new URL(".", new URL(editorUrl, location.href));
 const editorModulePromise = import(editorUrl);
 const fallbackModulePromise = import(new URL("fallback.js", runtimeBase));
@@ -138,7 +135,11 @@ try {
       }
       if (event.type === "clangd-starting") status.textContent = "Starting clangd...";
       if (event.type === "clangd-ready") status.textContent = "Monaco + clangd ready";
-      if (event.type === "clangd-error") status.textContent = "Monaco ready - clangd unavailable";
+      if (event.type === "clangd-error"){ 
+        status.textContent = "Monaco ready - clangd unavailable";
+        console.error(event);
+      }
+      
     },
   });
 

demo/demo.css public/demo.cssdemo/demo.css renamed to public/demo.css

@@ -9,8 +9,9 @@
   <body>
     <main>
       <p class="eyebrow">C++ - Monaco - clangd</p>
-      <h1>Edit and run C++ in the browser</h1>
-      <p class="intro">The native editor is ready now. Monaco and clangd upgrade it in the background.</p>
+      <h1>Code blocks with clangd support</h1>
+      <p class="intro">The simple fallback editor is ready immediately. Monaco and clangd upgrade it in the background.</p>
+      <p class="intro">This is intended to be used on <a href="https://cpp.social">cpp.social</a>, but if you find use for this please do reach out. This tool is based on Guyutongxue's excellent work in <a href="https://github.com/guyutongxue/clangd-in-browser/">guyutongxue/clangd-in-browser</a>.</p>
 
       <section class="cpp-demo" aria-label="C++ editor demo">
         <div class="editor-shell">

demo/demo.js public/demo.jsdemo/demo.js renamed to public/demo.js

@@ -16,3 +16,7 @@ for (const name of ["clangd.js", "clangd.wasm"]) {
 await mkdir(destination, { recursive: true });
 await cp(source, destination, { recursive: true, filter: (path) => !path.endsWith(".gitignore") });
 await cp(new URL("public/_headers", root), new URL("dist/_headers", root));
+
+await cp(new URL("public/demo.css", root), new URL("dist/demo.css", root));
+await cp(new URL("public/demo.js", root), new URL("dist/demo.js", root));
+await cp(new URL("public/index.html", root), new URL("dist/index.html", root));