Update config

.github/dependabot.yml

@@ -0,0 +1,21 @@
+version: 2
+updates:
+  - package-ecosystem: bundler
+    directory: /
+    schedule:
+      interval: monthly
+    open-pull-requests-limit: 1
+    groups:
+      ruby-dependencies:
+        patterns:
+          - "*"
+
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: monthly
+    open-pull-requests-limit: 1
+    groups:
+      github-actions:
+        patterns:
+          - "*"

.gitignore

@@ -1 +1,2 @@
 _site/
+.sass-cache/

404.html

@@ -1,5 +1,9 @@
 ---
 layout: base
+title: Unfortunately, 404
+permalink: /404.html
+noindex: true
+sitemap: false
 ---
 
 <header class="post-header">

_config.yml

@@ -4,7 +4,7 @@ lang: en
 author:
   name: Daria Lutchenko
 description: >
-  A blog about technical writing.
+  A blog on technical writing and product management.
 url: "https://techdaria.com"
 baseurl: ""
 logo: /assets/images/social-preview.png
@@ -16,10 +16,17 @@ plugins:
   - jekyll-seo-tag
   - jekyll-remote-theme
   - jekyll-paginate
+  - jekyll-sitemap
 
 paginate: 5
 paginate_path: "/page:num/"
 
+defaults:
+  - scope:
+      path: ""
+    values:
+      image: /assets/images/social-preview.png
+
 sass:
   quiet_deps: true
   silence_deprecations: [import]

_includes/custom-head.html

@@ -1,22 +1,12 @@
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content="website">
-<meta property="og:url" content="{{ site.url }}{{ page.url | replace:'index.html','' }}">
-<meta property="og:title" content="{% if page.title %}{{ page.title | escape }} | {{ site.title | escape }}{% else %}{{ site.title | escape }}{% endif %}">
-<meta property="og:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 155 | escape }}">
-<meta property="og:image" content="{{ site.url }}{{ site.logo | default: '/assets/images/social-preview.png' }}">
-
-<!-- Twitter -->
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="{% if page.title %}{{ page.title | escape }} | {{ site.title | escape }}{% else %}{{ site.title | escape }}{% endif %}">
-<meta name="twitter:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 155 | escape }}">
-<meta name="twitter:image" content="{{ site.url }}{{ site.logo | default: '/assets/images/social-preview.png' }}">
-
 <!-- Favicons -->
 <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/images/apple-touch-icon.png' | relative_url }}">
 <link rel="icon" type="image/png" sizes="96x96" href="{{ '/assets/images/favicon-96x96.png' | relative_url }}">
 <link rel="icon" type="image/svg+xml" href="{{ '/assets/images/favicon.svg' | relative_url }}">
 <link rel="shortcut icon" href="{{ '/assets/images/favicon.ico' | relative_url }}">
-<meta name="apple-mobile-web-app-title" content="TechDaria">
+<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
 <link rel="manifest" href="{{ '/assets/images/site.webmanifest' | relative_url }}">
-<meta name="msapplication-TileColor" content="#da532c">
-<meta name="theme-color" content="#ffffff">
+<meta name="msapplication-TileColor" content="#f5f3f0">
+<meta name="theme-color" content="#f5f3f0">
+{% if page.noindex %}
+<meta name="robots" content="noindex, follow">
+{% endif %}

_includes/footer.html

@@ -1,5 +1,3 @@
-<link id="fa-stylesheet" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.0.0/css/all.min.css">
-
 <footer class="site-footer">
   <div class="wrapper">
 
@@ -8,8 +6,11 @@
     </div>
 
     <div class="footer-text">
-      <p/>
-      <p>&copy; {{ site.time | date: "%Y" }} {{ site.author.name }}. <i>All views shared on this blog are my personal opinions.</i></p>
+      <p>
+        <br/>
+        &copy; {{ site.time | date: "%Y" }} {{ site.author.name }}. Part of the <a href="https://caseyrfsmith.github.io/webring/">Tech Writing Webring</a>.
+        <br/><i>All views shared on this blog are my personal opinions.</i>
+      </p>
     </div>
 
   </div>

