Closed cstephen closed 7 months ago
In commit 0d9e7efa46aa12b5b8f36b2107718642686c5116 I changed items.ts
content from this (for example):
{
slug: 'future-precipitation-map' as Slug,
...
},
To:
{
slug: 'future-precipitation-map',
...
} satisfies Item,
From what I understand, using satisfies
instead of as
is better in every case where it's possible to do so. They serve similar purposes, but satisfies
performs TypeScript validation and as
does not. I confirmed this by renaming the slug in the example above to future-precipitation-map-test
while using as Slug
and TypeScript turned a blind eye towards it. The same bogus slug failed TypeScript validation while using satisfies Item
and this also has the benefit of validating all properties of the item at once instead of validating them individually.
More info on satisfies
vs. as
here: https://tusharf5.com/posts/typescript-satisfies-operator/
This PR adds a new
itemBySlug
function tostore.ts
to make it possible to reference items by their slug instead of theiritems.ts
sequence number. The motivation for this is twofold:items.ts
changes when removing items, reordering items, etc.I experimented with different ways to do this before arriving at this solution. One option was to restructure
items.ts
be an object rather than an array and use the slug as a key for each item, but that would make a mess of some places in the code where we expect the items to be an array, like here:https://github.com/ua-snap/ardac-explorer/blob/f2f4c7e523cfd5a53f53e1cb7942a2af2288d934/pages/tag/%5Btag%5D.vue#L12
I also decided to put the
itemBySlug
calls in the itemBrief
,Text
, andTextPicture
components and pass the slug in as a string so we could keep our item component attributes as concise as possible. In other words, I chose to make it work like this:Instead of this:
To test, load the app and check the front/topic pages to make sure they are working the same as before.