@byline/cli 0.1.1

package/dist/templates/ui-byline/components/heading-anchor/heading-anchor.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import type * as React from 'react'
+
+import { formatTextValue } from '@byline/core'
+import cx from 'classnames'
+
+import { extractHeadingText } from './utils.ts'
+import type { SerializedLexicalNode } from '../richtext-lexical/serialize/types.ts'
+
+type Heading = Extract<keyof React.JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>
+
+export function HeadingWithAnchorSerializer({
+  node,
+}: {
+  node: SerializedLexicalNode
+}): React.JSX.Element {
+  const tag = node?.tag
+  const text = extractHeadingText(node?.children)
+  const headingId = formatTextValue(text)
+  const Element = tag as Heading
+  if (tag != null && (tag === 'h4' || tag === 'h5' || tag === 'h6')) {
+    return (
+      <Element
+        id={headingId}
+        className="clear-both relative font-normal text-gray-800 dark:text-gray-300"
+      >
+        {text}
+      </Element>
+    )
+  } else {
+    return (
+      <Element id={headingId} className="relative clear-both ">
+        <a href={`#${headingId}`} className="component--heading-anchor not-prose no-underline">
+          <span className="component--heading-anchor-text font-bold text-theme-900 dark:text-white">
+            {text}
+          </span>
+          <span
+            className={cx(
+              'component--heading-anchor-icon absolute p-0 leading-4 sm:inline-block',
+              'right-[-0.125em] top-[-0.4em] m-0 -translate-y-1 translate-x-1 sm:right-auto sm:top-auto',
+              'transition-all duration-200 ease-in-out',
+              'text-gray-300  hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-600',
+              'aria-hidden="true"'
+            )}
+          >
+            <svg
+              aria-hidden="true"
+              tabIndex={-1}
+              className="inline"
+              width="0.85em"
+              height="0.85em"
+              viewBox="0 0 15 15"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4.62471 4.00001L4.56402 4.00001C4.04134 3.99993 3.70687 3.99988 3.4182 4.055C2.2379 4.28039 1.29846 5.17053 1.05815 6.33035C0.999538 6.61321 0.999604 6.93998 0.999703 7.43689L0.999711 7.50001L0.999703 7.56312C0.999604 8.06003 0.999538 8.3868 1.05815 8.66966C1.29846 9.82948 2.2379 10.7196 3.4182 10.945C3.70688 11.0001 4.04135 11.0001 4.56403 11L4.62471 11H5.49971C5.7759 11 5.99971 10.7762 5.99971 10.5C5.99971 10.2239 5.7759 10 5.49971 10H4.62471C4.02084 10 3.78907 9.99777 3.60577 9.96277C2.80262 9.8094 2.18169 9.21108 2.02456 8.42678C1.98838 8.24809 1.98971 8.02242 1.98971 7.50001C1.98971 6.9776 1.98838 6.75192 2.02456 6.57323C2.18169 5.78893 2.80262 5.19061 3.60577 5.03724C3.78907 5.00225 4.02084 5.00001 4.62471 5.00001H5.49971C5.7759 5.00001 5.99971 4.77615 5.99971 4.50001C5.99971 4.22387 5.7759 4.00001 5.49971 4.00001H4.62471ZM10.3747 4.00001H9.49971C9.22357 4.00001 8.99971 4.22387 8.99971 4.50001C8.99971 4.77615 9.22357 5.00001 9.49971 5.00001H10.3747C10.9786 5.00001 11.2104 5.00225 11.3937 5.03724C12.1968 5.19061 12.8177 5.78893 12.9749 6.57323C13.0111 6.75192 13.0097 6.9776 13.0097 7.50001C13.0097 8.02242 13.0111 8.24809 12.9749 8.42678C12.8177 9.21108 12.1968 9.8094 11.3937 9.96277C11.2104 9.99777 10.9786 10 10.3747 10H9.49971C9.22357 10 8.99971 10.2239 8.99971 10.5C8.99971 10.7762 9.22357 11 9.49971 11H10.3747L10.4354 11C10.9581 11.0001 11.2925 11.0001 11.5812 10.945C12.7615 10.7196 13.701 9.82948 13.9413 8.66966C13.9999 8.3868 13.9998 8.06003 13.9997 7.56312L13.9997 7.50001L13.9997 7.43689C13.9998 6.93998 13.9999 6.61321 13.9413 6.33035C13.701 5.17053 12.7615 4.28039 11.5812 4.055C11.2925 3.99988 10.9581 3.99993 10.4354 4.00001L10.3747 4.00001ZM4.99971 7.50001C4.99971 7.22387 5.22357 7.00001 5.49971 7.00001H9.49971C9.7759 7.00001 9.99971 7.22387 9.99971 7.50001C9.99971 7.77615 9.7759 8.00001 9.49971 8.00001H5.49971C5.22357 8.00001 4.99971 7.77615 4.99971 7.50001Z"
+                fill="currentColor"
+                fillRule="evenodd"
+                clipRule="evenodd"
+              />
+            </svg>
+          </span>
+        </a>
+      </Element>
+    )
+  }
+}

