Migrating from Ruby-based Bridgetown to Rustyll? This guide will help you transition from Bridgetown’s modern Ruby architecture to Rustyll’s high-performance Rust-powered framework while preserving your content and components.

Installation

First, install Rustyll using Cargo (Rust’s package manager):

# Install Rust if you haven't already
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Install Rustyll
cargo install rustyll

Automatic Migration

Rustyll provides a built-in migration tool for Bridgetown sites:

rustyll migrate --from bridgetown --source ./my-bridgetown-site --destination ./my-rustyll-site

This command will:

1. Copy all content files
2. Convert Bridgetown’s front matter to Rustyll format
3. Transform Bridgetown’s Liquid/ERB templates to Rustyll’s Liquid templates
4. Adjust configuration settings
5. Generate a migration report

Directory Structure Differences

Bridgetown	Rustyll	Notes
src/	Root directory	Content files move to root folder in Rustyll
src/_posts/	_posts/	Blog posts
src/_pages/	Root directory	Static pages
src/_layouts/	_layouts/	Layout templates
src/_components/	_includes/	Component templates
src/_data/	_data/	Data files
bridgetown.config.yml	_config.yml	Configuration file
frontend/	assets/	Frontend assets
output/	_site/	Generated site

Content Conversion

Pages

Bridgetown pages convert to Rustyll pages:

# Bridgetown (src/_pages/about.md)
---
layout: page
title: About Us
permalink: /about/
---

This is the about page content.

Converts to:

# Rustyll (about.md)
---
layout: page
title: About Us
permalink: /about/
---

This is the about page content.

Posts

Bridgetown posts convert to Rustyll posts:

# Bridgetown (src/_posts/2023-01-15-hello-world.md)
---
layout: post
title: Hello World
date: 2023-01-15 12:00:00 -0500
categories:
  - announcements
---

This is my first blog post.

Converts to:

# Rustyll (_posts/2023-01-15-hello-world.md)
---
layout: post
title: Hello World
date: 2023-01-15 12:00:00 -0500
categories:
  - announcements
---

This is my first blog post.

Configuration Conversion

Bridgetown’s YAML configuration converts to Rustyll’s format:

# Bridgetown (bridgetown.config.yml)
url: https://example.com
title: My Bridgetown Site
timezone: America/New_York
permalink: pretty
template_engine: liquid

pagination:
  enabled: true
  per_page: 10

collections:
  projects:
    output: true
    permalink: /projects/:slug/

Converts to:

# Rustyll (_config.yml)
url: https://example.com
title: My Bridgetown Site
timezone: America/New_York
permalink: pretty

# Pagination
paginate: 10
paginate_path: "/page:num/"

# Collections
collections:
  projects:
    output: true
    permalink: /projects/:slug/

Template Conversion

Liquid Templates

Bridgetown Liquid templates are compatible with Rustyll with minor changes:

Bridgetown (Liquid)	Rustyll (Liquid)
Page title variable	Same page title variable
Loop through collection resources	Loop through site posts
Render component with parameters	Include partial with parameters
Data access with square brackets	Same data access pattern

Components

Bridgetown components convert to Rustyll includes:

# Bridgetown (src/_components/shared/card.liquid)
<div class="card">
  <h3><!--  --></h3>
  <div class="content">
    <!-- <section class="py-8 md:py-12 relative">
    <!-- Background effects -->
    <div class="absolute -top-40 -right-40 w-80 h-80 bg-rust/5 rounded-full blur-3xl"></div>
    <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-rust/5 rounded-full blur-3xl"></div>
    
    <div class="container mx-auto px-4">
      <!-- Mobile navigation -->
      <div class="lg:hidden">
        

<div class="bg-gray-900/30 rounded-lg border border-gray-800 overflow-hidden mb-6 shadow-md ">
  <details class="group" id="mobile-docs-menu">
    <summary class="flex justify-between items-center cursor-pointer px-4 py-3 bg-black/30 border-b border-gray-800 hover:bg-black/40 transition-colors duration-200">
      <div class="flex items-center">
        <svg class="w-5 h-5 text-rust mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
        </svg>
        <h3 class="text-white font-medium">Migrating from Assemble</h3>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-xs text-gray-400 hidden sm:inline-block">Browse</span>
        <svg class="h-5 w-5 text-rust group-open:rotate-180 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </div>
    </summary>
    
    <div class="border-b border-gray-800">
      <!-- Search input -->
      <div class="p-3 bg-black/10">
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
          <input id="mobile-doc-search" type="search" placeholder="Find in docs..." 
                  class="w-full pl-10 pr-4 py-2 border border-gray-700 bg-black/30 rounded-md text-sm text-white placeholder-gray-500 focus:outline-none focus:border-rust">
        </div>
      </div>
      
      <!-- Navigation tabs -->
      <div class="flex border-b border-gray-800">
        <button type="button" class="flex-1 py-2 px-4 text-white bg-black/30 font-medium text-sm focus:outline-none border-b-2 border-rust" data-tab="contents">
          Contents
        </button>
        <button type="button" class="flex-1 py-2 px-4 text-gray-400 font-medium text-sm focus:outline-none hover:text-white transition-colors" data-tab="sections">
          On This Page
        </button>
      </div>
      
      <!-- Contents tab -->
      <div class="p-3 max-h-72 overflow-y-auto tab-panel" id="tab-contents">
        <div class="block lg:hidden w-full mb-6">
  <select 
    id="doc-nav" 
    onchange="navigateToUrl(this)" 
    aria-label="Select a page from the documentation"
    class="w-full px-3 py-2 bg-black/30 border border-gray-700 rounded-md text-white focus:outline-none focus:border-rust focus:ring-1 focus:ring-rust"
  >
    <option value="">Navigate the docs…</option>
    
      <optgroup label="Getting Started">
          <option value="/docs/">Quickstart</option>
          <option value="/docs/installation/">Installation</option>
          <option value="/docs/rust-101/">Rust 101 for Rustyll Users</option>
          <option value="/docs/community/">Community</option>
          <option value="/docs/step-by-step/01-setup/">Step by Step Tutorial</option>
      </optgroup>
    
      <optgroup label="Build">
          <option value="/docs/usage/">Command Line Usage</option>
          <option value="/docs/configuration/">Configuration</option>
          <option value="/docs/rendering-process/">Rendering Process</option>
      </optgroup>
    
      <optgroup label="Content">
          <option value="/docs/pages/">Pages</option>
          <option value="/docs/posts/">Posts</option>
          <option value="/docs/front-matter/">Front Matter</option>
          <option value="/docs/collections/">Collections</option>
          <option value="/docs/datafiles/">Data Files</option>
          <option value="/docs/assets/">Assets</option>
          <option value="/docs/static-files/">Static Files</option>
      </optgroup>
    
      <optgroup label="Site Structure">
          <option value="/docs/structure/">Directory Structure</option>
          <option value="/docs/liquid/">Liquid</option>
          <option value="/docs/variables/">Variables</option>
          <option value="/docs/includes/">Includes</option>
          <option value="/docs/layouts/">Layouts</option>
          <option value="/docs/permalinks/">Permalinks</option>
          <option value="/docs/themes/">Themes</option>
          <option value="/docs/pagination/">Pagination</option>
      </optgroup>
    
      <optgroup label="Guides">
          <option value="/docs/plugins/">Plugins</option>
          <option value="/docs/migrations/">Blog Migrations</option>
          <option value="/docs/upgrading/">Upgrading</option>
          <option value="/docs/deployment/">Deployment</option>
      </optgroup>
    
      <optgroup label="Migrating">
          <option value="/docs/migrating/">Migrating to Rustyll</option>
          <option value="/docs/migrating/assemble-to-rustyll/">Migrating from Assemble</option>
          <option value="/docs/migrating/bridgetown-to-rustyll/">Migrating from Bridgetown</option>
          <option value="/docs/migrating/cobalt-to-rustyll/">Migrating from Cobalt</option>
          <option value="/docs/migrating/docsy-to-rustyll/">Migrating from Docsy</option>
          <option value="/docs/migrating/eleventy-to-rustyll/">Migrating from Eleventy</option>
          <option value="/docs/migrating/fresh-to-rustyll/">Migrating from Fresh</option>
          <option value="/docs/migrating/gatsby-to-rustyll/">Migrating from Gatsby</option>
          <option value="/docs/migrating/gitbook-to-rustyll/">Migrating from GitBook</option>
          <option value="/docs/migrating/harp-to-rustyll/">Migrating from Harp</option>
          <option value="/docs/migrating/hugo-to-rustyll/">Migrating from Hugo</option>
          <option value="/docs/migrating/jekyll-to-rustyll/">Migrating from Jekyll</option>
          <option value="/docs/migrating/mdbook-to-rustyll/">Migrating from mdBook</option>
          <option value="/docs/migrating/middleman-to-rustyll/">Migrating from Middleman</option>
          <option value="/docs/migrating/mkdocs-to-rustyll/">Migrating from MkDocs</option>
          <option value="/docs/migrating/nanoc-to-rustyll/">Migrating from Nanoc</option>
          <option value="/docs/migrating/pelican-to-rustyll/">Migrating from Pelican</option>
          <option value="/docs/migrating/slate-to-rustyll/">Migrating from Slate</option>
          <option value="/docs/migrating/zola-to-rustyll/">Migrating from Zola</option>
      </optgroup>
    
  </select>
</div>
</div>
      
      <!-- Sections tab (hidden by default) -->
      <div class="p-3 max-h-72 overflow-y-auto hidden tab-panel" id="tab-sections">
        <div id="mobile-toc-container" class="text-sm">
          <div class="text-gray-400">Loading sections...</div>
        </div>
      </div>
    </div>
    
    <!-- Quick links -->
    <div class="p-3 flex flex-wrap gap-2 bg-gray-900/50">
      <a href="/docs/" class="px-3 py-1.5 bg-black/30 rounded-full text-sm text-gray-400 hover:text-rust transition flex items-center border border-gray-700/50 hover:border-rust/30">
        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
        <span>Home</span>
      </a>
      <a href="/docs/quickstart/" class="px-3 py-1.5 bg-black/30 rounded-full text-sm text-gray-400 hover:text-rust transition flex items-center border border-gray-700/50 hover:border-rust/30">
        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
        </svg>
        <span>Quickstart</span>
      </a>
      <a href="/docs/api/" class="px-3 py-1.5 bg-black/30 rounded-full text-sm text-gray-400 hover:text-rust transition flex items-center border border-gray-700/50 hover:border-rust/30">
        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
        </svg>
        <span>API</span>
      </a>
    </div>
  </details>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Tab switching
      const tabButtons = document.querySelectorAll('[data-tab]');
      const tabPanels = document.querySelectorAll('.tab-panel');
      
      tabButtons.forEach(button => {
        button.addEventListener('click', function() {
          const tabId = this.getAttribute('data-tab');
          
          // Update button states
          tabButtons.forEach(btn => {
            btn.classList.remove('text-white', 'bg-black/30', 'border-b-2', 'border-rust');
            btn.classList.add('text-gray-400');
          });
          
          this.classList.add('text-white', 'bg-black/30', 'border-b-2', 'border-rust');
          this.classList.remove('text-gray-400');
          
          // Show/hide panels
          tabPanels.forEach(panel => {
            panel.classList.add('hidden');
          });
          
          document.getElementById(`tab-${tabId}`).classList.remove('hidden');
        });
      });
      
      // Generate mobile TOC
      const mobileTocContainer = document.getElementById('mobile-toc-container');
      const headings = document.querySelectorAll('.prose h2, .prose h3');
      
      if (headings.length === 0) {
        mobileTocContainer.innerHTML = '<div class="text-sm text-gray-500 italic">No sections found</div>';
      } else {
        const toc = document.createElement('ul');
        toc.className = 'space-y-1 text-sm';
        
        headings.forEach((heading, index) => {
          if (!heading.textContent.trim()) return;
          
          // Add ID to heading if it doesn't have one
          if (!heading.id) {
            heading.id = 'heading-mobile-' + index;
          }
          
          const listItem = document.createElement('li');
          const link = document.createElement('a');
          const isH3 = heading.tagName.toLowerCase() === 'h3';
          
          link.href = '#' + heading.id;
          link.textContent = heading.textContent;
          link.className = 'text-gray-400 hover:text-rust block py-1.5 px-2 hover:bg-black/20 rounded transition-colors' +
                          (isH3 ? ' ml-4 text-xs border-l border-gray-700 pl-2' : ' font-medium');
          
          listItem.appendChild(link);
          toc.appendChild(listItem);
          
          // Add click handler for smooth scrolling
          link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Close the mobile menu
            document.getElementById('mobile-docs-menu').removeAttribute('open');
            
            // Scroll to the heading
            document.querySelector(this.getAttribute('href')).scrollIntoView({
              behavior: 'smooth'
            });
          });
        });
        
        mobileTocContainer.innerHTML = '';
        mobileTocContainer.appendChild(toc);
      }
      
      // Filter for mobile search
      const mobileSearchInput = document.getElementById('mobile-doc-search');
      if (mobileSearchInput) {
        mobileSearchInput.addEventListener('input', function() {
          const searchTerm = this.value.toLowerCase();
          
          // Find all navigation links
          const links = document.querySelectorAll('#tab-contents a');
          
          links.forEach(link => {
            const text = link.textContent.toLowerCase();
            const listItem = link.closest('li');
            
            if (text.includes(searchTerm)) {
              listItem.style.display = '';
              // Highlight matching text
              if (searchTerm.length > 0) {
                const regExp = new RegExp(searchTerm, 'gi');
                const newText = link.textContent.replace(regExp, match => `<mark class="bg-rust/20 text-white">${match}</mark>`);
                link.innerHTML = newText;
              }
            } else {
              listItem.style.display = 'none';
            }
          });
        });
      }
    });
  </script>
</div> 
      </div>
      
      <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
        <!-- Sidebar column -->
        <div class="lg:w-1/5 order-1 lg:sticky lg:self-start lg:top-24 lg:max-h-screen">
          

<div class="bg-gray-900/30 rounded-lg border border-gray-800 overflow-hidden h-[calc(100vh-180px)] flex flex-col ">
  <div class="border-b border-gray-800 px-4 py-3 flex items-center bg-black/30">
    <svg class="w-5 h-5 text-rust mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
    </svg>
    <h3 class="text-white font-medium">Documentation</h3>
  </div>
  
  <div class="p-3 overflow-y-auto flex-grow custom-scrollbar">
    <div class="lg:block" id="docs-nav">
      <div class="hidden lg:block">
  <aside class="sticky top-8">
    
      <h4 class="text-lg font-bold text-white mb-2">Getting Started</h4>
      <ul class="space-y-1 mb-6">
          <li class=""><a href="/docs/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Quickstart
            </a>
          </li>
        
          <li class=""><a href="/docs/installation/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Installation
            </a>
          </li>
        
          <li class=""><a href="/docs/rust-101/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Rust 101 for Rustyll Users
            </a>
          </li>
        
          <li class=""><a href="/docs/community/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Community
            </a>
          </li>
        
          <li class=""><a href="/docs/step-by-step/01-setup/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Step by Step Tutorial
            </a>
          </li>
        
      </ul>
    
      <h4 class="text-lg font-bold text-white mb-2">Build</h4>
      <ul class="space-y-1 mb-6">
          <li class=""><a href="/docs/usage/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Command Line Usage
            </a>
          </li>
        
          <li class=""><a href="/docs/configuration/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Configuration
            </a>
          </li>
        
          <li class=""><a href="/docs/rendering-process/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Rendering Process
            </a>
          </li>
        
      </ul>
    
      <h4 class="text-lg font-bold text-white mb-2">Content</h4>
      <ul class="space-y-1 mb-6">
          <li class=""><a href="/docs/pages/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Pages
            </a>
          </li>
        
          <li class=""><a href="/docs/posts/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Posts
            </a>
          </li>
        
          <li class=""><a href="/docs/front-matter/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Front Matter
            </a>
          </li>
        
          <li class=""><a href="/docs/collections/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Collections
            </a>
          </li>
        
          <li class=""><a href="/docs/datafiles/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Data Files
            </a>
          </li>
        
          <li class=""><a href="/docs/assets/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Assets
            </a>
          </li>
        
          <li class=""><a href="/docs/static-files/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Static Files
            </a>
          </li>
        
      </ul>
    
      <h4 class="text-lg font-bold text-white mb-2">Site Structure</h4>
      <ul class="space-y-1 mb-6">
          <li class=""><a href="/docs/structure/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Directory Structure
            </a>
          </li>
        
          <li class=""><a href="/docs/liquid/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Liquid
            </a>
          </li>
        
          <li class=""><a href="/docs/variables/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Variables
            </a>
          </li>
        
          <li class=""><a href="/docs/includes/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Includes
            </a>
          </li>
        
          <li class=""><a href="/docs/layouts/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Layouts
            </a>
          </li>
        
          <li class=""><a href="/docs/permalinks/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Permalinks
            </a>
          </li>
        
          <li class=""><a href="/docs/themes/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Themes
            </a>
          </li>
        
          <li class=""><a href="/docs/pagination/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Pagination
            </a>
          </li>
        
      </ul>
    
      <h4 class="text-lg font-bold text-white mb-2">Guides</h4>
      <ul class="space-y-1 mb-6">
          <li class=""><a href="/docs/plugins/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Plugins
            </a>
          </li>
        
          <li class=""><a href="/docs/migrations/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Blog Migrations
            </a>
          </li>
        
          <li class=""><a href="/docs/upgrading/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Upgrading
            </a>
          </li>
        
          <li class=""><a href="/docs/deployment/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Deployment
            </a>
          </li>
        
      </ul>
    
      <h4 class="text-lg font-bold text-white mb-2">Migrating</h4>
      <ul class="space-y-1 mb-6">
          <li class=""><a href="/docs/migrating/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating to Rustyll
            </a>
          </li>
        
          <li class="text-rust font-medium"><a href="/docs/migrating/assemble-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Assemble
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/bridgetown-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Bridgetown
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/cobalt-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Cobalt
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/docsy-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Docsy
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/eleventy-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Eleventy
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/fresh-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Fresh
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/gatsby-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Gatsby
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/gitbook-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from GitBook
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/harp-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Harp
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/hugo-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Hugo
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/jekyll-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Jekyll
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/mdbook-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from mdBook
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/middleman-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Middleman
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/mkdocs-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from MkDocs
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/nanoc-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Nanoc
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/pelican-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Pelican
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/slate-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Slate
            </a>
          </li>
        
          <li class=""><a href="/docs/migrating/zola-to-rustyll/" class="block py-1 text-gray-300 hover:text-rust transition-colors duration-200">
              Migrating from Zola
            </a>
          </li>
        
      </ul>
    </aside>
