ua-snap / ardac-explorer

ARDAC GUI Explorer
0 stars 0 forks source link

Reference items by slug instead of sequential ID in HTML templates #35

Closed cstephen closed 7 months ago

cstephen commented 7 months ago

This PR adds a new itemBySlug function to store.ts to make it possible to reference items by their slug instead of their items.ts sequence number. The motivation for this is twofold:

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 item Brief, Text, and TextPicture 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.

cstephen commented 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/