Host logos locally

Closes #189.
Closes #207.

This was quite a bit of a faff. However, our total file size for logos
is now down from 1400K to 604K, and image serving is much more reliable.
:)

The new process introduces a bit more manual work into the onboarding
process on our side (e.g. logo preparation), but I think this was
unavoidable all along, and we're automating things as much as is
realistic.

Changes included:

* Update member onboarding procedure in `CONTRIBUTING.md`. It has
  changed quite a bit.
* Add more instructions to `CONTRIBUTING.md` regarding logo asset
  management, license files, and others.
* Update `members.ts` accordingly.
* Deprecate `urlSquareLogoWithBackground` in
  `contrib/example-schema.json` and `src/content/config.ts`.
* Remove `urlSquareLogoWithBackground` from Join page.
* Update branding submission instructions on Join page.
* Add manually compressed and adjusted member logos to
  `public/images/members/<slug>/logo.webp`.
* Reorganise homepage logos in
  `src/assets/images/members/<slug>/minimal.svg`.
* Add license information for all images to bring us back to REUSE
  compliance.
* Remove `pixee.json.lock`, because we're not using the bad logo from
  that file anymore.

CONTRIBUTING.md

@@ -23,29 +23,94 @@ npx astro check
 
 ## New Member Workflows
 
-When a new member joins, workflows are run to update `src/content/members`. The workflow can be found in
+Here's what the workflow for a new member looks like:
+
+### 1. PR for `members.csv` submitted
+
+For a new member to join, they must submit a PR adding themselves to `members.csv`.
+
+### 2. PR merged -> `src/content/members` updated
+
+When a new member's PR has been merged, a workflow is run to update `src/content/members`. The workflow can be found in
 `.github/workflows/deploy.yml`, and the code that updates member data can be found in `bin/`.
 
 If you'd like to update all members manually, for example to fetch new data from a JSON file, run
 `./bin/update-all-members`.
 
-By default, all new members have the “Member” role. If you'd like to set a custom role for a certain member, create a
-corresponding entry in `src/memberCustomRoles.json`.
+### 3. Logo added to `public/images/members`
+
+When a member joins, the logo to be shown on the website must be added as `public/images/members/<slug>/logo.webp`.
+These files should be square, kept at or below 800x800px, and compressed as much as possible without giving up fidelity.
+
+Here are some tips. For logos that are shape-based illustrations:
+
+```sh
+magick logo.jpg -resize '>800x' -quality 20 -define webp:lossless=true -define webp:exact=true logo.webp
+```
+
+For logos that have fine details:
+
+```sh
+magick logo.jpg -resize '>800x' -quality 99 -define webp:lossless=false -define webp:exact=true logo.webp
+```
+
+Remember that a corresponding `logo.webp.license` file must also be added.
+
+### 4. Role added to `src/memberRoles.json`
+
+The step which actually causes a member to show up on the website is adding them to `src/memberRoles.json`. Members
+should have a “Member” role by default, though members can also have custom roles.
+
+At this point, the member will show up on the website.
+
+### 5. (Technically Optional) Logo added to `src/assets/images/members`
+
+For a member's logo to show up on the homepage, it must be added to `src/assets/images/members/<slug>/minimal.svg`. This
+should be a white- or greyscale-only version of the member's logo. If in doubt, check the other existing logos. Note
+that this must be an SVG file. If a vector logo is somehow not available, raster graphics can be embedded into an SVG.
+
+Remember that a corresponding `minimal.svg.license` file must also be added.
+
+### Additional Information
 
 If you'd like to make custom temporary changes to a member's JSON file, edit that file in `src/content/members`. To
 prevent workflows from overwriting this data, you should then create a corresponding `.lock` file. For example, if
 you're updating `src/content/members/foocorp.json`, you should also create a file called
 `src/content/members/foocorp.json.lock`. This will result in the JSON file not being automatically updated until the
 `.lock` file is deleted. Remember to delete the `.lock` file when you'd like the member to be updated again.
 
-## Copyright Headers
+When onboarding members, we will receive logo files for those members. Make sure to contribute these logo files, and any
+modified logo files you create, back to our [“Member Logos”][member-logos] Google Drive folder.
+
+[member-logos]: https://drive.google.com/drive/folders/1HxYaaY1wy1hZT6O0ZY58s7Y8N4aV0fcn
+
+## Authorship Information
 
 We maintain copyright headers at the top of every file to establish authorship. Once you make substantive changes to any
 file, add yourself to the copyright headers.
 
 Remember that copyright statements such as “(C) John Smith 2020” contain the year copyright _started_, i.e. 2020 is the
 year the work was first created, not the current year.
 
