Write an article on Reactive Controllers and Redux

packages/lit-dev-content/site/_data/authors.json

@@ -59,5 +59,15 @@
     "image": {
       "url": "authors/elliott-marquez.webp"
     }
+  },
+  "brian-vann": {
+    "name": "Brian Taylor Vann",
+    "links": {
+      "github": "taylor-vann",
+      "linkedin": "brian-vann"
+    },
+    "image": {
+      "url": "authors/brian-vann.webp"
+    }
   }
 }

packages/lit-dev-content/site/_includes/article.html

@@ -42,6 +42,13 @@
                     </svg>
                   </a>
                 {% endif %}
+                {% if authorData.links.linkedin %}
+                  <a href="https://www.linkedin.com/in/{{ authorData.links.linkedin }}/" target="_blank">
+                    <svg aria-label="{{ authorData.name}}'s LinkedIn Account">
+                      <use href="{{ site.baseurl }}/images/social/linkedin.svg#linkedin"></use>
+                    </svg>
+                  </a>
+                {% endif %}
               </div>
             {% endif %}
           </div>

packages/lit-dev-content/site/_includes/articles.html

@@ -15,7 +15,8 @@
   <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>
-{% endblock %}
+  <script type="module" src="{{ site.baseurl }}/js/components/ts-js.js"></script>
+  {% endblock %}
 
 {% block content %}
   {% set toc = content | toc %}

packages/lit-dev-content/site/articles/article/article.11tydata.js

@@ -4,4 +4,5 @@ module.exports = {
     permalink: (data) => `/articles/${data.page.fileSlug}/`,
   },
   tags: ['articles'],
+  thumbnailExtension: 'jpg',
 };

packages/lit-dev-content/site/css/articles.css

@@ -7,6 +7,16 @@ main {
   padding-block-start: 0;
 }
 
+article img {
+  max-width: 100%;
+  display: block;
+  margin-inline: auto;
+}
+
+article img:not([width]) {
+  width: 100%;
+}
+
 /* ------------------------------------
  * Header Section
  * ------------------------------------ */
@@ -74,7 +84,6 @@ main {
  * ------------------------------------ */
 article {
   font-size: 1rem;
-  font-family: 'Manrope', sans-serif;
 }
 
 .articleFeedList {

packages/lit-dev-content/site/learn/index.html

@@ -38,10 +38,10 @@ <h1>Learn</h1>
           />
           {% elif content.kind == "article" and content.thumbnail %}
           <img
-            srcset="{{ content.thumbnail }}.jpg, {{ content.thumbnail }}_2x.jpg 2x"
+            srcset="{{ content.thumbnail }}.{{content.thumbnailExtension}}, {{ content.thumbnail }}_2x.{{content.thumbnailExtension}} 2x"
             width="1280"
             height="720"
-            src="{{ content.thumbnail }}.jpg"
+            src="{{ content.thumbnail }}.{{content.thumbnailExtension}}"
             alt="Article thumbnail for '{{ content.title }}'"
             title="{{ content.title }}"
             loading="lazy"

packages/lit-dev-content/site/learn/learn.11tydata.js

@@ -77,13 +77,13 @@ module.exports = {eleventyComputed: {learn: async (data) => {
       }
     }
     if (kind === "article" || kind === "tutorial") {
-      const { thumbnail } = content;
+      const { thumbnail, thumbnailExtension } = content;
       if (thumbnail) {
         // An article or tutorial can optionally provide an image thumbnail
         // (without a suffix).
         const expectedImages = [
-          `${thumbnail}_2x.jpg`,
-          `${thumbnail}.jpg`
+          `${thumbnail}_2x.${thumbnailExtension || 'jpg'}`,
+          `${thumbnail}.${thumbnailExtension || 'jpg'}`
         ];
         expectedImages.forEach(validateImageExists);
       }

packages/lit-dev-tests/known-good-urls.txt

@@ -1,5 +1,5 @@
 # External URLS that are known to be 200s, so that we don't need to hit them
-# every time we run on CI, so that it's way les flaky.
+# every time we run on CI, so that it's way less flaky.
 http://localhost:8000/dev/
 https://twitter.com/buildWithLit
 https://shoelace.style/#:~:text=LitElement
@@ -516,3 +516,4 @@ https://www.youtube.com/watch?v=l6Gn5uV83sw
 https://github.com/e111077
 https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js
 https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js
+https://www.linkedin.com/in/brian-vann/