package/dist/templates/ui-byline/components/heading-anchor/index.ts

@@ -0,0 +1 @@
+export * from './heading-anchor.tsx'

package/dist/templates/ui-byline/components/heading-anchor/utils.ts

@@ -0,0 +1,15 @@
+import type { SerializedLexicalNode } from '../richtext-lexical/serialize/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/inline-image/index.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import type React from 'react'
+
+import type { StoredFileValue } from '@byline/core'
+import type { InlineImagePosition, SerializedInlineImageNode } from '@byline/richtext-lexical'
+import { FadeInLift } from '@byline/ui'
+
+import { ResponsiveImage } from '../responsive-image/index.tsx'
+import type { Locale } from '@/ui/byline/types/i18n'
+import type { SerializeOptions, SerializeProps } from '../richtext-lexical/serialize/index.tsx'
+
+/**
+ * Map the inline-image `position` (a layout choice the editor exposes
+ * via radio buttons) onto the public renderer's `<ResponsiveImage>`
+ * size cap and constrained-layout flag. Mirrors the editor-side
+ * `variantFor()` heuristic in `@byline/richtext-lexical`'s
+ * `inline-image-plugin/utils.ts` so the public render and the editor
+ * preview agree on which variants matter.
+ *
+ * - `left` / `right` — floated 50% column on desktop. Cap at the tablet
+ *    variant; flag `constrainedLayout` so the `sizes` hint halves the
+ *    desktop viewport portion.
+ * - `full` / `default` — main article column (~920px). Tablet cap is
+ *    plenty; no extra constraint.
+ * - `wide` — bleeds beyond the article. Full variant set; no constraint.
+ */
+const POSITION_TO_SIZE: Record<
+  NonNullable<InlineImagePosition>,
+  { size: 'large' | 'medium' | 'small'; constrainedLayout: boolean }
+> = {
+  left: { size: 'medium', constrainedLayout: true },
+  right: { size: 'medium', constrainedLayout: true },
+  full: { size: 'medium', constrainedLayout: false },
+  default: { size: 'medium', constrainedLayout: false },
+  wide: { size: 'large', constrainedLayout: false },
+}
+
+interface Props {
+  node: SerializedInlineImageNode
+  serialize: ({ nodes, options }: SerializeProps) => React.JSX.Element
+  lng: Locale
+  options: SerializeOptions
+}
+
+export function InlineImageSerializer({ node, serialize, lng, options }: Props): React.JSX.Element {
+  const { showCaption, position, altText, document: pickerDoc, caption } = node
+  const image = pickerDoc?.image as StoredFileValue | undefined
+
+  const floatLeft = position === 'left'
+  const floatRight = position === 'right'
+  const isFloat = floatLeft || floatRight
+
+  const { size, constrainedLayout } = POSITION_TO_SIZE[position ?? 'default']
+
+  let classes: string
+  if (floatLeft) {
+    classes =
+      'inline-image-block w-full sm:w-[50%] float-left mt-5 mb-5 sm:mt-[0.5rem] sm:mr-[1.2rem] sm:mb-1 sm:ml-0'
+  } else if (floatRight) {
+    classes =
+      'inline-image-block w-full sm:w-[50%] float-right mt-5 mb-5 sm:mt-[0.5rem] sm:ml-[1rem] sm:mb-1 sm:mr-[1rem]'
+  } else {
+    classes = 'inline-image-block block w-full mt-5 mb-5'
+  }
+
+  // For now, if animation is disabled we must be inside a table cell
+  // (or similar non-animatable host); also disable bleed-to-edge.
+  const animationDisabled = options?.disableAnimation === true
+
+  const Img = (
+    <ResponsiveImage
+      image={image}
+      size={size}
+      constrainedLayout={constrainedLayout}
+      bleedOnMobile={!animationDisabled && !isFloat}
+      alt={altText}
+    />
+  )
+
+  const ImgSlot = animationDisabled ? (
+    Img
+  ) : (
+    <FadeInLift as="span" delay={0.1} className="block">
+      {Img}
+    </FadeInLift>
+  )
+
+  if (showCaption) {
+    return (
+      <span className={classes}>
+        {ImgSlot}
+        <span className="block inline-image-block--caption">
+          {caption?.editorState?.root?.children != null ? (
+            serialize({
+              nodes: caption.editorState.root.children,
+              lng,
+              options: { renderParagraphInline: true },
+            })
+          ) : (
+            <span>Caption not found for inline image.</span>
+          )}
+        </span>
+      </span>
+    )
+  }
+
+  return <span className={classes}>{ImgSlot}</span>
+}

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

