@acms-subir/core 0.0.1 → 0.1.0

package/src/pages/api/search.ts

@@ -0,0 +1,44 @@
+import type { APIRoute } from 'astro';
+import { getRepo } from '../../lib/repo';
+import { authorSlug, publicTags } from '../../lib/schema';
+import { collectionUrl, tagUrl } from '../../lib/content';
+import { localeHomeUrl, normalizePageLocale } from '../../lib/i18n';
+import { formatDate } from '../../lib/dates';
+
+// Public search API behind the site's search modal. Published-only by
+// construction — the same contract as rss/sitemap — so it needs no auth and
+// the middleware already leaves /api alone. `locale` boosts the visitor's
+// language to the top of page results; it never filters. Snippets are safe
+// HTML (entity-escaped, <mark> around matches) ready for innerHTML.
+
+const LIMITS = { posts: 10, pages: 5, tags: 5, authors: 5 };
+
+export const GET: APIRoute = async ({ locals, url }) => {
+  const headers = { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'public, max-age=60' };
+  const q = (url.searchParams.get('q') ?? '').trim().slice(0, 100);
+  if (!q) return new Response(JSON.stringify({ posts: [], pages: [], tags: [], authors: [] }), { headers });
+
+  const repo = await getRepo(locals);
+  const locale = normalizePageLocale(url.searchParams.get('locale') ?? '');
+  const [results, settings] = await Promise.all([repo.searchPublished(q, { locale }), repo.getSettings()]);
+
+  const body = {
+    posts: results.posts.slice(0, LIMITS.posts).map(({ doc: p, snippet }) => ({
+      title: p.title,
+      url: collectionUrl(p.collection, p.slug),
+      excerpt: p.excerpt,
+      snippet,
+      date: p.publishedAt ? formatDate(p.publishedAt, settings) : '',
+      tags: publicTags(p.tags),
+    })),
+    pages: results.pages.slice(0, LIMITS.pages).map(({ doc: p, snippet }) => ({
+      title: p.title,
+      url: p.isHome ? localeHomeUrl(p.locale) : `/${p.slug}`,
+      snippet,
+      locale: p.locale,
+    })),
+    tags: results.tags.slice(0, LIMITS.tags).map(({ tag, count }) => ({ name: tag.name, url: tagUrl(tag.slug), count })),
+    authors: results.authors.slice(0, LIMITS.authors).map((u) => ({ name: u.name, url: `/author/${authorSlug(u)}`, avatar: u.avatar })),
+  };
+  return new Response(JSON.stringify(body), { headers });
+};

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/site.css

@@ -425,3 +425,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));
-}