</div>
</div>
  </div>
  
  <!-- Quick links -->
  <div class="border-t border-gray-800 p-2 bg-black/10 hidden lg:flex flex-wrap gap-2 justify-center">
    <a href="/docs/" 
       class="px-2 py-1 text-xs text-gray-400 hover:text-rust transition flex items-center gap-1 group">
      <svg class="w-3 h-3 text-gray-500 group-hover:text-rust transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
      </svg>
      <span>Home</span>
    </a>
    <a href="/docs/quickstart/" 
       class="px-2 py-1 text-xs text-gray-400 hover:text-rust transition flex items-center gap-1 group">
      <svg class="w-3 h-3 text-gray-500 group-hover:text-rust transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
      </svg>
      <span>Quickstart</span>
    </a>
  </div>
  
  <!-- Search docs -->
  <div class="border-t border-gray-800 p-3 bg-black/20">
    <div class="relative">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <input type="search" 
             placeholder="Search docs..." 
             class="w-full pl-10 pr-3 py-1.5 border border-gray-700 bg-black/30 rounded-md text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-rust focus:border-rust">
    </div>
  </div>
</div>

<style>
  /* Custom scrollbar styles */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(180, 83, 9, 0.3);
    border-radius: 3px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 83, 9, 0.5);
  }
  
  /* Enhanced sidebar navigation styles */
  #docs-nav ul {
    list-style: none;
    padding-left: 0.5rem;
  }
  
  #docs-nav > ul {
    padding-left: 0;
  }
  
  #docs-nav li {
    margin-bottom: 0.25rem;
  }
  
  #docs-nav a {
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: rgb(156 163 175);
    transition: all 0.2s;
  }
  
  #docs-nav a:hover {
    color: white;
    background: rgba(180, 83, 9, 0.1);
  }
  
  #docs-nav a.current {
    color: #fff;
    background: rgba(180, 83, 9, 0.15);
    border-left: 2px solid rgb(180, 83, 9);
    font-weight: 500;
  }
  
  #docs-nav .active > a {
    color: rgb(249, 115, 22);
    font-weight: 500;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Expand the current section
    const currentPage = document.querySelector('.current');
    if (currentPage) {
      // Find parent list items and add active class
      let parent = currentPage.parentElement;
      while (parent && parent.tagName !== 'NAV') {
        if (parent.tagName === 'LI') {
          parent.classList.add('active');
          
          // Expand any collapsed lists
          const ul = parent.querySelector('ul');
          if (ul) {
            ul.style.display = 'block';
          }
        }
        parent = parent.parentElement;
      }
      
      // Scroll to current page in sidebar
      setTimeout(() => {
        const sidebarContainer = document.querySelector('.overflow-y-auto');
        if (sidebarContainer && currentPage) {
          sidebarContainer.scrollTop = currentPage.offsetTop - sidebarContainer.offsetHeight / 3;
        }
      }, 100);
    }
  });
</script> 
        </div>
        
        <!-- Main content column -->
        <div class="lg:w-3/5 order-2">
          

<div class="relative bg-black/10 rounded-xl p-5 md:p-7 border border-gray-800 shadow-lg hover:shadow-rust/5 transition-shadow duration-300 ">
  <div class="absolute -top-10 -right-10 w-40 h-40 bg-rust/5 rounded-full blur-3xl"></div>
  
  <!-- Document meta information -->
  

<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 py-3 mb-2 ">
  <!-- Badge for docs type -->
  <div class="flex items-center gap-2">
    <span class="px-2 py-0.5 bg-rust/10 rounded-full text-rust text-xs border border-rust/30 whitespace-nowrap">
      
        Documentation
      
    </span>
    
    <!-- Reading time estimation -->
    <div class="flex items-center text-xs text-gray-400">
      <svg class="w-3.5 h-3.5 mr-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      
      
        <span>89 min read</span>
      
    </div>
  </div>
  
  <div class="flex items-center gap-4">
    <!-- Last updated date -->
    <div class="flex items-center text-xs text-gray-400">
      <svg class="w-3.5 h-3.5 mr-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
      </svg>
      <span>Updated: May 29, 2025</span>
    </div>
    
    <!-- Improve doc link -->
    <div>
      



<a href="https://github.com/betterwebinit/rustyll/blob/master//opt/buildhome/repo/_docs/migrating/assemble-to-rustyll.md" 
   target="_blank" 
   rel="noopener noreferrer"
   class="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-rust transition-colors duration-200 group px-3 py-1.5 bg-black/20 rounded-md border border-gray-800 hover:border-rust/30 ">
  <svg class="w-4 h-4 transition-transform duration-200 group-hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
  </svg>
  <span>Improve this page</span>
</a> 
    </div>
  </div>
</div> 
  
  <!-- Document title -->
  

<h1 class="text-3xl md:text-4xl font-bold text-white relative group mb-6 pl-4">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-gray-300">
    Migrating from Assemble
  </span>
  <div class="absolute -left-4 top-1/2 -translate-y-1/2 h-8 w-1.5 bg-gradient-to-b from-rust to-rust/50 rounded-r-full"></div>
  <div class="mt-2 w-24 h-1 bg-gradient-to-r from-rust to-transparent rounded-full group-hover:w-32 transition-all duration-300"></div>
</h1> 
  
  <!-- Main content -->
  <article class="prose prose-invert prose-lg max-w-none
    /* Headings */
    prose-headings:text-white prose-headings:font-medium prose-headings:scroll-mt-24
    prose-h1:text-3xl prose-h1:font-bold prose-h1:mb-6 prose-h1:border-b prose-h1:border-gray-800 prose-h1:pb-4
    prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:font-semibold
    prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3 
    prose-h4:text-lg prose-h4:mt-6 prose-h4:mb-2
    
    /* Links */
    prose-a:text-rust prose-a:decoration-rust/30 prose-a:decoration-2 prose-a:underline-offset-2
    hover:prose-a:text-rust-light hover:prose-a:decoration-rust-light/50 hover:prose-a:transition-colors
    
    /* Code blocks */
    prose-pre:bg-black/30 prose-pre:border prose-pre:border-gray-800 prose-pre:rounded-lg 
    prose-pre:my-6 prose-pre:shadow-md prose-pre:p-4 prose-pre:overflow-auto
    
    /* Inline code */
    prose-code:text-rust-light prose-code:bg-black/30 prose-code:px-1.5 prose-code:py-0.5 
    prose-code:rounded prose-code:text-sm prose-code:font-mono
    
    /* Images */
    prose-img:rounded-lg prose-img:border prose-img:border-gray-800 prose-img:shadow-md 
    prose-img:my-8 prose-img:max-w-full prose-img:mx-auto
    
    /* Lists */
    prose-li:marker:text-rust prose-li:my-1 prose-ol:pl-6 prose-ul:pl-6
    prose-li:pl-2
    
    /* Blockquotes */
    prose-blockquote:border-l-4 prose-blockquote:border-rust prose-blockquote:bg-black/20
    prose-blockquote:pl-6 prose-blockquote:py-2 prose-blockquote:pr-4 prose-blockquote:rounded-r-md
    prose-blockquote:text-gray-300 prose-blockquote:not-italic prose-blockquote:my-6
    
    /* Horizontal rules */
    prose-hr:border-gray-800 prose-hr:my-10
    
    /* Strong text */
    prose-strong:text-white prose-strong:font-semibold
    
    /* Tables */
    prose-table:border-collapse prose-table:w-full prose-table:my-8
    prose-table:border prose-table:border-gray-800 prose-table:shadow-sm
    prose-td:border prose-td:border-gray-800 prose-td:p-2 prose-td:align-top
    prose-th:border prose-th:border-gray-800 prose-th:p-3 prose-th:bg-black/30
    prose-th:text-left prose-th:font-medium">
    <p>Migrating from JavaScript-based Assemble to Rustyll? This guide will help you transition from Assemble’s component-based approach to Rustyll’s high-performance static site generation while preserving your content structure.</p>

<h2 id="installation">Installation</h2>

<p>First, install Rustyll using Cargo (Rust’s package manager):</p>

<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Install Rust if you haven't already</span>
curl <span class="nt">--proto</span> <span class="s1">'=https'</span> <span class="nt">--tlsv1</span>.2 <span class="nt">-sSf</span> https://sh.rustup.rs | sh

<span class="c"># Install Rustyll</span>
cargo <span class="nb">install </span>rustyll
</code></pre></div></div>

<h2 id="automatic-migration">Automatic Migration</h2>

<p>Rustyll provides a built-in migration tool for Assemble sites:</p>

<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rustyll migrate <span class="nt">--from</span> assemble <span class="nt">--source</span> ./my-assemble-site <span class="nt">--destination</span> ./my-rustyll-site
</code></pre></div></div>

<p>This command will:</p>
<ol>
  <li>Convert Assemble’s pages and templates to Rustyll format</li>
  <li>Transform Handlebars templates to Liquid templates</li>
  <li>Process YAML front matter</li>
  <li>Adapt Assemble’s data organization to Rustyll’s approach</li>
  <li>Generate a migration report</li>
</ol>

<h2 id="directory-structure-differences">Directory Structure Differences</h2>

<table>
  <thead>
    <tr>
      <th>Assemble</th>
      <th>Rustyll</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">pages/</code></td>
      <td>Root directory</td>
      <td>Content pages</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">templates/</code></td>
      <td><code class="language-plaintext highlighter-rouge">_layouts/</code> and <code class="language-plaintext highlighter-rouge">_includes/</code></td>
      <td>Templates are split by purpose</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">partials/</code></td>
      <td><code class="language-plaintext highlighter-rouge">_includes/</code></td>
      <td>Reusable components</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">data/</code></td>
      <td><code class="language-plaintext highlighter-rouge">_data/</code></td>
      <td>Data files (similar functionality)</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">dist/</code></td>
      <td><code class="language-plaintext highlighter-rouge">_site/</code></td>
      <td>Generated site</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">assets/</code></td>
      <td><code class="language-plaintext highlighter-rouge">assets/</code></td>
      <td>Static assets (same structure)</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">Gruntfile.js</code></td>
      <td><code class="language-plaintext highlighter-rouge">_config.yml</code></td>
      <td>Configuration</td>
    </tr>
  </tbody>
</table>

<h2 id="content-conversion">Content Conversion</h2>

<p>Assemble pages with YAML front matter convert to Rustyll’s format:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Assemble (pages/about.hbs) --&gt;</span>
---
title: About Us
layout: default
---
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"about"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h1&gt;</span>\{\{title\}\}<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>This is the about page.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<p>Converts to:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Rustyll (about.html) --&gt;</span>
---
title: About Us
layout: default
---
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"about"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Migrating from Assemble<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;</span>This is the about page.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h2 id="template-conversion">Template Conversion</h2>

<h3 id="handlebars-to-liquid">Handlebars to Liquid</h3>

<p>Assemble’s Handlebars templates convert to Rustyll’s Liquid templates:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Assemble (templates/layouts/default.hbs) --&gt;</span>
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;title&gt;</span>\{\{title\}\}<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"\{\{assets\}\}/css/style.css"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    \{\{&gt; header\}\}
  <span class="nt">&lt;/header&gt;</span>
  <span class="nt">&lt;main&gt;</span>
    \{\{&gt; body\}\}
  <span class="nt">&lt;/main&gt;</span>
  <span class="nt">&lt;footer&gt;</span>
    \{\{&gt; footer\}\}
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div></div>

<p>Converts to:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Rustyll (_layouts/default.html) --&gt;</span>
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;title&gt;</span><span class="c">&lt;!-- Migrating from Assemble --&gt;</span><span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"&lt;!-- /assets/css/style.css --&gt;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;header&gt;</span>
    <span class="c">&lt;!-- 

&lt;header class="bg-black/95 backdrop-blur-sm border-b border-rust/20 py-2 sm:py-3 md:py-4 sticky top-0 z-50 transition-all duration-300 shadow-md" id="site-header"&gt;
  &lt;div class="container mx-auto px-4 flex flex-wrap items-center justify-between"&gt;
    &lt;div class="flex items-center"&gt;
      &lt;h1 class="mr-4 sm:mr-6"&gt;
        

&lt;a href="/" class="flex items-center "&gt;
  &lt;span class="sr-only"&gt;Rustyll&lt;/span&gt;
  &lt;img src="/img/logo-2x.png" width="120" height="55" alt="Rustyll Logo" 
       class="h-10 w-auto transition-transform duration-300 hover:scale-105"&gt;
  
&lt;/a&gt; 
      &lt;/h1&gt;
    &lt;/div&gt;
    
    &lt;!-- Desktop Navigation --&gt;</span>
    <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"hidden lg:flex items-center"</span><span class="nt">&gt;</span>
      

<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"flex items-center gap-2 "</span><span class="nt">&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  text-muted-foreground hover:bg-accent hover:text-accent-foreground
                "</span>
         <span class="nt">&gt;</span>
        
        
        
        Home
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  bg-primary text-primary-foreground shadow hover:bg-primary/90
                "</span>
         <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>
        
        
        
        Docs
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/resources/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  text-muted-foreground hover:bg-accent hover:text-accent-foreground
                "</span>
         <span class="nt">&gt;</span>
        
        
        
        Resources
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/showcase/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  text-muted-foreground hover:bg-accent hover:text-accent-foreground
                "</span>
         <span class="nt">&gt;</span>
        
        
        
        Showcase
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/news/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  text-muted-foreground hover:bg-accent hover:text-accent-foreground
                "</span>
         <span class="nt">&gt;</span>
        
        
        
        News
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
<span class="nt">&lt;/ul&gt;</span>