+Authorship information should also be recorded for assets such as images and fonts, listing the license under which we
+obtained the asset, and the authorship information. This example from `REUSE.toml` is helpful:
+
+```toml
+[[annotations]]
+path = [
+    "public/fonts/azaret-mono*",
+]
+SPDX-FileCopyrightText = "Copyright 2021 The Azeret Project Authors (https://github.com/displaay/azeret)"
+SPDX-License-Identifier = "OFL-1.1"
+```
+
+Ideally, we would be REUSE-compliant. This can be verified by running `reuse lint` in the root of the repository. At the
+time of writing, the repository is REUSE-compliant, but `reuse lint` is quite fiddly, so we may reach a point where this
+is impractical.
+
+Non-copyrightable files (e.g. machine-generated files), and files for which it is impractical to specify authorship
+information along with the file, are listed in `REUSE.toml`.
+
 ## Uptime
 
 We track uptime using [updown.io][updown]: [Open Source Pledge Status Page][status].

REUSE.toml

@@ -17,7 +17,7 @@ path = [
     "public/images/example-members/*",
     "src/content/members/*",
     "src/env.d.ts",
-    "src/memberCustomRoles.json",
+    "src/memberRoles.json",
     "tsconfig.json",
 ]
 SPDX-FileCopyrightText = "NONE"

contrib/example-schema.json

