article.html

---
layout: page
type: article
---

{%- include snippets/assign.html
  target = site.data.variables.default.page.sharing
  source0=layout.sharing source1=page.sharing -%}
{%- assign _sharing = __return -%}

<div class="layout--article">
  {%- include article/top/custom.html -%}

  <div class="article__content" itemprop="articleBody">
    {{ content }}

    {%- if page.filter == "project" -%}
      <!-- 1) Checkbox filters -->
      <div class="subjects">
        {%- assign nav_group = site.data.navigation["projects"] -%}

        <div class="search search--bright">
          <div class="main">
            <div class="search-bar">
              <div class="search-box js-search-box not-empty">
                <div class="search-box__icon-search"><i class="fas fa-search"></i></div>
                <input type="text" class="">
                <div class="search-box__icon-clear js-icon-clear">
                  <a><i class="fas fa-times"></i></a>
                </div>
              </div>
            </div>
            <div class="search-result js-search-result"></div>
          </div>
        </div>

        <!-- Platform -->
        <div class="filter">
          <strong>Platform:</strong>
          {%- assign platforms = "" | split: "" -%}
          {%- for grp in nav_group -%}
            {%- for item in grp.children -%}
              {%- for p in item.platform -%}
                {%- unless platforms contains p -%}
                  {%- assign platforms = platforms | push: p -%}
                {%- endunless -%}
              {%- endfor -%}
            {%- endfor -%}
          {%- endfor -%}
          {%- for platform in platforms -%}
            <label>
              <input type="checkbox" class="filter-checkbox" data-category="platform" value="{{ platform }}" onchange="filterProjects()">
              {{ platform }}
            </label>
          {%- endfor -%}
        </div>

        <!-- Subject -->
        <div class="filter">
          <strong>Subject:</strong>
          {%- assign subjects = "" | split: "" -%}
          {%- for grp in nav_group -%}
            {%- for item in grp.children -%}
              {%- for s in item.subjects -%}
                {%- unless subjects contains s -%}
                  {%- assign subjects = subjects | push: s -%}
                {%- endunless -%}
              {%- endfor -%}
            {%- endfor -%}
          {%- endfor -%}
          {%- for subject in subjects -%}
            <label>
              <input type="checkbox" class="filter-checkbox" data-category="subject" value="{{ subject }}" onchange="filterProjects()">
              {{ subject }}
            </label>
          {%- endfor -%}
        </div>

        <!-- SW/HW -->
        <div class="filter">
          <strong>SW/HW:</strong>
          {%- assign swhw_items = "" | split: "" -%}
          {%- for grp in nav_group -%}
            {%- for item in grp.children -%}
              {%- for tag in item["sw-hw"] -%}
                {%- unless swhw_items contains tag -%}
                  {%- assign swhw_items = swhw_items | push: tag -%}
                {%- endunless -%}
              {%- endfor -%}
            {%- endfor -%}
          {%- endfor -%}
          {%- for tag in swhw_items -%}
            <label>
              <input type="checkbox" class="filter-checkbox" data-category="sw-hw" value="{{ tag }}" onchange="filterProjects()">
              {{ tag }}
            </label>
          {%- endfor -%}
        </div>

        <!-- Support Level -->
        <div class="filter">
          <strong>Support Level:</strong>
          {%- assign levels = "" | split: "" -%}
          {%- for grp in nav_group -%}
            {%- for item in grp.children -%}
              {%- for lvl in item["support-level"] -%}
                {%- unless levels contains lvl -%}
                  {%- assign levels = levels | push: lvl -%}
                {%- endunless -%}
              {%- endfor -%}
            {%- endfor -%}
          {%- endfor -%}
          {%- for lvl in levels -%}
            <label>
              <input type="checkbox" class="filter-checkbox" data-category="support-level" value="{{ lvl }}" onchange="filterProjects()">
              {{ lvl }}
            </label>
          {%- endfor -%}
        </div>
      </div>

      <!-- 2) Two‐section project list -->
      <div class="project-results">
        {%- assign nav_root = site.data.navigation["projects"] -%}
        {%- for category in nav_root -%}
          <h2 class="project-group-title">{{ category.title }}</h2>
          <ul class="project-list">
            {%- for _child in category.children -%}
              {%- include snippets/get-nav-url.html path=_child.url -%}
              {%- assign _nav_url = __return -%}

              {%- comment -%}
              Normalize URL so it matches how site.posts/pages store .url
              (no site.url, no baseurl)
              {%- endcomment -%}
              {%- assign _nav_url_rel = _nav_url
                   | replace: site.url, ''
                   | replace: site.baseurl, '' -%}

              {%- comment -%}
              Resolve badges:
              1) Prefer badges from navigation data (_child.badges)
              2) If not present, look up the matching post/page by URL
                 and read its front-matter badges
              {%- endcomment -%}
              {%- assign _badges = _child.badges -%}
              {%- if _badges == nil or _badges == empty -%}
                {%- assign _doc = site.posts | where: "url", _nav_url_rel | first -%}
                {%- unless _doc -%}{%- assign _doc = site.pages | where: "url", _nav_url_rel | first -%}{%- endunless -%}
                {%- if _doc and _doc.badges -%}{%- assign _badges = _doc.badges -%}{%- endif -%}
              {%- endif -%}

              <li class="project-item"
                  data-platforms='{{ _child.platform | jsonify }}'
                  data-subjects='{{ _child.subjects | jsonify }}'
                  data-swhw='{{ _child["sw-hw"] | jsonify }}'
                  data-support-level='{{ _child["support-level"] | jsonify }}'
                  {%- if _badges -%} data-badges='{{ _badges | jsonify }}'{%- endif -%}
                  data-url-rel='{{ _nav_url_rel }}'>

               <header class="project-header">
  <a class="project-title" href="{{ _nav_url }}">{{ _child.title }}</a>

  {%- if _badges -%}
    <div class="project-badges">
      {% include badges.html items=_badges %}
    </div>
  {%- endif -%}
