Liquid Templates Guide

Minecraft Mods & Packs Showcase
Complete guide to using Liquid templating in Jekyll.

  ...

Minecraft Mods & Packs Showcase              # From _config.yml
Browse curated Minecraft mods, resource packs, datapacks, modpacks and plugins from our organization.

https://abc-site.devvyy.xyz
2025-12-17 01:31:20 +0000               # Build timestamp
{% assign page_lang = page.url | split: '/' | second %}
{% if page_lang == 'fr' %}
{% assign page_lang = 'fr' %}
{% else %}
{% assign page_lang = 'en' %}
{% endif %}
{% assign t = site.data[page_lang] %}

<section class="hero" style="min-height: 60vh; display: flex; align-items: center; justify-content: center;">
  <div class="hero-card" style="text-align: center; max-width: 600px;">
    <div style="font-size: 120px; font-weight: 700; color: var(--accent-primary); margin-bottom: 24px; line-height: 1;">
      404
    </div>
    <h1 style="margin: 0 0 16px 0; font-size: 32px;">{{ t.error_404_title }}</h1>
    <p class="muted" style="font-size: 16px; margin-bottom: 32px;">{{ t.error_404_message }}</p>
    
    <div class="cta-row" style="flex-direction: column; gap: 12px;">
      <a class="btn primary" href="{% if page_lang == 'fr' %}/abc-site/fr/{% else %}/abc-site/{% endif %}">
        <i class="fas fa-home"></i> {{ t.error_404_back_home }}
      </a>
      <a class="btn ghost" href="{% if page_lang == 'fr' %}/abc-site/fr/projects/{% else %}/abc-site/projects/{% endif %}">
        <i class="fas fa-list"></i> {{ t.error_404_browse }}
      </a>
    </div>

    <div style="margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border);">
      <p class="muted" style="font-size: 13px; margin: 0;">
        {% if page_lang == 'fr' %}
          Si vous pensez que c'est une erreur, <a href="{{ '/contact/' | relative_url }}" style="color: var(--accent-primary); text-decoration: none;">contactez-nous</a>.
        {% else %}
          If you think this is a mistake, <a href="{{ '/contact/' | relative_url }}" style="color: var(--accent-primary); text-decoration: none;">contact us</a>.
        {% endif %}
      </p>
    </div>

  </div>
</section>

<style>
  .cta-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 640px) {
    .hero-card {
      padding: 32px 16px !important;
    }
    
    .cta-row {
      flex-direction: column;
      gap: 12px;
    }
    
    .hero-card h1 {
      font-size: 24px !important;
    }
  }
</style>
<section class="hero">
  <div class="hero-card">
    <h1>About Us</h1>
    <p class="muted">A community-driven showcase for the best Minecraft mods, resource packs, datapacks, modpacks, and plugins.</p>
  </div>
</section>

<section class="section">
  <h2>Our Mission</h2>
  <p class="muted">To provide an organized, beautiful, and accessible platform for discovering and showcasing high-quality Minecraft content.</p>
  
  <div class="grid">
    <div class="card">
      <h3><i class="fa-solid fa-bullseye"></i> Curated Collection</h3>
      <p>We handpick projects from the Modrinth ecosystem, ensuring quality and relevance for our community.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-users"></i> Community Focused</h3>
      <p>Built by and for the Minecraft community. Your feedback and contributions shape our platform.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-code"></i> Open Source</h3>
      <p>Completely open-source and transparent. Fork, modify, and contribute on GitHub.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-bolt"></i> Fast & Reliable</h3>
      <p>Static site hosted on GitHub Pages. Zero downtime, global CDN, instant loading.</p>
    </div>
  </div>
</section>

<section class="section">
  <h2>How It Works</h2>
  <div class="grid">
    <div class="card">
      <h3><i class="fa-solid fa-database"></i> Live Data</h3>
      <p>We sync project data daily from Modrinth, keeping our showcase fresh and up-to-date with the latest versions and downloads.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-filter"></i> Smart Filtering</h3>
      <p>Filter projects by type, loader, and game version. Find exactly what you're looking for in seconds.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-chart-line"></i> Statistics</h3>
      <p>Real-time statistics show total downloads, supported versions, popular categories, and trending projects.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-link"></i> Direct Links</h3>
      <p>Every project links directly to Modrinth, ensuring you always download from the official source.</p>
    </div>
  </div>
</section>

<section class="section">
  <h2>Get Involved</h2>
  <div class="grid">
    <div class="card">
      <h3><i class="fa-brands fa-discord"></i> Join Discord</h3>
      <p class="muted">Chat with our community, get support, and suggest improvements.</p>
      {% if site.social.discord %}
        <a class="btn primary" href="{{ site.social.discord }}" target="_blank" rel="noopener">Open Discord</a>
      {% endif %}
    </div>
    <div class="card">
      <h3><i class="fa-brands fa-github"></i> Contribute</h3>
      <p class="muted">Found a bug? Have an idea? Star and contribute to our repository.</p>
      {% if site.social.github %}
        <a class="btn ghost" href="{{ site.social.github }}" target="_blank" rel="noopener">View on GitHub</a>
      {% endif %}
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-heart"></i> Support</h3>
      <p class="muted">Enjoying the platform? Follow our socials and spread the word!</p>
      {% if site.social.twitter %}
        <a class="btn ghost" href="{{ site.social.twitter }}" target="_blank" rel="noopener">Follow Twitter</a>
      {% endif %}
    </div>
  </div>
</section>

<section class="section">
  <h2>Our Values</h2>
  <div class="grid">
    <div class="card">
      <h3>Accessibility</h3>
      <p>We believe everyone should have access to quality Minecraft content, regardless of technical skill or platform.</p>
    </div>
    <div class="card">
      <h3>Transparency</h3>
      <p>Open source code, public data, and clear communication. We have nothing to hide.</p>
    </div>
    <div class="card">
      <h3>Community</h3>
      <p>Built together, not for profit. We prioritize creator and player needs over monetization.</p>
    </div>
    <div class="card">
      <h3>Quality</h3>
      <p>Every project showcased meets our standards for functionality, documentation, and community support.</p>
    </div>
  </div>
</section>

<section class="section">
  <h2>Contact & Support</h2>
  <div class="grid">
    <div class="card">
      <h3><i class="fa-solid fa-envelope"></i> Need Help?</h3>
      <p class="muted">Have questions? Check our documentation or reach out on Discord.</p>
      <a class="btn primary" href="{{ '/docs/' | relative_url }}">Read Docs</a>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-bug"></i> Found a Bug?</h3>
      <p class="muted">Report issues and suggest features on our GitHub repository.</p>
      {% if site.social.github %}
        <a class="btn primary" href="{{ site.social.github }}/issues" target="_blank" rel="noopener">Report Issue</a>
      {% endif %}
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-handshake"></i> Let's Collaborate</h3>
      <p class="muted">Interested in partnering or featuring your project? Let's talk!</p>
      {% if site.social.discord %}
        <a class="btn ghost" href="{{ site.social.discord }}" target="_blank" rel="noopener">Chat with Us</a>
      {% endif %}
    </div>
  </div>
</section>
<section class="section">
  <h1>Blog</h1>
  <p class="muted">Updates from the team — releases, dev logs, and tips.</p>

  <div class="filters" style="margin: 12px 0 20px; display:flex; gap:8px; flex-wrap:wrap;">
    {% assign all_tags = site.tags %}
    {% for tag in all_tags %}
      <a href="{{ '/blog/#' | append: tag[0] | relative_url }}" style="padding:6px 10px; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--text-secondary);">#{{ tag[0] }}</a>
    {% endfor %}
  </div>

  <div class="filters" style="margin: 0 0 24px; display:flex; gap:8px; flex-wrap:wrap;">
    {% assign all_categories = site.categories %}
    {% for category in all_categories %}
      <a href="{{ '/blog/#' | append: category[0] | relative_url }}" style="padding:6px 10px; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--text-secondary);">{{ category[0] }}</a>
    {% endfor %}
  </div>

  <div class="post-list" style="display: grid; gap: 16px;">
    {% assign posts = site.posts | where_exp: 'p', 'p.published != false' %}
    {% for post in posts %}
    <article style="border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-primary);">
      <h2 style="margin: 0;">
        <a href="{{ post.url | relative_url }}" style="color: var(--text); text-decoration: none;">{{ post.title }}</a>
      </h2>
      <p class="muted" style="margin: 6px 0 12px;">{{ post.date | date: "%B %d, %Y" }} • {{ post.author | default: site.site.name }}</p>
      {% if post.excerpt %}
        <p style="margin: 0 0 8px;">{{ post.excerpt }}</p>
      {% endif %}
      {% if post.tags %}
        <div style="margin:8px 0;">
          {% for tag in post.tags %}
            <span style="display:inline-block; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; margin-right: 6px; font-size: 12px;">#{{ tag }}</span>
          {% endfor %}
        </div>
      {% endif %}
      <a href="{{ post.url | relative_url }}" class="button" style="display:inline-block; padding: 8px 12px; background: var(--accent-primary); color: #000; border-radius: var(--radius); text-decoration: none;">Read More</a>
    </article>
    {% endfor %}

    {% if posts.size == 0 %}
      <p class="muted">No posts yet. Stay tuned!</p>
    {% endif %}

  </div>
</section>
<section class="hero">
  <div class="hero-card">
    <h1>Community & Contributing</h1>
    <p class="muted">Learn how to contribute to the ABC showcase and get involved.</p>
  </div>
</section>

<section class="section">
  <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
    {% assign category_docs = site.docs | where: "category", "Community" %}
    {% for doc in category_docs %}
      <div class="card">
        <h3>{{ doc.title }}</h3>
        <p class="muted" style="font-size: 13px; margin-bottom: 12px;">{{ doc.description }}</p>
        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
          {% for tag in doc.tags %}
            <span style="display: inline-block; padding: 4px 8px; background: rgba(27, 217, 111, 0.1); color: var(--accent-primary); border-radius: 4px; font-size: 12px;">#{{ tag }}</span>
          {% endfor %}
        </div>
        <a class="btn primary" href="{{ doc.url | relative_url }}" style="width: 100%; display: block; text-align: center;">Read More</a>
      </div>
    {% endfor %}
  </div>
</section>

<section class="section">
  <div style="text-align: center;">
    <p><a href="{{ '/docs/' | relative_url }}">← Back to all documentation</a></p>
  </div>
</section>
<section class="hero">
  <div class="hero-card">
    <h1>Developer Resources</h1>
    <p class="muted">Technical documentation, architecture, and API reference.</p>
  </div>
</section>

<section class="section">
  <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
    {% assign category_docs = site.docs | where: "category", "Developer" %}
    {% for doc in category_docs %}
      <div class="card">
        <h3>{{ doc.title }}</h3>
        <p class="muted" style="font-size: 13px; margin-bottom: 12px;">{{ doc.description }}</p>
        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
          {% for tag in doc.tags %}
            <span style="display: inline-block; padding: 4px 8px; background: rgba(27, 217, 111, 0.1); color: var(--accent-primary); border-radius: 4px; font-size: 12px;">#{{ tag }}</span>
          {% endfor %}
        </div>
        <a class="btn primary" href="{{ doc.url | relative_url }}" style="width: 100%; display: block; text-align: center;">Read More</a>
      </div>
    {% endfor %}
  </div>
</section>

<section class="section">
  <div style="text-align: center;">
    <p><a href="{{ '/docs/' | relative_url }}">← Back to all documentation</a></p>
  </div>
</section>
<section class="hero">
  <div class="hero-card">
    <h1>Help & Troubleshooting</h1>
    <p class="muted">Find answers to common questions and fix issues quickly.</p>
  </div>
</section>

<section class="section">
  <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
    {% assign category_docs = site.docs | where: "category", "Help" %}
    {% for doc in category_docs %}
      <div class="card">
        <h3>{{ doc.title }}</h3>
        <p class="muted" style="font-size: 13px; margin-bottom: 12px;">{{ doc.description }}</p>
        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
          {% for tag in doc.tags %}
            <span style="display: inline-block; padding: 4px 8px; background: rgba(27, 217, 111, 0.1); color: var(--accent-primary); border-radius: 4px; font-size: 12px;">#{{ tag }}</span>
          {% endfor %}
        </div>
        <a class="btn primary" href="{{ doc.url | relative_url }}" style="width: 100%; display: block; text-align: center;">Read More</a>
      </div>
    {% endfor %}
  </div>
</section>

<section class="section">
  <div style="text-align: center;">
    <p><a href="{{ '/docs/' | relative_url }}">← Back to all documentation</a></p>
  </div>
</section>
<section class="hero">
  <div class="hero-card">
    <h1>Setup & Configuration</h1>
    <p class="muted">Get the ABC showcase installed and configured for your needs.</p>
  </div>
</section>

<section class="section">
  <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
    {% assign category_docs = site.docs | where: "category", "Setup" %}
    {% for doc in category_docs %}
      <div class="card">
        <h3>{{ doc.title }}</h3>
        <p class="muted" style="font-size: 13px; margin-bottom: 12px;">{{ doc.description }}</p>
        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
          {% for tag in doc.tags %}
            <span style="display: inline-block; padding: 4px 8px; background: rgba(27, 217, 111, 0.1); color: var(--accent-primary); border-radius: 4px; font-size: 12px;">#{{ tag }}</span>
          {% endfor %}
        </div>
        <a class="btn primary" href="{{ doc.url | relative_url }}" style="width: 100%; display: block; text-align: center;">Read More</a>
      </div>
    {% endfor %}
  </div>
</section>

<section class="section">
  <div style="text-align: center;">
    <p><a href="{{ '/docs/' | relative_url }}">← Back to all documentation</a></p>
  </div>
</section>
<section class="hero">
  <div class="hero-card">
    <h1>Styling & Customization</h1>
    <p class="muted">Customize colors, themes, and appearance of your ABC showcase.</p>
  </div>
</section>

<section class="section">
  <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
    {% assign category_docs = site.docs | where: "category", "Styling" %}
    {% for doc in category_docs %}
      <div class="card">
        <h3>{{ doc.title }}</h3>
        <p class="muted" style="font-size: 13px; margin-bottom: 12px;">{{ doc.description }}</p>
        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
          {% for tag in doc.tags %}
            <span style="display: inline-block; padding: 4px 8px; background: rgba(27, 217, 111, 0.1); color: var(--accent-primary); border-radius: 4px; font-size: 12px;">#{{ tag }}</span>
          {% endfor %}
        </div>
        <a class="btn primary" href="{{ doc.url | relative_url }}" style="width: 100%; display: block; text-align: center;">Read More</a>
      </div>
    {% endfor %}
  </div>
</section>

<section class="section">
  <div style="text-align: center;">
    <p><a href="{{ '/docs/' | relative_url }}">← Back to all documentation</a></p>
  </div>
</section>
<section class="hero">
  <div class="hero-card">
    <h1>User Guide</h1>
    <p class="muted">Everything you need to know as a user or project manager.</p>
  </div>
</section>

<section class="section">
  <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
    {% assign category_docs = site.docs | where: "category", "User Guide" %}
    {% for doc in category_docs %}
      <div class="card">
        <h3>{{ doc.title }}</h3>
        <p class="muted" style="font-size: 13px; margin-bottom: 12px;">{{ doc.description }}</p>
        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
          {% for tag in doc.tags %}
            <span style="display: inline-block; padding: 4px 8px; background: rgba(27, 217, 111, 0.1); color: var(--accent-primary); border-radius: 4px; font-size: 12px;">#{{ tag }}</span>
          {% endfor %}
        </div>
        <a class="btn primary" href="{{ doc.url | relative_url }}" style="width: 100%; display: block; text-align: center;">Read More</a>
      </div>
    {% endfor %}
  </div>
</section>

<section class="section">
  <div style="text-align: center;">
    <p><a href="{{ '/docs/' | relative_url }}">← Back to all documentation</a></p>
  </div>
</section>
<section class="hero">
  <div class="hero-card">
    <p class="muted" style="margin-bottom: 6px; letter-spacing: 0.5px; text-transform: uppercase; font-size: 12px;">Releases</p>
    <h1>Changelog</h1>
    <p class="muted">Track the freshest updates across ABC mods, modpacks, resource packs, and datapacks.</p>
  </div>
</section>

