Merge branch 'main' into positioning-update

* main: (73 commits) Automated webmentions update Automated dependency upgrades upgrade deps fix broken link remove details, update post date, update alt Automated webmentions update Automated dependency upgrades Fix toc punctuation Update toc Address Stacy review Date and hero image Address review comments Apply suggestions from code review Automated webmentions update Automated dependency upgrades An article about containment on root Bring back the form honeypot update dates and remove unpublished posts put text alternative into details/summary remove webmention ...
oddbird · Jul 17, 2023 · f4ce88b · f4ce88b
2 parents 61feef7 + 9cf42bf
commit f4ce88b
Show file tree

Hide file tree

Showing 68 changed files with 4,049 additions and 1,983 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,91 @@
+{
+  "name": "Oddleventy",
+  "image": "node:16",
+  "containerEnv": {
+    "SHELL": "/bin/bash"
+  },
+  "forwardPorts": [8080],
+
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "csstools.postcss",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "formulahendry.auto-rename-tag",
+        "naumovs.color-highlight",
+        "stkb.rewrap",
+        "stylelint.vscode-stylelint",
+        "syler.sass-indented",
+        "tyriar.sort-lines",
+        "xabikos.javascriptsnippets"
+      ],
+      "settings": {
+        "terminal.integrated.profiles.linux": {
+          "bash": {
+            "path": "/bin/bash"
+          }
+        },
+        "terminal.integrated.defaultProfile.linux": "bash",
+        "editor.bracketPairColorization.enabled": true,
+        "editor.codeActionsOnSave": {
+          "source.fixAll.eslint": true
+        },
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true,
+        "editor.tabSize": 2,
+        "eslint.validate": ["javascript", "typescript"],
+        "files.insertFinalNewline": true,
+        "files.trimFinalNewlines": true,
+        "files.trimTrailingWhitespace": true,
+        "javascript.suggestionActions.enabled": false,
+        "remote.extensionKind": {
+          "ms-azuretools.vscode-docker": "workspace"
+        },
+        "typescript.preferences.quoteStyle": "single",
+        "typescript.tsdk": "node_modules/typescript/lib",
+        "[javascript]": {
+          "editor.rulers": [80]
+        },
+        "[markdown]": {
+          "editor.rulers": [80]
+        },
+        "[typescript]": {
+          "editor.rulers": [80]
+        },
+        "[html]": {
+          "editor.formatOnSave": false
+        },
+        "[scss]": {
+          "editor.rulers": [80],
+          "editor.codeActionsOnSave": {
+            "source.fixAll.stylelint": true
+          }
+        },
+        "files.exclude": {
+          "**/.git": true,
+          "**/.DS_Store": true,
+          ".coverage": true,
+          "coverage": true,
+          "htmlcov": true,
+          ".tags": true,
+          ".cache": true,
+          "collected-assets": true,
+          "staticfiles": true,
+          "**/*.egg-info": true
+        },
+        "search.exclude": {
+          "**/node_modules": true,
+          "**/*.css.map": true,
+          "**/*.js.map": true,
+          "yarn.lock": true,
+          "yarn-debug.log": true,
+          "yarn-error.log": true,
+          "static/built": true,
+          "static/docs": true,
+          ".yarn": true
+        }
+      }
+    }
+  }
+}
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -22,7 +22,6 @@ env:
   es6: true
   node: true
 plugins:
-  - prettier
   - import
 settings:
   import/internal-regex: ^#/
@@ -39,14 +38,8 @@ settings:
 extends:
   - eslint:recommended
   - plugin:import/recommended
-  - plugin:prettier/recommended
+  - prettier
 rules:
-  # Prettier
-  prettier/prettier:
-    - 2
-    - singleQuote: true
-      trailingComma: all
-
   # Import
   import/order:
     - 1

diff --git a/.prettierrc b/.prettierrc
@@ -1,2 +1 @@
 singleQuote: true
-trailingComma: all
diff --git a/content/_data/webmentions.json b/content/_data/webmentions.json
@@ -1,5 +1,5 @@
 {
-  "lastFetched": "2023-05-08T08:05:15.940Z",
+  "lastFetched": "2023-07-17T08:06:01.078Z",
   "children": [
     {
       "type": "entry",

diff --git a/content/_includes/contact.macros.njk b/content/_includes/contact.macros.njk
@@ -38,6 +38,7 @@ params:
   data-form="{{ name or 'contact' }}"
   method="POST"
   action="{{ next }}"
+  netlify-honeypot="subject"
   data-netlify="true"
   {{ utility.show_attrs(attrs) }}>
   <div data-fieldgroup="contact-info">
@@ -61,6 +62,11 @@ params:
     required=true
   ) }}
 
+  <label data-honey aria-hidden="true">
+    <span>Don't fill out this field:</span>
+    <input name="subject" tabindex="-1" />
+  </label>
+
   <div class="form-actions">
     <button
       data-btn="submit"

