@internetarchive/collection-browser 4.5.2 → 4.6.0

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/models.ts

@@ -0,0 +1,21 @@
+/**
+ * What type of simplified tile layout to use.
+ *  - `default`: Do not apply any layout simplifications.
+ *  - `stats-only`: Only show the tile stats row, but not text snippets.
+ *  - `snippets-only`: Only show the text snippets row (if snippets exist), but not tile stats.
+ *  - `minimal`: Show neither tile stats nor the text snippets.
+ */
+export type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';
+
+/**
+ * Describes an action button to render on a tile.
+ * Styling is controlled via the CSS custom properties documented in
+ * `src/styles/tile-action-styles.ts`.
+ */
+export interface TileAction {
+  /** Unique identifier for this action, included in the `tileActionClicked` event */
+  id: string;
+
+  /** Visible label text displayed on the button */
+  label: string;
+}

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/overlay/icon-overlay.ts

@@ -0,0 +1,57 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TILE_OVERLAY_ICONS, TileOverlayType } from '../../models';
+
+@customElement('icon-overlay')
+export class IconOverlay extends LitElement {
+  @property({ type: String }) type?: TileOverlayType;
+
+  render() {
+    return html`<div class="icon-overlay">${this.iconTemplate}</div>`;
+  }
+
+  private get iconTemplate(): TemplateResult | typeof nothing {
+    if (!this.type) return nothing;
+    return html`${TILE_OVERLAY_ICONS[this.type] ?? nothing}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        z-index: 2;
+        background-color: rgb(255, 254, 203);
+        display: flex;
+        justify-content: center;
+        border: 1px solid #2c2c2c;
+      }
+
+      .icon-overlay {
+        height: 20px;
+        width: 20px;
+        padding: 2px;
+        padding: 2px;
+      }
+
+      :host(.list-detail) .icon-overlay {
+        height: 20px;
+        width: 20px;
+      }
+      :host(.list-compact) .icon-overlay {
+        height: 15px;
+        width: 15px;
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/overlay/text-overlay.ts

@@ -0,0 +1,79 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import {
+  TILE_OVERLAY_ICONS,
+  TILE_OVERLAY_TEXT,
+  TileOverlayType,
+} from '../../models';
+
+@customElement('text-overlay')
+export class TextOverlay extends LitElement {
+  @property({ type: String }) type?: TileOverlayType;
+
+  render() {
+    return html`
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconTemplate}</div>
+        <p class="text-overlay">${this.textTemplate}</p>
+      </div>
+    `;
+  }
+
+  private get iconTemplate(): TemplateResult | typeof nothing {
+    if (!this.type) return nothing;
+    return html`${TILE_OVERLAY_ICONS[this.type] ?? nothing}`;
+  }
+
+  private get textTemplate(): TemplateResult | typeof nothing {
+    if (!this.type) return nothing;
+    return html`${TILE_OVERLAY_TEXT[this.type] ?? nothing}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        align-items: center;
+        display: flex;
+      }
+
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 50%;
+        transform: translate(0px, -50%);
+        width: auto;
+        height: auto;
+        padding: 5px;
+        background-color: #fffecb;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
+      }
+
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+        text-align: center;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/review-block.ts

