@repobit/dex-system-design 0.23.95 → 0.23.96

package/src/blog/src/content/blog-atoms-showcase.js

@@ -0,0 +1,401 @@
+import { css, html } from 'lit';
+import { fbiCryptoScamArticle } from '../articles/fbi-crypto-scam.js';
+import '../atoms/blog-authors.js';
+import '../atoms/blog-avatar.js';
+import '../atoms/blog-blockquote.js';
+import '../atoms/blog-caption.js';
+import '../atoms/blog-code-block.js';
+import '../atoms/blog-dek.js';
+import '../atoms/blog-featured-image.js';
+import '../atoms/blog-image.js';
+import '../atoms/blog-key-takeaways.js';
+import '../atoms/blog-link.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-articles.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 {
+  relatedArticles,
+  relatedArticlesThree
+} from '../data/related-articles.js';
+import { assignSubheadAnchors, buildTocItems } from '../lib/article-toc.js';
+
+const sample = fbiCryptoScamArticle;
+
+/**
+ * Token → atom exercise showcase.
+ * Each row shows the atom rendered with existing tokens only.
+ */
+export class BlogAtomsShowcase extends BlogElement {
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+        background: var(--color-surface-subtle);
+        border-bottom: var(--border-width-1) solid var(--color-border-subtle);
+      }
+
+      .showcase {
+        max-width: var(--layout-article-max-width);
+        margin: 0 auto;
+        padding: var(--spacing-48) var(--spacing-24);
+      }
+
+      .showcase-header {
+        margin-bottom: var(--spacing-48);
+      }
+
+      .showcase-header h2 {
+        margin: 0 0 var(--spacing-8);
+        font-family: var(--typography-heading-h2-fontFamily);
+        font-size: var(--typography-heading-h2-fontSize);
+        font-weight: var(--typography-heading-h2-fontWeight);
+        color: var(--color-text-primary);
+      }
+
+      .showcase-header p {
+        margin: 0;
+        font-size: var(--typography-fontSize-sm);
+        color: var(--color-text-secondary);
+        max-width: var(--blog-prose-max-width);
+      }
+
+      .grid {
+        display: grid;
+        gap: var(--spacing-32);
+      }
+
+      .specimen {
+        padding: var(--spacing-24);
+        background: var(--color-surface);
+        border: var(--border-width-1) solid var(--color-border-subtle);
+        border-radius: var(--radius-lg);
+      }
+
+      .specimen__label {
+        margin: 0 0 var(--spacing-4);
+        font-family: var(--typography-fontFamily-mono);
+        font-size: var(--typography-fontSize-xs);
+        font-weight: var(--typography-fontWeight-semibold);
+        color: var(--color-orange-700);
+        text-transform: uppercase;
+        letter-spacing: var(--typography-letterSpacing-wider);
+      }
+
+      .specimen__tokens {
+        margin: 0 0 var(--spacing-16);
+        font-family: var(--typography-fontFamily-mono);
+        font-size: var(--typography-fontSize-xxs);
+        color: var(--color-text-muted);
+        line-height: var(--typography-lineHeight-relaxed);
+      }
+
+      .specimen__preview {
+        padding: var(--spacing-16);
+        background: var(--color-surface-subtle);
+        border-radius: var(--radius-md);
+      }
+
+      .specimen__preview--row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--blog-byline-gap);
+      }
+
+      .specimen__preview--tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--blog-tag-gap);
+      }
+
+      .specimen__preview--related {
+        padding: 0;
+        background: transparent;
+      }
+
+      .specimen__preview--sidebar {
+        // max-width: 24.5rem;
+        padding: 0;
+        background: transparent;
+      }
+    `
+  ];
+
+  _specimen(label, tokens, preview) {
+    return html`
+      <div class="specimen">
+        <p class="specimen__label">${label}</p>
+        <p class="specimen__tokens">${tokens}</p>
+        <div class="specimen__preview">${preview}</div>
+      </div>
+    `;
+  }
+
+  render() {
+    const { meta, document: doc } = sample;
+    const { title, abstract, blocks } = doc;
+    const subhead = blocks.find(
+      (b) => b.type === 'subhead' && b.text === 'How the scam works'
+    );
+    const relatedLabel = blocks.find((b) => b.type === 'related-label') ?? {
+      text: 'You may also want to read:'
+    };
+    const takeaways = blocks.find((b) => b.type === 'takeaways');
+    const relatedStandout = blocks.find((b) => b.type === 'standout') ?? {
+      text: 'Related article headline example',
+      href: 'https://example.com/related-article'
+    };
+    const quote = blocks.find((b) => b.type === 'quote');
+    const tocItems = buildTocItems(assignSubheadAnchors(blocks));
+
+    return html`
+      <section class="showcase">
+        <header class="showcase-header">
+          <h2>Atoms × existing tokens</h2>
+          <p>
+            Each specimen uses only tokens already defined in
+            <code>tokens/core.js</code> and <code>tokens/blog.js</code> — no
+            new values added for this exercise.
+          </p>
+        </header>
+
+        <div class="grid">
+          ${this._specimen(
+            'blog-tag (brand — article + authors)',
+            '--blog-tag-brand-background · --color-blue-100 · --blog-tag-brand-color · --color-blue-800 · --typography-label-default-* · --dimension-20px · --spacing-8 gap',
+            html`<div class="specimen__preview--tags">
+              ${meta.tags.map(
+                (tag) => html`
+                  <blog-tag label=${tag.label} variant="brand"></blog-tag>
+                `
+              )}
+            </div>`
+          )}
+
+          ${this._specimen(
+            'blog-avatar',
+            '--blog-byline-avatar-size · --radius-full · --color-blue-50 · --color-blue-700 · --blog-byline-fontSize · --typography-fontWeight-semibold',
+            html`<blog-avatar initials=${meta.byline.initials}></blog-avatar>`
+          )}
+
+          ${this._specimen(
+            'blog-meta (author)',
+            '--blog-byline-fontSize · --typography-fontWeight-medium · --color-text-primary',
+            html`<blog-meta type="author" value=${meta.byline.author}></blog-meta>`
+          )}
+
+          ${this._specimen(
+            'blog-meta (date)',
+            '--blog-byline-fontSize · --blog-meta-fontWeight · --blog-date-color',
+            html`<blog-meta
+              type="date"
+              value=${meta.byline.date}
+              datetime=${meta.byline.datetime}
+            ></blog-meta>`
+          )}
+
+          ${this._specimen(
+            'blog-meta (reading-time)',
+            '--blog-byline-fontSize · --blog-meta-fontWeight · --blog-reading-time-color',
+            html`<blog-meta
+              type="reading-time"
+              value=${meta.byline.readingTime}
+            ></blog-meta>`
+          )}
+
+          ${this._specimen(
+            'blog-meta (updated)',
+            '--blog-byline-fontSize · --blog-meta-fontWeight · --blog-date-color · "Updated" prefix',
+            html`<blog-meta
+              type="updated"
+              value=${meta.byline.updated}
+              datetime=${meta.byline.updatedDatetime}
+            ></blog-meta>`
+          )}
+
+          ${this._specimen(
+            'article-meta row',
+            'Publication date · reading time · last update — hero first row',
+            html`<div class="specimen__preview--row">
+              <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>`
+          )}
+
+          ${this._specimen(
+            'blog-meta (separator)',
+            '--blog-meta-separator-fontSize · 16px · --blog-meta-separator-color · --color-text-muted · semibold',
+            html`<blog-meta type="separator"></blog-meta>`
+          )}
+
+          ${this._specimen(
+            'blog-title',
+            '--blog-hero-title-fontFamily · --blog-hero-title-fontSize · --blog-hero-title-fontWeight · --blog-hero-title-lineHeight · --blog-hero-title-color · --typography-display-md-letterSpacing',
+            html`<blog-title>${title}</blog-title>`
+          )}
+
+          ${this._specimen(
+            'blog-authors',
+            '--blog-authors-label-* · --blog-tag-brand-* · flex-wrap pills',
+            html`<blog-authors .authors=${meta.authors}></blog-authors>`
+          )}
+
+          ${this._specimen(
+            'blog-abstract',
+            '--blog-hero-abstract-border-* · --blog-prose-color · --typography-body-lead-* · regular (not italic)',
+            html`<blog-abstract .paragraphs=${abstract}></blog-abstract>`
+          )}
+
+          ${this._specimen(
+            'blog-subhead (Word section labels)',
+            '--blog-prose-subhead-* · 24px condensed semibold · parser: bold lines in body (not H2)',
+            html`<blog-subhead>${subhead.text}</blog-subhead>`
+          )}
+
+          ${this._specimen(
+            'blog-key-takeaways',
+            '--blog-takeaways-padding-inline · --spacing-24 · header --spacing-20/--spacing-12 · body --spacing-16/--spacing-24 · item-gap --spacing-12 · list-indent --spacing-16',
+            html`<blog-key-takeaways
+              title=${takeaways.title}
+              .items=${takeaways.items}
+            ></blog-key-takeaways>`
+          )}
+
+          ${this._specimen(
+            'blog-table-of-contents',
+            '--blog-takeaways-title-* · --blog-takeaways-header/divider padding · title: Contents · auto-built from subheads',
+            html`<blog-table-of-contents .items=${tocItems}></blog-table-of-contents>`
+          )}
+
+          ${this._specimen(
+            'blog-table-of-contents (collapsible)',
+            'mobile inline TOC · collapsed by default · + expands anchor list',
+            html`<blog-table-of-contents collapsible .items=${tocItems}></blog-table-of-contents>`
+          )}
+
+          ${this._specimen(
+            'blog-product-upsell',
+            '--blog-card-* · --blog-newsletter-* · --blog-takeaways-title-* · --button-size-small-* · --button-primary-* · --button-shared-*',
+            html`<blog-product-upsell></blog-product-upsell>`
+          )}
+
+          ${this._specimen(
+            'blog-report-promo',
+            '--blog-card-* · --blog-newsletter-* · --blog-takeaways-title-* · --button-cta-* · --button-size-small-*',
+            html`<div class="specimen__preview--sidebar"><blog-report-promo></blog-report-promo></div>`
+          )}
+
+          ${this._specimen(
+            'blog-related-label',
+            '--blog-related-label-fontSize · italic · colon-ended intro before related links',
+            html`<blog-related-label>${relatedLabel.text}</blog-related-label>`
+          )}
+
+          ${this._specimen(
+            'blog-standout (related links)',
+            '--typography-fontSize-xl · --typography-fontWeight-bold · italic — Word bold+italic paragraphs',
+            html`<blog-standout href=${relatedStandout.href}
+              >${relatedStandout.text}</blog-standout
+            >`
+          )}
+
+          ${this._specimen(
+            'blog-featured-image (hero cover)',
+            '--blog-hero-featured-borderRadius · --radius-2xl · --blog-hero-featured-aspect-ratio · 16/9',
+            html`<blog-featured-image
+              src=${meta.featuredImage}
+              alt=${meta.featuredImageAlt}
+            ></blog-featured-image>`
+          )}
+
+          ${this._specimen(
+            'blog-image (inline content)',
+            '--blog-content-image-borderRadius · --blog-content-image-background · natural aspect ratio',
+            html`<figure>
+              <blog-image
+                src="../assets/articles/fbi-crypto-scam-1.jpeg"
+                alt="Social media scam statistics"
+              ></blog-image>
+              <blog-caption>Screenshot or supporting visual in article body</blog-caption>
+            </figure>`
+          )}
+
+          ${this._specimen(
+            'blog-code-block (PrismJS)',
+            '--blog-code-block-background · --color-neutral-50 · --blog-code-block-fontFamily · mono · --radius-2xl · vendor/prism/prism.js',
+            html`<blog-code-block
+              language="javascript"
+              caption="Example: flag a suspicious investment URL before opening it"
+              code=${`const suspiciousUrl = 'https://fake-crypto-platform.example/invest';
+
+if (/^(https?:\\/\\/)?[\\w.-]+\\.(xyz|top|click)$/i.test(suspiciousUrl)) {
+  console.warn('Unverified domain — treat as a potential scam.');
+}`}
+            ></blog-code-block>`
+          )}
+
+          ${this._specimen(
+            'blog-blockquote (Word quote pattern)',
+            '--blog-quote-* tokens · intro paragraph + blockquote · parser merges “…” lines after labels ending with :',
+            html`${quote.intro
+              ? html`<blog-paragraph>${quote.intro}</blog-paragraph>`
+              : null}<blog-blockquote>${quote.text}</blog-blockquote>`
+          )}
+
+          ${this._specimen(
+            'blog-related-articles (4 cards — full width)',
+            'desktop: meta → title → excerpt · mobile: 2:1 image, no excerpt, 2 cards + See all',
+            html`<div class="specimen__preview--related">
+              <blog-related-articles
+                .items=${relatedArticles}
+              ></blog-related-articles>
+            </div>`
+          )}
+
+          ${this._specimen(
+            'blog-related-articles (3 cards — page default)',
+            'page default · lg+ 12-col grid · mobile: compact cards with dividers',
+            html`<div class="specimen__preview--related">
+              <blog-related-articles
+                .items=${relatedArticlesThree}
+              ></blog-related-articles>
+            </div>`
+          )}
+
+          ${this._specimen(
+            'blog-newsletter-signup',
+            '--blog-newsletter-* · italic heading emphasis · description · privacy disclaimer · envelope icon · presentational form',
+            html`<blog-newsletter-signup></blog-newsletter-signup>`
+          )}
+        </div>
+      </section>
+    `;
+  }
+}
+
+customElements.define('blog-atoms-showcase', BlogAtomsShowcase);

package/src/blog/src/content/blog-page-layout.js

@@ -0,0 +1,73 @@
+import { css, html, unsafeCSS } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import '../atoms/blog-related-articles.js';
+import { relatedArticlesThree } from '../data/related-articles.js';
+import { minWidth } from '../breakpoints.js';
+
+/**
+ * Page shell — article (3/4 + 1/4 layout inside blog-article) + Related articles below.
+ */
+export class BlogPageLayout extends BlogElement {
+  static properties = {
+    relatedItems: { type: Array },
+  };
+
+  constructor() {
+    super();
+    this.relatedItems = relatedArticlesThree;
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .page-layout {
+        max-width: var(--layout-page-max-width);
+        margin: 0 auto;
+        padding: var(--blog-hero-padding);
+        padding-top: var(--spacing-48);
+      }
+
+      .page-layout__main {
+        min-width: 0;
+      }
+
+      .page-layout__related {
+        margin-top: var(--spacing-48);
+      }
+
+      ${unsafeCSS(minWidth('lg'))} {
+        .page-layout__related {
+          margin-top: var(--spacing-64);
+        }
+      }
+    `,
+  ];
+
+  _relatedLayoutClass() {
+    const count = Math.min(this.relatedItems.length, 4);
+    return count >= 3 ? 'page-layout__related--full' : 'page-layout__related--main';
+  }
+
+  render() {
+    return html`
+      <div class="page-layout">
+        <div class="page-layout__main">
+          <slot></slot>
+        </div>
+        <div
+          class="page-layout__related ${this._relatedLayoutClass()}"
+        >
+          <blog-related-articles
+            .items=${this.relatedItems}
+          ></blog-related-articles>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('blog-page-layout', BlogPageLayout);

package/src/blog/src/content/blog-pages.stories.js

@@ -0,0 +1,101 @@
+import { html } from 'lit';
+import '../atoms/blog-abstract.js';
+import '../atoms/blog-authors.js';
+import '../atoms/blog-avatar.js';
+import '../atoms/blog-blockquote.js';
+import '../atoms/blog-caption.js';
+import '../atoms/blog-code-block.js';
+import '../atoms/blog-dek.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-link.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-articles.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 '../shell/blog-shell.js';
+import './blog-article.js';
+import './blog-atoms-showcase.js';
+import './blog-page-layout.js';
+
+export default {
+  title     : 'Blog/Pages',
+  tags      : ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs  : {
+      description: {
+        component: 'Full blog page compositions — article layout, atoms showcase, and page shell.'
+      }
+    }
+  }
+};
+
+// ─── Article Page ──────────────────────────────────────────────────────────────
+
+export const ArticlePage = {
+  name  : 'Article Page',
+  render: () => html`
+    <blog-shell>
+      <blog-page-layout>
+        <blog-article></blog-article>
+      </blog-page-layout>
+    </blog-shell>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full article page — `blog-shell` wraps `blog-page-layout` which contains `blog-article`. Includes related articles below the article body.'
+      }
+    }
+  }
+};
+
+// ─── Atoms Showcase ───────────────────────────────────────────────────────────
+
+export const AtomsShowcase = {
+  name  : 'Atoms Showcase',
+  render: () => html`
+    <blog-shell>
+      <blog-atoms-showcase></blog-atoms-showcase>
+    </blog-shell>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full atoms showcase page — all blog components rendered in a single scrollable page inside `blog-shell`.'
+      }
+    }
+  }
+};
+
+// ─── Full Page (original index.html) ──────────────────────────────────────────
+
+export const FullPage = {
+  name  : 'Full Page — index.html',
+  render: () => html`
+    <blog-shell>
+      <blog-atoms-showcase></blog-atoms-showcase>
+      <blog-page-layout>
+        <blog-article></blog-article>
+      </blog-page-layout>
+    </blog-shell>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Replica exactă a `index.html` original — atoms showcase urmat de article page layout.'
+      }
+    }
+  }
+};

