@dmthepm/commune 0.1.0

package/src/components/HomeFooterCards.astro

@@ -0,0 +1,155 @@
+---
+/**
+ * Homepage Footer Cards
+ * Two-column layout showing backlinks and recent activity
+ * Only displays on the home note (My Working Notes)
+ */
+
+interface Props {
+  slug: string;
+  backlinks?: Array<{
+    slug: string;
+    title: string;
+  }>;
+}
+
+const { slug, backlinks = [] } = Astro.props;
+
+// Only show on home note
+const isHomePage = slug === '/notes/my-working-notes/';
+if (!isHomePage) return null;
+---
+
+{isHomePage && (
+  <section class="home-footer-cards">
+    <div class="footer-cards-container">
+
+      <!-- Left Card: Backlinks -->
+      <div class="footer-card backlinks-card">
+        <h3 class="card-title">Notes linking here</h3>
+        <div class="card-content">
+          {backlinks.length === 0 ? (
+            <p class="empty-state">No backlinks yet</p>
+          ) : (
+            <ul class="backlinks-list">
+              {backlinks.slice(0, 5).map((link) => (
+                <li>
+                  <a href={link.slug}>{link.title}</a>
+                </li>
+              ))}
+            </ul>
+          )}
+          {backlinks.length > 5 && (
+            <button class="expand-button">
+              View all {backlinks.length} links →
+            </button>
+          )}
+        </div>
+      </div>
+
+      <!-- Right Card: Recent Activity -->
+      <div class="footer-card activity-card">
+        <h3 class="card-title">Recent work</h3>
+        <div class="card-content">
+          <p class="empty-state">Commit history analysis coming soon</p>
+          <!-- Will be populated with LLM-analyzed commit summaries -->
+        </div>
+      </div>
+
+    </div>
+  </section>
+)}
+
+<style>
+  .home-footer-cards {
+    margin-top: 4rem;
+    padding-top: 3rem;
+    border-top: 1px solid var(--c-border);
+  }
+
+  .footer-cards-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    max-width: 100%;
+  }
+
+  /* Mobile: Stack vertically */
+  @media (max-width: 767px) {
+    .footer-cards-container {
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+    }
+  }
+
+  .footer-card {
+    background: var(--c-bg-soft);
+    border: 1px solid var(--c-border);
+    border-radius: var(--c-radius-md);
+    padding: 1.5rem;
+    min-height: 200px;
+  }
+
+  .card-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+    color: var(--c-text);
+  }
+
+  .card-content {
+    font-size: 0.95rem;
+    line-height: 1.6;
+  }
+
+  .backlinks-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .backlinks-list li {
+    margin-bottom: 0.75rem;
+  }
+
+  .backlinks-list a {
+    color: var(--c-text-accent);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: all 0.15s ease;
+    display: block;
+    padding: 0.5rem;
+    margin: -0.5rem;
+    border-radius: var(--c-radius-sm);
+  }
+
+  .backlinks-list a:hover {
+    background: var(--c-bg);
+    border-bottom-color: var(--c-accent);
+  }
+
+  .empty-state {
+    color: var(--c-text-muted);
+    font-style: italic;
+    margin: 0;
+  }
+
+  .expand-button {
+    margin-top: 1rem;
+    background: transparent;
+    border: 1px solid var(--c-border);
+    color: var(--c-text-accent);
+    padding: 0.5rem 1rem;
+    border-radius: var(--c-radius-sm);
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.15s ease;
+    width: 100%;
+    text-align: center;
+  }
+
+  .expand-button:hover {
+    background: var(--c-bg);
+    border-color: var(--c-accent);
+  }
+</style>

package/src/components/MarkdownLink.astro

