Show url hostname on title

collie-reader · Sep 16, 2023 · b509304 · b509304
1 parent f8d362b
commit b509304
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/routes/Items.tsx b/src/routes/Items.tsx
@@ -139,7 +139,9 @@ function Items(props: Props) {
           <For each={items()}>{(item: api.Item) =>
             <li class={`${item.status == api.ItemStatus.READ ? "lowp" : ""} ${(selectedItem() && selectedItem()?.id == item.id) ? "selected" : ""}`}>
               <strong><a href={item.link} target="_blank"
-                onClick={() => markAs([item], api.ItemStatus.READ)}>{item.title}</a></strong>
+                onClick={() => markAs([item], api.ItemStatus.READ)}>
+                {item.title} <small class="hostname">({new URL(item.link).hostname})</small>
+              </a></strong>
               <small class="row">
                 <span class="sep">on</span> <A href={`/feeds/${item.feed.id}`}>{item.feed.title}</A>
                 <span class="sep"> by</span> {item.author}

diff --git a/src/styles/Items.css b/src/styles/Items.css
@@ -20,6 +20,10 @@ div.items-page div.item-list > ul > li.selected {
   background-color: var(--color-selected);
 }
 
+div.items-page div.item-list > ul > li .hostname {
+  font-weight: normal;
+}
+
 div.items-page div.item-list > ul > li > small {
   display: block;
   font-size: .8rem;