package/src/blog/src/content/render-inline-content.js

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+import '../atoms/blog-link.js';
+
+/** @param {Array<{ type: 'text' | 'link', text: string, href?: string }>} content */
+export function renderInlineContent(content) {
+  if (!content?.length) {
+    return null;
+  }
+
+  return content.map((segment) => {
+    if (segment.type === 'link' && segment.href) {
+      return html`<blog-link inline href=${segment.href}
+        >${segment.text}</blog-link
+      >`;
+    }
+    return segment.text;
+  });
+}

package/src/blog/src/data/popular-articles.js

@@ -0,0 +1,43 @@
+/** Sample “Most Popular” sidebar items — replace with CMS data later. */
+export const popularArticles = [
+  {
+    title   : 'How bail bond scams are using AI to target families',
+    href    : '#',
+    date    : '6 Jun 2024',
+    datetime: '2024-06-06',
+    image   : '/articles/fbi-crypto-scam-cover.png',
+    imageAlt: 'Handcuffs on a dark surface'
+  },
+  {
+    title   : 'How to spot phishing emails before they reach your inbox',
+    href    : '#',
+    date    : '12 May 2024',
+    datetime: '2024-05-12',
+    image   : '/articles/fbi-crypto-scam-1.jpeg',
+    imageAlt: 'Phishing scam illustration'
+  },
+  {
+    title   : 'Ransomware in 2026: what changed and what stayed the same',
+    href    : '#',
+    date    : '28 Apr 2024',
+    datetime: '2024-04-28',
+    image   : '/articles/fbi-crypto-scam-cover.png',
+    imageAlt: 'Ransomware security concept'
+  },
+  {
+    title   : 'Why your router is the weakest link in home security',
+    href    : '#',
+    date    : '15 Mar 2024',
+    datetime: '2024-03-15',
+    image   : '/articles/fbi-crypto-scam-1.jpeg',
+    imageAlt: 'Home router on a desk'
+  },
+  {
+    title   : 'Deepfake scams are targeting video calls — here is what to watch for',
+    href    : '#',
+    date    : '2 Feb 2024',
+    datetime: '2024-02-02',
+    image   : '/articles/fbi-crypto-scam-cover.png',
+    imageAlt: 'Video call on a laptop screen'
+  }
+];

