resources.html

---
layout: default
title: "Resources"
permalink: resources
footer-other: true
sort-order: 2
---
<header class="resource-header">
  <h1>Resources</h1>
  <p>A bunch of resources and references curated by me, with the goal to help others learn something new. For more frequent bursts of resources and other related content join me over on {% include external-link.html link="https://www.threads.net/@naher94" content="Threads" %}.</p>
</header>

{%- comment -%}collect all the unique tags from the resources and articles{%- endcomment -%}
{% assign allresources = site.resources | concat: site.articles %}
{% assign alltags = allresources | map: "tags" | uniq | sort %}
<section class="cell tag-section">
  <h2 class="visually-hidden">Categories</h2>
  <div class="tags-container cell">
    {% for tag in alltags %}
      <a href="#{{tag | replace: " ", "-"}}">
        <div class="tag">
          {{ tag }}
        </div>
      </a>
    {% endfor %}
     <a href="#" class="resource-surprise-me-button">
      <div class="tag surprise-me">
        <i class="fa-solid fa-wand-magic-sparkles"></i>
        surprise me
      </div>
     </a>
  </div>
</section>

<section class="recently-added grid-x grid-padding-x grid-padding-y cell medium-12">
  <h2 class="cell small-12">Recently Added</h2>
  {% assign resources_sorted = allresources | sort: 'date' | reverse %}
    <!-- TODO if tags array is empty then skip as that is current logic for not showing in the list -->
    <!-- hard to test since local and deployed is not acting the same -->
    {%- for resource in resources_sorted limit:3 -%}
      {%- if resource.article == true -%}
      {% include article-element.html item=resource css-class="medium-6 large-4" %}
      {%- else -%}
      {% include resource-element.html item=resource css-class="medium-6 large-4" %}
      {%- endif -%}
    {%- endfor -%}
</section>

<section class="featured-collections grid-x grid-padding-x grid-padding-y cell medium-12">
  <div class="cell grid-x align-middle align-justify">
    <h2 class="cell small-8 medium-shrink">Featured Collections</h2>
    <a href="{% link resource-collection.html %}" class="view-all">
        <span>view all</span><i class="fas fa-arrow-right"></i>
    </a>
  </div>
  {%- for featured in site.resources-collection -%}
  {% if featured.featured == true %}
    <a href="{{featured.url | prepend: site.url}}" class="cell medium-3">
      <div class="tile" style="color: {{featured.text-color}};">
        <img src="../img/resources-collection/{{featured.tile-image}}" alt="{{featured.tile-image-alt}}">
        <p class="title">{{featured.title}}</p>
        <p class="sub-header">{{featured.sub-header}}</p>
      </div>
    </a>
  {% endif %}
  {%- endfor -%}
</section>

{%- assign allcollections = site.resources-collection | sort: 'date' | reverse -%}
{% for tag in alltags %}
  <section class="tag-group grid-x grid-padding-x grid-padding-y cell medium-12" id="{{tag | replace: " ", "-"}}">
    <div class="cell grid-x align-middle">
      <a href="#{{tag | replace: " ", "-"}}" class="section-header">
        <h2 class="cell small-12 medium-shrink"><span class="hashtag">#</span>{{tag}}</h2>
      </a>
      <div class="cell small-12 medium-auto divider"></div>
    </div>
  
  {% assign tag_found = false %}

  {% for collection in allcollections %}
    {%- if collection.tag == tag -%}
      {% assign tag_found = true %}
      {% break %}
    {% endif %}
    
    {% if tag_found %}
      {% break %}
    {% endif %}

  {% endfor %}
  
  {% if tag_found %}
  <div class="cell grid-x collection-row">
  {% endif %}
  
    {%- for collection in allcollections -%}
    {%- if collection.tag == tag -%}
    <a href="{{collection.url | prepend: site.url}}" class="cell medium-4 inline-collection-tile-link">
      <div class="inline-collection-tile grid-x align-middle">
        <img src="../img/resources-collection/{{collection.tile-image}}" alt="{{collection.tile-image-alt}}" class="cell small-2half">
        <div class="text-content cell auto">
          <p class="sub-header">{{collection.sub-header}}</p>
          <p class="title">{{collection.title}}</p>
        </div>
      </div>
    </a>
    {%- endif -%}
    {%- endfor -%}
  
    {% if tag_found %}
  </div>
  {% endif %}

  {% for resource in allresources %}
    {% if resource.tags contains tag %}
      {%- if resource.article == true -%}
      {% include article-element.html item=resource css-class="medium-6 large-4" %}
      {%- else -%}
      {% include resource-element.html item=resource css-class="medium-6 large-4" %}
      {%- endif -%}
    {% endif %}
  {% endfor %}
  </section>
{% endfor %}