arsxy-theme 1.0.0.pre.rc

data/assets/images/new-features-update.svg

@@ -0,0 +1,58 @@
+<!-- 
+This is an SVG placeholder for the new features update image.
+It would be better to replace this with a real screenshot or custom image.
+-->
+<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .title { fill: #333; font-family: 'Arial', sans-serif; font-size: 60px; font-weight: bold; }
+    .subtitle { fill: #666; font-family: 'Arial', sans-serif; font-size: 36px; }
+    .feature { fill: #444; font-family: 'Arial', sans-serif; font-size: 32px; font-weight: bold; }
+    .icon { stroke: #0066cc; stroke-width: 3; fill: none; }
+    .bg-rect { fill: #f8f9fa; stroke: #ddd; stroke-width: 2; }
+  </style>
+  
+  <rect width="100%" height="100%" fill="#ffffff"/>
+  
+  <!-- Header background -->
+  <rect width="100%" height="150" fill="#0066cc"/>
+  
+  <!-- Title -->
+  <text x="50" y="100" class="title" fill="#ffffff">Arsxy Theme - New Features</text>
+  
+  <!-- Feature sections -->
+  <rect x="50" y="200" width="340" height="380" rx="10" class="bg-rect"/>
+  <rect x="430" y="200" width="340" height="380" rx="10" class="bg-rect"/>
+  <rect x="810" y="200" width="340" height="380" rx="10" class="bg-rect"/>
+  
+  <!-- Feature titles -->
+  <text x="170" y="250" text-anchor="middle" class="feature">Related Posts</text>
+  <text x="600" y="250" text-anchor="middle" class="feature">Social Sharing</text>
+  <text x="980" y="250" text-anchor="middle" class="feature">Search</text>
+  
+  <!-- Feature icons -->
+  <!-- Related posts icon -->
+  <g transform="translate(170, 320)">
+    <rect x="-60" y="-35" width="120" height="70" rx="5" class="icon"/>
+    <rect x="-60" y="50" width="120" height="70" rx="5" class="icon"/>
+    <rect x="-60" y="135" width="120" height="70" rx="5" class="icon"/>
+    <line x1="-40" y1="0" x2="40" y2="0" class="icon"/>
+    <line x1="-40" y1="85" x2="40" y2="85" class="icon"/>
+    <line x1="-40" y1="170" x2="40" y2="170" class="icon"/>
+  </g>
+  
+  <!-- Social sharing icon -->
+  <g transform="translate(600, 320)">
+    <circle cx="0" cy="0" r="50" class="icon"/>
+    <path d="M -25,15 L 0,-15 L 25,15" class="icon"/>
+    <path d="M 0,-15 L 0,50" class="icon"/>
+  </g>
+  
+  <!-- Search icon -->
+  <g transform="translate(980, 320)">
+    <circle cx="-15" cy="-15" r="40" class="icon"/>
+    <line x1="15" y1="15" x2="45" y2="45" stroke-width="6" class="icon"/>
+  </g>
+  
+  <!-- Bottom tagline -->
+  <text x="600" y="600" text-anchor="middle" class="subtitle">Enhancing user experience and content discovery</text>
+</svg>

data/assets/images/related-posts-example.svg

@@ -0,0 +1,37 @@
+<!-- 
+This is an SVG placeholder showing related posts example.
+In a production environment, replace with actual screenshots.
+-->
+<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .title { fill: #333; font-family: 'Arial', sans-serif; font-size: 24px; font-weight: bold; }
+    .post-title { fill: #0066cc; font-family: 'Arial', sans-serif; font-size: 14px; font-weight: bold; }
+    .date { fill: #666; font-family: 'Arial', sans-serif; font-size: 12px; }
+    .post-card { fill: #ffffff; stroke: #ddd; stroke-width: 1; }
+    .post-img { fill: #f0f0f0; stroke: #ddd; stroke-width: 1; }
+    .section-title { fill: #333; font-family: 'Arial', sans-serif; font-size: 28px; font-weight: bold; }
+  </style>
+  
+  <rect width="100%" height="100%" fill="#f9f9f9"/>
+  
+  <!-- Section Title -->
+  <text x="30" y="50" class="section-title">Related Articles</text>
+  
+  <!-- Post 1 -->
+  <rect x="30" y="80" width="230" height="280" rx="5" class="post-card"/>
+  <rect x="45" y="100" width="200" height="120" rx="3" class="post-img"/>
+  <text x="45" y="250" class="post-title">Customizing Your Theme</text>
+  <text x="45" y="270" class="date">May 13, 2025</text>
+  
+  <!-- Post 2 -->
+  <rect x="285" y="80" width="230" height="280" rx="5" class="post-card"/>
+  <rect x="300" y="100" width="200" height="120" rx="3" class="post-img"/>
+  <text x="300" y="250" class="post-title">Dark Mode Implementation</text>
+  <text x="300" y="270" class="date">May 14, 2025</text>
+  
+  <!-- Post 3 -->
+  <rect x="540" y="80" width="230" height="280" rx="5" class="post-card"/>
+  <rect x="555" y="100" width="200" height="120" rx="3" class="post-img"/>
+  <text x="555" y="250" class="post-title">SEO Optimization Tips</text>
+  <text x="555" y="270" class="date">May 13, 2025</text>
+</svg>

data/assets/js/main.js

@@ -0,0 +1,369 @@
+/**
+ * Main JavaScript file for the Arsxy Theme
+ */
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize dark mode
+  initDarkMode();
+  
+  // Initialize table of contents
+  initTableOfContents();
+  
+  // Initialize code copy buttons
+  initCodeCopy();
+  
+  // Initialize mobile navigation
+  initMobileNav();
+});
+
+/**
+ * Dark Mode Functionality
+ */
+function initDarkMode() {
+  const themeToggle = document.querySelector('.theme-toggle');
+  if (!themeToggle) return;
+  
+  // Get configuration from data attributes
+  const html = document.documentElement;
+  const darkModeEnabled = html.getAttribute('data-dark-mode-enabled') === 'true';
+  
+  // If dark mode is completely disabled, ensure light mode is always applied
+  if (!darkModeEnabled) {
+    html.classList.remove('dark-mode');
+    localStorage.setItem('theme', 'light');
+    showLightModeIcon(themeToggle);
+  } else {
+    // Add dark-active class to the toggle button if currently in dark mode
+    if (html.classList.contains('dark-mode')) {
+      themeToggle.classList.add('dark-active');
+      showDarkModeIcon(themeToggle);
+    } else {
+      themeToggle.classList.remove('dark-active');
+      showLightModeIcon(themeToggle);
+    }
+  }
+  
+  themeToggle.addEventListener('click', function() {
+    // If dark mode is completely disabled, don't allow toggling to dark mode
+    if (!darkModeEnabled) {
+      html.classList.remove('dark-mode');
+      localStorage.setItem('theme', 'light');
+      showLightModeIcon(themeToggle);
+      return;
+    }
+    
+    if (html.classList.contains('dark-mode')) {
+      html.classList.remove('dark-mode');
+      themeToggle.classList.remove('dark-active');
+      localStorage.setItem('theme', 'light');
+      showLightModeIcon(themeToggle);
+    } else {
+      html.classList.add('dark-mode');
+      themeToggle.classList.add('dark-active');
+      localStorage.setItem('theme', 'dark');
+      showDarkModeIcon(themeToggle);
+    }
+  });
+  
+  // Helper functions to toggle icons
+  function showDarkModeIcon(toggle) {
+    const sunIcon = toggle.querySelector('.sun');
+    const moonIcon = toggle.querySelector('.moon');
+    if (sunIcon) sunIcon.style.display = 'block';
+    if (moonIcon) moonIcon.style.display = 'none';
+  }
+  
+  function showLightModeIcon(toggle) {
+    const sunIcon = toggle.querySelector('.sun');
+    const moonIcon = toggle.querySelector('.moon');
+    if (sunIcon) sunIcon.style.display = 'none';
+    if (moonIcon) moonIcon.style.display = 'block';
+  }
+}
+
+/**
+ * Table of Contents Functionality
+ */
+function initTableOfContents() {
+  // Handle static TOC for mobile
+  const staticTocContainer = document.querySelector('.table-of-contents');
+  if (staticTocContainer) {
+    // Make TOC collapsible on mobile
+    if (window.innerWidth < 600) { // $on-palm value
+      const tocHeading = staticTocContainer.querySelector('h2');
+      const tocContent = document.createElement('div');
+      tocContent.className = 'toc-content';
+      
+      // Move all elements after the heading into the content div
+      let nextSibling = tocHeading.nextElementSibling;
+      while (nextSibling) {
+        const currentSibling = nextSibling;
+        nextSibling = nextSibling.nextElementSibling;
+        tocContent.appendChild(currentSibling);
+      }
+      
+      staticTocContainer.appendChild(tocContent);
+      
+      // Add click event to toggle
+      tocHeading.addEventListener('click', function() {
+        tocHeading.classList.toggle('active');
+        tocContent.classList.toggle('expanded');
+      });
+    }
+  }
+  
+  // Handle all TOC containers (floating TOC, docs sidebar, and static TOC)
+  const floatingToc = document.querySelector('.floating-toc');
+  const docsSidebar = document.querySelector('.docs-sidebar .docs-nav');
+  const tocContainers = [floatingToc, staticTocContainer, docsSidebar].filter(Boolean);
+  
+  if (tocContainers.length) {
+    // Add scroll spy functionality for all content areas
+    const headings = document.querySelectorAll('.post-content h2, .post-content h3, .post-content h4, .docs-body h2, .docs-body h3, .docs-body h4, .docs-content h2, .docs-content h3, .docs-content h4');
+    
+    // Get all possible TOC links across all containers
+    const tocLinks = document.querySelectorAll('.floating-toc .toc a, .table-of-contents .toc a, .docs-sidebar .docs-nav a');
+    
+    if (headings.length && tocLinks.length) {
+      // Add debug logs
+      console.log(`TOC Initialization: Found ${headings.length} headings and ${tocLinks.length} TOC links`);
+      console.log('TOC Containers:', tocContainers);
+      
+      // Set up Intersection Observer for headings
+      const headingsObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          // Store entry information in a data attribute for later use
+          if (entry.isIntersecting) {
+            entry.target.dataset.visible = true;
+          } else {
+            delete entry.target.dataset.visible;
+          }
+          
+          // Find the heading that's currently most visible
+          const visibleHeadings = Array.from(headings).filter(h => h.dataset.visible);
+          
+          if (visibleHeadings.length > 0) {
+            // Sort visible headings by their position from the top
+            const sortedHeadings = visibleHeadings.sort((a, b) => {
+              return a.getBoundingClientRect().top - b.getBoundingClientRect().top;
+            });
+            
+            // Use the first visible heading (closest to the top)
+            const activeHeading = sortedHeadings[0];
+            if (activeHeading && activeHeading.id) {
+              updateActiveTocLink(activeHeading.id);
+            }
+          }
+        });
+      }, {
+        rootMargin: '-100px 0px -80% 0px', // Adjust based on when you want to trigger the change
+        threshold: 0
+      });
+      
+      // Observe all headings
+      headings.forEach(heading => {
+        if (heading.id) {
+          headingsObserver.observe(heading);
+        } else {
+          console.warn('Found heading without ID:', heading.textContent.trim());
+        }
+      });
+      
+      // Add click event to smooth scroll to sections
+      tocLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+          const href = this.getAttribute('href');
+          
+          // Only handle links that refer to page anchors
+          if (href && href.startsWith('#')) {
+            e.preventDefault();
+            
+            const targetId = href.substring(1);
+            const targetElement = document.getElementById(targetId);
+            
+            if (targetElement) {
+              // Calculate proper scroll position with offset
+              const headerOffset = 100; // Adjust this value based on your header height and desired spacing
+              const elementPosition = targetElement.getBoundingClientRect().top;
+              const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+              
+              // Smooth scroll to target with proper offset
+              window.scrollTo({
+                top: offsetPosition - 50,
+                behavior: 'smooth'
+              });
+              
+              // Update URL hash without jumping
+              history.pushState(null, null, `#${targetId}`);
+              
+              // Update active TOC link
+              updateActiveTocLink(targetId);
+            }
+          }
+        });
+      });
+    }
+  }
+  
+  // Function to update active TOC link and auto-scroll the TOC
+  function updateActiveTocLink(id) {
+    // Process all TOC containers
+    tocContainers.forEach(container => {
+      if (!container) return;
+      
+      let activeLink;
+      
+      // Handle docs sidebar differently from other TOCs
+      if (container.classList.contains('docs-nav')) {
+        // For docs sidebar, we need to handle the specific structure
+        const allLinks = container.querySelectorAll('.docs-nav-list a');
+        
+        // Remove active class from all links in this container
+        allLinks.forEach(link => {
+          link.classList.remove('active');
+        });
+        
+        // Find the matching link in the docs sidebar
+        // First, try direct href match
+        activeLink = container.querySelector(`a[href="${window.location.pathname}#${id}"], a[href="#${id}"]`);
+        
+        // If no direct match, try partial match based on section name
+        if (!activeLink) {
+          // Sometimes the ID might be a transformed version of the text
+          const idParts = id.split('-');
+          for (const link of allLinks) {
+            const linkText = link.textContent.trim().toLowerCase();
+            // Check if the link text contains parts of the ID
+            if (idParts.some(part => linkText.includes(part.toLowerCase()))) {
+              activeLink = link;
+              break;
+            }
+          }
+        }
+      } else {
+        // Standard TOC (floating or static)
+        const allLinks = container.querySelectorAll('.toc a');
+        
+        // Remove active class from all TOC links in this container
+        allLinks.forEach(link => {
+          link.classList.remove('active');
+        });
+        
+        // Find the active link by href
+        activeLink = container.querySelector(`.toc a[href="#${id}"]`);
+      }
+      
+      if (activeLink) {
+        // Add active class to current link
+        activeLink.classList.add('active');
+        console.log('Activated link:', activeLink.textContent, 'in container:', container.className);
+        
+        // Find the scrollable container for this TOC
+        let tocElement;
+        if (container.classList.contains('docs-nav')) {
+          tocElement = container.closest('.docs-sidebar');
+        } else {
+          tocElement = container.closest('.table-of-contents, .floating-toc');
+        }
+        
+        // Auto-scroll the TOC to show the active link
+        if (tocElement && tocElement.scrollHeight > tocElement.clientHeight) {
+          console.log('Autoscrolling container:', tocElement.className);
+          
+          // Calculate the position of the active link relative to the TOC container
+          const activeLinkRect = activeLink.getBoundingClientRect();
+          const tocRect = tocElement.getBoundingClientRect();
+          
+          // Check if the active link is outside the visible area of the TOC
+          const isLinkAbove = activeLinkRect.top < tocRect.top + 40; // Add padding for better visibility
+          const isLinkBelow = activeLinkRect.bottom > tocRect.bottom - 40; // Add padding for better visibility
+          
+          if (isLinkAbove || isLinkBelow) {
+            console.log('Link is outside visible area, scrolling TOC');
+            
+            // Get the scroll position of the link relative to the TOC
+            // This is more reliable than offsetTop in some cases
+            const linkTop = activeLink.getBoundingClientRect().top - tocElement.getBoundingClientRect().top + tocElement.scrollTop;
+            
+            // Calculate a position that centers the active link in the TOC as much as possible
+            const scrollPosition = linkTop - (tocElement.clientHeight / 2) + (activeLink.clientHeight / 2);
+            
+            // Scroll the TOC smoothly to show the active link
+            tocElement.scrollTo({
+              top: Math.max(0, scrollPosition),
+              behavior: 'smooth'
+            });
+          }
+        }
+      }
+    });
+  }
+}
+
+/**
+ * Code Copy Button Functionality
+ */
+function initCodeCopy() {
+  const codeBlocks = document.querySelectorAll('pre');
+  
+  codeBlocks.forEach(block => {
+    // Create copy button
+    const copyButton = document.createElement('button');
+    copyButton.className = 'copy-code-button';
+    copyButton.textContent = 'Copy';
+    
+    // Add button to pre element's parent (usually div.highlight)
+    const container = block.parentNode;
+    container.style.position = 'relative';
+    container.insertBefore(copyButton, container.firstChild);
+    
+    // Add click event
+    copyButton.addEventListener('click', function() {
+      const code = block.textContent;
+      
+      navigator.clipboard.writeText(code).then(() => {
+        // Visual feedback
+        copyButton.textContent = 'Copied!';
+        setTimeout(() => {
+          copyButton.textContent = 'Copy';
+        }, 2000);
+      }).catch(err => {
+        console.error('Could not copy text: ', err);
+        copyButton.textContent = 'Failed';
+        setTimeout(() => {
+          copyButton.textContent = 'Copy';
+        }, 2000);
+      });
+    });
+  });
+}
+
+/**
+ * Mobile Navigation Functionality
+ */
+function initMobileNav() {
+  const navTrigger = document.querySelector('.nav-trigger');
+  if (!navTrigger) return;
+  
+  // Close menu when clicking outside
+  document.addEventListener('click', function(event) {
+    const isNavOpen = navTrigger.checked;
+    const isClickInsideNav = event.target.closest('.site-nav');
+    
+    if (isNavOpen && !isClickInsideNav) {
+      navTrigger.checked = false;
+    }
+  });
+}
+
+/**
+ * Utility: Debounce function for scroll events
+ */
+function debounce(func, wait) {
+  let timeout;
+  return function() {
+    const context = this;
+    const args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}

data/assets/js/search-index.json

@@ -0,0 +1,31 @@
+---
+layout: null
+---
+[
+  {% for post in site.posts %}
+    {
+      "title": {{ post.title | jsonify }},
+      "url": {{ post.url | relative_url | jsonify }},
+      "date": {{ post.date | date: site.date_format | jsonify }},
+      "content": {{ post.content | strip_html | strip_newlines | jsonify }},
+      "excerpt": {{ post.excerpt | strip_html | strip_newlines | truncate: 160 | jsonify }},
+      {% if post.description %}
+      "description": {{ post.description | jsonify }},
+      {% endif %}
+      {% if post.categories %}
+      "categories": {{ post.categories | jsonify }},
+      {% endif %}
+      {% if post.tags %}
+      "tags": {{ post.tags | jsonify }},
+      {% endif %}
+      {% if post.author %}
+      "author": {{ post.author | jsonify }},
+      {% endif %}
+      {% if post.featured_image %}
+      "featured_image": {{ post.featured_image | relative_url | jsonify }}
+      {% else %}
+      "featured_image": ""
+      {% endif %}
+    }{% unless forloop.last %},{% endunless %}
+  {% endfor %}
+]