Merge pull request 'Blog JSON system' (#1 ) from OpenClaw into main

Reviewed-on: #1
Minor Manual Fixes to Lobster's code
2026-02-28 21:57:54 +00:00 · 2026-02-28 16:52:01 -05:00 · 2026-02-28 16:45:00 -05:00 · 2026-02-28 16:42:56 -05:00 · 2026-02-28 16:38:42 -05:00 · 2026-02-28 16:30:19 -05:00
54 changed files with 1407 additions and 290 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,16 +1 @@
 # Deployment Script
 deploy_dangrubb.net.sh
 # Data files (contain current state)
 server_state.txt
 php/server_state.log
 # Temporary files
 *.tmp
 .DS_Store
 # Logs
 *.log
 # Local configuration
 config.local.php
--- a/blog/index.html
+++ b/blog/index.html
@ -0,0 +1,254 @@
 <!DOCTYPE html>
 <html lang="en" >
 <head>
  <meta charset="UTF-8">
  <title>dangrubb.net</title>
      <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./style.css">
 </head>
 <body>
 <!-- partial:index.partial.html -->
 <div class="bard">
  <div class="strip" style="
    --glitch-x-1: -2em;
    --glitch-hue-1: -16deg;
    --glitch-x-2: 2em;
    --glitch-hue-2: 13deg;
    background-position: 0 -0em;
    height: 5em; 
    animation-name: glitch-9;
    animation-duration: 9000ms; 
    animation-delay: 2s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -1em;
    --glitch-hue-1: -42deg;
    --glitch-x-2: -6em;
    --glitch-hue-2: -23deg;
    background-position: 0 -5em;
    height: 3em; 
    animation-name: glitch-5;
    animation-duration: 5000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -10em;
    --glitch-hue-1: -42deg;
    --glitch-x-2: -9em;
    --glitch-hue-2: 45deg;
    background-position: 0 -8em;
    height: 3em; 
    animation-name: glitch-7;
    animation-duration: 7000ms; 
    animation-delay: 0s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -6em;
    --glitch-hue-1: -11deg;
    --glitch-x-2: 2em;
    --glitch-hue-2: 29deg;
    background-position: 0 -11em;
    height: 5em; 
    animation-name: glitch-8;
    animation-duration: 8000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: 0em;
    --glitch-hue-1: 42deg;
    --glitch-x-2: 2em;
    --glitch-hue-2: -28deg;
    background-position: 0 -16em;
    height: 5em; 
    animation-name: glitch-6;
    animation-duration: 6000ms; 
    animation-delay: 0s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -3em;
    --glitch-hue-1: -45deg;
    --glitch-x-2: -5em;
    --glitch-hue-2: -15deg;
    background-position: 0 -21em;
    height: 2em; 
    animation-name: glitch-7;
    animation-duration: 7000ms; 
    animation-delay: 0s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -5em;
    --glitch-hue-1: 35deg;
    --glitch-x-2: 9em;
    --glitch-hue-2: 35deg;
    background-position: 0 -23em;
    height: 2em; 
    animation-name: glitch-6;
    animation-duration: 6000ms; 
    animation-delay: 0s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: 10em;
    --glitch-hue-1: 39deg;
    --glitch-x-2: -8em;
    --glitch-hue-2: 24deg;
    background-position: 0 -25em;
    height: 6em; 
    animation-name: glitch-7;
    animation-duration: 7000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -6em;
    --glitch-hue-1: -46deg;
    --glitch-x-2: -3em;
    --glitch-hue-2: 18deg;
    background-position: 0 -31em;
    height: 6em; 
    animation-name: glitch-10;
    animation-duration: 10000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -8em;
    --glitch-hue-1: -37deg;
    --glitch-x-2: -6em;
    --glitch-hue-2: 15deg;
    background-position: 0 -37em;
    height: 1em; 
    animation-name: glitch-9;
    animation-duration: 9000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -1em;
    --glitch-hue-1: 16deg;
    --glitch-x-2: 2em;
    --glitch-hue-2: 25deg;
    background-position: 0 -38em;
    height: 2em; 
    animation-name: glitch-5;
    animation-duration: 5000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: 5em;
    --glitch-hue-1: 32deg;
    --glitch-x-2: 10em;
    --glitch-hue-2: -3deg;
    background-position: 0 -40em;
    height: 2em; 
    animation-name: glitch-9;
    animation-duration: 9000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: 10em;
    --glitch-hue-1: -26deg;
    --glitch-x-2: 6em;
    --glitch-hue-2: -45deg;
    background-position: 0 -42em;
    height: 4em; 
    animation-name: glitch-6;
    animation-duration: 6000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -7em;
    --glitch-hue-1: -45deg;
    --glitch-x-2: -8em;
    --glitch-hue-2: 45deg;
    background-position: 0 -46em;
    height: 3em; 
    animation-name: glitch-5;
    animation-duration: 5000ms; 
    animation-delay: 2s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: 4em;
    --glitch-hue-1: 40deg;
    --glitch-x-2: -8em;
    --glitch-hue-2: 29deg;
    background-position: 0 -49em;
    height: 3em; 
    animation-name: glitch-6;
    animation-duration: 6000ms; 
    animation-delay: 1s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: -4em;
    --glitch-hue-1: 26deg;
    --glitch-x-2: -6em;
    --glitch-hue-2: -3deg;
    background-position: 0 -52em;
    height: 6em; 
    animation-name: glitch-10;
    animation-duration: 10000ms; 
    animation-delay: 0s;
  "></div>
  <div class="strip" style="
    --glitch-x-1: 6em;
    --glitch-hue-1: 43deg;
    --glitch-x-2: -1em;
    --glitch-hue-2: -1deg;
    background-position: 0 -58em;
    height: 4em; 
    animation-name: glitch-8;
    animation-duration: 8000ms; 
    animation-delay: 0s;
  "></div>
 </div>
 <p>
  dangrubb.net/blog
 </p>
 <p>
  <a href="../index.html"><-- back to home</a>
 </p>
 <div id="blogsContainer" class="blogs-container">
  <p style="color: #9d9aa4;">Loading blog posts...</p>
 </div>
 <!-- partial -->
  <script src="./script.js"></script>
 </body>
 </html>
--- a/blog/posts.json
+++ b/blog/posts.json
@ -0,0 +1,11 @@
 [
  {
    "id": "01",
    "title": "Status",
    "date": "2026-02-28",
    "excerpt": "dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.",
    "content": "<p>dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.</p>",
    "image": "/blog/src/img/CannotConnect.JPEG",
    "slug": "status"
  }
 ]
--- a/blog/script.js
+++ b/blog/script.js
@ -0,0 +1,53 @@
 "use strict";
 // Load and display blog posts from JSON
 async function loadBlogPosts() {
  try {
    const response = await fetch('./posts.json');
    const posts = await response.json();
    const blogsContainer = document.getElementById('blogsContainer');
    if (posts.length === 0) {
      blogsContainer.innerHTML = '<div class="no-posts"><p>No blog posts yet.</p></div>';
      return;
    }
    // Create HTML for each post
    const postsHTML = posts.map(post => `
      <article class="blog-post" id="${post.slug}">
        <h2 class="blog-post-title">${post.title}</h2>
        <div class="blog-post-date">${new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
        <div class="blog-post-content">
          ${post.content}
        </div>
        <div class="blog-post-image">
          <img src="${post.image}" alt="${post.title}" />
        </div>
      </article>
    `).join('');
    blogsContainer.innerHTML = postsHTML;
  } catch (error) {
    console.error('Error loading blog posts:', error);
    document.getElementById('blogsContainer').innerHTML = '<div class="error"><p>Error loading blog posts.</p></div>';
  }
 }
 // Load blog posts when page is ready
 if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', loadBlogPosts);
 } else {
  loadBlogPosts();
 }
 // Handle hash-based navigation to specific posts
 window.addEventListener('hashchange', () => {
  const postId = window.location.hash.slice(1);
  if (postId) {
    const element = document.getElementById(postId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
 });
--- a/blog/src/img/CannotConnect.JPEG
+++ b/blog/src/img/CannotConnect.JPEG
--- a/blog/style.css
+++ b/blog/style.css
--- a/cv/assets/pdf/DanGrubbResume.pdf
+++ b/cv/assets/pdf/DanGrubbResume.pdf
--- a/cv/index.html
+++ b/cv/index.html
@ -201,14 +201,36 @@
            </div>
          </section>
        </div>
        <div class="resume__right">
          <!--========== EXPERIENCE ==========-->
          <section class="experience section" id="experience">
            <h2 class="section-title">Experience</h2>
            <div class="experience__container bd-grid">
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
                  <span class="experience__company"
                    >2025 to Present | Blue Tech Innovation</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
                      <li>• Offer end-user support for both office-based and remote employees.</li>
                      <li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
                      <li>• Troubleshoot and resolve issues with the following technologies:</li>
                      <li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
                      <li>• Firewalls, Printer Servers, Office 365</li>
                      <li>• Mac systems, workstation and network connectivity issues</li>
                      <li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
                  </ul>       
                 </p>
                </div>
                </div>
                <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
@ -216,8 +238,7 @@
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Technical Account Manager</h3>
                  <span class="experience__company"
-                    >2023 to Present | ITG</span
+                    >2023 to 2025 | ITG</span>
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
@ -232,49 +253,26 @@
                 </p>
                </div>
              </div>
-              <div class="experience__content">
+            <div class="experience__content">
-                <div class="experience__time">
+                    <div class="experience__time">
-                  <span class="experience__rounder"></span>
+                        <span class="experience__rounder"></span>
-                  <span class="experience__line"></span>
+                        <span class="experience__line__last"></span>
                    </div>
                    <div class="experience__data bd-grid">
                        <h3 class="experience__title">Field Technician</h3>
                        <span class="experience__company">2023 | Dell</span>
                        <p class="experience__description">
                            <ul class="experience__description">
                                <li>• Managed a workload of repairs in a ticketing system.</li>
                                <li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
                                <li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
                                <li>• Maintained positive professional relations with Dell’s corporate, government, and consumer clients.</li>
                                <li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
                            </ul>
                        </p>
                    </div>
                </div>
-                <div class="experience__data bd-grid">
+                
                  <h3 class="experience__title">Field Technician</h3>
                  <span class="experience__company"
                    >2023 | Dell</span
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Managed a workload of repairs in a ticketing system.</li>
                      <li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
                      <li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
                      <li>• Maintained positive professional relations with Dell’s corporate, government, and consumer clients.</li>
                      <li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
                  </ul>    
                  </p>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <!-- <span class="experience__line"></span> -->
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">
                    Lead Repair Technician
                  </h3>
                  <span class="experience__company"
                    >2021 to 2022 | T-Mobile</span
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Diagnosed and repaired cellphones, tablets, laptops, and other mobile devices.</li>
                      <li>• Efficiently diagnosed issues with customers' devices and performed all necessary repairs.</li>
                      <li>• Handled inventory and parts returns while ensuring systems were up to date.</li>
                      <li>• Exceeded SLA expectations completing 90% of repairs in under 90 minutes.</li>
                  </ul>     
                  </p>
                </div>
              </div>
              <a href="moreInformation.html" class="more__information">
                <i class="bx bx-info-circle information__icon"></i>
                More Information
@ -284,7 +282,7 @@
          <!--========== CERTIFICATES ==========-->
          <section class="certificate section" id="certificates">
-            <h2 class="section-title">Certificates</h2>
+            <h2 class="section-title">Certifications</h2>
            <div class="certificate__container bd-grid">
              <div class="certificate__content">
--- a/cv/moreInformation.html
+++ b/cv/moreInformation.html
@ -214,11 +214,37 @@
            <h2 class="section-title">Experience</h2>
            <div class="experience__container bd-grid">
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
                  <span class="experience__company"
                    >2025 to Present | Blue Tech Innovation</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
                      <li>• Offer end-user support for both office-based and remote employees.</li>
                      <li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
                      <li>• Troubleshoot and resolve issues with the following technologies:</li>
                      <li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
                      <li>• Firewalls, Printer Servers, Office 365</li>
                      <li>• Mac systems, workstation and network connectivity issues</li>
                      <li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
                  </ul>       
                 </p>
                </div>
                </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Technical Account Manager</h3>
                  <span class="experience__company"
--- a/cv/styles/index.css
+++ b/cv/styles/index.css
@ -139,6 +139,11 @@ body.scale-cv {
  height: 110%;
  transform: translate(5px, 0);
 }
 .scale-cv .experience__line__last {
  width: 1px;
  height: 100%;
  transform: translate(5px, 0);
 }
 .scale-cv .education__data,
 .scale-cv .experience__data {
  gap: 0.25rem;
@ -410,7 +415,14 @@ img {
 .experience__line {
  display: block;
  width: 2px;
-  height: 110%;
+  height: 109%;
  background-color: var(--text-color-light);
  transform: translate(7px, 0);
 }
 .experience__line__last {
  display: block;
  width: 2px;
  height: 100%;
  background-color: var(--text-color-light);
  transform: translate(7px, 0);
 }
@ -430,6 +442,7 @@ img {
 .education__year {
  font-size: var(--smaller-font-size);
 }
 /*========== SKILLS AND LANGUAGES ==========*/
 .skills__content,
 .languages__content {
--- a/index.html
+++ b/index.html
@ -11,109 +11,6 @@
 </head>
 <body>
 <!-- Add this anywhere in your HTML -->
 <div id="server-control">
    <span id="ascii-switch">[||==] OFF</span>
 </div>
 <style>
 /* Position the control in top right */
 #server-control {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    font-family: 'Courier New', monospace;
    font-size: 16px;
 }
 #ascii-switch {
    cursor: pointer;
    user-select: none;
 }
 /* Color states */
 .state-off {
    color: white;
 }
 .state-on {
    color: #4CAF50;
 }
 .state-unavailable {
    color: #ff6b6b;
    cursor: not-allowed;
    text-decoration: none;
 }
 </style>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
    const asciiSwitch = document.getElementById('ascii-switch');
    let currentState = false; // false = off, true = on
    // Load current state
    fetch('/php/get_state.php')
        .then(response => response.text())
        .then(data => {
            const state = data.trim();
            currentState = (state === '1');
            updateDisplay(currentState);
        })
        .catch(() => {
            // If file doesn't exist or can't be reached, set to unavailable
            updateDisplay('unavailable');
        });
    // Handle clicks
    asciiSwitch.addEventListener('click', function() {
        if (currentState === 'unavailable') return; // Don't allow clicking if unavailable
        const newState = !currentState;
        const stateValue = newState ? '1' : '0';
        // Optimistically update display
        updateDisplay(newState);
        currentState = newState;
        // Send state to server
        fetch('/php/update_state.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'state=' + stateValue
        })
        .then(response => response.text())
        .then(data => {
            console.log('State updated:', stateValue);
        })
        .catch(error => {
            console.error('Error updating state:', error);
            // Revert on error
            currentState = !newState;
            updateDisplay(currentState);
        });
    });
    function updateDisplay(state) {
        asciiSwitch.className = ''; // Clear existing classes
        if (state === 'unavailable') {
            asciiSwitch.textContent = '[????] UNAVAILABLE';
            asciiSwitch.classList.add('state-unavailable');
        } else if (state === true || state === '1') {
            asciiSwitch.textContent = '[==||]⠀ ON';
            asciiSwitch.classList.add('state-on');
        } else {
            asciiSwitch.textContent = '[||==] OFF';
            asciiSwitch.classList.add('state-off');
        }
    }
 });
 </script>
 <!-- partial:index.partial.html -->
 <div class="bard">
  <div class="strip" style="
@ -341,16 +238,33 @@ document.addEventListener('DOMContentLoaded', function() {
 <p>
  dangrubb.net
 </p>
-<p>
+
-  <a target="_parent" href="https://ai.dangrubb.net">ai</a>
+<p class="announcement">
-  <a target="_parent" href="https://ghost.dangrubb.net">blog</a>
+  <a href="https://dangrubb.net/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
-  <a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
+</p>
-  <a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
+
-  <a target="_parent" href="https://dangrubb.net/cv">cv</a>
+<div class="blog-preview-container">
-  <a target="_parent" href="https://pi.dangrubb.net/dangit">git</a></p>
+  <div class="blog-preview" id="latestBlogPreview">
    <p style="color: #9d9aa4;">Loading latest post...</p>
  </div>
 </div>
 <div class="debug">
  <div class="code"></div>
 </div>
 <!-- Navigation Links (now pinned to bottom via CSS) -->
 <nav class="bottom-nav">
  <p>
    <a target="_parent" href="https://ai.dangrubb.net">ai</a>
    <a target="_parent" href="https://dangrubb.net/blog">blog</a>
    <a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
    <a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
    <a target="_parent" href="https://dangrubb.net/cv">cv</a>
    <a target="_parent" href="https://pi.dangrubb.net/dangit">git</a>
  </p>
 </nav>
 <!-- partial -->
  <script  src="./script.js"></script>
--- a/music/Darnea/DGDN/index.html
+++ b/music/Darnea/DGDN/index.html
@ -0,0 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>DGDN - Darnea | dangrubb.net</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../../../style.css">
  <link rel="stylesheet" href="../../music.css">
  <link rel="stylesheet" href="./player.css">
 </head>
 <body>
  <div class="music-container">
    <div class="music-header">
      <h1><a href="/music">Music</a> / <a href="/music/Darnea">Darnea</a> / DGDN</h1>
    </div>
    <div class="album-player">
      <div class="album-header">
        <div class="album-artwork">🔥</div>
        <div class="album-info">
          <h2>DGDN</h2>
          <p class="artist-name">Darnea</p>
          <p class="album-desc">Leaked from the vault</p>
        </div>
      </div>
      <div class="player-section">
        <div id="now-playing" class="now-playing">
          <p>Select a track to play</p>
        </div>
        <audio id="audio-player" controls></audio>
      </div>
      <div class="tracklist">
        <h3>Tracklist</h3>
        <ol id="tracks-list"></ol>
      </div>
    </div>
    <div class="music-footer">
      <p><a href="/music/Darnea">← back to artist</a></p>
    </div>
  </div>
  <script src="./player.js"></script>
 </body>
 </html>
--- a/music/Darnea/DGDN/player.css
+++ b/music/Darnea/DGDN/player.css
@ -0,0 +1,139 @@
 /* Album Player */
 .album-player {
  margin: 40px 0;
 }
 .album-header {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  padding: 30px;
  background: rgba(107, 225, 233, 0.05);
  border-radius: 8px;
  align-items: center;
 }
 .album-artwork {
  font-size: 5rem;
  min-width: 150px;
  text-align: center;
 }
 .album-info h2 {
  margin: 0 0 5px 0;
  font-size: 2rem;
  color: #9d9aa4;
 }
 .album-info .artist-name {
  margin: 0 0 5px 0;
  color: #6be1e9;
  font-size: 1.1rem;
 }
 .album-info .album-desc {
  margin: 0;
  color: #6be1e9;
  font-size: 0.9rem;
  font-style: italic;
 }
 /* Now Playing */
 .now-playing {
  text-align: center;
  padding: 20px;
  background: rgba(107, 225, 233, 0.1);
  border: 1px solid rgba(107, 225, 233, 0.3);
  border-radius: 6px;
  margin-bottom: 20px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .now-playing p {
  margin: 0;
  color: #9d9aa4;
 }
 .now-playing.playing p {
  color: #6be1e9;
  font-weight: bold;
 }
 /* Audio Player */
 #audio-player {
  width: 100%;
  margin-bottom: 30px;
  accent-color: #6be1e9;
 }
 /* Tracklist */
 .tracklist {
  margin-top: 40px;
 }
 .tracklist h3 {
  margin: 0 0 20px 0;
  font-size: 1.3rem;
  color: #9d9aa4;
 }
 .tracklist ol {
  list-style-position: inside;
  padding: 0;
  margin: 0;
 }
 .tracklist li {
  padding: 12px;
  margin-bottom: 8px;
  background: rgba(157, 154, 164, 0.05);
  border: 1px solid rgba(107, 225, 233, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #9d9aa4;
 }
 .tracklist li:hover {
  background: rgba(107, 225, 233, 0.1);
  border-color: rgba(107, 225, 233, 0.5);
 }
 .tracklist li.active {
  background: rgba(107, 225, 233, 0.2);
  border-color: #6be1e9;
  color: #6be1e9;
  font-weight: bold;
 }
 .track-duration {
  float: right;
  color: #6be1e9;
  font-size: 0.9rem;
 }
 /* Responsive */
@media (max-width: 768px) {
  .album-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  .album-artwork {
    font-size: 3rem;
  }
  .album-info h2 {
    font-size: 1.5rem;
  }
  .tracklist li {
    padding: 10px;
    font-size: 0.9rem;
  }
 }
--- a/music/Darnea/DGDN/player.js
+++ b/music/Darnea/DGDN/player.js
@ -0,0 +1,71 @@
 // Album player for DGDN
 const tracks = [
  { title: "Dan Beat (bonus)", filename: "Dan Beat (bonus).flac" },
  { title: "Neigh V3", filename: "Neigh V3.flac" },
  { title: "On Ice", filename: "On Ice.flac" },
  { title: "Otish", filename: "Otish.flac" },
  { title: "Scan V2", filename: "Scan V2.flac" },
  { title: "balance v2", filename: "balance v2.flac" },
  { title: "eh ee uhn V2", filename: "eh ee uhn V2.flac" },
  { title: "held v3", filename: "held v3.flac" }
 ];
 const audioPlayer = document.getElementById('audio-player');
 const tracksList = document.getElementById('tracks-list');
 const nowPlaying = document.getElementById('now-playing');
 let currentTrackIndex = 0;
 // Build tracklist
 function initTracklist() {
  tracks.forEach((track, index) => {
    const li = document.createElement('li');
    li.textContent = track.title;
    li.dataset.index = index;
    li.addEventListener('click', () => playTrack(index));
    tracksList.appendChild(li);
  });
 }
 // Play track
 function playTrack(index) {
  currentTrackIndex = index;
  const track = tracks[index];
  // Update audio source
  audioPlayer.src = `/src/audio/DGDN/${track.filename}`;
  audioPlayer.play();
  // Update UI
  updateNowPlaying(track.title);
  updateActiveTrack();
 }
 // Update now playing display
 function updateNowPlaying(title) {
  nowPlaying.classList.add('playing');
  nowPlaying.innerHTML = `<p>▶ Now playing: ${title}</p>`;
 }
 // Update active track in list
 function updateActiveTrack() {
  document.querySelectorAll('.tracklist li').forEach((li, i) => {
    li.classList.toggle('active', i === currentTrackIndex);
  });
 }
 // Auto-play next track when current ends
 audioPlayer.addEventListener('ended', () => {
  if (currentTrackIndex < tracks.length - 1) {
    playTrack(currentTrackIndex + 1);
  }
 });
 // Update active track when manually seeking/playing
 audioPlayer.addEventListener('play', () => {
  updateActiveTrack();
 });
 // Initialize
 initTracklist();
--- a/music/Darnea/index.html
+++ b/music/Darnea/index.html
@ -0,0 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Darnea - dangrubb.net</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../../style.css">
  <link rel="stylesheet" href="../music.css">
 </head>
 <body>
  <div class="music-container">
    <div class="music-header">
      <h1><a href="/music">Music</a> / Darnea</h1>
    </div>
    <div class="artist-detail">
      <div class="artist-banner">🎤</div>
      <h2>Darnea</h2>
    </div>
    <div class="albums-grid">
      <div class="album-card">
        <div class="album-cover">🔥</div>
        <h3><a href="/music/Darnea/DGDN">DGDN</a></h3>
        <p class="album-meta">8 tracks</p>
      </div>
    </div>
    <div class="music-footer">
      <p><a href="/music">← back to music</a></p>
    </div>
  </div>
 </body>
 </html>
--- a/music/index.html
+++ b/music/index.html
@ -0,0 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>dangrubb.net Music</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../style.css">
  <link rel="stylesheet" href="./music.css">
 </head>
 <body>
  <div class="music-container">
    <div class="music-header">
      <h1><a href="/">dangrubb</a>.net/music</h1>
    </div>
    <div class="artists-grid">
      <div class="artist-card">
        <div class="artist-cover">🎤</div>
        <h2><a href="/music/Darnea">Darnea</a></h2>
        <p class="artist-meta">1 album</p>
      </div>
    </div>
    <div class="music-footer">
      <p><a href="/">← back home</a></p>
    </div>
  </div>
 </body>
 </html>
--- a/music/music.css
+++ b/music/music.css
@ -0,0 +1,152 @@
 /* Music Platform Styling */
 .music-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
 }
 .music-header {
  text-align: center;
  margin-bottom: 50px;
  border-bottom: 2px solid rgba(107, 225, 233, 0.3);
  padding-bottom: 20px;
 }
 .music-header h1 {
  margin: 0;
  font-size: 2rem;
  color: #9d9aa4;
  font-weight: bold;
 }
 .music-header h1 a {
  color: #6be1e9;
  text-decoration: none;
 }
 .music-header h1 a:hover {
  opacity: 0.8;
 }
 /* Artists Grid */
 .artists-grid,
 .albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin: 40px 0;
 }
 .artist-card,
 .album-card {
  text-align: center;
  padding: 20px;
  background: rgba(157, 154, 164, 0.05);
  border: 1px solid rgba(107, 225, 233, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
 }
 .artist-card:hover,
 .album-card:hover {
  background: rgba(107, 225, 233, 0.1);
  border-color: rgba(107, 225, 233, 0.5);
  transform: translateY(-4px);
 }
 .artist-cover,
 .album-cover {
  font-size: 4rem;
  margin-bottom: 15px;
 }
 .artist-card h2,
 .album-card h3 {
  margin: 10px 0;
  font-size: 1.3rem;
  color: #9d9aa4;
 }
 .artist-card h2 a,
 .album-card h3 a {
  color: #6be1e9;
  text-decoration: none;
 }
 .artist-card h2 a:hover,
 .album-card h3 a:hover {
  opacity: 0.8;
 }
 .artist-meta,
 .album-meta {
  color: #6be1e9;
  font-size: 0.9rem;
  margin: 0;
 }
 /* Artist Detail */
 .artist-detail {
  text-align: center;
  margin: 40px 0;
  padding: 40px 20px;
  background: rgba(107, 225, 233, 0.05);
  border-radius: 8px;
 }
 .artist-banner {
  font-size: 5rem;
  margin-bottom: 20px;
 }
 .artist-detail h2 {
  margin: 0;
  font-size: 2.5rem;
  color: #9d9aa4;
 }
 /* Footer */
 .music-footer {
  text-align: center;
  margin-top: 60px;
  padding-top: 20px;
  border-top: 2px solid rgba(107, 225, 233, 0.3);
 }
 .music-footer p {
  margin: 0;
 }
 .music-footer a {
  color: #6be1e9;
  text-decoration: none;
 }
 .music-footer a:hover {
  opacity: 0.8;
 }
 /* Responsive */
@media (max-width: 768px) {
  .music-container {
    padding: 20px 10px;
  }
  .music-header h1 {
    font-size: 1.5rem;
  }
  .artists-grid,
  .albums-grid {
    grid-template-columns: 1fr;
  }
  .artist-banner {
    font-size: 3rem;
  }
  .artist-detail h2 {
    font-size: 1.8rem;
  }
 }
--- a/php/get_state.php
+++ b/php/get_state.php
@ -1,45 +0,0 @@
 <?php
 header('Content-Type: text/plain');
 // Only allow GET requests
 if ($_SERVER['REQUEST_METHOD'] !== 'GET') {
    http_response_code(405);
    die('Method not allowed');
 }
 $file_path = '../server_state.txt';
 // Check if file exists
 if (!file_exists($file_path)) {
    // Return default state if file doesn't exist
    echo '0';
    exit;
 }
 // Check if file is readable
 if (!is_readable($file_path)) {
    http_response_code(500);
    die('Cannot read state file');
 }
 $state = file_get_contents($file_path);
 // Validate the stored state
 if ($state === false) {
    http_response_code(500);
    die('Failed to read state');
 }
 // Clean the state (remove any whitespace)
 $state = trim($state);
 // Validate what we read from the file
 if (!in_array($state, ['0', '1'], true)) {
    // File was corrupted somehow, reset to default
    file_put_contents($file_path, '0', LOCK_EX);
    echo '0';
    exit;
 }
 echo $state;
 ?>
--- a/php/update_state.php
+++ b/php/update_state.php
@ -1,66 +0,0 @@
 <?php
 // Set proper headers
 header('Content-Type: text/plain');
 // Only allow POST requests
 if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    die('Method not allowed');
 }
 // Strict input validation
 if (!isset($_POST['state'])) {
    http_response_code(400);
    die('Missing state parameter');
 }
 // Only allow exact string matches
 if (!in_array($_POST['state'], ['0', '1'], true)) {
    http_response_code(400);
    die('Invalid state - must be 0 or 1');
 }
 // Additional validation - check if it's exactly one character
 if (strlen($_POST['state']) !== 1) {
    http_response_code(400);
    die('Invalid state length');
 }
 // Validate it's actually a digit
 if (!ctype_digit($_POST['state'])) {
    http_response_code(400);
    die('State must be numeric');
 }
 $state = $_POST['state'];
 // Use a safe file path outside web root
 $file_path = '../server_state.txt';
 // Ensure directory exists and is writable
 if (!is_writable(dirname($file_path))) {
    http_response_code(500);
    die('Server configuration error');
 }
 // Write with file locking to prevent race conditions
 $result = file_put_contents($file_path, $state, LOCK_EX);
 if ($result === false) {
    http_response_code(500);
    die('Failed to write state');
 }
 // Verify the write was successful
 $written_state = file_get_contents($file_path);
 if ($written_state !== $state) {
    http_response_code(500);
    die('State verification failed');
 }
 // Optional: Log the change (helpful for debugging)
 $log_entry = date('Y-m-d H:i:s') . " - State changed to: {$state} - IP: {$_SERVER['REMOTE_ADDR']}\n";
 error_log($log_entry, 3, '../tmp/server_state.log');
 echo 'success';
 ?>
--- a/script.js
+++ b/script.js
@ -127,3 +127,40 @@ uncomment the code below.
 //     <pre>${css.join("\n\n")}</pre>
 //   </div>
 // `;
 // Load latest blog post preview
 async function loadLatestBlogPost() {
  try {
    const response = await fetch('./blog/posts.json');
    const posts = await response.json();
    if (posts.length === 0) {
      document.getElementById('latestBlogPreview').innerHTML = '<p style="color: #9d9aa4;">No blog posts yet.</p>';
      return;
    }
    // Get the latest post (first in the array)
    const latestPost = posts[0];
    // Create the preview HTML
    const previewHTML = `
      <a href="./blog/#${latestPost.slug}" class="blog-preview-title">${latestPost.title}</a>
      <div class="blog-preview-date">${new Date(latestPost.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
      <img src="${latestPost.image}" alt="${latestPost.title}" />
      <p class="blog-preview-excerpt">${latestPost.excerpt}</p>
      <a href="./blog/#${latestPost.slug}" class="blog-preview-link">Read more →</a>
    `;
    document.getElementById('latestBlogPreview').innerHTML = previewHTML;
  } catch (error) {
    console.error('Error loading blog posts:', error);
    document.getElementById('latestBlogPreview').innerHTML = '<p style="color: #9d9aa4;">Error loading blog posts.</p>';
  }
 }
 // Load blog preview when page is ready
 if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', loadLatestBlogPost);
 } else {
  loadLatestBlogPost();
 }
--- a/src/audio/._DGDN
+++ b/src/audio/._DGDN
--- a/src/audio/DGDN/._Dan
+++ b/src/audio/DGDN/._Dan
--- a/src/audio/DGDN/._Dan
+++ b/src/audio/DGDN/._Dan
--- a/src/audio/DGDN/._Neigh
+++ b/src/audio/DGDN/._Neigh
--- a/src/audio/DGDN/._Neigh
+++ b/src/audio/DGDN/._Neigh
--- a/src/audio/DGDN/._On
+++ b/src/audio/DGDN/._On
--- a/src/audio/DGDN/._On
+++ b/src/audio/DGDN/._On
--- a/src/audio/DGDN/._Otish.flac
+++ b/src/audio/DGDN/._Otish.flac
--- a/src/audio/DGDN/._Otish.flac.asd
+++ b/src/audio/DGDN/._Otish.flac.asd
--- a/src/audio/DGDN/._Scan
+++ b/src/audio/DGDN/._Scan
--- a/src/audio/DGDN/._Scan
+++ b/src/audio/DGDN/._Scan
--- a/src/audio/DGDN/._balance
+++ b/src/audio/DGDN/._balance
--- a/src/audio/DGDN/._balance
+++ b/src/audio/DGDN/._balance
--- a/src/audio/DGDN/._eh
+++ b/src/audio/DGDN/._eh
--- a/src/audio/DGDN/._eh
+++ b/src/audio/DGDN/._eh
--- a/src/audio/DGDN/._held
+++ b/src/audio/DGDN/._held
--- a/src/audio/DGDN/._held
+++ b/src/audio/DGDN/._held
--- a/src/audio/DGDN/Dan
+++ b/src/audio/DGDN/Dan
--- a/src/audio/DGDN/Dan
+++ b/src/audio/DGDN/Dan
--- a/src/audio/DGDN/Neigh
+++ b/src/audio/DGDN/Neigh
--- a/src/audio/DGDN/Neigh
+++ b/src/audio/DGDN/Neigh
--- a/src/audio/DGDN/On
+++ b/src/audio/DGDN/On
--- a/src/audio/DGDN/On
+++ b/src/audio/DGDN/On
--- a/src/audio/DGDN/Otish.flac
+++ b/src/audio/DGDN/Otish.flac
--- a/src/audio/DGDN/Otish.flac.asd
+++ b/src/audio/DGDN/Otish.flac.asd
--- a/src/audio/DGDN/Scan
+++ b/src/audio/DGDN/Scan
--- a/src/audio/DGDN/Scan
+++ b/src/audio/DGDN/Scan
--- a/src/audio/DGDN/balance
+++ b/src/audio/DGDN/balance
--- a/src/audio/DGDN/balance
+++ b/src/audio/DGDN/balance
--- a/src/audio/DGDN/eh
+++ b/src/audio/DGDN/eh
--- a/src/audio/DGDN/eh
+++ b/src/audio/DGDN/eh
--- a/src/audio/DGDN/held
+++ b/src/audio/DGDN/held
--- a/src/audio/DGDN/held
+++ b/src/audio/DGDN/held
--- a/style.css
+++ b/style.css
@ -1,18 +1,23 @@
 body {
  background: #0d0a14;
-  padding: 40px 20px;
+  padding: 20px 20px 100px 20px;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color: #9d9aa4;
  position: relative;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
 }
 .bard {
-  margin: 0 auto 40px;
+  margin: 0 auto 30px;
  /* Remove fixed width in pixels */
  width: 100%;
  max-width: 65em; /* Keep the same max size for desktop */
  height: auto;
  aspect-ratio: 1 / 0.95; /* Maintains the proportion of the artwork */
  font-size: 2px;
  flex-shrink: 0;
 }
 /* Adjust media queries for better scaling */
@ -148,7 +153,7 @@ body {
  }
 }
 p {
-  margin: 20px auto 0;
+  margin: 10px auto 0;
  position: relative;
  max-width: 400px;
  text-align: center;
@ -156,6 +161,56 @@ p {
  font-size: 0.875rem;
 }
 .announcement {
  margin: 10px auto 0;
  position: relative;
  max-width: 400px;
  text-align: center;
  line-height: 1.3;
  font-size: 0.875rem;
 }
 .announcement a {
  color: #ffeb3b;
  font-weight: bold;
  text-decoration: none;
 }
 .announcement a:hover,
 .announcement a:focus {
  text-decoration: underline;
  opacity: 0.85;
 }
 .debug {
  margin: 40px auto 0;
  position: relative;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
 }
 .links-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  background: linear-gradient(to top, rgba(13, 10, 20, 0.95), rgba(13, 10, 20, 0.8));
  backdrop-filter: blur(4px);
 }
 .links-bottom a {
  color: #6be1e9;
 }
 a {
  color: #6be1e9;
 }