@@ -0,0 +1,36 @@
+---
+/**
+ * "view as markdown" — the source-file affordance on every rendered entry.
+ *
+ * Deliberately one line of text: the real interface is the URL convention
+ * (append `.md` to any page), and this link is only the thing that teaches a
+ * reader the convention exists. A card or an icon would sell it as a feature.
+ */
+interface Props {
+	href: string;
+}
+
+const { href } = Astro.props;
+---
+<p class="markdown-link"><a href={href}>view as markdown</a></p>
+
+<style>
+  .markdown-link {
+    margin: 2.5rem 0 0;
+    font-size: 0.9rem;
+    color: var(--c-text-muted);
+  }
+
+  .markdown-link a {
+    color: var(--c-text-muted);
+    text-decoration: none;
+    border-bottom: 1px solid var(--c-border);
+    padding-bottom: 1px;
+    transition: all 0.15s ease;
+  }
+
+  .markdown-link a:hover {
+    color: var(--c-accent);
+    border-bottom-color: var(--c-accent);
+  }
+</style>

package/src/components/PlausibleScript.astro

@@ -0,0 +1,13 @@
+---
+// Plausible Analytics Script Component
+// Privacy-friendly analytics with no cookies or personal data collection
+
+export interface Props {
+  domain: string;
+  src?: string;
+}
+
+const { domain, src = "https://analytics.devonmeadows.com/js/script.js" } = Astro.props;
+---
+
+<script defer data-domain={domain} src={src}></script>

package/src/components/RelatedNotes.astro

@@ -0,0 +1,77 @@
+---
+/**
+ * Related Notes component - finds notes with overlapping tags.
+ * 
+ * This helps discovery: "if you're interested in this, you might
+ * also like these other notes."
+ */
+
+import { getCollection } from 'astro:content';
+
+interface Props {
+	slug: string;
+	tags: string[];
+}
+
+const { slug, tags } = Astro.props;
+
+// Get all public notes
+const allNotes = await getCollection('notes', ({ data }) => data.visibility === 'public');
+
+// Find notes with overlapping tags (excluding current note)
+const related = allNotes
+	.filter((note) => note.id !== slug)
+	.map((note) => {
+		const overlap = note.data.tags.filter((tag) => tags.includes(tag));
+		return {
+			slug: note.id,
+			title: note.data.title,
+			tags: note.data.tags,
+			overlapCount: overlap.length,
+		};
+	})
+	.filter((note) => note.overlapCount > 0)
+	.sort((a, b) => b.overlapCount - a.overlapCount)
+	.slice(0, 8); // Show top 8
+---
+
+{related.length > 0 && (
+	<section class="related-notes">
+		<h3 class="text-sm font-semibold tracking-wide uppercase text-gray-500 dark:text-gray-400 mb-4">
+			Related Notes
+		</h3>
+		<ul class="space-y-3">
+			{related.map(({ slug: relSlug, title, tags: relTags }) => (
+				<li>
+					<a 
+						href={`/notes/${relSlug}/`}
+						class="block group"
+					>
+						<div class="text-sm text-[var(--sl-color-accent)] group-hover:underline group-hover:text-[var(--sl-color-accent-high)]">
+							{title}
+						</div>
+						<div class="flex flex-wrap gap-1.5 mt-1">
+							{relTags.slice(0, 3).map((tag) => (
+								<span class="text-xs text-gray-500 dark:text-gray-400">
+									#{tag}
+								</span>
+							))}
+						</div>
+					</a>
+				</li>
+			))}
+		</ul>
+	</section>
+)}
+
+{related.length === 0 && (
+	<section class="related-notes">
+		<h3 class="text-sm font-semibold tracking-wide uppercase text-gray-500 dark:text-gray-400 mb-4">
+			Related Notes
+		</h3>
+		<p class="text-sm text-gray-500 dark:text-gray-400">
+			No related notes yet. Try adding more tags!
+		</p>
+	</section>
+)}
+

package/src/components/SearchModal.astro

