const productIds = [123, 456, undefined, 789]
const products = productIds
  .map(getProduct)
  .filter((item): item is Product => item !== undefined)

import { v4 as uuidv4 } from 'uuid'

export const useId = () => {
  const prefix = uuidv4()

  const $id = (name: string) => `${prefix}-${name}`

  return { $id }
}

It can work with the crypto module too.

const { length, 0: first, [length - 1]: last } = arr;

.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translate3d(-50%, 0, 0);
}

Or a responsive approach with CSS grid:

.wrapper {
  display: grid;
  grid-template-columns:
    [full-start] 1fr [wrapper-start]
    minmax(0, 70rem) [wrapper-end] 1fr [full-end];

  /* Optional gap */
  column-gap: var(--pad, 1rem);
}

Then

.wrapper > * {
  grid-column: wrapper;
}

.wrapper > .full-width {
  grid-column: full;
}

const currentSection = ref()
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if(entry.intersectionRatio > 0) {
          currentSection.value = entry.target.getAttribute('id')
        }
      })
     document.querySelectorAll('article h2').forEach((section) => {
        observer.observe(section)
     })
})

then add a class to the active currentSection.