@runcontext/site 0.4.3 → 0.4.4

package/astro/src/components/Sidebar.astro

@@ -0,0 +1,71 @@
+---
+interface Props {
+  models: Record<string, any>;
+  tiers: Record<string, any>;
+  title: string;
+  activeModel?: string;
+}
+const { models, tiers, title, activeModel } = Astro.props;
+const modelNames = Object.keys(models);
+
+function tierClass(tier: string | undefined): string {
+  if (!tier) return 'sidebar-badge-none';
+  return `sidebar-badge-${tier}`;
+}
+---
+
+<div class="overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>
+<nav class="sidebar" id="sidebar">
+  <div class="sidebar-section">
+    <div class="sidebar-heading">Navigation</div>
+    <a href="/" class:list={['sidebar-item', { active: title === 'Home' }]}>
+      <span>Home</span>
+    </a>
+    <a href="/glossary.html" class:list={['sidebar-item', { active: title === 'Glossary' }]}>
+      <span>Glossary</span>
+    </a>
+    <a href="/search.html" class:list={['sidebar-item', { active: title === 'Search' }]}>
+      <span>Search</span>
+    </a>
+  </div>
+  {modelNames.length > 0 && (
+    <div class="sidebar-section">
+      <div class="sidebar-heading">Models</div>
+      {modelNames.map((name) => (
+        <a href={`/models/${name}.html`} class:list={['sidebar-item', { active: activeModel === name }]}>
+          <span class="mono" style="font-size:0.78rem;">{name}</span>
+          {tiers[name] && (
+            <span class={`sidebar-badge ${tierClass(tiers[name]?.tier)}`}>
+              {tiers[name]?.tier || '\u2014'}
+            </span>
+          )}
+        </a>
+      ))}
+    </div>
+  )}
+</nav>
+
+<style>
+  .sidebar {
+    position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
+    width: var(--sidebar-w);
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border);
+    overflow-y: auto; padding: 1rem 0; z-index: 100;
+  }
+  .sidebar::-webkit-scrollbar { width: 4px; }
+  .sidebar::-webkit-scrollbar-track { background: transparent; }
+  .sidebar::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
+  .sidebar-section { padding: 0 0.75rem; margin-bottom: 1.25rem; }
+  .sidebar-heading { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); padding: 0 0.5rem; margin-bottom: 0.4rem; }
+  .sidebar-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 5px; font-size: 0.82rem; color: var(--text-secondary); text-decoration: none; transition: background 0.12s, color 0.12s; }
+  .sidebar-item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
+  .sidebar-item.active { background: var(--accent-dim); color: var(--accent-light); }
+  .sidebar-badge { font-family: var(--mono); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1rem 0.35rem; border-radius: 3px; margin-left: auto; }
+  .sidebar-badge-bronze { color: #b87a4a; background: rgba(184, 122, 74, 0.12); }
+  .sidebar-badge-silver { color: #a0a8b8; background: rgba(160, 168, 184, 0.1); }
+  .sidebar-badge-gold { color: var(--accent); background: var(--accent-dim); }
+  .sidebar-badge-none { color: var(--text-dim); background: rgba(106, 103, 94, 0.1); }
+  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 250; display: none; }
+  @media (max-width: 860px) { .overlay.open { display: block; } }
+</style>

package/astro/src/components/TierBadge.astro

@@ -0,0 +1,9 @@
+---
+interface Props {
+  tier: string | null | undefined;
+}
+const { tier } = Astro.props;
+const cls = tier ? `tag-${tier}` : '';
+---
+
+<span class={`tag ${cls}`}>{tier || 'none'}</span>

package/astro/src/components/Topbar.astro

@@ -0,0 +1,42 @@
+---
+interface Props {
+  siteTitle: string;
+  title: string;
+}
+const { siteTitle, title } = Astro.props;
+---
+
+<div class="topbar">
+  <div class="topbar-left">
+    <button class="menu-toggle" onclick="toggleSidebar()" aria-label="Toggle menu">&#9776;</button>
+    <a href="/" class="topbar-logo">{siteTitle}</a>
+    <span class="topbar-sep">/</span>
+    <span class="topbar-page">{title}</span>
+  </div>
+  <div class="topbar-right">
+    <a href="/search.html" class="topbar-link">Search</a>
+    <a href="https://github.com/erickittelson/ContextKit#readme" class="topbar-docs" target="_blank" rel="noopener">Docs &nearr;</a>
+  </div>
+</div>
+
+<style>
+  .topbar {
+    position: fixed; top: 0; left: 0; right: 0;
+    height: var(--topbar-h);
+    background: var(--bg-sidebar);
+    border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 1.25rem; z-index: 200;
+  }
+  .topbar-left { display: flex; align-items: center; gap: 0.75rem; }
+  .topbar-logo { font-family: var(--sans); font-size: 0.9rem; font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: -0.02em; }
+  .topbar-logo:hover { text-decoration: none; }
+  .topbar-sep { color: var(--border-light); font-size: 1.1rem; font-weight: 300; }
+  .topbar-page { font-size: 0.8rem; color: var(--text-secondary); }
+  .topbar-right { display: flex; align-items: center; gap: 1rem; }
+  .topbar-link { font-size: 0.78rem; color: var(--text-dim); text-decoration: none; transition: color 0.15s; }
+  .topbar-link:hover { color: var(--text); text-decoration: none; }
+  .topbar-docs { font-size: 0.72rem; font-weight: 500; color: var(--accent); border: 1px solid var(--accent-border); padding: 0.3rem 0.65rem; border-radius: 5px; text-decoration: none; transition: background 0.15s; }
+  .topbar-docs:hover { background: var(--accent-dim); text-decoration: none; }
+  .menu-toggle { display: none; background: none; border: none; color: var(--text-secondary); font-size: 1.3rem; cursor: pointer; padding: 0.25rem; }
+</style>