marky

commit f19195e1eb8b2fe527b57fafd4751d01661ac5c9
parent 89a6f4e50261569fdc5c2fb110fcd5a41b783a14
Author: David Eisinger <[email protected]>
Date:   Mon,  6 Oct 2025 15:02:02 -0400

Add feed links

Diffstat:
M
internal/web/index.html
 | 
13
++++++++++---
M
internal/web/styles.css
 | 
6
++++++

2 files changed, 16 insertions(+), 3 deletions(-)
diff --git a/internal/web/index.html b/internal/web/index.html
@@ -9,9 +9,16 @@
   </head>
   <body>
     <div id="app">
-      <header class="container">
-        <h1><a href="/">marky</a></h1>
-        <p class="muted">Lightweight bookmarking + plaintext archive</p>
+      <header class="container header-flex">
+        <div class="branding">
+          <h1><a href="/">marky</a></h1>
+          <p class="muted">Lightweight bookmarking + plaintext archive</p>
+        </div>
+        <nav class="top-links">
+          <a :href="q ? `/bookmarks?q=${encodeURIComponent(q)}` : '/bookmarks'" title="JSON feed">JSON</a>
+          <span class="sep">|</span>
+          <a :href="q ? `/bookmarks.xml?q=${encodeURIComponent(q)}` : '/bookmarks.xml'" title="RSS feed">RSS</a>
+        </nav>
       </header>
 
       <main class="container grid">
diff --git a/internal/web/styles.css b/internal/web/styles.css
@@ -2,10 +2,16 @@
 body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; }
 .container { max-width: 960px; margin: 0 auto; padding: 16px; }
 header { border-bottom: 1px solid #ddd3; }
+.header-flex { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
+.branding { display: grid; gap: 4px; }
 h1 { margin: 0 0 4px 0; font-size: 24px; }
 .container h1 a { color: inherit; text-decoration: none; }
 .container h1 a:hover { text-decoration: underline; }
 .muted { color: #666; margin: 0 0 8px 0; font-size: 13px; }
+.top-links { align-self: start; font-size: 13px; color: #555; }
+.top-links a { color: inherit; text-decoration: none; }
+.top-links a:hover { text-decoration: underline; }
+.top-links .sep { margin: 0 6px; opacity: 0.6; }
 .grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; }
 @media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }
 form { display: grid; gap: 10px; }