@repobit/dex-system-design 0.23.94 → 0.23.96

package/src/blog/src/content/blog-article.js

@@ -0,0 +1,736 @@
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { fbiCryptoScamArticle } from '../articles/fbi-crypto-scam.js';
+import '../atoms/blog-abstract.js';
+import '../atoms/blog-authors.js';
+import '../atoms/blog-blockquote.js';
+import '../atoms/blog-caption.js';
+import '../atoms/blog-code-block.js';
+import '../atoms/blog-featured-image.js';
+import '../atoms/blog-heading.js';
+import '../atoms/blog-image.js';
+import '../atoms/blog-key-takeaways.js';
+import '../atoms/blog-meta.js';
+import '../atoms/blog-newsletter-signup.js';
+import '../atoms/blog-paragraph.js';
+import '../atoms/blog-product-upsell.js';
+import '../atoms/blog-related-label.js';
+import '../atoms/blog-report-promo.js';
+import '../atoms/blog-standout.js';
+import '../atoms/blog-subhead.js';
+import '../atoms/blog-table-of-contents.js';
+import '../atoms/blog-tag.js';
+import '../atoms/blog-title.js';
+import { BlogElement } from '../base/blog-element.js';
+import { matchesBreakpoint, minWidth } from '../breakpoints.js';
+import {
+  assignSubheadAnchors,
+  buildTocItems,
+  splitBodyAtFirstSubhead
+} from '../lib/article-toc.js';
+import { renderInlineContent } from './render-inline-content.js';
+
+/** @param {string | { text: string, content?: Array<{ type: string, text: string, href?: string }> }} item */
+function renderListItem(item) {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  if (item.content?.some((segment) => segment.type === 'link')) {
+    return renderInlineContent(item.content);
+  }
+
+  return item.text;
+}
+
+/** @param {Array<Record<string, unknown>>} blocks */
+function splitArticleBlocks(blocks) {
+  const relatedIndex = blocks.findIndex((block) => block.type === 'related-label');
+
+  if (relatedIndex === -1) {
+    return { bodyBlocks: blocks, relatedBlocks: [] };
+  }
+
+  return {
+    bodyBlocks   : blocks.slice(0, relatedIndex),
+    relatedBlocks: blocks.slice(relatedIndex)
+  };
+}
+
+/** @param {Record<string, unknown>} block */
+function renderBlock(block) {
+  switch (block.type) {
+    case 'paragraph':
+      return html`<blog-paragraph
+        emphasis=${block.style ?? ''}
+        .content=${block.content ?? []}
+        >${block.content ? '' : block.text}</blog-paragraph
+      >`;
+    case 'heading':
+      return html`<blog-heading level="2">${block.text}</blog-heading>`;
+    case 'subhead':
+      return html`<blog-subhead id=${block.anchorId || nothing}
+        >${block.text}</blog-subhead
+      >`;
+    case 'related-label':
+      return html`<blog-related-label>${block.text}</blog-related-label>`;
+    case 'quote':
+      return html`${block.intro
+        ? html`<blog-paragraph>${block.intro}</blog-paragraph>`
+        : null}<blog-blockquote>${block.text}</blog-blockquote>`;
+    case 'code':
+      return html`<blog-code-block
+        language=${block.language ?? 'javascript'}
+        code=${block.code ?? ''}
+        caption=${block.caption ?? ''}
+      ></blog-code-block>`;
+    case 'takeaways':
+      return html`<blog-key-takeaways
+        title=${block.title}
+        .items=${block.items}
+      ></blog-key-takeaways>`;
+    case 'list':
+      return html`<ul>
+        ${block.items.map((item) => html`<li>${renderListItem(item)}</li>`)}
+      </ul>`;
+    case 'standout':
+      return html`<blog-standout
+        href=${block.href ?? ''}
+        .content=${block.content ?? []}
+        >${block.content ? '' : block.text}</blog-standout
+      >`;
+    case 'image':
+      return html`<figure class="article-figure">
+        <blog-image src=${block.src} alt=${block.alt ?? ''}></blog-image>
+        ${block.caption
+          ? html`<blog-caption>${block.caption}</blog-caption>`
+          : null}
+      </figure>`;
+    default:
+      return null;
+  }
+}
+
+/** Full article — content structure parsed from Word, styled with atoms. */
+export class BlogArticle extends BlogElement {
+  static properties = {
+    article: { type: Object }
+  };
+
+  constructor() {
+    super();
+    this.article = fbiCryptoScamArticle;
+    /** @type {(() => void) | null} */
+    this._onWindowResize = null;
+    /** @type {ResizeObserver | null} */
+    this._sidebarLayoutObserver = null;
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .article {
+        max-width: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      .article-body,
+      .article-related {
+        width: 100%;
+      }
+
+      .article-toc--inline {
+        margin: 0 0 var(--blog-prose-paragraph-spacing);
+      }
+
+      .article-layout {
+        display: block;
+      }
+
+      .article-sidebar {
+        display: none;
+      }
+
+      .article-hero__authors--mobile {
+        display: block;
+      }
+
+      ${unsafeCSS(minWidth('lg'))} {
+        .article-layout {
+          display: grid;
+          grid-template-columns:
+            minmax(0, var(--layout-page-main-ratio))
+            minmax(0, var(--layout-page-sidebar-ratio));
+          gap: var(--layout-page-gap);
+          align-items: start;
+        }
+
+        .article-layout__hero-main {
+          grid-column: 1;
+          grid-row: 1;
+          min-width: 0;
+        }
+
+        .article-layout__preamble {
+          grid-column: 1;
+          grid-row: 2;
+          min-width: 0;
+        }
+
+        .article-layout__sections-main,
+        .article-layout__body-fallback {
+          grid-column: 1;
+          grid-row: 3;
+          min-width: 0;
+        }
+
+        .article-layout__newsletter {
+          grid-column: 1;
+          grid-row: 4;
+          min-width: 0;
+        }
+
+        .article-sidebar {
+          display: flex;
+          flex-direction: column;
+          grid-column: 2;
+          grid-row: 1 / 4;
+          align-self: stretch;
+          min-width: 0;
+        }
+
+        .article-sidebar__authors-zone {
+          flex: none;
+          height: var(--sidebar-authors-zone-height, auto);
+        }
+
+        .article-sidebar__authors {
+          position: sticky;
+          top: var(--blog-toc-sticky-offset);
+        }
+
+        .article-sidebar__toc-gap {
+          flex: none;
+          height: var(--sidebar-toc-gap-height, 0px);
+        }
+
+        .article-sidebar__toc {
+          position: sticky;
+          top: var(--blog-toc-sticky-offset);
+          flex: none;
+        }
+
+        .article-toc--inline {
+          display: none;
+        }
+
+        .article-hero__authors--mobile {
+          display: none;
+        }
+      }
+
+      .article-hero {
+        margin-bottom: var(--spacing-24);
+      }
+
+      .article-meta {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--blog-byline-gap);
+        margin-bottom: var(--spacing-16);
+      }
+
+      .article-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--blog-tag-gap);
+        margin-top: var(--spacing-32);
+      }
+
+      .article-divider,
+      .article-hero-divider {
+        margin: var(--spacing-24) 0;
+        border: 0;
+        border-top: var(--blog-hero-divider-width) solid
+          var(--blog-hero-divider-color);
+      }
+
+      .article-hero-divider {
+        margin: 0 0 var(--spacing-24);
+      }
+
+      .article-hero blog-title {
+        margin-bottom: var(--spacing-24);
+      }
+
+      .article-hero blog-authors,
+      .article-hero__authors--mobile {
+        margin-bottom: var(--spacing-24);
+      }
+
+      .article-sidebar blog-authors {
+        margin-bottom: 0;
+      }
+
+      .article-hero blog-abstract {
+        --blog-abstract-spacing-after-last: 0;
+      }
+
+      .article-hero__upsell,
+      .article-hero__featured {
+        margin: var(--blog-hero-abstract-to-featured-gap) 0 0;
+      }
+
+      .article-body,
+      .article-layout__preamble,
+      .article-layout__sections-main,
+      .article-related {
+        width: 100%;
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main, .article-related)
+        :is(
+          blog-paragraph,
+          blog-heading,
+          blog-subhead,
+          blog-related-label,
+          blog-standout,
+          ul,
+          ol
+        ) {
+        max-width: var(--blog-prose-max-width);
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main, .article-related)
+        :is(
+          blog-paragraph,
+          blog-standout,
+          ul,
+          ol,
+          blog-heading,
+          blog-subhead,
+          blog-related-label,
+          blog-blockquote,
+          blog-code-block,
+          .article-figure
+        ) {
+        margin: 0 0 var(--blog-prose-paragraph-spacing);
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        blog-key-takeaways,
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        .article-promo {
+        margin: 0 0 var(--blog-prose-paragraph-spacing);
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        blog-key-takeaways,
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        .article-figure,
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        blog-code-block,
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        .article-promo {
+        display: block;
+        width: 100%;
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        blog-key-takeaways {
+        margin-top: 0;
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        .article-promo {
+        margin-top: 0;
+      }
+
+      .article-newsletter {
+        margin: var(--spacing-32) 0 var(--blog-newsletter-spacing-bottom);
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main)
+        blog-key-takeaways
+        + :is(blog-heading, blog-subhead) {
+        margin-top: var(--blog-prose-subhead-spacing-top);
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main, .article-related)
+        blog-heading {
+        margin-top: var(--blog-prose-heading-spacing-top);
+        margin-bottom: var(--blog-prose-heading-spacing-bottom);
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main, .article-related)
+        blog-subhead {
+        margin-top: var(--blog-prose-subhead-spacing-top);
+        margin-bottom: var(--blog-prose-subhead-spacing-bottom);
+      }
+
+      .article-layout__sections-main blog-subhead:first-child,
+      .article-body blog-subhead:first-child {
+        margin-top: 0;
+      }
+
+      .article-related blog-related-label {
+        margin-top: 0;
+        margin-bottom: var(--spacing-8);
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main, .article-related) ul,
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main, .article-related) ol {
+        padding-left: var(--blog-prose-list-indent);
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-prose-fontSize);
+        line-height: var(--blog-prose-lineHeight);
+        color: var(--blog-prose-color);
+      }
+
+      :is(.article-body, .article-layout__preamble, .article-layout__sections-main, .article-related) li + li {
+        margin-top: var(--blog-prose-list-spacing);
+      }
+
+      ${unsafeCSS(minWidth('lg'))} {
+        .article-hero {
+          margin-bottom: 0;
+        }
+
+        :is(.article-layout__preamble) blog-key-takeaways {
+          margin-bottom: 0;
+        }
+
+        .article-newsletter {
+          margin-top: 0;
+        }
+      }
+    `
+  ];
+
+  getTocItems() {
+    const { blocks } = this.article.document;
+    const { bodyBlocks } = splitArticleBlocks(blocks);
+
+    return buildTocItems(assignSubheadAnchors(bodyBlocks));
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(
+      new CustomEvent('toc-items-changed', {
+        detail  : { items: this.getTocItems() },
+        bubbles : true,
+        composed: true
+      })
+    );
+    this._onWindowResize = () => this._syncSidebarLayout();
+    window.addEventListener('resize', this._onWindowResize);
+    this._sidebarLayoutObserver = new ResizeObserver(() => this._syncSidebarLayout());
+    requestAnimationFrame(() => {
+      this._observeSidebarLayout();
+      this._syncSidebarLayout();
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._onWindowResize) {
+      window.removeEventListener('resize', this._onWindowResize);
+      this._onWindowResize = null;
+    }
+    this._sidebarLayoutObserver?.disconnect();
+    this._sidebarLayoutObserver = null;
+  }
+
+  updated(changed) {
+    if (changed.has('article')) {
+      this.dispatchEvent(
+        new CustomEvent('toc-items-changed', {
+          detail  : { items: this.getTocItems() },
+          bubbles : true,
+          composed: true
+        })
+      );
+    }
+
+    this._observeSidebarLayout();
+    this._syncSidebarLayout();
+  }
+
+  _observeSidebarLayout() {
+    if (!this._sidebarLayoutObserver || !matchesBreakpoint('lg')) {
+      return;
+    }
+
+    const layoutTargets = [
+      this.shadowRoot?.querySelector('.article-layout'),
+      this.shadowRoot?.querySelector('.article-layout__hero-main'),
+      this.shadowRoot?.querySelector('.article-layout__preamble'),
+      this.shadowRoot?.querySelector('.article-layout__sections-main')
+    ].filter(Boolean);
+
+    for (const target of layoutTargets) {
+      this._sidebarLayoutObserver.observe(target);
+    }
+  }
+
+  /** Size sidebar zones so authors scroll away at Key Takeaways and TOC aligns with the first subhead. */
+  _syncSidebarLayout() {
+    if (!matchesBreakpoint('lg')) {
+      return;
+    }
+
+    const sidebar = this.shadowRoot?.querySelector('.article-sidebar');
+    const takeaways = this.shadowRoot?.querySelector(
+      '.article-layout__preamble blog-key-takeaways'
+    );
+    const firstSubhead = this.shadowRoot?.querySelector(
+      '.article-layout__sections-main blog-subhead'
+    );
+
+    if (!sidebar) {
+      return;
+    }
+
+    const scrollY = window.scrollY;
+    const sidebarTop = sidebar.getBoundingClientRect().top + scrollY;
+
+    if (!firstSubhead) {
+      sidebar.style.removeProperty('--sidebar-authors-zone-height');
+      sidebar.style.removeProperty('--sidebar-toc-gap-height');
+      return;
+    }
+
+    const subheadTop = firstSubhead.getBoundingClientRect().top + scrollY;
+
+    if (takeaways) {
+      const takeawaysBottom = takeaways.getBoundingClientRect().bottom + scrollY;
+      sidebar.style.setProperty(
+        '--sidebar-authors-zone-height',
+        `${Math.max(0, takeawaysBottom - sidebarTop)}px`
+      );
+      sidebar.style.setProperty(
+        '--sidebar-toc-gap-height',
+        `${Math.max(0, subheadTop - takeawaysBottom)}px`
+      );
+      return;
+    }
+
+    sidebar.style.setProperty('--sidebar-authors-zone-height', '0px');
+    sidebar.style.setProperty(
+      '--sidebar-toc-gap-height',
+      `${Math.max(0, subheadTop - sidebarTop)}px`
+    );
+  }
+
+  _renderSidebar(meta, tocItems, hasSections) {
+    const hasAuthors = meta.authors.length > 0;
+    const hasToc = tocItems.length > 0 && hasSections;
+
+    if (!hasAuthors && !hasToc) {
+      return null;
+    }
+
+    return html`
+      <aside class="article-sidebar" aria-label="Article sidebar">
+        ${hasAuthors
+          ? html`
+              <div class="article-sidebar__authors-zone">
+                <div class="article-sidebar__authors" aria-label="Authors">
+                  <blog-authors .authors=${meta.authors}></blog-authors>
+                </div>
+              </div>
+            `
+          : nothing}
+        ${hasToc
+          ? html`
+              <div class="article-sidebar__toc-gap" aria-hidden="true"></div>
+              <div class="article-sidebar__toc" aria-label="Table of contents">
+                <blog-table-of-contents .items=${tocItems}></blog-table-of-contents>
+              </div>
+            `
+          : nothing}
+      </aside>
+    `;
+  }
+
+  _renderToc(items, { collapsible = false } = {}) {
+    if (!items.length) {
+      return null;
+    }
+
+    return html`
+      <div class="article-toc article-toc--inline">
+        <blog-table-of-contents
+          ?collapsible=${collapsible}
+          .items=${items}
+        ></blog-table-of-contents>
+      </div>
+    `;
+  }
+
+  _renderAuthors(authors, className = '') {
+    if (!authors.length) {
+      return null;
+    }
+
+    return html`
+      <div class=${className || nothing}>
+        <blog-authors .authors=${authors}></blog-authors>
+      </div>
+    `;
+  }
+
+  _renderBodyBlocks(blocks) {
+    return blocks.map((block) => renderBlock(block));
+  }
+
+  _renderSectionsWithPromo(sections) {
+    const blocks = this._renderBodyBlocks(sections);
+
+    // Inject the promo card after the second subhead
+    let insertIndex = -1;
+    let subheadCount = 0;
+
+    for (let i = 0; i < sections.length; i++) {
+      if (sections[i].type === 'subhead') {
+        subheadCount++;
+        if (subheadCount === 2) {
+          // Insert just before the second subhead
+          insertIndex = i;
+          break;
+        }
+      }
+    }
+
+    const promoHtml = html`
+      <div class="article-promo">
+        <blog-report-promo></blog-report-promo>
+      </div>
+    `;
+
+    if (insertIndex !== -1) {
+      // Insert inline before the target block
+      return [
+        ...blocks.slice(0, insertIndex),
+        promoHtml,
+        ...blocks.slice(insertIndex)
+      ];
+    } else {
+      // Fallback if there are fewer than 2 subheads
+      return [...blocks, promoHtml];
+    }
+  }
+
+  render() {
+    const { meta, document: doc } = this.article;
+    const { title, abstract, blocks } = doc;
+    const { bodyBlocks, relatedBlocks } = splitArticleBlocks(blocks);
+    const anchoredBlocks = assignSubheadAnchors(bodyBlocks);
+    const tocItems = buildTocItems(anchoredBlocks);
+    const { preamble, sections } = splitBodyAtFirstSubhead(anchoredBlocks);
+
+    return html`
+      <article class="article">
+        <div class="article-layout">
+          <header class="article-hero article-layout__hero-main">
+            <div class="article-meta">
+              <blog-meta
+                type="date"
+                value=${meta.byline.date}
+                datetime=${meta.byline.datetime}
+              ></blog-meta>
+              <blog-meta type="separator"></blog-meta>
+              <blog-meta
+                type="reading-time"
+                value=${meta.byline.readingTime}
+              ></blog-meta>
+              <blog-meta type="separator"></blog-meta>
+              <blog-meta
+                type="updated"
+                value=${meta.byline.updated}
+                datetime=${meta.byline.updatedDatetime}
+              ></blog-meta>
+            </div>
+
+            <blog-title>${title}</blog-title>
+
+            ${this._renderAuthors(meta.authors, 'article-hero__authors--mobile')}
+
+            <hr class="article-hero-divider" />
+
+            <blog-abstract .paragraphs=${abstract}></blog-abstract>
+
+            <div class="article-hero__upsell">
+              <blog-product-upsell></blog-product-upsell>
+            </div>
+
+            <figure class="article-hero__featured">
+              <blog-featured-image
+                src=${meta.featuredImage || ''}
+                alt=${meta.featuredImageAlt || ''}
+              ></blog-featured-image>
+            </figure>
+          </header>
+
+          ${preamble.length
+            ? html`
+                <div class="article-layout__preamble">
+                  ${this._renderBodyBlocks(preamble)}
+                </div>
+              `
+            : nothing}
+
+          ${sections.length && tocItems.length
+            ? this._renderToc(tocItems, { collapsible: true })
+            : nothing}
+
+          ${sections.length
+            ? html`
+                <div class="article-layout__sections-main">
+                  ${this._renderSectionsWithPromo(sections)}
+                </div>
+              `
+            : html`
+                <div class="article-body article-layout__body-fallback">
+                  ${this._renderBodyBlocks(anchoredBlocks)}
+                  ${!sections.length && tocItems.length
+                    ? this._renderToc(tocItems, { collapsible: true })
+                    : nothing}
+                </div>
+              `}
+
+          ${this._renderSidebar(meta, tocItems, sections.length > 0)}
+
+          <div class="article-newsletter article-layout__newsletter">
+            <blog-newsletter-signup></blog-newsletter-signup>
+          </div>
+        </div>
+
+        <footer class="article-tags">
+          ${meta.tags.map(
+            (tag) => html`
+              <blog-tag label=${tag.label} variant="brand"></blog-tag>
+            `
+          )}
+        </footer>
+
+        ${relatedBlocks.length
+          ? html`
+              <hr class="article-divider" />
+              <aside class="article-related">
+                ${relatedBlocks.map((block) => renderBlock(block))}
+              </aside>
+            `
+          : null}
+      </article>
+    `;
+  }
+}
+
+customElements.define('blog-article', BlogArticle);