web/wp-content/themes/mozilla-builders/templates/pages/project.twig

{% extends "layouts/base.twig" %}

{%- block custom_body_classes -%}
  theme-dark
{%- endblock -%}

{% block pageBody %}

<header class="grid grid-site centered-page items-end mt-12 gap-y-4 md:mt-24 xl:mt-30">
  <h1 class="col-span-full uppercase lg:col-span-16 type-sans-xl md:type-sans-2xl">
    {{ post.title }}
  </h1>

  <div class="col-span-full lg:col-span-8">
    <div class="grid grid-cols-6 lg:grid-cols-8 gap-x-grid-site-gutter gap-y-4">
      {% if post.thumbnail.id %}
      <div class="col-span-2 max-lg:order-2 lg:col-span-4">
        {% include "components/lazy-img.twig" with { img: post.thumbnail } %}
      </div>
      {% endif %}

      <p class="{% if post.thumbnail.id %}col-span-4{% else %}col-span-6 md:col-span-4{% endif %} max-lg:order-1 lg:col-span-8 type-headline-lg lg:leading-tighter">{{ post.tagline }}</p>
    </div>
  </div>
</header>

<div class="grid grid-site centered-page gap-y-12 mt-12 lg:mt-24">
  <section class="col-span-full md:col-span-1/2 lg:col-span-1/3 border-t border-content pt-2">
    <h2 class="mb-6 text-xs uppercase">Overview</h2>

    <dl class="grid grid-cols-6 md:grid-cols-16 lg:grid-cols-8 gap-x-grid-site-gutter gap-y-1.5 md:gap-y-2">
      {% if post.contributors is not empty %}
      <div class="contents">
        <dt class="col-span-1/2">Contributor{{ post.contributors|length > 1 ? 's' : '' }}</dt>
        <dd class="col-span-1/2 [&_a]:font-semibold">
          {% include "components/articles/byline_format.twig" with { bylines: post.contributors } %}
        </dd>
      </div>
      {% endif %}

      {% if post.platforms is not empty %}
      <div class="contents">
        <dt class="col-span-1/2">Platform{{ post.platforms|length > 1 ? 's' : '' }}</dt>
        <dd class="col-span-1/2 [&_a]:font-semibold">
          {% for platform in post.platforms %}
            <a href="{{ platform.link }}" class="hover-link">{{ platform.name }}</a>{% if not loop.last %}, {% endif %}
          {% endfor %}
        </dd>
      </div>
      {% endif %}

      {% if post.categories is not empty %}
      <div class="contents">
        <dt class="col-span-1/2">{{ post.categories|length > 1 ? 'Categories' : 'Category' }}</dt>
        <dd class="col-span-1/2 [&_a]:font-semibold">
          {% for category in post.categories %}
            <a href="{{ category.link }}" class="hover-link">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
          {% endfor %}
        </dd>
      </div>
      {% endif %}

      {% if post.github_link %}
      <div class="contents">
        <dt class="col-span-1/2">Github</dt>
        <dd class="col-span-1/2 font-semibold"><a href="{{ post.github_link }}" class="hover-link">Code</a></dd>
      </div>
      {% endif %}

      {% if post.github_stars|default(0) > 0 %}
      <div class="contents">
        <dt class="col-span-1/2">Stars</dt>
        <dd class="col-span-1/2 font-semibold">
          {{- post.github_stars|number_shorthand -}}
        </dd>
      </div>
      {% endif %}

      {% if post.github_forks|default(0) > 0 %}
      <div class="contents">
        <dt class="col-span-1/2">Forks</dt>
        <dd class="col-span-1/2 font-semibold">
          {{- post.github_forks|number_shorthand -}}
        </dd>
      </div>
      {% endif %}

      {% if post.technologies is not empty %}
      <div class="contents">
        <dt class="col-span-1/2">{{ post.technologies|length > 1 ? 'Technologies' : 'Technology' }}</dt>
        <dd class="col-span-1/2 [&_a]:font-semibold">
          {% for technology in post.technologies %}
            <a href="{{ technology.link }}" class="hover-link">{{ technology.name }}</a>{% if not loop.last %}, {% endif %}
          {% endfor %}
        </dd>
      </div>
      {% endif %}

      {% if post.external_links %}
      <div class="contents">
        <dt class="col-span-1/2">Link{% if post.external_links|length > 1 %}s{% endif %}</dt>
        <dd class="col-span-1/2 font-semibold">
          {% for link in post.external_links %}
            <a href="{{ link.external_link.url }}" class="hover-link">{{ link.external_link.title }}</a>{% if not loop.last %}, {% endif %}
          {% endfor %}
        </dd>
      </div>
      {% endif %}
    </dl>
  </section>

  {% if post.about %}
  <section class="col-span-full md:col-span-1/2 lg:col-span-1/3 border-t border-content pt-2">
    <h2 class="mb-6 text-xs uppercase">More Information</h2>

    <div class="prose">
      {{ post.about }}
    </div>
  </section>
  {% endif %}

  <section class="col-span-full md:col-span-1/2 md:col-start-end lg:col-span-1/3 border-t border-content pt-2 flex flex-col">
    <h2 class="mb-6 text-xs uppercase">{{ post.discord.heading ?: 'Contribute' }}</h2>

    {% if post.discord.channel_name or post.discord.members_count %}
      <dl class="grid grid-cols-6 md:grid-cols-16 lg:grid-cols-8 gap-x-grid-site-gutter gap-y-2 mb-8">
        {% if post.discord.channel_name %}
          <div class="contents">
            <dt class="col-span-1/2">Channel</dt>
            <dd class="col-span-1/2 font-semibold">
              <a href="{{ archive_links.discord }}" class="hover-link">#{{ post.discord.channel_name }}</a>
            </dd>
          </div>
        {% endif %}

        {% if post.discord.members_count %}
          <div class="contents">
            <dt class="col-span-1/2">Members</dt>
            <dd class="col-span-1/2 font-semibold">
              {{- post.discord.members_count|number_shorthand -}}
            </dd>
          </div>
        {% endif %}
      </dl>
    {% endif %}

    {% if post.discord.link|length %}
      {% set href = post.discord.link.url %}
      {% set label = post.discord.link.title %}
    {% else %}
      {% set href = archive_links.discord %}
      {% set label = 'Join the Discord' %}
    {% endif %}
    {% include "components/button-link.twig" with { href: href, label: label } %}
  </section>
