Merge pull request #555 from oddbird/oss-sponsors

oss sponsors

.vscode/settings.json

@@ -11,9 +11,6 @@
     "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
-  "eslint.validate": [
-    "javascript"
-  ],
   "css.validate": false,
   "scss.validate": false,
   "stylelint.packageManager": "yarn",

content/_data/opencollective.js

@@ -0,0 +1,54 @@
+// https://opencollective.com/oddbird-open-source/members/all.json
+import eleventyFetch from '@11ty/eleventy-fetch';
+
+const FilteredProfiles = [
+  // if there are backers we need to exclude…
+];
+
+const getDefaultAvatarUrl = (url) => {
+  const slug = url.split('/').at(-1);
+  return slug ? `https://images.opencollective.com/${slug}/avatar.png` : null;
+};
+
+export default async () => {
+  try {
+    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,
+    });
+
+    const supporters = json
+      .filter(
+        (c) =>
+          c.role === 'BACKER' &&
+          c.totalAmountDonated &&
+          !FilteredProfiles.includes(c.name),
+      )
+      .map((c) => ({
+        name: c.name,
+        tier: c.tier,
+        website: c.website || c.profile,
+        image: c.image || getDefaultAvatarUrl(c.profile),
+        total: c.totalAmountDonated,
+      }))
+      .sort(
+        (a, b) =>
+          // Sort by total amount donated (desc)
+          b.total - a.total,
+      );
+
+    return {
+      supporters,
+    };
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Failed fetching Open Collective backers.', e);
+    return {
+      supporters: [],
+    };
+  }
+};

content/_includes/page/base.njk

@@ -1,4 +1,5 @@
 {%- import 'utility.macros.njk' as utility -%}
+{%- import 'sponsor.macros.njk' as sponsor -%}
 
 {# is this the page for one of us? #}
 {%- set is_bird = bird and (bird != 'oddbird') -%}
@@ -32,6 +33,13 @@
   {%- endif %}
 
   {% include 'page/mentions.njk' %}
+
+  {% if oss or sponsors %}
+    <section data-list="sponsors" data-typeset>
+      {{ sponsor.block(opencollective.supporters) }}
+    </section>
+  {% endif %}
+
   {% include 'page/list.njk' %}
 
   <!-- used for webmentions -->

content/_includes/sponsor.macros.njk

@@ -0,0 +1,54 @@
+{% import 'layout.macros.njk' as layout %}
+
+{% macro block(
+  supporters,
+  title='Open Source Sponsors'
+) %}
+  {{ layout.title(title) }}
+
+  <h3>Current Sponsors</h3>
+  <p>
+    A huge thank you to the individuals and organizations
+    sponsoring OddBird's open source work!
+  </p>
+
+  {{ faces(supporters) }}
+
+  <h3>Sponsor OddBird's OSS Work</h3>
+  <p>
+    We love contributing back to the languages & tools
+    that developers rely on,
+    from CSS & Sass to browser polyfills and Python.
+    Help us keep that work sustainable
+    and focused on developer needs!
+  </p>
+
+  {{ donate() }}
+{% endmacro %}
+
+{% macro faces(supporters) %}
+<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 }}"
+        rel="sponsored noopener noreferrer"
+        target="_blank"
+        >{% ocAvatar supporter.image, supporter.name %}</a>
+    {%- endif -%}
+  {%- endfor %}
+</div>
+{% endmacro %}
+
+{% macro donate() -%}
+<a href="https://opencollective.com/oddbird-open-source" class="donate-link">
+  <img
+    src="https://opencollective.com/oddbird-open-source/donate/[email protected]?color=blue"
+    alt="Donate to our collective"
+    width="596"
+    height="96"
+  />
+</a>
+{%- endmacro %}

content/tools/herman.md

@@ -87,7 +87,6 @@ and keep everything in one place.
 [Nunjucks]: https://mozilla.github.io/nunjucks/
 [Sass Accoutrement]: /accoutrement/
 
