mddir 0.1.0

data/public/style.css

@@ -0,0 +1,435 @@
+/* Reset */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: #24292e;
+  background: #fff;
+}
+
+/* Layout */
+header {
+  border-bottom: 1px solid #e1e4e8;
+  padding: 12px 24px;
+}
+
+header nav {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.logo {
+  font-size: 18px;
+  font-weight: 700;
+  color: #24292e;
+  text-decoration: none;
+}
+
+.search-form {
+  flex: 1;
+  max-width: 400px;
+  display: flex;
+  gap: 8px;
+}
+
+.search-form input {
+  flex: 1;
+  padding: 6px 12px;
+  border: 1px solid #d1d5da;
+  border-radius: 6px;
+  font-size: 14px;
+  background: #f6f8fa;
+}
+
+.search-form input:focus {
+  outline: none;
+  border-color: #0366d6;
+  background: #fff;
+}
+
+.search-filter {
+  padding: 6px 8px;
+  border: 1px solid #d1d5da;
+  border-radius: 6px;
+  font-size: 13px;
+  background: #f6f8fa;
+  color: #24292e;
+}
+
+main {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  color: #586069;
+  margin-bottom: 24px;
+}
+
+.empty {
+  color: #586069;
+  font-style: italic;
+}
+
+.empty code {
+  font-style: normal;
+  background: #f6f8fa;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 13px;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+  font-size: 14px;
+  color: #586069;
+  margin-bottom: 16px;
+}
+
+.breadcrumb a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.breadcrumb a:hover { text-decoration: underline; }
+
+/* Collections */
+.collection-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.collection-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s;
+}
+
+.collection-card:hover { border-color: #0366d6; }
+
+.collection-name {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.collection-meta {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.collection-count {
+  color: #586069;
+  font-size: 14px;
+}
+
+.collection-date {
+  color: #959da5;
+  font-size: 13px;
+}
+
+/* Entries */
+.entry-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.entry-card {
+  padding: 16px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+}
+
+.entry-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.entry-title:hover { text-decoration: underline; }
+
+.entry-description {
+  color: #586069;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.entry-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 8px;
+  font-size: 13px;
+  color: #586069;
+}
+
+.entry-tokens {
+  font-size: 12px;
+  color: #586069;
+  background: #f6f8fa;
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
+/* Buttons */
+.inline-form { display: inline; }
+
+.btn-delete-small {
+  background: none;
+  border: none;
+  color: #cb2431;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 0;
+}
+
+.btn-delete-small:hover { text-decoration: underline; }
+
+.btn-delete {
+  background: #cb2431;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-delete:hover { background: #a82230; }
+
+.danger-zone {
+  margin-top: 48px;
+  padding-top: 24px;
+  border-top: 1px solid #e1e4e8;
+}
+
+/* Reader */
+.reader-header {
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e1e4e8;
+}
+
+.reader-header h1 {
+  font-size: 28px;
+  line-height: 1.3;
+}
+
+.reader-description {
+  color: #586069;
+  margin-top: 8px;
+  font-size: 15px;
+}
+
+.reader-meta {
+  margin-top: 12px;
+  font-size: 13px;
+  color: #586069;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.reader-meta a {
+  color: #0366d6;
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.reader-meta a:hover { text-decoration: underline; }
+
+.reader-content {
+  max-width: 700px;
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+.reader-content h1,
+.reader-content h2,
+.reader-content h3,
+.reader-content h4 {
+  margin-top: 24px;
+  margin-bottom: 12px;
+}
+
+.reader-content p { margin-bottom: 16px; }
+
+.reader-content pre {
+  background: #f6f8fa;
+  padding: 16px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.reader-content code {
+  background: #f6f8fa;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 14px;
+}
+
+.reader-content pre code {
+  background: none;
+  padding: 0;
+}
+
+.reader-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+.reader-content blockquote {
+  border-left: 4px solid #dfe2e5;
+  padding-left: 16px;
+  color: #586069;
+  margin-bottom: 16px;
+}
+
+.reader-content ul, .reader-content ol {
+  margin-bottom: 16px;
+  padding-left: 24px;
+}
+
+.reader-content li { margin-bottom: 4px; }
+
+.reader-content table {
+  border-collapse: collapse;
+  margin-bottom: 16px;
+  width: 100%;
+}
+
+.reader-content th, .reader-content td {
+  border: 1px solid #dfe2e5;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.reader-content th { background: #f6f8fa; font-weight: 600; }
+
+.reader-content a { color: #0366d6; }
+.reader-content a:hover { text-decoration: underline; }
+
+/* Search */
+.search-results {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 16px;
+}
+
+.search-result {
+  padding: 16px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+}
+
+.search-result-header {
+  font-size: 16px;
+}
+
+.search-collection {
+  color: #586069;
+  font-size: 14px;
+  margin-right: 4px;
+}
+
+.search-result-header a {
+  color: #0366d6;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.search-result-header a:hover { text-decoration: underline; }
+
+.search-result-file {
+  font-size: 13px;
+  color: #586069;
+  margin-top: 4px;
+}
+
+.search-result-matches { margin-top: 8px; }
+
+.search-match {
+  font-size: 13px;
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  color: #24292e;
+  padding: 4px 0;
+}
+
+mark {
+  background: #fff3bf;
+  padding: 1px 2px;
+  border-radius: 2px;
+}
+
+/* Rouge syntax highlighting (GitHub theme) */
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w { color: #24292f; background-color: #f6f8fa; }
+.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv { color: #cf222e; }
+.highlight .gr { color: #f6f8fa; }
+.highlight .gd { color: #82071e; background-color: #ffebe9; }
+.highlight .nb { color: #953800; }
+.highlight .nc { color: #953800; }
+.highlight .no { color: #953800; }
+.highlight .nn { color: #953800; }
+.highlight .sr { color: #116329; }
+.highlight .na { color: #116329; }
+.highlight .nt { color: #116329; }
+.highlight .gi { color: #116329; background-color: #dafbe1; }
+.highlight .ges { font-weight: bold; font-style: italic; }
+.highlight .kc { color: #0550ae; }
+.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { color: #0550ae; }
+.highlight .sb { color: #0550ae; }
+.highlight .bp { color: #0550ae; }
+.highlight .ne { color: #0550ae; }
+.highlight .nl { color: #0550ae; }
+.highlight .py { color: #0550ae; }
+.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { color: #0550ae; }
+.highlight .o, .highlight .ow { color: #0550ae; }
+.highlight .gh { color: #0550ae; font-weight: bold; }
+.highlight .gu { color: #0550ae; font-weight: bold; }
+.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss { color: #0a3069; }
+.highlight .nd { color: #8250df; }
+.highlight .nf, .highlight .fm { color: #8250df; }
+.highlight .err { color: #f6f8fa; background-color: #82071e; }
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs { color: #6e7781; }
+.highlight .gl { color: #6e7781; }
+.highlight .gt { color: #6e7781; }
+.highlight .ni { color: #24292f; }
+.highlight .si { color: #24292f; }
+.highlight .ge { color: #24292f; font-style: italic; }
+.highlight .gs { color: #24292f; font-weight: bold; }
+
+/* Responsive */
+@media (max-width: 600px) {
+  header nav { flex-direction: column; gap: 8px; }
+  .search-form { max-width: 100%; flex-wrap: wrap; }
+  .search-filter { flex: 1; }
+  main { padding: 16px; }
+  .reader-content { font-size: 15px; }
+  .collection-card { flex-wrap: wrap; gap: 4px; }
+}

data/views/collection.erb

@@ -0,0 +1,43 @@
+<% @page_title = @collection.name %>
+
+<div class="breadcrumb">
+  <a href="/">mddir</a> &rsaquo; <span><%= h(@collection.name) %></span>
+</div>
+
+<h1><%= h(@collection.name) %></h1>
+<p class="subtitle"><%= @entries.length %> <%= @entries.length == 1 ? "entry" : "entries" %></p>
+
+<% if @entries.empty? %>
+  <p class="empty">No entries in this collection.</p>
+<% else %>
+  <div class="entry-list">
+    <% @entries.each do |entry| %>
+      <div class="entry-card">
+        <a href="/<%= h(@collection.name) %>/<%= h(entry['slug']) %>" class="entry-title"><%= h(entry["title"]) %></a>
+        <% unless entry["description"].to_s.empty? %>
+          <p class="entry-description"><%= h(truncate(entry["description"])) %></p>
+        <% end %>
+        <div class="entry-meta">
+          <span class="entry-domain"><%= h(domain_from_url(entry["url"])) %></span>
+          <span class="entry-date"><%= format_date(entry["saved_at"]) %></span>
+
+          <% if entry["token_count"] %>
+            <span class="entry-tokens"><%= format_tokens(entry["token_count"]) %></span>
+          <% end %>
+
+          <form method="post" action="/<%= h(@collection.name) %>/<%= h(entry['slug']) %>" class="inline-form" onsubmit="return confirm('Remove this entry?')">
+            <input type="hidden" name="_method" value="DELETE">
+            <button type="submit" class="btn-delete-small">remove</button>
+          </form>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<div class="danger-zone">
+  <form method="post" action="/<%= h(@collection.name) %>" class="inline-form" onsubmit="return confirm('Delete collection \'<%= h(@collection.name) %>\' and all its entries?')">
+    <input type="hidden" name="_method" value="DELETE">
+    <button type="submit" class="btn-delete">Delete collection</button>
+  </form>
+</div>

data/views/home.erb

@@ -0,0 +1,21 @@
+<% @page_title = "mddir" %>
+
+<h1>Collections</h1>
+
+<% if @collections.empty? %>
+  <p class="empty">No collections yet. Use <code>mddir add &lt;collection&gt; &lt;url&gt;</code> to get started.</p>
+<% else %>
+  <div class="collection-list">
+    <% @collections.each do |name, info| %>
+      <a href="/<%= h(name) %>" class="collection-card">
+        <span class="collection-name"><%= h(name) %></span>
+        <span class="collection-meta">
+          <span class="collection-count"><%= info["entry_count"] || 0 %> <%= (info["entry_count"] || 0) == 1 ? "entry" : "entries" %></span>
+          <% if info["last_added"] %>
+            <span class="collection-date"><%= format_date(info["last_added"]) %></span>
+          <% end %>
+        </span>
+      </a>
+    <% end %>
+  </div>
+<% end %>

data/views/layout.erb

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title><%= @page_title || "mddir" %></title>
+
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <a href="/" class="logo">mddir</a>
+
+      <form action="/search" method="get" class="search-form">
+        <input type="text" name="q" id="search-input" placeholder="Search (press /)" value="<%= h(params['q'].to_s) %>" autocomplete="query">
+
+        <% if @collection_names && !@collection_names.empty? %>
+          <select name="collection" class="search-filter">
+            <option value="">All</option>
+            <% @collection_names.each do |name| %>
+              <option value="<%= h(name) %>" <%= 'selected' if (params['collection'] || @current_collection) == name %>><%= h(name) %></option>
+            <% end %>
+          </select>
+        <% end %>
+      </form>
+    </nav>
+  </header>
+
+  <main>
+    <%= yield %>
+  </main>
+
+  <script>
+    document.addEventListener("keydown", function(e) {
+      if (e.key === "/" && !e.ctrlKey && !e.metaKey && !["INPUT","TEXTAREA","SELECT"].includes(document.activeElement.tagName)) {
+        e.preventDefault();
+        document.getElementById("search-input").focus();
+      }
+    });
+  </script>
+</body>
+</html>

data/views/reader.erb

@@ -0,0 +1,24 @@
+<% @page_title = @entry["title"] %>
+
+<div class="breadcrumb">
+  <a href="/">mddir</a> &rsaquo; <a href="/<%= h(@collection.name) %>"><%= h(@collection.name) %></a> &rsaquo; <span><%= h(@entry["title"]) %></span>
+</div>
+
+<article class="reader">
+  <header class="reader-header">
+    <h1><%= h(@entry["title"]) %></h1>
+
+    <% unless @entry["description"].to_s.empty? %>
+      <p class="reader-description"><%= h(@entry["description"]) %></p>
+    <% end %>
+
+    <div class="reader-meta">
+      <a href="<%= h(@entry['url']) %>" target="_blank" rel="noopener"><%= h(@entry["url"]) %></a>
+      <span class="reader-date">Saved <%= format_date(@entry["saved_at"]) %></span>
+    </div>
+  </header>
+
+  <div class="reader-content">
+    <%= @html_content %>
+  </div>
+</article>

data/views/search.erb

@@ -0,0 +1,30 @@
+<% @page_title = "Search — mddir" %>
+
+<h1>Search</h1>
+
+<% if @query.empty? %>
+  <p class="empty">Enter a search query above.</p>
+<% elsif @results.empty? %>
+  <p class="empty">No matches found for "<%= h(@query) %>".</p>
+<% else %>
+  <p class="subtitle">Found <%= @results.sum { |r| r.matches.length } %> matches in <%= @results.length %> files</p>
+
+  <div class="search-results">
+    <% @results.each do |result| %>
+      <div class="search-result">
+        <div class="search-result-header">
+          <span class="search-collection">[<%= h(result.collection_name) %>]</span>
+          <a href="/<%= h(result.collection_name) %>/<%= h(result.entry['slug']) %>"><%= h(result.entry["title"]) %></a>
+        </div>
+
+        <div class="search-result-file"><%= h(result.entry["filename"]) %></div>
+
+        <div class="search-result-matches">
+          <% result.matches.each do |m| %>
+            <div class="search-match">Line <%= m.line_number %>: <%= highlight(m.snippet, @query) %></div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>