The host used to be suppressed when it matched the link's name, so klot.ski had nothing on the right and Marbles did. That kept rows from repeating themselves but it also meant some links quietly held information others showed. Now every link carries its host and none of them show it at rest. The arrow is what you see; pointing at a row expands the host leftward out of it. Two repos can both be github.com without two rows saying so at once, and nothing is missing — it is just never showing itself and its neighbour together. .host is an inline grid animating its single column 0fr → 1fr, which reaches exactly the content's width. A max-width would need a number picked in advance, and a wrong one either clips a long host or spends the transition crossing empty space. The trailing space lives inside the clipped inner span so it collapses with the text instead of leaving a gap before the arrow. Two cases where hovering is not an available question: `@media (hover: none)` shows the host outright, and reduced motion keeps the reveal but drops the transition.
- commit
- b7e4299f2666cad628c87ced32709dadb470e942
- parent
- 3c3ff9868636bc69ebf7319b69d903a44c686813
- author
- Dami <dami.etoile@gmail.com>
| M | docs/ | 18 | ++++++++++++++-- |
| M | web/ | 21 | ++++++++++++------ |
| M | web/ | 35 | ++++++++++++++++++++++++++++++ |
@@ -61,10 +61,11 @@ changes here and changes to the whitelist belong in the same commit.
6161 6262 <!-- loose sites first, in the order they were published -->6363 <ul class="entries">64- <!-- reached at its own address, so it is an anchor and takes you away -->64+ <!-- reached at its own address, so it is an anchor and takes you away.65+ The host is always present and folded into the arrow; see below. -->6566 <li class="entry" data-kind="link" data-visibility="public">6667 <a href="https://klot.ski" target="_blank" rel="noopener noreferrer">klot.ski</a>67- <small class="state">↗</small>68+ <small class="state"><span class="host"><span>klot.ski </span></span>↗</small>6869 </li>6970 <!-- reached through its owner's daemon, so it is a button and opens7071 here. No reachability state: nothing knows whether it is running@@ -107,6 +108,19 @@ offered.
107108 There is deliberately no reachability state to style: the page does not know108109 whether a daemon is running, and says so by saying nothing.109110 111+### The host112+113+Every link carries its host, including the ones named after it. At rest you see114+the arrow; pointing at a row expands the host leftward out of it, so two repos115+can both say `github.com` without two rows saying it at once.116+117+`.host` is an inline grid whose single column animates `0fr → 1fr`, which reaches118+exactly the content's width — a `max-width` would need a guess, and a wrong guess119+either clips a long host or spends the transition crossing empty space. The120+trailing space sits inside the clipped inner span so it collapses with the text121+rather than leaving a gap before the arrow. Where there is no hover to ask with,122+`@media (hover: none)`, the host is simply always shown.123+110124 ## Folders111125 112126 A folder is a name on a site, not a thing of its own — `devsite link add --folder@@ -213,15 +213,22 @@ function siteRow(item, { onClick, from } = {}) {
213213 return li;214214 }215215 216-/// Where a link goes, or just an arrow when its name already says so.216+/// Where a link goes: always in the markup, revealed one row at a time.217217 ///218-/// `www.` is ignored in the comparison: a link named `klot.ski` pointing at219-/// `www.klot.ski` is the same claim written twice.218+/// Every link carries its host, including the ones named after it. The arrow is219+/// what you see at rest; pointing at a row expands the host leftward out of it.220+/// So `github.com` is there on both repos without two rows saying the same thing221+/// at once, and a link named `klot.ski` is not silently missing information the222+/// others have — it is just never showing it and its neighbour at the same time.223+///224+/// The nested span is what makes it animate: the outer element is an inline grid225+/// whose single column goes 0fr → 1fr, which transitions to exactly the content's226+/// width without anyone having to guess a max-width. The trailing space lives227+/// inside the clipped span so it collapses with the text rather than leaving a228+/// gap before the arrow.220229 function linkHost(item) {221- const host = new URL(item.url).host;222- const same = host.replace(/^www\./, '').toLowerCase()223- === item.name.replace(/^www\./, '').toLowerCase();224- return same ? '↗' : `${host} ↗`;230+ const host = esc(new URL(item.url).host);231+ return `<span class="host"><span>${host} </span></span>↗`;225232 }226233 227234 function entryList(items, options = {}) {@@ -143,6 +143,41 @@ body > main {
143143 color: var(--pico-muted-color);144144 }145145 146+/* The host, folded into the arrow until you point at its row.147+ *148+ * An inline grid going 0fr → 1fr animates to exactly the content's width, which149+ * a max-width cannot do without a guess — and a wrong guess either clips a long150+ * host or spends the transition crossing empty space. The row is right-aligned,151+ * so growing the column pushes the text out to the left and leaves the arrow152+ * where it was. */153+.entries .host {154+ display: inline-grid;155+ grid-template-columns: 0fr;156+ opacity: 0;157+ transition: grid-template-columns 240ms ease, opacity 160ms ease;158+}159+.entries .host > span {160+ overflow: hidden;161+}162+.entries > li:is(:hover, :focus-within) .host {163+ grid-template-columns: 1fr;164+ opacity: 1;165+}166+167+/* Without hover there is no way to ask, so the answer is always on. */168+@media (hover: none) {169+ .entries .host {170+ grid-template-columns: 1fr;171+ opacity: 1;172+ }173+}174+175+@media (prefers-reduced-motion: reduce) {176+ .entries .host {177+ transition: none;178+ }179+}180+146181 /* -- the viewer ------------------------------------------------------------ */147182 148183 /* Wider than Pico's 700px modal: this one holds a whole web page. */