2f:T79e,{ let i = 0; const showPart = (name) => { const style = ` color: ${color(name)}; font-size: 2em; font-weight: bold; font-family: 'monospace'; `; return htl.html`

${parts[name]}

`; }; const showSeparator = (sep) => { return htl.html`

${sep}

`; }; const label = (name) => { const style = ` color: ${color(name)}; font-size: 0.8em; `; return htl.html`

${name}

`; }; const gap = () => htl.html`

`; let count = 12; if (!parts.username) count -= 1; if (!parts.password) count -= 2; if (!parts.username && !parts.password) count -= 1; if (!parts.port) count -= 2; if (!parts.search) count -= 1; if (!parts.hash) count -= 1; if (!parts.hostname) count -= 2; return htl.html`

${showPart("protocol")} ${parts.hostname && showSeparator("//")} ${parts.username && showPart("username")} ${parts.password && showSeparator(":")} ${parts.password && showPart("password")} ${(parts.username || parts.password) && showSeparator("@")} ${parts.hostname && showPart("hostname")} ${parts.port && showSeparator(":")} ${parts.port && showPart("port")} ${showPart("pathname")} ${parts.search && showPart("search")} ${parts.hash && showPart("hash")} ${label("protocol")} ${parts.hostname && gap()} ${parts.username && label("username")} ${parts.password && gap()} ${parts.password && label("password")} ${(parts.username || parts.password) && gap()} ${parts.hostname && label("hostname")} ${parts.port && gap()} ${parts.port && label("port")} ${label("pathname")} ${parts.search && label("search")} ${parts.hash && label("hash")}

`; }30:[] 2d:{"title":"URL Parsing visualization","cells":[{"id":0,"value":"# URL Parsing visualization","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"This parses URLs in a web context, and shows the names of all the parts. This isn't the most general kind of URL or URI, but is the type commonly used on the web especially in browser address bars and HTTP connections.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"viewof url = Inputs.text({\n label: \"URL\",\n value: \"https://user:pass@example.com:1234/a/b?c#d\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"parts = {\n let parsed = new URL(url);\n return Object.fromEntries(\n [\n \"protocol\",\n \"username\",\n \"password\",\n \"hostname\",\n \"port\",\n \"pathname\",\n \"search\",\n \"hash\"\n ].map((key) => [key, parsed[key]])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"color = d3.scaleOrdinal().range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}