@byline/cli 0.1.1

package/dist/templates/ui-byline/components/richtext-lexical/serialize/index.tsx

@@ -0,0 +1,249 @@
+'use client'
+
+import { Fragment } from 'react'
+
+import type { SerializedInlineImageNode, SerializedTextNode } from '@byline/richtext-lexical'
+import { Table } from '@byline/ui'
+
+import { AdmonitionSerializer } from '../../admonition/index.tsx'
+import { CodeSerializer } from '../../code/code-serializer.tsx'
+import { HeadingWithAnchorSerializer } from '../../heading-anchor/index.ts'
+import { InlineImageSerializer } from '../../inline-image/index.tsx'
+import { LayoutContainerSerializer, LayoutItemSerializer } from '../../layout/index.tsx'
+import { LinkLexicalSerializer } from '../../link/link-lexical.tsx'
+import { ListItemSerializer, ListSerializer } from '../../list/index.ts'
+import { TableCellSerializer } from '../../table-cell/index.tsx'
+import { VimeoSerializer } from '../../vimeo/index.tsx'
+import { YouTubeSerializer } from '../../youtube/index.tsx'
+import {
+  IS_BOLD,
+  IS_CODE,
+  IS_ITALIC,
+  IS_STRIKETHROUGH,
+  IS_SUBSCRIPT,
+  IS_SUPERSCRIPT,
+  IS_UNDERLINE,
+} from './richtext-node-formats.ts'
+import type { Locale } from '@/ui/byline/types/i18n'
+import type { SerializedLexicalNode } from './types.ts'
+
+export interface SerializeOptions {
+  renderParagraphInline: boolean
+  disableAnimation?: boolean
+}
+
+export interface SerializeProps {
+  nodes: SerializedLexicalNode[]
+  lng: Locale
+  options?: SerializeOptions
+}
+
+export function Serialize({
+  nodes,
+  lng,
+  options = { renderParagraphInline: false },
+}: SerializeProps): React.JSX.Element {
+  return (
+    <Fragment>
+      {nodes?.map((node, index): React.JSX.Element | null => {
+        if (node.type === 'text') {
+          const textNode = node as SerializedTextNode
+          const { text, format } = textNode
+          if (format & IS_BOLD) {
+            return <strong key={index}>{text}</strong>
+          }
+          if (format & IS_ITALIC) {
+            return <em key={index}>{text}</em>
+          }
+          if (format & IS_STRIKETHROUGH) {
+            return (
+              <span key={index} className="line-through">
+                {text}
+              </span>
+            )
+          }
+          if (format & IS_UNDERLINE) {
+            return (
+              <span key={index} className="underline">
+                {text}
+              </span>
+            )
+          }
+          if (format & IS_CODE) {
+            return <code key={index}>{text}</code>
+          }
+          if (format & IS_SUBSCRIPT) {
+            return <sub key={index}>{text}</sub>
+          }
+          if (format & IS_SUPERSCRIPT) {
+            return <sup key={index}> {text} </sup>
+          }
+          return <Fragment key={index}>{text}</Fragment>
+        }
+
+        if (node == null) {
+          return null
+        }
+
+        // NOTE: Hacky fix for
+        // https://github.com/facebook/lexical/blob/d10c4e6e55261b2fdd7d1845aed46151d0f06a8c/packages/lexical-list/src/LexicalListItemNode.ts#L133
+        // which does not return checked: false (only true - i.e. there is no prop for false)
+        // NOTE: also 'look ahead' for table rows that should be a header.
+        const serializedChildrenFn = (node: SerializedLexicalNode): React.JSX.Element | null => {
+          if (node.children == null) {
+            return null
+          } else {
+            if (node?.type === 'list' && node?.listType === 'check') {
+              for (const item of node.children) {
+                if (!item?.checked) {
+                  item.checked = false
+                }
+              }
+              return Serialize({ nodes: node.children, lng, options })
+            } else {
+              return Serialize({ nodes: node.children, lng, options })
+            }
+          }
+        }
+
+        const serializedChildren = serializedChildrenFn(node)
+
+        switch (node.type) {
+          case 'linebreak': {
+            return <br key={index} />
+          }
+          case 'quote': {
+            return <blockquote key={index}>{serializedChildren}</blockquote>
+          }
+          case 'horizontalrule': {
+            return (
+              <hr
+                className="not-prose clear-both my-6 border-gray-300 dark:border-gray-600"
+                key={index}
+              />
+            )
+          }
+          case 'paragraph': {
+            if (options.renderParagraphInline) {
+              return <span key={index}>{serializedChildren}</span>
+            } else {
+              return <p key={index}>{serializedChildren}</p>
+            }
+          }
+          case 'heading': {
+            return <HeadingWithAnchorSerializer key={index} node={node} />
+          }
+          case 'list': {
+            return (
+              <ListSerializer key={index} node={node}>
+                {serializedChildren}
+              </ListSerializer>
+            )
+          }
+          case 'listitem': {
+            return (
+              <ListItemSerializer key={index} node={node}>
+                {serializedChildren}
+              </ListItemSerializer>
+            )
+          }
+          case 'link': {
+            return (
+              <LinkLexicalSerializer key={index} attributes={node.attributes} lng={lng}>
+                {serializedChildren}
+              </LinkLexicalSerializer>
+            )
+          }
+          case 'admonition': {
+            return (
+              <AdmonitionSerializer
+                key={index}
+                node={node}
+                serialize={Serialize}
+                lng={lng}
+                options={options}
+              />
+            )
+          }
+          case 'inline-image': {
+            return (
+              <InlineImageSerializer
+                key={index}
+                node={node as SerializedInlineImageNode}
+                serialize={Serialize}
+                lng={lng}
+                options={options}
+              />
+            )
+          }
+          case 'code': {
+            return <CodeSerializer key={index} node={node} />
+          }
+          case 'table': {
+            return (
+              <Table.Container key={index}>
+                <Table>
+                  <Table.Body>{serializedChildren}</Table.Body>
+                </Table>
+              </Table.Container>
+            )
+          }
+          case 'tablerow': {
+            return <Table.Row key={index}>{serializedChildren}</Table.Row>
+          }
+          case 'tablecell': {
+            // TODO: revisit - we special case inline images if they appear inside a table
+            // cell - and so that's why we're using the TableCellSerializer now
+            return (
+              <TableCellSerializer
+                key={index}
+                node={node}
+                serialize={Serialize}
+                lng={lng}
+                options={options}
+              />
+            )
+            // if (node?.headerState === 1 || node?.headerState === 2 || node?.headerState === 3) {
+            //   return <TableHeadingCell key={index}>{serializedChildren}</TableHeadingCell>
+            // } else {
+            //   return <TableCell key={index}>{serializedChildren}</TableCell>
+            // }
+          }
+          case 'layout-container': {
+            return (
+              <LayoutContainerSerializer
+                key={index}
+                node={node}
+                serialize={Serialize}
+                lng={lng}
+                options={options}
+              />
+            )
+          }
+          case 'layout-item': {
+            return (
+              <LayoutItemSerializer
+                key={index}
+                node={node}
+                serialize={Serialize}
+                lng={lng}
+                options={options}
+              />
+            )
+          }
+          case 'youtube': {
+            return <YouTubeSerializer key={index} node={node} />
+          }
+          case 'vimeo': {
+            return <VimeoSerializer key={index} node={node} />
+          }
+          // case 'code-highlight': {
+          //   return <Fragment key={index}>{`${node.text}\r\n`}</Fragment>
+          // }
+          default:
+            return null
+        }
+      })}
+    </Fragment>
+  )
+}

package/dist/templates/ui-byline/components/richtext-lexical/serialize/richtext-node-formats.ts

@@ -0,0 +1,66 @@
+// This copy-and-pasted from somewhere in lexical here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
+
+// DOM
+export const DOM_ELEMENT_TYPE = 1
+export const DOM_TEXT_TYPE = 3
+
+// Reconciling
+export const NO_DIRTY_NODES = 0
+export const HAS_DIRTY_NODES = 1
+export const FULL_RECONCILE = 2
+
+// Text node modes
+export const IS_NORMAL = 0
+export const IS_TOKEN = 1
+export const IS_SEGMENTED = 2
+// IS_INERT = 3
+
+// Text node formatting
+export const IS_BOLD = 1
+export const IS_ITALIC = 1 << 1
+export const IS_STRIKETHROUGH = 1 << 2
+export const IS_UNDERLINE = 1 << 3
+export const IS_CODE = 1 << 4
+export const IS_SUBSCRIPT = 1 << 5
+export const IS_SUPERSCRIPT = 1 << 6
+export const IS_HIGHLIGHT = 1 << 7
+
+export const IS_ALL_FORMATTING =
+  IS_BOLD |
+  IS_ITALIC |
+  IS_STRIKETHROUGH |
+  IS_UNDERLINE |
+  IS_CODE |
+  IS_SUBSCRIPT |
+  IS_SUPERSCRIPT |
+  IS_HIGHLIGHT
+
+export const IS_DIRECTIONLESS = 1
+export const IS_UNMERGEABLE = 1 << 1
+
+// Element node formatting
+export const IS_ALIGN_LEFT = 1
+export const IS_ALIGN_CENTER = 2
+export const IS_ALIGN_RIGHT = 3
+export const IS_ALIGN_JUSTIFY = 4
+export const IS_ALIGN_START = 5
+export const IS_ALIGN_END = 6
+
+export const TEXT_TYPE_TO_FORMAT: Record<TextFormatType | string, number> = {
+  bold: IS_BOLD,
+  code: IS_CODE,
+  italic: IS_ITALIC,
+  strikethrough: IS_STRIKETHROUGH,
+  subscript: IS_SUBSCRIPT,
+  superscript: IS_SUPERSCRIPT,
+  underline: IS_UNDERLINE,
+}
+
+export type TextFormatType =
+  | 'bold'
+  | 'underline'
+  | 'strikethrough'
+  | 'italic'
+  | 'code'
+  | 'subscript'
+  | 'superscript'

package/dist/templates/ui-byline/components/richtext-lexical/serialize/types.ts

@@ -0,0 +1,48 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type {
+  SerializedLexicalNode as LexicalSerializedLexicalNode,
+  SerializedRootNode as LexicalSerializedRootNode,
+} from '@byline/richtext-lexical'
+
+/**
+ * Root of a Lexical editor state — `editorState.root` from a persisted
+ * document. Matches Lexical's package shape directly so callers can
+ * pass `editorState.root.children` straight in without casting.
+ */
+export interface SerializedLexicalEditorState {
+  root: LexicalSerializedRootNode
+}
+
+/**
+ * Serializer-side node shape for the dispatch in `serialize/index.tsx`.
+ *
+ * Lexical's package type only guarantees `{ type, version }` on the
+ * base; concrete node types (text, element, decorator, custom Byline
+ * nodes) carry many more fields. The dispatcher narrows by
+ * `node.type` and each `case` reaches into branch-specific fields —
+ * we keep the most common ones declared as optional (so reads are
+ * shape-aware where they can be) and an `[other: string]: any` escape
+ * hatch for fields specific to custom nodes (`tag`, `listType`,
+ * `checked`, `attributes`, `headerState`, `kind`, etc.) without
+ * enumerating every node type.
+ *
+ * Structurally a superset of Lexical's `SerializedLexicalNode`, so
+ * values of either flavor flow through the dispatcher without casts.
+ */
+export type SerializedLexicalNode = LexicalSerializedLexicalNode & {
+  format?: number | string
+  text?: string
+  mode?: string
+  style?: string
+  indent?: string | number
+  direction?: 'ltr' | 'rtl' | null
+  children?: SerializedLexicalNode[]
+  [other: string]: any
+}

package/dist/templates/ui-byline/components/richtext-lexical/serialize/utils.ts

@@ -0,0 +1,15 @@
+import type { SerializedLexicalNode } from './types.ts'
+
+export function extractHeadingText(nodes?: SerializedLexicalNode[], text: string = ''): string {
+  if (nodes != null) {
+    for (const node of nodes) {
+      if (node.type === 'text' && node.text != null) {
+        text = text + node.text
+      }
+      if (node.children != null) {
+        extractHeadingText(node.children, text)
+      }
+    }
+  }
+  return text
+}

package/dist/templates/ui-byline/components/table-cell/index.tsx

@@ -0,0 +1,36 @@
+import { Table } from '@byline/ui'
+
+import type { Locale } from '@/ui/byline/types/i18n'
+import type { SerializeOptions, SerializeProps } from '../richtext-lexical/serialize/index.tsx'
+import type { SerializedLexicalNode } from '../richtext-lexical/serialize/types.ts'
+
+export function TableCellSerializer({
+  node,
+  serialize,
+  lng,
+  options,
+}: {
+  node: SerializedLexicalNode
+  serialize: ({ nodes, options }: SerializeProps) => React.JSX.Element
+  lng: Locale
+  options: SerializeOptions
+}): React.JSX.Element {
+  // Disable any animations for any child nodes that appear inside a table cell
+  const tableCellOptions: SerializeOptions = { ...options, disableAnimation: true }
+
+  if (node?.headerState === 1 || node?.headerState === 2 || node?.headerState === 3) {
+    return (
+      <Table.Cell>
+        {node?.children != null &&
+          serialize({ nodes: node?.children, lng, options: tableCellOptions })}
+      </Table.Cell>
+    )
+  } else {
+    return (
+      <Table.Cell>
+        {node?.children != null &&
+          serialize({ nodes: node?.children, lng, options: tableCellOptions })}
+      </Table.Cell>
+    )
+  }
+}

package/dist/templates/ui-byline/components/vimeo/index.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import type React from 'react'
+
+import type { SerializedLexicalNode } from '../richtext-lexical/serialize/types.ts'
+
+export function VimeoSerializer({ node }: { node: SerializedLexicalNode }): React.JSX.Element {
+  const videoID = node.videoID as string
+  return (
+    <iframe
+      style={{
+        aspectRatio: '16 / 9',
+        width: '100%',
+      }}
+      src={`https://player.vimeo.com/video/${videoID}`}
+      allow="autoplay fullscreen picture-in-picture"
+      allowFullScreen={true}
+      title="Vimeo Video"
+    />
+  )
+}

package/dist/templates/ui-byline/components/youtube/index.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import type React from 'react'
+
+import type { SerializedLexicalNode } from '../richtext-lexical/serialize/types.ts'
+
+export function YouTubeSerializer({ node }: { node: SerializedLexicalNode }): React.JSX.Element {
+  const videoID = node.videoID as string
+  return (
+    <iframe
+      style={{
+        aspectRatio: '16 / 9',
+        width: '100%',
+      }}
+      src={`https://www.youtube-nocookie.com/embed/${videoID}`}
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen={true}
+      title="YouTube Video"
+    />
+  )
+}

package/dist/templates/ui-byline/render-blocks.tsx

@@ -0,0 +1,71 @@
+import type { BlocksUnion } from '@byline/core'
+import { Section } from '@byline/ui'
+
+import { PhotoBlock as PhotoBlockDef } from '~/blocks/photo-block'
+import { RichTextBlock as RichTextBlockDef } from '~/blocks/richtext-block'
+
+import { PhotoBlock } from '@/ui/byline/blocks/photo-block'
+import { RichTextBlock } from '@/ui/byline/blocks/richtext-block'
+import { toKebabCase } from '@/ui/byline/utils/to-kebab-case'
+import type { Locale } from '@/ui/byline/types/i18n'
+
+/**
+ * Registered block schemas. Add a new block here (and a matching `case`
+ * in the switch below) to wire it into the front-end renderer.
+ */
+const Blocks = [PhotoBlockDef, RichTextBlockDef] as const
+
+/**
+ * Discriminated union of every registered block's instance shape. Use
+ * this as the `blocks` prop type when calling `RenderBlocks`.
+ */
+export type AnyBlock = BlocksUnion<typeof Blocks>
+
+interface Props {
+  blocks: AnyBlock[] | undefined | null
+  lng: Locale
+  constrainedLayout?: boolean
+}
+
+export function RenderBlocks({
+  blocks,
+  constrainedLayout = false,
+  lng,
+}: Props): React.JSX.Element | null {
+  if (!Array.isArray(blocks) || blocks.length === 0) return null
+
+  return (
+    <>
+      {blocks.map((block) => {
+        switch (block._type) {
+          case 'photoBlock':
+            return (
+              <Section className={toKebabCase(block._type)} key={block._id}>
+                <PhotoBlock
+                  id={block._id}
+                  block={block}
+                  lng={lng}
+                  constrainedLayout={constrainedLayout}
+                />
+              </Section>
+            )
+          case 'richTextBlock':
+            return (
+              <Section className={toKebabCase(block._type)} key={block._id}>
+                <RichTextBlock
+                  id={block._id}
+                  block={block}
+                  lng={lng}
+                  constrainedLayout={constrainedLayout}
+                />
+              </Section>
+            )
+          default: {
+            const _exhaustive: never = block
+            return null
+          }
+        }
+      })}
+    </>
+  )
+}

package/dist/templates/ui-byline/types/i18n.ts

@@ -0,0 +1,14 @@
+/**
+ * `Locale` type used throughout the ui/byline tree as a `lng` prop type.
+ *
+ * The reference webapp ships its own `i18n-config.ts` that narrows this
+ * to a literal union of supported locales (`'en' | 'fr' | ...`). This
+ * stub keeps the type as `string` so the install builds without
+ * requiring you to wire up an i18n config.
+ *
+ * If your app has its own i18n setup, replace this file with one that
+ * re-exports your narrower `Locale` type, e.g.
+ *
+ *   export type { Locale } from '@/i18n/i18n-config'
+ */
+export type Locale = string

package/dist/templates/ui-byline/utils/image-sources.ts

@@ -0,0 +1,102 @@
+import type { PersistedVariant, StoredFileValue } from '@byline/core'
+
+/**
+ * Maximum variant width (px) included in a srcSet for each `size` cap.
+ *
+ * - `auto`   — every variant.
+ * - `medium` — drops the largest variant (`desktop` ≥ 2100w).
+ * - `small`  — keeps only sub-tablet variants (≤ 768w).
+ *
+ * Tuned for the variant set declared in the reference Media collection
+ * (`Media.image.upload.sizes`); safe to widen as the variant set grows.
+ */
+const SIZE_CAPS: Record<'auto' | 'medium' | 'small', number> = {
+  auto: Number.POSITIVE_INFINITY,
+  medium: 1280,
+  small: 768,
+}
+
+/**
+ * Image-format names the renderer pipeline knows about. Aligns with the
+ * `format` values Sharp emits via `UploadConfig.sizes[].format`. AVIF is
+ * preferred when present (smaller files at comparable quality); webp is
+ * the standard fallback for older browsers.
+ */
+export type VariantFormat = 'avif' | 'webp'
+
+/** MIME type emitted on the matching `<source type="…">` element. */
+export const VARIANT_MIME: Record<VariantFormat, string> = {
+  avif: 'image/avif',
+  webp: 'image/webp',
+}
+
+type ResolvedVariant = PersistedVariant & { storageUrl: string; width: number }
+
+function isResolvedVariant(v: PersistedVariant): v is ResolvedVariant {
+  return v.storageUrl != null && v.width != null
+}
+
+/**
+ * Build a srcSet (`<url> <width>w`) for variants of the given `format`,
+ * sorted ascending by width and filtered by an optional size cap.
+ * Variants without a `storageUrl` or `width` are skipped.
+ */
+export function getVariantSrcSet(
+  image: StoredFileValue | undefined | null,
+  format: VariantFormat,
+  maxSize: 'auto' | 'medium' | 'small' = 'auto'
+): string[] {
+  if (image == null) return []
+  const cap = SIZE_CAPS[maxSize]
+  return (image.variants ?? [])
+    .filter(isResolvedVariant)
+    .filter((v) => v.format === format && v.width <= cap)
+    .sort((a, b) => a.width - b.width)
+    .map((v) => `${v.storageUrl} ${v.width}w`)
+}
+
+/**
+ * `true` when the upload value carries at least one variant in the
+ * given format. Used to decide whether to emit a `<source>` element
+ * for that format on a `<picture>`.
+ */
+export function hasVariantFormat(
+  image: StoredFileValue | undefined | null,
+  format: VariantFormat
+): boolean {
+  if (image == null) return false
+  return (image.variants ?? []).some((v) => v.format === format)
+}
+
+/**
+ * Find a named variant (matching `image.upload.sizes[].name`) on an
+ * upload value. Returns `undefined` if the variant has not been
+ * generated yet or has no storage URL.
+ */
+export function getVariant(
+  image: StoredFileValue | undefined | null,
+  name: string
+): ResolvedVariant | undefined {
+  const v = image?.variants?.find((variant) => variant.name === name)
+  return v != null && isResolvedVariant(v) ? v : undefined
+}
+
+/**
+ * Resolve a single URL from an upload value, walking a preference list
+ * of variant names and finally falling back to the original
+ * `storageUrl`. Useful for non-responsive contexts that need a single
+ * `<img src>` (avatars, list thumbnails before they were swapped to
+ * `<picture>`, social-share preview URLs, etc.).
+ */
+export function pickVariantUrl(
+  image: StoredFileValue | undefined | null,
+  ...preferred: string[]
+): string | undefined {
+  if (image == null) return undefined
+  const variants = image.variants ?? []
+  for (const name of preferred) {
+    const hit = variants.find((v) => v.name === name)
+    if (hit?.storageUrl != null) return hit.storageUrl
+  }
+  return image.storageUrl
+}

package/dist/templates/ui-byline/utils/to-kebab-case.ts

@@ -0,0 +1,5 @@
+export const toKebabCase = (string?: string): string =>
+  (string ?? '')
+    ?.replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/\s+/g, '-')
+    .toLowerCase()