Enable astro/tsconfigs/strictest in the shared package (#2836)

shared/components/cards/AuthLockCard.astro

@@ -3,8 +3,9 @@ import Button from '@ui/Button.astro'
 import Avatar from '@ui/Avatar.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
-const person = people[0]
+const person = requireIndex(people, 0)
 ---
 
 <form class="card card-md" action="./" method="get" novalidate>

shared/components/cards/Card.astro

@@ -5,6 +5,7 @@ import AvatarList from '@ui/AvatarList.astro';
 import Empty from '@ui/Empty.astro';
 import Progress from '@ui/Progress.astro';
 import photos from '@data/photos.json';
+import { requireIndex } from '@shared/lib/array';
 
 interface Props {
 	link?: boolean;
@@ -61,7 +62,7 @@ const {
 	footerButtons,
 	footerElements,
 	progress,
-} = Astro.props;
+}: Props = Astro.props;
 
 const Element = link ? 'a' : 'div';
 
@@ -86,8 +87,8 @@ const footerEls = (footerElements ?? []).map((element: string) => {
 const hasHeader = header || headerTitle || headerTabs || headerPills;
 const hasFooter = footer || footerButton || footerButtons || footerElements;
 
-const imgTopPhoto = (photos as { file: string; title: string }[])[7];
-const imgBottomPhoto = (photos as { file: string; title: string }[])[11];
+const imgTopPhoto = requireIndex(photos as { file: string; title: string }[], 7);
+const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[], 11);
 ---
 
 <Element href={link ? '#' : undefined} class:list={classes}>

shared/components/cards/CardImage.astro

@@ -1,5 +1,6 @@
 ---
 import photos from '@data/photos.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Props {
   title?: string
@@ -9,7 +10,7 @@ interface Props {
 
 const { title, right, imgId = 1 } = Astro.props
 
-const photo = (photos as { file: string; title: string }[])[imgId]
+const photo = requireIndex(photos as { file: string; title: string }[], imgId)
 const imgClass = `w-100 h-100 object-cover ${right ? 'card-img-end' : 'card-img-start'}`
 ---
 

shared/components/cards/CarouselCard.astro

@@ -2,7 +2,6 @@
 // Photos filtered to horizontal=true, then sliced by offset/limit.
 import photos from '@data/photos.json'
 import CardTitle from '@ui/CardTitle.astro'
-import Carousel from '@ui/Carousel.astro'
 
 interface Props {
   id?: string

shared/components/cards/ProjectProgress.astro

@@ -2,6 +2,7 @@
 import Progress from '@ui/Progress.astro'
 import CardDropdown from '@ui/CardDropdown.astro'
 import projects from '@data/projects.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Project {
   title?: string
@@ -16,7 +17,7 @@ interface Props {
 }
 
 const { projectId = 0, progress = 25, daysAgo = 2 } = Astro.props
-const project = (projects as Project[])[projectId]
+const project = requireIndex(projects as Project[], projectId)
 ---
 
 <div class="card">

shared/components/cards/Subscribe.astro

@@ -2,6 +2,7 @@
 import Avatar from '@ui/Avatar.astro'
 import CardDropdown from '@ui/CardDropdown.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Person {
   full_name?: string
@@ -15,7 +16,7 @@ interface Props {
 }
 
 const { personId = 0 } = Astro.props
-const person = (people as Person[])[personId]
+const person = requireIndex(people as Person[], personId)
 ---
 
 <div class="card">

shared/components/cards/UserCard.astro

@@ -2,6 +2,7 @@
 // person = people[person-id] (no -1: the object is passed straight to Avatar).
 import Avatar from '@ui/Avatar.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Person {
   full_name?: string
@@ -16,7 +17,7 @@ interface Props {
 }
 
 const { personId = 0, right } = Astro.props
-const person = (people as Person[])[personId]
+const person = requireIndex(people as Person[], personId)
 ---
 
 <a class="card card-link" href="#">

shared/components/cards/UserCardBg.astro

@@ -3,6 +3,7 @@
 import Avatar from '@ui/Avatar.astro'
 import people from '@data/people.json'
 import photos from '@data/photos.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Person {
   full_name?: string
@@ -22,8 +23,8 @@ interface Props {
 }
 
 const { personId = 0, blurred } = Astro.props
-const person = (people as Person[])[personId]
-const photo = (photos as Photo[])[personId]
+const person = requireIndex(people as Person[], personId)
+const photo = requireIndex(photos as Photo[], personId)
 ---
 
 <a class="card card-link" href="#">

shared/components/cards/UserCardBig.astro

@@ -1,6 +1,7 @@
 ---
 import Avatar from '@ui/Avatar.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Person {
   full_name?: string
@@ -14,7 +15,7 @@ interface Props {
 }
 
 const { personId = 0 } = Astro.props
-const person = (people as Person[])[personId]
+const person = requireIndex(people as Person[], personId)
 ---
 
 <div class="card">

shared/components/cards/UserInfo.astro

@@ -3,6 +3,7 @@
 import Icon from '@ui/Icon.astro'
 import Flag from '@ui/Flag.astro'
 import people from '@data/people.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Person {
   university?: string
@@ -21,7 +22,7 @@ interface Props {
 }
 
 const { title = 'Basic info', personId = 25 } = Astro.props
-const person = (people as Person[])[personId - 1]
+const person = requireIndex(people as Person[], personId - 1)
 ---
 
 <div class="card">

shared/components/cards/UsersList2.astro

@@ -3,6 +3,7 @@ import Avatar from '@ui/Avatar.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import people from '@data/people.json'
 import { randomNumber, timeagoLabel } from '@shared/lib/pseudo-random'
+import { requireIndex } from '@shared/lib/array'
 
 interface Person {
   full_name?: string
@@ -19,12 +20,12 @@ interface Props {
 
 const { limit = 10, offset = 0, title = 'Top users', class: className } = Astro.props
 
-const colors = 'green,red,yellow,x,x'.split(',')
-const statusLabels: Record<string, string> = { green: 'Online', red: 'Busy', yellow: 'Away', x: 'Offline' }
+const colors = ['green', 'red', 'yellow', 'x', 'x'] as const
+const statusLabels: Record<(typeof colors)[number], string> = { green: 'Online', red: 'Busy', yellow: 'Away', x: 'Offline' }
 
 const rows = (people as Person[]).slice(offset, offset + limit).map((person, idx) => {
   const index = idx + 1 // forloop.index (1-based)
-  const status = colors[randomNumber(index + 5, 0, colors.length - 1)]
+  const status = requireIndex(colors, randomNumber(index + 5, 0, colors.length - 1))
   return {
     person,
     status: status !== 'x' ? status : 'secondary',

shared/components/cards/music/TrackInfo.astro

@@ -1,5 +1,6 @@
 ---
 import tracks from '@data/tracks.json'
+import { requireIndex } from '@shared/lib/array'
 
 interface Props {
   trackId?: number
@@ -7,13 +8,14 @@ interface Props {
 
 const { trackId = 5 } = Astro.props
 
-const track = tracks[trackId]
+const track = requireIndex(tracks, trackId)
+const trackImage = requireIndex(track.album.images, 1)
 ---
 
 <div class="card">
   <div class="row row-0">
     <div class="col-auto">
-      <img src={`./static/tracks/${track.album.images[1].path}`} class="rounded-start" alt={track.name} width="80" height="80" />
+      <img src={`./static/tracks/${trackImage.path}`} class="rounded-start" alt={track.name} width="80" height="80" />
     </div>
     <div class="col">
       <div class="card-body">

shared/components/cards/music/TracksList.astro

@@ -6,6 +6,7 @@ import ListGroup from '@ui/ListGroup.astro'
 import ListGroupItem from '@ui/ListGroupItem.astro'
 import tracks from '@data/tracks.json'
 import { millisecondsToMinutes } from '@shared/lib/string-format'
+import { requireIndex } from '@shared/lib/array'
 
 const items = tracks.slice(0, 12)
 ---
@@ -18,7 +19,7 @@ const items = tracks.slice(0, 12)
           <div class="row g-2 align-items-center">
             <div class="col-auto fs-3">{index + 1}</div>
             <div class="col-auto">
-              <img src={`./static/tracks/${track.album.images[1].path}`} class="rounded" alt={track.name} width="40" height="40" />
+              <img src={`./static/tracks/${requireIndex(track.album.images, 1).path}`} class="rounded" alt={track.name} width="40" height="40" />
             </div>
             <div class="col">
               {track.name}