<section class="section">
  <div style="display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;">
    <div style="display: flex; gap: 10px; align-items: center;">
      <i class="fa-solid fa-rocket" style="color: var(--accent-primary);"></i>
      <p class="muted" style="margin: 0;">Sorted by latest update time</p>
    </div>
    <div id="changelog-count" class="muted" style="font-size: 14px;"></div>
  </div>

  <div id="changelog-list" class="grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px;"></div>
  <div id="changelog-empty" class="muted" style="display: none; text-align: center; margin: 24px 0;">No releases found yet. Add entries to <code>data/mods.json</code> or <code>data/modpacks.json</code>.</div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const listEl = document.getElementById('changelog-list');
    const countEl = document.getElementById('changelog-count');
    const emptyEl = document.getElementById('changelog-empty');

    function formatDate(value) {
      if (!value) return 'N/A';
      const date = new Date(value);
      return isNaN(date.getTime()) ? 'N/A' : date.toLocaleDateString();
    }

    function renderCard(item) {
      const versions = (item.game_versions || []).slice(0, 4).map(v => `<span class="version-badge">${v}</span>`).join('');
      const categories = (item.categories || []).slice(0, 3).map(cat => `<span class="category-pill">${cat}</span>`).join('');
      const updated = formatDate(item.updated || item.date_modified || item.published);
      const typeLabel = (item.project_type || item.type || 'mod').replace(/_/g, ' ');

      return `
        <article class="card">
          <div style="display:flex;align-items:center;gap:12px;">
            ${item.icon_url ? `<img src="${item.icon_url}" alt="${item.name}" style="width:48px;height:48px;border-radius:12px;border:1px solid var(--border);object-fit:cover;" />` : '<div style="width:48px;height:48px;border-radius:12px;border:1px dashed var(--border);"></div>'}
            <div>
              <p class="muted" style="margin:0;font-size:12px;text-transform:uppercase;letter-spacing:0.6px;">${typeLabel}</p>
              <h3 style="margin:4px 0 0;">${item.title || item.name}</h3>
            </div>
          </div>
          <p class="muted" style="margin: 4px 0 0;">${item.short_description || item.description || 'No description available.'}</p>
          <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
            ${versions || '<span class="version-badge">All versions</span>'}
          </div>
          <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
            ${categories}
          </div>
          <div style="display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--text-muted);">
            <span><i class="fa-regular fa-clock"></i> Updated ${updated}</span>
            <span><i class="fa-solid fa-download"></i> ${(item.downloads || 0).toLocaleString()} downloads</span>
            <span><i class="fa-solid fa-users"></i> ${(item.followers || 0).toLocaleString()} followers</span>
          </div>
          <div style="display:flex;gap:8px;flex-wrap:wrap;">
            ${item.download ? `<a class="btn ghost" href="${item.download}" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square"></i> View Project</a>` : ''}
            ${item.source_url ? `<a class="btn ghost" href="${item.source_url}" target="_blank"><i class="fa-brands fa-github"></i> Source</a>` : ''}
          </div>
        </article>
      `;
    }

    async function fetchJson(url) {
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`Request failed: ${res.status}`);
        return await res.json();
      } catch (err) {
        console.warn('Changelog fetch failed', err);
        return [];
      }
    }

    async function loadChangelog() {
      const [mods, modpacks] = await Promise.all([
        fetchJson('{{ '/data/mods.json' | relative_url }}'),
        fetchJson('{{ '/data/modpacks.json' | relative_url }}')
      ]);

      const items = [...mods, ...modpacks].map(item => ({
        ...item,
        updated: item.updated || item.date_modified || item.published || null,
      })).filter(item => item);

      if (!items.length) {
        emptyEl.style.display = 'block';
        countEl.textContent = '';
        return;
      }

      items.sort((a, b) => {
        const dateA = new Date(a.updated || 0).getTime();
        const dateB = new Date(b.updated || 0).getTime();
        return dateB - dateA;
      });

      listEl.innerHTML = items.map(renderCard).join('');
      countEl.textContent = `${items.length} releases`;
    }

    loadChangelog();
  });
</script>
<div class="hero" style="background-image: url('{{ '/assets/images/blocks.svg' | relative_url }}'); background-size: cover; background-position: center; min-height: 120px; padding: 0.5rem 0 !important;">
  <div class="hero-content">
    <h1 class="hero-title fade-in">Compare Modpacks</h1>
    <p class="hero-description fade-in-up">Compare features, performance, and content across modpacks</p>
  </div>
</div>

<div class="comparison-container">
  <div class="comparison-header">
    <h2>Select Modpacks to Compare</h2>
    <p>Choose up to 3 modpacks to compare side-by-side</p>
  </div>

  <div class="comparison-selector">
    <div class="selector-box">
      <label for="compare-1">Modpack 1</label>
      <select id="compare-1" class="modpack-select">
        <option value="">Select a modpack...</option>
      </select>
    </div>
    <div class="selector-box">
      <label for="compare-2">Modpack 2</label>
      <select id="compare-2" class="modpack-select">
        <option value="">Select a modpack...</option>
      </select>
    </div>
    <div class="selector-box">
      <label for="compare-3">Modpack 3</label>
      <select id="compare-3" class="modpack-select">
        <option value="">Select a modpack...</option>
      </select>
    </div>
  </div>

  <div class="comparison-actions">
    <button id="compare-btn" class="btn btn-primary" disabled>
      <i class="fas fa-balance-scale"></i> Compare Selected
    </button>
    <button id="clear-btn" class="btn btn-secondary">
      <i class="fas fa-times"></i> Clear All
    </button>
  </div>

  <div id="comparison-results" class="comparison-results hidden">
    <div class="comparison-table-wrapper">
      <table class="comparison-table">
        <thead>
          <tr>
            <th class="feature-col">Feature</th>
            <th class="modpack-col" id="header-1"></th>
            <th class="modpack-col" id="header-2"></th>
            <th class="modpack-col" id="header-3"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="feature-name"><i class="fas fa-image"></i> Icon</td>
            <td id="icon-1"></td>
            <td id="icon-2"></td>
            <td id="icon-3"></td>
          </tr>
          <tr>
            <td class="feature-name"><i class="fas fa-layer-group"></i> Type</td>
            <td id="type-1"></td>
            <td id="type-2"></td>
            <td id="type-3"></td>
          </tr>
          <tr>
            <td class="feature-name"><i class="fas fa-info-circle"></i> Description</td>
            <td id="description-1"></td>
            <td id="description-2"></td>
            <td id="description-3"></td>
          </tr>
          <tr>
            <td class="feature-name"><i class="fas fa-gamepad"></i> Supported MC Versions</td>
            <td id="version-1"></td>
            <td id="version-2"></td>
            <td id="version-3"></td>
          </tr>
          <tr>
            <td class="feature-name"><i class="fas fa-download"></i> Downloads</td>
            <td id="downloads-1"></td>
            <td id="downloads-2"></td>
            <td id="downloads-3"></td>
          </tr>
          <tr>
            <td class="feature-name"><i class="fas fa-users"></i> Followers</td>
            <td id="followers-1"></td>
            <td id="followers-2"></td>
            <td id="followers-3"></td>
          </tr>
          <tr>
            <td class="feature-name"><i class="fas fa-calendar"></i> Last Updated</td>
            <td id="updated-1"></td>
            <td id="updated-2"></td>
            <td id="updated-3"></td>
          </tr>
          <tr>
            <td class="feature-name"><i class="fas fa-tag"></i> Categories</td>
            <td id="categories-1"></td>
            <td id="categories-2"></td>
            <td id="categories-3"></td>
          </tr>
          <tr>
            <td class="feature-name"><i class="fas fa-link"></i> Links</td>
            <td id="links-1"></td>
            <td id="links-2"></td>
            <td id="links-3"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
.comparison-container {
  max-width: 1400px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.comparison-header {
  text-align: center;
  margin-bottom: 2rem;
}

.comparison-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.comparison-header p {
  color: var(--text-muted);
}

.comparison-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.selector-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.selector-box label {
  font-weight: 600;
  color: var(--text);
}

.modpack-select {
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.modpack-select:hover {
  border-color: var(--accent);
}

.modpack-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.1);
}

.comparison-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 157, 0.3);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text);
  border: 2px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-muted);
}

.comparison-results {
  opacity: 1;
  transition: opacity 0.3s;
}

.comparison-results.hidden {
  display: none;
  opacity: 0;
}

.comparison-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 2px solid var(--border);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
}

.comparison-table thead {
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.comparison-table th,
.comparison-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.comparison-table th {
  font-weight: 700;
  color: var(--text);
}

.feature-col {
  width: 200px;
  font-weight: 600;
  background: var(--bg-secondary);
  position: sticky;
  left: 0;
  z-index: 5;
}

.feature-name {
  font-weight: 600;
  background: var(--bg-secondary);
  position: sticky;
  left: 0;
  z-index: 5;
}

.feature-name i {
  margin-right: 0.5rem;
  color: var(--accent);
}

.modpack-col {
  min-width: 250px;
}

.comparison-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.modpack-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}

.category-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  font-size: 0.875rem;
  margin: 0.25rem;
}

.link-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  border-radius: 8px;
  margin: 0.25rem;
  transition: all 0.2s;
}

.link-button:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .comparison-selector {
    grid-template-columns: 1fr;
  }
  
  .comparison-actions {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
  
  .feature-col,
  .feature-name {
    position: static;
  }
}
</style>

<script>
// Populate selects with any content type
const modpacksData = {{ site.data.modpacks | default: "[]" | jsonify }};
const modsData = {{ site.data.mods | default: "[]" | jsonify }};

// Normalize datasets and merge
function parseData(raw, fallbackType) {
  const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw || [];
  return Array.isArray(parsed)
    ? parsed.map((item) => ({
        ...item,
        content_type: item.type || item.project_type || fallbackType,
      }))
    : [];
}

const items = [
  ...parseData(modpacksData, 'modpack'),
  ...parseData(modsData, 'mod'),
];

const selects = ['compare-1', 'compare-2', 'compare-3'];

if (Array.isArray(items) && items.length > 0) {
  selects.forEach((selectId) => {
    const select = document.getElementById(selectId);
    items.forEach((item) => {
      const option = document.createElement('option');
      option.value = item.id;
      const typeLabel = (item.content_type || 'modpack').replace(/_/g, ' ');
      option.textContent = `${item.name} (${typeLabel})`;
      select.appendChild(option);
    });
  });
} else {
  // Show message if no content available
  document.querySelector('.comparison-selector').innerHTML =
    '<p style="text-align:center;color:var(--text-muted);padding:2rem;">No content available for comparison. Add data to _data/modpacks.json or _data/mods.json to enable this feature.</p>';
  document.querySelector('.comparison-actions').style.display = 'none';
}

// Enable/disable compare button (guard if DOM missing)
function updateCompareButton() {
  const compareBtn = document.getElementById('compare-btn');
  if (!compareBtn) return;
  const selected = selects
    .map(id => document.getElementById(id))
    .filter(Boolean)
    .map(el => el.value)
    .filter(Boolean);
  compareBtn.disabled = selected.length < 2;
}

selects.forEach(id => {
  const el = document.getElementById(id);
  if (el) el.addEventListener('change', updateCompareButton);
});

const compareBtnEl = document.getElementById('compare-btn');
const clearBtnEl = document.getElementById('clear-btn');

// Compare functionality
compareBtnEl?.addEventListener('click', () => {
  const selectedIds = selects
    .map(id => document.getElementById(id))
    .filter(Boolean)
    .map(el => el.value)
    .filter(Boolean);
  const selectedItems = selectedIds
    .map(id => items.find(m => m.id === id))
    .filter(Boolean);
  
  // Populate table
  selectedItems.forEach((item, index) => {
    const col = index + 1;
    const typeLabel = (item.content_type || 'modpack').replace(/_/g, ' ');
    
    // Header
    document.getElementById(`header-${col}`).innerHTML = `<strong>${item.name}</strong>`;
    
    // Icon
    document.getElementById(`icon-${col}`).innerHTML = 
      item.icon_url ? `<img src="${item.icon_url}" alt="${item.name}" class="modpack-icon">` : 'N/A';

    // Type
    document.getElementById(`type-${col}`).textContent = typeLabel;
    
    // Description
    document.getElementById(`description-${col}`).textContent = item.short_description || item.description || 'N/A';
    
    // Versions
    const versionBadges = (item.game_versions || []).slice(0, 4).map(v => `<span class="version-badge">${v}</span>`).join('');
    document.getElementById(`version-${col}`).innerHTML = versionBadges || 'N/A';
    
    // Downloads
    document.getElementById(`downloads-${col}`).innerHTML = 
      `<strong>${(item.downloads || 0).toLocaleString()}</strong>`;
    
    // Followers
    document.getElementById(`followers-${col}`).innerHTML = 
      `<strong>${(item.followers || 0).toLocaleString()}</strong>`;
    
    // Updated
    const date = item.date_modified || item.updated;
    const dateText = date ? new Date(date).toLocaleDateString() : 'N/A';
    document.getElementById(`updated-${col}`).textContent = dateText;
    
    // Categories
    const categories = (item.categories || []).map(cat => 
      `<span class="category-pill">${cat}</span>`
    ).join('');
    document.getElementById(`categories-${col}`).innerHTML = categories || 'N/A';
    
    // Links
    const links = [
      item.project_url || item.download ? `<a href="${item.project_url || item.download}" class="link-button" target="_blank"><i class="fas fa-external-link-alt"></i> View Project</a>` : '',
      item.source_url ? `<a href="${item.source_url}" class="link-button" target="_blank"><i class="fab fa-github"></i> Source</a>` : ''
    ].filter(l => l).join('');
    document.getElementById(`links-${col}`).innerHTML = links || 'N/A';
  });
  
  // Clear remaining columns
  for (let i = selectedItems.length + 1; i <= 3; i++) {
    document.getElementById(`header-${i}`).innerHTML = '';
    ['icon', 'description', 'version', 'downloads', 'followers', 'updated', 'categories', 'links'].forEach(field => {
      document.getElementById(`${field}-${i}`).innerHTML = '';
    });
  }
  
  // Show results with animation
  const results = document.getElementById('comparison-results');
  results.classList.remove('hidden');
  setTimeout(() => results.style.opacity = '1', 10);
  
  // Scroll to results
  results.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
document.getElementById('clear-btn').addEventListener('click', () => {
});

// Clear functionality
clearBtnEl?.addEventListener('click', () => {
  selects.forEach(id => {
    const el = document.getElementById(id);
    if (el) el.value = '';
  });
  updateCompareButton();
  const results = document.getElementById('comparison-results');
  if (results) results.classList.add('hidden');
});
</script>
<section class="section">
  <h1>Contact & Support</h1>
  <p class="muted">Reach out for issues, feedback, or collaboration.</p>

  <h2>Fastest ways</h2>
  <ul>
    <li>Discord: <a href="{{ site.social.discord }}" target="_blank" rel="noopener">Join our server</a></li>
    <li>GitHub: <a href="{{ site.social.github }}" target="_blank" rel="noopener">Open an issue</a> on our repos</li>
  </ul>

  <h2>Feedback</h2>
  <p>Use the "Was this helpful?" widget on docs pages for quick feedback. For broader requests, ping us on Discord.</p>
</section>
# Cookie Policy

**Last Updated:** December 2024

We use cookies and similar tracking technologies to enhance your experience on our site. This policy explains what cookies are, how we use them, and your rights regarding them.

## What Are Cookies?

Cookies are small text files stored on your browser or device that help websites remember information about your visits. They can be:

- **Session cookies**: Deleted when you close your browser
- **Persistent cookies**: Remain on your device for a set period
- **First-party cookies**: Set by our domain
- **Third-party cookies**: Set by external services (analytics, ads, etc.)

## Cookies We Use

### Analytics

We use Google Analytics to understand how visitors use our site:

- `_ga` – Identifies unique visitors
- `_ga_*` – Tracks sessions and page views
- `_gat` – Throttles request rate

**Purpose**: Analyzing site traffic and user behavior  
**Retention**: 2 years

### Functional Cookies

- `theme` – Remembers your color theme preference
- `language` – Stores your preferred language

**Purpose**: Improving site usability  
**Retention**: 1 year

### Consent Management

- `cookie_consent` – Stores your cookie preferences
- `cookie_consent_timestamp` – Records when consent was given

**Purpose**: Respecting your privacy choices  
**Retention**: 1 year

## Third-Party Services

We may use services that set their own cookies:

| Service          | Cookies         | Purpose        | Policy                                                |
| ---------------- | --------------- | -------------- | ----------------------------------------------------- |
| Google Analytics | `_ga*`, `_gat`  | Site analytics | [Privacy Policy](https://policies.google.com/privacy) |
| Font Awesome     | Session cookies | Icon delivery  | [Privacy](https://fontawesome.com/privacy)            |
| Discord          | If embedded     | Embeds/widgets | [Privacy](https://discord.com/privacy)                |

## Cookie Preferences

You can manage your cookie preferences using our cookie consent banner at the bottom of the page. You can:

- Accept all cookies
- Reject non-essential cookies
- Customize preferences

### Browser Controls

Most browsers allow you to:

- Block cookies entirely
- Clear cookies on exit
- View stored cookies
- Opt-out of tracking

**Note**: Blocking essential cookies may affect site functionality.

## Your Rights

Under GDPR and similar privacy laws, you have the right to:

- Know what cookies are used
- Opt-out of non-essential cookies
- Request deletion of your data
- Access or port your data

## Contact

If you have questions about our cookie practices:

**Email**: [contact information from site config]

We will respond within 30 days.

## Changes

We may update this policy periodically. Your continued use of the site constitutes acceptance of any changes.

---

_This Cookie Policy is part of our overall Privacy Policy and Terms of Service._
<section class="section">
  <h1>Disclaimer & Liability Waiver</h1>
  <p class="muted">Last updated: December 11, 2025</p>

  <p>This page contains important disclaimers and limitations of liability. Please read carefully before using our website and projects.</p>

  <h2>1. Website & Content Disclaimer</h2>

  <h3>1.1 "As Is" Provision</h3>
  <p>Our website and all materials are provided "AS IS" and "AS AVAILABLE" without warranties of any kind, either express or implied. We make no warranties regarding:</p>
  <ul>
    <li>Accuracy, completeness, or timeliness of information</li>
    <li>Fitness for a particular purpose</li>
    <li>Functionality or performance</li>
    <li>Non-infringement of rights</li>
    <li>Quality or reliability</li>
  </ul>

  <h3>1.2 No Professional Advice</h3>
  <p>Content on our site is for informational purposes only and does not constitute:</p>
  <ul>
    <li>Legal advice</li>
    <li>Technical support (though we'll help if we can)</li>
    <li>Professional consulting</li>
    <li>Warranty or guarantee</li>
  </ul>
  <p>Always consult appropriate professionals for critical decisions.</p>

  <h2>2. Minecraft Project Disclaimer</h2>

  <h3>2.1 No Warranty for Mods/Datapacks/Plugins</h3>
  <p>All our Minecraft projects are provided "AS IS" without any warranty. We do not guarantee:</p>
  <ul>
    <li>The mod will work with your specific Minecraft version</li>
    <li>The mod will work with other mods you have installed (compatibility)</li>
    <li>The mod won't cause crashes or performance issues</li>
    <li>The mod won't corrupt your world or save files</li>
    <li>The mod will continue to be maintained or updated</li>
    <li>The mod is free of bugs or issues</li>
  </ul>

  <h3>2.2 Save File Loss</h3>
  <p><strong>YOU ARE RESPONSIBLE FOR BACKING UP YOUR MINECRAFT WORLDS AND SAVES.</strong></p>
  <ul>
    <li>Always backup important worlds before installing mods</li>
    <li>Test mods in a separate test world first</li>
    <li>Keep multiple backups of valuable worlds</li>
    <li>We are NOT liable for corrupted, lost, or deleted save files</li>
  </ul>

  <h3>2.3 Crashes & Compatibility</h3>
  <ul>
    <li>Mod conflicts, crashes, and performance issues are common in modded Minecraft</li>
    <li>We provide projects "as is" without technical support guarantee</li>
    <li>We'll do our best to help troubleshoot but cannot guarantee solutions</li>
    <li>Some issues may require reinstalling Java, Minecraft, or removing conflicting mods</li>
  </ul>

  <h2>3. Limitation of Liability</h2>

  <h3>3.1 No Liability For</h3>
  <p><strong>In no event shall ABC, its owners, employees, contributors, or partners be liable for:</strong></p>
  <ul>
    <li>Lost or corrupted Minecraft save files or worlds</li>
    <li>Game crashes, performance degradation, or lag</li>
    <li>System damage or instability caused by our projects</li>
    <li>Loss of income, profits, or business opportunities</li>
    <li>Loss of data or information (in any form)</li>
    <li>Any indirect, incidental, special, consequential, or punitive damages</li>
    <li>Damages arising from your use or inability to use our site/projects</li>
    <li>Issues caused by other mods or software on your system</li>
    <li>Your failure to backup important data</li>
    <li>Time or inconvenience</li>
  </ul>
  <p>This applies even if we have been advised of the possibility of such damages.</p>

  <h3>3.2 Damages Cap</h3>
  <p>If any court overrides the above disclaimer, our total liability is limited to <strong>zero dollars</strong> ($0). We are providing these projects for free.</p>

  <h2>4. Assumption of Risk</h2>

  <p>By using our website and projects, you acknowledge and assume all risks associated with:</p>
  <ul>
    <li>Installing and using mods/datapacks/plugins</li>
    <li>Potential loss of save files or worlds</li>
    <li>Game crashes or instability</li>
    <li>Compatibility issues with your setup</li>
    <li>System performance changes</li>
    <li>Following installation instructions incorrectly</li>
    <li>Running outdated Java or Minecraft versions</li>
    <li>Conflicts with other mods or software</li>
  </ul>

  <h2>5. User Responsibility</h2>

  <p>You are responsible for:</p>
  <ul>
    <li>✓ Reading and understanding installation instructions</li>
    <li>✓ Keeping your Minecraft and Java updated</li>
    <li>✓ Backing up your worlds and save files regularly</li>
    <li>✓ Testing mods in a test world first</li>
    <li>✓ Managing your system and mod installations</li>
    <li>✓ Removing conflicting mods if issues arise</li>
    <li>✓ Reporting issues accurately and completely</li>
    <li>✓ Following applicable laws and terms (EULA, etc.)</li>
  </ul>

  <h2>6. Third-Party Services Disclaimer</h2>

  <p>Our website uses third-party services and links:</p>
  <ul>
    <li><strong>Modrinth:</strong> We are not responsible for content, quality, or policies</li>
    <li><strong>GitHub:</strong> External service; we don't control availability or policies</li>
    <li><strong>Discord:</strong> Community platform; moderation is best-effort</li>
    <li><strong>Google Analytics:</strong> Data collection per their privacy policy</li>
  </ul>
  <p>Review each service's terms and privacy policy before using.</p>

  <h2>7. Availability Disclaimer</h2>

  <ul>
    <li>We do not guarantee continuous service availability</li>
    <li>The website may be offline for maintenance without notice</li>
    <li>Projects may be discontinued or archived</li>
    <li>Downloads from third-party sites may become unavailable</li>
    <li>We are not liable for service interruptions or data loss</li>
  </ul>

  <h2>8. Accuracy Disclaimer</h2>

  <ul>
    <li>We strive for accuracy but do not guarantee all information is correct</li>
    <li>Documentation may become outdated</li>
    <li>Minecraft updates may change how our projects work</li>
    <li>We are not liable for decisions based on incorrect information</li>
    <li>Always verify critical information independently</li>
  </ul>

  <h2>9. Health & Safety Disclaimer</h2>

  <p>Using computers for extended periods can cause:</p>
  <ul>
    <li>Eye strain</li>
    <li>Repetitive stress injuries (RSI)</li>
    <li>Sleep disruption</li>
    <li>Posture problems</li>
  </ul>
  <p>Take regular breaks, maintain good posture, and consult a doctor if experiencing discomfort.</p>

  <h2>10. Indemnification</h2>

  <p>You agree to indemnify and hold harmless ABC and its representatives from any claims, damages, or losses arising from:</p>
  <ul>
    <li>Your use of our site or projects</li>
    <li>Violation of these disclaimers or our Terms</li>
    <li>Your violation of any laws or third-party rights</li>
    <li>Your content or actions</li>
  </ul>

  <h2>11. Questions or Concerns?</h2>

  <p>If you don't agree with these disclaimers or have concerns:</p>
  <ul>
    <li>Do not use our site or projects</li>
    <li><a href="{{ '/contact/' | relative_url }}">Contact us</a> with specific concerns</li>
  </ul>

  <hr style="margin: 32px 0; border: none; border-top: 1px solid var(--border);">

  <p class="muted" style="font-size: 12px;">
    <strong>Bottom Line:</strong> Our projects are free. Use at your own risk. Backup your saves. Test before using on important worlds. We're not responsible for any damages. Questions? Ask us.
  </p>
</section>
If you are not redirected automatically, join here: {{ site.social.discord }}
# End User License Agreement (EULA)

**Last Updated:** December 2024

This End User License Agreement ("EULA") is a legal agreement between you and ABC Team governing your use of our projects, mods, datapacks, plugins, and related software ("Software").

## 1. Grant of License

We grant you a non-exclusive, non-transferable, limited license to use the Software for personal, non-commercial purposes, subject to the terms of this agreement.

### Permitted Uses

✅ Install and use on your personal devices  
✅ Create content using the Software (videos, streams, guides)  
✅ Modify the Software for personal use  
✅ Use in private multiplayer servers

### Prohibited Uses

❌ Commercial redistribution without permission  
❌ Reselling modified versions  
❌ Claiming ownership of the Software  
❌ Reverse engineering for competitive purposes  
❌ Removing attribution or license notices

## 2. Intellectual Property Rights

All Software, including code, assets, textures, and designs, are owned by ABC Team or our contributors. You may not claim ownership or use the Software outside the scope of this license.

### Attribution

When using or referencing the Software, you agree to:

- Maintain original credits
- Link to our GitHub or website
- Not remove license files
- Acknowledge ABC Team as creators

## 3. Modifications

You may modify the Software for personal use. However:

- Modified versions cannot be redistributed commercially
- You must maintain original licenses and credits
- We are not responsible for issues caused by your modifications
- Private use of mods is always permitted

## 4. Server Usage

You may:

- Run the Software on private servers
- Run on public servers (community/multiplayer)
- Accept donations (but not force payment)

You must:

- Display credits/links in server descriptions
- Not claim the Software as your own creation
- Not charge for access to unmodified Software

## 5. Content & Creator Policy

**Streaming & YouTube**: Fully allowed. No permission required.

**Monetization**: You may monetize content featuring the Software (ads, sponsorships, Patreon). You do not owe us revenue share.

**Attribution**: Simply crediting "ABC Team" or linking to our GitHub is appreciated but not required.

## 6. Warranty Disclaimer

THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT.

We do not warrant that:

- The Software will meet your requirements
- The Software will be error-free or bug-free
- The Software will be compatible with all platforms
- Updates will be provided

## 7. Limitation of Liability

TO THE MAXIMUM EXTENT PERMITTED BY LAW, WE SHALL NOT BE LIABLE FOR:

- Data loss or corruption
- Loss of profit or revenue
- Interruption of service
- Any indirect, incidental, or consequential damages

Even if we have been advised of the possibility of such damages.

## 8. Termination

We may terminate this license if you:

- Violate any terms of this EULA
- Use the Software for illegal purposes
- Redistribute the Software commercially without permission
- Harass or abuse our team

Upon termination, you must cease using the Software.

## 9. Third-Party Components

The Software may include third-party libraries or assets. You acknowledge and agree to comply with their respective licenses, which are listed in the project repository.

## 10. Governing Law

This EULA is governed by and construed in accordance with applicable laws. Any disputes shall be resolved through negotiation or mediation.

## 11. Changes to This EULA

We may update this EULA at any time. Continued use of the Software constitutes acceptance of changes. We recommend reviewing this EULA periodically.

## 12. Contact

If you have questions about this EULA:

**GitHub**: [Link from site config]  
**Discord**: [Link from site config]

---

**By installing or using this Software, you acknowledge that you have read, understood, and agree to be bound by the terms of this EULA.**

Last Updated: December 2024
{% assign t = site.data[page.lang] %}

<section class="hero">
  <div class="hero-card">
    <h1>{{ t.hero_title }}</h1>
    <p class="muted">{{ t.hero_subtitle }}</p>
    <div class="cta-row">
      <a class="btn primary" href="{{ '/fr/projects/' | relative_url }}">{{ t.browse_projects }}</a>
      <a class="btn ghost" href="{{ '/fr/about/' | relative_url }}">{{ t.learn_more }}</a>
    </div>
  </div>
</section>

<section id="featured" class="section">
  <h2>{{ t.featured_title }}</h2>
  <p class="muted">{{ t.featured_subtitle }}</p>
  
  {% if site.data.modpacks and site.data.modpacks.size > 0 %}
  <div class="featured-spotlight" style="margin-bottom: 2rem;">
    <div class="spotlight-grid">
      {% assign sorted_modpacks = site.data.modpacks | sort: 'date_modified' | reverse %}
      {% for modpack in sorted_modpacks limit:3 %}
      <div class="spotlight-card animate-on-scroll scale-in stagger-{{ forloop.index }}">
        <div class="spotlight-badge">
          <i class="fas fa-star"></i> {{ t.featured_badge }}
        </div>
        <div class="spotlight-image" style="background-image: url('{{ modpack.icon_url }}')"></div>
        <div class="spotlight-content">
          <h3>{{ modpack.name }}</h3>
          <p class="muted">{{ modpack.description | truncate: 100 }}</p>
          <div class="spotlight-meta">
            <span class="meta-item">
              <i class="fas fa-download"></i> {{ modpack.downloads | default: 0 | divided_by: 1000 }}K
            </span>
            <span class="meta-item">
              <i class="fas fa-heart"></i> {{ modpack.followers | default: 0 }}
            </span>
            {% if modpack.game_versions and modpack.game_versions.size > 0 %}
            <span class="meta-item">
              <i class="fas fa-gamepad"></i> {{ modpack.game_versions[0] }}
            </span>
            {% endif %}
          </div>
          <div class="spotlight-actions">
            <a href="{{ modpack.project_url }}" class="btn-spotlight primary" target="_blank" rel="noopener">
              <i class="fas fa-external-link-alt"></i> {{ t.view_project }}
            </a>
            {% if modpack.source_url %}
            <a href="{{ modpack.source_url }}" class="btn-spotlight ghost" target="_blank" rel="noopener">
              <i class="fab fa-github"></i> {{ t.source }}
            </a>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
  
  {% include modpacks.html %}
</section>

<section class="section" id="project-stats">
  <h2>{{ t.stats_title }}</h2>
  <p class="muted">{{ t.stats_subtitle }}</p>
  <div class="stats-grid" id="stats-grid">
    <div class="stat-card">
      <p class="muted">{{ t.stat_total_projects }}</p>
      <div class="stat-number" id="stat-projects">—</div>
      <div class="stat-sub" id="stat-projects-sub">{{ t.stat_loading }}</div>
    </div>
    <div class="stat-card">
      <p class="muted">{{ t.stat_total_downloads }}</p>
      <div class="stat-number" id="stat-downloads">—</div>
      <div class="stat-sub" id="stat-downloads-sub">{{ t.stat_loading }}</div>
    </div>
    <div class="stat-card">
      <p class="muted">{{ t.stat_supported_loaders }}</p>
      <div class="stat-number" id="stat-loaders-count">—</div>
      <div class="stat-sub" id="stat-loaders">{{ t.stat_loading }}</div>
    </div>
    <div class="stat-card">
      <p class="muted">{{ t.stat_game_versions }}</p>
      <div class="stat-number" id="stat-versions">—</div>
      <div class="stat-sub" id="stat-versions-sub">{{ t.stat_loading }}</div>
    </div>
  </div>
  <div class="card" id="top-categories" style="margin-top:16px;">
    <h3 style="margin-top:0">{{ t.stat_top_categories }}</h3>
    <div id="stat-categories" class="pill-row">{{ t.stat_loading }}</div>
  </div>
  <div class="card" id="downloads-card" style="margin-top:16px;">
    <h3 style="margin-top:0">{{ t.stat_top_downloads }}</h3>
    <p class="muted" id="stat-downloads-note">{{ t.stat_downloads_note }}</p>
    <div class="line-chart" id="downloads-chart"></div>
  </div>
</section>

<section class="section">
  <div class="card">
    <h2 style="margin-top: 0">🚀 Modrinth Organization</h2>
    <div style="display: grid; gap: 16px">
      <p class="muted">Tous nos projets sont publiés et maintenus via Modrinth.</p>
      <a class="btn ghost" href="{{ site.modrinth.organization_url | default: site.social.modrinth }}" target="_blank" rel="noopener">Aller sur Modrinth</a>
    </div>
  </div>
</section>

<script>
  // Load stats from cached mods.json and populate snapshot cards
  document.addEventListener('DOMContentLoaded', async () => {
    const modsUrl = '{{ '/data/mods.json' | relative_url }}';
    const statProjects = document.getElementById('stat-projects');
    const statProjectsSub = document.getElementById('stat-projects-sub');
    const statDownloads = document.getElementById('stat-downloads');
    const statDownloadsSub = document.getElementById('stat-downloads-sub');
    const statLoaders = document.getElementById('stat-loaders');
    const statLoadersCount = document.getElementById('stat-loaders-count');
    const statVersions = document.getElementById('stat-versions');
    const statVersionsSub = document.getElementById('stat-versions-sub');
    const statCategories = document.getElementById('stat-categories');
    const downloadsChart = document.getElementById('downloads-chart');
    const downloadsNote = document.getElementById('stat-downloads-note');

    try {
      const res = await fetch(modsUrl);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const mods = await res.json();
      if (!Array.isArray(mods) || mods.length === 0) throw new Error('{{ t.no_projects_found }}');

      const loaders = new Set();
      const versions = new Set();
      const categories = new Map();
      let totalDownloads = 0;

      mods.forEach(m => {
        (m.loaders || []).forEach(l => loaders.add(l));
        (m.game_versions || []).forEach(v => versions.add(v));
        totalDownloads += Number(m.downloads || 0);
        (m.categories || []).forEach(c => {
          categories.set(c, (categories.get(c) || 0) + 1);
        });
        (m.display_categories || []).forEach(c => {
          categories.set(c, (categories.get(c) || 0) + 1);
        });
      });

      const formatNumber = (n) => n.toLocaleString(undefined, { maximumFractionDigits: 0 });
      
      const t = {
        projects_catalog: '{{ t.stat_projects_catalog }}',
        avg_per_project: '{{ t.stat_avg_per_project }}',
        unique_versions: '{{ t.stat_unique_versions }}',
        no_categories: '{{ t.stat_no_categories }}',
        no_data: '{{ t.stat_no_data }}',
        unavailable: '{{ t.stat_unavailable }}'
      };

      statProjects.textContent = formatNumber(mods.length);
      statProjectsSub.textContent = t.projects_catalog;

      statDownloads.textContent = formatNumber(totalDownloads);
      const avgDownloads = mods.length ? Math.round(totalDownloads / mods.length) : 0;
      statDownloadsSub.textContent = `${formatNumber(avgDownloads)} ${t.avg_per_project}`;

      const loaderList = Array.from(loaders).sort();
      const versionCount = versions.size;

      statLoadersCount.textContent = loaderList.length ? formatNumber(loaderList.length) : '—';
      statLoaders.textContent = loaderList.length ? loaderList.join(', ') : '—';
      statVersions.textContent = versionCount ? formatNumber(versionCount) : '—';
      statVersionsSub.textContent = versionCount ? t.unique_versions : '—';

      const topCats = Array.from(categories.entries())
        .sort((a, b) => b[1] - a[1])
        .slice(0, 6)
        .map(([c, count]) => `<span class="pill">${c} (${count})</span>`) || [];
      statCategories.innerHTML = topCats.length ? topCats.join(' ') : t.no_categories;

      // Top downloads multi-line chart (simulated week data)
      const topDownloads = [...mods]
        .filter(m => typeof m.downloads === 'number')
        .sort((a, b) => (b.downloads || 0) - (a.downloads || 0))
        .slice(0, 11);

      if (topDownloads.length && downloadsChart) {
        downloadsChart.innerHTML = '';
        
        const colors = [
          '#1bd96f', '#10a8e0', '#22d3ee', '#a78bfa', '#f472b6',
          '#fb923c', '#fbbf24', '#4ade80', '#60a5fa', '#c084fc', '#f87171'
        ];

        // Simulate week data with realistic curves (7 days)
        const days = 7;
        const maxValue = Math.max(...topDownloads.map(m => m.downloads || 0));
        
        const chartWrapper = document.createElement('div');
        chartWrapper.style.cssText = 'display:flex;gap:20px;align-items:stretch;margin-bottom:12px;';

        // Left side: chart
        const chartContainer = document.createElement('div');
        chartContainer.style.cssText = 'flex:1;background:var(--bg-primary);border:1px solid var(--border);padding:16px;box-sizing:border-box;position:relative;';

        const svgWrapper = document.createElement('div');
        svgWrapper.style.cssText = 'width:100%;height:240px;position:relative;';
        
        // Tooltip
        const tooltip = document.createElement('div');
        tooltip.style.cssText = 'position:absolute;background:rgba(0,0,0,0.8);color:white;border:1px solid var(--border);padding:8px 12px;border-radius:6px;font-size:12px;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:10;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,0.4);';
        chartContainer.appendChild(tooltip);

        const width = 800;
        const height = 200;

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
        svg.setAttribute('preserveAspectRatio', 'none');
        svg.style.cssText = 'width:100%;height:100%;display:block;';

        topDownloads.forEach((mod, idx) => {
          const color = colors[idx % colors.length];
          const baseValue = mod.downloads || 0;
          
          const points = [];
          
          for (let day = 0; day < days; day++) {
            const x = (day / (days - 1)) * width;
            const variance = Math.sin(day * 0.8 + idx) * 0.3 + Math.cos(day * 1.2 - idx) * 0.2;
            const normalizedValue = (baseValue / maxValue) * (0.4 + variance * 0.6);
            const y = height - Math.max(4, Math.min(height - 4, normalizedValue * (height * 0.9)));
            const simulatedDownloads = Math.round(baseValue * normalizedValue);
            points.push({ x, y, downloads: simulatedDownloads, day });
          }

          const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
          const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
          path.setAttribute('d', d);
          path.setAttribute('fill', 'none');
          path.setAttribute('stroke', color);
          path.setAttribute('stroke-width', '2');
          path.setAttribute('opacity', '0.85');
          path.style.cursor = 'pointer';
          
          points.forEach(p => {
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', p.x);
            circle.setAttribute('cy', p.y);
            circle.setAttribute('r', '4.5');
            circle.setAttribute('fill', color);
            circle.setAttribute('opacity', '0.9');
            circle.style.cursor = 'pointer';
            svg.appendChild(circle);
          });
          
          path.addEventListener('mouseenter', () => {
            path.setAttribute('stroke-width', '3');
            path.setAttribute('opacity', '1');
          });
          path.addEventListener('mouseleave', () => {
            path.setAttribute('stroke-width', '2');
            path.setAttribute('opacity', '0.85');
            tooltip.style.opacity = '0';
          });
          path.addEventListener('mousemove', (e) => {
            const rect = chartContainer.getBoundingClientRect();
            const svgRect = svg.getBoundingClientRect();
            const relX = ((e.clientX - svgRect.left) / svgRect.width) * width;
            const closestPoint = points.reduce((prev, curr) => 
              Math.abs(curr.x - relX) < Math.abs(prev.x - relX) ? curr : prev
            );
            
            tooltip.innerHTML = `<div style="color:${color};font-weight:600;margin-bottom:2px;">${mod.title || mod.name}</div><div>Jour ${closestPoint.day + 1}: ${formatNumber(closestPoint.downloads)} téléchargements</div>`;
            tooltip.style.opacity = '1';
            tooltip.style.left = Math.min(rect.width - tooltip.offsetWidth - 10, Math.max(10, e.clientX - rect.left + 10)) + 'px';
            tooltip.style.top = Math.max(10, e.clientY - rect.top - 40) + 'px';
          });
          
          svg.appendChild(path);
        });

        svgWrapper.appendChild(svg);
        chartContainer.appendChild(svgWrapper);

        const legendContainer = document.createElement('div');
        legendContainer.style.cssText = 'width:200px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:240px;padding-right:8px;';
        legendContainer.className = 'line-legend';
        legendContainer.innerHTML = topDownloads.map((m, idx) => {
          const color = colors[idx % colors.length];
          return `<div class="legend-item" style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);"><span style="width:8px;height:8px;border-radius:50%;background:${color};display:inline-block;flex-shrink:0;"></span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${m.title || m.name}</span></div>`;
        }).join('');

        chartWrapper.appendChild(chartContainer);
        chartWrapper.appendChild(legendContainer);
        downloadsChart.appendChild(chartWrapper);
      } else if (downloadsNote) {
        downloadsNote.textContent = t.no_data;
      }
    } catch (e) {
      statProjects.textContent = '—';
      statProjectsSub.textContent = t.unavailable;
      statDownloads.textContent = '—';
      statDownloadsSub.textContent = t.unavailable;
      statLoadersCount.textContent = '—';
      statLoaders.textContent = t.unavailable;
      statVersions.textContent = '—';
      statVersionsSub.textContent = t.unavailable;
      statCategories.textContent = `{{ t.error_loading }} ${e.message}`;
      if (downloadsNote) downloadsNote.textContent = `{{ t.error_loading }}`;
      console.warn('{{ t.failed_to_load }}:', e);
    }
  });