@@ -0,0 +1,213 @@
+---
+interface Result { url: string; title: string; excerpt?: string; score?: number; source?: 'pagefind'|'semantic'; }
+---
+<div id="commune-search" hidden>
+  <div class="shade" onclick="window.CommuneSearch.close()"></div>
+  <div class="modal" role="dialog" aria-modal="true">
+    <input id="q" placeholder="Search notes & docs… (Esc to close)" autofocus />
+    <ul id="results"></ul>
+  </div>
+</div>
+
+<style>
+  #commune-search[hidden]{display:none}
+  .shade{
+    position:fixed;
+    inset:0;
+    background:rgba(0,0,0,.5);
+    backdrop-filter:blur(4px);
+    z-index:var(--z-modal-shade);
+  }
+  .modal{
+    position:fixed;
+    inset:auto;
+    left:50%;
+    top:12vh;
+    transform:translateX(-50%);
+    width:min(720px,90vw);
+    background:var(--c-bg);
+    border:1px solid var(--c-border);
+    border-radius:var(--c-radius-lg);
+    padding:1.25rem;
+    box-shadow:var(--c-shadow-xl);
+    z-index:var(--z-modal);
+    box-sizing:border-box;
+  }
+  #q{
+    width:100%;
+    font-size:1.1rem;
+    padding:.85rem 1.1rem;
+    border-radius:var(--c-radius-md);
+    border:1.5px solid var(--c-border);
+    outline:none;
+    box-sizing:border-box;
+    background:var(--c-bg);
+    color:var(--c-text);
+    transition:border-color 0.15s ease;
+  }
+  #q:focus{
+    border-color:var(--c-accent);
+  }
+  #results{
+    list-style:none;
+    margin:1rem 0 .5rem;
+    padding:0;
+    max-height:60vh;
+    overflow:auto;
+  }
+  #results li{
+    padding:.85rem .75rem;
+    border-radius:var(--c-radius-sm);
+    cursor:pointer;
+    transition:background 0.1s ease;
+  }
+  #results li:hover{
+    background:var(--c-bg-soft);
+  }
+  #results a{
+    text-decoration:none;
+    color:var(--c-text);
+    font-weight:600;
+    font-size:1rem;
+  }
+  #results .excerpt{
+    font-size:.9rem;
+    color:var(--c-text-muted);
+    margin-top:.35rem;
+    line-height:1.5;
+  }
+  .empty{
+    text-align:center;
+    padding:2rem;
+    color:var(--c-text-muted);
+    font-size:.95rem;
+  }
+</style>
+
+<script is:inline>
+  // Lightweight RRF combiner
+  const rrf = (lists) => {
+    const map = new Map();
+    lists.forEach((arr, idx) => arr.forEach((r, i) => {
+      const key = r.url;
+      const cur = map.get(key) ?? { ...r, score: 0 };
+      cur.score += 1 / (60 + i);
+      map.set(key, cur);
+    }));
+    return Array.from(map.values()).sort((a,b) => b.score - a.score);
+  };
+
+  // Pagefind removed - semantic search will handle full-text needs
+  // If we ever need dedicated lexical full-text search, we can re-add it
+
+  async function doSemantic(query){
+    try{
+      const r = await fetch(`/api/ask?q=${encodeURIComponent(query)}`);
+      if (!r.ok) return [];
+      const j = await r.json();
+      return (j.results ?? []).slice(0,10).map(x => ({ url: x.url, title: x.title, excerpt: x.snippet, source:'semantic' }));
+    }catch{ return []; }
+  }
+
+  // DEV fallback: use backlinks graph as minimal search index
+  async function devIndex() {
+    try {
+      const r = await fetch('/backlinks.json', { cache: 'no-store' });
+      if (!r.ok) return [];
+      const graph = await r.json();
+      return Object.entries(graph).map(([url, node]) => ({
+        url,
+        title: node.title || url,
+        excerpt: (node.summary || '').slice(0, 160),
+        // Aliases and tags are searchable but never displayed — they let you
+        // find a note by a name it answers to rather than the one it wears.
+        terms: [...(node.aliases || []), ...(node.tags || [])].join(' '),
+      }));
+    } catch { return []; }
+  }
+
+  async function doDevSearch(q) {
+    const idx = await devIndex();
+    if (!q) return [];
+    const norm = q.toLowerCase();
+    const scored = idx.map(d => {
+      const hay = `${d.title} ${d.excerpt} ${d.terms}`.toLowerCase();
+      const pos = hay.indexOf(norm);
+      return pos === -1 ? null : { ...d, score: 1 / (1 + pos) };
+    }).filter(Boolean).sort((a,b) => b.score - a.score);
+    return scored.slice(0, 20).map(d => ({ url: d.url, title: d.title, excerpt: d.excerpt, source: 'pagefind' }));
+  }
+
+  // Wire up modal
+  (function mountSearch(){
+    const root = document.getElementById('commune-search');
+    const input = root.querySelector('#q');
+    const list  = root.querySelector('#results');
+
+    function render(results) {
+      if(!results.length){
+        list.innerHTML = '<div class="empty">No results found</div>';
+        return;
+      }
+      list.innerHTML = results.map(r => (
+        `<li>
+          <a href="${r.url}">${r.title}</a>
+          ${r.excerpt ? `<div class="excerpt">${r.excerpt}</div>` : ''}
+        </li>`
+      )).join('');
+      // Wire close on click and enter-to-go
+      list.querySelectorAll('a').forEach(a => a.onclick = () => window.CommuneSearch.close());
+    }
+
+    // SEARCH STRATEGY (2-tier hybrid):
+    // 1. Substring (title/summary) - Fast exact matching on backlinks.json
+    // 2. Semantic (Qdrant) - Conceptual similarity, foundation for "Ask the Brain"
+    // RRF combines both for best results
+
+    let t;
+    async function search(q) {
+      const [substring, semantic] = await Promise.all([
+        doDevSearch(q),                    // Tier 1: Exact phrase matching
+        doSemantic(q).catch(() => []),     // Tier 2: Conceptual (when API ready)
+      ]);
+      let merged = rrf([substring, semantic]);
+      render(merged);
+    }
+
+    function open() {
+      root.hidden = false;
+      document.body.classList.add('modal-open');
+      input.value = '';
+      render([]);
+      input.focus();
+    }
+    function close() {
+      root.hidden = true;
+      document.body.classList.remove('modal-open');
+    }
+    window.CommuneSearch = { open, close };
+
+    addEventListener('commune:openSearch', open);
+    addEventListener('keydown', e => {
+      const mac = navigator.platform.toUpperCase().includes('MAC');
+      if ((mac ? e.metaKey : e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault(); open();
+      }
+      if (e.key === 'Escape' && !root.hidden) close();
+    });
+
+    input.addEventListener('input', () => {
+      clearTimeout(t);
+      const q = input.value.trim();
+      t = setTimeout(() => search(q), 200);
+    });
+
+    // Enter → first result
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        const first = list.querySelector('li a');
+        if (first) window.location.href = first.getAttribute('href');
+      }
+    });
+  })();
+</script>