</header>


                <p class="project-desc">
                  {{ _child.description }}
                </p>
              </li>
            {%- endfor -%}
          </ul>
        {%- endfor -%}
      </div>

<script>
(function () {
  let isSorting = false;
  let observer = null;
  let debounceTimer = null;

  function safeParseBadges(raw) {
    raw = raw == null ? '' : String(raw).trim();
    if (!raw) return [];
    try {
      const j = JSON.parse(raw);
      if (Array.isArray(j)) return j.map(x => String(x).trim()).filter(Boolean);
    } catch (e) {}
    // comma-separated fallback
    const cleaned = raw.replace(/^[\[\]'" ]+|[\[\]'" ]+$/g, '');
    return cleaned.split(',').map(s => s.trim()).filter(Boolean);
  }

  function badgesFromDOM(li) {
    const badgesEl = li.querySelector('.project-badges');
    if (!badgesEl) return [];
    // collect visible badge labels
    return Array.from(badgesEl.querySelectorAll('*'))
      .map(n => (n.textContent || '').trim())
      .filter(Boolean);
  }

  function normalize(arr) {
    return (arr || []).map(x => String(x).trim().toLowerCase());
  }

  function badgeRank(normed) {
    const isTrending = normed.includes('trending');
    const isRecent =
      normed.includes('recently_added') ||
      normed.includes('recently-added') ||
      normed.includes('recentlyadded');

    if (isTrending && isRecent) return 0; // Trending + Recently added
    if (isRecent) return 1;              // Recently added
    if (isTrending) return 2;            // Trending
    return 3;                            // Neither
  }

  function getBadgesForItem(li) {
    const raw = li.getAttribute('data-badges') || li.dataset.badges || '';
    let parsed = safeParseBadges(raw);
    if (parsed.length === 0) parsed = badgesFromDOM(li);
    return normalize(parsed);
  }

  function sortProjectLists() {
    if (isSorting) return;
    isSorting = true;

    // Prevent observer loop while we move nodes
    if (observer) observer.disconnect();

    document.querySelectorAll('.project-list').forEach(ul => {
      const items = Array.from(ul.querySelectorAll(':scope > .project-item'));

      const decorated = items.map((el, idx) => {
        const badges = getBadgesForItem(el);
        return { el, idx, rank: badgeRank(badges) };
      });

      decorated.sort((a, b) => (a.rank - b.rank) || (a.idx - b.idx));
      decorated.forEach(d => ul.appendChild(d.el));
    });

    // Reconnect observer after we're done moving nodes
    startObserving();

    isSorting = false;
  }

  function scheduleSort() {
    if (debounceTimer) clearTimeout(debounceTimer);
    debounceTimer = setTimeout(sortProjectLists, 100);
  }

  function startObserving() {
    const container = document.querySelector('.project-results');
    if (!container) return;

    if (!observer) {
      observer = new MutationObserver(() => {
        // Only schedule if we aren't already sorting
        if (!isSorting) scheduleSort();
      });
    }

    // IMPORTANT: only observe childList changes, not attributes on the whole subtree.
    // Observing attributes widely can cause lots of extra triggers.
    observer.observe(container, { childList: true, subtree: true });
  }

  document.addEventListener('DOMContentLoaded', () => {
    sortProjectLists();
    // Optional second pass for late-rendered badges
    setTimeout(sortProjectLists, 300);
  });

  // Expose for manual debugging
  window.__arm_sortProjectLists = sortProjectLists;
})();
</script>


    {%- endif -%}
  </div>

  {%- if _sharing -%}
    <section class="article__sharing d-print-none">{%- include sharing.html -%}</section>
  {%- endif -%}

  <div class="d-print-none">
    {%- include article-footer.html -%}
  </div>
</div>