@dmthepm/commune 0.1.0

package/src/components/Header.astro

@@ -0,0 +1,250 @@
+---
+---
+<header class="commune-header">
+  <div class="wrap">
+    <a href="/" class="brand-section">
+      <img src="/avatar.jpg" alt="Devon" class="avatar" />
+      <span class="brand brand-full">Devon Meadows</span>
+      <span class="brand brand-short">Devon</span>
+    </a>
+    <div class="controls">
+      <button id="theme-toggle" class="theme-btn" aria-label="Toggle theme">
+        <span class="sun">☀️</span>
+        <span class="moon">🌙</span>
+      </button>
+      <button class="search-btn" aria-label="Search (⌘K)" onclick="window.dispatchEvent(new CustomEvent('commune:openSearch'))">
+        <span class="search-icon">🔍</span>
+        <span class="search-text">Search</span><kbd>⌘K</kbd>
+      </button>
+    </div>
+  </div>
+</header>
+
+<style>
+  .commune-header{
+    position:sticky;
+    top:0;
+    background:var(--c-bg);
+    backdrop-filter:saturate(120%) blur(12px);
+    border-bottom:1px solid var(--c-border);
+    z-index:var(--z-header);
+    box-shadow:var(--c-shadow-sm);
+  }
+  .wrap{
+    display:flex;
+    align-items:center;
+    gap:1rem;
+    justify-content:space-between;
+    padding:1rem 1.25rem;
+    max-width:clamp(480px, 45vw, 700px);
+    margin:0 auto;
+  }
+  .brand-section{
+    display:flex;
+    align-items:center;
+    gap:.75rem;
+    text-decoration:none;
+    color:inherit;
+  }
+  .avatar{
+    width:2.5rem;
+    height:2.5rem;
+    border-radius:50%;
+    object-fit:cover;
+    border:2px solid var(--c-border);
+    transition:border-color 0.15s ease;
+  }
+  .avatar:hover{
+    border-color:var(--c-accent);
+  }
+  .controls{
+    display:flex;
+    align-items:center;
+    gap:.75rem;
+  }
+  .brand{
+    font-weight:700;
+    font-size:1.15rem;
+    letter-spacing:.3px;
+    color:var(--c-text);
+    cursor:pointer;
+    transition:color 0.15s ease;
+  }
+
+  /* Show full name on desktop, hide short name */
+  .brand-short {
+    display: none;
+  }
+
+  /* Tablet and below: remove max-width to match body full-width layout */
+  @media (max-width: 1023px) {
+    .wrap {
+      max-width: none;
+      padding:1rem 1.5rem;
+    }
+  }
+
+  /* Mobile: show short name, hide full name */
+  @media (max-width: 768px) {
+    .brand-full {
+      display: none;
+    }
+    .brand-short {
+      display: block;
+      font-size:1.1rem;
+      font-weight:600;
+    }
+  }
+  .brand:hover{
+    color:var(--c-accent);
+  }
+  nav{
+    display:flex;
+    gap:1.25rem;
+  }
+  nav a{
+    color:var(--c-text);
+    font-weight:500;
+    cursor:pointer;
+    transition:color 0.15s ease;
+  }
+  nav a:hover{
+    color:var(--c-accent);
+  }
+  .theme-btn{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    width:2.5rem;
+    height:2.5rem;
+    border:1.5px solid var(--c-border);
+    background:var(--c-bg-soft);
+    border-radius:var(--c-radius-md);
+    cursor:pointer;
+    transition:all 0.15s ease;
+    font-size:1.2rem;
+    position:relative;
+  }
+  .theme-btn:hover{
+    border-color:var(--c-accent);
+    transform:rotate(15deg);
+  }
+  
+  /* Mobile: prevent rotate transform issues on touch */
+  @media (max-width: 768px) {
+    .theme-btn:hover {
+      transform:none;
+    }
+    .theme-btn:active {
+      transform:scale(0.95);
+      transition:transform 0.1s ease;
+    }
+  }
+  .theme-btn .sun,
+  .theme-btn .moon{
+    position:absolute;
+    transition:opacity 0.2s ease, transform 0.2s ease;
+  }
+  :root[data-theme="light"] .theme-btn .sun{
+    opacity:1;
+    transform:rotate(0deg);
+  }
+  :root[data-theme="light"] .theme-btn .moon{
+    opacity:0;
+    transform:rotate(180deg);
+  }
+  :root[data-theme="dark"] .theme-btn .sun{
+    opacity:0;
+    transform:rotate(180deg);
+  }
+  :root[data-theme="dark"] .theme-btn .moon{
+    opacity:1;
+    transform:rotate(0deg);
+  }
+  .search-btn{
+    display:flex;
+    align-items:center;
+    gap:.6rem;
+    border:1.5px solid var(--c-border);
+    background:var(--c-bg-soft);
+    padding:.5rem .8rem;
+    border-radius:var(--c-radius-md);
+    cursor:pointer;
+    transition:all 0.15s ease;
+  }
+  .search-btn:hover{
+    border-color:var(--c-accent);
+    background:var(--c-bg);
+  }
+  .search-btn span{
+    color:var(--c-text-muted);
+    font-size:.95rem;
+  }
+  /* Hide search emoji on desktop */
+  .search-btn .search-icon {
+    display:none;
+  }
+  kbd{
+    font-size:.75rem;
+    color:var(--c-text-muted);
+    border:1px solid var(--c-border);
+    background:var(--c-bg);
+    padding:.2rem .4rem;
+    border-radius:var(--c-radius-sm);
+  }
+
+  /* Mobile: hide Command-K text and search text, show only icon */
+  @media (max-width: 768px) {
+    .search-btn kbd,
+    .search-btn .search-text {
+      display:none;
+    }
+    .search-btn .search-icon {
+      display:block;
+      font-size:1.1rem;
+    }
+    .search-btn {
+      padding:.6rem;
+      min-width:2.5rem;
+      justify-content:center;
+    }
+    .avatar {
+      width:2.2rem;
+      height:2.2rem;
+    }
+    .controls {
+      gap:.5rem;
+    }
+  }
+</style>
+
+<script is:inline>
+  // Theme toggle
+  (function initTheme(){
+    const toggle = document.getElementById('theme-toggle');
+    const root = document.documentElement;
+    
+    // Get saved theme or default to system preference
+    const savedTheme = localStorage.getItem('commune-theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+    
+    root.setAttribute('data-theme', initialTheme);
+    
+    toggle?.addEventListener('click', () => {
+      const currentTheme = root.getAttribute('data-theme');
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      root.setAttribute('data-theme', newTheme);
+      localStorage.setItem('commune-theme', newTheme);
+    });
+  })();
+
+  // cmd/ctrl-k opens modal
+  addEventListener('keydown', (e) => {
+    const mac = navigator.platform.toUpperCase().includes('MAC');
+    if ((mac ? e.metaKey : e.ctrlKey) && e.key.toLowerCase() === 'k') {
+      e.preventDefault();
+      dispatchEvent(new CustomEvent('commune:openSearch'));
+    }
+  });
+</script>

package/src/components/HeaderStarScript.astro

@@ -0,0 +1,380 @@
+<script is:inline>
+// === HEADER STAR INITIALIZATION ===
+// Adds a ⭐ star to the h1 title of starred notes with a clickable modal
+
+(function() {
+  let backlinksData = null;
+
+  // Show the star modal
+  function showStarModal() {
+    const modal = document.getElementById('star-modal');
+    if (modal) {
+      modal.style.display = 'flex';
+      // Prevent body scroll when modal is open
+      document.body.style.overflow = 'hidden';
+    }
+  }
+
+  // Hide the star modal
+  function hideStarModal() {
+    const modal = document.getElementById('star-modal');
+    if (modal) {
+      modal.style.display = 'none';
+      document.body.style.overflow = '';
+    }
+  }
+
+  // Create the modal HTML (only once)
+  function createStarModal() {
+    if (document.getElementById('star-modal')) return; // Already exists
+
+    const modal = document.createElement('div');
+    modal.id = 'star-modal';
+    modal.className = 'star-modal';
+    modal.innerHTML = `
+      <div class="star-modal-backdrop"></div>
+      <div class="star-modal-content">
+        <button class="star-modal-close" aria-label="Close">&times;</button>
+        <div class="star-modal-body">
+          <div class="star-modal-icon">⭐</div>
+          <h2>Top 5%</h2>
+          <p>Other notes link here often. Shows this idea anchors your wiki.</p>
+          <p><a href="/notes/the-star/" class="star-link">More about <span class="star-emoji">⭐</span></a></p>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(modal);
+
+    // Close on modal/backdrop click (but not on content)
+    modal.addEventListener('click', hideStarModal);
+
+    // Prevent clicks on modal content from closing modal
+    modal.querySelector('.star-modal-content').addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+
+    // Close on X button click
+    modal.querySelector('.star-modal-close').addEventListener('click', (e) => {
+      e.stopPropagation(); // Prevent double-close
+      hideStarModal();
+    });
+
+    // Close on Escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && modal.style.display === 'flex') {
+        hideStarModal();
+      }
+    });
+  }
+
+  async function initializeHeaderStar(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 header star');
+          return;
+        }
+      }
+
+      // Create modal (only once globally)
+      createStarModal();
+
+      // Find the current note's slug from the URL
+      const currentPath = window.location.pathname;
+      const normalizedPath = currentPath.endsWith('/') ? currentPath : currentPath + '/';
+
+      // Check if current note is starred
+      const note = backlinksData[normalizedPath];
+
+      if (note?.isStarred) {
+        // Find all h1 elements within the scope
+        const h1s = scope.querySelectorAll('.prose h1');
+
+        h1s.forEach(h1 => {
+          // Check if star isn't already there
+          if (!h1.querySelector('.star-indicator')) {
+            // Create wrapper to prevent line break between last word and star
+            const wrapper = document.createElement('span');
+            wrapper.style.whiteSpace = 'nowrap';
+
+            // Create star element (inline, clickable)
+            const star = document.createElement('span');
+            star.className = 'star-indicator';
+            star.innerHTML = ' ⭐';
+            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
+            star.addEventListener('click', (e) => {
+              e.preventDefault();
+              showStarModal();
+            });
+
+            // Keyboard support
+            star.addEventListener('keydown', (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                showStarModal();
+              }
+            });
+
+            // Get the h1's text content
+            const textContent = h1.textContent || '';
+            const words = textContent.trim().split(/\s+/);
+
+            // If there's more than one word, wrap the last word + star
+            if (words.length > 1) {
+              const lastWord = words.pop();
+              const restOfText = words.join(' ');
+
+              h1.textContent = restOfText + ' ';
+              wrapper.textContent = lastWord;
+              wrapper.appendChild(star);
+              h1.appendChild(wrapper);
+            } else {
+              // Just one word, append star directly with nowrap
+              wrapper.textContent = textContent;
+              wrapper.appendChild(star);
+              h1.textContent = '';
+              h1.appendChild(wrapper);
+            }
+          }
+        });
+      }
+    } catch (error) {
+      console.error('Error initializing header star:', error);
+    }
+  }
+
+  // Make functions globally available
+  window.initializeHeaderStar = initializeHeaderStar;
+  window.showStarModal = showStarModal;
+
+  // Auto-initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => initializeHeaderStar());
+  } else {
+    initializeHeaderStar();
+  }
+})();
+</script>
+
+<style is:global>
+  /* Star indicator - inline with title (Skool-style) */
+  .star-indicator {
+    display: inline-block;
+    cursor: pointer;
+    font-size: 1em;
+    margin-left: 0.35em;
+    opacity: 0.9;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .star-indicator:hover {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  .star-indicator:focus {
+    outline: 2px solid var(--c-accent);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+
+  /* Inline stars (in WikiLinks and backlinks) */
+  .star-indicator-inline {
+    display: inline-block;
+    cursor: pointer;
+    margin-left: 0.15em;
+    opacity: 0.9;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    user-select: none;
+    text-decoration: none !important;
+    border-bottom: none !important;
+  }
+
+  .star-indicator-inline:hover {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  .star-indicator-inline:focus {
+    outline: 2px solid var(--c-accent);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+
+  /* Modal styles */
+  .star-modal {
+    display: none; /* Hidden by default, shown via JS */
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 0.2s ease;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .star-modal-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+  }
+
+  .star-modal-content {
+    position: relative;
+    background: var(--c-bg);
+    border-radius: var(--c-radius-lg);
+    max-width: 540px;
+    width: 90%;
+    max-height: 85vh;
+    overflow-y: auto;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    animation: slideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+    border: 1px solid var(--c-border);
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .star-modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 32px;
+    height: 32px;
+    background: var(--c-bg-soft);
+    border: 1px solid var(--c-border);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: var(--c-text-muted);
+    transition: all 0.2s ease;
+    padding: 0;
+  }
+
+  .star-modal-close:hover {
+    background: var(--c-bg-muted);
+    color: var(--c-text);
+    transform: rotate(90deg);
+  }
+
+  .star-modal-body {
+    padding: 2.5rem 2rem 2rem;
+    text-align: center;
+  }
+
+  .star-modal-icon {
+    font-size: 3.5rem;
+    margin-bottom: 0.75rem;
+    animation: starPulse 2s ease-in-out infinite;
+  }
+
+  @keyframes starPulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+  }
+
+  .star-modal-body h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: var(--c-text);
+  }
+
+  .star-modal-body p {
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--c-text-accent);
+    margin-bottom: 0.75rem;
+  }
+
+  .star-modal-body p:last-child {
+    margin-bottom: 0;
+  }
+
+  .star-modal-body strong {
+    color: var(--c-accent);
+    font-weight: 600;
+  }
+
+  .star-modal-body em {
+    font-style: italic;
+    color: var(--c-text);
+  }
+
+  .star-link {
+    color: var(--c-accent);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    transition: opacity 0.2s ease;
+  }
+
+  .star-link:hover {
+    opacity: 0.8;
+  }
+
+  .star-link .star-emoji {
+    text-decoration: none;
+  }
+
+  /* Mobile adjustments */
+  @media (max-width: 1023px) {
+    .star-modal-content {
+      width: 95%;
+      max-height: 90vh;
+    }
+
+    .star-modal-body {
+      padding: 2rem 1.5rem 1.5rem;
+    }
+
+    .star-modal-body h2 {
+      font-size: 1.35rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .star-modal-icon {
+      font-size: 2.5rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .star-modal-body p {
+      font-size: 0.95rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+</style>