Redesign (#178)

.eleventy.js

@@ -1,24 +1,28 @@
 // Plugins
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
+const slugify = require("slugify");
 
 
 module.exports = function(eleventyConfig) {
   // Watch targets
   eleventyConfig.addWatchTarget("./index.njk");
-  eleventyConfig.addWatchTarget("./includes/**/*.njk");
+  eleventyConfig.addWatchTarget("./**/*.njk");
   eleventyConfig.addWatchTarget("./site.css");
 
   // Passthrough
-  eleventyConfig.addPassthroughCopy("robots.txt");
-  eleventyConfig.addPassthroughCopy("site.css");
-  eleventyConfig.addPassthroughCopy("texture.png");
   eleventyConfig.addPassthroughCopy("apple-touch-icon.png");
   eleventyConfig.addPassthroughCopy("avatar.png");
-  eleventyConfig.addPassthroughCopy("favicon.svg");
-  eleventyConfig.addPassthroughCopy("safari-pinned-tab.svg");
   eleventyConfig.addPassthroughCopy("favicon.ico");
-  eleventyConfig.addPassthroughCopy("facebook.png");
-  eleventyConfig.addPassthroughCopy("twitter.png");
+  eleventyConfig.addPassthroughCopy("favicon.svg");
+  eleventyConfig.addPassthroughCopy("fonts/basiersquare-bold.woff2");
+  eleventyConfig.addPassthroughCopy("fonts/basiersquare-regular.woff2");
+  eleventyConfig.addPassthroughCopy("humans.txt");
+  eleventyConfig.addPassthroughCopy("icon-192.png");
+  eleventyConfig.addPassthroughCopy("icon-512.png");
+  eleventyConfig.addPassthroughCopy("manifest.webmanifest");
+  eleventyConfig.addPassthroughCopy("site.css");
+  eleventyConfig.addPassthroughCopy("robots.txt");
+  eleventyConfig.addPassthroughCopy("social-share-image.png");
 
   // Eleventy config
   eleventyConfig.setQuietMode(true);
@@ -35,6 +39,14 @@ module.exports = function(eleventyConfig) {
     return sorted;
   });
 
+  eleventyConfig.addFilter("slugify", function (str) {
+    return slugify(str.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, ""), {
+      lower: true,
+      replacement: "-",
+      remove: /[*+~.·,()'"`´%!?¿:@»]/g,
+    });
+  });
+
   return {
     // Supported formats
     templateFormats: [

.github/CODE_OF_CONDUCT.md

@@ -6,19 +6,19 @@ I ([Eric Bailey](https://ericwbailey.website/)) believe that people who want to
 
 If you choose to participate in this webring, you agree to not discriminate based on the following criteria:
 
-- Age,
-- Body size,
-- Permanent disability and temporary impairments,
-- Ethnicity,
-- Gender identity and expression,
-- Level of experience and education,
-- Nationality,
-- Physical appearance,
-- Race,
-- Religion,
-- Sex characteristics,
-- Sexual identity, and
-- Socioeconomic status
+* Age,
+* Body size,
+* Permanent disability and temporary impairments,
+* Ethnicity,
+* Gender identity and expression,
+* Level of experience and education,
+* Nationality,
+* Physical appearance,
+* Race,
+* Religion,
+* Sex characteristics,
+* Sexual identity, and
+* Socioeconomic status
 
 Discrimination is not limited to the preceding list. The list serves as an example of the kinds of criteria we take into consideration when considering what constitutes discrimination.
 
@@ -54,8 +54,8 @@ Any participants who attempt to abuse the reporting process will be considered t
 
 This code of conduct applies to:
 
-- The [a11y-webring.club](https://a11y-webring.club/) website
-- Websites listed in the webring
-- Supporting resources and services (ex: [GitHub](https://github.com/ericwbailey/a11y-webring.club))
-- Communication channels (ex: email)
-- Social media (ex: Mastodon or LinkedIn)
+* The [a11y-webring.club](https://a11y-webring.club/) website
+* Websites listed in the webring
+* Supporting resources and services (ex: [GitHub](https://github.com/ericwbailey/a11y-webring.club))
+* Communication channels (ex: email)
+* Social media (ex: Mastodon or LinkedIn)

.github/CONTRIBUTING.md

@@ -6,7 +6,7 @@ Thank you for your interest in contributing to this project!
 
 Great!
 
-Big-picture there's two things you need to do:
+Big-picture there are two things you need to do:
 
 1. [Add the webring code]((https://a11y-webring.club#code)) to your website, and
 2. [Add yourself to the webring's `data/members/` directory as JSON](https://github.com/ericwbailey/a11y-webring.club/tree/main/data/members) file as a pull request.
@@ -23,42 +23,45 @@ This process depends on how your website is built, so unfortunately I cannot pro
 
 To add yourself to the webring, submit a pull request to this repository where you have added your information as a JSON file. You can reference and copy/paste [my JSON entry](https://github.com/ericwbailey/a11y-webring.club/blob/main/data/members/Eric%20Bailey.json) as a format to use.
 
-<strong>Required</strong> information is:
+#### Required information
 
-- `date`: The day you add yourself to the webring, in `YYYY-MM-DDThh:mm` format. You can use `T00:00` for the hour an minute if you want.
-- `name`: Your name (can be your given name, your full name, a handle, etc.).
-- `url`: Your website's address (ex: `https://web-a11y.club/`). The URL <strong>must</strong> use the HTTPS protocol.
+* `date`: The day you add yourself to the webring, in `YYYY-MM-DDThh:mm` format. You can use `T00:00` for the hour an minute if you want.
+* `name`: Your name (can be your given name, a nickname, a handle, etc.).
+* `url`: Your website's address (ex: `https://web-a11y.club/`). The URL <strong>must</strong> use the HTTPS protocol.
 
 Ideally, your `url` points to the page that displays the webring code, but this is not required.
 
-<strong>Optional</strong> information is:
+#### Optional information
 
-- `accessibilityStatement`: The URL for your website's accessibility statement.
-- `employment`: There are two pieces of sub-content you can enable to signal that you are looking for work or hiring:
-    - `hiring`: Set this to `true` if you or our organization is hiring for accessibility-related roles.
-    - `seeking`: Set this to `true` if you are looking to be hired for an accessibility-related role.
-- `github`: Your GitHub profile address (ex: `https://github.com/yourname`).
-- `linkedin`: Your LinkedIn profile address (ex: `https://www.linkedin.com/in/yourname/`).
-- `mastodon`: Your Mastodon account (ex: `https://mastodon.social/@YourName`).
-- `rss`: The RSS feed for your website.
+* `accessibilityStatement`: The URL for your website's accessibility statement.
+* `github`: Your GitHub profile address (ex: `https://github.com/yourname`).
+* `linkedin`: Your LinkedIn profile address (ex: `https://www.linkedin.com/in/yourname/`).
+* `mastodon`: Your Mastodon account (ex: `https://mastodon.social/@YourName`).
+* `rss`: The RSS feed for your website.
 
 If you do not have this information, please use `null` for the entry's value:
 
 ```
-"twitter": null
+"mastodon": null
 ```
 
 Be sure to save your webring member JSON file using the same name as your `name` value. For example, mine is called `Eric Bailey.json`.
 
 Once your pull request is merged, [the webring's list of members](https://a11y-webring.club#members) will automatically update to list the information you provided ✨
 
----
-
 Once these two steps are completed, both the webring and your site will allow for discovery!
 
+---
+
 ## I want to update my information
 
-This process is similar to adding yourself to the webring. Submit a pull request that modifies your JSON member information. This can include adding info, updating info, and removing info.
+This process is similar to adding yourself to the webring.
+
+Submit a pull request that modifies your JSON member information. This can include:
+
+* Adding info,
+* Updating info, and
+* Removing info.
 
 ## I want to make updates to the webring's website
 
@@ -68,10 +71,16 @@ Please check the project [Issues](https://github.com/ericwbailey/a11y-webring.cl
 
 If you want to propose new features or functionality, please [create an issue](https://github.com/ericwbailey/a11y-webring.club/issues/new) before submitting a pull request. This will help us determine if your suggestion is inline with my vision for where the project should go.
 
-## I want to use Medium, LinkedIn, Facebook, Twitter, etc. as my website
+## I want to use Medium, LinkedIn, Facebook, Twitter/X, etc. as my website
 
 Unfortunately, this is something that will break the webring. Since you do not own your content on these platforms they are incompatible with a webring's approach. This is why some of these services are offered as optional links you can add.
 
+## I want to suggest a new social media service to add
+
+I'm definitely open to suggestions! I will not allow Twitter/X or Threads, due to ethical issues I have with each platform.
+
+If you have a suggestion for a service other than those two, please [create an issue](https://github.com/ericwbailey/a11y-webring.club/issues/new) so we can chat it out.
+
 ## I want to add someone else's website
 
 That's a nice idea, but I prefer if the person who made the site adds themselves for a variety of reasons. You could definitely suggest they do so, though!
@@ -85,6 +94,10 @@ That's fine, too. If you choose leave the webring I ask that:
 
 This will remove you from the webring and also allow people browsing the webring to not get stuck.
 
+## I want to re-join the webring
+
+Welcome back! All you need to do is follow the steps to [add your site to the webring](#i-want-to-add-my-site-to-the-webring) again.
+
 ## I want to start my own webring
 
 Nice! Check out this [webring project](https://github.com/maxboeck/webring/) made by [Max Böck](https://mxb.dev/).

.github/PULL_REQUEST_TEMPLATE/ADDITION.md

@@ -2,6 +2,6 @@
 
 <!-- Add your message here -->
 
-- [ ] I have added the webring code to my website
-- [ ] My site uses the HTTPS protocol
-- [ ] I agree to follow this project's code of conduct
+* [ ] I have added the webring code to my website
+* [ ] My site uses the HTTPS protocol
+* [ ] I agree to follow this project's code of conduct

.github/PULL_REQUEST_TEMPLATE/BUGFIX.md

@@ -4,9 +4,9 @@
 
 ### GitHub issue
 
-<!-- 
+<!--
   Is there a GitHub isse about this bug? If so, please link to it.
   https://github.com/ericwbailey/a11y-webring.club/labels/bug
  -->
 
-- [ ] I agree to follow this project's code of conduct
+* [ ] I agree to follow this project's code of conduct

.github/PULL_REQUEST_TEMPLATE/FEATURE.md

@@ -4,9 +4,9 @@
 
 ### GitHub issue
 
-<!-- 
+<!--
   Please link to the GitHub issue where this issue was proposed.
   https://github.com/ericwbailey/a11y-webring.club/blob/main/.github/CONTRIBUTING.md#i-want-to-make-updates-to-the-webrings-website
  -->
 
-- [ ] I agree to follow this project's code of conduct
+* [ ] I agree to follow this project's code of conduct

.github/PULL_REQUEST_TEMPLATE/MODIFICATION.md

@@ -2,5 +2,5 @@
 
 <!-- Add your message here -->
 
-- [ ] My site uses the HTTPS protocol
-- [ ] I agree to follow this project's code of conduct
+* [ ] My site uses the HTTPS protocol
+* [ ] I agree to follow this project's code of conduct

.github/PULL_REQUEST_TEMPLATE/REMOVAL.md

@@ -2,5 +2,5 @@
 
 <!-- Add your message here. Sorry to see you go! -->
 
-- [ ] I have removed the webring code from my website
-- [ ] I agree to follow this project's code of conduct
+* [ ] I have removed the webring code from my website
+* [ ] I agree to follow this project's code of conduct

data/metadata.json

@@ -1,17 +1,15 @@
 {
   "title": "a11y-webring.club",
-  "description": "A webring for digital accessibility practitioners.",
+  "description": "A webring for digital accessibility practitioners",
   "url": "https://a11y-webring.club",
   "author": "Eric Bailey",
   "lang": "en",
-  "theme": "#c2e5fd",
-  "cachebust": "?v=1",
+  "theme": "#0e00f5",
+  "cachebust": "?v=2",
   "social": {
-    "color": "#051929",
+    "color": "#0e00f5",
     "logo": "avatar.png",
-    "twitter": "twitter.png",
-    "facebook": "facebook.png",
-    "apple": "apple-touch-icon",
-    "safari": "safari-pinned-tab.svg"
+    "preview": "social-share-image.png",
+    "apple": "apple-touch-icon.png"
   }
 }

humans.txt

@@ -0,0 +1,13 @@
+The Humans Responsible & Colophon
+humanstxt.org
+
+a11y-webring.club
+https://a11y-webring.club/
+
+Designed and built by Eric Bailey (ericwbailey.website)
+
+Thanks to people who helped make this site happen:
+
+- Sarah Higley (sarahmhigley.com)
+- Edward Loveall (edwardloveall.com)
+- Wayne Elgin (linkedin.com/in/wayneelgin)

includes/faq.njk

@@ -1,16 +1,22 @@
-<h2 id="frequently-asked-questions">
+<h2
+  id="frequently-asked-questions"
+  tabindex="-1">
   Frequently asked questions
 </h2>
 <p>
   Answers to common questions:
 </p>
-<h3 id="what-is-a-webring">
+<h3
+  id="what-is-a-webring"
+  tabindex="-1">
   What is a webring?
 </h3>
 <p>
   A <a href="https://en.wikipedia.org/wiki/Webring">webring</a> is a human-curated list of websites organized around a specific topic. This webring is dedicated to people interested in digital accessibility.
 </p>
-<h3 id="why-does-this-webring-exist">
+<h3
+  id="why-does-this-webring-exist"
+  tabindex="-1">
   Why does this webring exist?
 </h3>
 <p>
@@ -19,19 +25,25 @@
 <p>
   It provides a way for people to discover and learn from each other following <a href="https://crutchesandspice.com/2022/11/16/with-twitter-crumbling-it-feels-like-the-world-is-collapsing-on-disabled-people/">the fracturing of Twitter</a>.
 </p>
-<h3 id="what-is-digital-accessibility">
+<h3
+  id="what-is-digital-accessibility"
+  tabindex="-1">
   What is digital accessibility?
 </h3>
 <p>
   Digital accessibility is the practice of making technology able to be used by disabled people. This includes websites, web apps, native apps, kiosks, e-readers, desktop computers, laptops, tablets, smartphones, etc.
 </p>
-<h3 id="what-is-a11y">
+<h3
+  id="what-is-a11y"
+  tabindex="-1">
   What is a11y?
 </h3>
 <p>
   “a11y” is a numeronym, a form of abbreviation that refers to the word “accessibility.” To learn more about this term, check out The A11Y Project’s post, <a href="https://www.a11yproject.com/posts/a11y-and-other-numeronyms/">a11y and a brief numeronyms primer</a>.
 </p>
-<h3 id="how-do-i-request-changes">
+<h3
+  id="how-do-i-request-changes"
+  tabindex="-1">
   How do I request changes?
 </h3>
 <ul>
@@ -45,7 +57,9 @@
     If you want to update the content of this website, please <a href="https://github.com/ericwbailey/a11y-webring.club/pulls">create a Pull Request</a>.
   </li>
 </ul>
-<h3 id="who-made-this">
+<h3
+  id="who-made-this"
+  tabindex="-1">
   Who made this?
 </h3>
 <p>