<span class="nt">&lt;style&gt;</span>
  <span class="c">/* Add this to your global CSS or keep it here for component-specific styles */</span>
  <span class="nd">:root</span> <span class="p">{</span>
    <span class="py">--accent-rgb</span><span class="p">:</span> <span class="m">234</span><span class="p">,</span> <span class="m">88</span><span class="p">,</span> <span class="m">12</span><span class="p">;</span> <span class="c">/* Adjust to match your accent color (this is for orange) */</span>
  <span class="p">}</span>
  
  <span class="k">@keyframes</span> <span class="n">pulse-border</span> <span class="p">{</span>
    <span class="m">0%</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent-rgb</span><span class="p">),</span> <span class="m">0.7</span><span class="p">);</span> <span class="p">}</span>
    <span class="m">70%</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">6px</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent-rgb</span><span class="p">),</span> <span class="m">0</span><span class="p">);</span> <span class="p">}</span>
    <span class="m">100%</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent-rgb</span><span class="p">),</span> <span class="m">0</span><span class="p">);</span> <span class="p">}</span>
  <span class="p">}</span>
  
  <span class="nc">.animate-pulse-border</span> <span class="p">{</span>
    <span class="nl">animation</span><span class="p">:</span> <span class="n">pulse-border</span> <span class="m">2s</span> <span class="nb">infinite</span><span class="p">;</span>
  <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span> 
    <span class="nt">&lt;/nav&gt;</span>
    
    <span class="c">&lt;!-- Tablet/Desktop Meta Links --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hidden md:flex items-center gap-3 sm:gap-4"</span><span class="nt">&gt;</span>
      <span class="c">&lt;!-- Search --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative"</span><span class="nt">&gt;</span>
        

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative group"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400 group-hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;input</span> 
    <span class="na">type=</span><span class="s">"text"</span> 
    <span class="na">placeholder=</span><span class="s">"Search the docs..."</span>
    <span class="na">aria-label=</span><span class="s">"Search"</span>
    <span class="na">class=</span><span class="s">"block w-full py-2 pl-10 pr-3 bg-black/30 border border-gray-700 rounded-md text-sm text-white placeholder-gray-400 focus:outline-none focus:border-rust focus:ring-1 focus:ring-rust transition-all duration-200 hover:border-gray-500 "</span>
  <span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-y-0 right-3 flex items-center pointer-events-none opacity-0 group-focus-within:opacity-100 transition-opacity duration-200"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;kbd</span> <span class="na">class=</span><span class="s">"hidden sm:inline-flex items-center px-1 py-0.5 text-xs bg-gray-800 border border-gray-700 rounded text-gray-400"</span><span class="nt">&gt;</span>⌘K<span class="nt">&lt;/kbd&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="c">&lt;!-- Meta Links --&gt;</span>
      

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center gap-2 sm:gap-3 md:gap-4 text-sm"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll/releases/tag/v0.1.0"</span> 
     <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-all duration-200 transform hover:scale-105 text-sm group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-rust group-hover:to-white"</span><span class="nt">&gt;</span>v0.1.0<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll"</span> 
     <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-all duration-200 flex items-center gap-1 transform hover:scale-105 group hidden sm:flex md:hidden lg:flex"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-5 h-5 text-gray-400 group-hover:text-rust"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">fill-rule=</span><span class="s">"evenodd"</span> <span class="na">d=</span><span class="s">"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.378.202 2.397.1 2.65.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"</span> <span class="na">clip-rule=</span><span class="s">"evenodd"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-rust group-hover:to-white hidden xl:inline"</span><span class="nt">&gt;</span>GitHub<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">""</span> 
     <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-all duration-200 flex items-center gap-1 transform hover:scale-105 group hidden sm:flex md:hidden lg:flex"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-5 h-5 text-gray-400 group-hover:text-rust"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-rust group-hover:to-white hidden xl:inline"</span><span class="nt">&gt;</span>Discord<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
    <span class="nt">&lt;/div&gt;</span>
    
    <span class="c">&lt;!-- Tablet menu - Visible only on medium screens --&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> 
            <span class="na">class=</span><span class="s">"hidden md:inline-flex lg:hidden items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-rust/20 focus:outline-none transition-colors duration-200"</span> 
            <span class="na">aria-expanded=</span><span class="s">"false"</span> 
            <span class="na">id=</span><span class="s">"tablet-menu-button"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Toggle navigation<span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"h-5 w-5"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M4 6h16M4 12h16M4 18h16"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    
    <span class="c">&lt;!-- Mobile menu button --&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> 
            <span class="na">class=</span><span class="s">"md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-rust/20 focus:outline-none transition-colors duration-200"</span> 
            <span class="na">aria-expanded=</span><span class="s">"false"</span> 
            <span class="na">id=</span><span class="s">"mobile-menu-button"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Open main menu<span class="nt">&lt;/span&gt;</span>
      <span class="c">&lt;!-- Icon when menu is closed --&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"h-6 w-6 menu-closed"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M4 6h16M4 12h16M4 18h16"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
      <span class="c">&lt;!-- Icon when menu is open --&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"h-6 w-6 menu-open hidden"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M6 18L18 6M6 6l12 12"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="c">&lt;!-- Tablet Navigation Dropdown --&gt;</span>
  <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"hidden bg-black/95 backdrop-blur-sm border-t border-rust/10 mt-2 scale-y-95 origin-top transition-all duration-300 opacity-0"</span> <span class="na">id=</span><span class="s">"tablet-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container mx-auto px-4 py-3"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"grid grid-cols-3 gap-4"</span><span class="nt">&gt;</span>
        

<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"flex items-center gap-2 "</span><span class="nt">&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  text-muted-foreground hover:bg-accent hover:text-accent-foreground
                "</span>
         <span class="nt">&gt;</span>
        
        
        
        Home
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  bg-primary text-primary-foreground shadow hover:bg-primary/90
                "</span>
         <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>
        
        
        
        Docs
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/resources/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  text-muted-foreground hover:bg-accent hover:text-accent-foreground
                "</span>
         <span class="nt">&gt;</span>
        
        
        
        Resources
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/showcase/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  text-muted-foreground hover:bg-accent hover:text-accent-foreground
                "</span>
         <span class="nt">&gt;</span>
        
        
        
        Showcase
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
    <span class="nt">&lt;li&gt;</span>
      
      
      
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/news/"</span> 
         <span class="na">class=</span><span class="s">"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2
                
                  text-muted-foreground hover:bg-accent hover:text-accent-foreground
                "</span>
         <span class="nt">&gt;</span>
        
        
        
        News
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/li&gt;</span>
  
<span class="nt">&lt;/ul&gt;</span>

<span class="nt">&lt;style&gt;</span>
  <span class="c">/* Add this to your global CSS or keep it here for component-specific styles */</span>
  <span class="nd">:root</span> <span class="p">{</span>
    <span class="py">--accent-rgb</span><span class="p">:</span> <span class="m">234</span><span class="p">,</span> <span class="m">88</span><span class="p">,</span> <span class="m">12</span><span class="p">;</span> <span class="c">/* Adjust to match your accent color (this is for orange) */</span>
  <span class="p">}</span>
  
  <span class="k">@keyframes</span> <span class="n">pulse-border</span> <span class="p">{</span>
    <span class="m">0%</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent-rgb</span><span class="p">),</span> <span class="m">0.7</span><span class="p">);</span> <span class="p">}</span>
    <span class="m">70%</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">6px</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent-rgb</span><span class="p">),</span> <span class="m">0</span><span class="p">);</span> <span class="p">}</span>
    <span class="m">100%</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent-rgb</span><span class="p">),</span> <span class="m">0</span><span class="p">);</span> <span class="p">}</span>
  <span class="p">}</span>
  
  <span class="nc">.animate-pulse-border</span> <span class="p">{</span>
    <span class="nl">animation</span><span class="p">:</span> <span class="n">pulse-border</span> <span class="m">2s</span> <span class="nb">infinite</span><span class="p">;</span>
  <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span> 
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/nav&gt;</span>
  
  <span class="c">&lt;!-- Mobile Navigation --&gt;</span>
  <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"md:hidden hidden bg-black/95 backdrop-blur-sm border-t border-rust/10 mt-1 scale-y-95 origin-top transition-all duration-300 opacity-0"</span> <span class="na">id=</span><span class="s">"mobile-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container mx-auto px-4 pb-4 pt-2"</span><span class="nt">&gt;</span>
      

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"space-y-1 py-2 "</span><span class="nt">&gt;</span>
  
    
    
    
    



  <span class="nt">&lt;a</span> 
    <span class="na">href=</span><span class="s">"/"</span> 
    <span class="na">class=</span><span class="s">"block px-4 py-2 rounded-md transition-all duration-300 relative overflow-hidden
           
             text-gray-300 hover:text-white before:absolute before:inset-0 before:bg-rust/10 before:scale-0 before:transition-transform before:duration-300 hover:before:scale-100
           
           "</span>
  <span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center relative z-10"</span><span class="nt">&gt;</span>
      
      Home
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
 
  
    
    
    
    



  <span class="nt">&lt;a</span> 
    <span class="na">href=</span><span class="s">"/docs/"</span> 
    <span class="na">class=</span><span class="s">"block px-4 py-2 rounded-md transition-all duration-300 relative overflow-hidden
           
             text-white font-bold before:absolute before:inset-0 before:bg-rust/20 before:scale-100 before:animate-pulse before:animate-duration-[3000ms]
           
           "</span>
  <span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center relative z-10"</span><span class="nt">&gt;</span>
      
      Docs
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
 
  
    
    
    
    



  <span class="nt">&lt;a</span> 
    <span class="na">href=</span><span class="s">"/resources/"</span> 
    <span class="na">class=</span><span class="s">"block px-4 py-2 rounded-md transition-all duration-300 relative overflow-hidden
           
             text-gray-300 hover:text-white before:absolute before:inset-0 before:bg-rust/10 before:scale-0 before:transition-transform before:duration-300 hover:before:scale-100
           
           "</span>
  <span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center relative z-10"</span><span class="nt">&gt;</span>
      
      Resources
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
 
  
    
    
    
    



  <span class="nt">&lt;a</span> 
    <span class="na">href=</span><span class="s">"/showcase/"</span> 
    <span class="na">class=</span><span class="s">"block px-4 py-2 rounded-md transition-all duration-300 relative overflow-hidden
           
             text-gray-300 hover:text-white before:absolute before:inset-0 before:bg-rust/10 before:scale-0 before:transition-transform before:duration-300 hover:before:scale-100
           
           "</span>
  <span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center relative z-10"</span><span class="nt">&gt;</span>
      
      Showcase
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
 
  
    
    
    
    



  <span class="nt">&lt;a</span> 
    <span class="na">href=</span><span class="s">"/news/"</span> 
    <span class="na">class=</span><span class="s">"block px-4 py-2 rounded-md transition-all duration-300 relative overflow-hidden
           
             text-gray-300 hover:text-white before:absolute before:inset-0 before:bg-rust/10 before:scale-0 before:transition-transform before:duration-300 hover:before:scale-100
           
           "</span>
  <span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center relative z-10"</span><span class="nt">&gt;</span>
      
      News
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
 
  
  
  <span class="c">&lt;!-- Mobile search --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"px-3 py-3 border-t border-gray-700/30 mt-2"</span><span class="nt">&gt;</span>
    

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative group"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400 group-hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;input</span> 
    <span class="na">type=</span><span class="s">"text"</span> 
    <span class="na">placeholder=</span><span class="s">"Search docs..."</span>
    <span class="na">aria-label=</span><span class="s">"Search"</span>
    <span class="na">class=</span><span class="s">"block w-full py-2 pl-10 pr-3 bg-black/30 border border-gray-700 rounded-md text-sm text-white placeholder-gray-400 focus:outline-none focus:border-rust focus:ring-1 focus:ring-rust transition-all duration-200 hover:border-gray-500 bg-black/50"</span>
  <span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-y-0 right-3 flex items-center pointer-events-none opacity-0 group-focus-within:opacity-100 transition-opacity duration-200"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;kbd</span> <span class="na">class=</span><span class="s">"hidden sm:inline-flex items-center px-1 py-0.5 text-xs bg-gray-800 border border-gray-700 rounded text-gray-400"</span><span class="nt">&gt;</span>⌘K<span class="nt">&lt;/kbd&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="c">&lt;!-- Mobile meta links --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex flex-wrap gap-2 px-3 py-3 border-t border-gray-700/30"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll/releases/tag/v0.1.0"</span> 
       <span class="na">class=</span><span class="s">"px-3 py-1 bg-black/30 rounded-full text-sm text-gray-400 hover:text-rust transition flex items-center border border-gray-700/50 hover:border-rust/30"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span&gt;</span>v0.1.0<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll"</span> 
       <span class="na">class=</span><span class="s">"px-3 py-1 bg-black/30 rounded-full text-sm text-gray-400 hover:text-rust transition flex items-center border border-gray-700/50 hover:border-rust/30"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4 mr-1"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">fill-rule=</span><span class="s">"evenodd"</span> <span class="na">d=</span><span class="s">"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.378.202 2.397.1 2.65.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"</span> <span class="na">clip-rule=</span><span class="s">"evenodd"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
      <span class="nt">&lt;span&gt;</span>GitHub<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
      
      <span class="c">&lt;!-- Mobile search --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-4 relative"</span><span class="nt">&gt;</span>
        

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative group"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400 group-hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;input</span> 
    <span class="na">type=</span><span class="s">"text"</span> 
    <span class="na">placeholder=</span><span class="s">"Search the docs..."</span>
    <span class="na">aria-label=</span><span class="s">"Search"</span>
    <span class="na">class=</span><span class="s">"block w-full py-2 pl-10 pr-3 bg-black/30 border border-gray-700 rounded-md text-sm text-white placeholder-gray-400 focus:outline-none focus:border-rust focus:ring-1 focus:ring-rust transition-all duration-200 hover:border-gray-500 "</span>
  <span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-y-0 right-3 flex items-center pointer-events-none opacity-0 group-focus-within:opacity-100 transition-opacity duration-200"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;kbd</span> <span class="na">class=</span><span class="s">"hidden sm:inline-flex items-center px-1 py-0.5 text-xs bg-gray-800 border border-gray-700 rounded text-gray-400"</span><span class="nt">&gt;</span>⌘K<span class="nt">&lt;/kbd&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="c">&lt;!-- Mobile meta links --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-4 flex justify-center"</span><span class="nt">&gt;</span>
        

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center gap-2 sm:gap-3 md:gap-4 text-sm flex justify-center space-x-4"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll/releases/tag/v0.1.0"</span> 
     <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-all duration-200 transform hover:scale-105 text-sm group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-rust group-hover:to-white"</span><span class="nt">&gt;</span>v0.1.0<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll"</span> 
     <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-all duration-200 flex items-center gap-1 transform hover:scale-105 group hidden sm:flex md:hidden lg:flex"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-5 h-5 text-gray-400 group-hover:text-rust"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">fill-rule=</span><span class="s">"evenodd"</span> <span class="na">d=</span><span class="s">"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.378.202 2.397.1 2.65.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"</span> <span class="na">clip-rule=</span><span class="s">"evenodd"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-rust group-hover:to-white hidden xl:inline"</span><span class="nt">&gt;</span>GitHub<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">""</span> 
     <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-all duration-200 flex items-center gap-1 transform hover:scale-105 group hidden sm:flex md:hidden lg:flex"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-5 h-5 text-gray-400 group-hover:text-rust"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-rust group-hover:to-white hidden xl:inline"</span><span class="nt">&gt;</span>Discord<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/nav&gt;</span>
  
  <span class="nt">&lt;script&gt;</span>
    <span class="c1">// Enhanced header behavior</span>
    <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">DOMContentLoaded</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">const</span> <span class="nx">header</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">site-header</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">const</span> <span class="nx">mobileMenuBtn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">mobile-menu-button</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">const</span> <span class="nx">mobileMenu</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">mobile-menu</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">const</span> <span class="nx">tabletMenuBtn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">tablet-menu-button</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">const</span> <span class="nx">tabletMenu</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">tablet-menu</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">const</span> <span class="nx">menuClosedIcon</span> <span class="o">=</span> <span class="nx">mobileMenuBtn</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.menu-closed</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">const</span> <span class="nx">menuOpenIcon</span> <span class="o">=</span> <span class="nx">mobileMenuBtn</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.menu-open</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">let</span> <span class="nx">lastScrollTop</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="kd">let</span> <span class="nx">isMobileMenuOpen</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
      <span class="kd">let</span> <span class="nx">isTabletMenuOpen</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
      
      <span class="c1">// Mobile menu toggle</span>
      <span class="nx">mobileMenuBtn</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">isMobileMenuOpen</span> <span class="o">=</span> <span class="o">!</span><span class="nx">isMobileMenuOpen</span><span class="p">;</span>
        
        <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">isMobileMenuOpen</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">scale-y-95</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-0</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-100</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-100</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">menuClosedIcon</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">menuOpenIcon</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
          <span class="c1">// Close tablet menu if open</span>
          <span class="k">if </span><span class="p">(</span><span class="nx">isTabletMenuOpen</span><span class="p">)</span> <span class="p">{</span>
            <span class="nf">toggleTabletMenu</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
          <span class="p">}</span>
          
          <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
          <span class="c1">// Force a reflow to enable the transition</span>
          <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">;</span>
          <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-100</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-100</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-95</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-0</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">menuClosedIcon</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">menuOpenIcon</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">}</span>
      <span class="p">});</span>
      
      <span class="c1">// Tablet menu toggle</span>
      <span class="k">if </span><span class="p">(</span><span class="nx">tabletMenuBtn</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">tabletMenuBtn</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
          <span class="nx">isTabletMenuOpen</span> <span class="o">=</span> <span class="o">!</span><span class="nx">isTabletMenuOpen</span><span class="p">;</span>
          <span class="nf">toggleTabletMenu</span><span class="p">(</span><span class="nx">isTabletMenuOpen</span><span class="p">);</span>
        <span class="p">});</span>
      <span class="p">}</span>
      
      <span class="kd">function</span> <span class="nf">toggleTabletMenu</span><span class="p">(</span><span class="nx">isOpen</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">isTabletMenuOpen</span> <span class="o">=</span> <span class="nx">isOpen</span><span class="p">;</span>
        
        <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">isOpen</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">tabletMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">scale-y-95</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-0</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">tabletMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-100</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-100</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
          <span class="c1">// Close mobile menu if open</span>
          <span class="k">if </span><span class="p">(</span><span class="nx">isMobileMenuOpen</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">isMobileMenuOpen</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
            <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">scale-y-95</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-0</span><span class="dl">'</span><span class="p">);</span>
            <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-100</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-100</span><span class="dl">'</span><span class="p">);</span>
            <span class="nx">menuClosedIcon</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
            <span class="nx">menuOpenIcon</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
          <span class="p">}</span>
          
          <span class="nx">tabletMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
          <span class="c1">// Force a reflow to enable the transition</span>
          <span class="nx">tabletMenu</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">;</span>
          <span class="nx">tabletMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-100</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-100</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">tabletMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-95</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-0</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">}</span>
      <span class="p">}</span>
      
      <span class="c1">// Scroll behavior for header</span>
      <span class="nb">window</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">scroll</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">scrollTop</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">pageYOffset</span> <span class="o">||</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollTop</span><span class="p">;</span>
        
        <span class="k">if </span><span class="p">(</span><span class="nx">scrollTop</span> <span class="o">&gt;</span> <span class="mi">100</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">header</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">py-1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">sm:py-2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">md:py-3</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">bg-black/95</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">header</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">py-2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">sm:py-3</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">md:py-4</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
          <span class="nx">header</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">py-1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">sm:py-2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">md:py-3</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">bg-black/95</span><span class="dl">'</span><span class="p">);</span>
          <span class="nx">header</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">py-2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">sm:py-3</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">md:py-4</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">}</span>
        
        <span class="c1">// Hide header on scroll down, show on scroll up</span>
        <span class="k">if </span><span class="p">(</span><span class="nx">scrollTop</span> <span class="o">&gt;</span> <span class="nx">lastScrollTop</span> <span class="o">&amp;&amp;</span> <span class="nx">scrollTop</span> <span class="o">&gt;</span> <span class="mi">200</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">isMobileMenuOpen</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">isTabletMenuOpen</span><span class="p">)</span> <span class="p">{</span>
          <span class="c1">// Scrolling down</span>
          <span class="nx">header</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">-translate-y-full</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
          <span class="c1">// Scrolling up</span>
          <span class="nx">header</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">-translate-y-full</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">}</span>
        
        <span class="nx">lastScrollTop</span> <span class="o">=</span> <span class="nx">scrollTop</span><span class="p">;</span>
      <span class="p">});</span>
      
      <span class="c1">// Close menus on window resize</span>
      <span class="nb">window</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">resize</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">if </span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span> <span class="o">&gt;=</span> <span class="mi">1024</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">isMobileMenuOpen</span> <span class="o">||</span> <span class="nx">isTabletMenuOpen</span><span class="p">))</span> <span class="p">{</span>
          <span class="c1">// Close mobile menu</span>
          <span class="k">if </span><span class="p">(</span><span class="nx">isMobileMenuOpen</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">isMobileMenuOpen</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
            <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">scale-y-95</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-0</span><span class="dl">'</span><span class="p">);</span>
            <span class="nx">mobileMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-100</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-100</span><span class="dl">'</span><span class="p">);</span>
            <span class="nx">menuClosedIcon</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
            <span class="nx">menuOpenIcon</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
          <span class="p">}</span>
          
          <span class="c1">// Close tablet menu</span>
          <span class="k">if </span><span class="p">(</span><span class="nx">isTabletMenuOpen</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">isTabletMenuOpen</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
            <span class="nx">tabletMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">scale-y-95</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-0</span><span class="dl">'</span><span class="p">);</span>
            <span class="nx">tabletMenu</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">scale-y-100</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">opacity-100</span><span class="dl">'</span><span class="p">);</span>
          <span class="p">}</span>
        <span class="p">}</span>
      <span class="p">});</span>
      
      <span class="c1">// Keyboard shortcut for search</span>
      <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">keydown</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if </span><span class="p">((</span><span class="nx">e</span><span class="p">.</span><span class="nx">metaKey</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">k</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span>
          <span class="c1">// Focus search input</span>
          <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">input[placeholder*="Search"]</span><span class="dl">'</span><span class="p">).</span><span class="nf">focus</span><span class="p">();</span>
        <span class="p">}</span>
      <span class="p">});</span>
    <span class="p">});</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/header&gt;</span> 
 --&gt;
  <span class="nt">&lt;/header&gt;</span>
  <span class="nt">&lt;main&gt;</span>
    <span class="c">&lt;!-- &lt;section class="py-8 md:py-12 relative"&gt;
    &lt;!-- Background effects --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute -top-40 -right-40 w-80 h-80 bg-rust/5 rounded-full blur-3xl"</span><span class="nt">&gt;&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute -bottom-20 -left-20 w-60 h-60 bg-rust/5 rounded-full blur-3xl"</span><span class="nt">&gt;&lt;/div&gt;</span>
    
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container mx-auto px-4"</span><span class="nt">&gt;</span>
      <span class="c">&lt;!-- Mobile navigation --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lg:hidden"</span><span class="nt">&gt;</span>
        

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-gray-900/30 rounded-lg border border-gray-800 overflow-hidden mb-6 shadow-md "</span><span class="nt">&gt;</span>
  <span class="nt">&lt;details</span> <span class="na">class=</span><span class="s">"group"</span> <span class="na">id=</span><span class="s">"mobile-docs-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;summary</span> <span class="na">class=</span><span class="s">"flex justify-between items-center cursor-pointer px-4 py-3 bg-black/30 border-b border-gray-800 hover:bg-black/40 transition-colors duration-200"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-5 h-5 text-rust mr-2"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M4 6h16M4 12h16M4 18h7"</span><span class="nt">&gt;&lt;/path&gt;</span>
        <span class="nt">&lt;/svg&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium"</span><span class="nt">&gt;</span>Markdown 101<span class="nt">&lt;/h3&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center gap-2"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-xs text-gray-400 hidden sm:inline-block"</span><span class="nt">&gt;</span>Browse<span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"h-5 w-5 text-rust group-open:rotate-180 transition-transform duration-300"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M19 9l-7 7-7-7"</span><span class="nt">&gt;&lt;/path&gt;</span>
        <span class="nt">&lt;/svg&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/summary&gt;</span>
    
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"border-b border-gray-800"</span><span class="nt">&gt;</span>
      <span class="c">&lt;!-- Search input --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-3 bg-black/10"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"h-4 w-4 text-gray-500"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"</span><span class="nt">&gt;&lt;/path&gt;</span>
            <span class="nt">&lt;/svg&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"mobile-doc-search"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Find in docs..."</span> 
                  <span class="na">class=</span><span class="s">"w-full pl-10 pr-4 py-2 border border-gray-700 bg-black/30 rounded-md text-sm text-white placeholder-gray-500 focus:outline-none focus:border-rust"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="c">&lt;!-- Navigation tabs --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex border-b border-gray-800"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"flex-1 py-2 px-4 text-white bg-black/30 font-medium text-sm focus:outline-none border-b-2 border-rust"</span> <span class="na">data-tab=</span><span class="s">"contents"</span><span class="nt">&gt;</span>
          Contents
        <span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"flex-1 py-2 px-4 text-gray-400 font-medium text-sm focus:outline-none hover:text-white transition-colors"</span> <span class="na">data-tab=</span><span class="s">"sections"</span><span class="nt">&gt;</span>
          On This Page
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="c">&lt;!-- Contents tab --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-3 max-h-72 overflow-y-auto tab-panel"</span> <span class="na">id=</span><span class="s">"tab-contents"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"block lg:hidden w-full mb-6"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;select</span> 
    <span class="na">id=</span><span class="s">"doc-nav"</span> 
    <span class="na">onchange=</span><span class="s">"navigateToUrl(this)"</span> 
    <span class="na">aria-label=</span><span class="s">"Select a page from the documentation"</span>
    <span class="na">class=</span><span class="s">"w-full px-3 py-2 bg-black/30 border border-gray-700 rounded-md text-white focus:outline-none focus:border-rust focus:ring-1 focus:ring-rust"</span>
  <span class="nt">&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>Navigate the docs…<span class="nt">&lt;/option&gt;</span>
    
      <span class="nt">&lt;optgroup</span> <span class="na">label=</span><span class="s">"Getting Started"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/"</span><span class="nt">&gt;</span>Quickstart<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/installation/"</span><span class="nt">&gt;</span>Installation<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/rust-101/"</span><span class="nt">&gt;</span>Rust 101 for Rustyll Users<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/community/"</span><span class="nt">&gt;</span>Community<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/step-by-step/01-setup/"</span><span class="nt">&gt;</span>Step by Step Tutorial<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;/optgroup&gt;</span>
    
      <span class="nt">&lt;optgroup</span> <span class="na">label=</span><span class="s">"Build"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/usage/"</span><span class="nt">&gt;</span>Command Line Usage<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/configuration/"</span><span class="nt">&gt;</span>Configuration<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/rendering-process/"</span><span class="nt">&gt;</span>Rendering Process<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;/optgroup&gt;</span>
    
      <span class="nt">&lt;optgroup</span> <span class="na">label=</span><span class="s">"Content"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/pages/"</span><span class="nt">&gt;</span>Pages<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/posts/"</span><span class="nt">&gt;</span>Posts<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/front-matter/"</span><span class="nt">&gt;</span>Front Matter<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/collections/"</span><span class="nt">&gt;</span>Collections<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/datafiles/"</span><span class="nt">&gt;</span>Data Files<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/assets/"</span><span class="nt">&gt;</span>Assets<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/static-files/"</span><span class="nt">&gt;</span>Static Files<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;/optgroup&gt;</span>
    
      <span class="nt">&lt;optgroup</span> <span class="na">label=</span><span class="s">"Site Structure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/structure/"</span><span class="nt">&gt;</span>Directory Structure<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/liquid/"</span><span class="nt">&gt;</span>Liquid<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/variables/"</span><span class="nt">&gt;</span>Variables<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/includes/"</span><span class="nt">&gt;</span>Includes<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/layouts/"</span><span class="nt">&gt;</span>Layouts<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/permalinks/"</span><span class="nt">&gt;</span>Permalinks<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/themes/"</span><span class="nt">&gt;</span>Themes<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/pagination/"</span><span class="nt">&gt;</span>Pagination<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;/optgroup&gt;</span>
    
      <span class="nt">&lt;optgroup</span> <span class="na">label=</span><span class="s">"Guides"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/plugins/"</span><span class="nt">&gt;</span>Plugins<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrations/"</span><span class="nt">&gt;</span>Blog Migrations<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/upgrading/"</span><span class="nt">&gt;</span>Upgrading<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/deployment/"</span><span class="nt">&gt;</span>Deployment<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;/optgroup&gt;</span>
    
      <span class="nt">&lt;optgroup</span> <span class="na">label=</span><span class="s">"Migrating"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/"</span><span class="nt">&gt;</span>Migrating to Rustyll<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/assemble-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Assemble<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/bridgetown-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Bridgetown<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/cobalt-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Cobalt<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/docsy-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Docsy<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/eleventy-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Eleventy<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/fresh-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Fresh<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/gatsby-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Gatsby<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/gitbook-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from GitBook<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/harp-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Harp<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/hugo-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Hugo<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/jekyll-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Jekyll<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/mdbook-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from mdBook<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/middleman-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Middleman<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/mkdocs-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from MkDocs<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/nanoc-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Nanoc<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/pelican-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Pelican<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/slate-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Slate<span class="nt">&lt;/option&gt;</span>
          <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"/docs/migrating/zola-to-rustyll/"</span><span class="nt">&gt;</span>Migrating from Zola<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;/optgroup&gt;</span>
    
  <span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
      
      <span class="c">&lt;!-- Sections tab (hidden by default) --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-3 max-h-72 overflow-y-auto hidden tab-panel"</span> <span class="na">id=</span><span class="s">"tab-sections"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"mobile-toc-container"</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-gray-400"</span><span class="nt">&gt;</span>Loading sections...<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    
    <span class="c">&lt;!-- Quick links --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-3 flex flex-wrap gap-2 bg-gray-900/50"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/"</span> <span class="na">class=</span><span class="s">"px-3 py-1.5 bg-black/30 rounded-full text-sm text-gray-400 hover:text-rust transition flex items-center border border-gray-700/50 hover:border-rust/30"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-3.5 h-3.5 mr-1"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"</span><span class="nt">&gt;&lt;/path&gt;</span>
        <span class="nt">&lt;/svg&gt;</span>
        <span class="nt">&lt;span&gt;</span>Home<span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/quickstart/"</span> <span class="na">class=</span><span class="s">"px-3 py-1.5 bg-black/30 rounded-full text-sm text-gray-400 hover:text-rust transition flex items-center border border-gray-700/50 hover:border-rust/30"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-3.5 h-3.5 mr-1"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M13 10V3L4 14h7v7l9-11h-7z"</span><span class="nt">&gt;&lt;/path&gt;</span>
        <span class="nt">&lt;/svg&gt;</span>
        <span class="nt">&lt;span&gt;</span>Quickstart<span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/api/"</span> <span class="na">class=</span><span class="s">"px-3 py-1.5 bg-black/30 rounded-full text-sm text-gray-400 hover:text-rust transition flex items-center border border-gray-700/50 hover:border-rust/30"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-3.5 h-3.5 mr-1"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"</span><span class="nt">&gt;&lt;/path&gt;</span>
        <span class="nt">&lt;/svg&gt;</span>
        <span class="nt">&lt;span&gt;</span>API<span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/details&gt;</span>
  
  <span class="nt">&lt;script&gt;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">DOMContentLoaded</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="c1">// Tab switching</span>
      <span class="kd">const</span> <span class="nx">tabButtons</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">[data-tab]</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">const</span> <span class="nx">tabPanels</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">.tab-panel</span><span class="dl">'</span><span class="p">);</span>
      
      <span class="nx">tabButtons</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">button</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">button</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
          <span class="kd">const</span> <span class="nx">tabId</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">data-tab</span><span class="dl">'</span><span class="p">);</span>
          
          <span class="c1">// Update button states</span>
          <span class="nx">tabButtons</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">btn</span> <span class="o">=&gt;</span> <span class="p">{</span>
            <span class="nx">btn</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">text-white</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">bg-black/30</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">border-b-2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">border-rust</span><span class="dl">'</span><span class="p">);</span>
            <span class="nx">btn</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">text-gray-400</span><span class="dl">'</span><span class="p">);</span>
          <span class="p">});</span>
          
          <span class="k">this</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">text-white</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">bg-black/30</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">border-b-2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">border-rust</span><span class="dl">'</span><span class="p">);</span>
          <span class="k">this</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">text-gray-400</span><span class="dl">'</span><span class="p">);</span>
          
          <span class="c1">// Show/hide panels</span>
          <span class="nx">tabPanels</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">panel</span> <span class="o">=&gt;</span> <span class="p">{</span>
            <span class="nx">panel</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
          <span class="p">});</span>
          
          <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="s2">`tab-</span><span class="p">${</span><span class="nx">tabId</span><span class="p">}</span><span class="s2">`</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span>
        <span class="p">});</span>
      <span class="p">});</span>
      
      <span class="c1">// Generate mobile TOC</span>
      <span class="kd">const</span> <span class="nx">mobileTocContainer</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">mobile-toc-container</span><span class="dl">'</span><span class="p">);</span>
      <span class="kd">const</span> <span class="nx">headings</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">.prose h2, .prose h3</span><span class="dl">'</span><span class="p">);</span>
      
      <span class="k">if </span><span class="p">(</span><span class="nx">headings</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">mobileTocContainer</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">&lt;div class="text-sm text-gray-500 italic"&gt;No sections found&lt;/div&gt;</span><span class="dl">'</span><span class="p">;</span>
      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">toc</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">ul</span><span class="dl">'</span><span class="p">);</span>
        <span class="nx">toc</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">space-y-1 text-sm</span><span class="dl">'</span><span class="p">;</span>
        
        <span class="nx">headings</span><span class="p">.</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">heading</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
          <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">heading</span><span class="p">.</span><span class="nx">textContent</span><span class="p">.</span><span class="nf">trim</span><span class="p">())</span> <span class="k">return</span><span class="p">;</span>
          
          <span class="c1">// Add ID to heading if it doesn't have one</span>
          <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">heading</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">heading</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">heading-mobile-</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">index</span><span class="p">;</span>
          <span class="p">}</span>
          
          <span class="kd">const</span> <span class="nx">listItem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">li</span><span class="dl">'</span><span class="p">);</span>
          <span class="kd">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">a</span><span class="dl">'</span><span class="p">);</span>
          <span class="kd">const</span> <span class="nx">isH3</span> <span class="o">=</span> <span class="nx">heading</span><span class="p">.</span><span class="nx">tagName</span><span class="p">.</span><span class="nf">toLowerCase</span><span class="p">()</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">h3</span><span class="dl">'</span><span class="p">;</span>
          
          <span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">#</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">heading</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
          <span class="nx">link</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">heading</span><span class="p">.</span><span class="nx">textContent</span><span class="p">;</span>
          <span class="nx">link</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">text-gray-400 hover:text-rust block py-1.5 px-2 hover:bg-black/20 rounded transition-colors</span><span class="dl">'</span> <span class="o">+</span>
                          <span class="p">(</span><span class="nx">isH3</span> <span class="p">?</span> <span class="dl">'</span><span class="s1"> ml-4 text-xs border-l border-gray-700 pl-2</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1"> font-medium</span><span class="dl">'</span><span class="p">);</span>
          
          <span class="nx">listItem</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">link</span><span class="p">);</span>
          <span class="nx">toc</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">listItem</span><span class="p">);</span>
          
          <span class="c1">// Add click handler for smooth scrolling</span>
          <span class="nx">link</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span>
            
            <span class="c1">// Close the mobile menu</span>
            <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">mobile-docs-menu</span><span class="dl">'</span><span class="p">).</span><span class="nf">removeAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">open</span><span class="dl">'</span><span class="p">);</span>
            
            <span class="c1">// Scroll to the heading</span>
            <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">href</span><span class="dl">'</span><span class="p">)).</span><span class="nf">scrollIntoView</span><span class="p">({</span>
              <span class="na">behavior</span><span class="p">:</span> <span class="dl">'</span><span class="s1">smooth</span><span class="dl">'</span>
            <span class="p">});</span>
          <span class="p">});</span>
        <span class="p">});</span>
        
        <span class="nx">mobileTocContainer</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
        <span class="nx">mobileTocContainer</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">toc</span><span class="p">);</span>
      <span class="p">}</span>
      
      <span class="c1">// Filter for mobile search</span>
      <span class="kd">const</span> <span class="nx">mobileSearchInput</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">mobile-doc-search</span><span class="dl">'</span><span class="p">);</span>
      <span class="k">if </span><span class="p">(</span><span class="nx">mobileSearchInput</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">mobileSearchInput</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
          <span class="kd">const</span> <span class="nx">searchTerm</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nf">toLowerCase</span><span class="p">();</span>
          
          <span class="c1">// Find all navigation links</span>
          <span class="kd">const</span> <span class="nx">links</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">#tab-contents a</span><span class="dl">'</span><span class="p">);</span>
          
          <span class="nx">links</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">link</span> <span class="o">=&gt;</span> <span class="p">{</span>
            <span class="kd">const</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">link</span><span class="p">.</span><span class="nx">textContent</span><span class="p">.</span><span class="nf">toLowerCase</span><span class="p">();</span>
            <span class="kd">const</span> <span class="nx">listItem</span> <span class="o">=</span> <span class="nx">link</span><span class="p">.</span><span class="nf">closest</span><span class="p">(</span><span class="dl">'</span><span class="s1">li</span><span class="dl">'</span><span class="p">);</span>
            
            <span class="k">if </span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">))</span> <span class="p">{</span>
              <span class="nx">listItem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
              <span class="c1">// Highlight matching text</span>
              <span class="k">if </span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">const</span> <span class="nx">regExp</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">RegExp</span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">,</span> <span class="dl">'</span><span class="s1">gi</span><span class="dl">'</span><span class="p">);</span>
                <span class="kd">const</span> <span class="nx">newText</span> <span class="o">=</span> <span class="nx">link</span><span class="p">.</span><span class="nx">textContent</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">regExp</span><span class="p">,</span> <span class="nx">match</span> <span class="o">=&gt;</span> <span class="s2">`&lt;mark class="bg-rust/20 text-white"&gt;</span><span class="p">${</span><span class="nx">match</span><span class="p">}</span><span class="s2">&lt;/mark&gt;`</span><span class="p">);</span>
                <span class="nx">link</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">newText</span><span class="p">;</span>
              <span class="p">}</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
              <span class="nx">listItem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">;</span>
            <span class="p">}</span>
          <span class="p">});</span>
        <span class="p">});</span>
      <span class="p">}</span>
    <span class="p">});</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex flex-col lg:flex-row gap-6 lg:gap-8"</span><span class="nt">&gt;</span>
        <span class="c">&lt;!-- Sidebar column --&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lg:w-1/5 order-1 lg:sticky lg:self-start lg:top-24 lg:max-h-screen"</span><span class="nt">&gt;</span>
          

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-gray-900/30 rounded-lg border border-gray-800 overflow-hidden h-[calc(100vh-180px)] flex flex-col "</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"border-b border-gray-800 px-4 py-3 flex items-center bg-black/30"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-5 h-5 text-rust mr-2"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium"</span><span class="nt">&gt;</span>Documentation<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-3 overflow-y-auto flex-grow custom-scrollbar"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lg:block"</span> <span class="na">id=</span><span class="s">"docs-nav"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hidden lg:block"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;aside</span> <span class="na">class=</span><span class="s">"sticky top-8"</span><span class="nt">&gt;</span>
    
      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"text-lg font-bold text-white mb-2"</span><span class="nt">&gt;</span>Getting Started<span class="nt">&lt;/h4&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-1 mb-6"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Quickstart
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/installation/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Installation
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/rust-101/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Rust 101 for Rustyll Users
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/community/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Community
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/step-by-step/01-setup/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Step by Step Tutorial
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
      <span class="nt">&lt;/ul&gt;</span>
    
      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"text-lg font-bold text-white mb-2"</span><span class="nt">&gt;</span>Build<span class="nt">&lt;/h4&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-1 mb-6"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/usage/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Command Line Usage
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/configuration/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Configuration
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/rendering-process/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Rendering Process
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
      <span class="nt">&lt;/ul&gt;</span>
    
      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"text-lg font-bold text-white mb-2"</span><span class="nt">&gt;</span>Content<span class="nt">&lt;/h4&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-1 mb-6"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/pages/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Pages
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/posts/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Posts
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/front-matter/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Front Matter
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/collections/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Collections
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/datafiles/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Data Files
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/assets/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Assets
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/static-files/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Static Files
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
      <span class="nt">&lt;/ul&gt;</span>
    
      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"text-lg font-bold text-white mb-2"</span><span class="nt">&gt;</span>Site Structure<span class="nt">&lt;/h4&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-1 mb-6"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/structure/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Directory Structure
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/liquid/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Liquid
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/variables/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Variables
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/includes/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Includes
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/layouts/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Layouts
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/permalinks/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Permalinks
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/themes/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Themes
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/pagination/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Pagination
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
      <span class="nt">&lt;/ul&gt;</span>
    
      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"text-lg font-bold text-white mb-2"</span><span class="nt">&gt;</span>Guides<span class="nt">&lt;/h4&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-1 mb-6"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/plugins/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Plugins
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrations/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Blog Migrations
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/upgrading/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Upgrading
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/deployment/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Deployment
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
      <span class="nt">&lt;/ul&gt;</span>
    
      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"text-lg font-bold text-white mb-2"</span><span class="nt">&gt;</span>Migrating<span class="nt">&lt;/h4&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-1 mb-6"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating to Rustyll
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/assemble-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Assemble
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/bridgetown-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Bridgetown
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/cobalt-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Cobalt
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/docsy-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Docsy
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/eleventy-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Eleventy
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/fresh-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Fresh
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/gatsby-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Gatsby
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/gitbook-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from GitBook
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/harp-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Harp
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/hugo-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Hugo
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/jekyll-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Jekyll
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/mdbook-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from mdBook
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/middleman-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Middleman
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/mkdocs-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from MkDocs
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/nanoc-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Nanoc
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/pelican-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Pelican
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/slate-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Slate
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/docs/migrating/zola-to-rustyll/"</span> <span class="na">class=</span><span class="s">"block py-1 text-gray-300 hover:text-rust transition-colors duration-200"</span><span class="nt">&gt;</span>
              Migrating from Zola
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/aside&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="c">&lt;!-- Quick links --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"border-t border-gray-800 p-2 bg-black/10 hidden lg:flex flex-wrap gap-2 justify-center"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/"</span> 
       <span class="na">class=</span><span class="s">"px-2 py-1 text-xs text-gray-400 hover:text-rust transition flex items-center gap-1 group"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-3 h-3 text-gray-500 group-hover:text-rust transition-colors"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
      <span class="nt">&lt;span&gt;</span>Home<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/quickstart/"</span> 
       <span class="na">class=</span><span class="s">"px-2 py-1 text-xs text-gray-400 hover:text-rust transition flex items-center gap-1 group"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-3 h-3 text-gray-500 group-hover:text-rust transition-colors"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M13 10V3L4 14h7v7l9-11h-7z"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
      <span class="nt">&lt;span&gt;</span>Quickstart<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="c">&lt;!-- Search docs --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"border-t border-gray-800 p-3 bg-black/20"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"h-4 w-4 text-gray-500"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"</span><span class="nt">&gt;&lt;/path&gt;</span>
        <span class="nt">&lt;/svg&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"search"</span> 
             <span class="na">placeholder=</span><span class="s">"Search docs..."</span> 
             <span class="na">class=</span><span class="s">"w-full pl-10 pr-3 py-1.5 border border-gray-700 bg-black/30 rounded-md text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-rust focus:border-rust"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;style&gt;</span>
  <span class="c">/* Custom scrollbar styles */</span>
  <span class="nc">.custom-scrollbar</span><span class="nd">::-webkit-scrollbar</span> <span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">6px</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nc">.custom-scrollbar</span><span class="nd">::-webkit-scrollbar-track</span> <span class="p">{</span>
    <span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.1</span><span class="p">);</span>
  <span class="p">}</span>
  
  <span class="nc">.custom-scrollbar</span><span class="nd">::-webkit-scrollbar-thumb</span> <span class="p">{</span>
    <span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">180</span><span class="p">,</span> <span class="m">83</span><span class="p">,</span> <span class="m">9</span><span class="p">,</span> <span class="m">0.3</span><span class="p">);</span>
    <span class="nl">border-radius</span><span class="p">:</span> <span class="m">3px</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nc">.custom-scrollbar</span><span class="nd">::-webkit-scrollbar-thumb:hover</span> <span class="p">{</span>
    <span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">180</span><span class="p">,</span> <span class="m">83</span><span class="p">,</span> <span class="m">9</span><span class="p">,</span> <span class="m">0.5</span><span class="p">);</span>
  <span class="p">}</span>
  
  <span class="c">/* Enhanced sidebar navigation styles */</span>
  <span class="nf">#docs-nav</span> <span class="nt">ul</span> <span class="p">{</span>
    <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="nl">padding-left</span><span class="p">:</span> <span class="m">0.5rem</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nf">#docs-nav</span> <span class="o">&gt;</span> <span class="nt">ul</span> <span class="p">{</span>
    <span class="nl">padding-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nf">#docs-nav</span> <span class="nt">li</span> <span class="p">{</span>
    <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.25rem</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nf">#docs-nav</span> <span class="nt">a</span> <span class="p">{</span>
    <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">0.25rem</span> <span class="m">0.5rem</span><span class="p">;</span>
    <span class="nl">border-radius</span><span class="p">:</span> <span class="m">0.25rem</span><span class="p">;</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.875rem</span><span class="p">;</span>
    <span class="nl">color</span><span class="p">:</span> <span class="nf">rgb</span><span class="p">(</span><span class="m">156</span> <span class="m">163</span> <span class="m">175</span><span class="p">);</span>
    <span class="nl">transition</span><span class="p">:</span> <span class="nb">all</span> <span class="m">0.2s</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nf">#docs-nav</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="nx">white</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">180</span><span class="p">,</span> <span class="m">83</span><span class="p">,</span> <span class="m">9</span><span class="p">,</span> <span class="m">0.1</span><span class="p">);</span>
  <span class="p">}</span>
  
  <span class="nf">#docs-nav</span> <span class="nt">a</span><span class="nc">.current</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="nx">#fff</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">180</span><span class="p">,</span> <span class="m">83</span><span class="p">,</span> <span class="m">9</span><span class="p">,</span> <span class="m">0.15</span><span class="p">);</span>
    <span class="nl">border-left</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="nf">rgb</span><span class="p">(</span><span class="m">180</span><span class="p">,</span> <span class="m">83</span><span class="p">,</span> <span class="m">9</span><span class="p">);</span>
    <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nf">#docs-nav</span> <span class="nc">.active</span> <span class="o">&gt;</span> <span class="nt">a</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="nf">rgb</span><span class="p">(</span><span class="m">249</span><span class="p">,</span> <span class="m">115</span><span class="p">,</span> <span class="m">22</span><span class="p">);</span>
    <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
  <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>