@@ -0,0 +1,63 @@
+'use client'
+
+import type React from 'react'
+
+import cx from 'classnames'
+
+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'
+
+const layoutMap = {
+  '1fr 1fr': 'grid-cols-[1fr_1fr]',
+  '1fr 3fr': 'grid-cols-[1fr_3fr]',
+  '3fr 1fr': 'grid-cols-[3fr_1fr]',
+  '1fr 1fr 1fr': 'grid-cols-[1fr_1fr_1fr]',
+  '1fr 2fr 1fr': 'grid-cols-[1fr_2fr_1fr]',
+  '1fr 1fr 1fr 1fr': 'grid-cols-[1fr_1fr_1fr_1fr]',
+}
+
+export function LayoutContainerSerializer({
+  node,
+  serialize,
+  lng,
+  options,
+}: {
+  node: SerializedLexicalNode
+  serialize: ({ nodes }: SerializeProps) => React.JSX.Element
+  lng: Locale
+  options: SerializeOptions
+}): React.JSX.Element {
+  const gridColumns = layoutMap[node.templateColumns as keyof typeof layoutMap]
+  return (
+    <div className={cx('sm:grid gap-5 my-5', gridColumns)}>
+      {node?.children != null ? (
+        serialize({ nodes: node?.children, lng, options })
+      ) : (
+        <span>Content not found for layout container.</span>
+      )}
+    </div>
+  )
+}
+
+export function LayoutItemSerializer({
+  node,
+  serialize,
+  lng,
+  options,
+}: {
+  node: SerializedLexicalNode
+  serialize: ({ nodes }: SerializeProps) => React.JSX.Element
+  lng: Locale
+  options: SerializeOptions
+}): React.JSX.Element {
+  return (
+    <div className="mb-5 sm:mb-0">
+      {node?.children != null ? (
+        serialize({ nodes: node?.children, lng, options })
+      ) : (
+        <span>Content not found for layout item.</span>
+      )}
+    </div>
+  )
+}

package/dist/templates/ui-byline/components/link/lang-link.tsx