</script>
<section class="hero">
  <div class="hero-card">
    <h1>Documentation</h1>
    <p class="muted">Complete guides for setting up, customizing, and contributing to the ABC showcase.</p>
  </div>
</section>

<section class="section">
  <h2 style="margin-bottom: 16px;">Search & Filter</h2>
  <div style="display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap;">
    <input id="docs-search" type="search" placeholder="Search documentation..." style="flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); border-radius: 6px; font-size: 14px;">
    <select id="docs-category" style="padding: 10px 12px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); border-radius: 6px; font-size: 14px;">
      <option value="">All Categories</option>
      <option value="Setup">Setup</option>
      <option value="Styling">Styling</option>
      <option value="Community">Community</option>
      <option value="Help">Help</option>
      <option value="User Guide">User Guide</option>
      <option value="Developer">Developer</option>
    </select>
  </div>

  <h3 style="margin-bottom: 16px;">Browse by Category</h3>
  <div class="grid docs-grid">
    <a class="card" href="{{ '/docs/category/setup/' | relative_url }}" style="text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;">
      <i class="fa-solid fa-gear" style="font-size: 24px; color: var(--accent-primary);"></i>
      <div>
        <h3 style="margin: 0;">Setup</h3>
        <p class="muted" style="margin: 0; font-size: 13px;">Installation & configuration</p>
      </div>
    </a>
    <a class="card" href="{{ '/docs/category/styling/' | relative_url }}" style="text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;">
      <i class="fa-solid fa-palette" style="font-size: 24px; color: var(--accent-primary);"></i>
      <div>
        <h3 style="margin: 0;">Styling</h3>
        <p class="muted" style="margin: 0; font-size: 13px;">Themes & customization</p>
      </div>
    </a>
    <a class="card" href="{{ '/docs/category/user-guide/' | relative_url }}" style="text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;">
      <i class="fa-solid fa-book-open" style="font-size: 24px; color: var(--accent-primary);"></i>
      <div>
        <h3 style="margin: 0;">User Guide</h3>
        <p class="muted" style="margin: 0; font-size: 13px;">For end users</p>
      </div>
    </a>
    <a class="card" href="{{ '/docs/category/community/' | relative_url }}" style="text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;">
      <i class="fa-solid fa-users" style="font-size: 24px; color: var(--accent-primary);"></i>
      <div>
        <h3 style="margin: 0;">Community</h3>
        <p class="muted" style="margin: 0; font-size: 13px;">Contributing & support</p>
      </div>
    </a>
    <a class="card" href="{{ '/docs/category/developer/' | relative_url }}" style="text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;">
      <i class="fa-solid fa-code" style="font-size: 24px; color: var(--accent-primary);"></i>
      <div>
        <h3 style="margin: 0;">Developer</h3>
        <p class="muted" style="margin: 0; font-size: 13px;">Technical reference</p>
      </div>
    </a>
    <a class="card" href="{{ '/docs/category/help/' | relative_url }}" style="text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;">
      <i class="fa-solid fa-circle-question" style="font-size: 24px; color: var(--accent-primary);"></i>
      <div>
        <h3 style="margin: 0;">Help</h3>
        <p class="muted" style="margin: 0; font-size: 13px;">FAQ & troubleshooting</p>
      </div>
    </a>
  </div>

  <h3 style="margin-bottom: 16px;">All Documentation</h3>
  <div id="docs-results" class="grid docs-results-grid">
    <!-- Results will be populated by JavaScript -->
  </div>
  <div id="load-more-container" style="text-align: center; margin-top: 24px; display: none;">
    <button id="load-more-btn" class="btn primary" style="padding: 12px 32px;">
      <i class="fa-solid fa-angle-down"></i>
      Load More
    </button>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const docs = [
      {% assign sorted_docs = site.docs | sort: 'nav_order' %}
      {% for doc in sorted_docs %}
        {% unless doc.url contains '/category/' %}
        {
          title: {{ doc.title | jsonify }},
          description: {{ doc.description | default: 'No description available' | jsonify }},
          url: {{ doc.url | relative_url | jsonify }},
          category: {{ doc.category | default: 'Other' | jsonify }},
          tags: {{ doc.tags | jsonify }},
          content: {{ doc.content | strip_html | truncatewords: 20 | jsonify }}
        }{% unless forloop.last %},{% endunless %}
        {% endunless %}
      {% endfor %}
    ];

    const searchEl = document.getElementById('docs-search');
    const categoryEl = document.getElementById('docs-category');
    const resultsEl = document.getElementById('docs-results');
    const loadMoreBtn = document.getElementById('load-more-btn');
    const loadMoreContainer = document.getElementById('load-more-container');
    
    let currentFiltered = [];
    let displayCount = 9;
    let isSearching = false;

    function renderDocs(filtered, count = displayCount) {
      currentFiltered = filtered;
      const docsToShow = isSearching ? filtered : filtered.slice(0, count);
      
      resultsEl.innerHTML = docsToShow.length 
        ? docsToShow.map(doc => `
          <div class="card">
            <h3>${doc.title}</h3>
            <p class="muted" style="font-size: 13px; margin-bottom: 12px;">${doc.description}</p>
            <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
              <span style="display: inline-block; padding: 4px 8px; background: var(--bg-secondary); color: var(--text-secondary); border-radius: 4px; font-size: 12px;">${doc.category}</span>
              ${doc.tags.map(tag => `<span style="display: inline-block; padding: 4px 8px; background: rgba(27, 217, 111, 0.1); color: var(--accent-primary); border-radius: 4px; font-size: 12px;">#${tag}</span>`).join('')}
            </div>
            <a class="btn primary" href="${doc.url}" style="width: 100%; display: block; text-align: center;">Read More</a>
          </div>
        `).join('')
        : '<p class="muted" style="grid-column: 1 / -1; text-align: center;">No documentation found.</p>';
      
      // Show/hide load more button
      if (isSearching || filtered.length <= count) {
        loadMoreContainer.style.display = 'none';
      } else {
        loadMoreContainer.style.display = 'block';
        loadMoreBtn.innerHTML = `<i class="fa-solid fa-angle-down"></i> Load More (${filtered.length - count} remaining)`;
      }
    }

    function filterDocs() {
      const query = searchEl.value.toLowerCase();
      const category = categoryEl.value;
      
      isSearching = !!(query || category);

      const filtered = docs.filter(doc => {
        const matchesSearch = !query || 
          doc.title.toLowerCase().includes(query) ||
          doc.description.toLowerCase().includes(query) ||
          doc.tags.some(tag => tag.toLowerCase().includes(query));
        
        const matchesCategory = !category || doc.category === category;
        
        return matchesSearch && matchesCategory;
      });

      displayCount = 9; // Reset display count when filtering
      renderDocs(filtered);
    }

    loadMoreBtn.addEventListener('click', () => {
      displayCount += 9;
      renderDocs(currentFiltered, displayCount);
    });

    searchEl.addEventListener('input', filterDocs);
    categoryEl.addEventListener('change', filterDocs);

    // Initial render
    renderDocs(docs);
  });
</script>
{% assign t = site.data[page.lang] %}

<section class="hero">
  <div class="hero-card">
    <h1>{{ t.hero_title }}</h1>
    <p class="muted">{{ t.hero_subtitle }}</p>
    <div class="cta-row">
      <a class="btn primary" href="{{ '/projects/' | relative_url }}">{{ t.browse_projects }}</a>
      <a class="btn ghost" href="{{ '/about/' | relative_url }}">{{ t.learn_more }}</a>
    </div>
  </div>
</section>

<section id="featured" class="section">
  <h2>{{ t.featured_title }}</h2>
  <p class="muted">{{ t.featured_subtitle }}</p>
  
  {% if site.data.modpacks and site.data.modpacks.size > 0 %}
  <div class="featured-spotlight" style="margin-bottom: 2rem;">
    <div class="spotlight-grid">
      {% assign sorted_modpacks = site.data.modpacks | sort: 'date_modified' | reverse %}
      {% for modpack in sorted_modpacks limit:3 %}
      <div class="spotlight-card animate-on-scroll scale-in stagger-{{ forloop.index }}">
        <div class="spotlight-badge">
          <i class="fas fa-star"></i> {{ t.featured_badge }}
        </div>
        <div class="spotlight-image" style="background-image: url('{{ modpack.icon_url }}')"></div>
        <div class="spotlight-content">
          <h3>{{ modpack.name }}</h3>
          <p class="muted">{{ modpack.description | truncate: 100 }}</p>
          <div class="spotlight-meta">
            <span class="meta-item">
              <i class="fas fa-download"></i> {{ modpack.downloads | default: 0 | divided_by: 1000 }}K
            </span>
            <span class="meta-item">
              <i class="fas fa-heart"></i> {{ modpack.followers | default: 0 }}
            </span>
            {% if modpack.game_versions and modpack.game_versions.size > 0 %}
            <span class="meta-item">
              <i class="fas fa-gamepad"></i> {{ modpack.game_versions[0] }}
            </span>
            {% endif %}
          </div>
          <div class="spotlight-actions">
            <a href="{{ modpack.project_url }}" class="btn-spotlight primary" target="_blank" rel="noopener">
              <i class="fas fa-external-link-alt"></i> {{ t.view_project }}
            </a>
            {% if modpack.source_url %}
            <a href="{{ modpack.source_url }}" class="btn-spotlight ghost" target="_blank" rel="noopener">
              <i class="fab fa-github"></i> {{ t.source }}
            </a>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
  
  {% include modpacks.html %}
</section>

<section class="section" id="project-stats">
  <h2>{{ t.stats_title }}</h2>
  <p class="muted">{{ t.stats_subtitle }}</p>
  <div class="stats-grid" id="stats-grid">
    <div class="stat-card">
      <p class="muted">{{ t.stat_total_projects }}</p>
      <div class="stat-number" id="stat-projects">—</div>
      <div class="stat-sub" id="stat-projects-sub">{{ t.stat_loading }}</div>
    </div>
    <div class="stat-card">
      <p class="muted">{{ t.stat_total_downloads }}</p>
      <div class="stat-number" id="stat-downloads">—</div>
      <div class="stat-sub" id="stat-downloads-sub">{{ t.stat_loading }}</div>
    </div>
    <div class="stat-card">
      <p class="muted">{{ t.stat_supported_loaders }}</p>
      <div class="stat-number" id="stat-loaders-count">—</div>
      <div class="stat-sub" id="stat-loaders">{{ t.stat_loading }}</div>
    </div>
    <div class="stat-card">
      <p class="muted">{{ t.stat_game_versions }}</p>
      <div class="stat-number" id="stat-versions">—</div>
      <div class="stat-sub" id="stat-versions-sub">{{ t.stat_loading }}</div>
    </div>
  </div>
  <div class="card" id="top-categories" style="margin-top:16px;">
    <h3 style="margin-top:0">{{ t.stat_top_categories }}</h3>
    <div id="stat-categories" class="pill-row">{{ t.stat_loading }}</div>
  </div>
  <div class="card" id="downloads-card" style="margin-top:16px;">
    <h3 style="margin-top:0">{{ t.stat_top_downloads }}</h3>
    <p class="muted" id="stat-downloads-note">{{ t.stat_downloads_note }}</p>
    <div class="line-chart" id="downloads-chart"></div>
  </div>
</section>

{% assign featured_docs = site.docs | sort: 'nav_order' | slice: 0, 3 %}
{% if featured_docs and featured_docs.size > 0 %}

<section class="section" id="featured-docs">
  <h2>Docs Spotlight</h2>
  <p class="muted">Quick links to key guides</p>
  <div class="grid">
    {% for doc in featured_docs %}
      <a class="card" href="{{ doc.url | relative_url }}" style="text-decoration:none">
        <h3 style="margin-top:0">{{ doc.title }}</h3>
        {% if doc.description %}<p class="muted">{{ doc.description }}</p>{% else %}<p class="muted">Read more</p>{% endif %}
        <span class="pill">Docs</span>
      </a>
    {% endfor %}
  </div>
</section>
{% endif %}

<section class="section">
  <h2>How It Works</h2>
  <div class="grid">
    <div class="card">
      <h3><i class="fa-solid fa-box"></i> Static Content</h3>
      <p>All projects are stored as static data. No database needed.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-arrows-rotate"></i> Auto-Update</h3>
      <p>Daily syncs from Modrinth keep your showcase fresh.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-bolt"></i> Lightning Fast</h3>
      <p>Deployed globally on GitHub Pages for instant loading.</p>
    </div>
    <div class="card">
      <h3><i class="fa-solid fa-palette"></i> Beautiful</h3>
      <p>Modern design with smooth animations and blur effects.</p>
    </div>
  </div>
</section>

<section class="section">
  <h2>Get Started</h2>
  <div class="grid">
    <div class="card">
      <h3>Read the Docs</h3>
      <p class="muted">Configure branding, fetch projects, and deploy.</p>
      <a class="btn primary" href="{{ '/docs/' | relative_url }}">Open Docs</a>
    </div>
    <div class="card">
      <h3>Browse Projects</h3>
      <p class="muted">Filter by type, loader, or version.</p>
      <a class="btn primary" href="{{ '/projects/' | relative_url }}">View Catalog</a>
    </div>
    <div class="card">
      <h3>Sync from Modrinth</h3>
      <p class="muted">Run <code>npm run fetch</code> or use the scheduled workflow.</p>
      <a class="btn ghost" href="{{ '/docs/' | relative_url }}">See Setup</a>
    </div>
  </div>
</section>

<section class="section">
  <h2>Stay in the Loop</h2>
  <div class="grid">
    <div class="card">
      <h3>Join Discord</h3>
      <p class="muted">Get support, share feedback, and see previews.</p>
      <a class="btn ghost" href="{{ site.social.discord }}" target="_blank" rel="noopener">Open Discord</a>
    </div>
    <div class="card">
      <h3>Watch GitHub</h3>
      <p class="muted">Track updates, file issues, or contribute.</p>
      <a class="btn ghost" href="{{ site.social.github }}" target="_blank" rel="noopener">View Repo</a>
    </div>
    <div class="card">
      <h3>Follow Modrinth</h3>
      <p class="muted">Stay updated on releases across all projects.</p>
      <a class="btn ghost" href="{{ site.modrinth.organization_url | default: site.social.modrinth }}" target="_blank" rel="noopener">Go to Modrinth</a>
    </div>
  </div>
</section>

<script>
  // Load stats from cached mods.json and populate snapshot cards
  document.addEventListener('DOMContentLoaded', async () => {
    const modsUrl = '{{ '/data/mods.json' | relative_url }}';
    const statProjects = document.getElementById('stat-projects');
    const statProjectsSub = document.getElementById('stat-projects-sub');
    const statDownloads = document.getElementById('stat-downloads');
    const statDownloadsSub = document.getElementById('stat-downloads-sub');
    const statLoaders = document.getElementById('stat-loaders');
    const statLoadersCount = document.getElementById('stat-loaders-count');
    const statVersions = document.getElementById('stat-versions');
    const statVersionsSub = document.getElementById('stat-versions-sub');
    const statCategories = document.getElementById('stat-categories');
    const downloadsChart = document.getElementById('downloads-chart');
    const downloadsNote = document.getElementById('stat-downloads-note');

    try {
      const res = await fetch(modsUrl);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const mods = await res.json();
      if (!Array.isArray(mods) || mods.length === 0) throw new Error('No projects found');

      const loaders = new Set();
      const versions = new Set();
      const categories = new Map();
      let totalDownloads = 0;

      mods.forEach(m => {
        (m.loaders || []).forEach(l => loaders.add(l));
        (m.game_versions || []).forEach(v => versions.add(v));
        totalDownloads += Number(m.downloads || 0);
        (m.categories || []).forEach(c => {
          categories.set(c, (categories.get(c) || 0) + 1);
        });
        (m.display_categories || []).forEach(c => {
          categories.set(c, (categories.get(c) || 0) + 1);
        });
      });

      const formatNumber = (n) => n.toLocaleString(undefined, { maximumFractionDigits: 0 });
      
      const t = {
        projects_catalog: '{{ t.stat_projects_catalog }}',
        avg_per_project: '{{ t.stat_avg_per_project }}',
        unique_versions: '{{ t.stat_unique_versions }}',
        no_categories: '{{ t.stat_no_categories }}',
        no_data: '{{ t.stat_no_data }}',
        unavailable: '{{ t.stat_unavailable }}'
      };

      statProjects.textContent = formatNumber(mods.length);
      statProjectsSub.textContent = t.projects_catalog;

      statDownloads.textContent = formatNumber(totalDownloads);
      const avgDownloads = mods.length ? Math.round(totalDownloads / mods.length) : 0;
      statDownloadsSub.textContent = `${formatNumber(avgDownloads)} ${t.avg_per_project}`;

      const loaderList = Array.from(loaders).sort();
      const versionCount = versions.size;

      statLoadersCount.textContent = loaderList.length ? formatNumber(loaderList.length) : '—';
      statLoaders.textContent = loaderList.length ? loaderList.join(', ') : '—';
      statVersions.textContent = versionCount ? formatNumber(versionCount) : '—';
      statVersionsSub.textContent = versionCount ? t.unique_versions : '—';

      const topCats = Array.from(categories.entries())
        .sort((a, b) => b[1] - a[1])
        .slice(0, 6)
        .map(([c, count]) => `<span class="pill">${c} (${count})</span>`) || [];
      statCategories.innerHTML = topCats.length ? topCats.join(' ') : t.no_categories;

      // Top downloads multi-line chart (simulated week data)
      const topDownloads = [...mods]
        .filter(m => typeof m.downloads === 'number')
        .sort((a, b) => (b.downloads || 0) - (a.downloads || 0))
        .slice(0, 11);

      if (topDownloads.length && downloadsChart) {
        downloadsChart.innerHTML = '';
        
        const colors = [
          '#1bd96f', '#10a8e0', '#22d3ee', '#a78bfa', '#f472b6',
          '#fb923c', '#fbbf24', '#4ade80', '#60a5fa', '#c084fc', '#f87171'
        ];

        // Simulate week data with realistic curves (7 days)
        const days = 7;
        const maxValue = Math.max(...topDownloads.map(m => m.downloads || 0));
        
        const chartWrapper = document.createElement('div');
        chartWrapper.style.cssText = 'display:flex;gap:20px;align-items:stretch;margin-bottom:12px;';

        // Left side: chart
        const chartContainer = document.createElement('div');
        chartContainer.style.cssText = 'flex:1;background:var(--bg-primary);border:1px solid var(--border);padding:16px;box-sizing:border-box;position:relative;';

        const svgWrapper = document.createElement('div');
        svgWrapper.style.cssText = 'width:100%;height:240px;position:relative;';
        
        // Tooltip
        const tooltip = document.createElement('div');
        tooltip.style.cssText = 'position:absolute;background:rgba(0,0,0,0.8);color:white;border:1px solid var(--border);padding:8px 12px;border-radius:6px;font-size:12px;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:10;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,0.4);';
        chartContainer.appendChild(tooltip);

        // Use actual pixel dimensions
        const width = 800;  // Fixed width for consistent rendering
        const height = 200; // Fixed height

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
        svg.setAttribute('preserveAspectRatio', 'none');
        svg.style.cssText = 'width:100%;height:100%;display:block;';

        topDownloads.forEach((mod, idx) => {
          const color = colors[idx % colors.length];
          const baseValue = mod.downloads || 0;
          
          // Generate smooth curve with variation
          const points = [];
          
          for (let day = 0; day < days; day++) {
            const x = (day / (days - 1)) * width;
            const variance = Math.sin(day * 0.8 + idx) * 0.3 + Math.cos(day * 1.2 - idx) * 0.2;
            const normalizedValue = (baseValue / maxValue) * (0.4 + variance * 0.6);
            const y = height - Math.max(4, Math.min(height - 4, normalizedValue * (height * 0.9)));
            const simulatedDownloads = Math.round(baseValue * normalizedValue);
            points.push({ x, y, downloads: simulatedDownloads, day });
          }

          const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
          const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
          path.setAttribute('d', d);
          path.setAttribute('fill', 'none');
          path.setAttribute('stroke', color);
          path.setAttribute('stroke-width', '2');
          path.setAttribute('opacity', '0.85');
          path.style.cursor = 'pointer';
          
          // Add dots at each data point
          points.forEach(p => {
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', p.x);
            circle.setAttribute('cy', p.y);
            circle.setAttribute('r', '4.5');
            circle.setAttribute('fill', color);
            circle.setAttribute('opacity', '0.9');
            circle.style.cursor = 'pointer';
            svg.appendChild(circle);
          });
          
          // Hover effect
          path.addEventListener('mouseenter', () => {
            path.setAttribute('stroke-width', '3');
            path.setAttribute('opacity', '1');
          });
          path.addEventListener('mouseleave', () => {
            path.setAttribute('stroke-width', '2');
            path.setAttribute('opacity', '0.85');
            tooltip.style.opacity = '0';
          });
          path.addEventListener('mousemove', (e) => {
            const rect = chartContainer.getBoundingClientRect();
            const svgRect = svg.getBoundingClientRect();
            const relX = ((e.clientX - svgRect.left) / svgRect.width) * width;
            const closestPoint = points.reduce((prev, curr) => 
              Math.abs(curr.x - relX) < Math.abs(prev.x - relX) ? curr : prev
            );
            
            tooltip.innerHTML = `<div style="color:${color};font-weight:600;margin-bottom:2px;">${mod.title || mod.name}</div><div>Day ${closestPoint.day + 1}: ${formatNumber(closestPoint.downloads)} downloads</div>`;
            tooltip.style.opacity = '1';
            tooltip.style.left = Math.min(rect.width - tooltip.offsetWidth - 10, Math.max(10, e.clientX - rect.left + 10)) + 'px';
            tooltip.style.top = Math.max(10, e.clientY - rect.top - 40) + 'px';
          });
          
          svg.appendChild(path);
        });

        svgWrapper.appendChild(svg);
        chartContainer.appendChild(svgWrapper);

        // Right side: legend
        const legendContainer = document.createElement('div');
        legendContainer.style.cssText = 'width:200px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:240px;padding-right:8px;';
        legendContainer.className = 'line-legend';
        legendContainer.innerHTML = topDownloads.map((m, idx) => {
          const color = colors[idx % colors.length];
          return `<div class="legend-item" style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);"><span style="width:8px;height:8px;border-radius:50%;background:${color};display:inline-block;flex-shrink:0;"></span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${m.title || m.name}</span></div>`;
        }).join('');

        chartWrapper.appendChild(chartContainer);
        chartWrapper.appendChild(legendContainer);
        downloadsChart.appendChild(chartWrapper);
      } else if (downloadsNote) {
        downloadsNote.textContent = t.no_data;
      }
    } catch (e) {
      statProjects.textContent = '—';
      statProjectsSub.textContent = t.unavailable;
      statDownloads.textContent = '—';
      statDownloadsSub.textContent = t.unavailable;
      statLoadersCount.textContent = '—';
      statLoaders.textContent = t.unavailable;
      statVersions.textContent = '—';
      statVersionsSub.textContent = t.unavailable;
      statCategories.textContent = `{{ t.error_loading }} ${e.message}`;
      if (downloadsNote) downloadsNote.textContent = `{{ t.error_loading }}`;
      console.warn('{{ t.failed_to_load }}:', e);
    }
  });