package/src/components/StarredLinksScript.astro

@@ -0,0 +1,92 @@
+<script is:inline>
+// === STARRED LINKS INITIALIZATION ===
+// Adds ⭐ stars to links pointing to starred notes
+
+(function() {
+  let backlinksData = null;
+
+  async function initializeStarredLinks(scope = document) {
+    try {
+      // Fetch backlinks data if not already loaded
+      if (!backlinksData) {
+        const res = await fetch('/backlinks.json');
+        if (res.ok) {
+          backlinksData = await res.json();
+        } else {
+          console.warn('Failed to load backlinks.json for starred links');
+          return;
+        }
+      }
+
+      // Find all links to /notes/ within the scope, excluding backlinks section
+      // (BacklinksScript handles those separately)
+      const allNoteLinks = scope.querySelectorAll('a[href^="/notes/"]');
+      const noteLinks = Array.from(allNoteLinks).filter(link => !link.closest('.backlinks'));
+
+      noteLinks.forEach(link => {
+        const href = link.getAttribute('href');
+        if (!href) return;
+
+        // Normalize href to match backlinks.json format (ensure trailing slash)
+        const normalizedHref = href.endsWith('/') ? href : href + '/';
+        const note = backlinksData[normalizedHref];
+
+        if (note?.isStarred) {
+          // Check if star isn't already there
+          if (!link.querySelector('.star-indicator-inline') && !link.nextElementSibling?.classList?.contains('star-indicator-inline')) {
+            // Create wrapper to prevent line break between link and star
+            const wrapper = document.createElement('span');
+            wrapper.style.whiteSpace = 'nowrap';
+            wrapper.style.display = 'inline';
+
+            // Create star as a separate clickable element (not part of the link)
+            const star = document.createElement('span');
+            star.className = 'star-indicator-inline';
+            star.textContent = ' ⭐';
+            star.setAttribute('aria-label', 'Top 5% most linked - click to learn more');
+            star.setAttribute('role', 'button');
+            star.setAttribute('tabindex', '0');
+
+            // Click handler to open modal (not navigate)
+            star.addEventListener('click', (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (typeof window.showStarModal === 'function') {
+                window.showStarModal();
+              }
+            });
+
+            // Keyboard support
+            star.addEventListener('keydown', (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                if (typeof window.showStarModal === 'function') {
+                  window.showStarModal();
+                }
+              }
+            });
+
+            // Wrap the link in the nowrap container
+            link.parentNode.insertBefore(wrapper, link);
+            wrapper.appendChild(link);
+            wrapper.appendChild(star);
+          }
+        }
+      });
+    } catch (error) {
+      console.error('Error initializing starred links:', error);
+    }
+  }
+
+  // Make it globally available for dynamic pane loading
+  window.initializeStarredLinks = initializeStarredLinks;
+
+  // Auto-initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => initializeStarredLinks());
+  } else {
+    initializeStarredLinks();
+  }
+})();
+</script>

