arsxy-theme 1.0.0.pre.rc

data/assets/js/search.js

@@ -0,0 +1,207 @@
+/**
+ * Search functionality for Arsxy Theme
+ */
+(function() {
+  // DOM Elements
+  const searchInput = document.getElementById('search-input');
+  const searchInputOverlay = document.getElementById('search-input-overlay');
+  const searchResults = document.getElementById('search-results');
+  const searchResultsOverlay = document.getElementById('search-results-overlay');
+  const searchToggleButton = document.getElementById('search-toggle-button');
+  const closeSearchButton = document.getElementById('close-search');
+  const searchOverlay = document.getElementById('search-overlay');
+  
+  // Search state
+  let searchIndex = [];
+  let activeSearchArea = null; // To know which search area is currently active
+  
+  // Get site baseurl from meta tag (added by Jekyll)
+  const baseUrlMeta = document.querySelector('meta[name="baseurl"]');
+  const baseUrl = baseUrlMeta ? baseUrlMeta.getAttribute('content') : '';
+  
+  // Fetch search index with proper baseurl
+  fetch(baseUrl + '/assets/js/search-index.json')
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      searchIndex = data;
+      console.log('Search index loaded successfully:', data.length, 'items');
+    })
+    .catch(error => {
+      console.error('Error loading search index:', error);
+    });
+  
+  // Event listeners for toggle buttons
+  if (searchToggleButton) {
+    searchToggleButton.addEventListener('click', () => {
+      openSearchOverlay();
+    });
+  }
+  
+  if (closeSearchButton) {
+    closeSearchButton.addEventListener('click', () => {
+      closeSearchOverlay();
+    });
+  }
+  
+  // Function to open search overlay
+  function openSearchOverlay() {
+    searchOverlay.classList.add('active');
+    setTimeout(() => {
+      searchInputOverlay.focus();
+    }, 100);
+    activeSearchArea = 'overlay';
+  }
+  
+  // Function to close search overlay
+  function closeSearchOverlay() {
+    searchOverlay.classList.remove('active');
+    searchInputOverlay.value = '';
+    searchResultsOverlay.innerHTML = '';
+    activeSearchArea = null;
+  }
+  
+  // Global keyboard shortcut for search (Ctrl+S / Cmd+S)
+  document.addEventListener('keydown', (e) => {
+    // Check for Ctrl+S or Cmd+S (Mac)
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+      // Prevent default browser save dialog
+      e.preventDefault();
+      
+      // Open search overlay if it exists
+      if (searchOverlay) {
+        openSearchOverlay();
+      }
+    }
+    
+    // Close overlay with Escape key
+    if (e.key === 'Escape' && searchOverlay && searchOverlay.classList.contains('active')) {
+      closeSearchOverlay();
+    }
+  });
+  
+  // Handle search input
+  function registerSearchHandler(input, resultsContainer) {
+    if (!input) return;
+    
+    input.addEventListener('input', debounce(function() {
+      const query = input.value.trim().toLowerCase();
+      
+      if (query.length < 2) {
+        resultsContainer.innerHTML = '';
+        return;
+      }
+      
+      performSearch(query, resultsContainer);
+    }, 300));
+    
+    input.addEventListener('keydown', function(e) {
+      // If Enter is pressed and we have results
+      if (e.key === 'Enter' && resultsContainer.querySelector('.search-result')) {
+        const firstResult = resultsContainer.querySelector('.search-result a');
+        if (firstResult) {
+          window.location.href = firstResult.getAttribute('href');
+        }
+      }
+    });
+  }
+  
+  // Register the search handlers for both search areas
+  if (searchInput) {
+    registerSearchHandler(searchInput, searchResults);
+  }
+  
+  if (searchInputOverlay) {
+    registerSearchHandler(searchInputOverlay, searchResultsOverlay);
+  }
+  
+  // Perform search
+  function performSearch(query, resultsContainer) {
+    // Clear previous results
+    resultsContainer.innerHTML = '';
+    
+    if (searchIndex.length === 0) {
+      resultsContainer.innerHTML = '<div class="search-message">Search index is loading...</div>';
+      return;
+    }
+    
+    // Filter the search index based on the query
+    const results = searchIndex.filter(item => {
+      const titleMatch = item.title.toLowerCase().includes(query);
+      const contentMatch = item.content.toLowerCase().includes(query);
+      const tagsMatch = item.tags ? item.tags.some(tag => tag.toLowerCase().includes(query)) : false;
+      const categoryMatch = item.categories ? item.categories.some(cat => cat.toLowerCase().includes(query)) : false;
+      
+      return titleMatch || contentMatch || tagsMatch || categoryMatch;
+    });
+    
+    // Display results
+    if (results.length === 0) {
+      resultsContainer.innerHTML = '<div class="search-message">No results found</div>';
+      return;
+    }
+    
+    // Create results HTML
+    const resultsHTML = results.slice(0, 10).map(result => {
+      // Find the position of the query in the content
+      const contentLower = result.content.toLowerCase();
+      const queryPosition = contentLower.indexOf(query);
+      
+      // Create excerpt with context around the match
+      let contextExcerpt = result.excerpt;
+      if (queryPosition !== -1) {
+        const start = Math.max(0, queryPosition - 50);
+        const end = Math.min(result.content.length, queryPosition + query.length + 50);
+        contextExcerpt = '...' + result.content.substring(start, end) + '...';
+      }
+      
+      // Highlight the query in the excerpt
+      const highlightedExcerpt = highlightQuery(contextExcerpt, query);
+      
+      return `
+        <div class="search-result">
+          <a href="${result.url}" class="search-result-link">
+            <h3 class="search-result-title">${highlightQuery(result.title, query)}</h3>
+            <div class="search-result-meta">
+              <span class="search-result-date">${result.date}</span>
+              ${result.categories ? '<span class="search-result-categories">' + result.categories.join(', ') + '</span>' : ''}
+            </div>
+            <div class="search-result-excerpt">${highlightedExcerpt}</div>
+          </a>
+        </div>
+      `;
+    }).join('');
+    
+    resultsContainer.innerHTML = resultsHTML;
+  }
+  
+  // Highlight the query in a text string
+  function highlightQuery(text, query) {
+    if (!text) return '';
+    
+    const regex = new RegExp('(' + escapeRegExp(query) + ')', 'gi');
+    return text.replace(regex, '<mark>$1</mark>');
+  }
+  
+  // Escape special characters for use in a regular expression
+  function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+  
+  // Debounce function to limit how often a function is called
+  function debounce(func, wait) {
+    let timeout;
+    return function() {
+      const context = this;
+      const args = arguments;
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        func.apply(context, args);
+      }, wait);
+    };
+  }
+})();

