@acms-subir/core 0.0.2 → 0.2.0

package/src/pages/search.astro

@@ -1,41 +1,54 @@
 ---
 import Site from '../layouts/Site.astro';
 import { getRepo } from '../lib/repo';
-import { formatDate } from '../lib/dates';
-import { CONTENT, collectionUrl } from '../lib/content';
+import { formatDate, siteLang } from '../lib/dates';
+import { collectionUrl, tagUrl } from '../lib/content';
+import { authorSlug } from '../lib/schema';
+import { I18N, localeFromPath, localeHomeUrl, normalizePageLocale } from '../lib/i18n';
+import { searchStrings } from '../lib/search-i18n';
+
+// The no-JS search surface (the modal's form falls back here). Serves both
+// /search and the locale-prefixed /<locale>/search routes — the locale comes
+// from the path, same trick as the per-locale home routes, and only boosts
+// page ranking; every locale's content stays visible.
 
 const repo = await getRepo(Astro.locals);
 const q = (Astro.url.searchParams.get('q') ?? '').trim();
-const results = q ? await repo.searchPublished(q) : { posts: [], pages: [] };
 const settings = await repo.getSettings();
-const total = results.posts.length + results.pages.length;
+const reqLocale = I18N.enabled ? localeFromPath(Astro.url.pathname) : '';
+const locale = normalizePageLocale(reqLocale);
+const t = searchStrings((reqLocale || siteLang(settings)).slice(0, 2));
+const results = q
+  ? await repo.searchPublished(q, { locale })
+  : { posts: [], pages: [], tags: [], authors: [] };
+const total = results.posts.length + results.pages.length + results.tags.length + results.authors.length;
 ---
 
-<Site title={q ? `Search: ${q}` : 'Search'} description={`Search ${settings.siteTitle}`} noindex={Boolean(q)}>
+<Site title={q ? `${t.label}: ${q}` : t.label} description={`${t.label} · ${settings.siteTitle}`} noindex={Boolean(q)}>
   <header class="search-hero">
-    <h1>Search</h1>
-    <form class="search-form" action="/search" method="get" role="search">
+    <h1>{t.label}</h1>
+    <form class="search-form" action={Astro.url.pathname} method="get" role="search">
       <input
         type="search"
         name="q"
         value={q}
-        placeholder={`Search ${CONTENT.posts.plural.toLowerCase()} and pages…`}
-        aria-label="Search"
+        placeholder={t.placeholder}
+        aria-label={t.label}
         autofocus={!q}
       />
