articles.html

{% extends 'default.html' %}

<!-- When we're rendering API docs, our "versionLinks" data doesn't come from
     markdown frontmatter, instead it comes from the API JSON data.
     TODO(aomarks) There must be some way to assign "versionLinks" to
     "data.otherVersions" from api.html, but I haven't figure out how! -->
{% if not versionLinks %}
  {% set versionLinks = data.versionLinks %}
{% endif %}

{% block head %}
  {% inlinecss "docs.css" %}
  {% inlinecss "articles.css" %}
  {% inlinejs "pages/docs.js" %}
  <script type="module" src="{{ site.baseurl }}/js/components/playground-elements.js"></script>
  <script type="module" src="{{ site.baseurl }}/js/components/litdev-example.js"></script>
  <script type="module" src="{{ site.baseurl }}/js/components/litdev-switchable-sample.js"></script>
  <script type="module" src="{{ site.baseurl }}/js/components/ts-js.js"></script>
  {% endblock %}

{% block content %}
  {% set toc = content | toc %}

  <div id="docsNavWrapper" class="minimalScroller">
    <nav id="docsNav">
      <ol>{% include 'articles-nav.html' %}</ol>
    </nav>
  </div>

  <div id="rhsTocWrapper">
    {% if toc | tocHasEntries %}
      <nav id="rhsToc">
        <h2><a href="#content">Contents: {{ title }}</a></h2>
        <div id="rhsTocInner">
          {{ toc | safe }}
        </div>
      </nav>
    {% endif %}
  </div>

  <div id="articleWrapper">
    <article id="content">
      <h1>{{ title }}</h1>
      <header class="articleHeader">
        {% block articleHeader %}{% endblock %}
        {% if toc | tocHasEntries %}
          <nav id="inlineToc">
            <details>
              <summary><h2>Contents</h2></summary>
              {{ toc | safe }}
            </details>
          </nav>
        {% endif %}
      </header>


      {% block articleContent %}{{ content | safe }}{% endblock %}

      {% set editableDocumentsRegex = r/articles\/article\/.+/ %}
      {% if editableDocumentsRegex.test(page.inputPath) %}
      <p id="edit-page-link">
        <a
            href="https://github.com/lit/lit.dev/edit/main/packages/lit-dev-content/{{ page.inputPath }}">
          Edit this page
          <lazy-svg
              loading="visible"
              svg-aria-hidden
              href="{{ site.baseurl }}/images/icons/edit-square.svg#icon">
          </lazy-svg>
        </a>
      </p>
      {% endif %}

      {% set navItems = collections[collection] | eleventyNavigation | flattenNavigationAndAddNextPrev %}
      {% for item in navItems %}
        {% if item.url === page.url and item.parent %}
          {% set prev = item.prev %}
          {% set prevTitle = prev.url | documentUrlTitle %}
          {% if not prev.parent %}
            {% set prev = prev.prev %}
          {% endif %}
          {% set next = item.next %}
          {% set nextTitle = next.url | documentUrlTitle %}
          {% if not next.parent %}
            {% set next = next.next %}
          {% endif %}

          <div id="prevAndNextLinks">
            <span>
              {% if prev and isTagPage != true and prevTitle %}
                <a id="prevLink" href="{{ prev.url }}">
                  <!-- Source: https://material.io/resources/icons/?icon=arrow_back -->
                  <svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor">
                    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                  </svg>
                  <span class="direction">Previous</span>
                  <span class="title">{{ prevTitle }}</span>
                </a>
              {% endif %}
            </span>

            <span>
              {% if next and isTagPage != true and nextTitle %}
                <a id="nextLink" href="{{ next.url }}">
                  <span class="direction">Next</span>
                  <span class="title">{{ nextTitle }}</span>
                  <!-- Source: https://material.io/resources/icons/?icon=arrow_forward -->
                  <svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor">
                    <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
                  </svg>
                </a>
              {% endif %}
            </span>
          </div>
        {% endif %}
      {% endfor %}
    </article>
  </div>

{% endblock %}