package/src/components/panes.ts

@@ -0,0 +1,61 @@
+export function setupPanes(){
+  const stack = document.getElementById('pane-stack');
+  if(!stack) return;
+
+  function activateStack(on: boolean){
+    stack.classList.toggle('active', on);
+    document.body.classList.toggle('panes-open', on);
+  }
+
+  async function openPane(url: string){
+    activateStack(true);
+
+    const res = await fetch(url, { headers: { 'Accept':'text/html;charset=utf-8' } });
+    const html = await res.text();
+    const doc  = new DOMParser().parseFromString(html, 'text/html');
+    const main = doc.querySelector('main') ?? doc.body;
+
+    const pane = document.createElement('div');
+    pane.className = 'pane';
+    pane.innerHTML = `
+      <header><strong>${doc.title?.replace(/ \|.*/,'')}</strong>
+        <button class="close" aria-label="Close">×</button>
+      </header>
+      <div class="body"><article class="prose">${main.innerHTML}</article></div>`;
+
+    pane.querySelector<HTMLButtonElement>('.close')!.addEventListener('click', () => {
+      pane.remove();
+      if(!stack.querySelector('.pane')) activateStack(false);
+    });
+
+    stack.appendChild(pane);
+    stack.scrollLeft = stack.scrollWidth;
+
+    // Limit to 3
+    const panes = stack.querySelectorAll('.pane');
+    if(panes.length > 3) panes[0].remove();
+  }
+
+  // Only intercept clicks inside the main article area
+  document.addEventListener('click', (e) => {
+    const inArticle = (e.target as HTMLElement)?.closest?.('main, article.prose');
+    if (!inArticle) return;
+
+    const a = (e.target as HTMLElement)?.closest?.('a[href^="/notes/"]') as HTMLAnchorElement | null;
+    if(!a) return;
+    if (e.ctrlKey || e.metaKey || e.shiftKey) return; // allow new tab, etc.
+    if (window.innerWidth < 1024) return;             // mobile → normal nav
+
+    e.preventDefault();
+    openPane(a.href);
+    history.pushState({ pane: a.href }, '', a.href);
+  });
+
+  addEventListener('popstate', () => {
+    const panes = stack.querySelectorAll('.pane');
+    if(panes.length){
+      panes[panes.length-1].remove();
+      if(!stack.querySelector('.pane')) activateStack(false);
+    }
+  });
+}