diff --git a/content/_includes/faces/oddbird.svg b/content/_includes/faces/oddbird.svg
diff --git a/content/_includes/oddnews.macros.njk b/content/_includes/oddnews.macros.njk
@@ -0,0 +1,62 @@
+{# @docs
+label: OddNews Macros
+category: File
+note: Macros related to OddNews newsletter.
+#}
+
+{# @docs
+label: oddnews_signup
+note: Generate an OddNews signup form
+params:
+  heading:
+    type: boolean
+    default: true
+    note: Whether to include the "OddNews Sign Up" heading
+  tag:
+    type: string
+    default: 'footer'
+    note: |
+      tag for page where signup form is located:
+      'footer' or 'oddblog' or 'oddnews'
+  class:
+    type: string
+    default: none
+    note: optional class to add to wrapping `<div>`
+#}
+{% macro oddnews_signup(
+  heading=true,
+  tag='footer',
+  class=none
+) %}
+  <div class="oddnews-signup{% if class %} {{ class }}{% endif %}">
+    {% if heading %}
+      <h3>OddNews Sign Up</h3>
+      <p>Get the latest news in your field — UX, CSS, JavaScript, and Python. <a href="/oddnews">See Archive</a></p>
+    {% endif %}
+
+    <form action="https://oddbird.us19.list-manage.com/subscribe/post?u=80219aa68d7bad77b9fd2eb93&amp;id=7c27f7fb9a&amp;f_id=000a9de4f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
+      <div id="mc_embed_signup_scroll">
+        <div class="mc-field-group">
+          <label for="mce-EMAIL">Email
+            <span aria-hidden="true">*</span>
+            <span class="sr-only">required</span>
+          </label>
+          <input data-input="text email" type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required >
+          <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
+        </div>
+        <div hidden="true"><input type="hidden" name="tags" value={{ tag | oddNewsTags }}></div>
+        <div id="mce-responses" class="clear foot">
+          <div class="response" id="mce-error-response" style="display:none"></div>
+          <div class="response" id="mce-success-response" style="display:none"></div>
+        </div>
+        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups -->
+        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_80219aa68d7bad77b9fd2eb93_7c27f7fb9a" tabindex="-1" value=""></div>
+        <div class="optionalParent">
+          <div class="clear foot form-actions">
+            <button data-btn="submit" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">Subscribe</button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+{% endmacro %}
diff --git a/content/_includes/site/footer.njk b/content/_includes/site/footer.njk
@@ -1,5 +1,6 @@
 {% import 'contact.macros.njk' as contact %}
 {% import 'utility.macros.njk' as utility %}
+{% import 'oddnews.macros.njk' as oddnews %}
 
 {%- set add_cta = page.url | addCallToAction -%}
 {%- set footer_title = "Let's chat about your web project" -%}
@@ -14,7 +15,7 @@
   {% include 'site/cta.njk' %}
 {% endif -%}
 
-<div data-layout="footer">
+<div data-layout="footer" data-footer="{{ 'contact' if (page.url == '/contact/') }}">
   {% if page.url != '/contact/' %}
     <aside aria-label="contact">
       {%- if not add_cta %}
@@ -27,6 +28,12 @@
     </aside>
   {% endif %}
 
+  {% if page.url != '/oddnews/' %}
+    {{ oddnews.oddnews_signup(
+      class='oddnews-form-footer'
+    ) }}
+  {% endif %}
+
   <footer role="contentinfo">
     <div class="colophon">
       {% set colophon = collections.all | findPage('data.info_slug', 'colophon') %}

diff --git a/content/birds/index.njk b/content/birds/index.njk
@@ -70,7 +70,7 @@ and proud of the careers they've built since.
   {% set name = birds.author(
     name=bird.data.bird,
     page=bird,
-    link=is_author
+    link=is_author or bird.data.show_detail
   ) %}
   <li>{{ name | safe }}, {{ utility.datetime(bird.date, bird.data.end) }}</li>
 {% endfor %}

diff --git a/content/birds/miriam.md b/content/birds/miriam.md
@@ -17,17 +17,6 @@ social:
     server: front-end.social
   github: MiriSuzanne
   codepen: MiriamSuzanne
-events:
-  - venue: Front Conference
-    date: 2023-08-31
-    end: 2023-09-01
-    adr: Zurich, Switzerland
-    url: https://frontconference.com/
-  - venue: Smashing Conf
-    date: 2023-09-04
-    end: 2023-09-06
-    adr: Freiburg, Germany
-    url: https://smashingconf.com/freiburg-2023
 summary: |
   Miriam is a co-founder and front-end architect --
   overseeing the user-experience

diff --git a/content/birds/patricia.md b/content/birds/patricia.md
@@ -3,6 +3,8 @@ title: Patricia Realini
 sub: Technical project manager
 bird: patricia
 date: 2020-11-02
+end: 2023-06-09
+show_detail: true
 image:
   src: birds/patricia.jpg
   position: top
@@ -17,7 +19,8 @@ summary: |
   and artist.
 ---
 
-**Patricia navigates projects through development**, to ensure smooth sailing
+**Patricia is an OddBird Emeritus**
+who navigated projects through development, to ensure smooth sailing
 for our clients and an enchanting experience for their users. With experience in
 software engineering and a background in art & marketing, they harness their
 passions to act as a conduit for empathetic user experience, high impact

diff --git a/content/blog/2017/blocking-analytics-spam.md b/content/blog/2017/blocking-analytics-spam.md
@@ -29,7 +29,7 @@ But a number of months ago we started seeing lots of this:
 {{ embed.img(
   src='blog/2017/ga-spam/ga-spam.jpg',
   alt='Google Analytics spam',
-  attrs={'class': 'img-border'}
+  attrs={'class': 'img-shadow'}
 ) }}
 
 It's not a new problem, but it's particularly problematic for smaller
@@ -39,7 +39,7 @@ accounting for anywhere from ten to ninety (!) percent of our sessions.
 {{ embed.img(
   src='blog/2017/ga-spam/sessions.jpg',
   alt='Google Analytics total sessions and filtered (non-spam) sessions',
-  attrs={'class': 'img-border'}
+  attrs={'class': 'img-shadow'}
 ) }}
 
 

diff --git a/content/blog/2017/design-using-data.md b/content/blog/2017/design-using-data.md
@@ -43,8 +43,7 @@ use both research and experience to create the best results.
 
 [{{ embed.img(
   src='blog/2017/video-series/sarah-2.jpg',
-  alt='Watch Designing Using Data Video',
-  attrs={'class': 'align-center'}
+  alt='Watch Designing Using Data Video'
 ) }}][video]
 
 How do you use research to help you make design decisions? Let us know by

diff --git a/content/blog/2017/get-started-designing.md b/content/blog/2017/get-started-designing.md
@@ -59,7 +59,7 @@ background when I’m finished.
 {{ embed.img(
   src='blog/2017/get-started-designing/santamaria.jpg',
   alt='Website by Jason Santa Maria',
-  attrs={'class': 'img-border'}
+  attrs={'class': 'img-shadow'}
 ) }}
 
 According to typography expert [Jason Santa Maria], “If your type is

diff --git a/content/blog/2017/git-rebase.md b/content/blog/2017/git-rebase.md
@@ -161,8 +161,7 @@ Bao did and already merged into `master`? They can just rebase their
 branch on to that work:
 
 {{ embed.img(
-  src='blog/2017/git-rebase/fig_02.png',
-  attrs={'class': 'align-center extend-small'}
+  src='blog/2017/git-rebase/fig_02.png'
 ) }}
 
 On Bao's machine, this looks like:
@@ -188,8 +187,7 @@ Robin's branch as its upstream, Bao can, with fresh remote tracking info
 on their local computer, just run `git rebase` and get this:
 
 {{ embed.img(
-  src='blog/2017/git-rebase/fig_03.png',
-  attrs={'class': 'align-center extend-small'}
+  src='blog/2017/git-rebase/fig_03.png'
 ) }}
 
 Again, on Bao's machine:
@@ -213,8 +211,7 @@ that branch, this is safe), Robin can merge it in, and then the whole
 thing can be merged back into `master`:
 
 {{ embed.img(
-  src='blog/2017/git-rebase/fig_04.png',
-  attrs={'class': 'align-center extend-small'}
+  src='blog/2017/git-rebase/fig_04.png'
 ) }}
 
 Note: if anyone has merge conflicts at any point, they have to resolve

diff --git a/content/blog/2017/initial-letter.md b/content/blog/2017/initial-letter.md
@@ -47,7 +47,7 @@ letter "I" in this example:
 {{ embed.img(
   src='blog/2017/initial-letter/minions-initial-letter.jpg',
   alt='inital-letter demo',
-  attrs={'class': 'img-border align-center'}
+  attrs={'class': 'img-shadow'}
 ) }}
 
 ------
@@ -111,7 +111,7 @@ enhancement:
 {{ embed.img(
   src='blog/2017/initial-letter/fallback-enhancement.jpg',
   alt='Fallback and enhancement in Chrome and Safari',
-  attrs={'class': 'img-border align-center'}
+  attrs={'class': 'img-shadow'}
 ) }}
 
 Here is the CodePen demo:
@@ -143,7 +143,7 @@ to drop. A value equal to the initial height value is the default.
 {{ embed.img(
   src='blog/2017/initial-letter/sunken-raised-drop-caps.jpg',
   alt='Screenshot of raised, sunken, and drop cap demo',
-  attrs={'class': 'img-border align-center'}
+  attrs={'class': 'img-shadow'}
 ) }}
 
 The following CodePen demo is available in Safari only: