@repobit/dex-system-design 0.23.95 → 0.23.96

package/src/blog/src/atoms/blog-blockquote.js

@@ -0,0 +1,92 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/**
+ * Body quote — soft blue panel with oversized opening mark.
+ * Hero abstract keeps the left accent bar; this is a distinct treatment.
+ *
+ * @attr {string} cite — Optional attribution (renders footer when set)
+ */
+export class BlogBlockquote extends BlogElement {
+  static properties = {
+    cite: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.cite = '';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      blockquote {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        column-gap: var(--blog-quote-mark-gap);
+        align-items: start;
+        margin: 0;
+        padding: var(--blog-quote-padding-block)
+          var(--blog-quote-padding-inline);
+        padding-left: var(--blog-quote-padding-inline-start);
+        background: var(--blog-quote-background);
+        border-radius: var(--blog-quote-borderRadius);
+      }
+
+      .quote__mark {
+        font-family: var(--blog-quote-mark-fontFamily);
+        font-size: var(--blog-quote-mark-fontSize);
+        font-weight: var(--blog-quote-mark-fontWeight);
+        font-style: normal;
+        line-height: var(--blog-quote-mark-lineHeight);
+        color: var(--blog-quote-mark-color);
+        margin-top: var(--blog-quote-mark-offset-top);
+        pointer-events: none;
+        user-select: none;
+      }
+
+      .quote__body {
+        min-width: 0;
+      }
+
+      .quote__text {
+        margin: 0;
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-quote-fontSize);
+        font-weight: var(--typography-fontWeight-normal);
+        font-style: var(--blog-quote-fontStyle);
+        line-height: var(--blog-quote-lineHeight);
+        color: var(--blog-quote-color);
+      }
+
+      footer {
+        margin-top: var(--spacing-12);
+        font-size: var(--blog-quote-attribution-fontSize);
+        font-weight: var(--typography-fontWeight-normal);
+        font-style: normal;
+        line-height: var(--typography-lineHeight-normal);
+        color: var(--blog-quote-attribution-color);
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <blockquote part="blockquote">
+        <span class="quote__mark" aria-hidden="true">&ldquo;</span>
+        <div class="quote__body">
+          <p class="quote__text" part="quote-text"><slot></slot></p>
+          ${this.cite
+            ? html`<footer part="attribution">&mdash; ${this.cite}</footer>`
+            : null}
+        </div>
+      </blockquote>
+    `;
+  }
+}
+
+customElements.define('blog-blockquote', BlogBlockquote);

package/src/blog/src/atoms/blog-caption.js

@@ -0,0 +1,31 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/** Image / figure caption */
+export class BlogCaption extends BlogElement {
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      figcaption {
+        margin: 0;
+        padding-top: var(--spacing-12);
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--typography-caption-default-fontSize);
+        font-weight: var(--typography-caption-default-fontWeight);
+        line-height: var(--typography-caption-default-lineHeight);
+        color: var(--color-text-muted);
+        text-align: center;
+      }
+    `
+  ];
+
+  render() {
+    return html`<figcaption part="caption"><slot></slot></figcaption>`;
+  }
+}
+
+customElements.define('blog-caption', BlogCaption);

package/src/blog/src/atoms/blog-code-block.js

