Newsletter Bookshelf

<script setup lang="ts">
  import NewsletterBookshelf from '~/components/ui/newsletter-bookshelf/NewsletterBookshelf.vue';
  import type { NewsletterBookshelfItem } from '~/components/ui/newsletter-bookshelf/types';

  const editions: NewsletterBookshelfItem[] = [
    {
      id: 'edition-04',
      title: 'The useful systems issue',
      date: 'JUL 24, 2026',
      href: '/posts/useful-systems',
    },
    {
      id: 'edition-03',
      title: 'A better creative workflow',
      date: 'JUL 17, 2026',
      href: '/posts/creative-workflow',
    },
    {
      id: 'edition-02',
      title: 'Notes on building in public',
      date: 'JUL 10, 2026',
      color: '#efe8d4',
    },
    {
      id: 'edition-01',
      title: 'The small team advantage',
      date: 'JUL 3, 2026',
      color: '#16277a',
    },
  ];

  function onSelect(edition: NewsletterBookshelfItem, index: number) {
    console.log('Selected', edition.id, index);
  }
</script>

<template>
  <NewsletterBookshelf
    :items="editions"
    brand="Studio Notes"
    @select="onSelect"
  />
</template>

Each book's width, height, cloth colour and cover motif come from a seeded hash of its id, so the shelf looks the same on every load. Covers, spines and pages are drawn once into 2D canvases and used as three.js textures.

NewsletterBookshelfItem

• The stage is a focusable region with a visible inset focus ring. Its label names the focused book or the edition count.
• Arrow keys move along the shelf. When a book is focused, they switch to the next or previous book.
• Enter or Space focuses the book nearest the centre, or opens the focused book's link. Escape puts the book back.
• With prefers-reduced-motion: reduce, books snap into place and the focused book does not sway.
• The render loop pauses while the shelf is offscreen. All textures, geometry and the WebGL context are freed on unmount.
• Ported from componentry.fun by Harsh Jadhav.