@@ -1,7 +1,6 @@
 {
   "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
   "name": "Acme Widgets",
-  "urlSquareLogoWithBackground": "https://avatars.githubusercontent.com/u/1396951?s=200&v=4",
   "urlLearnMore": "https://example.com/opensourcepledge/",
   "annualReports": [
     {

public/images/members/antithesis/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Antithesis
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/astral/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Astral
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/browserbase/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Browserbase
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/buttondown/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Buttondown
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/chieftools/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Chief Tools
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/emerge-tools/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Emerge Tools
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/frontend-masters/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Frontend Masters
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/gitbutler/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 GitButler
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/herodevs/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 HeroDevs
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/httptoolkit/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 HTTP Toolkit
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/keygen/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Keygen
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/laravel/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Laravel
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/pixee/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Pixee
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/platformatic/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Platformatic
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/prefect/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Prefect
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/private-packagist/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Private Packagist
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/pydantic/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Pydantic
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/rector/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Rector
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/scalar/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Scalar
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/sentry/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Functional Software, Inc. d/b/a Sentry
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/speakeasy/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Speakeasy
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/stackblitz/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 StackBlitz
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/tideways/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Tideways
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/val-town/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 Val Town
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/members/vlt/logo.webp.license

@@ -0,0 +1,2 @@
+© 2024 vlt
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/antithesis/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Antithesis
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/astral/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Astral
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/browserbase/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Browserbase
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/buttondown/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Buttondown
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/chieftools/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Chief Tools
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/emerge-tools/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Emerge Tools
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/frontend-masters/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Frontend Masters
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/gitbutler/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Gitbutler
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/herodevs/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 HeroDevs
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/httptoolkit/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 HTTP Toolkit
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/keygen/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Keygen
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/laravel/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Laravel
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/prefect/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Prefect
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/private-packagist/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Private Packagist
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/pydantic/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Pydantic
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/rector/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Rector
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/scalar/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Scalar
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/sentry/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Functional Software, Inc. d/b/a Sentry
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/speakeasy/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Speakeasy
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/stackblitz/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 StackBlitz
+SPDX-License-Identifier: LicenseRef-Restricted

src/assets/images/members/val-town/minimal.svg.license

@@ -0,0 +1,2 @@
+© 2024 Val Town
+SPDX-License-Identifier: LicenseRef-Restricted

src/components/LeaderboardMember.astro

@@ -15,7 +15,7 @@ import type { MemberWithId } from "../content/config.ts";
 <tr>
   <td>
     <a class="sneaky" href={`/members/${member.id}`}>
-      <img src={member.data.urlSquareLogoWithBackground} alt={`The ${member.data.name} logo`}>
+      <img src=`/images/members/${member.id}/logo.webp` alt=`The ${member.data.name} logo`>
       {member.data.name}
     </a>
   </td>

src/components/MemberLogoBoard.astro

@@ -23,12 +23,12 @@ if (!nRows) {
 
   <MemberLogoBoardItem hidden={nRows < 2} slug="laravel" name="Laravel" />
   <MemberLogoBoardItem hidden={nRows < 2} slug="browserbase" name="Browserbase" />
-  <MemberLogoBoardItem hidden={nRows < 2} slug="valtown" name="Val Town" />
+  <MemberLogoBoardItem hidden={nRows < 2} slug="val-town" name="Val Town" />
   <MemberLogoBoardItem hidden={nRows < 2} slug="prefect" name="Prefect" />
 
-  <MemberLogoBoardItem hidden={nRows < 3} slug="pydantic-logfire" name="Pydantic Logfire" maxHeight="1.8rem" />
-  <MemberLogoBoardItem hidden={nRows < 3} slug="emergetools" name="Emerge Tools" maxHeight="1.7rem" />
-  <MemberLogoBoardItem hidden={nRows < 3} slug="frontendmasters" name="Frontend Masters" />
+  <MemberLogoBoardItem hidden={nRows < 3} slug="pydantic" name="Pydantic Logfire" maxHeight="1.8rem" />
+  <MemberLogoBoardItem hidden={nRows < 3} slug="emerge-tools" name="Emerge Tools" maxHeight="1.7rem" />
+  <MemberLogoBoardItem hidden={nRows < 3} slug="frontend-masters" name="Frontend Masters" />
   <MemberLogoBoardItem hidden={nRows < 3} slug="scalar" name="Scalar" maxHeight="1.8rem" />
 
   <MemberLogoBoardItem hidden={nRows < 4} slug="buttondown" name="Buttondown" maxHeight="1.8rem" />
@@ -37,7 +37,7 @@ if (!nRows) {
   <MemberLogoBoardItem hidden={nRows < 4} slug="keygen" name="Keygen" />
 
   <MemberLogoBoardItem hidden={nRows < 5} slug="stackblitz" name="StackBlitz" maxHeight="1.4rem" />
-  <MemberLogoBoardItem hidden={nRows < 5} slug="privatepackagist" name="Private Packagist" />
+  <MemberLogoBoardItem hidden={nRows < 5} slug="private-packagist" name="Private Packagist" />
   <MemberLogoBoardItem hidden={nRows < 5} slug="chieftools" name="Chief Tools" />
   <MemberLogoBoardItem hidden={nRows < 5} slug="speakeasy" name="Speakeasy" />
 </div>

src/components/MemberLogoBoardItem.astro

@@ -19,7 +19,7 @@ if (!hidden) {
   hidden = false;
 }
 
-const { default: svg } = await import (`../assets/images/members-bw/logo-${slug}.svg?raw`);
+const { default: svg } = await import (`../assets/images/members/${slug}/minimal.svg?raw`);
 ---
 
 <div hidden={hidden} class="member-logo-board-item" role="img" aria-label=`The ${name} logo`>

src/content/config.ts

@@ -28,7 +28,8 @@ const memberReport = z.object({
 
 const member = z.object({
   name: z.string(),
-  urlSquareLogoWithBackground: z.string().url(),
+  // NOTE: Deprecated.
+  urlSquareLogoWithBackground: z.string().url().optional(),
   urlLearnMore: z.string().url(),
   description: z.string().optional(),
   annualReports: memberReport.array().nonempty(),

src/members.ts

@@ -3,10 +3,13 @@
 
 import { getCollection } from 'astro:content';
 import type { MemberWithId, MemberReport } from "./content/config.ts";
+import memberRoles from "./memberRoles.json"
+import type { Map } from './util.ts';
 
 export async function getMembers(): Promise<MemberWithId[]> {
-  const members = await getCollection('members');
-  return members.map(sortReportsForMember);
+  return (await getCollection('members'))
+    .filter((member) => member.id in (memberRoles as Map))
+    .map(sortReportsForMember);
 }
 
 export function getDollarsPerDev(report: MemberReport) {

src/pages/join.astro

@@ -131,18 +131,6 @@ import Layout from "../layouts/Layout.astro";
                 <input type="url" x-model="details.urlLearnMore" placeholder="https://foocorp.com/open-source">
                 <div class="hint">Please make sure this is a valid URL.</div>
               </div>
-              <div class="control">
-                <label>
-                   Link to logo
-                   <small>Square, 400px to 800px, non-transparent background — try using your GitHub avatar!</small>
-                </label>
-                <input
-                  type="url"
-                  x-model="details.urlSquareLogoWithBackground"
-                  placeholder="https://foocorp.com/static/logo.png"
-                >
-                <div class="hint">Please make sure this is a valid URL.</div>
-              </div>
               <template x-for="(annualReport, index) in details.annualReports">
                 <div class="annual-report">
                   <h5>Yearly report <span x-text="index + 1"></span></h5>
@@ -212,18 +200,22 @@ import Layout from "../layouts/Layout.astro";
           </div>
           <div class="step">
             <h3><span class="inline-number">5. </span>Include your branding materials in the PR,</h3>
-            so that we can promote you in future campaigns.
+            so that we can add your logo to the website, and promote you in future campaigns.
 
             <p
               >We need at least:
 
               <ol>
-                <li>a glyph/icon in a square area, and</li>
-                <li>a full name/wordmark in a wide rectangle,</li>
+                <li
+                    >a glyph/icon in a square area with a non-transparent background
+                    (see <a href="/members">examples</a>),</li
+                >
+                <li>a glyph/icon in a square area with a transparent background, and</li>
+                <li>a full name/wordmark in a wide rectangle with a transparent background,</li>
               </ol>
 
-              or your nearest equivalents. For both versions, you should either include a high-resolution (&gt; 800px
-              wide) raster file with a transparent background (e.g. PNG), or preferably a vector file (e.g. SVG).</p
+              or your nearest equivalents. Try to include vector files (e.g. SVG), or at least high-resolution (&gt;
+              800px wide) raster files.</p
             >
           </div>
         </div>
@@ -326,7 +318,6 @@ import Layout from "../layouts/Layout.astro";
           name: '',
           description: '',
           urlLearnMore: '',
-          urlSquareLogoWithBackground: '',
           annualReports: [{ ...DEFAULT_ANNUAL_REPORT }],
         },