metadata

@@ -0,0 +1,226 @@
+--- !ruby/object:Gem::Specification
+name: arsxy-theme
+version: !ruby/object:Gem::Version
+  version: 1.0.0.pre.rc
+platform: ruby
+authors:
+- awcodify
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2025-05-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.10.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.10.0
+- !ruby/object:Gem::Dependency
+  name: jekyll-feed
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.12'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.12'
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.6'
+- !ruby/object:Gem::Dependency
+  name: jekyll-sitemap
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
+- !ruby/object:Gem::Dependency
+  name: jekyll-paginate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+- !ruby/object:Gem::Dependency
+  name: jekyll-minifier
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.1.10
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.1.10
+- !ruby/object:Gem::Dependency
+  name: jekyll-responsive-image
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+description: Arsxy Theme is a minimal Jekyll theme optimized for readability, performance,
+  and SEO. It features a clean flat design, responsive layout, and optimized assets
+  for speed.
+email:
+- awcodify@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- _config.yml
+- _includes/footer.html
+- _includes/header.html
+- _includes/image.html
+- _includes/related-posts.html
+- _includes/search.html
+- _includes/social-sharing.html
+- _includes/toc.html
+- _layouts/default.html
+- _layouts/docs.html
+- _layouts/home.html
+- _layouts/post.html
+- _sass/_base.scss
+- _sass/_dark-mode.scss
+- _sass/_layout.scss
+- _sass/_responsive.scss
+- _sass/_syntax-highlighting.scss
+- _sass/_typography.scss
+- _sass/_utilities.scss
+- _sass/_variables.scss
+- _sass/components/_code.scss
+- _sass/components/_docs.scss
+- _sass/components/_footer.scss
+- _sass/components/_header.scss
+- _sass/components/_homepage.scss
+- _sass/components/_image.scss
+- _sass/components/_pagination.scss
+- _sass/components/_post.scss
+- _sass/components/_related-posts.scss
+- _sass/components/_search.scss
+- _sass/components/_social-sharing.scss
+- _sass/components/_toc.scss
+- assets/css/main.scss
+- assets/images/favicon/android-chrome-192x192.png
+- assets/images/favicon/android-chrome-512x512.png
+- assets/images/favicon/apple-touch-icon.png
+- assets/images/favicon/favicon-16x16.png
+- assets/images/favicon/favicon-32x32.png
+- assets/images/favicon/favicon.ico
+- assets/images/favicon/site.webmanifest
+- assets/images/new-features-update.svg
+- assets/images/related-posts-example.svg
+- assets/images/seo-optimization.png
+- assets/images/social-sharing-sample.png
+- assets/images/ss-arsxy-theme.png
+- assets/images/table-of-content-thumbnail.png
+- assets/images/theme-demo-2.jpeg
+- assets/images/theme-demo.jpeg
+- assets/images/welcome-to-arsxy-theme.png
+- assets/js/main.js
+- assets/js/search-index.json
+- assets/js/search.js
+homepage: https://github.com/awcodify/arsxy-theme
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.16
+signing_key:
+specification_version: 4
+summary: A clean, fast and SEO-friendly Jekyll theme with flat design and responsive
+  layout
+test_files: []