add header image and merge conflicts

content/_data/env.js

@@ -2,4 +2,5 @@
 
 export default {
   CONTEXT: process.env.CONTEXT,
+  GITHUB_KEY: process.env.GITHUB_KEY,
 };

content/_data/sponsorData.js

@@ -0,0 +1,133 @@
+import eleventyFetch from '@11ty/eleventy-fetch';
+import { config } from 'dotenv';
+import { groupBy } from 'lodash-es';
+
+// eslint-disable-next-line no-process-env
+if (!process.env.GITHUB_KEY) {
+  // Load .env variables with dotenv
+  config();
+}
+
+// eslint-disable-next-line no-process-env
+const GITHUB_KEY = process.env.GITHUB_KEY;
+
+const FilteredProfiles = [
+  // if there are backers we need to exclude…
+];
+
+const TIERS = ['Great Horned Owl', 'Blue-Footed Booby', 'Common Loon'];
+
+// https://docs.github.com/en/graphql/reference/objects#sponsorshipconnection
+const loadGithubSponsors = async () => {
+  if (!GITHUB_KEY) {
+    // eslint-disable-next-line no-console
+    console.error('Github sponsors not loaded; set `GITHUB_KEY` in `.env`.');
+    return new Promise((resolve) => resolve([]));
+  }
+  const url = 'https://api.github.com/graphql?';
+  const { data } = await eleventyFetch(url, {
+    type: 'json',
+    duration: '0s',
+    directory: '.cache/eleventy-fetch/',
+    dryRun: false,
+    fetchOptions: {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${GITHUB_KEY}`,
+      },
+      body: JSON.stringify({
+        query: `{
+  organization(login: "oddbird") {
+    name
+    sponsorshipsAsMaintainer(first: 100, activeOnly: false) {
+      totalCount pageInfo { hasNextPage }
+      nodes {
+        sponsorEntity{
+          ... on User { name avatarUrl websiteUrl url }
+          ... on Organization { name avatarUrl websiteUrl url }
+        }
+      }
+    }
+  }
+}`,
+      }),
+    },
+  });
+  if (data?.organization.sponsorshipsAsMaintainer.pageInfo.hasNextPage) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Good news! We have over 100 GitHub sponsors and need to implement pagination.',
+    );
+  }
+  return data?.organization.sponsorshipsAsMaintainer.nodes.map(
+    ({ sponsorEntity }) => ({
+      name: sponsorEntity.name,
+      tier: 'Common Loon',
+      website: sponsorEntity.websiteUrl || sponsorEntity.url,
+      image: sponsorEntity.avatarUrl,
+      total: 0,
+    }),
+  );
+};
+
+const getDefaultOpenCollectiveAvatarUrl = (url) => {
+  const slug = url.split('/').at(-1);
+  return slug ? `https://images.opencollective.com/${slug}/avatar.png` : null;
+};
+
+// https://opencollective.com/oddbird-open-source/members/all.json
+const loadOpenCollectiveSponsors = async () => {
+  const url =
+    'https://opencollective.com/oddbird-open-source/members/all.json?limit=1000';
+  const json = await eleventyFetch(url, {
+    type: 'json',
+    duration: '0s',
+    directory: '.cache/eleventy-fetch/',
+    dryRun: false,
+  });
+
+  return json
+    .filter(
+      (c) =>
+        c.role === 'BACKER' &&
+        c.totalAmountDonated &&
+        c.tier !== 'Donation' &&
+        !FilteredProfiles.includes(c.name),
+    )
+    .map((c) => ({
+      name: c.name,
+      tier: c.tier,
+      website: c.website || c.profile,
+      image: c.image || getDefaultOpenCollectiveAvatarUrl(c.profile),
+      total: c.totalAmountDonated,
+    }));
+};
+
+export default async () => {
+  try {
+    const [ocSupporters, githubSponsors] = await Promise.all([
+      loadOpenCollectiveSponsors(),
+      loadGithubSponsors(),
+    ]);
+
+    const supporters = [...githubSponsors, ...ocSupporters].sort(
+      (a, b) =>
+        // Sort by total amount donated (desc)
+        b.total - a.total,
+    );
+
+    const tiers = groupBy(supporters, ({ tier }) =>
+      TIERS.find((t) => tier.startsWith(t)),
+    );
+
+    return {
+      tiers,
+    };
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Failed fetching Open Collective and GitHub backers.', e);
+    return {
+      tiers: {},
+    };
+  }
+};

content/_data/webmentions.json

@@ -1,6 +1,29 @@
 {
-  "lastFetched": "2024-06-10T08:06:27.948Z",
+  "lastFetched": "2024-06-24T08:06:22.475Z",
   "children": [
+    {
+      "type": "entry",
+      "author": {
+        "type": "card",
+        "name": "Nelson Chu Pavlosky",
+        "photo": "https://webmention.io/avatar/cdn.masto.host/45776646d2a1df9c46739119072eb536e85dbc314de7a2e940f5a7af584e035b.jpg",
+        "url": "https://jawns.club/@skyfaller"
+      },
+      "url": "https://jawns.club/@skyfaller/112616664108172980",
+      "published": "2024-06-14T19:38:42+00:00",
+      "wm-received": "2024-06-14T20:00:29Z",
+      "wm-id": 1834564,
+      "wm-source": "https://brid.gy/comment/mastodon/@[email protected]/112614861718161804/112616664152485619",
+      "wm-target": "https://www.oddbird.net/2024/06/13/css-layout/",
+      "wm-protocol": "webmention",
+      "content": {
+        "html": "<p><span class=\"h-card\"><a href=\"https://front-end.social/@mxbck\" class=\"u-url\">@<span>mxbck</span></a></span> <span class=\"h-card\"><a href=\"https://front-end.social/@mia\" class=\"u-url\">@<span>mia</span></a></span> Got any suggestions for how best to learn CSS Grid?</p><p>This post about best practices for CSS Grid got me interested in it (I hope it's not outdated): <a href=\"https://vgpena.github.io/using-css-grid-the-right-way/\"><span>https://</span><span>vgpena.github.io/using-css-gri</span><span>d-the-right-way/</span></a></p><p>I always see this educational game mentioned, and I did find it fun, if a bit basic: <a href=\"https://cssgridgarden.com/\"><span>https://</span><span>cssgridgarden.com/</span><span></span></a></p>\n<a class=\"u-mention\" href=\"https://www.oddbird.net/2024/06/13/css-layout/\"></a>\n<a href=\"https://vgpena.github.io/using-css-grid-the-right-way/\">Using CSS Grid the right way</a>",
+        "text": "@mxbck @mia Got any suggestions for how best to learn CSS Grid?\n\nThis post about best practices for CSS Grid got me interested in it (I hope it's not outdated): https://vgpena.github.io/using-css-grid-the-right-way/\n\nI always see this educational game mentioned, and I did find it fun, if a bit basic: https://cssgridgarden.com/\n\nUsing CSS Grid the right way"
+      },
+      "in-reply-to": "https://www.oddbird.net/2024/06/13/css-layout/",
+      "wm-property": "in-reply-to",
+      "wm-private": false
+    },
     {
       "type": "entry",
       "author": {

content/_includes/page/base.njk

@@ -46,7 +46,7 @@
 
   {% if oss or sponsors %}
     <section data-list="sponsors" data-typeset>
-      {{ sponsor.block(opencollective.supporters) }}
+      {{ sponsor.block(sponsorData.tiers) }}
     </section>
   {% endif %}
 

content/_includes/page/mentions.njk

@@ -1,7 +1,7 @@
 {%- import 'utility.macros.njk' as utility -%}
 {%- import 'layout.macros.njk' as layout -%}
 
-{%- set abs_url = page.url | absoluteUrl(site.url) -%}
+{%- set abs_url = page.url | htmlBaseUrl(site.url) -%}
 {%- set mentions = webmentions | mentionsForUrl(abs_url) -%}
 
 {#

content/_includes/site/feed.njk

@@ -3,5 +3,5 @@
   rel="alternate"
   type="application/atom+xml"
   title="{{ site.title }}"
-  href="{{ site.feed | absoluteUrl(site.url) }}" />
+  href="{{ site.feed | htmlBaseUrl(site.url) }}" />
 {% endif %}

content/_includes/site/og.njk

@@ -1,5 +1,5 @@
 {% set og_image = open_graph.img if (og and og.img == 'default') else og.img or image.src or open_graph.img %}
-{%- set og_image = og_image if ('://' in (og_image or '') | string) else (site.images + og_image) | imgSrc | absoluteUrl(site.url) -%}
+{%- set og_image = og_image if ('://' in (og_image or '') | string) else (site.images + og_image) | imgSrc | htmlBaseUrl(site.url) -%}
 {%- set creatorPage = collections.birds | authorPage(author) if author else none -%}
 {%- set creatorHandle = creatorPage.data.social | selectattr('twitter') | first if creatorPage else none -%}
 {%- set creator = ['@', creatorHandle.twitter] | join() if creatorHandle else open_graph.site -%}

content/_includes/sponsor.macros.njk

@@ -1,18 +1,32 @@
 {% import 'layout.macros.njk' as layout %}
 
 {% macro block(
-  supporters,
+  tiers,
   title='Open Source Sponsors'
 ) %}
   {{ layout.title(title) }}
 
-  <h3>Current Sponsors</h3>
+  <h2>Current Sponsors</h2>
   <p>
     A huge thank you to the individuals and organizations
     sponsoring OddBird's open source work!
   </p>
 
-  {{ faces(supporters) }}
+  {%- if tiers['Great Horned Owl'] -%}
+    <h3>Great Horned Owls</h3>
+
+    {{ faces(tiers['Great Horned Owl'], 'lg') }}
+  {%- endif -%}
+
+  {%- if tiers['Blue-Footed Booby'] -%}
+    <h3>Blue-Footed Boobies</h3>
+
+    {{ faces(tiers['Blue-Footed Booby'], 'md') }}
+  {%- endif -%}
+
+  <h3>Common Loons</h3>
+
+  {{ faces(tiers['Common Loon']) }}
 
   <h3>Sponsor OddBird's OSS Work</h3>
   <p>
@@ -26,17 +40,18 @@
   {{ donate() }}
 {% endmacro %}
 
-{% macro faces(supporters) %}
+{% macro faces(supporters, size) %}
 <div face-pile="donors">
   {% for supporter in supporters -%}
     {%- if supporter.image != none -%}
       <a
         href="{{ supporter.website }}"
         data-supporters-tier="{{ supporter.tier | slugify }}"
         data-supporters-slug="{{ supporter.name | slugify }}"
+        data-supporters-face="{{ size }}"
         rel="sponsored noopener noreferrer"
         target="_blank"
-        >{% ocAvatar supporter.image, supporter.name %}</a>
+        >{% ocAvatar supporter.image, supporter.name, size %}</a>
     {%- endif -%}
   {%- endfor %}
 </div>

content/_layouts/base.njk

@@ -12,7 +12,7 @@
 
     {% set banner = banner or title %}
     {% set description = (sub or summary or site.description) | removeMd %}
-    {% set perma = redirect.to if redirect else canonical or (page.url | absoluteUrl(site.url)) %}
+    {% set perma = redirect.to if redirect else canonical or (page.url | htmlBaseUrl(site.url)) %}
 
     {% set title_parts = [site.title, title] if (page.url == '/') else [title, site.title] %}
     <title>{{ title_parts | join(' | ') }}</title>

content/_layouts/rss.njk

@@ -5,20 +5,20 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
   <title>{{ site.title }}</title>
   <subtitle>{{ site.description }}</subtitle>
-  <link href="{{ page.url | absoluteUrl(site.url) }}" rel="self"/>
+  <link href="{{ page.url | htmlBaseUrl(site.url) }}" rel="self"/>
   <link href="{{ site.url }}"/>
   <updated>{{ posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
   <id>{{ site.url }}</id>
   <rights>© {% getDate 'year' %} {{ site.title }}</rights>
-  <icon>{{ '/favicon.ico' | absoluteUrl(site.url) }}</icon>
-  <logo>{{ (site.images + open_graph.img) | imgSrc | absoluteUrl(site.url) }}</logo>
+  <icon>{{ '/favicon.ico' | htmlBaseUrl(site.url) }}</icon>
+  <logo>{{ (site.images + open_graph.img) | imgSrc | htmlBaseUrl(site.url) }}</logo>
   <author>
     <name>{{ site.title }}</name>
     <email>{{ site.email }}</email>
   </author>
   {%- for post in posts %}
   {%- if post.content or post.data.summary %}
-  {%- set absolutePostUrl = post.url | absoluteUrl(site.url) -%}
+  {%- set absolutePostUrl = post.url | htmlBaseUrl(site.url) -%}
   <entry>
     <title>{{ post.data.title }}</title>
     <link href="{{ absolutePostUrl }}"/>
@@ -29,37 +29,37 @@
       {%- set author_page = collections.birds | authorPage(author) -%}
       <author>
         <name>{{ author_page.data.title }}</name>
-        <uri>{{ author_page.url | absoluteUrl(site.url) }}</uri>
+        <uri>{{ author_page.url | htmlBaseUrl(site.url) }}</uri>
       </author>
     {% endfor -%}
 
     <content type="html">
       {%- if post.data.image.src -%}
         {%- filter escape -%}
-          <img src="{{ (site.images + post.data.image.src) | imgSrc | absoluteUrl(site.url) }}" alt="{{ post.data.image.alt }}"/>
+          <img src="{{ (site.images + post.data.image.src) | imgSrc | htmlBaseUrl(site.url) }}" alt="{{ post.data.image.alt }}"/>
         {%- endfilter -%}
       {%- endif -%}
 
       {%- if post.data.summary -%}
-      {{ post.data.summary | md | htmlToAbsoluteUrls(absolutePostUrl) }}
+      {{ post.data.summary | md | transformWithHtmlBase(absolutePostUrl) }}
       {%- endif -%}
 
       {%- filter escape -%}
         {%- if post.data.action.text -%}
           <p>{{ utility.link_if(
             post.data.action.text,
-            post.data.action.url | absoluteUrl(site.url)
+            post.data.action.url | htmlBaseUrl(site.url)
           ) }}</p>
         {%- elif post.data.venue and post.data.canonical -%}
           <p>{{ utility.link_if(
             ['See more at', post.data.venue, '»'] | join(' '),
-            post.data.canonical | absoluteUrl(site.url)
+            post.data.canonical | htmlBaseUrl(site.url)
           ) }}</p>
         {%- endif -%}
       {%- endfilter -%}
 
       {%- if post.content -%}
-        {{ post.content | stripTagsForRSS | htmlToAbsoluteUrls(absolutePostUrl) }}
+        {{ post.content | stripTagsForRSS | transformWithHtmlBase(absolutePostUrl) }}
       {%- endif -%}
     </content>