-
 {{ embed.figure(
   screenshots,
   'Document colors, icons, ratios, sizes, fonts, and components'

content/tools/tools.11tydata.yaml

@@ -1,2 +1,3 @@
 permalink: /{{ page.fileSlug }}/index.html
 oss: owner
+sponsors: true

eleventy.config.js

@@ -11,6 +11,7 @@ import * as events from '#filters/events.js';
 import * as images from '#filters/images.js';
 import * as mentions from '#filters/mentions.js';
 import * as pages from '#filters/pages.js';
+import * as support from '#filters/support.js';
 import * as tags from '#filters/tags.js';
 import * as taxonomy from '#filters/taxonomy.js';
 import * as time from '#filters/time.js';
@@ -139,6 +140,9 @@ export default (eleventyConfig) => {
   eleventyConfig.addFilter('activeAuthor', birds.activeAuthor);
   eleventyConfig.addFilter('withActiveAuthor', birds.withActiveAuthor);
 
+  eleventyConfig.addFilter('donorFacePile', support.donorFacePile);
+  eleventyConfig.addShortcode('ocAvatar', support.openCollectiveAvatar);
+
   eleventyConfig.addFilter('typogr', type.typogr);
   eleventyConfig.addFilter('md', type.md);
   eleventyConfig.addFilter('mdInline', type.mdInline);

package.json

@@ -57,6 +57,7 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "3.0.0-alpha.6",
+    "@11ty/eleventy-fetch": "^4.0.1",
     "@11ty/eleventy-img": "^4.0.2",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",

src/filters/support.js

@@ -0,0 +1,25 @@
+/* @docs
+label: OSS Support Filters
+category: File
+*/
+
+/* @docs
+label: openCollectiveAvatar
+category: Image
+note: Generate Open Collective avatar
+params:
+  url:
+    type: url
+    note: image url
+  username:
+    type: string
+    default: ''
+*/
+export const openCollectiveAvatar = (url, username = '') => {
+  const alt = `Open Collective Avatar${username ? ` for ${username}` : ''}`;
+  const size = 'width="66" height="66"';
+
+  return `<img src="https://v1.image.11ty.dev/${encodeURIComponent(
+    url,
+  )}/webp/66/" ${size} alt="${alt}" loading="lazy" decoding="async">`;
+};

src/scss/components/_oss-grid.scss

@@ -17,3 +17,12 @@
     max-width: 75%;
   }
 }
+
+.donate-link {
+  justify-self: start;
+
+  img {
+    inline-size: auto;
+    max-block-size: calc(1lh + var(--gutter));
+  }
+}

src/scss/layout/_cta.scss

@@ -7,5 +7,4 @@
   grid-area: var(--cta-grid-area, cta);
   grid-template-columns: minmax(min-content, var(--page));
   justify-content: center;
-  margin-bottom: 0;
 }

src/scss/layout/_main.scss

@@ -1,5 +1,6 @@
 [data-layout='main'] {
   grid-area: main;
+  margin-block-end: var(--spacer);
 }
 
 [data-main] {

src/scss/patterns/_face-pile.scss

@@ -0,0 +1,19 @@
+[face-pile] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--shim);
+
+  > * {
+    border: thin solid;
+    border-radius: 100%;
+    flex: none;
+    overflow: clip;
+  }
+
+  img {
+    aspect-ratio: 1;
+    block-size: 2lh;
+    inline-size: auto;
+    max-width: unset;
+  }
+}

src/scss/patterns/_index.scss

@@ -7,6 +7,7 @@
 @forward 'color-swatch';
 @forward 'dropdown';
 @forward 'icons';
+@forward 'face-pile';
 @forward 'faces';
 @forward 'media';
 @forward 'devices';

src/scss/patterns/_sections.scss

@@ -183,7 +183,5 @@
     calc(50% - var(--double-gutter)) calc(100% - var(--double-gutter)),
     0 calc(100% - var(--double-gutter))
   );
-  margin-bottom: var(--double-gutter);
-  margin-top: var(--double-gutter);
   padding: var(--spacer) var(--page-margin) calc(var(--spacer) + var(--gutter));
 }

test/js/support.test.js

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+import { openCollectiveAvatar } from '#filters/support.js';
+
+describe('support filters', () => {
+  test('openCollectiveAvatar', () => {
+    const url =
+      'https://v1.image.11ty.dev/https%3A%2F%2Fwww.example.com/webp/66/';
+    expect(openCollectiveAvatar('https://www.example.com', 'User Name')).toBe(
+      `<img src="${url}" width="66" height="66" alt="Open Collective Avatar for User Name" loading="lazy" decoding="async">`,
+    );
+    expect(openCollectiveAvatar('https://www.example.com')).toBe(
+      `<img src="${url}" width="66" height="66" alt="Open Collective Avatar" loading="lazy" decoding="async">`,
+    );
+  });
+});