@@ -0,0 +1,130 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { favoriteFilledIcon } from '../assets/img/icons/favorite-filled';
+import { favoriteUnfilledIcon } from '../assets/img/icons/favorite-unfilled';
+import { srOnlyStyle } from '../styles/sr-only';
+
+@customElement('review-block')
+export class ReviewBlock extends LitElement {
+  @property({ type: String }) title = '';
+
+  @property({ type: String }) body = '';
+
+  @property({ type: Number }) starRating = 0;
+
+  @property({ type: String }) viewSize = 'desktop';
+
+  render() {
+    if (!this.title && !this.body && !this.starRating) return nothing;
+
+    return html`
+      <div class="review-container">
+        <div class="snippet-view ${this.viewSize}">
+          ${this.starsTemplate}
+          <p class="review-title">${this.title}</p>
+          <p class="review-body">${this.body}</p>
+        </div>
+      </div>
+    `;
+  }
+
+  private get starsTemplate(): TemplateResult | typeof nothing {
+    if (this.starRating <= 0) return nothing;
+
+    const numFilledStars = Math.min(5, this.starRating);
+    const numUnfilledStars = Math.min(5, 5 - this.starRating);
+    return html`
+      <div class="star-rating">
+        <span class="sr-only">${this.starRating} ${msg('out of 5 stars')}</span>
+        ${Array(numFilledStars).fill(this.filledStarTemplate)}
+        ${Array(numUnfilledStars).fill(this.unfilledStarTemplate)}
+      </div>
+    `;
+  }
+
+  private get filledStarTemplate(): TemplateResult {
+    return html`<span aria-hidden="true">${favoriteFilledIcon}</span>`;
+  }
+
+  private get unfilledStarTemplate(): TemplateResult {
+    return html`
+      <span class="unfilled-star" aria-hidden="true">
+        ${favoriteUnfilledIcon}
+      </span>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      srOnlyStyle,
+      css`
+        .review-container {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          width: calc(100% - 10px);
+          border: 1px solid #ccc;
+          margin-top: var(--containerTopMargin, 10px);
+          margin-left: var(--containerLeftMargin, 0px);
+          padding: 5px;
+          box-sizing: border-box;
+        }
+
+        .review-title,
+        .review-body {
+          display: -webkit-box;
+          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+          overflow: hidden;
+          overflow-wrap: break-word;
+          word-break: break-word;
+          -webkit-line-clamp: var(--maxLines, 3);
+          -webkit-box-orient: vertical;
+          margin: 0;
+        }
+
+        .review-title {
+          font-size: 1.4rem;
+          line-height: 2rem;
+          max-height: 6rem;
+        }
+
+        .review-title > a[href] {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        .review-title > a[href]:hover {
+          text-decoration: underline;
+        }
+
+        .review-body {
+          font-size: 1rem;
+          line-height: 1.4rem;
+          max-height: 4.2rem;
+        }
+
+        .star-rating svg {
+          width: 10px;
+          height: 10px;
+        }
+
+        .unfilled-star {
+          fill: #ccc;
+        }
+
+        .list {
+          margin: 0;
+          padding-left: 5px;
+        }
+      `,
+    ];
+  }
+}

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/text-snippet-block.ts

@@ -0,0 +1,132 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { join } from 'lit/directives/join.js';
+
+@customElement('text-snippet-block')
+export class TextSnippetBlock extends LitElement {
+  @property({ type: Array }) snippets?: string[] = [];
+
+  @property({ type: String }) viewSize: string = 'desktop';
+
+  render() {
+    if (!this.snippets?.length) return html`${nothing}`;
+
+    return html`
+      <div class="container">
+        <div class="snippet-view ${this.viewSize}">
+          ${this.ellipsisJoinedSnippets}
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * An array of HTML templates derived from the snippets, with ellipses inserted
+   * at the beginning, end, and between each pair of snippets.
+   */
+  private get ellipsisJoinedSnippets(): TemplateResult {
+    return html`
+      &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;
+    `;
+  }
+
+  /**
+   * Returns an array of HTML span templates containing this item's snippets with all of
+   * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.
+   *
+   * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags
+   * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.
+   *
+   * Note on `<em>` vs. `<mark>`:
+   * The old search page snippets had search keywords demarcated with `<em>` tags.
+   * The `<mark>` tag is semantically more accurate for this use case than `<em>`,
+   * but screen-reader behavior may be different. `<em>` will likely be read in a
+   * different tone, while `<mark>` is often read no differently than ordinary text
+   * in many screen-readers (though there are ways to work around this if needed).
+   */
+  private get snippetTemplates(): TemplateResult[] | undefined {
+    return this.snippets?.map(s => {
+      const matches = s.matchAll(/{{{(.+?)}}}/gs);
+      const templates: TemplateResult[] = [];
+
+      // Convert each match into an HTML template that includes:
+      //  - Everything from the end of the previous match (or the beginning of the
+      //      string) up to the current match, as raw text.
+      //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.
+      let index = 0;
+      for (const match of matches) {
+        if (match.index != null) {
+          templates.push(html`
+            ${s.slice(index, match.index)}
+            <mark>${match[1]}</mark>
+          `);
+          index = match.index + match[0].length;
+        }
+      }
+
+      // Include any text from the last match to the end
+      templates.push(html`${s.slice(index)}`);
+
+      // Squash everything into a single span template
+      return html`<span>${templates}</span>`;
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: calc(100% - 10px);
+        border-left: 5px solid #194880;
+        margin-top: var(--containerTopMargin, 10px);
+        margin-left: var(--containerLeftMargin, 0px);
+        border-radius: 3px;
+        box-sizing: border-box;
+      }
+
+      .snippet-view {
+        display: -webkit-box;
+        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        overflow: hidden;
+        overflow-wrap: break-word;
+        -webkit-line-clamp: var(--maxLines, 3);
+        -webkit-box-orient: vertical;
+        margin-left: 5px;
+      }
+
+      .grid {
+        font-size: 1.2rem;
+        line-height: 1.5rem;
+      }
+
+      .list {
+        margin: 0;
+        padding-left: 15px;
+        font-size: 1.4rem;
+        line-height: 2rem;
+
+        /*
+         * Safari doesn't always respect the line-clamping rules,
+         * so we add this to ensure these fields still get truncated.
+         */
+        max-height: 6rem;
+      }
+
+      mark {
+        /* blue, 20% transparency */
+        background-color: #0000ff33;
+        color: inherit;
+      }
+    `;
+  }
+}