</script>
# Licensing & Attribution

**Last Updated:** December 2024

This page outlines the licenses used across our projects and how to properly attribute them.

## Project Licenses

| Project       | License   | Repository | Key Terms                           |
| ------------- | --------- | ---------- | ----------------------------------- |
| Core Projects | MIT       | GitHub     | Permissive; attribution appreciated |
| Datapacks     | CC0 / MIT | GitHub     | Check individual README             |
| Plugins       | MIT       | GitHub     | Permissive; include license         |
| Documentation | CC-BY-4.0 | This Site  | Attribute ABC Team                  |

## MIT License Summary

**Permissions**:

- ✅ Commercial use
- ✅ Modification
- ✅ Distribution
- ✅ Private use

**Conditions**:

- ⚠️ Include license and copyright notice
- ⚠️ Disclose changes

**Limitations**:

- ❌ No liability
- ❌ No warranty

## Creative Commons (CC-BY-4.0)

Used for documentation and educational content.

**You are free to**:

- Share the material
- Adapt and remix
- Use commercially

**You must**:

- Give appropriate credit
- Provide a link to the license
- Indicate if changes were made

## How to Attribute

### For Code

{{ page.title }}              # Current page title
{{ page.url }}                # Page URL
{{ page.date }}               # Post date
{{ page.content }}            # Page content
{{ page.excerpt }}            # Auto excerpt
{{ page.custom_field }}       # Custom frontmatter