<span class="nt">&lt;script&gt;</span>
  <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">DOMContentLoaded</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// Expand the current section</span>
    <span class="kd">const</span> <span class="nx">currentPage</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.current</span><span class="dl">'</span><span class="p">);</span>
    <span class="k">if </span><span class="p">(</span><span class="nx">currentPage</span><span class="p">)</span> <span class="p">{</span>
      <span class="c1">// Find parent list items and add active class</span>
      <span class="kd">let</span> <span class="nx">parent</span> <span class="o">=</span> <span class="nx">currentPage</span><span class="p">.</span><span class="nx">parentElement</span><span class="p">;</span>
      <span class="k">while </span><span class="p">(</span><span class="nx">parent</span> <span class="o">&amp;&amp;</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">tagName</span> <span class="o">!==</span> <span class="dl">'</span><span class="s1">NAV</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if </span><span class="p">(</span><span class="nx">parent</span><span class="p">.</span><span class="nx">tagName</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">LI</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">parent</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">active</span><span class="dl">'</span><span class="p">);</span>
          
          <span class="c1">// Expand any collapsed lists</span>
          <span class="kd">const</span> <span class="nx">ul</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">ul</span><span class="dl">'</span><span class="p">);</span>
          <span class="k">if </span><span class="p">(</span><span class="nx">ul</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">ul</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">block</span><span class="dl">'</span><span class="p">;</span>
          <span class="p">}</span>
        <span class="p">}</span>
        <span class="nx">parent</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">parentElement</span><span class="p">;</span>
      <span class="p">}</span>
      
      <span class="c1">// Scroll to current page in sidebar</span>
      <span class="nf">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">sidebarContainer</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.overflow-y-auto</span><span class="dl">'</span><span class="p">);</span>
        <span class="k">if </span><span class="p">(</span><span class="nx">sidebarContainer</span> <span class="o">&amp;&amp;</span> <span class="nx">currentPage</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">sidebarContainer</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">=</span> <span class="nx">currentPage</span><span class="p">.</span><span class="nx">offsetTop</span> <span class="o">-</span> <span class="nx">sidebarContainer</span><span class="p">.</span><span class="nx">offsetHeight</span> <span class="o">/</span> <span class="mi">3</span><span class="p">;</span>
        <span class="p">}</span>
      <span class="p">},</span> <span class="mi">100</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">});</span>
