riffpointer.github.io/_layouts/post.html at main · riffpointer/riffpointer.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
---
layout: compress
---

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">

{% include header.html %}

<body data-theme="{{ site.mode }}">
  <a class="skip-link" href="#main-content">Skip to content</a>

  <script>
    (function() {
      const body = document.body;
      const data = body.getAttribute("data-theme");

      const initTheme = (state) => {
        if (state === "dark") {
          body.setAttribute("data-theme", "dark");
        } else if (state === "light") {
          body.removeAttribute("data-theme");
        } else {
          localStorage.setItem("theme", data);
        }
      };

      initTheme(localStorage.getItem("theme"));
    })();
  </script>

  {% include navbar.html %}
  <div class="wrapper post">
    {% include breadcrumbs.html %}
    <main id="main-content" class="page-content" aria-label="Content">
      <article itemscope itemtype="https://schema.org/BlogPosting">
        {% assign canonical_url = page.url | remove: 'index.html' | remove: '.html' | absolute_url %}
        {% assign published_at = page.date | date_to_xmlschema %}
        {% assign modified_at = page.modified | default: page.date | date_to_xmlschema %}
        {% assign image_url = page.image | default: site.image | absolute_url %}
        {% assign keywords = page.tags | join: ', ' %}
        <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BlogPosting",
          "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": {{ canonical_url | jsonify }}
          },
          "headline": {{ page.title | jsonify }},
          "description": {{ page.description | default: site.description | strip_html | normalize_whitespace | truncate: 200 | jsonify }},
          "datePublished": {{ published_at | jsonify }},
          "dateModified": {{ modified_at | jsonify }},
          "author": {
            "@type": "Person",
            "name": {{ site.author.name | jsonify }}
          },
          "publisher": {
            "@type": "Organization",
            "name": {{ site.title | jsonify }},
            "logo": {
              "@type": "ImageObject",
              "url": {{ site.image | absolute_url | jsonify }}
            }
          },
          "image": {{ image_url | jsonify }},
          "url": {{ canonical_url | jsonify }},
          "inLanguage": {{ site.lang | default: "en" | jsonify }}{% if keywords != empty %},
          "keywords": {{ keywords | jsonify }}{% endif %}{% if page.categories and page.categories != empty %},
          "articleSection": {{ page.categories | first | jsonify }}{% endif %}
        }
        </script>

        <header class="header">
          {% if page.tags and page.tags != empty %}
          <div class="tags">
            {% for tag in page.tags %}
              <a class="tag"
                href="/tags/#{{tag | downcase | slugify}}">{{tag | upcase }}</a>{% unless forloop.last %},{% endunless %}
            {% endfor %}
          </div>
          {% endif %}
          <h1 class="header-title" itemprop="headline">{{ page.title | escape }}</h1>
          {% if page.date %}
          <div class="post-meta">
            <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
              {{ page.date | date: "%b %d, %Y" }}
            </time>
            <span itemprop="author" itemscope itemtype="https://schema.org/Person">
              <span itemprop="name">{{ site.author.name }}</span>
            </span>
            {% include reading_time.html content=content class="reading-time" %}
            <time hidden datetime="{{ modified_at }}" itemprop="dateModified">
              {{ page.date | date: "%b %d, %Y" }}
            </time>
          </div>
          {% endif %}
          <div class="post-tools">
            <div class="toc" data-toc>
              <button
                type="button"
                class="toc-button"
                aria-expanded="false"
                aria-haspopup="true"
                aria-controls="toc-panel"
              >
                <i class="bi bi-list" aria-hidden="true"></i>
                <span>Contents</span>
              </button>
              <div class="toc-panel" id="toc-panel" hidden>
                <div class="toc-panel-header">
                  <span class="toc-panel-title">Contents</span>
                  <button type="button" class="toc-close" aria-label="Close contents">
                    <i class="bi bi-x-lg" aria-hidden="true"></i>
                  </button>
                </div>
                <nav class="toc-list" aria-label="Table of contents"></nav>
              </div>
            </div>
          </div>
        </header>

        <div class="page-content" itemprop="articleBody">
          {% assign post_content = content | replace: '<img ', '<img loading="lazy" decoding="async" ' %}
          {% include anchor_headings.html html=post_content anchorClass="anchor-head" beforeHeading=true h_min=1 h_max=4 %}
          {% if page.tweet %}
          <p>Comments this article on
            <a href="https://twitter.com/{{site.twitter}}/status/{{page.tweet}}">Twitter</a>.
          </p>
          {% endif %}
        </div>
      </article>
      {% include post_discovery.html %}

      {% if page.comments != false %}
        {% include comments.html %}
      {% endif %}

    </main>

    {% if page.modified %}
      <small class="post-updated-at">updated_at {{page.modified | date: "%d-%m-%Y"}}</small>
    {% endif %}
    {% if page.next or page.previous %}
      {% include navigation.html %}
    {% endif %}

    {% include footer.html %}
  </div>
</body>

</html>