</div>

<section>
  <h2 class="sr-only">Contributors</h2>

  {% for contributor in post.contributors %}
  <div class="grid grid-site centered-page gap-y-12 mt-36 md:mt-24">
    <div class="col-span-full md:col-span-1/2 lg:col-span-1/3">
      <div class="grid grid-cols-6 md:grid-cols-16 lg:grid-cols-8 gap-x-grid-site-gutter gap-y-4">
        {% if contributor.thumbnail.id %}
        <div class="col-span-2 md:col-span-5 lg:col-span-3 p-1.5 relative bg-content before:size-1.5 before:bg-main before:absolute before:bottom-0 before:right-0">
          {% include "components/lazy-img.twig" with { img: contributor.thumbnail, class: "w-full" } %}
        </div>
        {% endif %}
      </div>
    </div>

    <div class="col-span-full md:col-span-1/2 lg:col-span-1/3 border-t border-content pt-2 flex flex-col">
      <h3 class="text-xs uppercase">About {{ contributor.first_name }}</h3>

      {% if contributor.about %}
        <div class="mt-6 prose">
          {{ contributor.about }}
        </div>
      {% endif %}

      <div class="mt-6">
        <a href="{{ contributor.link }}" class="hover-link font-bold">
          {{ contributor.first_name }}'s Profile
        </a>
      </div>
    </div>

    {% if contributor.latest_articles is not empty %}
    <div class="col-span-full md:col-span-1/2 md:max-lg:col-start-end lg:col-span-1/3 border-t border-content pt-2 flex flex-col">
      <h4 class="mb-6 text-xs uppercase">More from {{ contributor.first_name }}</h4>

      <ul class="flex flex-col gap-y-4">
        {% for article in contributor.latest_articles %}
          <li class="relative border-b border-content pb-1">
            <h5 class="font-semibold"><a href="{{ article.link }}" class="before:inset-0 before:absolute before:z-10 hocus:text-action-focus-reverse hocus:bg-action-focus">{{ article.title }}</a></h5>
            <p>{{ article.subtitle }}</p>
          </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>
  {% endfor %}
</section>

<section class="grid grid-site centered-page gap-y-16 mt-24 lg:mt-36">
  <div class="col-span-full border border-content p-1">
    <h2 class="uppercase text-center text-xs leading-3 tracking-wide">Other Projects</h2>
  </div>

  {% if post.other_projects is not empty %}
    <ul class="contents">
      {% for project in post.other_projects %}
        <li class="col-span-full md:col-span-1/2 lg:col-span-1/3">
          {% include "components/previews/project.twig" with { project: project } %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</section>

{% endblock %}