@ -209,3 +264,119 @@ a:focus-visible {
 .column + .column {
  color: #aa95bd;
 }
 /* Make body use flexbox to push nav to bottom */
 body {
  background: #0d0a14;
  padding: 40px 20px;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color: #9d9aa4;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden; /* Prevents scrollbar */
 }
 /* Color the announcement link yellow */
 .announcement {
  margin: 20px auto 0;
 }
 .announcement a {
  color: #ffff00;
  font-weight: bold;
  text-decoration: none;
 }
 .announcement a:hover {
  text-decoration: underline;
 }
 /* Blog Preview Box */
 .blog-preview-container {
  margin: 30px auto 0;
  max-width: 33%;
  width: 100%;
  display: flex;
  justify-content: center;
 }
 .blog-preview {
  border: 1px solid rgba(155, 169, 180, 0.3);
  border-radius: 4px;
  padding: 15px;
  background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 .blog-preview img {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 10px;
 }
 .blog-preview-title {
  color: #ffff00;
  font-weight: bold;
  font-size: 0.95rem;
  margin: 10px 0 5px;
  text-decoration: none;
  display: block;
 }
 .blog-preview-title:hover {
  text-decoration: underline;
 }
 .blog-preview-date {
  color: #aa95bd;
  font-size: 0.8rem;
  margin-bottom: 8px;
 }
 .blog-preview-excerpt {
  color: #9d9aa4;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 8px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }
 .blog-preview-link {
  display: inline-block;
  color: #6be1e9;
  font-size: 0.8rem;
  text-decoration: none;
 }
 .blog-preview-link:hover {
  text-decoration: underline;
 }
 /* Push the navigation to the bottom using flexbox spacer */
 .bottom-nav {
  margin-top: auto;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
 }
 .bottom-nav p {
  margin: 0;
  text-align: center;
 }
 .bottom-nav a {
  margin: 0 10px;
  display: inline-block;
 }
Author	SHA1	Message	Date
dangrubbb	f824e30dc0	Merge pull request 'Blog JSON system' (#1 ) from OpenClaw into main Reviewed-on: #1	2026-02-28 21:57:54 +00:00
dangrubbb	c1ab8e831b	Minor Manual Fixes to Lobster's code	2026-02-28 16:52:01 -05:00
dangrubbb	447265f7ed	Fix: Center blog post content properly - Use flexbox on blog-post container to center all children - Set max-width on post container to constrain width - Ensure content paragraph takes full width and centers text	2026-02-28 16:45:00 -05:00
dangrubbb	e5b6d785ed	Fix: Image path for homepage preview and center blog content - Use absolute path for image (/blog/src/img/...) so homepage preview loads correctly - Center blog post content with max-width for better readability	2026-02-28 16:42:56 -05:00
dangrubbb	73f6c462f8	Make blog page dynamic using JSON data - Blog posts now load from blog/posts.json - Create blog/script.js to dynamically render posts - Each post displays: title, date, content, image - Support hash-based navigation to specific posts - Updated blog/index.html to load posts dynamically - Added styling for blog posts and containers - First post is 'Status' matching the original content	2026-02-28 16:38:42 -05:00
dangrubbb	a965274a31	Add dynamic blog preview to homepage - Create blog/posts.json for managing blog post metadata - Add blog preview box (max 1/3 screen width) to homepage - Fetch latest post dynamically with image and excerpt - Updates automatically when new posts added to JSON - Styled to fit no-scroll homepage layout - Link to full blog page for each post	2026-02-28 16:30:19 -05:00
dangrubbb	7e8727d1b5	Fixing OpenClaw's CSS formatting	2026-02-28 15:22:06 +00:00
dangrubbb	2293a3f566	Fixing OpenClaw's formatting	2026-02-28 15:21:43 +00:00
dangrubbb	a38d756f4b	Add music platform with DGDN album player - Create /music landing page with artist grid - Add /music/Darnea artist page with album listing - Build /music/Darnea/DGDN album player with clickable tracklist - Auto-play next track on completion - Dangrubb-branded styling with cyan accent colors - FLAC player pulls from /src/audio/DGDN - Move landing page links to bottom with yellow announcement box	2026-02-28 15:20:27 +00:00
dangrubbb	025fe8a80b	Updated blog with image	2025-09-25 20:55:52 -04:00
dangrubbb	7b70740e46	Updated blog	2025-09-21 09:01:55 -04:00
dangrubbb	c5a6b90d7e	Changed Blog Location	2025-09-21 08:32:48 -04:00
dangrubbb	b93c70542e	Updated CV for 9/2025	2025-09-21 08:07:58 -04:00