refactor: make All Questions dynamic to reduce redundant files #178
Conversation
✅ Deploy Preview for triviaccessibility ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| return [ | ||
| 'All Questions', | ||
| ...new Set( | ||
| questions | ||
| .map((question) => question.Tags) | ||
| .flat() | ||
| .sort() | ||
| ), | ||
| ]; |
There was a problem hiding this comment.
Here, we're returning a new category, All Questions, and then returning the question Tags (which are the categories) as before...
There was a problem hiding this comment.
There are a few complicated array actions here that I think are worth calling out, so I'll try to break it down. The end result that we want is an array with each unique category we find in alphabetical order (except for making sure "All Questions" is the first item).
...new Set(arrayWithDuplicateItems)lets us remove duplicate items- You know about
.map, but sincequestion.Tagsis an array, we end up with an array of arrays, like[["ARIA"], ["Color Contrast", "Design"]]. By using.flat, we take those inner arrays and flatten them out so we end up with a one-dimensional array, like["ARIA", "Color Contrast", "Design"] - Combining all of these things with
.sortgives us the list of categories that we need, All Questions, ARIA, Assistive Technologies, etc. as shown on the home page
| questions.forEach((question, index) => { | ||
| questionGroups.push({ | ||
| category: 'All Questions', | ||
| tagName: 'all-questions', | ||
| pageNumber: index + 1, | ||
| questionTotal: questions.length, | ||
| question, | ||
| }); | ||
| }); |
There was a problem hiding this comment.
...then this is where every question gets the category all-questions added. And pushed to questionGroups...
There was a problem hiding this comment.
Yeah, exactly! It felt less brittle to do it in code than to have to remember to add an "All Questions" tag to the data in Airtable.
| categories.forEach((category) => { | ||
| let pageNumber = 1; | ||
| const questionTotal = questions.reduce((sum, question) => { | ||
| if (question.Tags.includes(category)) { | ||
| return sum + 1; | ||
| } | ||
|
|
||
| return sum; | ||
| }, 0); | ||
|
|
||
| questions.forEach((question) => { | ||
| if (question.Tags.includes(category)) { | ||
| questionGroups.push({ | ||
| category, | ||
| tagName: slugify(category), | ||
| pageNumber, | ||
| questionTotal, | ||
| question, | ||
| }); | ||
|
|
||
| pageNumber += 1; | ||
| } | ||
| }); | ||
| }); |
There was a problem hiding this comment.
...then this is still doing what it was doing before (I think).
- checking the categories and determining how many questions are in that category (starting with a
sumof 0) - looping through each of the questions in that category, and pushing that object to
questionGroups, and increasingpageNumber(which is what the URL is built with)
There was a problem hiding this comment.
Yeah this part is handling the other categories, and most of the data here is used for the permalinks. This is sort of a drawback with using Eleventy compared to something like Next.js that handles routing for you a little more easily. This type of side project is perfect for doing things the hard, boring, stupid way, though!
| @@ -10,7 +10,7 @@ eleventyExcludeFromCollections: true | |||
| {% extends 'layout.njk' %} | |||
|
|
|||
| {% set seoTitle %}Question {{ questionGroup.pageNumber }} of {{ questionGroup.questionTotal }} | Multiple Choice - {{ questionGroup.category }} | Trivia11y{% endset %} | |||
| {% set seoDescription %}Answer question {{ questionGroup.pageNumber }} of {{ questionGroup.questionTotal }} about {{ questionGroup.category }} (Multiple Choice).{% endset %} | |||
| {% set seoDescription %}Answer question {{ questionGroup.pageNumber }} of {{ questionGroup.questionTotal }}: {{ questionGroup.category }} (Multiple Choice).{% endset %} | |||
There was a problem hiding this comment.
You mentioned in the validation instructions that the SEO would change, which I see here. What made you land on the colon?
It sounded like maybe you weren't super happy with this change, so what about like, "regarding" or "relating to"? Does that work better for all questions and a category?
"Answer question 14 of 40 regarding all questions?" "Answer question 14 of 40 relating to all questions?" Maybe that's not really any more clear, just a thought 😄
There was a problem hiding this comment.
I just wanted something other than "Answer question 14 of 40 about All Questions (Multiple Choice)". The colon felt like a good compromise that worked equally well for "All Questions" as well as something like "Forms".
Thinking about the context, though, the most likely case for someone reading the description is if the link is shared on social media. I wonder if what we have makes sense for that, or maybe it would be better to just have a generic description about Trivia11y as a whole 🤔
I'm happy to call that out of scope for this, though!
Description
These changes modify how we generate pages for "All Questions" as a category. Rather than having separate templates that are mostly redundant, this treats "All Questions" like a tag (without requiring us to set an "All Questions" tag on every question in Airtable). The SEO descriptions are slightly different to avoid odd wording, and the URLs for questions are different now, but I think these are acceptable differences (seems unlikely someone would have these pages bookmarked).
To Validate
npm startVIEW_DRAFTSset totruein your.envfile, you may see extra categories, which is fine)