<span class="nt">&lt;/script&gt;</span> 
        <span class="nt">&lt;/div&gt;</span>
        
        <span class="c">&lt;!-- Main content column --&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lg:w-3/5 order-2"</span><span class="nt">&gt;</span>
          

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative bg-black/10 rounded-xl p-5 md:p-7 border border-gray-800 shadow-lg hover:shadow-rust/5 transition-shadow duration-300 "</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute -top-10 -right-10 w-40 h-40 bg-rust/5 rounded-full blur-3xl"</span><span class="nt">&gt;&lt;/div&gt;</span>
  
  <span class="c">&lt;!-- Document meta information --&gt;</span>
  

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 py-3 mb-2 "</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Badge for docs type --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center gap-2"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"px-2 py-0.5 bg-rust/10 rounded-full text-rust text-xs border border-rust/30 whitespace-nowrap"</span><span class="nt">&gt;</span>
      
        Documentation
      
    <span class="nt">&lt;/span&gt;</span>
    
    <span class="c">&lt;!-- Reading time estimation --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center text-xs text-gray-400"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-3.5 h-3.5 mr-1 text-gray-500"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
      
      
        <span class="nt">&lt;span&gt;</span>5 min read<span class="nt">&lt;/span&gt;</span>
      
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center gap-4"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- Last updated date --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center text-xs text-gray-400"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-3.5 h-3.5 mr-1 text-gray-500"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
      <span class="nt">&lt;span&gt;</span>Updated: May 29, 2025<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    
    <span class="c">&lt;!-- Improve doc link --&gt;</span>
    <span class="nt">&lt;div&gt;</span>
      



<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll/blob/master//opt/buildhome/repo/_docs/markdown-101.md"</span> 
   <span class="na">target=</span><span class="s">"_blank"</span> 
   <span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
   <span class="na">class=</span><span class="s">"inline-flex items-center gap-2 text-sm text-gray-400 hover:text-rust transition-colors duration-200 group px-3 py-1.5 bg-black/20 rounded-md border border-gray-800 hover:border-rust/30 "</span><span class="nt">&gt;</span>
  <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4 transition-transform duration-200 group-hover:rotate-12"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"</span><span class="nt">&gt;&lt;/path&gt;</span>
  <span class="nt">&lt;/svg&gt;</span>
  <span class="nt">&lt;span&gt;</span>Improve this page<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
  
  <span class="c">&lt;!-- Document title --&gt;</span>
  

<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"text-3xl md:text-4xl font-bold text-white relative group mb-6 pl-4"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-gray-300"</span><span class="nt">&gt;</span>
    Markdown 101
  <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute -left-4 top-1/2 -translate-y-1/2 h-8 w-1.5 bg-gradient-to-b from-rust to-rust/50 rounded-r-full"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-2 w-24 h-1 bg-gradient-to-r from-rust to-transparent rounded-full group-hover:w-32 transition-all duration-300"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/h1&gt;</span> 
  
  <span class="c">&lt;!-- Main content --&gt;</span>
  <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"prose prose-invert prose-lg max-w-none
    /* Headings */
    prose-headings:text-white prose-headings:font-medium prose-headings:scroll-mt-24
    prose-h1:text-3xl prose-h1:font-bold prose-h1:mb-6 prose-h1:border-b prose-h1:border-gray-800 prose-h1:pb-4
    prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:font-semibold
    prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3 
    prose-h4:text-lg prose-h4:mt-6 prose-h4:mb-2
    
    /* Links */
    prose-a:text-rust prose-a:decoration-rust/30 prose-a:decoration-2 prose-a:underline-offset-2
    hover:prose-a:text-rust-light hover:prose-a:decoration-rust-light/50 hover:prose-a:transition-colors
    
    /* Code blocks */
    prose-pre:bg-black/30 prose-pre:border prose-pre:border-gray-800 prose-pre:rounded-lg 
    prose-pre:my-6 prose-pre:shadow-md prose-pre:p-4 prose-pre:overflow-auto
    
    /* Inline code */
    prose-code:text-rust-light prose-code:bg-black/30 prose-code:px-1.5 prose-code:py-0.5 
    prose-code:rounded prose-code:text-sm prose-code:font-mono
    
    /* Images */
    prose-img:rounded-lg prose-img:border prose-img:border-gray-800 prose-img:shadow-md 
    prose-img:my-8 prose-img:max-w-full prose-img:mx-auto
    
    /* Lists */
    prose-li:marker:text-rust prose-li:my-1 prose-ol:pl-6 prose-ul:pl-6
    prose-li:pl-2
    
    /* Blockquotes */
    prose-blockquote:border-l-4 prose-blockquote:border-rust prose-blockquote:bg-black/20
    prose-blockquote:pl-6 prose-blockquote:py-2 prose-blockquote:pr-4 prose-blockquote:rounded-r-md
    prose-blockquote:text-gray-300 prose-blockquote:not-italic prose-blockquote:my-6
    
    /* Horizontal rules */
    prose-hr:border-gray-800 prose-hr:my-10
    
    /* Strong text */
    prose-strong:text-white prose-strong:font-semibold
    
    /* Tables */
    prose-table:border-collapse prose-table:w-full prose-table:my-8
    prose-table:border prose-table:border-gray-800 prose-table:shadow-sm
    prose-td:border prose-td:border-gray-800 prose-td:p-2 prose-td:align-top
    prose-th:border prose-th:border-gray-800 prose-th:p-3 prose-th:bg-black/30
    prose-th:text-left prose-th:font-medium"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>Markdown is a lightweight markup language with plain text formatting syntax that Rustyll supports out of the box. This guide provides a quick introduction to Markdown for creating content in your Rustyll site.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"basic-markdown-syntax"</span><span class="nt">&gt;</span>Basic Markdown Syntax<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"headers"</span><span class="nt">&gt;</span>Headers<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"gh"</span><span class="nt">&gt;</span># H1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gu"</span><span class="nt">&gt;</span>## H2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gu"</span><span class="nt">&gt;</span>### H3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gu"</span><span class="nt">&gt;</span>#### H4<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gu"</span><span class="nt">&gt;</span>##### H5<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gu"</span><span class="nt">&gt;</span>###### H6<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"emphasis"</span><span class="nt">&gt;</span>Emphasis<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"ge"</span><span class="nt">&gt;</span>*This text will be italic*<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ge"</span><span class="nt">&gt;</span>_This will also be italic_<span class="nt">&lt;/span&gt;</span>

<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gs"</span><span class="nt">&gt;</span>**This text will be bold**<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gs"</span><span class="nt">&gt;</span>__This will also be bold__<span class="nt">&lt;/span&gt;</span>