@@ -0,0 +1,89 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+import { loadPrism } from '../lib/load-prism.js';
+import { prismTheme } from '../styles/prism-theme.js';
+import './blog-caption.js';
+
+/**
+ * Syntax-highlighted code block — PrismJS, monochrome blog theme.
+ *
+ * @property {string} language — Prism language id (javascript, bash, json, …)
+ * @property {string} code — Source code text
+ * @property {string} caption — Optional label below the block
+ */
+export class BlogCodeBlock extends BlogElement {
+  static properties = {
+    language: { type: String },
+    code    : { type: String },
+    caption : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.language = 'javascript';
+    this.code = '';
+    this.caption = '';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    prismTheme,
+    css`
+      :host {
+        display: block;
+      }
+
+      figure {
+        margin: 0;
+      }
+
+      blog-caption {
+        display: block;
+        margin-top: var(--spacing-8);
+      }
+    `
+  ];
+
+  async firstUpdated() {
+    await this.highlight();
+  }
+
+  async updated(changed) {
+    if (changed.has('code') || changed.has('language')) {
+      await this.highlight();
+    }
+  }
+
+  async highlight() {
+    const code = this.renderRoot?.querySelector('code');
+    if (!code || !this.code) {
+      return;
+    }
+
+    code.textContent = this.code;
+    code.className = `language-${this.language}`;
+
+    const pre = code.parentElement;
+    if (pre) {
+      pre.className = `language-${this.language}`;
+    }
+
+    const Prism = await loadPrism();
+    Prism.highlightElement(code);
+  }
+
+  render() {
+    return html`
+      <figure part="figure">
+        <pre part="pre" class="language-${this.language}">
+          <code part="code" class="language-${this.language}">${this.code}</code>
+        </pre>
+        ${this.caption
+          ? html`<blog-caption part="caption">${this.caption}</blog-caption>`
+          : null}
+      </figure>
+    `;
+  }
+}
+
+customElements.define('blog-code-block', BlogCodeBlock);

package/src/blog/src/atoms/blog-dek.js

@@ -0,0 +1,30 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/** Article lead / dek paragraph */
+export class BlogDek extends BlogElement {
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      p {
+        margin: 0;
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-hero-subtitle-fontSize);
+        font-weight: var(--typography-body-lead-fontWeight);
+        font-style: italic;
+        line-height: var(--typography-body-lead-lineHeight);
+        color: var(--blog-hero-subtitle-color);
+      }
+    `
+  ];
+
+  render() {
+    return html`<p part="dek"><slot></slot></p>`;
+  }
+}
+
+customElements.define('blog-dek', BlogDek);

package/src/blog/src/atoms/blog-featured-image.js

@@ -0,0 +1,65 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/**
+ * Article hero featured image — dedicated cover for the entire article.
+ * Fixed 16:9 ratio, empty placeholder when src is missing.
+ *
+ * @attr {string} src
+ * @attr {string} alt
+ */
+export class BlogFeaturedImage extends BlogElement {
+  static properties = {
+    src: { type: String },
+    alt: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.src = '';
+    this.alt = '';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+        border-radius: var(--blog-hero-featured-borderRadius);
+        overflow: hidden;
+        aspect-ratio: var(--blog-hero-featured-aspect-ratio);
+        background: var(--blog-hero-featured-background);
+      }
+
+      img,
+      .placeholder {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      img {
+        object-fit: cover;
+      }
+
+      .placeholder {
+        margin: 0;
+      }
+    `
+  ];
+
+  render() {
+    if (!this.src) {
+      return html`<div
+        class="placeholder"
+        part="placeholder"
+        role="img"
+        aria-label=${this.alt || 'Article featured image'}
+      ></div>`;
+    }
+
+    return html`<img src=${this.src} alt=${this.alt} part="image" />`;
+  }
+}
+
+customElements.define('blog-featured-image', BlogFeaturedImage);

package/src/blog/src/atoms/blog-heading.js

@@ -0,0 +1,63 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/**
+ * Section heading (h2–h4).
+ * @attr {2|3|4} level
+ */
+export class BlogHeading extends BlogElement {
+  static properties = {
+    level: { type: Number, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.level = 2;
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      :is(h2, h3, h4) {
+        margin: 0;
+        font-style: normal;
+        color: var(--color-text-primary);
+      }
+
+      h2 {
+        font-family: var(--typography-heading-h2-fontFamily);
+        font-size: var(--typography-heading-h2-fontSize);
+        font-weight: var(--typography-heading-h2-fontWeight);
+        line-height: var(--typography-heading-h2-lineHeight);
+        letter-spacing: var(--typography-heading-h2-letterSpacing);
+      }
+
+      h3 {
+        font-family: var(--typography-heading-h3-fontFamily);
+        font-size: var(--typography-heading-h3-fontSize);
+        font-weight: var(--typography-heading-h3-fontWeight);
+        line-height: var(--typography-heading-h3-lineHeight);
+        letter-spacing: var(--typography-heading-h3-letterSpacing);
+      }
+
+      h4 {
+        font-family: var(--typography-heading-h4-fontFamily);
+        font-size: var(--typography-heading-h4-fontSize);
+        font-weight: var(--typography-heading-h4-fontWeight);
+        line-height: var(--typography-heading-h4-lineHeight);
+        letter-spacing: var(--typography-heading-h4-letterSpacing);
+      }
+    `
+  ];
+
+  render() {
+    const tag = `h${this.level}`;
+    return html`<${tag} part="heading"><slot></slot></${tag}>`;
+  }
+}
+
+customElements.define('blog-heading', BlogHeading);

package/src/blog/src/atoms/blog-image.js

@@ -0,0 +1,50 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/**
+ * Inline article image — screenshots and supporting visuals in the body.
+ * Uses natural image dimensions (no fixed aspect ratio).
+ *
+ * @attr {string} src
+ * @attr {string} alt
+ */
+export class BlogImage extends BlogElement {
+  static properties = {
+    src: { type: String },
+    alt: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.src = '';
+    this.alt = '';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+        border-radius: var(--blog-content-image-borderRadius);
+        overflow: hidden;
+        background: var(--blog-content-image-background);
+      }
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+    `
+  ];
+
+  render() {
+    if (!this.src) {
+      return null;
+    }
+
+    return html`<img src=${this.src} alt=${this.alt} part="image" />`;
+  }
+}
+
+customElements.define('blog-image', BlogImage);

package/src/blog/src/atoms/blog-key-takeaways.js

@@ -0,0 +1,101 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/**
+ * Key takeaways card — bordered summary block with title + bullet list.
+ *
+ * @property {string} title
+ * @property {string[]} items
+ */
+export class BlogKeyTakeaways extends BlogElement {
+  static properties = {
+    title: { type: String },
+    items: { type: Array }
+  };
+
+  constructor() {
+    super();
+    this.title = 'Key Takeaways';
+    this.items = [];
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .takeaways {
+        border: var(--blog-takeaways-border-width) solid
+          var(--blog-takeaways-border-color);
+        border-radius: var(--blog-takeaways-borderRadius);
+        background: var(--blog-takeaways-background);
+        overflow: hidden;
+      }
+
+      .takeaways__header {
+        padding: var(--blog-takeaways-header-padding-block)
+          var(--blog-takeaways-padding-inline);
+        padding-bottom: var(--blog-takeaways-header-padding-bottom);
+      }
+
+      .takeaways__title {
+        margin: 0;
+        font-family: var(--blog-takeaways-title-fontFamily);
+        font-size: var(--blog-takeaways-title-fontSize);
+        font-weight: var(--blog-takeaways-title-fontWeight);
+        line-height: var(--blog-takeaways-title-lineHeight);
+        color: var(--blog-takeaways-title-color);
+      }
+
+      .takeaways__divider {
+        margin: 0;
+        border: 0;
+        border-top: var(--blog-takeaways-divider-width) solid
+          var(--blog-takeaways-divider-color);
+      }
+
+      .takeaways__list {
+        margin: 0;
+        padding: var(--blog-takeaways-body-padding-top)
+          var(--blog-takeaways-padding-inline)
+          var(--blog-takeaways-body-padding-bottom);
+        padding-left: calc(
+          var(--blog-takeaways-padding-inline) +
+            var(--blog-takeaways-list-indent)
+        );
+        list-style: disc;
+      }
+
+      .takeaways__list li {
+        padding-left: var(--blog-takeaways-bullet-gap);
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-takeaways-item-fontSize);
+        font-weight: var(--blog-takeaways-item-fontWeight);
+        line-height: var(--blog-takeaways-item-lineHeight);
+        color: var(--blog-takeaways-item-color);
+      }
+
+      .takeaways__list li + li {
+        margin-top: var(--blog-takeaways-item-gap);
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <aside class="takeaways" part="takeaways">
+        <header class="takeaways__header">
+          <h2 class="takeaways__title" part="title">${this.title}</h2>
+        </header>
+        <hr class="takeaways__divider" />
+        <ul class="takeaways__list" part="list">
+          ${this.items.map((item) => html`<li part="item">${item}</li>`)}
+        </ul>
+      </aside>
+    `;
+  }
+}
+
+customElements.define('blog-key-takeaways', BlogKeyTakeaways);

package/src/blog/src/atoms/blog-link.js

@@ -0,0 +1,68 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/** Inline or standalone text link */
+export class BlogLink extends BlogElement {
+  static properties = {
+    href  : { type: String },
+    inline: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.href = '#';
+    this.inline = false;
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host([inline]) {
+        display: inline;
+      }
+
+      a {
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--typography-link-standalone-fontSize);
+        font-weight: var(--typography-link-standalone-fontWeight);
+        line-height: var(--typography-link-standalone-lineHeight);
+        color: var(--color-text-link);
+        text-decoration: var(
+          --typography-link-standalone-textDecoration-default
+        );
+      }
+
+      :host([inline]) a {
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        font-style: inherit;
+        color: var(--color-text-link);
+        text-decoration: var(--typography-link-default-textDecoration-default);
+      }
+
+      a:hover {
+        color: var(--color-text-link-hover);
+        text-decoration: var(
+          --typography-link-standalone-textDecoration-hover
+        );
+      }
+
+      :host([inline]) a:hover {
+        text-decoration: var(--typography-link-default-textDecoration-hover);
+      }
+
+      a:focus-visible {
+        outline: var(--focus-outline-traditional);
+        outline-offset: var(--focus-outline-offset);
+      }
+    `
+  ];
+
+  render() {
+    return html`<a href=${this.href} part="link"><slot></slot></a>`;
+  }
+}
+
+customElements.define('blog-link', BlogLink);

package/src/blog/src/atoms/blog-meta.js

@@ -0,0 +1,87 @@
+import { css, html } from 'lit';
+import { BlogElement } from '../base/blog-element.js';
+
+/**
+ * Meta line atom — author, date, reading time, updated, or separator.
+ * @attr {'author'|'date'|'reading-time'|'updated'|'separator'} type
+ * @attr {string} value — Text content (ignored for separator)
+ * @attr {string} datetime — ISO date when type="date" or type="updated"
+ */
+export class BlogMeta extends BlogElement {
+  static properties = {
+    type    : { type: String, reflect: true },
+    value   : { type: String },
+    datetime: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.type = 'author';
+    this.value = '';
+    this.datetime = '';
+  }
+
+  static styles = [
+    ...BlogElement.styles,
+    css`
+      :host {
+        display: inline;
+      }
+
+      .meta {
+        font-family: var(--typography-fontFamily-sans);
+        font-size: var(--blog-byline-fontSize);
+        line-height: var(--typography-lineHeight-normal);
+      }
+
+      :host([type='author']) .meta {
+        font-weight: var(--typography-fontWeight-medium);
+        color: var(--color-text-primary);
+      }
+
+      :host([type='date']) .meta {
+        font-weight: var(--blog-meta-fontWeight);
+        color: var(--blog-date-color);
+      }
+
+      :host([type='reading-time']) .meta {
+        font-weight: var(--blog-meta-fontWeight);
+        color: var(--blog-reading-time-color);
+      }
+
+      :host([type='updated']) .meta {
+        font-weight: var(--blog-meta-fontWeight);
+        color: var(--blog-date-color);
+      }
+
+      :host([type='separator']) .meta {
+        font-size: var(--blog-meta-separator-fontSize);
+        font-weight: var(--blog-meta-separator-fontWeight);
+        color: var(--blog-meta-separator-color);
+        user-select: none;
+      }
+    `
+  ];
+
+  render() {
+    if (this.type === 'separator') {
+      return html`<span class="meta" aria-hidden="true">·</span>`;
+    }
+
+    if (this.type === 'date') {
+      return html`<time class="meta" datetime=${this.datetime || undefined}
+        >${this.value}</time
+      >`;
+    }
+
+    if (this.type === 'updated') {
+      return html`<time class="meta" datetime=${this.datetime || undefined}
+        >Updated ${this.value}</time
+      >`;
+    }
+
+    return html`<span class="meta">${this.value}</span>`;
+  }
+}
+
+customElements.define('blog-meta', BlogMeta);