@@ -0,0 +1,70 @@
+/**
+ * Locale-aware Link STUB.
+ *
+ * The reference webapp ships a real `LangLink` that injects an optional
+ * `{-$lng}` path parameter onto TanStack Router's `<Link>` so that the
+ * current locale survives client-side navigation. This stub is a thin
+ * pass-through — it accepts the `lng` prop but does NOT prefix URLs.
+ *
+ * If your app is single-locale, this is fine as-is.
+ *
+ * If you have a multi-locale strategy, replace the body with your own
+ * Link wrapper. The reference implementation lives at
+ *   apps/webapp/src/i18n/components/lang-link.tsx
+ * in https://github.com/Byline-CMS/bylinecms.dev.
+ */
+
+import type React from 'react'
+import { Link } from '@tanstack/react-router'
+
+import type { Locale } from '../../types/i18n'
+
+export interface LangLinkProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+  to: string
+  lng?: Locale
+  params?: Record<string, string | undefined>
+  search?:
+    | true
+    | Record<string, unknown>
+    | ((current: Record<string, unknown>) => Record<string, unknown>)
+  forceReload?: boolean
+  scroll?: boolean
+  replace?: boolean
+  ref?: React.Ref<HTMLAnchorElement>
+  children?: React.ReactNode
+}
+
+export function LangLink({
+  to,
+  lng: _lng,
+  params,
+  search,
+  forceReload,
+  scroll,
+  replace,
+  ref,
+  children,
+  ...rest
+}: LangLinkProps): React.JSX.Element {
+  if (forceReload) {
+    return (
+      <a href={to} ref={ref} {...rest}>
+        {children}
+      </a>
+    )
+  }
+  return (
+    <Link
+      to={to}
+      params={params}
+      search={search}
+      resetScroll={scroll}
+      replace={replace}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </Link>
+  )
+}

package/dist/templates/ui-byline/components/link/link-field.tsx