_includes/header.html

@@ -7,14 +7,28 @@
     <a class="site-title" rel="author" href="{{ '/' | relative_url }}">{{ site.title | escape }}</a>
 
     {%- unless page_titles == empty %}
-      <nav class="site-nav">
-        <input type="checkbox" id="nav-trigger" />
-        <label for="nav-trigger">
-          <span class="menu-icon"></span>
-        </label>
-
-        {% include nav-items.html paths = page_paths %}
-      </nav>
+      <details class="site-nav" open>
+        <summary class="nav-trigger">
+          <span class="visually-hidden">Main navigation</span>
+          <svg class="menu-icon" aria-hidden="true" viewBox="0 0 24 24">
+            <path d="M4 7h16M4 12h16M4 17h16"/>
+          </svg>
+        </summary>
+        <nav aria-label="Main navigation">
+          {% include nav-items.html paths = page_paths %}
+        </nav>
+      </details>
+      <script>
+        (function () {
+          const navigation = document.querySelector('.site-nav');
+          const mobileQuery = window.matchMedia('(max-width: 600px)');
+          const syncNavigation = (event) => {
+            navigation.open = !event.matches;
+          };
+          syncNavigation(mobileQuery);
+          mobileQuery.addEventListener('change', syncNavigation);
+        }());
+      </script>
     {%- endunless %}
   </div>
 </header>

_includes/linkedin-button.html

@@ -1,47 +1,11 @@
 {% if include.url %}
-<!-- Load Font Awesome CSS -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
-<style>
-.linkedin-button {
-  background-color: #0077B5;
-  color: white !important;
-  padding: 8px 15px 8px 15px;
-  text-decoration: none;
-  border-radius: 4px;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid #0077B5;
-  font-size: 14px;
-  margin: 2rem 0;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-  line-height: 1.5;
-  gap: 8px;
-}
-
-.linkedin-button:hover {
-  background-color: #006097;
-  border-color: #006097;
-  text-decoration: none;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.linkedin-button i {
-  font-size: 16px;
-  width: 16px;
-  text-align: center;
-}
-
-.linkedin-button-container {
-  width: 100%;
-}
-</style>
-
 <div class="linkedin-button-container">
-  <a href="{{ include.url }}" class="linkedin-button" target="_blank">
-    <i class="fab fa-linkedin-in"></i> Comment
+  <a href="{{ include.url }}" class="linkedin-button" target="_blank" rel="noopener noreferrer" aria-label="Comment on LinkedIn (opens in a new tab)">
+    <svg class="svg-icon" aria-hidden="true" viewBox="0 0 16 16">
+      <path d="M0 1.15C0 .52.52 0 1.15 0h13.7C15.48 0 16 .52 16 1.15v13.7c0 .63-.52 1.15-1.15 1.15H1.15C.52 16 0 15.48 0 14.85V1.15zm4.94 12.25V6.17H2.53v7.23h2.41zM3.73 5.18c.84 0 1.36-.56 1.36-1.25-.02-.71-.52-1.25-1.34-1.25-.82 0-1.36.54-1.36 1.25 0 .69.52 1.25 1.32 1.25h.02zm2.54 8.22h2.41V9.36c0-.22.02-.43.08-.59.17-.43.56-.88 1.22-.88.86 0 1.2.65 1.2 1.61v3.9h2.41V9.22c0-2.24-1.2-3.28-2.8-3.28-1.29 0-1.87.71-2.19 1.21h.02v-.98H6.27c.03.65 0 7.23 0 7.23z"/>
+    </svg>
+    Comment
+    <span class="visually-hidden">(opens in a new tab)</span>
   </a>
 </div>
 {% endif %}

_includes/nav-items.html

@@ -2,7 +2,7 @@
   {%- for path in include.paths -%}
   {%- assign hyperpage = site.pages | where: "path", path | first -%}
   {%- if hyperpage.title %}
-  <a class="nav-item" href="{{ hyperpage.url | relative_url }}">{{ hyperpage.title | escape }}</a>
+  <a class="nav-item{% if page.url == hyperpage.url %} is-active{% endif %}" href="{{ hyperpage.url | relative_url }}"{% if page.url == hyperpage.url %} aria-current="page"{% endif %}>{{ hyperpage.title | escape }}</a>
   {%- endif -%}
   {%- endfor %}
 </div>

_includes/post-links.html

@@ -3,9 +3,15 @@
   const postContent = document.querySelector('.post-content');
   if (postContent) {
     const links = postContent.getElementsByTagName('a');
-    for (let link of links) {
-      if (!link.target) {
-        link.target = '_blank';
+    for (const link of links) {
+      link.target = '_blank';
+      link.relList.add('noopener', 'noreferrer');
+      if (!link.getAttribute('aria-label')?.includes('opens in a new tab')) {
+        const describedBy = link.getAttribute('aria-describedby');
+        link.setAttribute(
+          'aria-describedby',
+          [describedBy, 'new-tab-description'].filter(Boolean).join(' ')
+        );
       }
     }
   }

_includes/social.html

@@ -1,20 +1,27 @@
 <ul class="social-media-list">
 {%- for entry in site.minima.social_links -%}
   <li>
-    <a rel="me" href="{{ entry.url }}" target="_blank" title="{{ entry.title }}">
-      <span class="grey fa-brands fa-{{ entry.icon }} fa-lg"></span>
+    <a rel="me noopener noreferrer" href="{{ entry.url }}" target="_blank" aria-label="{{ entry.title }} (opens in a new tab)">
+      {% if entry.icon == "linkedin" %}
+      <svg class="svg-icon grey" aria-hidden="true" viewBox="0 0 16 16">
+        <path d="M0 1.15C0 .52.52 0 1.15 0h13.7C15.48 0 16 .52 16 1.15v13.7c0 .63-.52 1.15-1.15 1.15H1.15C.52 16 0 15.48 0 14.85V1.15zm4.94 12.25V6.17H2.53v7.23h2.41zM3.73 5.18c.84 0 1.36-.56 1.36-1.25-.02-.71-.52-1.25-1.34-1.25-.82 0-1.36.54-1.36 1.25 0 .69.52 1.25 1.32 1.25h.02zm2.54 8.22h2.41V9.36c0-.22.02-.43.08-.59.17-.43.56-.88 1.22-.88.86 0 1.2.65 1.2 1.61v3.9h2.41V9.22c0-2.24-1.2-3.28-2.8-3.28-1.29 0-1.87.71-2.19 1.21h.02v-.98H6.27c.03.65 0 7.23 0 7.23z"/>
+      </svg>
+      {% elsif entry.icon == "github" %}
+      <svg class="svg-icon grey" aria-hidden="true" viewBox="0 0 16 16">
+        <path d="M8 0a8 8 0 0 0-2.53 15.59c.4.07.55-.17.55-.38l-.01-1.49c-2.23.49-2.7-1.08-2.7-1.08-.37-.93-.9-1.18-.9-1.18-.73-.5.06-.49.06-.49.81.06 1.24.83 1.24.83.72 1.23 1.89.88 2.35.67.07-.52.28-.88.51-1.08-1.78-.2-3.65-.89-3.65-3.96 0-.88.31-1.59.83-2.15-.08-.2-.36-1.02.08-2.12 0 0 .68-.22 2.2.82A7.7 7.7 0 0 1 8 3.73a7.7 7.7 0 0 1 2.01.27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.52.56.83 1.27.83 2.15 0 3.08-1.87 3.75-3.66 3.95.29.25.54.74.54 1.5l-.01 2.22c0 .21.14.46.55.38A8 8 0 0 0 8 0z"/>
+      </svg>
+      {% else %}
+      <span aria-hidden="true">{{ entry.title }}</span>
+      {% endif %}
+      <span class="visually-hidden">(opens in a new tab)</span>
     </a>
   </li>
 {%- endfor -%}
 {% unless site.minima.hide_site_feed_link %}
   <li>
-    <a href="{{ site.feed.path | default: 'feed.xml' | absolute_url }}" target="_blank" title="RSS">
-      <svg class="svg-icon grey" viewbox="0 0 16 16">
-        <path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194
-          11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0
-          13.806c0-1.21.983-2.195 2.194-2.195zM10.606
-          16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"
-        />
+    <a href="{{ site.feed.path | default: 'feed.xml' | absolute_url }}" aria-label="RSS feed">
+      <svg class="svg-icon grey" aria-hidden="true" viewBox="0 0 16 16">
+        <path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"/>
       </svg>
     </a>
   </li>

_layouts/base.html

@@ -5,9 +5,11 @@
 
   <body>
 
+    <a class="skip-link" href="#main-content">Skip to main content</a>
+
     {%- include header.html -%}
 
-    <main class="page-content" aria-label="Content">
+    <main id="main-content" class="page-content">
       <div class="wrapper">
         {{ content }}
       </div>

_layouts/home.html

@@ -23,10 +23,10 @@ <h1 class="post-title">{{ page.title | escape }}</h1>
       {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
       {%- for post in posts -%}
         <li class="post-item">
-          <span class="post-meta">{{ post.date | date: date_format }}</span>
-          <h3 class="post-title">
+          <time class="post-meta" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: date_format }}</time>
+          <h2 class="post-title">
             <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
-          </h3>
+          </h2>
 
           {%- if site.minima.show_excerpts -%}
             <div class="post-excerpt">
@@ -38,7 +38,7 @@ <h3 class="post-title">
     </ul>
 
     {% if paginator.total_pages > 1 %}
-      <div class="pager">
+      <nav class="pager" aria-label="Pagination">
         <ul class="pagination">
           {% if paginator.previous_page %}
             <li>
@@ -48,7 +48,7 @@ <h3 class="post-title">
             <li><div class="pager-edge">•</div></li>
           {% endif %}
 
-          <li><div class="current-page">Page {{ paginator.page }} of {{ paginator.total_pages }}</div></li>
+          <li><div class="current-page" aria-current="page">Page {{ paginator.page }} of {{ paginator.total_pages }}</div></li>
 
           {% if paginator.next_page %}
             <li>
@@ -58,7 +58,7 @@ <h3 class="post-title">
             <li><div class="pager-edge">•</div></li>
           {% endif %}
         </ul>
-      </div>
+      </nav>
     {% endif %}
   {%- endif -%}
 

_layouts/post.html

@@ -1,39 +1,39 @@
 ---
 layout: base
 ---
-<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+<article class="post h-entry">
+  <span id="new-tab-description" class="visually-hidden">Opens in a new tab</span>
 
   <header class="post-header">
     <div class="post-header-top">
       <a href="{{ '/' | relative_url }}" class="back-to-posts">Back to Posts</a>
     </div>
-    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+    <h1 class="post-title p-name">{{ page.title | escape }}</h1>
     <div class="post-meta">
       {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
       {%- if page.modified_date %}<span class="meta-label">Published:</span>{% endif %}
-      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">
         {{ page.date | date: date_format }}
       </time>
       {%- if page.modified_date -%}
-        <span class="bullet-divider">•</span>
+        <span class="bullet-divider" aria-hidden="true">•</span>
         <span class="meta-label">Updated:</span>
-        <time class="dt-modified" datetime="{{ page.modified_date | date_to_xmlschema }}" itemprop="dateModified">
+        <time class="dt-modified" datetime="{{ page.modified_date | date_to_xmlschema }}">
           {{ page.modified_date | date: date_format }}
         </time>
       {%- endif -%}
       {%- if page.author %}
       <div class="{% unless page.modified_date %}force-inline {% endunless %}post-authors">
         {%- for author in page.author %}
-          <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-            <span class="p-author h-card" itemprop="name">{{ author }}</span></span>
+          <span class="p-author h-card">{{ author }}</span>
           {%- if forloop.last == false %}, {% endif -%}
         {% endfor %}
       </div>
       {%- endif %}
     </div>
   </header>
 
-  <div class="post-content e-content" itemprop="articleBody">
+  <div class="post-content e-content">
     {{ content }}
 
     {% if page.linkedin %}