Hello world        # "Hello world"
HELLO WORLD            # "HELLO WORLD"
hello world          # "hello world"
hello...       # "hello..."
hello there  # "hello there"
abc              # ["a", "b", "c"]
hello                 # "hello"
hello world        # "hello world"
hello world       # "hello world"
hello-world           # "hello-world"

6              # 6
2             # 2
8             # 8
2        # 2
5              # 5
5               # 5
4              # 4
12.34 # 12.34

{{ array | join: ", " }}       # Join with separator
{{ array | first }}            # First element
{{ array | last }}             # Last element
{{ array | size }}             # Array length
{{ array | reverse }}          # Reverse order
{{ array | sort }}             # Sort ascending
{{ array | uniq }}             # Remove duplicates
{{ array | where: "key", "value" }}  # Filter by property
{{ array | map: "name" }}      # Extract property

           # 2025-12-10
          # December 10, 2025
             # 10 Dec 2025
        # 10 December 2025
             # RFC-822 format
2025              # 2025

/assets/style.css     # /abc-site/assets/style.css
https://abc-site.devvyy.xyz/page                 # https://site.com/abc-site/page
path/to/file.html

<section class="section">
  <p class="muted" style="margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase;font-size:12px">Docs</p>
  <h1 style="margin-top:0">How to Download &amp; Install</h1>
  <p class="muted" style="max-width:680px">Step-by-step guide to download and install Minecraft content.</p>
  <article class="card" style="margin-top:20px;padding:20px;background:var(--card);border:1px solid var(--border)">
    <h2 id="step-by-step-guide">Step-by-Step Guide</h2>