package/src/blog/src/data/related-articles.js

@@ -0,0 +1,58 @@
+/** Sample related articles — replace with CMS / recommendation data later. */
+
+const relatedArticleBase = [
+  {
+    title    : 'How bail bond scams are using AI to target families',
+    href     : '#',
+    principle: 'Scams',
+    excerpt:
+      'Scammers are impersonating relatives in distress with voice-cloned calls and urgent wire requests.',
+    date       : '6 Jun 2024',
+    datetime   : '2024-06-06',
+    readingTime: '5 min read',
+    image      : '/articles/fbi-crypto-scam-cover.png',
+    imageAlt   : 'Handcuffs on a dark surface'
+  },
+  {
+    title    : 'How to spot phishing emails before they reach your inbox',
+    href     : '#',
+    principle: 'Phishing',
+    excerpt:
+      'Red flags in sender addresses, links, and attachments that security teams watch for every day.',
+    date       : '12 May 2024',
+    datetime   : '2024-05-12',
+    readingTime: '4 min read',
+    image      : '/articles/fbi-crypto-scam-1.jpeg',
+    imageAlt   : 'Phishing scam illustration'
+  },
+  {
+    title    : 'Ransomware in 2026: what changed and what stayed the same',
+    href     : '#',
+    principle: 'Ransomware',
+    excerpt:
+      'Double extortion, faster dwell times, and why backups alone are no longer enough.',
+    date       : '28 Apr 2024',
+    datetime   : '2024-04-28',
+    readingTime: '6 min read',
+    image      : '/articles/fbi-crypto-scam-cover.png',
+    imageAlt   : 'Ransomware security concept'
+  },
+  {
+    title    : 'Why your router is the weakest link in home security',
+    href     : '#',
+    principle: 'Digital Privacy',
+    excerpt:
+      'Default credentials, outdated firmware, and simple steps to harden the gateway to your network.',
+    date       : '15 Mar 2024',
+    datetime   : '2024-03-15',
+    readingTime: '3 min read',
+    image      : '/articles/fbi-crypto-scam-1.jpeg',
+    imageAlt   : 'Home router on a desk'
+  }
+];
+
+/** Default page dataset — four related cards, full-width grid on desktop. */
+export const relatedArticles = relatedArticleBase.slice(0, 4);
+
+/** Three-item fallback — main-column width only when sidebar is present. */
+export const relatedArticlesThree = relatedArticleBase.slice(0, 3);