lit.dev/packages/lit-dev-content/site/_includes/blog-post.html at 87b6be76f6a5317dcd4d04235db94d46fa42dd4a · timker/lit.dev · 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
---
defaultAuthor:
  - lit-team
splash: lit-shapes.svg
social:
  image:
    url: logo-whitebg-padded-1600x800.png
    alt: Lit Logo
---

{% if not author %}
  {% set author = defaultAuthor %}
{% endif %}

{% extends 'default.html' %}

{% block head %}
  {% inlinecss "blog-post.css" %}
  <script type="module" src="{{ site.baseurl }}/js/components/litdev-switchable-sample.js"></script>

  <!--
    References:
      https://ogp.me/
      https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards

    Validators:
      https://cards-dev.twitter.com/validator
      https://developers.facebook.com/tools/debug/
      https://www.linkedin.com/post-inspector
  -->
  <meta property="og:url" content="{{ env.MAIN_URL }}{{ page.url }}">
  <meta property="og:title" content="{{ title }}">
  <meta property="og:description" content="{{ summary }}">
  <meta property="og:site_name" content="lit.dev">
  <meta property="og:image" content="{{ env.MAIN_URL }}/images/{{ social.image.url }}">
  <meta property="og:image:alt" content="{{ social.image.alt }}">

  <meta property="og:type" content="article">
  <meta property="article:published_time" content="{{ date | yyyymmdd }}">
  {% for authorId in author %}
    {% set authorData = authors[authorId] %}
    <meta property="article:author" content="{{ authorData.name }}">
  {% endfor %}

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@buildWithLit">
{% endblock %}

{% block content %}
  <div id="splash">
    <div class="bg bg1"></div>
    <div class="bg bg2"></div>
    <div class="bg bg3"></div>
    <div class="bg bg4"></div>
  </div>

  <article>
    <h1>{{ title }}</h1>
    <p id="summary">{{ summary }}</p>

    <time id="date" datetime="{{ date | yyyymmdd }}">
      {{ date | readableDate }}
    </time>

    <div id="authors">
      {% for authorId in author %}
        {% set authorData = authors[authorId] %}
        <div class="author">
          <img src="{{ site.baseurl }}/images/{{ authorData.image.url }}"
              width="80" height="80"
              {% if authorData.image.class %}class="{{ authorData.image.class }}"{% endif %}
              alt="{% if authorData.imageAlt !== undefined %}{{ authorData.image.alt }}{% else %}Photo of {{ authorData.name }}{% endif %}">

          <div class="authorRhs">
            <cite class="authorName">{{ authorData.name }}</cite>

            {% if authorData.links %}
              <ul class="authorLinks">
                {% if authorData.links.twitter %}
                  <li><a href="https://twitter.com/{{ authorData.links.twitter }}"
                        target="_blank" rel="noopener">Twitter</a></li>
                {% endif %}
                {% if authorData.links.bluesky %}
                  <li><a href="https://bsky.app/profile/{{ authorData.links.bluesky }}" target="_blank" rel="noopener">Bluesky</a></li>
                {% endif %}
                {% if authorData.links.github %}
                  <li><a href="https://github.com/{{ authorData.links.github }}"
                        target="_blank" rel="noopener">GitHub</a></li>
                {% endif %}
              </ul>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>

    <div id="blogContent">
      {{ content | removeHeadingAnchors | safe }}
    </div>

    <a id="blogIndexLink" href="{{ site.baseurl }}/blog/">Read more posts</a>
  </article>
{% endblock %}