@@ -0,0 +1,298 @@
+'use client'
+
+import type React from 'react'
+
+import { Button, type Intent } from '@byline/ui'
+import cx from 'classnames'
+
+import { LangLink } from '@/ui/byline/components/link/lang-link'
+import type { Locale } from '@/ui/byline/types/i18n'
+
+export interface LinkFieldAttributes {
+  id?: string | null
+  type?: ('reference' | 'custom') | null
+  newTab?: boolean | null
+  label: string
+  customId?: string | null
+  url?: string | null
+  appearance?: ('primary' | 'secondary') | null
+  reference?: {
+    value: string
+    relationTo: string
+    data: {
+      id: string
+      title: string
+      slug: string
+      collectionAlias: string
+    }
+  }
+}
+
+export interface LinkFieldProps extends React.ComponentPropsWithoutRef<'a'> {
+  link: LinkFieldAttributes
+  size?: 'sm' | 'md' | 'lg'
+  lng: Locale
+  className?: string
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+  children?: React.ReactNode
+}
+
+export function manageRel(input: string, action: 'add' | 'remove', value: string): string {
+  let result: string
+  let mutableInput = `${input}`
+  if (action === 'add') {
+    // if we somehow got out of sync - clean up
+    if (mutableInput.includes(value)) {
+      const re = new RegExp(value, 'g')
+      mutableInput = mutableInput.replace(re, '').trim()
+    }
+    mutableInput = mutableInput.trim()
+    result = mutableInput.length === 0 ? `${value}` : `${mutableInput} ${value}`
+  } else {
+    const re = new RegExp(value, 'g')
+    result = mutableInput.replace(re, '').trim()
+  }
+  return result
+}
+
+function getHref(args: LinkFieldAttributes): string {
+  let href = ''
+  const publicWebsiteUrl = '/' // getPublicWebsiteUrl()
+  const { type, url } = args
+
+  if ((type === 'custom' || type === undefined) && url != null) {
+    href = url
+  } else if (
+    type === 'reference' &&
+    args.reference?.relationTo != null &&
+    args.reference?.data?.slug != null
+  ) {
+    const collection = args?.reference?.relationTo
+    // biome-ignore lint/correctness/noUnsafeOptionalChaining: To be refactored in the future
+    const { slug, collectionAlias } = args?.reference?.data
+    if (collectionAlias != null) {
+      // The alias might be for the root
+      if (collectionAlias.length === 0) {
+        href = `/${slug}`
+      } else {
+        href = `/${collectionAlias}/${slug}`
+      }
+    } else {
+      href = `/${collection}/${slug}`
+    }
+  }
+
+  const hrefIsLocal = ['tel:', 'mailto:', '/'].some((prefix) => href.startsWith(prefix))
+  if (!hrefIsLocal) {
+    try {
+      const objectURL = new URL(href)
+      if (objectURL.origin === publicWebsiteUrl) {
+        href = objectURL.href.replace(publicWebsiteUrl, '')
+      }
+    } catch (e) {
+      console.error(`Failed to format url: ${href}`, e) // eslint-disable-line no-console
+    }
+  }
+
+  return href
+}
+
+function getAdditionalProps(
+  args: LinkFieldAttributes,
+  href: string
+): {
+  rel: string | undefined
+  target: string | undefined
+} {
+  const additionalProps: {
+    rel: string | undefined
+    target: string | undefined
+  } = {
+    rel: undefined,
+    target: undefined,
+  }
+
+  let rel = ''
+  if (args.newTab === true) rel = manageRel(rel, 'add', 'noopener')
+  additionalProps.rel = rel
+
+  if (args.newTab === true) {
+    additionalProps.target = '_blank'
+  }
+
+  if (!href.startsWith('/')) {
+    additionalProps.target = '_blank'
+  }
+
+  if (additionalProps.rel == null || additionalProps.rel.length === 0) delete additionalProps.rel
+  if (additionalProps.target == null) delete additionalProps.target
+
+  return additionalProps
+}
+
+/**
+ * DefaultLink
+ * @param param0
+ * @returns
+ */
+export function DefaultLink({
+  link,
+  lng,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}: LinkFieldProps): React.JSX.Element {
+  const href = getHref(link)
+  const additionalProps = getAdditionalProps(link, href)
+
+  if (href.startsWith('/')) {
+    return (
+      <LangLink
+        lng={lng}
+        to={href}
+        {...additionalProps}
+        className={className}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        {...rest}
+      >
+        {link.label}
+      </LangLink>
+    )
+  }
+  return (
+    <a
+      href={href}
+      {...additionalProps}
+      className={cx(className, '!no-underline')}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      {...rest}
+    >
+      <span className="underline">{link.label}</span>
+      <span style={{ display: 'inline', whiteSpace: 'nowrap' }}>
+        &#x202F;
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="fill-[#001827] dark:fill-gray-50"
+          style={{ display: 'inline' }}
+          focusable="false"
+          aria-hidden="true"
+          height="14px"
+          width="14px"
+          viewBox="0 0 24 24"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+        </svg>
+      </span>
+    </a>
+  )
+}
+
+/**
+ * ButtonLink
+ * @param param0
+ * @returns
+ */
+export function ButtonLink({
+  link,
+  size = 'md',
+  lng,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}: LinkFieldProps): React.JSX.Element {
+  const href = getHref(link)
+  const additionalProps = getAdditionalProps(link, href)
+
+  if (href.startsWith('/')) {
+    return (
+      <Button
+        intent={link?.appearance as Intent}
+        size={size}
+        render={
+          <LangLink
+            lng={lng}
+            to={href}
+            {...additionalProps}
+            className={cx(className, '!no-underline')}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            {...rest}
+          />
+        }
+      >
+        {link.label}
+      </Button>
+    )
+  }
+  return (
+    <Button
+      intent={link?.appearance as Intent}
+      size={size}
+      render={
+        <a
+          href={href}
+          {...additionalProps}
+          className={cx(className, '!no-underline')}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          {...rest}
+        />
+      }
+    >
+      {link.label}
+    </Button>
+  )
+}
+
+/**
+ * We export LinkField which will attempt to automatically switch
+ * between ButtonLink and DefaultLink based on the appearance of the link.
+ *
+ * For more control including className and style overrides, a block may
+ * choose to use the above ButtonLink or DefaultLink directly.
+ *
+ * @param param0
+ * @returns
+ */
+export function LinkField({
+  link,
+  lng,
+  size = 'md',
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}: LinkFieldProps): React.JSX.Element {
+  if (
+    link.appearance != null &&
+    (link.appearance === 'primary' || link.appearance === 'secondary')
+  ) {
+    return (
+      <ButtonLink
+        size={size}
+        link={link}
+        lng={lng}
+        className={className}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        {...rest}
+      />
+    )
+  }
+  return (
+    <DefaultLink
+      link={link}
+      lng={lng}
+      className={className}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      {...rest}
+    />
+  )
+}