---
layout: layout
---

<%
  const data = site.data.mastodon.data;
  const servers = data.servers;
  const tutorials = data.tutorials;
  const metrics = data.metrics;
  const services = data.services;
  const utilities = data.utilities;
  const forks = data.forks;
  const tuts = [__('intro'), __('howto'), __('guide')];
  const stats = [__('dashboards'), __('stats'), __('graphs')];
  const tools = [__('mastoPreinstalled'), __('mastoHosting')];
  const utils = [__('mastofeed'), __('crossposting'), __('feedPreview'), __('mastoGallery'), __('webmentions')];
  const forkTitles = [__('glitchSoc')];
%>

<%- partial('_partial/heroheader') %>

<main class="contents network">

  <%- partial('_partial/header') %>

  <div class="section-wrapper">

    <%- partial('_partial/generalinfo') %>

    <section class="column">
      <div class="section u-block">
        <h4><%- __('join') %></h4>
        <ul class="section-list">
          <% for (item in servers) { %>
            <li class="u-inline">
              <a href="<%= servers[item].url %>"><%- __('nodeList') %> <%= servers[item].num %></a><span>&nbsp/&nbsp;</span>
            </li>
          <% } %>
        </ul>
        <span><a href="<%= data.mobile %>"><%- __('mobapps') %></a></span>
      </div>
      <div class="section u-block">
        <h4><%- __('users') %></h4>
        <span><a href="<%= data.twFriends %>"><%- __('twFriends') %></a></span>
      </div>
      <div class="section u-block">
        <h4><%- __('tuts') %></h4>
        <ul class="section-list">
          <% for (item in tutorials) { %>
            <% let n = tutorials[item].id %>
            <li class="u-inline">
              <a href="<%= tutorials[item].url %>"><%= tuts[n] %></a><span>&nbsp/&nbsp;</span>
            </li>
          <% } %>
        </ul>
      </div>
      <div class="section u-block">
        <h4><%- __('metrics') %></h4>
        <ul class="section-list">
          <% for (item in metrics) { %>
            <% let s = metrics[item].id %>
            <li class="u-inline">
              <a href="<%= metrics[item].url %>"><%= stats[s] %></a><span>&nbsp/&nbsp;</span>
            </li>
          <% } %>
        </ul>
      </div>
    </section>
  </div>

  <div class="section-wrapper">
    <div class="column">
      <div class="section u-block u-nomargin">
        <h4><%- __('utilities') %></h4>
        <ul class="section-list">
          <% for (item in utilities) { %>
            <% let u = utilities[item].id %>
            <li>
              <a href="<%= utilities[item].url %>"><%= utils[u] %></a>
            </li>
          <% } %>
        </ul>
      </div>
    </div>
    <div class="column">
      <div class="section u-block u-nomargin">
        <h4><%- __('techies') %></h4>
        <p class="u-nomargin"><a href="<%= data.awesome %>"><%- __('awesome') %></a></p>
        <p class="u-nomargin"><a href="<%= data.backup %>"><%- __('backup') %></a></p>
        <ul class="section-list">
          <% for (item in services) { %>
            <% let b = services[item].id %>
            <li class="u-inline">
              <a href="<%= services[item].url %>"><%= tools[b] %></a><span>&nbsp/&nbsp;</span>
            </li>
          <% } %>
        </ul>

        <ul class="section-list">
          <% for (item in forks) { %>
            <% let b = forks[item].id %>
            <li class="u-inline">
              <a href="<%= forks[item].url %>"><%= forkTitles[b] %></a><span>&nbsp/&nbsp;</span>
            </li>
          <% } %>
        </ul>
      </div>
    </div>
  </div>

  <%- partial('_partial/world') %>
  <br>
  <%- partial('_partial/contributing') %>

  <%- partial('_partial/buttons') %>
</main>