<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ge"</span><span class="nt">&gt;</span>_You **can** combine them_<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"lists"</span><span class="nt">&gt;</span>Lists<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;h4</span> <span class="na">id=</span><span class="s">"unordered"</span><span class="nt">&gt;</span>Unordered<span class="nt">&lt;/h4&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;</span> Item 1
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;</span> Item 2
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>  *<span class="nt">&lt;/span&gt;</span> Item 2a
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>  *<span class="nt">&lt;/span&gt;</span> Item 2b
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h4</span> <span class="na">id=</span><span class="s">"ordered"</span><span class="nt">&gt;</span>Ordered<span class="nt">&lt;/h4&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>1.<span class="nt">&lt;/span&gt;</span> Item 1
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>2.<span class="nt">&lt;/span&gt;</span> Item 2
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>3.<span class="nt">&lt;/span&gt;</span> Item 3
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>   1.<span class="nt">&lt;/span&gt;</span> Item 3a
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>   2.<span class="nt">&lt;/span&gt;</span> Item 3b
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"images"</span><span class="nt">&gt;</span>Images<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>![<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nv"</span><span class="nt">&gt;</span>Alt Text<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>](<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"sx"</span><span class="nt">&gt;</span>url<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>)<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"links"</span><span class="nt">&gt;</span>Links<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>[<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nv"</span><span class="nt">&gt;</span>Link Text<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>](<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"sx"</span><span class="nt">&gt;</span>url<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>)<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"blockquotes"</span><span class="nt">&gt;</span>Blockquotes<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"gt"</span><span class="nt">&gt;</span><span class="ni">&amp;gt;</span> This is a blockquote.<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gt"</span><span class="nt">&gt;</span><span class="ni">&amp;gt;</span> <span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gt"</span><span class="nt">&gt;</span><span class="ni">&amp;gt;</span> This is the second paragraph in the blockquote.<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"horizontal-rules"</span><span class="nt">&gt;</span>Horizontal Rules<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>---
<span class="nt">&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"code"</span><span class="nt">&gt;</span>Code<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>Inline code uses single backticks:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;</span>Use the <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sb"</span><span class="nt">&gt;</span>`print()`<span class="nt">&lt;/span&gt;</span> function
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;p&gt;</span>Code blocks use triple backticks with optional language specification:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>```<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">&gt;</span>rust
<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"k"</span><span class="nt">&gt;</span>fn<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"nf"</span><span class="nt">&gt;</span>main<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>()<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>{<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"nd"</span><span class="nt">&gt;</span>println!<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>(<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>"Hello, world!"<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>);<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>}<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>```<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"markdown-in-rustyll"</span><span class="nt">&gt;</span>Markdown in Rustyll<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>Rustyll uses Markdown for content files like posts and pages. When you create a new file with a <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>.md<span class="nt">&lt;/code&gt;</span> or <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>.markdown<span class="nt">&lt;/code&gt;</span> extension, Rustyll will convert it to HTML during the build process.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"front-matter"</span><span class="nt">&gt;</span>Front Matter<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>Rustyll pages and posts require front matter. This is a section at the top of your markdown file that specifies metadata:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-yaml highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nn"</span><span class="nt">&gt;</span>---<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>layout<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>post<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>title<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"s2"</span><span class="nt">&gt;</span>"<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>My<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nv"</span><span class="nt">&gt;</span> <span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>First<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nv"</span><span class="nt">&gt;</span> <span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>Post"<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>date<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>2023-06-15<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>categories<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>tutorial<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>parallel<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"c1"</span><span class="nt">&gt;</span># Enable parallel processing for this document<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>render_priority<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"c1"</span><span class="nt">&gt;</span># Higher priority in the build queue (lower number = higher priority)<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>cache<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>aggressive<span class="nt">&lt;/span&gt;</span>        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"c1"</span><span class="nt">&gt;</span># Cache this document aggressively<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"nn"</span><span class="nt">&gt;</span>---<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"enhanced-markdown-features"</span><span class="nt">&gt;</span>Enhanced Markdown Features<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>Rustyll enhances standard Markdown with several features:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Parallel Processing<span class="nt">&lt;/strong&gt;</span>: Markdown files can be processed in parallel for speed<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Syntax Highlighting<span class="nt">&lt;/strong&gt;</span>: Code blocks are automatically highlighted using a fast Rust-based highlighter<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Table of Contents<span class="nt">&lt;/strong&gt;</span>: Generate a TOC with <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>{:toc}<span class="nt">&lt;/code&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Custom Attributes<span class="nt">&lt;/strong&gt;</span>: Add classes, IDs and other attributes to elements<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Math Rendering<span class="nt">&lt;/strong&gt;</span>: Support for LaTeX math using <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>$$<span class="nt">&lt;/code&gt;</span> delimiters<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Diagrams<span class="nt">&lt;/strong&gt;</span>: Support for Mermaid and other diagram formats<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>

<span class="nt">&lt;p&gt;</span>Example:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;</span>{: .warning}
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gt"</span><span class="nt">&gt;</span><span class="ni">&amp;gt;</span> This is a warning message.<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>
*<span class="nt">&lt;/span&gt;</span> TOC
{:toc}

<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gh"</span><span class="nt">&gt;</span># Header with ID {#custom-id}<span class="nt">&lt;/span&gt;</span>

$$
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"se"</span><span class="nt">&gt;</span>\i<span class="nt">&lt;/span&gt;</span>nt_0^1 x^2 dx = <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"se"</span><span class="nt">&gt;</span>\f<span class="nt">&lt;/span&gt;</span>rac{1}{3}
$$

<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"p"</span><span class="nt">&gt;</span>```<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nl"</span><span class="nt">&gt;</span>mermaid
<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"sb"</span><span class="nt">&gt;</span>graph TD;
    A--<span class="ni">&amp;gt;</span>B;
    A--<span class="ni">&amp;gt;</span>C;
    B--<span class="ni">&amp;gt;</span>D;
    C--<span class="ni">&amp;gt;</span>D;
<span class="nt">&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;</span>
### Performance Optimizations

Rustyll provides several Markdown-specific performance optimizations:

```yaml
# _config.yml
markdown:
  parallel: true           # Process markdown in parallel
  cache: true              # Cache rendered markdown
  lazy_images: true        # Lazy load images in markdown
  incremental: true        # Only reprocess changed markdown files
  precompile_headers: true # Precompile headers for faster processing
  threads: auto            # Number of threads for markdown processing
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;p&gt;</span>You can also enable parallel processing for individual markdown files with front matter:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-yaml highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nn"</span><span class="nt">&gt;</span>---<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>title<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"s2"</span><span class="nt">&gt;</span>"<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>My<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"nv"</span><span class="nt">&gt;</span> <span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>Document"<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>parallel<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>render_priority<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"m"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"nn"</span><span class="nt">&gt;</span>---<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"markdown-processors"</span><span class="nt">&gt;</span>Markdown Processors<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>Rustyll uses <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/kivikakk/comrak"</span><span class="nt">&gt;</span>Comrak<span class="nt">&lt;/a&gt;</span> (a CommonMark parser written in Rust) by default, which offers significant performance improvements over Ruby-based Markdown processors.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;p&gt;</span>You can configure the Markdown processor in your <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>_config.yml<span class="nt">&lt;/code&gt;</span>:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-yaml highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>markdown<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"s"</span><span class="nt">&gt;</span>comrak<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>comrak<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>options<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>hardbreaks<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>false<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>smart<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>github_pre_lang<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>extensions<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>strikethrough<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>table<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>autolink<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>tasklist<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>superscript<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>header_ids<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"na"</span><span class="nt">&gt;</span>footnotes<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"pi"</span><span class="nt">&gt;</span>:<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"kc"</span><span class="nt">&gt;</span>true<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"advanced-markdown-features"</span><span class="nt">&gt;</span>Advanced Markdown Features<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>Rustyll supports several advanced Markdown features:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"markdown-includes"</span><span class="nt">&gt;</span>Markdown Includes<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>Include other markdown files directly:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;</span>{% include_markdown _includes/snippet.md %}
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"conditional-markdown"</span><span class="nt">&gt;</span>Conditional Markdown<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>Show different content based on configuration:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;</span>{% if site.show_advanced_features %}
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gh"</span><span class="nt">&gt;</span># Advanced Features<span class="nt">&lt;/span&gt;</span>
This content is only shown if advanced features are enabled.
{% endif %}
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"markdown-variables"</span><span class="nt">&gt;</span>Markdown Variables<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>Use site variables in your markdown:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"language-markdown highlighter-rouge"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;pre</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;&lt;code&gt;</span>This site has {{ site.posts.size }} posts.
<span class="nt">&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"performance"</span><span class="nt">&gt;</span>Performance<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>Rustyll’s Markdown processing is significantly faster than Jekyll’s due to:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;</span>Use of Comrak, a fast Rust-based CommonMark parser<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Parallel processing of multiple Markdown files<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Incremental builds that only reprocess changed files<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Document-level caching<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Header precompilation<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>

<span class="nt">&lt;p&gt;</span>This means that even sites with hundreds of Markdown files can rebuild in milliseconds instead of seconds or minutes.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;p&gt;</span>For the best performance:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;</span>Enable parallel Markdown processing in your config<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Use front matter <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>parallel: true<span class="nt">&lt;/code&gt;</span> for complex documents<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Set appropriate <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>render_priority<span class="nt">&lt;/code&gt;</span> for critical pages<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Use <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>cache: aggressive<span class="nt">&lt;/code&gt;</span> for documents that rarely change<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"migration-from-jekyll"</span><span class="nt">&gt;</span>Migration from Jekyll<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>Rustyll’s Markdown processing is fully compatible with Jekyll’s, so your existing Markdown content will work without changes. However, to take advantage of Rustyll’s performance optimizations, consider adding the Rustyll-specific front matter options mentioned above.<span class="nt">&lt;/p&gt;</span>

  <span class="nt">&lt;/article&gt;</span>
  
  <span class="c">&lt;!-- Mobile Table of Contents --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-8 lg:hidden"</span><span class="nt">&gt;</span>
    

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-gray-900/30 rounded-lg border border-gray-800 overflow-hidden sticky top-24 "</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"border-b border-gray-800 px-4 py-2.5 flex items-center bg-black/30"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4 text-rust mr-2"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M4 6h16M4 12h16M4 18h7"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium text-sm"</span><span class="nt">&gt;</span>On this page<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"px-3 py-3 max-h-[calc(100vh-260px)] overflow-y-auto custom-scrollbar"</span> <span class="na">id=</span><span class="s">"table-of-contents"</span><span class="nt">&gt;</span>
    
    
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-1 text-sm pr-2"</span><span class="nt">&gt;</span>
        
          
            
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#basic-markdown-syntax"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Basic Markdown Syntax
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#markdown-in-rustyll"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Markdown in Rustyll
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#advanced-markdown-features"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Advanced Markdown Features
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#performance"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Performance
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#migration-from-jekyll"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Migration from Jekyll
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
      <span class="nt">&lt;/ul&gt;</span>
    
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;style&gt;</span>
    <span class="c">/* Active TOC item styles */</span>
    <span class="nf">#table-of-contents</span> <span class="nc">.active-link</span> <span class="p">{</span>
      <span class="nl">color</span><span class="p">:</span> <span class="nf">rgb</span><span class="p">(</span><span class="m">249</span><span class="p">,</span> <span class="m">115</span><span class="p">,</span> <span class="m">22</span><span class="p">)</span> <span class="cp">!important</span><span class="p">;</span>
      <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
      <span class="nl">transform</span><span class="p">:</span> <span class="nf">translateX</span><span class="p">(</span><span class="m">3px</span><span class="p">);</span>
    <span class="p">}</span>
    
    <span class="nf">#table-of-contents</span> <span class="nt">a</span> <span class="p">{</span>
      <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
      <span class="nl">transition</span><span class="p">:</span> <span class="nb">all</span> <span class="m">0.2s</span> <span class="nb">ease</span><span class="p">;</span>
    <span class="p">}</span>
    
    <span class="nf">#table-of-contents</span> <span class="nc">.active-link</span><span class="nd">::before</span> <span class="p">{</span>
      <span class="nl">content</span><span class="p">:</span> <span class="s1">""</span><span class="p">;</span>
      <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
      <span class="nl">left</span><span class="p">:</span> <span class="m">-10px</span><span class="p">;</span>
      <span class="nl">top</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
      <span class="nl">transform</span><span class="p">:</span> <span class="nf">translateY</span><span class="p">(</span><span class="m">-50%</span><span class="p">);</span>
      <span class="nl">height</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span>
      <span class="nl">width</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span>
      <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
      <span class="nl">background-color</span><span class="p">:</span> <span class="nf">rgb</span><span class="p">(</span><span class="m">249</span><span class="p">,</span> <span class="m">115</span><span class="p">,</span> <span class="m">22</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="nt">&lt;/style&gt;</span>
  
  <span class="nt">&lt;script&gt;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">DOMContentLoaded</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">const</span> <span class="nx">tocLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">#table-of-contents a</span><span class="dl">'</span><span class="p">);</span>
      
      <span class="c1">// Add click handler for smooth scrolling</span>
      <span class="nx">tocLinks</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">link</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">link</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span>
          <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">href</span><span class="dl">'</span><span class="p">)).</span><span class="nf">scrollIntoView</span><span class="p">({</span>
            <span class="na">behavior</span><span class="p">:</span> <span class="dl">'</span><span class="s1">smooth</span><span class="dl">'</span>
          <span class="p">});</span>
        <span class="p">});</span>
      <span class="p">});</span>
      
      <span class="c1">// Highlight current section on scroll</span>
      <span class="nb">window</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">scroll</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">scrollPos</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">;</span>
        
        <span class="nx">tocLinks</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">link</span> <span class="o">=&gt;</span> <span class="p">{</span>
          <span class="kd">const</span> <span class="nx">targetId</span> <span class="o">=</span> <span class="nx">link</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">href</span><span class="dl">'</span><span class="p">).</span><span class="nf">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
          <span class="kd">const</span> <span class="nx">targetElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="nx">targetId</span><span class="p">);</span>
          
          <span class="k">if </span><span class="p">(</span><span class="nx">targetElement</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">const</span> <span class="nx">rect</span> <span class="o">=</span> <span class="nx">targetElement</span><span class="p">.</span><span class="nf">getBoundingClientRect</span><span class="p">();</span>
            
            <span class="k">if</span> <span class="p">(</span><span class="nx">rect</span><span class="p">.</span><span class="nx">top</span> <span class="o">&lt;=</span> <span class="mi">100</span> <span class="o">&amp;&amp;</span> <span class="nx">rect</span><span class="p">.</span><span class="nx">bottom</span> <span class="o">&gt;=</span> <span class="mi">100</span><span class="p">)</span> <span class="p">{</span>
              <span class="nx">tocLinks</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">l</span> <span class="o">=&gt;</span> <span class="nx">l</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">active-link</span><span class="dl">'</span><span class="p">));</span>
              <span class="nx">link</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">active-link</span><span class="dl">'</span><span class="p">);</span>
            <span class="p">}</span>
          <span class="p">}</span>
        <span class="p">});</span>
      <span class="p">});</span>
    <span class="p">});</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="c">&lt;!-- Navigation between pages --&gt;</span>
  

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center justify-between space-x-4 pt-6 mt-12 border-t border-gray-800 mt-8"</span><span class="nt">&gt;</span>
  
    <span class="nt">&lt;div&gt;&lt;/div&gt;</span>
  
  
  
    <span class="nt">&lt;div&gt;&lt;/div&gt;</span>
  
<span class="nt">&lt;/div&gt;</span> 
  
  <span class="c">&lt;!-- Edit suggestion --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-12 bg-gray-900/30 rounded-lg p-6 border border-gray-800 flex flex-col md:flex-row items-center gap-4 justify-between"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div&gt;</span>
      <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium mb-1"</span><span class="nt">&gt;</span>Found an issue with this page?<span class="nt">&lt;/h3&gt;</span>
      <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-gray-400 text-sm"</span><span class="nt">&gt;</span>Help us improve the documentation by submitting a pull request.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    