-      <button type="submit">Search</button>
+      <button type="submit">{t.button}</button>
     </form>
   </header>
 
   {q && (
     <p class="search-count">
-      {total === 0 ? `Nothing found for “${q}”.` : `${total} ${total === 1 ? 'result' : 'results'} for “${q}”`}
+      {total === 0 ? `${t.empty} “${q}”.` : `${total} ${total === 1 ? t.result : t.results} · “${q}”`}
     </p>
   )}
 
   {results.posts.length > 0 && (
     <ul class="post-list">
-      {results.posts.map((p) => (
+      {results.posts.map(({ doc: p, snippet }) => (
         <li class="post-item">
           {p.cover && (
             <a class="post-thumb" href={collectionUrl(p.collection, p.slug)}><img src={p.cover} alt={p.coverAlt} loading="lazy" /></a>
@@ -45,7 +58,11 @@ const total = results.posts.length + results.pages.length;
             <div class="post-meta">
               {p.publishedAt && <time datetime={new Date(p.publishedAt).toISOString()}>{formatDate(p.publishedAt, settings)}</time>}
             </div>
-            {p.excerpt && <p class="post-excerpt">{p.excerpt}</p>}
+            {snippet ? (
+              <p class="post-excerpt" set:html={snippet} />
+            ) : (
+              p.excerpt && <p class="post-excerpt">{p.excerpt}</p>
+            )}
           </div>
         </li>
       ))}
@@ -53,12 +70,46 @@ const total = results.posts.length + results.pages.length;
   )}
 
   {results.pages.length > 0 && (
-    <section class="search-pages">
-      <h2>Pages</h2>
+    <section class="search-section">
+      <h2>{t.pages}</h2>
       <ul class="post-list">
-        {results.pages.map((p) => (
+        {results.pages.map(({ doc: p, snippet }) => (
           <li class="post-item">
-            <div><a href={p.isHome ? '/' : `/${p.slug}`}>{p.title}</a></div>
+            <div>
+              <a href={p.isHome ? localeHomeUrl(p.locale) : `/${p.slug}`}>{p.title}</a>
+              {I18N.enabled && p.locale !== locale && (
+                <span class="search-loc">{(p.locale || I18N.defaultLocale).toUpperCase()}</span>
+              )}
+              {snippet && <p class="post-excerpt" set:html={snippet} />}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )}
+
+  {results.tags.length > 0 && (
+    <section class="search-section">
+      <h2>{t.tags}</h2>
+      <div class="search-tags">
+        {results.tags.map(({ tag, count }) => (
+          <a class="tag" href={tagUrl(tag.slug)}>{tag.name} <span class="search-tag-count">{count}</span></a>
+        ))}
+      </div>
+    </section>
+  )}
+
+  {results.authors.length > 0 && (
+    <section class="search-section">
+      <h2>{t.authors}</h2>
+      <ul class="post-list">
+        {results.authors.map((u) => (
+          <li class="post-item">
+            {u.avatar && <img class="search-avatar" src={u.avatar} alt="" loading="lazy" />}
+            <div>
+              <a href={`/author/${authorSlug(u)}`}>{u.name}</a>
+              {u.bio && <p class="post-excerpt">{u.bio}</p>}
+            </div>
           </li>
         ))}
       </ul>
@@ -79,5 +130,19 @@ const total = results.posts.length + results.pages.length;
     background: var(--accent); color: #fff; cursor: pointer;
   }
   .search-count { color: var(--muted); }
-  .search-pages h2 { font-size: 1.1rem; margin-top: 2rem; }
+  .search-section h2 { font-size: 1.1rem; margin-top: 2rem; }
+  /* snippets arrive pre-escaped with <mark> around matches (set:html), so
+     the highlight style must reach into the injected fragment */
+  .post-excerpt :global(mark) {
+    background: color-mix(in srgb, var(--accent) 22%, transparent);
+    color: inherit; border-radius: 3px; padding: 0 1px;
+  }
+  .search-loc {
+    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted);
+    border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; margin-left: 8px;
+    vertical-align: 2px;
+  }
+  .search-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+  .search-tag-count { color: var(--muted); }
+  .search-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
 </style>

package/src/styles/admin.css

@@ -140,6 +140,8 @@ table.list { width: 100%; border-collapse: collapse; }
 .pill.scheduled { background: #fde5d8; color: var(--accent-deep); }
 .pill.archived { background: rgb(102 109 124 / 12%); color: var(--muted); }
 .pill.home { background: #fde5d8; color: var(--accent-deep); }
+/* live doc with staged edits awaiting Update */
+.pill.edited { background: var(--amber-soft); color: var(--amber); margin-left: 4px; }
 .pill.lang { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
 
 /* buttons & forms */
@@ -443,6 +445,8 @@ input.bare.mono { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12
 .lm-savestate { font-size: 11.5px; color: var(--faint); margin-left: auto; }
 .lm-savestate.saving { color: var(--muted); }
 .lm-savestate.error { color: var(--red); }
+/* local edits awaiting an explicit "Save changes" */
+.lm-savestate.dirty { color: var(--amber); font-weight: 600; }
 .lm-phone {
   border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
   background: #fff; height: min(640px, calc(100vh - 140px)); box-shadow: var(--shadow-pop);

package/src/styles/cards.css

@@ -174,3 +174,26 @@ a.pc-info-card:hover { border-color: var(--info-badge); }
 .pc-info-row[data-icon='tag']::before { display: inline-block; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7l9 9-7 7-9-9zM8.5 8.5h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7l9 9-7 7-9-9zM8.5 8.5h.01'/%3E%3C/svg%3E"); }
 .pc-info-row[data-icon='check']::before { display: inline-block; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E"); }
 }
+
+@layer base {
+/* toggle — collapsible section, native <details> so no JS needed */
+.pc-toggle { border: 1px solid var(--line, #e3e3e0); border-radius: 10px; padding: 12px 18px; margin: 1.6em 0; }
+.pc-toggle > summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
+.pc-toggle > summary::-webkit-details-marker { display: none; }
+.pc-toggle > summary::before { content: "▸"; font-size: 0.8em; color: var(--muted, #777); transition: transform 0.15s ease; }
+.pc-toggle[open] > summary::before { transform: rotate(90deg); }
+.pc-toggle-body { margin-top: 10px; }
+.pc-toggle-body > :last-child { margin-bottom: 0; }
+
+/* table of contents — expanded at request time from the body's headings */
+.pc-toc {
+  display: flex; flex-direction: column; gap: 2px;
+  border-left: 3px solid var(--accent, #6e7bff); background: rgb(0 0 0 / 3%);
+  border-radius: 0 10px 10px 0; padding: 14px 20px; margin: 1.6em 0;
+}
+.pc-toc-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; font-weight: 700; color: var(--muted, #777); margin-bottom: 6px; }
+.pc-toc-link { color: inherit; text-decoration: none; padding: 2px 0; font-size: 0.95em; }
+a.pc-toc-link:hover { color: var(--accent, #6e7bff); }
+.pc-toc-link[data-depth='1'] { padding-left: 16px; }
+.pc-toc-link[data-depth='2'] { padding-left: 32px; }
+}

package/src/styles/editor.css

@@ -11,6 +11,7 @@
 }
 .pe-topbar-left, .pe-topbar-right { display: flex; align-items: center; gap: 10px; }
 .pe-savestate { font-size: 12.5px; color: var(--faint); }
+.pe-edited-dot { font-style: normal; font-weight: 600; color: var(--amber); }
 .pe-savestate.dirty { color: var(--muted); }
 .pe-savestate.saving { color: var(--muted); }
 .pe-savestate.error { color: var(--red); }
@@ -98,6 +99,7 @@
 /* prose */
 .pe-prose { outline: none; color: var(--text); font-size: 16.5px; line-height: 1.72; min-height: 320px; }
 .pe-prose p { margin: 0 0 0.9em; }
+.pe-prose h1 { font-size: 31px; letter-spacing: -0.02em; margin: 1.3em 0 0.5em; }
 .pe-prose h2 { font-size: 25px; letter-spacing: -0.015em; margin: 1.4em 0 0.5em; }
 .pe-prose h3 { font-size: 19px; letter-spacing: -0.01em; margin: 1.3em 0 0.4em; }
 .pe-prose a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: rgb(238 93 32 / 35%); }
@@ -106,6 +108,8 @@
 .pe-prose pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; overflow-x: auto; margin: 1.2em 0; }
 .pe-prose pre code { background: none; border: none; padding: 0; font-size: 13.5px; }
 .pe-prose hr { border: none; border-top: 1px solid var(--line); margin: 2em auto; width: 120px; }
+.pe-prose mark { background: #fde58a; border-radius: 3px; padding: 0 2px; }
+.pe-bubble mark { background: #fde58a; border-radius: 3px; padding: 0 4px; color: #1a1d25; }
 
 /* ---- code block (extensions/codeBlock.tsx) ---- */
 .pe-codeblock { position: relative; margin: 1.2em 0; }
@@ -246,6 +250,12 @@
   background: none; border: none; border-radius: var(--r-md); padding: 7px 10px; cursor: pointer; font-family: inherit;
 }
 .pe-slash-item.is-selected { background: var(--accent-soft); }
+.pe-slash-del {
+  margin-left: auto; padding: 2px 7px; border-radius: 6px; color: var(--faint);
+  font-size: 11px; opacity: 0; transition: opacity 0.1s ease;
+}
+.pe-slash-item:hover .pe-slash-del, .pe-slash-item.is-selected .pe-slash-del { opacity: 1; }
+.pe-slash-del:hover { color: var(--red); background: var(--red-soft); }
 .pe-slash-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); }
 .pe-slash-icon svg { width: 16px; height: 16px; }
 .pe-slash-item.is-selected .pe-slash-icon { color: var(--accent-deep); }
@@ -482,14 +492,27 @@
 /* floating link editor (⌘K) */
 .pe-linkedit {
   position: sticky; top: 12px; z-index: 60;
-  display: flex; gap: 8px; align-items: center;
   background: var(--panel, #fff); border: 1px solid var(--border, #d5d2ca);
   border-radius: 10px; padding: 8px 10px; margin: 0 auto 12px;
   max-width: 560px; box-shadow: 0 10px 30px rgb(0 0 0 / 14%);
 }
+.pe-linkedit-row { display: flex; gap: 8px; align-items: center; }
 .pe-linkedit input {
   flex: 1; border: 0; outline: none; font-size: 14px; background: none; color: inherit;
 }
+.pe-link-results {
+  border-top: 1px solid var(--line, #e3e5ec); margin-top: 8px; padding-top: 6px;
+  display: flex; flex-direction: column;
+}
+.pe-link-results button {
+  display: flex; align-items: baseline; gap: 8px; border: 0; background: none;
+  text-align: left; padding: 7px 8px; border-radius: 8px; cursor: pointer;
+  font: inherit; color: var(--text, #1a1d25);
+}
+.pe-link-results button.is-selected { background: var(--panel-2, #f4f5f8); }
+.pe-link-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pe-link-url { font-size: 12px; color: var(--faint, #8f95a3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pe-link-kind { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint, #8f95a3); }
 
 /* shortcut cheat-sheet */
 .pe-wordcount { display: flex; align-items: center; gap: 10px; }
@@ -594,3 +617,32 @@
 .pe-infocard-icon svg { width: 14px; height: 14px; }
 .pe-infocard-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
 .pe-infocard-href { flex: 1; }
+
+/* toggle card (editor) — cards.css isn't loaded in the admin, so the box
+   look is restated here on the editor tokens */
+.pe-toggle { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; margin: 1.2em 0; }
+.pe-toggle.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+.pe-toggle .pe-toggle-head { display: flex; align-items: center; gap: 8px; }
+.pe-toggle-chevron {
+  border: 0; background: none; cursor: pointer; color: var(--muted, #666d7c);
+  font-size: 13px; padding: 2px 4px; transition: transform 0.15s ease;
+}
+.pe-toggle.is-open .pe-toggle-chevron { transform: rotate(90deg); }
+.pe-toggle-summary { flex: 1; border: 0; outline: none; background: none; font: inherit; font-weight: 600; color: inherit; }
+.pe-toggle .pc-toggle-body { margin-top: 10px; }
+
+/* toc card (editor) */
+.pe-toc .pc-toc {
+  display: flex; flex-direction: column; gap: 2px; margin: 0;
+  border-left: 3px solid var(--accent); background: var(--panel-2);
+  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 18px;
+}
+.pe-toc .pc-toc-link { padding: 2px 0; font-size: 14.5px; }
+.pe-toc .pc-toc-link[data-depth='1'] { padding-left: 16px; }
+.pe-toc .pc-toc-link[data-depth='2'] { padding-left: 32px; }
+.pe-toc-title {
+  border: 0; outline: none; background: none; text-transform: uppercase;
+  letter-spacing: 0.08em; font-size: 11.5px; font-weight: 700;
+  color: var(--muted, #666d7c); margin-bottom: 6px; padding: 0;
+}
+.pe-toc-empty { color: var(--faint, #8f95a3); font-size: 13.5px; }

package/src/styles/site.css

@@ -77,6 +77,7 @@ pre .hljs-strong { font-weight: 700; }
 code { font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.9em; }
 p code { background: var(--soft); padding: 2px 5px; border-radius: 4px; }
 blockquote { margin: 16px 0; padding: 4px 18px; border-left: 3px solid var(--line); color: var(--muted); }
+mark { background: #fde58a; border-radius: 3px; padding: 0 2px; }
 table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; line-height: 1.5; }
 th, td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
 th { background: var(--soft); font-weight: 600; }
@@ -233,6 +234,8 @@ a.tag:hover { background: var(--accent); color: #fff; }
   .post-kicker:empty { display: none; }
   .post-layout { margin-top: 8px; }
   .post-content > :first-child { margin-top: 0; }
+  /* in-body h1: below the post title's scale, above h2 */
+  .post-content h1 { font-size: 30px; margin: 1.2em 0 0.4em; }
 
   .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
   .related-card h3 { font-size: 18px; line-height: 1.3; margin: 4px 0 4px; }
@@ -425,3 +428,88 @@ a.tag:hover { background: var(--accent); color: #fff; }
     .pc-cal-row .d { flex-basis: 84px; }
   }
 }
+
+/* Site search (.pc-search) — the header trigger + overlay modal rendered by
+   Site.astro. The server renders the dialog around a real GET form to the
+   /search page, so search works with JS disabled; the inline script upgrades
+   it to live /api/search results. Scoped custom properties default to global
+   tokens — theme CSS and Settings → Code injection are unlayered, so either
+   overrides any of this without !important. */
+@layer base {
+  .site-nav a.pc-search-trigger {
+    display: inline-flex; align-items: center; align-self: center;
+    color: var(--muted); padding: 2px;
+  }
+  .site-nav a.pc-search-trigger:hover { color: var(--ink); }
+  .pc-search-trigger svg { display: block; }
+
+  dialog.pc-search {
+    --search-bg: var(--panel);
+    --search-ink: var(--ink);
+    --search-muted: var(--muted);
+    --search-line: var(--line);
+    --search-accent: var(--accent);
+    --search-radius: 12px;
+    --search-veil: rgb(0 0 0 / 0.35);
+    --search-width: 640px;
+    --search-top: 9vh;
+    width: min(var(--search-width), 92vw);
+    margin: var(--search-top) auto auto;
+    border: 0; padding: 0; background: transparent; overflow: visible;
+  }
+  dialog.pc-search::backdrop { background: var(--search-veil); backdrop-filter: blur(3px); }
+
+  .pc-search-box {
+    display: flex; align-items: center; gap: 12px;
+    background: var(--search-bg); color: var(--search-ink);
+    border-radius: var(--search-radius);
+    box-shadow: 0 14px 40px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.08);
+    padding: 15px 18px;
+  }
+  .pc-search-box svg { flex: none; color: var(--search-muted); }
+  .pc-search-input {
+    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
+    font: inherit; font-size: 17px; color: var(--search-ink);
+  }
+  .pc-search-input::placeholder { color: var(--search-muted); }
+  .pc-search-input::-webkit-search-cancel-button { display: none; }
+  .pc-search-kbd {
+    flex: none; border: 1px solid var(--search-line); border-radius: 6px;
+    background: transparent; color: var(--search-muted); cursor: pointer;
+    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px;
+  }
+  .pc-search-kbd:hover { color: var(--search-ink); }
+
+  .pc-search-results {
+    margin-top: 10px; padding: 2px 0 8px;
+    background: var(--search-bg); border-radius: var(--search-radius);
+    box-shadow: 0 14px 40px rgb(0 0 0 / 0.16);
+    max-height: min(56vh, 460px); overflow-y: auto;
+  }
+  .pc-search-group {
+    font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
+    color: var(--search-muted); padding: 14px 18px 4px;
+  }
+  a.pc-search-hit {
+    display: flex; align-items: baseline; gap: 10px;
+    padding: 8px 18px; text-decoration: none; color: var(--search-ink); font-size: 15.5px;
+  }
+  a.pc-search-hit:hover, a.pc-search-hit.sel {
+    background: color-mix(in srgb, var(--search-ink) 6%, transparent);
+  }
+  .pc-search-t { min-width: 0; }
+  .pc-search-snip {
+    display: block; font-size: 13px; color: var(--search-muted);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .pc-search-snip mark {
+    background: color-mix(in srgb, var(--search-accent) 22%, transparent);
+    color: inherit; border-radius: 3px; padding: 0 1px;
+  }
+  .pc-search-m { margin-left: auto; flex: none; font-size: 12.5px; color: var(--search-muted); }
+  .pc-search-empty { padding: 18px; color: var(--search-muted); font-size: 14.5px; }
+
+  @media (max-width: 640px) {
+    dialog.pc-search { --search-top: 4vh; width: 94vw; }
+  }
+}

package/src/lib/repo/search.ts

@@ -1,14 +0,0 @@
-import type { Post } from '../schema';
-
-// Shared ranking for the LIKE-based search: title hits beat excerpt hits beat
-// body hits; recency breaks ties. Swap the adapters' SQL for FTS later and
-// this ranking can go — the repo method signature stays the same.
-export function rankByQuery(posts: Post[], query: string): Post[] {
-  const q = query.toLowerCase();
-  const score = (p: Post) =>
-    (p.title.toLowerCase().includes(q) ? 4 : 0) +
-    (p.excerpt.toLowerCase().includes(q) ? 2 : 0) +
-    (p.tags.some((t) => t.toLowerCase().includes(q)) ? 2 : 0) +
-    1;
-  return [...posts].sort((a, b) => score(b) - score(a) || (b.publishedAt ?? 0) - (a.publishedAt ?? 0));
-}