community.html.eex

<div id="community" class="container mt-4">
  <div>
    <h1 data-toc-skip="true"><i class="fas fa-seedling" style="color:#82c91e;"></i> Community</h1>
    <p style="margin-left:1rem;">
    The Erlang ecosystem consists of a vibrant and diverse set of languages, tools, platforms, and much more.
    Help us grow our community and augment this collection of resources by contributing on <a href="https://github.com/erlef/website/"><i class="fab fa-github"></i>&nbsp;Github</a>
    </p>
  </div>

  <hr/>

  <div class="row"> 
    <div class="col-sm-2">
      <nav id="community-toc" class="sticky-top"></nav>
    </div>

    <div class="col-sm-10 pb-5"> 
      <!-- Languages -->
      <h1>Languages</h1>
      <p>Languages are an integral part of the foundation of our ecosystem. Many languages make up the Erlang ecosystem and this list continues to grow. For a complete list of BEAM languages, including past or inactive languages please visit <a href="https://github.com/llaisdy/beam_languages">llaisdy/beam_languages</a>.
      </p>

      <%= community_card_wall(Enum.shuffle(@community.languages)) %>

       <!-- Blogs -->
      <h1>Blogs</h1>
      <p>The community produces a lot of content dedicated to discussing and exploring all facets of the Erlang ecosystem. Blogs listed below offer a great way to stay up to date with the state of the ecosystem.</p>

      <%= community_card_wall(Enum.shuffle(@community.blogs)) %>
    </div>  
  </div>
</div>

<script>
  $( ".card" ).hover(
    function() {
      $(this).addClass('shadow-lg').css('cursor', 'pointer');
    }, function() {
      $(this).removeClass('shadow-lg');
    }
  );

$(function() {
  var navSelector = "#community-toc";
  var $myNav = $(navSelector);
  Toc.init($myNav);

  $("body").scrollspy({
    target: navSelector,
    offset: 10
  });
});
</script>