<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll/blob/master//opt/buildhome/repo/_docs/markdown-101.md"</span> 
   <span class="na">target=</span><span class="s">"_blank"</span> 
   <span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
   <span class="na">class=</span><span class="s">"inline-flex items-center gap-2 text-sm text-gray-400 hover:text-rust transition-colors duration-200 group px-3 py-1.5 bg-black/20 rounded-md border border-gray-800 hover:border-rust/30 "</span><span class="nt">&gt;</span>
  <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4 transition-transform duration-200 group-hover:rotate-12"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"</span><span class="nt">&gt;&lt;/path&gt;</span>
  <span class="nt">&lt;/svg&gt;</span>
  <span class="nt">&lt;span&gt;</span>Improve this page<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
        <span class="nt">&lt;/div&gt;</span>
        
        <span class="c">&lt;!-- Table of contents column --&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lg:w-1/5 order-3 hidden lg:block lg:sticky lg:self-start lg:top-24 lg:max-h-screen"</span><span class="nt">&gt;</span>
          

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-gray-900/30 rounded-lg border border-gray-800 overflow-hidden sticky top-24 "</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"border-b border-gray-800 px-4 py-2.5 flex items-center bg-black/30"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4 text-rust mr-2"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M4 6h16M4 12h16M4 18h7"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium text-sm"</span><span class="nt">&gt;</span>On this page<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"px-3 py-3 max-h-[calc(100vh-260px)] overflow-y-auto custom-scrollbar"</span> <span class="na">id=</span><span class="s">"table-of-contents"</span><span class="nt">&gt;</span>
    
    
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-1 text-sm pr-2"</span><span class="nt">&gt;</span>
        
          
            
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#basic-markdown-syntax"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Basic Markdown Syntax
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#markdown-in-rustyll"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Markdown in Rustyll
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#advanced-markdown-features"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Advanced Markdown Features
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#performance"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Performance
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
          
          
          
          
          
          
          <span class="nt">&lt;li&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#migration-from-jekyll"</span> <span class="na">class=</span><span class="s">"text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium"</span><span class="nt">&gt;</span>
              
                Migration from Jekyll
              
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          
          
          
        
      <span class="nt">&lt;/ul&gt;</span>
    
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;style&gt;</span>
    <span class="c">/* Active TOC item styles */</span>
    <span class="nf">#table-of-contents</span> <span class="nc">.active-link</span> <span class="p">{</span>
      <span class="nl">color</span><span class="p">:</span> <span class="nf">rgb</span><span class="p">(</span><span class="m">249</span><span class="p">,</span> <span class="m">115</span><span class="p">,</span> <span class="m">22</span><span class="p">)</span> <span class="cp">!important</span><span class="p">;</span>
      <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
      <span class="nl">transform</span><span class="p">:</span> <span class="nf">translateX</span><span class="p">(</span><span class="m">3px</span><span class="p">);</span>
    <span class="p">}</span>
    
    <span class="nf">#table-of-contents</span> <span class="nt">a</span> <span class="p">{</span>
      <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
      <span class="nl">transition</span><span class="p">:</span> <span class="nb">all</span> <span class="m">0.2s</span> <span class="nb">ease</span><span class="p">;</span>
    <span class="p">}</span>
    
    <span class="nf">#table-of-contents</span> <span class="nc">.active-link</span><span class="nd">::before</span> <span class="p">{</span>
      <span class="nl">content</span><span class="p">:</span> <span class="s1">""</span><span class="p">;</span>
      <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
      <span class="nl">left</span><span class="p">:</span> <span class="m">-10px</span><span class="p">;</span>
      <span class="nl">top</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
      <span class="nl">transform</span><span class="p">:</span> <span class="nf">translateY</span><span class="p">(</span><span class="m">-50%</span><span class="p">);</span>
      <span class="nl">height</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span>
      <span class="nl">width</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span>
      <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
      <span class="nl">background-color</span><span class="p">:</span> <span class="nf">rgb</span><span class="p">(</span><span class="m">249</span><span class="p">,</span> <span class="m">115</span><span class="p">,</span> <span class="m">22</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="nt">&lt;/style&gt;</span>
  
  <span class="nt">&lt;script&gt;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">DOMContentLoaded</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">const</span> <span class="nx">tocLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">#table-of-contents a</span><span class="dl">'</span><span class="p">);</span>
      
      <span class="c1">// Add click handler for smooth scrolling</span>
      <span class="nx">tocLinks</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">link</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">link</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span>
          <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">href</span><span class="dl">'</span><span class="p">)).</span><span class="nf">scrollIntoView</span><span class="p">({</span>
            <span class="na">behavior</span><span class="p">:</span> <span class="dl">'</span><span class="s1">smooth</span><span class="dl">'</span>
          <span class="p">});</span>
        <span class="p">});</span>
      <span class="p">});</span>
      
      <span class="c1">// Highlight current section on scroll</span>
      <span class="nb">window</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">scroll</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">scrollPos</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">;</span>
        
        <span class="nx">tocLinks</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">link</span> <span class="o">=&gt;</span> <span class="p">{</span>
          <span class="kd">const</span> <span class="nx">targetId</span> <span class="o">=</span> <span class="nx">link</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">href</span><span class="dl">'</span><span class="p">).</span><span class="nf">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
          <span class="kd">const</span> <span class="nx">targetElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="nx">targetId</span><span class="p">);</span>
          
          <span class="k">if </span><span class="p">(</span><span class="nx">targetElement</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">const</span> <span class="nx">rect</span> <span class="o">=</span> <span class="nx">targetElement</span><span class="p">.</span><span class="nf">getBoundingClientRect</span><span class="p">();</span>
            
            <span class="k">if</span> <span class="p">(</span><span class="nx">rect</span><span class="p">.</span><span class="nx">top</span> <span class="o">&lt;=</span> <span class="mi">100</span> <span class="o">&amp;&amp;</span> <span class="nx">rect</span><span class="p">.</span><span class="nx">bottom</span> <span class="o">&gt;=</span> <span class="mi">100</span><span class="p">)</span> <span class="p">{</span>
              <span class="nx">tocLinks</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">l</span> <span class="o">=&gt;</span> <span class="nx">l</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">active-link</span><span class="dl">'</span><span class="p">));</span>
              <span class="nx">link</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">active-link</span><span class="dl">'</span><span class="p">);</span>
            <span class="p">}</span>
          <span class="p">}</span>
        <span class="p">});</span>
      <span class="p">});</span>
    <span class="p">});</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
 --&gt;
  <span class="nt">&lt;/main&gt;</span>
  <span class="nt">&lt;footer&gt;</span>
    <span class="c">&lt;!-- 

&lt;footer class="bg-black py-12 border-t border-rust/20 relative overflow-hidden"&gt;
  &lt;!-- Background effect --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute inset-0 bg-gradient-to-b from-black to-black/90"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-rust/30 to-transparent"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute -bottom-40 -left-40 w-80 h-80 bg-rust/5 rounded-full blur-3xl"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute -top-20 -right-20 w-60 h-60 bg-rust/5 rounded-full blur-3xl"</span><span class="nt">&gt;&lt;/div&gt;</span>
  
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container mx-auto px-4 relative z-10"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12 mb-8"</span><span class="nt">&gt;</span>
      <span class="c">&lt;!-- Main info column --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"md:col-span-5"</span><span class="nt">&gt;</span>
        

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative "</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Logo with glow effect --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-4"</span><span class="nt">&gt;</span>
    

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/"</span> <span class="na">class=</span><span class="s">"flex items-center mb-4"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Rustyll<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/img/logo-2x.png"</span> <span class="na">width=</span><span class="s">"120"</span> <span class="na">height=</span><span class="s">"55"</span> <span class="na">alt=</span><span class="s">"Rustyll Logo"</span> 
       <span class="na">class=</span><span class="s">"h-10 w-auto transition-transform duration-300 hover:scale-105"</span><span class="nt">&gt;</span>
  
<span class="nt">&lt;/a&gt;</span> 
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute -top-6 -left-6 w-32 h-32 bg-rust/10 rounded-full blur-3xl"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="c">&lt;!-- Team info --&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-gray-400 mb-3 text-lg"</span><span class="nt">&gt;</span>
    Rustyll is lovingly maintained by the 
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/team/"</span> 
       <span class="na">class=</span><span class="s">"text-rust hover:text-rust-light transition-all duration-200 hover:underline decoration-rust/40 relative inline-flex group"</span><span class="nt">&gt;</span>
      core team
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"absolute -bottom-1 left-0 w-full h-0.5 bg-rust/30 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-bottom-left"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span> 
    of volunteers.
  <span class="nt">&lt;/p&gt;</span>
  
  <span class="c">&lt;!-- Copyright --&gt;</span>
  

<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-gray-400 text-sm mb-6"</span><span class="nt">&gt;</span>
  <span class="ni">&amp;copy;&amp;nbsp;</span>2025 under the terms of the 
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll/blob/master/LICENSE"</span> 
     <span class="na">class=</span><span class="s">"text-rust hover:text-rust-light transition-all duration-200 hover:underline decoration-rust/40"</span><span class="nt">&gt;</span>
    MIT License
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/p&gt;</span> 
  
  <span class="c">&lt;!-- Newsletter signup --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-6 relative overflow-hidden rounded-xl border border-rust/20 p-5 bg-black/20 backdrop-blur-sm hover:bg-black/30 transition-all duration-300"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"absolute -top-10 -right-10 w-40 h-40 bg-rust/5 rounded-full blur-3xl"</span><span class="nt">&gt;&lt;/div&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium mb-2"</span><span class="nt">&gt;</span>Stay updated<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-gray-400 text-sm mb-4"</span><span class="nt">&gt;</span>Join our newsletter for the latest Rustyll updates<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"flex flex-col sm:flex-row gap-2"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> 
             <span class="na">placeholder=</span><span class="s">"Your email address"</span> 
             <span class="na">class=</span><span class="s">"flex-grow bg-black/30 border border-gray-700 rounded-md text-sm text-white placeholder-gray-400 focus:outline-none focus:border-rust focus:ring-1 focus:ring-rust px-3 py-2"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> 
              <span class="na">class=</span><span class="s">"bg-rust hover:bg-rust-light text-white rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 transform hover:translate-y-[-2px]"</span><span class="nt">&gt;</span>
        Subscribe
      <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/form&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="c">&lt;!-- Links columns --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"md:col-span-2"</span><span class="nt">&gt;</span>
        

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium text-lg mb-3 border-l-2 border-rust pl-3"</span><span class="nt">&gt;</span>Resources<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-2"</span><span class="nt">&gt;</span>
    
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Documentation<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/tutorials/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Tutorials<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/resources/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Resources<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/plugins/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Plugins<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/showcase/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Showcase<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
    
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"md:col-span-2"</span><span class="nt">&gt;</span>
        

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium text-lg mb-3 border-l-2 border-rust pl-3"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-2"</span><span class="nt">&gt;</span>
    
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/team/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Team<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/contributing/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Contributing<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/history/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>History<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/sponsors/"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Sponsors<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
    
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"md:col-span-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"space-y-6"</span><span class="nt">&gt;</span>
          

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"text-white font-medium text-lg mb-3 border-l-2 border-rust pl-3"</span><span class="nt">&gt;</span>Community<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"space-y-2"</span><span class="nt">&gt;</span>
    
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-rust"</span><span class="nt">&gt;&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;&lt;path</span> <span class="na">fill-rule=</span><span class="s">"evenodd"</span> <span class="na">d=</span><span class="s">"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.378.202 2.397.1 2.65.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"</span> <span class="na">clip-rule=</span><span class="s">"evenodd"</span><span class="nt">/&gt;&lt;/svg&gt;&lt;/span&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>GitHub<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">""</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-rust"</span><span class="nt">&gt;&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"</span><span class="nt">&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Discord<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://twitter.com/rustylldocs"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-rust"</span><span class="nt">&gt;&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"</span><span class="nt">&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Twitter<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>
        

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://stackoverflow.com/questions/tagged/rustyll"</span> 
   <span class="na">class=</span><span class="s">"text-gray-300 hover:text-white group transition-all duration-200 flex items-center gap-2 hover:translate-x-1 "</span><span class="nt">&gt;</span>
  
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-rust"</span><span class="nt">&gt;&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M15 21h-10v-2h10v2zm6-11.665l-1.621-9.335-1.993.346 1.62 9.335 1.994-.346zm-5.964 6.937l-9.746-.975-.186 2.016 9.755.879.177-1.92zm.538-2.587l-9.276-2.608-.526 1.954 9.306 2.5.496-1.846zm1.204-2.413l-8.297-4.864-1.029 1.743 8.298 4.865 1.028-1.744zm1.866-1.467l-5.339-7.829-1.672 1.14 5.339 7.829 1.672-1.14zm-2.644 4.195v8h-12v-8h-2v10h16v-10h-2z"</span><span class="nt">&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;</span>
  
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"group-hover:text-rust"</span><span class="nt">&gt;</span>Stack Overflow<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"w-0 h-0.5 bg-rust/30 group-hover:w-full transition-all duration-300"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span> 
      <span class="nt">&lt;/li&gt;</span>
    
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
          

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex flex-col items-center md:items-end mt-8"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Hosted by GitHub --&gt;</span>
  

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center md:justify-end mb-4"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-gray-400"</span><span class="nt">&gt;</span>Proudly hosted by<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com"</span> 
     <span class="na">class=</span><span class="s">"ml-2 opacity-80 hover:opacity-100 transition-all duration-300 transform hover:scale-105 group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/img/footer-logo.png"</span> 
         <span class="na">width=</span><span class="s">"85"</span> <span class="na">height=</span><span class="s">"25"</span> 
         <span class="na">alt=</span><span class="s">"GitHub • Social coding"</span> 
         <span class="na">class=</span><span class="s">"h-6 w-auto"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"h-0.5 w-0 bg-gradient-to-r from-transparent via-rust/70 to-transparent group-hover:w-full transition-all duration-300 rounded-full"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
  
  <span class="c">&lt;!-- Sponsors info --&gt;</span>
  

<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-gray-400 text-sm mb-4"</span><span class="nt">&gt;</span>
  Rustyll is funded thanks to its 
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://github.com/betterwebinit/rustyll/sponsors"</span> 
     <span class="na">class=</span><span class="s">"text-rust hover:text-rust-light transition-all duration-200 relative group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"relative z-10"</span><span class="nt">&gt;</span>sponsors!<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"absolute bottom-0 left-0 w-full h-0.5 bg-rust/30 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"</span><span class="nt">&gt;&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/p&gt;</span> 
  
  <span class="c">&lt;!-- Version badge --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center gap-2 mt-4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"px-3 py-1 bg-rust/10 rounded-full text-rust text-xs border border-rust/30"</span><span class="nt">&gt;</span>
      v0.1.0
    <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://rustwasm.github.io/docs/book/"</span> 
       <span class="na">class=</span><span class="s">"px-3 py-1 bg-black/20 rounded-full text-gray-300 text-xs border border-gray-700/30 hover:border-rust/30 hover:text-white transition-all duration-200 flex items-center gap-1"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-3 h-3"</span> <span class="na">fill=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M12.008 0c-6.63 0-12 5.37-12 12s5.37 12 12 12 12-5.37 12-12-5.37-12-12-12zM2.008 12c0-5.52 4.48-10 10-10 5.52 0 10 4.48 10 10 0 5.52-4.48 10-10 10-5.52 0-10-4.48-10-10z"</span><span class="nt">&gt;&lt;/path&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M12.008 16.5c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z"</span><span class="nt">&gt;&lt;/path&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
      <span class="nt">&lt;span&gt;</span>Built with Rust<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="c">&lt;!-- Back to top button --&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> 
     <span class="na">class=</span><span class="s">"mt-6 inline-flex items-center gap-2 bg-black/30 border border-gray-700/30 rounded-full px-4 py-2 text-gray-300 hover:text-white hover:border-rust/30 transition-all duration-300 transform hover:translate-y-[-3px] group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;svg</span> <span class="na">class=</span><span class="s">"w-4 h-4 transition-transform duration-300 group-hover:translate-y-[-2px]"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;path</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">d=</span><span class="s">"M5 10l7-7m0 0l7 7m-7-7v18"</span><span class="nt">&gt;&lt;/path&gt;</span>
    <span class="nt">&lt;/svg&gt;</span>
    <span class="nt">&lt;span&gt;</span>Back to top<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span> 
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    
    <span class="c">&lt;!-- Bottom border --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"border-t border-gray-800 mt-12 pt-6 flex flex-col md:flex-row justify-between items-center"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center space-x-2"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-gray-500 text-sm"</span><span class="nt">&gt;</span>Site Version: 0.1.0<span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-gray-500 text-sm"</span><span class="nt">&gt;</span>
        Made with 
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-red-500 animate-pulse"</span><span class="nt">&gt;</span>❤<span class="nt">&lt;/span&gt;</span> 
        by the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://better-web.org"</span> <span class="na">class=</span><span class="s">"text-white hover:text-rust transition-colors"</span><span class="nt">&gt;</span>Better Web<span class="nt">&lt;/a&gt;</span> community
      <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      
      <span class="c">&lt;!-- Scroll indicator --&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hidden md:block text-gray-600 text-xs transition-opacity duration-300 opacity-70 hover:opacity-100"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"inline-block transform animate-bounce"</span> <span class="na">id=</span><span class="s">"scroll-indicator"</span><span class="nt">&gt;</span>↑ Scroll to top<span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;script&gt;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">DOMContentLoaded</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">const</span> <span class="nx">scrollIndicator</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">scroll-indicator</span><span class="dl">'</span><span class="p">);</span>
      
      <span class="c1">// Only show scroll indicator when page is scrolled down</span>
      <span class="nb">window</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">scroll</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">if </span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span> <span class="o">&gt;</span> <span class="mi">300</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">scrollIndicator</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">1</span><span class="dl">'</span><span class="p">;</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
          <span class="nx">scrollIndicator</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">0</span><span class="dl">'</span><span class="p">;</span>
        <span class="p">}</span>
      <span class="p">});</span>
      
      <span class="c1">// Smooth scroll to top</span>
      <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">a[href="#"]</span><span class="dl">'</span><span class="p">).</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">anchor</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">anchor</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span>
          <span class="nb">window</span><span class="p">.</span><span class="nf">scrollTo</span><span class="p">({</span>
            <span class="na">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
            <span class="na">behavior</span><span class="p">:</span> <span class="dl">'</span><span class="s1">smooth</span><span class="dl">'</span>
          <span class="p">});</span>
        <span class="p">});</span>
      <span class="p">});</span>
    <span class="p">});</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/footer&gt;</span> 
 --&gt;
  <span class="nt">&lt;/footer&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div></div>

<h3 id="partials-to-includes">Partials to Includes</h3>

