feat: add custom-router example

Author: Frando

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ env:
   RUSTFLAGS: -Dwarnings
   RUSTDOCFLAGS: -Dwarnings
   MSRV: "1.81"
-  RS_EXAMPLES_LIST: "dumbpipe-web,extism/host,extism/iroh-extism-host-functions,extism/plugin,iroh-automerge,iroh-automerge-repo,iroh-gateway,frosty,browser-echo,framed-messages"
+  RS_EXAMPLES_LIST: "dumbpipe-web,extism/host,extism/iroh-extism-host-functions,extism/plugin,iroh-automerge,iroh-automerge-repo,iroh-gateway,frosty,browser-echo,framed-messages,custom-router"
   WASM_EXAMPLES_LIST: "browser-echo"
   IROH_FORCE_STAGING_RELAYS: "1"
 

README.md

@@ -16,6 +16,13 @@ Use iroh in the browser, compiled to web assembly. [Try it here!](https://n0-com
 A chat app based on iroh-gossip that can run both in the browser and on the command line.
 [Try it here!](https://n0-computer.github.io/iroh-examples/main/browser-chat/index.html)
 
+### [custom-router](custom-router)
+
+When you need more control or customizations than the
+[iroh `Router`](https://docs.rs/iroh/latest/iroh/protocol/struct.Router.html) allows, we
+recommend to build your own router instead. This example implements a router that allows
+to add and remove protocols at runtime.
+
 ### [dumbpipe-web](dumbpipe-web)
 
 Forward http requests to dumbpipe. Share a local dev server publicly.

browser-chat/frontend/src/components/invitepopup.tsx

@@ -50,7 +50,7 @@ export function InviteButton({ channel, getTicket }: InvitePopupProps) {
           <AdaptiveDialogHeader>
             <AdaptiveDialogTitle>Invite peers</AdaptiveDialogTitle>
           </AdaptiveDialogHeader>
-          <div className="grow-0 mt-2 max-h-[60vh] max-w-2xl overflow-auto">
+          <div className="grow-0 mt-2 max-h-[60vh] max-w-2xl overflow-auto p-4">
             <InvitePopupContent channel={channel} getTicket={getTicket} />
           </div>
         </div>
@@ -81,7 +81,7 @@ export function InvitePopupContent({ channel, getTicket }: InvitePopupProps) {
 
   return (
     <>
-      <div className="mb-4">
+      <div className="mb-4 p">
         <p className="font-semibold mb-2">Ticket</p>
         <div className="flex items-center">
           <span className="mr-2 font-mono">{ticket.substring(0, 16)}...</span>