<ol>
  <li>
    <p><strong>Open the Project Page</strong><br />
Visit the Modrinth, CurseForge, GitHub, or project website for the content you want to download.</p>
  </li>
  <li>
    <p><strong>Find the Versions or Files Section</strong><br />
Look for a tab or section labelled <strong>Versions</strong>, <strong>Files</strong>, <strong>Releases</strong>, or <strong>Downloads</strong>.</p>
  </li>
  <li>
    <p><strong>Select Your Minecraft Version</strong></p>

    <ul>
      <li>Locate a list or dropdown called <strong>Version</strong>, <strong>Game Version</strong>, or <strong>Supported Versions</strong>.</li>
      <li>Pick the version that matches your Minecraft installation (e.g., <em>1.20.1</em>, <em>1.19.2</em>).</li>
    </ul>
  </li>
  <li>
    <p><strong>Choose the Correct File Type</strong><br />
The file type depends on the kind of content:</p>

    <ul>
      <li><strong>Mods:</strong> <code class="language-plaintext highlighter-rouge">.jar</code></li>
      <li><strong>Plugins:</strong> <code class="language-plaintext highlighter-rouge">.jar</code></li>
      <li><strong>Addons (Bedrock):</strong> <code class="language-plaintext highlighter-rouge">.mcaddon</code> / <code class="language-plaintext highlighter-rouge">.mcpack</code></li>
      <li><strong>Texture Packs:</strong> <code class="language-plaintext highlighter-rouge">.zip</code></li>
      <li><strong>Data Packs:</strong> <code class="language-plaintext highlighter-rouge">.zip</code> or extracted folder</li>
      <li><strong>Capes / Skin Addons:</strong> whichever format the creator provides</li>
    </ul>
  </li>
  <li>
    <p><strong>Download the File</strong><br />
Click the <strong>Download</strong>, <strong>Get</strong>, or <strong>File</strong> button next to the version you need.<br />
Save the file to your device.</p>
  </li>
  <li>
    <p><strong>Install According to Content Type</strong></p>

    <ul>
      <li><strong>Mods:</strong> place the <code class="language-plaintext highlighter-rouge">.jar</code> inside <code class="language-plaintext highlighter-rouge">.minecraft/mods</code>.</li>
      <li><strong>Plugins:</strong> move the <code class="language-plaintext highlighter-rouge">.jar</code> into your server’s <code class="language-plaintext highlighter-rouge">plugins</code> folder.</li>
      <li><strong>Texture Packs:</strong> place the <code class="language-plaintext highlighter-rouge">.zip</code> into <code class="language-plaintext highlighter-rouge">.minecraft/resourcepacks</code>.</li>
      <li><strong>Data Packs:</strong> put inside <code class="language-plaintext highlighter-rouge">world/datapacks</code>.</li>
      <li><strong>Addons (Bedrock):</strong> double-click <code class="language-plaintext highlighter-rouge">.mcaddon</code> or <code class="language-plaintext highlighter-rouge">.mcpack</code> to import automatically.</li>
    </ul>
  </li>
  <li>
    <p><strong>Restart Minecraft or Your Server</strong><br />
Reload or restart to apply the new content.</p>
  </li>
</ol>

  </article>
</section>
             # Convert Markdown to HTML

  Docs
  How to Download & Install
  Step-by-step guide to download and install Minecraft content.
  
    Step-by-Step Guide


  
    Open the Project Page
Visit the Modrinth, CurseForge, GitHub, or project website for the content you want to download.
  
  
    Find the Versions or Files Section
Look for a tab or section labelled Versions, Files, Releases, or Downloads.
  
  
    Select Your Minecraft Version

    
      Locate a list or dropdown called Version, Game Version, or Supported Versions.
      Pick the version that matches your Minecraft installation (e.g., 1.20.1, 1.19.2).
    
  
  
    Choose the Correct File Type
The file type depends on the kind of content:

    
      Mods: .jar
      Plugins: .jar
      Addons (Bedrock): .mcaddon / .mcpack
      Texture Packs: .zip
      Data Packs: .zip or extracted folder
      Capes / Skin Addons: whichever format the creator provides
    
  
  
    Download the File
Click the Download, Get, or File button next to the version you need.
Save the file to your device.
  
  
    Install According to Content Type

    
      Mods: place the .jar inside .minecraft/mods.
      Plugins: move the .jar into your server’s plugins folder.
      Texture Packs: place the .zip into .minecraft/resourcepacks.
      Data Packs: put inside world/datapacks.
      Addons (Bedrock): double-click .mcaddon or .mcpack to import automatically.
    
  
  
    Restart Minecraft or Your Server
Reload or restart to apply the new content.
  


  

              # Remove HTML tags
270         # Word count
"<section class=\"section\">\n  <p class=\"muted\" style=\"margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase;font-size:12px\">Docs</p>\n  <h1 style=\"margin-top:0\">How to Download & Install</h1>\n  <p class=\"muted\" style=\"max-width:680px\">Step-by-step guide to download and install Minecraft content.</p>\n  <article class=\"card\" style=\"margin-top:20px;padding:20px;background:var(--card);border:1px solid var(--border)\">\n    <h2 id=\"step-by-step-guide\">Step-by-Step Guide</h2>\n\n<ol>\n  <li>\n    <p><strong>Open the Project Page</strong><br />\nVisit the Modrinth, CurseForge, GitHub, or project website for the content you want to download.</p>\n  </li>\n  <li>\n    <p><strong>Find the Versions or Files Section</strong><br />\nLook for a tab or section labelled <strong>Versions</strong>, <strong>Files</strong>, <strong>Releases</strong>, or <strong>Downloads</strong>.</p>\n  </li>\n  <li>\n    <p><strong>Select Your Minecraft Version</strong></p>\n\n    <ul>\n      <li>Locate a list or dropdown called <strong>Version</strong>, <strong>Game Version</strong>, or <strong>Supported Versions</strong>.</li>\n      <li>Pick the version that matches your Minecraft installation (e.g., <em>1.20.1</em>, <em>1.19.2</em>).</li>\n    </ul>\n  </li>\n  <li>\n    <p><strong>Choose the Correct File Type</strong><br />\nThe file type depends on the kind of content:</p>\n\n    <ul>\n      <li><strong>Mods:</strong> <code class=\"language-plaintext highlighter-rouge\">.jar</code></li>\n      <li><strong>Plugins:</strong> <code class=\"language-plaintext highlighter-rouge\">.jar</code></li>\n      <li><strong>Addons (Bedrock):</strong> <code class=\"language-plaintext highlighter-rouge\">.mcaddon</code> / <code class=\"language-plaintext highlighter-rouge\">.mcpack</code></li>\n      <li><strong>Texture Packs:</strong> <code class=\"language-plaintext highlighter-rouge\">.zip</code></li>\n      <li><strong>Data Packs:</strong> <code class=\"language-plaintext highlighter-rouge\">.zip</code> or extracted folder</li>\n      <li><strong>Capes / Skin Addons:</strong> whichever format the creator provides</li>\n    </ul>\n  </li>\n  <li>\n    <p><strong>Download the File</strong><br />\nClick the <strong>Download</strong>, <strong>Get</strong>, or <strong>File</strong> button next to the version you need.<br />\nSave the file to your device.</p>\n  </li>\n  <li>\n    <p><strong>Install According to Content Type</strong></p>\n\n    <ul>\n      <li><strong>Mods:</strong> place the <code class=\"language-plaintext highlighter-rouge\">.jar</code> inside <code class=\"language-plaintext highlighter-rouge\">.minecraft/mods</code>.</li>\n      <li><strong>Plugins:</strong> move the <code class=\"language-plaintext highlighter-rouge\">.jar</code> into your server’s <code class=\"language-plaintext highlighter-rouge\">plugins</code> folder.</li>\n      <li><strong>Texture Packs:</strong> place the <code class=\"language-plaintext highlighter-rouge\">.zip</code> into <code class=\"language-plaintext highlighter-rouge\">.minecraft/resourcepacks</code>.</li>\n      <li><strong>Data Packs:</strong> put inside <code class=\"language-plaintext highlighter-rouge\">world/datapacks</code>.</li>\n      <li><strong>Addons (Bedrock):</strong> double-click <code class=\"language-plaintext highlighter-rouge\">.mcaddon</code> or <code class=\"language-plaintext highlighter-rouge\">.mcpack</code> to import automatically.</li>\n    </ul>\n  </li>\n  <li>\n    <p><strong>Restart Minecraft or Your Server</strong><br />\nReload or restart to apply the new content.</p>\n  </li>\n</ol>\n\n  </article>\n</section>\n"                 # Convert to JSON
&lt;section class=&quot;section&quot;&gt;
  &lt;p class=&quot;muted&quot; style=&quot;margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase;font-size:12px&quot;&gt;Docs&lt;/p&gt;
  &lt;h1 style=&quot;margin-top:0&quot;&gt;How to Download &amp; Install&lt;/h1&gt;
  &lt;p class=&quot;muted&quot; style=&quot;max-width:680px&quot;&gt;Step-by-step guide to download and install Minecraft content.&lt;/p&gt;
  &lt;article class=&quot;card&quot; style=&quot;margin-top:20px;padding:20px;background:var(--card);border:1px solid var(--border)&quot;&gt;
    &lt;h2 id=&quot;step-by-step-guide&quot;&gt;Step-by-Step Guide&lt;/h2&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Open the Project Page&lt;/strong&gt;&lt;br /&gt;
Visit the Modrinth, CurseForge, GitHub, or project website for the content you want to download.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Find the Versions or Files Section&lt;/strong&gt;&lt;br /&gt;
Look for a tab or section labelled &lt;strong&gt;Versions&lt;/strong&gt;, &lt;strong&gt;Files&lt;/strong&gt;, &lt;strong&gt;Releases&lt;/strong&gt;, or &lt;strong&gt;Downloads&lt;/strong&gt;.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Select Your Minecraft Version&lt;/strong&gt;&lt;/p&gt;

    &lt;ul&gt;
      &lt;li&gt;Locate a list or dropdown called &lt;strong&gt;Version&lt;/strong&gt;, &lt;strong&gt;Game Version&lt;/strong&gt;, or &lt;strong&gt;Supported Versions&lt;/strong&gt;.&lt;/li&gt;
      &lt;li&gt;Pick the version that matches your Minecraft installation (e.g., &lt;em&gt;1.20.1&lt;/em&gt;, &lt;em&gt;1.19.2&lt;/em&gt;).&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Choose the Correct File Type&lt;/strong&gt;&lt;br /&gt;
The file type depends on the kind of content:&lt;/p&gt;

    &lt;ul&gt;
      &lt;li&gt;&lt;strong&gt;Mods:&lt;/strong&gt; &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.jar&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Plugins:&lt;/strong&gt; &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.jar&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Addons (Bedrock):&lt;/strong&gt; &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.mcaddon&lt;/code&gt; / &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.mcpack&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Texture Packs:&lt;/strong&gt; &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.zip&lt;/code&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Data Packs:&lt;/strong&gt; &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.zip&lt;/code&gt; or extracted folder&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Capes / Skin Addons:&lt;/strong&gt; whichever format the creator provides&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Download the File&lt;/strong&gt;&lt;br /&gt;
Click the &lt;strong&gt;Download&lt;/strong&gt;, &lt;strong&gt;Get&lt;/strong&gt;, or &lt;strong&gt;File&lt;/strong&gt; button next to the version you need.&lt;br /&gt;
Save the file to your device.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Install According to Content Type&lt;/strong&gt;&lt;/p&gt;

    &lt;ul&gt;
      &lt;li&gt;&lt;strong&gt;Mods:&lt;/strong&gt; place the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.jar&lt;/code&gt; inside &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.minecraft/mods&lt;/code&gt;.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Plugins:&lt;/strong&gt; move the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.jar&lt;/code&gt; into your server’s &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;plugins&lt;/code&gt; folder.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Texture Packs:&lt;/strong&gt; place the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.zip&lt;/code&gt; into &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.minecraft/resourcepacks&lt;/code&gt;.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Data Packs:&lt;/strong&gt; put inside &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;world/datapacks&lt;/code&gt;.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Addons (Bedrock):&lt;/strong&gt; double-click &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.mcaddon&lt;/code&gt; or &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.mcpack&lt;/code&gt; to import automatically.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Restart Minecraft or Your Server&lt;/strong&gt;&lt;br /&gt;
Reload or restart to apply the new content.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

  &lt;/article&gt;
&lt;/section&gt;
              # Escape XML characters
%3Csection+class%3D%22section%22%3E%0A++%3Cp+class%3D%22muted%22+style%3D%22margin-bottom%3A6px%3Bletter-spacing%3A0.5px%3Btext-transform%3Auppercase%3Bfont-size%3A12px%22%3EDocs%3C%2Fp%3E%0A++%3Ch1+style%3D%22margin-top%3A0%22%3EHow+to+Download+%26+Install%3C%2Fh1%3E%0A++%3Cp+class%3D%22muted%22+style%3D%22max-width%3A680px%22%3EStep-by-step+guide+to+download+and+install+Minecraft+content.%3C%2Fp%3E%0A++%3Carticle+class%3D%22card%22+style%3D%22margin-top%3A20px%3Bpadding%3A20px%3Bbackground%3Avar%28--card%29%3Bborder%3A1px+solid+var%28--border%29%22%3E%0A++++%3Ch2+id%3D%22step-by-step-guide%22%3EStep-by-Step+Guide%3C%2Fh2%3E%0A%0A%3Col%3E%0A++%3Cli%3E%0A++++%3Cp%3E%3Cstrong%3EOpen+the+Project+Page%3C%2Fstrong%3E%3Cbr+%2F%3E%0AVisit+the+Modrinth%2C+CurseForge%2C+GitHub%2C+or+project+website+for+the+content+you+want+to+download.%3C%2Fp%3E%0A++%3C%2Fli%3E%0A++%3Cli%3E%0A++++%3Cp%3E%3Cstrong%3EFind+the+Versions+or+Files+Section%3C%2Fstrong%3E%3Cbr+%2F%3E%0ALook+for+a+tab+or+section+labelled+%3Cstrong%3EVersions%3C%2Fstrong%3E%2C+%3Cstrong%3EFiles%3C%2Fstrong%3E%2C+%3Cstrong%3EReleases%3C%2Fstrong%3E%2C+or+%3Cstrong%3EDownloads%3C%2Fstrong%3E.%3C%2Fp%3E%0A++%3C%2Fli%3E%0A++%3Cli%3E%0A++++%3Cp%3E%3Cstrong%3ESelect+Your+Minecraft+Version%3C%2Fstrong%3E%3C%2Fp%3E%0A%0A++++%3Cul%3E%0A++++++%3Cli%3ELocate+a+list+or+dropdown+called+%3Cstrong%3EVersion%3C%2Fstrong%3E%2C+%3Cstrong%3EGame+Version%3C%2Fstrong%3E%2C+or+%3Cstrong%3ESupported+Versions%3C%2Fstrong%3E.%3C%2Fli%3E%0A++++++%3Cli%3EPick+the+version+that+matches+your+Minecraft+installation+%28e.g.%2C+%3Cem%3E1.20.1%3C%2Fem%3E%2C+%3Cem%3E1.19.2%3C%2Fem%3E%29.%3C%2Fli%3E%0A++++%3C%2Ful%3E%0A++%3C%2Fli%3E%0A++%3Cli%3E%0A++++%3Cp%3E%3Cstrong%3EChoose+the+Correct+File+Type%3C%2Fstrong%3E%3Cbr+%2F%3E%0AThe+file+type+depends+on+the+kind+of+content%3A%3C%2Fp%3E%0A%0A++++%3Cul%3E%0A++++++%3Cli%3E%3Cstrong%3EMods%3A%3C%2Fstrong%3E+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.jar%3C%2Fcode%3E%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3EPlugins%3A%3C%2Fstrong%3E+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.jar%3C%2Fcode%3E%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3EAddons+%28Bedrock%29%3A%3C%2Fstrong%3E+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.mcaddon%3C%2Fcode%3E+%2F+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.mcpack%3C%2Fcode%3E%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3ETexture+Packs%3A%3C%2Fstrong%3E+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.zip%3C%2Fcode%3E%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3EData+Packs%3A%3C%2Fstrong%3E+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.zip%3C%2Fcode%3E+or+extracted+folder%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3ECapes+%2F+Skin+Addons%3A%3C%2Fstrong%3E+whichever+format+the+creator+provides%3C%2Fli%3E%0A++++%3C%2Ful%3E%0A++%3C%2Fli%3E%0A++%3Cli%3E%0A++++%3Cp%3E%3Cstrong%3EDownload+the+File%3C%2Fstrong%3E%3Cbr+%2F%3E%0AClick+the+%3Cstrong%3EDownload%3C%2Fstrong%3E%2C+%3Cstrong%3EGet%3C%2Fstrong%3E%2C+or+%3Cstrong%3EFile%3C%2Fstrong%3E+button+next+to+the+version+you+need.%3Cbr+%2F%3E%0ASave+the+file+to+your+device.%3C%2Fp%3E%0A++%3C%2Fli%3E%0A++%3Cli%3E%0A++++%3Cp%3E%3Cstrong%3EInstall+According+to+Content+Type%3C%2Fstrong%3E%3C%2Fp%3E%0A%0A++++%3Cul%3E%0A++++++%3Cli%3E%3Cstrong%3EMods%3A%3C%2Fstrong%3E+place+the+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.jar%3C%2Fcode%3E+inside+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.minecraft%2Fmods%3C%2Fcode%3E.%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3EPlugins%3A%3C%2Fstrong%3E+move+the+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.jar%3C%2Fcode%3E+into+your+server%E2%80%99s+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3Eplugins%3C%2Fcode%3E+folder.%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3ETexture+Packs%3A%3C%2Fstrong%3E+place+the+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.zip%3C%2Fcode%3E+into+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.minecraft%2Fresourcepacks%3C%2Fcode%3E.%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3EData+Packs%3A%3C%2Fstrong%3E+put+inside+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3Eworld%2Fdatapacks%3C%2Fcode%3E.%3C%2Fli%3E%0A++++++%3Cli%3E%3Cstrong%3EAddons+%28Bedrock%29%3A%3C%2Fstrong%3E+double-click+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.mcaddon%3C%2Fcode%3E+or+%3Ccode+class%3D%22language-plaintext+highlighter-rouge%22%3E.mcpack%3C%2Fcode%3E+to+import+automatically.%3C%2Fli%3E%0A++++%3C%2Ful%3E%0A++%3C%2Fli%3E%0A++%3Cli%3E%0A++++%3Cp%3E%3Cstrong%3ERestart+Minecraft+or+Your+Server%3C%2Fstrong%3E%3Cbr+%2F%3E%0AReload+or+restart+to+apply+the+new+content.%3C%2Fp%3E%0A++%3C%2Fli%3E%0A%3C%2Fol%3E%0A%0A++%3C%2Farticle%3E%0A%3C%2Fsection%3E%0A              # URL encode
%3Csection%20class=%22section%22%3E%0A%20%20%3Cp%20class=%22muted%22%20style=%22margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase;font-size:12px%22%3EDocs%3C/p%3E%0A%20%20%3Ch1%20style=%22margin-top:0%22%3EHow%20to%20Download%20&%20Install%3C/h1%3E%0A%20%20%3Cp%20class=%22muted%22%20style=%22max-width:680px%22%3EStep-by-step%20guide%20to%20download%20and%20install%20Minecraft%20content.%3C/p%3E%0A%20%20%3Carticle%20class=%22card%22%20style=%22margin-top:20px;padding:20px;background:var(--card);border:1px%20solid%20var(--border)%22%3E%0A%20%20%20%20%3Ch2%20id=%22step-by-step-guide%22%3EStep-by-Step%20Guide%3C/h2%3E%0A%0A%3Col%3E%0A%20%20%3Cli%3E%0A%20%20%20%20%3Cp%3E%3Cstrong%3EOpen%20the%20Project%20Page%3C/strong%3E%3Cbr%20/%3E%0AVisit%20the%20Modrinth,%20CurseForge,%20GitHub,%20or%20project%20website%20for%20the%20content%20you%20want%20to%20download.%3C/p%3E%0A%20%20%3C/li%3E%0A%20%20%3Cli%3E%0A%20%20%20%20%3Cp%3E%3Cstrong%3EFind%20the%20Versions%20or%20Files%20Section%3C/strong%3E%3Cbr%20/%3E%0ALook%20for%20a%20tab%20or%20section%20labelled%20%3Cstrong%3EVersions%3C/strong%3E,%20%3Cstrong%3EFiles%3C/strong%3E,%20%3Cstrong%3EReleases%3C/strong%3E,%20or%20%3Cstrong%3EDownloads%3C/strong%3E.%3C/p%3E%0A%20%20%3C/li%3E%0A%20%20%3Cli%3E%0A%20%20%20%20%3Cp%3E%3Cstrong%3ESelect%20Your%20Minecraft%20Version%3C/strong%3E%3C/p%3E%0A%0A%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%3Cli%3ELocate%20a%20list%20or%20dropdown%20called%20%3Cstrong%3EVersion%3C/strong%3E,%20%3Cstrong%3EGame%20Version%3C/strong%3E,%20or%20%3Cstrong%3ESupported%20Versions%3C/strong%3E.%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3EPick%20the%20version%20that%20matches%20your%20Minecraft%20installation%20(e.g.,%20%3Cem%3E1.20.1%3C/em%3E,%20%3Cem%3E1.19.2%3C/em%3E).%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%3C/li%3E%0A%20%20%3Cli%3E%0A%20%20%20%20%3Cp%3E%3Cstrong%3EChoose%20the%20Correct%20File%20Type%3C/strong%3E%3Cbr%20/%3E%0AThe%20file%20type%20depends%20on%20the%20kind%20of%20content:%3C/p%3E%0A%0A%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EMods:%3C/strong%3E%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.jar%3C/code%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EPlugins:%3C/strong%3E%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.jar%3C/code%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EAddons%20(Bedrock):%3C/strong%3E%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.mcaddon%3C/code%3E%20/%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.mcpack%3C/code%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3ETexture%20Packs:%3C/strong%3E%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.zip%3C/code%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EData%20Packs:%3C/strong%3E%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.zip%3C/code%3E%20or%20extracted%20folder%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3ECapes%20/%20Skin%20Addons:%3C/strong%3E%20whichever%20format%20the%20creator%20provides%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%3C/li%3E%0A%20%20%3Cli%3E%0A%20%20%20%20%3Cp%3E%3Cstrong%3EDownload%20the%20File%3C/strong%3E%3Cbr%20/%3E%0AClick%20the%20%3Cstrong%3EDownload%3C/strong%3E,%20%3Cstrong%3EGet%3C/strong%3E,%20or%20%3Cstrong%3EFile%3C/strong%3E%20button%20next%20to%20the%20version%20you%20need.%3Cbr%20/%3E%0ASave%20the%20file%20to%20your%20device.%3C/p%3E%0A%20%20%3C/li%3E%0A%20%20%3Cli%3E%0A%20%20%20%20%3Cp%3E%3Cstrong%3EInstall%20According%20to%20Content%20Type%3C/strong%3E%3C/p%3E%0A%0A%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EMods:%3C/strong%3E%20place%20the%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.jar%3C/code%3E%20inside%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.minecraft/mods%3C/code%3E.%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EPlugins:%3C/strong%3E%20move%20the%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.jar%3C/code%3E%20into%20your%20server%E2%80%99s%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3Eplugins%3C/code%3E%20folder.%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3ETexture%20Packs:%3C/strong%3E%20place%20the%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.zip%3C/code%3E%20into%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.minecraft/resourcepacks%3C/code%3E.%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EData%20Packs:%3C/strong%3E%20put%20inside%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3Eworld/datapacks%3C/code%3E.%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EAddons%20(Bedrock):%3C/strong%3E%20double-click%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.mcaddon%3C/code%3E%20or%20%3Ccode%20class=%22language-plaintext%20highlighter-rouge%22%3E.mcpack%3C/code%3E%20to%20import%20automatically.%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%3C/li%3E%0A%20%20%3Cli%3E%0A%20%20%20%20%3Cp%3E%3Cstrong%3ERestart%20Minecraft%20or%20Your%20Server%3C/strong%3E%3Cbr%20/%3E%0AReload%20or%20restart%20to%20apply%20the%20new%20content.%3C/p%3E%0A%20%20%3C/li%3E%0A%3C/ol%3E%0A%0A%20%20%3C/article%3E%0A%3C/section%3E%0A              # URI encode

  <span class="badge">Developer</span>





  # Liquid Templates Guide

Master Jekyll's Liquid templating language for dynamic content generation.

## Basics

### Output Tags

Display variables and expressions:

```liquid
{{ variable }}
{{ site.title }}
{{ page.description }}

{% if condition %}
  ...
{% elsif other_condition %}
  ...
{% else %}
  ...
{% endif %}

{% for item in array %}
  {{ item }}
{% endfor %}

{{ site.title }}              # From _config.yml
{{ site.description }}
{{ site.baseurl }}
{{ site.url }}
{{ site.time }}               # Build timestamp
{{ site.pages }}              # All pages
{{ site.posts }}              # All posts
{{ site.data }}               # Data files

{{ page.title }}              # Current page title
{{ page.url }}                # Page URL
{{ page.date }}               # Post date
{{ page.content }}            # Page content
{{ page.excerpt }}            # Auto excerpt
{{ page.custom_field }}       # Custom frontmatter

{% for modpack in site.data.mods.modpacks %}
  {{ modpack.name }}
  {{ modpack.description }}
{% endfor %}

{{ "hello world" | capitalize }}        # "Hello world"
{{ "hello world" | upcase }}            # "HELLO WORLD"
{{ "HELLO WORLD" | downcase }}          # "hello world"
{{ "hello world" | truncate: 8 }}       # "hello..."
{{ "hello world" | replace: "world", "there" }}  # "hello there"
{{ "a,b,c" | split: "," }}              # ["a", "b", "c"]
{{ " hello " | strip }}                 # "hello"
{{ "hello" | append: " world" }}        # "hello world"
{{ "world" | prepend: "hello " }}       # "hello world"
{{ "hello-world" | slugify }}           # "hello-world"

{{ 4 | plus: 2 }}              # 6
{{ 4 | minus: 2 }}             # 2
{{ 4 | times: 2 }}             # 8
{{ 4 | divided_by: 2 }}        # 2
{{ 4.5 | round }}              # 5
{{ 4.5 | ceil }}               # 5
{{ 4.5 | floor }}              # 4
{{ 1234 | divided_by: 100.0 }} # 12.34

{{ array | join: ", " }}       # Join with separator
{{ array | first }}            # First element
{{ array | last }}             # Last element
{{ array | size }}             # Array length
{{ array | reverse }}          # Reverse order
{{ array | sort }}             # Sort ascending
{{ array | uniq }}             # Remove duplicates
{{ array | where: "key", "value" }}  # Filter by property
{{ array | map: "name" }}      # Extract property

{{ page.date | date: "%Y-%m-%d" }}           # 2025-12-10
{{ page.date | date: "%B %d, %Y" }}          # December 10, 2025
{{ page.date | date_to_string }}             # 10 Dec 2025
{{ page.date | date_to_long_string }}        # 10 December 2025
{{ page.date | date_to_rfc822 }}             # RFC-822 format
{{ "2025-12-10" | date: "%Y" }}              # 2025

{{ "/assets/style.css" | relative_url }}     # /abc-site/assets/style.css
{{ "/page" | absolute_url }}                 # https://site.com/abc-site/page
{{ "path/to/file.md" | replace: ".md", ".html" }}

{{ content | markdownify }}             # Convert Markdown to HTML
{{ content | strip_html }}              # Remove HTML tags
{{ content | number_of_words }}         # Word count
{{ content | jsonify }}                 # Convert to JSON
{{ content | xml_escape }}              # Escape XML characters
{{ content | cgi_escape }}              # URL encode
{{ content | uri_escape }}              # URI encode

{% if page.category == "Developer" %}
  <span class="badge">Developer</span>
{% endif %}

{% if page.tags contains "featured" %}
  <span class="featured">★</span>
{% endif %}

{% unless page.published == false %}
  {{ page.content }}
{% endunless %}

{% case page.category %}
  {% when "Setup" %}
    <i class="fa-gear"></i>
  {% when "Styling" %}
    <i class="fa-palette"></i>
  {% else %}
    <i class="fa-file"></i>
{% endcase %}

{% for doc in site.docs %}
  <li>{{ doc.title }}</li>
{% endfor %}

{% for doc in site.docs limit:5 %}
  <!-- First 5 only -->
{% endfor %}

{% for doc in site.docs offset:5 %}
  <!-- Skip first 5 -->
{% endfor %}

{% for doc in site.docs reversed %}
  <!-- Reverse order -->
{% endfor %}

{% for item in array %}
  {{ forloop.index }}        # 1, 2, 3, ...
  {{ forloop.index0 }}       # 0, 1, 2, ...
  {{ forloop.first }}        # true on first iteration
  {{ forloop.last }}         # true on last iteration
  {{ forloop.length }}       # Total iterations
  {{ forloop.rindex }}       # Reverse index (from end)
{% endfor %}

{% for item in array %}
  {% if item.hide %}
    {% continue %}
  {% endif %}

  {% if forloop.index > 10 %}
    {% break %}
  {% endif %}

  {{ item.name }}
{% endfor %}

{% assign my_var = "value" %}
{% assign count = site.docs | size %}
{% assign featured = site.docs | where: "featured", true %}

{% capture my_variable %}
  Complex content with {{ page.title }}
  and calculations: {{ 5 | times: 10 }}
{% endcapture %}

{{ my_variable }}

{% include header.html %}
{% include card.html title="Test" description="Description" %}

<!-- _includes/card.html -->
<div class="card">
  <h3>{{ include.title }}</h3>
  <p>{{ include.description }}</p>
</div>

<!-- _layouts/docs.html -->
<!DOCTYPE html>
<html>
  <body>
    {{ content }}
  </body>
</html>

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.url | relative_url }}"
       {% if page.url == item.url %}class="active"{% endif %}>
      {{ item.title }}
    </a>
  {% endfor %}
</nav>

<nav class="breadcrumbs">
  <a href="{{ '/' | relative_url }}">Home</a>
  {% if page.category %}
    <span>/</span>
    <a href="{{ '/docs/category/' | append: page.category | slugify | append: '/' | relative_url }}">
      {{ page.category }}
    </a>
  {% endif %}
  <span>/</span>
  <span>{{ page.title }}</span>
</nav>

{% if paginator.total_pages > 1 %}
  <div class="pagination">
    {% if paginator.previous_page %}
      <a href="{{ paginator.previous_page_path | relative_url }}">Previous</a>
    {% endif %}

    <span>Page {{ paginator.page }} of {{ paginator.total_pages }}</span>

    {% if paginator.next_page %}
      <a href="{{ paginator.next_page_path | relative_url }}">Next</a>
    {% endif %}
  </div>
{% endif %}

{% assign related = site.docs | where: "category", page.category |
                    where_exp: "doc", "doc.url != page.url" |
                    limit: 3 %}

{% if related.size > 0 %}
  <h3>Related Documentation</h3>
  <ul>
    {% for doc in related %}
      <li><a href="{{ doc.url | relative_url }}">{{ doc.title }}</a></li>
    {% endfor %}
  </ul>
{% endif %}

<article class="
  {% if page.featured %}featured{% endif %}
  {% if page.category %}category-{{ page.category | slugify }}{% endif %}
  {% if page.tags contains 'important' %}important{% endif %}
">
  {{ content }}
</article>

{{ variable | inspect }}
{{ site.data | jsonify }}

{% if variable %}
  Variable exists and is truthy
{% endif %}

{% if variable == nil %}
  Variable is nil
{% endif %}

{% if variable == blank %}
  Variable is nil, false, or empty
{% endif %}

  <li>Accessibility Guide</li>

  <li>Adding Modpacks</li>

  <li>API Reference</li>

  <li>Browser Support</li>

  <li>Common Errors & Troubleshooting</li>

  <li>Content Guidelines</li>

  <li>Contributing</li>

  <li>CSS Variables Reference</li>

  <li>Customization</li>

  <li>Deployment Guide</li>

  <li>FAQ</li>

  <li>Getting Started</li>

  <li>GitHub Actions</li>

  <li>How to Download & Install</li>

  <li>Liquid Templates</li>

  <li>Performance Optimization</li>

  <li>Project Structure</li>

  <li>SEO Guide</li>

  <li>Setup & Configuration</li>

  <li>Troubleshooting</li>



  <!-- First 5 only -->

  <!-- First 5 only -->

  <!-- First 5 only -->

  <!-- First 5 only -->

  <!-- First 5 only -->



  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->

  <!-- Skip first 5 -->



  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  <!-- Reverse order -->

  Complex content with Liquid Templates
  and calculations: 50

{% include header.html %}
{% include card.html title="Test" description="Description" %}

<!-- _includes/card.html -->
<div class="card">
  <h3>{{ include.title }}</h3>
  <p>{{ include.description }}</p>
</div>

<!-- _layouts/docs.html -->
<!DOCTYPE html>
<html>
  <body>
    <section class="section">
  <p class="muted" style="margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase;font-size:12px">Docs</p>
  <h1 style="margin-top:0">How to Download & Install</h1>
  <p class="muted" style="max-width:680px">Step-by-step guide to download and install Minecraft content.</p>
  <article class="card" style="margin-top:20px;padding:20px;background:var(--card);border:1px solid var(--border)">
    <h2 id="step-by-step-guide">Step-by-Step Guide</h2>

<ol>
  <li>
    <p><strong>Open the Project Page</strong><br />
Visit the Modrinth, CurseForge, GitHub, or project website for the content you want to download.</p>
  </li>
  <li>
    <p><strong>Find the Versions or Files Section</strong><br />
Look for a tab or section labelled <strong>Versions</strong>, <strong>Files</strong>, <strong>Releases</strong>, or <strong>Downloads</strong>.</p>
  </li>
  <li>
    <p><strong>Select Your Minecraft Version</strong></p>

    <ul>
      <li>Locate a list or dropdown called <strong>Version</strong>, <strong>Game Version</strong>, or <strong>Supported Versions</strong>.</li>
      <li>Pick the version that matches your Minecraft installation (e.g., <em>1.20.1</em>, <em>1.19.2</em>).</li>
    </ul>
  </li>
  <li>
    <p><strong>Choose the Correct File Type</strong><br />
The file type depends on the kind of content:</p>

    <ul>
      <li><strong>Mods:</strong> <code class="language-plaintext highlighter-rouge">.jar</code></li>
      <li><strong>Plugins:</strong> <code class="language-plaintext highlighter-rouge">.jar</code></li>
      <li><strong>Addons (Bedrock):</strong> <code class="language-plaintext highlighter-rouge">.mcaddon</code> / <code class="language-plaintext highlighter-rouge">.mcpack</code></li>
      <li><strong>Texture Packs:</strong> <code class="language-plaintext highlighter-rouge">.zip</code></li>
      <li><strong>Data Packs:</strong> <code class="language-plaintext highlighter-rouge">.zip</code> or extracted folder</li>
      <li><strong>Capes / Skin Addons:</strong> whichever format the creator provides</li>
    </ul>
  </li>
  <li>
    <p><strong>Download the File</strong><br />
Click the <strong>Download</strong>, <strong>Get</strong>, or <strong>File</strong> button next to the version you need.<br />
Save the file to your device.</p>
  </li>
  <li>
    <p><strong>Install According to Content Type</strong></p>

    <ul>
      <li><strong>Mods:</strong> place the <code class="language-plaintext highlighter-rouge">.jar</code> inside <code class="language-plaintext highlighter-rouge">.minecraft/mods</code>.</li>
      <li><strong>Plugins:</strong> move the <code class="language-plaintext highlighter-rouge">.jar</code> into your server’s <code class="language-plaintext highlighter-rouge">plugins</code> folder.</li>
      <li><strong>Texture Packs:</strong> place the <code class="language-plaintext highlighter-rouge">.zip</code> into <code class="language-plaintext highlighter-rouge">.minecraft/resourcepacks</code>.</li>
      <li><strong>Data Packs:</strong> put inside <code class="language-plaintext highlighter-rouge">world/datapacks</code>.</li>
      <li><strong>Addons (Bedrock):</strong> double-click <code class="language-plaintext highlighter-rouge">.mcaddon</code> or <code class="language-plaintext highlighter-rouge">.mcpack</code> to import automatically.</li>
    </ul>
  </li>
  <li>
    <p><strong>Restart Minecraft or Your Server</strong><br />
Reload or restart to apply the new content.</p>
  </li>
</ol>

  </article>
</section>

  </body>
</html>

<nav>
  
</nav>

<nav class="breadcrumbs">
  <a href="/">Home</a>
  
    <span>/</span>
    <a href="/docs-category-developer/">
      Developer
    </a>
  
  <span>/</span>
  <span>Liquid Templates</span>
</nav>

  <h3>Related Documentation</h3>
  <ul>
    
      <li><a href="/docs/api-reference/">API Reference</a></li>
    
      <li><a href="/docs/deployment/">Deployment Guide</a></li>
    
      <li><a href="/docs/github-actions/">GitHub Actions</a></li>
    
      <li><a href="/docs/performance/">Performance Optimization</a></li>
    
      <li><a href="/docs/project-structure/">Project Structure</a></li>
    
      <li><a href="/docs/seo-guide/">SEO Guide</a></li>
    
  </ul>

<article class="
  
  category-developer
  
">
  <section class="section">
  <p class="muted" style="margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase;font-size:12px">Docs</p>
  <h1 style="margin-top:0">How to Download & Install</h1>
  <p class="muted" style="max-width:680px">Step-by-step guide to download and install Minecraft content.</p>
  <article class="card" style="margin-top:20px;padding:20px;background:var(--card);border:1px solid var(--border)">
    <h2 id="step-by-step-guide">Step-by-Step Guide</h2>

<ol>
  <li>
    <p><strong>Open the Project Page</strong><br />
Visit the Modrinth, CurseForge, GitHub, or project website for the content you want to download.</p>
  </li>
  <li>
    <p><strong>Find the Versions or Files Section</strong><br />
Look for a tab or section labelled <strong>Versions</strong>, <strong>Files</strong>, <strong>Releases</strong>, or <strong>Downloads</strong>.</p>
  </li>
  <li>
    <p><strong>Select Your Minecraft Version</strong></p>

    <ul>
      <li>Locate a list or dropdown called <strong>Version</strong>, <strong>Game Version</strong>, or <strong>Supported Versions</strong>.</li>
      <li>Pick the version that matches your Minecraft installation (e.g., <em>1.20.1</em>, <em>1.19.2</em>).</li>
    </ul>
  </li>
  <li>
    <p><strong>Choose the Correct File Type</strong><br />
The file type depends on the kind of content:</p>

    <ul>
      <li><strong>Mods:</strong> <code class="language-plaintext highlighter-rouge">.jar</code></li>
      <li><strong>Plugins:</strong> <code class="language-plaintext highlighter-rouge">.jar</code></li>
      <li><strong>Addons (Bedrock):</strong> <code class="language-plaintext highlighter-rouge">.mcaddon</code> / <code class="language-plaintext highlighter-rouge">.mcpack</code></li>
      <li><strong>Texture Packs:</strong> <code class="language-plaintext highlighter-rouge">.zip</code></li>
      <li><strong>Data Packs:</strong> <code class="language-plaintext highlighter-rouge">.zip</code> or extracted folder</li>
      <li><strong>Capes / Skin Addons:</strong> whichever format the creator provides</li>
    </ul>
  </li>
  <li>
    <p><strong>Download the File</strong><br />
Click the <strong>Download</strong>, <strong>Get</strong>, or <strong>File</strong> button next to the version you need.<br />
Save the file to your device.</p>
  </li>
  <li>
    <p><strong>Install According to Content Type</strong></p>

    <ul>
      <li><strong>Mods:</strong> place the <code class="language-plaintext highlighter-rouge">.jar</code> inside <code class="language-plaintext highlighter-rouge">.minecraft/mods</code>.</li>
      <li><strong>Plugins:</strong> move the <code class="language-plaintext highlighter-rouge">.jar</code> into your server’s <code class="language-plaintext highlighter-rouge">plugins</code> folder.</li>
      <li><strong>Texture Packs:</strong> place the <code class="language-plaintext highlighter-rouge">.zip</code> into <code class="language-plaintext highlighter-rouge">.minecraft/resourcepacks</code>.</li>
      <li><strong>Data Packs:</strong> put inside <code class="language-plaintext highlighter-rouge">world/datapacks</code>.</li>
      <li><strong>Addons (Bedrock):</strong> double-click <code class="language-plaintext highlighter-rouge">.mcaddon</code> or <code class="language-plaintext highlighter-rouge">.mcpack</code> to import automatically.</li>
    </ul>
  </li>
  <li>
    <p><strong>Restart Minecraft or Your Server</strong><br />
Reload or restart to apply the new content.</p>
  </li>
</ol>

  </article>
</section>

</article>

nil
{"en":{"hero_title":"Showcase: Minecraft Mods & Packs","hero_subtitle":"Mods, resource packs, datapacks, modpacks and plugins — curated from our organization.","browse_projects":"Browse Projects","learn_more":"Learn More","featured_title":"Featured Highlights","featured_subtitle":"Latest additions to our growing collection","featured_badge":"Featured","view_project":"View Project","source":"Source","stats_title":"Project Snapshot","stats_subtitle":"Live data pulled from our Modrinth cache","stat_total_projects":"Total Projects","stat_total_downloads":"Total Downloads","stat_supported_loaders":"Supported Loaders","stat_game_versions":"Game Versions","stat_top_categories":"Top Categories","stat_top_downloads":"Top Downloads","stat_downloads_note":"Highest downloaded projects","stat_loading":"Loading…","stat_unavailable":"Unavailable","stat_projects_catalog":"Projects in catalog","stat_avg_per_project":"avg per project","stat_unique_versions":"Unique game versions","stat_no_categories":"No categories yet","stat_no_data":"No download data available yet","error_loading":"Error loading","failed_to_load":"Failed to load","no_projects_found":"No projects found. They will sync automatically.","error_404_title":"Page Not Found","error_404_description":"The page you're looking for doesn't exist.","error_404_message":"Sorry, we couldn't find what you were looking for.","error_404_back_home":"Back to Home","error_404_browse":"Browse Projects","cookie_title":"Cookie Preferences","cookie_message":"We use cookies to improve your experience and analyze site performance. No personal data is collected.","cookie_accept":"Accept All","cookie_reject":"Reject","cookie_learn_more":"Learn More","cookie_manage":"Manage Preferences","cookie_close":"Close","cookie_save":"Save Preferences","cookie_privacy_policy":"Privacy Policy","cookie_essential":"Essential","cookie_essential_desc":"Required for core site functionality. Always enabled.","cookie_analytics":"Analytics","cookie_analytics_desc":"Help us understand how you use our site to improve it.","cookie_marketing":"Marketing","cookie_marketing_desc":"Allow us to show you relevant content and offers.","cookie_performance":"Performance","cookie_performance_desc":"Improve page speed and user experience.","cookie_last_updated":"Last updated","cookie_all_cookies":"All Cookies","cookie_cookie_name":"Cookie Name","cookie_purpose":"Purpose","cookie_expiration":"Expiration"},"fr":{"hero_title":"Vitrine : Mods & Packs Minecraft","hero_subtitle":"Mods, packs de ressources, datapacks, modpacks et plugins — sélectionnés par notre organisation.","browse_projects":"Parcourir les Projets","learn_more":"En Savoir Plus","featured_title":"Points Forts","featured_subtitle":"Derniers ajouts à notre collection","featured_badge":"En Vedette","view_project":"Voir le Projet","source":"Source","stats_title":"Aperçu des Projets","stats_subtitle":"Données en direct de notre cache Modrinth","stat_total_projects":"Projets Totaux","stat_total_downloads":"Téléchargements Totaux","stat_supported_loaders":"Chargeurs Supportés","stat_game_versions":"Versions du Jeu","stat_top_categories":"Meilleures Catégories","stat_top_downloads":"Meilleurs Téléchargements","stat_downloads_note":"Projets les plus téléchargés","stat_loading":"Chargement…","stat_unavailable":"Indisponible","stat_projects_catalog":"Projets dans le catalogue","stat_avg_per_project":"moy par projet","stat_unique_versions":"Versions de jeu uniques","stat_no_categories":"Pas encore de catégories","stat_no_data":"Aucune donnée de téléchargement disponible","error_loading":"Erreur de chargement","failed_to_load":"Échec du chargement","no_projects_found":"Aucun projet trouvé. Ils se synchroniseront automatiquement.","error_404_title":"Page Non Trouvée","error_404_description":"La page que vous recherchez n'existe pas.","error_404_message":"Désolé, nous n'avons pas pu trouver ce que vous cherchiez.","error_404_back_home":"Retour à l'Accueil","error_404_browse":"Parcourir les Projets","cookie_title":"Préférences de Cookies","cookie_message":"Nous utilisons des cookies pour améliorer votre expérience et analyser les performances du site. Aucune donnée personnelle n'est collectée.","cookie_accept":"Accepter Tous","cookie_reject":"Rejeter","cookie_learn_more":"En Savoir Plus","cookie_manage":"Gérer les Préférences","cookie_close":"Fermer","cookie_save":"Enregistrer les Préférences","cookie_privacy_policy":"Politique de Confidentialité","cookie_essential":"Essentiels","cookie_essential_desc":"Requis pour les fonctionnalités principales du site. Toujours activés.","cookie_analytics":"Analyse","cookie_analytics_desc":"Nous aider à comprendre comment vous utilisez notre site pour l'améliorer.","cookie_marketing":"Marketing","cookie_marketing_desc":"Nous permettre de vous montrer du contenu et des offres pertinents.","cookie_performance":"Performance","cookie_performance_desc":"Améliorer la vitesse et l'expérience utilisateur des pages.","cookie_last_updated":"Dernière mise à jour","cookie_all_cookies":"Tous les Cookies","cookie_cookie_name":"Nom du Cookie","cookie_purpose":"Objet","cookie_expiration":"Expiration"}}

  Variable is nil