<p>Assemble’s partials convert to Rustyll includes:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Assemble (partials/header.hbs) --&gt;</span>
<span class="nt">&lt;nav&gt;</span>
  \{\{#each pages\}\}
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"\{\{this.url\}\}"</span> <span class="na">class=</span><span class="s">"\{\{#if this.isActive\}\}active\{\{/if\}\}"</span><span class="nt">&gt;</span>\{\{this.title\}\}<span class="nt">&lt;/a&gt;</span>
  \{\{/each\}\}
<span class="nt">&lt;/nav&gt;</span>
</code></pre></div></div>

<p>Converts to:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Rustyll (_includes/header.html) --&gt;</span>
<span class="nt">&lt;nav&gt;</span>
  <span class="c">&lt;!-- Liquid for loop starts --&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/404.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/github.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/issues.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/news/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>News<span class="nt">&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/philosophy/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>Philosophy<span class="nt">&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/news/releases/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>Releases<span class="nt">&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/resources/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>Resources<span class="nt">&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/rustyllconf/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>RustyllConf<span class="nt">&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/showcase/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>Showcase<span class="nt">&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/team/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>The Rustyll Team<span class="nt">&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/conduct/index.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/help/index.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/conduct/index.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/configuration/webrick/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/deployment-methods/index.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/frontmatter/index.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/home/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/quickstart/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/extras/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/windows/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/templates/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/drafts/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/step-by-step/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/tutorials/index.html"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/resources/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/docs/sites/"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/redirects.json"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/feed/release.xml"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/feed.xml"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/sitemap.xml"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/robots.txt"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/a&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
  <span class="c">&lt;!-- Liquid for loop ends --&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</code></pre></div></div>

<h2 id="configuration-conversion">Configuration Conversion</h2>

<p>Assemble’s Grunt configuration converts to Rustyll’s YAML:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Assemble (Gruntfile.js)</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">grunt</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">grunt</span><span class="p">.</span><span class="nf">initConfig</span><span class="p">({</span>
    <span class="na">assemble</span><span class="p">:</span> <span class="p">{</span>
      <span class="na">options</span><span class="p">:</span> <span class="p">{</span>
        <span class="na">site</span><span class="p">:</span> <span class="p">{</span>
          <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">My Assemble Site</span><span class="dl">'</span><span class="p">,</span>
          <span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">A website built with Assemble</span><span class="dl">'</span>
        <span class="p">},</span>
        <span class="na">layouts</span><span class="p">:</span> <span class="dl">'</span><span class="s1">templates/layouts</span><span class="dl">'</span><span class="p">,</span>
        <span class="na">partials</span><span class="p">:</span> <span class="dl">'</span><span class="s1">templates/partials</span><span class="dl">'</span><span class="p">,</span>
        <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">data/*.{json,yml}</span><span class="dl">'</span>
      <span class="p">},</span>
      <span class="na">site</span><span class="p">:</span> <span class="p">{</span>
        <span class="na">files</span><span class="p">:</span> <span class="p">[</span>
          <span class="p">{</span> <span class="na">expand</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">cwd</span><span class="p">:</span> <span class="dl">'</span><span class="s1">pages</span><span class="dl">'</span><span class="p">,</span> <span class="na">src</span><span class="p">:</span> <span class="dl">'</span><span class="s1">**/*.hbs</span><span class="dl">'</span><span class="p">,</span> <span class="na">dest</span><span class="p">:</span> <span class="dl">'</span><span class="s1">dist/</span><span class="dl">'</span> <span class="p">}</span>
        <span class="p">]</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">});</span>
  
  <span class="nx">grunt</span><span class="p">.</span><span class="nf">loadNpmTasks</span><span class="p">(</span><span class="dl">'</span><span class="s1">assemble</span><span class="dl">'</span><span class="p">);</span>
  <span class="nx">grunt</span><span class="p">.</span><span class="nf">registerTask</span><span class="p">(</span><span class="dl">'</span><span class="s1">default</span><span class="dl">'</span><span class="p">,</span> <span class="p">[</span><span class="dl">'</span><span class="s1">assemble</span><span class="dl">'</span><span class="p">]);</span>
<span class="p">};</span>
</code></pre></div></div>

<p>Converts to:</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Rustyll (_config.yml)</span>
<span class="na">title</span><span class="pi">:</span> <span class="s">My Assemble Site</span>
<span class="na">description</span><span class="pi">:</span> <span class="s">A website built with Assemble</span>

<span class="c1"># Directory settings</span>
<span class="na">layouts_dir</span><span class="pi">:</span> <span class="s">_layouts</span>
<span class="na">includes_dir</span><span class="pi">:</span> <span class="s">_includes</span>

<span class="c1"># Build settings</span>
<span class="na">markdown</span><span class="pi">:</span> <span class="s">commonmark</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">pretty</span>

<span class="c1"># Performance settings</span>
<span class="na">threads</span><span class="pi">:</span> <span class="s">auto</span>
<span class="na">incremental</span><span class="pi">:</span> <span class="kc">true</span>
</code></pre></div></div>

<h2 id="data-system-conversion">Data System Conversion</h2>

<p>Assemble’s data file approach converts to Rustyll’s <code class="language-plaintext highlighter-rouge">_data</code> directory:</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Assemble (data/team.yml)</span>
<span class="na">members</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">John Doe</span>
    <span class="na">role</span><span class="pi">:</span> <span class="s">Developer</span>
  <span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Jane Smith</span>
    <span class="na">role</span><span class="pi">:</span> <span class="s">Designer</span>
</code></pre></div></div>

<p>Transfers directly to:</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Rustyll (_data/team.yml)</span>
<span class="na">members</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">John Doe</span>
    <span class="na">role</span><span class="pi">:</span> <span class="s">Developer</span>
  <span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">Jane Smith</span>
    <span class="na">role</span><span class="pi">:</span> <span class="s">Designer</span>
</code></pre></div></div>

<h2 id="helpers-to-filters-and-tags">Helpers to Filters and Tags</h2>

<p>Assemble’s custom helpers convert to Rustyll’s Liquid filters or includes:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Assemble (with custom helper) --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"posts"</span><span class="nt">&gt;</span>
  \{\{#each posts\}\}
    <span class="nt">&lt;article&gt;</span>
      <span class="nt">&lt;h2&gt;</span>\{\{title\}\}<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>\{\{truncate description 100\}\}<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
  \{\{/each\}\}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<p>Converts to:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Rustyll (with filter) --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"posts"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Liquid for loop starts --&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
    <span class="nt">&lt;article&gt;</span>
      <span class="nt">&lt;h2&gt;</span>Rustyll 1.0.0 Released<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;&lt;/p&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
  <span class="c">&lt;!--  --&gt;</span>
  <span class="c">&lt;!-- Liquid for loop ends --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h2 id="collections">Collections</h2>

<p>Assemble’s post grouping can be implemented using Rustyll collections:</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Rustyll (_config.yml)</span>
<span class="na">collections</span><span class="pi">:</span>
  <span class="na">projects</span><span class="pi">:</span>
    <span class="na">output</span><span class="pi">:</span> <span class="kc">true</span>
    <span class="na">permalink</span><span class="pi">:</span> <span class="s">/projects/:path/</span>
</code></pre></div></div>

<p>With corresponding content files:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh">&lt;!-- Rustyll (_projects/project1.md) --&gt;
---
</span>title: First Project
description: Description of first project
<span class="gh">featured: true
---
</span>
Content for first project goes here.
</code></pre></div></div>

<h2 id="performance-improvements">Performance Improvements</h2>

<p>Rustyll offers significant performance advantages over JavaScript-based Assemble:</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Rustyll performance options</span>
<span class="na">threads</span><span class="pi">:</span> <span class="s">auto</span>  <span class="c1"># Use all available CPU cores</span>
<span class="na">incremental</span><span class="pi">:</span> <span class="kc">true</span>  <span class="c1"># Enable incremental builds</span>
<span class="na">cache</span><span class="pi">:</span>
  <span class="na">enabled</span><span class="pi">:</span> <span class="kc">true</span>
  <span class="na">strategy</span><span class="pi">:</span> <span class="s">aggressive</span>
</code></pre></div></div>

<p>Comparison:</p>
<ol>
  <li><strong>Build Speed</strong>: 10-20x faster for large sites</li>
  <li><strong>Memory Usage</strong>: Much lower RAM consumption</li>
  <li><strong>Concurrency</strong>: Efficient use of all CPU cores</li>
</ol>

<h2 id="troubleshooting-common-issues">Troubleshooting Common Issues</h2>

<h3 id="template-syntax-differences">Template Syntax Differences</h3>

<p>If you encounter template conversion issues:</p>

<ol>
  <li>Handlebars uses <code class="language-plaintext highlighter-rouge">\{\{variable\}\}</code> syntax while Liquid uses <code class="language-plaintext highlighter-rouge">{ { variable } }</code> (with spaces)</li>
  <li>Handlebars helpers (<code class="language-plaintext highlighter-rouge">\{\{#each\}\}</code>) convert to Liquid tags (<code class="language-plaintext highlighter-rouge">{ % for % }</code>)</li>
  <li>Handlebars context (<code class="language-plaintext highlighter-rouge">this</code>) is handled differently in Liquid</li>
</ol>

<h3 id="helper-functions">Helper Functions</h3>

<p>For complex Assemble helpers:</p>

<ol>
  <li>Use Liquid’s built-in filters when possible</li>
  <li>Create custom Liquid tags for complex functionality</li>
  <li>Use JavaScript in the browser for dynamic components</li>
</ol>

<h3 id="layout-system">Layout System</h3>

<p>Assemble and Rustyll handle layouts differently:</p>

<ol>
  <li>Assemble uses <code class="language-plaintext highlighter-rouge">\{\{&gt; body\}\}</code> for content injection</li>
  <li>Rustyll uses <code class="language-plaintext highlighter-rouge">{ { content } }</code> in layout files</li>
  <li>Nested layouts work differently in Rustyll</li>
</ol>

<h2 id="migration-checklist">Migration Checklist</h2>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Install Rust and Rustyll</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Back up your Assemble site</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Run the migration command</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Check template conversions</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Set up collections for content types</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Convert Handlebars helpers to Liquid filters</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Update asset references</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Configure permalink structure</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Test build with <code class="language-plaintext highlighter-rouge">rustyll build</code></li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Preview site with <code class="language-plaintext highlighter-rouge">rustyll serve</code></li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Fix any template or rendering issues</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Optimize performance settings</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Update deployment workflows</li>
</ul>

<h2 id="need-help">Need Help?</h2>

<ul>
  <li><a href="https://forum.rustyll.com">Rustyll Forum</a></li>
  <li><a href="https://discord.gg/rustyll">Rustyll Discord</a></li>
  <li><a href="https://github.com/rustyll/rustyll/issues">GitHub Issues</a></li>
</ul>

  </article>
  
  <!-- Mobile Table of Contents -->
  <div class="mt-8 lg:hidden">
    

<div class="bg-gray-900/30 rounded-lg border border-gray-800 overflow-hidden sticky top-24 ">
  <div class="border-b border-gray-800 px-4 py-2.5 flex items-center bg-black/30">
    <svg class="w-4 h-4 text-rust mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
    </svg>
    <h3 class="text-white font-medium text-sm">On this page</h3>
  </div>
  
  <div class="px-3 py-3 max-h-[calc(100vh-260px)] overflow-y-auto custom-scrollbar" id="table-of-contents">
    
    
      <ul class="space-y-1 text-sm pr-2">
        
          
            
          
          
          
          
          
          
          <li>
            <a href="#installation" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Installation
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#automatic-migration" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Automatic Migration
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#directory-structure-differences" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Directory Structure Differences
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#content-conversion" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Content Conversion
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#template-conversion" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Template Conversion
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#configuration-conversion" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Configuration Conversion
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#data-system-conversion" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Data System Conversion
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#helpers-to-filters-and-tags" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Helpers to Filters and Tags
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#collections" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Collections
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#performance-improvements" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Performance Improvements
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#troubleshooting-common-issues" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Troubleshooting Common Issues
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#migration-checklist" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Migration Checklist
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#need-help" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Need Help?
              
            </a>
          </li>
          
          
          
        
      </ul>
    
  </div>
  
  <style>
    /* Active TOC item styles */
    #table-of-contents .active-link {
      color: rgb(249, 115, 22) !important;
      font-weight: 500;
      transform: translateX(3px);
    }
    
    #table-of-contents a {
      position: relative;
      transition: all 0.2s ease;
    }
    
    #table-of-contents .active-link::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      height: 5px;
      width: 5px;
      border-radius: 50%;
      background-color: rgb(249, 115, 22);
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const tocLinks = document.querySelectorAll('#table-of-contents a');
      
      // Add click handler for smooth scrolling
      tocLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
          });
        });
      });
      
      // Highlight current section on scroll
      window.addEventListener('scroll', function() {
        const scrollPos = window.scrollY;
        
        tocLinks.forEach(link => {
          const targetId = link.getAttribute('href').substring(1);
          const targetElement = document.getElementById(targetId);
          
          if (targetElement) {
            const rect = targetElement.getBoundingClientRect();
            
            if (rect.top <= 100 && rect.bottom >= 100) {
              tocLinks.forEach(l => l.classList.remove('active-link'));
              link.classList.add('active-link');
            }
          }
        });
      });
    });
  </script>
</div> 
  </div>
  
  <!-- Navigation between pages -->
  

<div class="flex items-center justify-between space-x-4 pt-6 mt-12 border-t border-gray-800 mt-8">
  
    <div></div>
  
  
  
    <div></div>
  
</div> 
  
  <!-- Edit suggestion -->
  <div class="mt-12 bg-gray-900/30 rounded-lg p-6 border border-gray-800 flex flex-col md:flex-row items-center gap-4 justify-between">
    <div>
      <h3 class="text-white font-medium mb-1">Found an issue with this page?</h3>
      <p class="text-gray-400 text-sm">Help us improve the documentation by submitting a pull request.</p>
    </div>
    



<a href="https://github.com/betterwebinit/rustyll/blob/master//opt/buildhome/repo/_docs/migrating/assemble-to-rustyll.md" 
   target="_blank" 
   rel="noopener noreferrer"
   class="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-rust transition-colors duration-200 group px-3 py-1.5 bg-black/20 rounded-md border border-gray-800 hover:border-rust/30 ">
  <svg class="w-4 h-4 transition-transform duration-200 group-hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
  </svg>
  <span>Improve this page</span>
</a> 
  </div>
</div> 
        </div>
        
        <!-- Table of contents column -->
        <div class="lg:w-1/5 order-3 hidden lg:block lg:sticky lg:self-start lg:top-24 lg:max-h-screen">
          

<div class="bg-gray-900/30 rounded-lg border border-gray-800 overflow-hidden sticky top-24 ">
  <div class="border-b border-gray-800 px-4 py-2.5 flex items-center bg-black/30">
    <svg class="w-4 h-4 text-rust mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
    </svg>
    <h3 class="text-white font-medium text-sm">On this page</h3>
  </div>
  
  <div class="px-3 py-3 max-h-[calc(100vh-260px)] overflow-y-auto custom-scrollbar" id="table-of-contents">
    
    
      <ul class="space-y-1 text-sm pr-2">
        
          
            
          
          
          
          
          
          
          <li>
            <a href="#installation" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Installation
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#automatic-migration" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Automatic Migration
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#directory-structure-differences" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Directory Structure Differences
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#content-conversion" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Content Conversion
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#template-conversion" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Template Conversion
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#configuration-conversion" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Configuration Conversion
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#data-system-conversion" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Data System Conversion
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#helpers-to-filters-and-tags" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Helpers to Filters and Tags
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#collections" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Collections
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#performance-improvements" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Performance Improvements
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#troubleshooting-common-issues" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Troubleshooting Common Issues
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#migration-checklist" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Migration Checklist
              
            </a>
          </li>
          
          
          
        
          
          
          
          
          
          
          <li>
            <a href="#need-help" class="text-gray-400 hover:text-rust transition-colors duration-200 block px-2 py-1 hover:bg-black/20 rounded font-medium">
              
                Need Help?
              
            </a>
          </li>
          
          
          
        
      </ul>
    
  </div>
  
  <style>
    /* Active TOC item styles */
    #table-of-contents .active-link {
      color: rgb(249, 115, 22) !important;
      font-weight: 500;
      transform: translateX(3px);
    }
    
    #table-of-contents a {
      position: relative;
      transition: all 0.2s ease;
    }
    
    #table-of-contents .active-link::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      height: 5px;
      width: 5px;
      border-radius: 50%;
      background-color: rgb(249, 115, 22);
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const tocLinks = document.querySelectorAll('#table-of-contents a');
      
      // Add click handler for smooth scrolling
      tocLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
          });
        });
      });
      
      // Highlight current section on scroll
      window.addEventListener('scroll', function() {
        const scrollPos = window.scrollY;
        
        tocLinks.forEach(link => {
          const targetId = link.getAttribute('href').substring(1);
          const targetElement = document.getElementById(targetId);
          
          if (targetElement) {
            const rect = targetElement.getBoundingClientRect();
            
            if (rect.top <= 100 && rect.bottom >= 100) {
              tocLinks.forEach(l => l.classList.remove('active-link'));
              link.classList.add('active-link');
            }
          }
        });
      });
    });
  </script>
</div> 
        </div>
      </div>
    </div>
  </section>
 -->
  </div>
</div>

Converts to:

# Rustyll (_includes/shared/card.html)
<div class="card">
  <h3><!--  --></h3>
  <div class="content">
    <!--  -->
  </div>
</div>

Ruby Components

Bridgetown’s Ruby components convert to Liquid includes:

# Bridgetown (src/_components/shared/author_bio.rb)
class Shared::AuthorBio < Bridgetown::Component
  def initialize(author:)
    @author = site.data.authors[author]
  end
end

# Bridgetown (src/_components/shared/author_bio.erb)
<div class="author-bio">
  <h3><%= @author.name %></h3>
  <p><%= @author.bio %></p>
</div>

Converts to:

# Rustyll (_includes/shared/author_bio.html)
<!--  -->
<div class="author-bio">
  <h3><!--  --></h3>
  <p><!--  --></p>
</div>

Asset Pipeline

Bridgetown’s esbuild/webpack assets convert to Rustyll’s asset structure:

Bridgetown	Rustyll	Notes
frontend/javascript/	assets/js/	JavaScript files
frontend/styles/	_sass/ and assets/css/	CSS/SCSS files
frontend/images/	assets/images/	Image files
import statements	Standard includes	Asset references

Plugins

Bridgetown plugins convert to Rustyll plugins:

Bridgetown Plugin	Rustyll Equivalent
bridgetown-feed	Built-in feed functionality
bridgetown-seo-tag	rustyll-seo
bridgetown-sitemap	rustyll-sitemap
bridgetown-minify-html	rustyll-minify-html
Ruby-based plugins	Rust-based plugins

Performance Improvements

Rustyll offers significant performance advantages over Ruby-based Bridgetown:

# Rustyll performance options
threads: auto  # Use all available CPU cores
incremental: true  # Enable incremental builds
cache:
  enabled: true
  strategy: aggressive

Benefits include:

1. Build Speed: 10-20x faster builds
2. Memory Usage: Significantly lower resource consumption
3. Parallelism: Utilizes all CPU cores efficiently

Troubleshooting Common Issues

Ruby Components

If you use Ruby components in Bridgetown:

1. Convert to Liquid includes using the include tag
2. Break complex components into smaller, more focused includes
3. Use data files for dynamic configuration

Front-end Integration

If you rely on Bridgetown’s frontend integration:

1. Move JavaScript to standard asset directories
2. Configure scripts in individual HTML files
3. Use simpler build processes for assets

Ruby Helpers

If you use Ruby helpers in Bridgetown:

1. Look for equivalent Liquid filters in Rustyll
2. Consider using custom Liquid filters via plugins
3. Simplify template logic where possible

Content Collections

Bridgetown’s and Rustyll’s collections work similarly:

# _config.yml
collections:
  products:
    output: true
    permalink: /products/:name/
    sort_by: price
    sort_direction: ascending

Migration Checklist

• Install Rust and Rustyll
• Back up your Bridgetown site
• Run the migration command
• Review content and front matter
• Check templates and includes
• Test component conversions
• Verify asset pipeline works
• Build with rustyll build
• Preview site with rustyll serve
• Test responsive design
• Fix any styling issues
• Update deployment workflows

Need Help?

• Rustyll Forum
• Rustyll Discord
• GitHub Issues