🤖 Open markdown links externally and add PWA support (#359)

kylecarbs · web-flow · commit c238adb712a2 · 2025-10-20T22:12:59.000-04:00
Fixes the issue where clicking links in markdown (like web/server docs)
would replace the entire app window instead of opening externally.

## Changes

**Markdown Links:**
- Added custom anchor component to markdown renderer
- All links now open with `target='_blank'` and `rel='noopener
noreferrer'`

**PWA Support:**
- Added manifest.json with app metadata, icons, and shortcuts
- Created service worker for offline support and caching strategy
- Registered service worker in main.tsx
- Updated index.html with PWA meta tags

## Testing

1. Click any link in markdown content - should open in external
browser/tab
2. Install as PWA from browser (if supported)
3. Verify offline functionality with service worker

_Generated with `cmux`_
diff --git a/index.html b/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Parallel agentic development with Electron + React" />
+    <meta name="theme-color" content="#1e1e1e" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/icon-192.png" />
     <title>cmux - coder multiplexer</title>
     <style>
       body {
diff --git a/public/icon-192.png b/public/icon-192.png
diff --git a/public/icon-512.png b/public/icon-512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,35 @@
+{
+  "name": "cmux - coder multiplexer",
+  "short_name": "cmux",
+  "description": "Parallel agentic development with Electron + React",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1e1e1e",
+  "theme_color": "#1e1e1e",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["development", "productivity", "utilities"],
+  "shortcuts": [
+    {
+      "name": "New Workspace",
+      "short_name": "New",
+      "description": "Create a new workspace",
+      "url": "/?action=new",
+      "icons": []
+    }
+  ]
+}
+
diff --git a/public/service-worker.js b/public/service-worker.js
@@ -0,0 +1,53 @@
+// cmux Service Worker for PWA support
+const CACHE_NAME = 'cmux-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+];
+
+// Install event - cache core assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => cache.addAll(urlsToCache))
+      .then(() => self.skipWaiting())
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((cacheNames) => {
+        return Promise.all(
+          cacheNames.map((cacheName) => {
+            if (cacheName !== CACHE_NAME) {
+              return caches.delete(cacheName);
+            }
+          })
+        );
+      })
+      .then(() => self.clients.claim())
+  );
+});
+
+// Fetch event - network first, fallback to cache
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    fetch(event.request)
+      .then((response) => {
+        // Clone the response before caching
+        const responseToCache = response.clone();
+        caches.open(CACHE_NAME)
+          .then((cache) => {
+            cache.put(event.request, responseToCache);
+          });
+        return response;
+      })
+      .catch(() => {
+        // If network fails, try cache
+        return caches.match(event.request);
+      })
+  );
+});
+
diff --git a/src/components/Messages/MarkdownComponents.tsx b/src/components/Messages/MarkdownComponents.tsx
@@ -27,6 +27,11 @@ interface SummaryProps {
   children?: ReactNode;
 }
 
+interface AnchorProps {
+  href?: string;
+  children?: ReactNode;
+}
+
 interface CodeBlockProps {
   code: string;
   language: string;
@@ -89,6 +94,13 @@ export const markdownComponents = {
   // Pass through pre element - let code component handle the wrapping
   pre: ({ children }: PreProps) => <>{children}</>,
 
+  // Custom anchor to open links externally
+  a: ({ href, children }: AnchorProps) => (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  ),
+
   // Custom details/summary for collapsible sections
   details: ({ children, open }: DetailsProps) => (
     <details
diff --git a/src/main.tsx b/src/main.tsx
@@ -38,3 +38,17 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <App />
   </React.StrictMode>
 );
+
+// Register service worker for PWA support
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker
+      .register("/service-worker.js")
+      .then((registration) => {
+        console.log("Service Worker registered:", registration);
+      })
+      .catch((error) => {
+        console.log("Service Worker registration failed:", error);
+      });
+  });
+}
