@purestack/ts-components 1.1.0

package/src/standard/navMenu/navMenuStyle.ts

@@ -0,0 +1,323 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import {
+  BREAKPOINTS,
+  docLayoutVar,
+  mediaAbove,
+  mediaBelow,
+  mediaMax,
+  mediaMin,
+  styleBuilder,
+  type ThemeMode,
+  themes,
+} from '@purestack/ts-style'
+import { getTopBarToggleVisibleSelectors } from '../topBar/topBarStyle'
+
+export function registerNavStyles() {
+  themes.forEach((theme, palette) => {
+    registerNavShellStyles(theme, palette)
+    registerNavSummaryStyles(theme, palette)
+  })
+}
+
+export function registerNavShellStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('li.nav__item', theme)
+    .marginInlineStart('-0.5rem')
+    .marginInlineEnd('-0.5rem')
+  styleBuilder
+    .select('li.nav__item .icon', theme)
+    .width('1.3em')
+    .height('1.3em')
+  styleBuilder.select('li.nav__item .btn', theme).gap('0.5em').padding('0.5em')
+  styleBuilder
+    .select('.nav__list .nav__list li.nav__item', theme)
+    .marginInlineStart('0.75rem')
+    .marginInlineEnd('0rem')
+  styleBuilder
+    .select('.nav__menu', theme)
+    .display('block')
+    .padding('1em')
+    .borderRadius(`${palette.radii.lg} !important`)
+    .border('1px solid transparent')
+    .apply(palette.applyFont(palette.font.size.body))
+    .maxHeight(`calc(100vh - ${docLayoutVar('sidebarTop')} - 1.5625rem)`)
+    .overflowY('auto')
+    .overflowX('hidden')
+    .marginRight(docLayoutVar('activeShellPaddingInlineStart'))
+  styleBuilder
+    .select('.nav__header-row', theme)
+    .display('flex')
+    .alignItems('center')
+    .justifyContent('space-between')
+    .gap('0.5em')
+  registerNavAccountPlacementStyles(theme)
+  styleBuilder.select('.nav__search', theme).display('none').width('100%')
+  styleBuilder
+    .select('.nav__search', theme)
+    .media(mediaMax(BREAKPOINTS.sm))
+    .display('block')
+  styleBuilder
+    .select('.nav__header', theme)
+    .apply(palette.applyFont(palette.font.size.xxs, palette.font.weight.w700))
+    .textTransform('uppercase')
+    .color(palette.current.text.subtle)
+    .opacity('0.5')
+  styleBuilder
+    .select('.nav__panel-toggle', theme)
+    .display('none')
+    .alignItems('center')
+    .justifyContent('center')
+    .padding('0')
+    .borderRadius(palette.radii.md)
+    .cursor('pointer')
+    .transition('background 160ms ease, color 160ms ease')
+    .bottom('5rem')
+  styleBuilder.select('.nav__panel-toggle-label', theme).display('inline-block')
+  styleBuilder.select('.nav__panel-toggle-icon', theme).display('none')
+  styleBuilder
+    .select(
+      '.nav__panel-toggle:focus-visible, .nav__collapse-toggle:focus-visible',
+      theme,
+    )
+    .outline(`2px solid ${palette.current.border.focus}`)
+  styleBuilder
+    .select('.nav__collapse-toggle', theme)
+    .display('none')
+    .alignItems('center')
+    .justifyContent('center')
+    .padding('0.25em')
+    .border(`transparent`)
+    .borderRadius(palette.radii.md)
+    .background('transparent')
+    .cursor('pointer')
+    .transition('background 160ms ease, color 160ms ease')
+    .apply(palette.applyFont(palette.font.size.xxxs))
+  // Collapsing belongs to the doc layout, so only a docked menu offers it.
+  styleBuilder
+    .select('.doc-sidebar .nav__collapse-toggle', theme)
+    .display('inline-flex')
+  styleBuilder
+    .select('.nav__collapse-toggle-icon', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('center')
+  styleBuilder.select('.nav__collapse-toggle-icon--open', theme).display('none')
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed .nav__collapse-toggle-icon--collapse',
+      theme,
+    )
+    .display('none')
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed .nav__collapse-toggle-icon--open',
+      theme,
+    )
+    .display('inline-flex')
+  styleBuilder
+    .select('.nav__collapse-toggle-icon svg', theme)
+    .display('block')
+    .fill('none')
+    .stroke('currentColor')
+    .strokeWidth('1.9')
+    .strokeLinecap('round')
+    .strokeLinejoin('round')
+
+  styleBuilder
+    .select(
+      '.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .transformOrigin('left center')
+    .transform('translateX(0)')
+    .zIndex(30)
+  styleBuilder
+    .select(
+      '.template-doc.template-doc--nav-ready.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .transition('transform 260ms ease')
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .width(docLayoutVar('activeRailWidth'))
+    .position('fixed')
+    .left('0')
+    .right('auto')
+    .top(docLayoutVar('sidebarTop'))
+    .height(`calc(100dvh - ${docLayoutVar('sidebarTop')})`)
+    .maxHeight('none')
+    .background('transparent')
+    .boxShadow('none')
+    .overflow('visible')
+    .transform(`translateX(calc(-100% + ${docLayoutVar('activeRailWidth')}))`)
+    .zIndex(140)
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar.doc-sidebar--open',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .width(docLayoutVar('preferredNavWidth'))
+    .background('transparent')
+    .boxShadow('none')
+    .transform('translateX(0)')
+  styleBuilder
+    .select(
+      '.template-doc.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-shell',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .gridTemplateColumns('minmax(0, 1fr)')
+  styleBuilder
+    .select(
+      '.template-doc.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-shell--toc',
+      theme,
+    )
+    .media(mediaAbove(BREAKPOINTS.toc))
+    .gridTemplateColumns(`minmax(0, 1fr) ${docLayoutVar('activeTocWidth')}`)
+  styleBuilder
+    .select(
+      '.template-doc.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-shell--toc',
+      theme,
+    )
+    .media(mediaMax(BREAKPOINTS.toc))
+    .gridTemplateColumns('1fr')
+  styleBuilder
+    .select(
+      '.template-doc.template-doc--nav-collapsed.template-doc--toc-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-shell--toc',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .gridTemplateColumns('1fr')
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar:not(.doc-sidebar--open) .nav__header, .template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar:not(.doc-sidebar--open) .nav__collapse-toggle, .template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar:not(.doc-sidebar--open) .nav__list',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .display('none')
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar:not(.doc-sidebar--open) .nav__menu',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .width(docLayoutVar('activeRailWidth'))
+    .marginLeft('0')
+    .padding('0')
+    .background('transparent')
+    .border('none !important')
+    .borderRadius('0 !important')
+    .overflow('visible')
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar:not(.doc-sidebar--open) .nav__header-row',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .margin('0')
+    .width(docLayoutVar('activeRailWidth'))
+    .height('7.375rem')
+    .position('static')
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar:not(.doc-sidebar--open) .nav__panel-toggle',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .display('inline-flex')
+    .position('absolute')
+    .alignItems('center')
+    .justifyContent('center')
+    .writingMode('vertical-rl')
+    .textOrientation('mixed')
+    .height('auto')
+    .padding('0.6em 0')
+    .width(docLayoutVar('activeRailWidth'))
+    .apply(palette.applyFont(palette.font.size.xxxs, palette.font.weight.w700))
+    .textTransform('uppercase')
+    .userSelect('none')
+    .border(`1px solid ${palette.current.border.default}`)
+    .borderLeft('none')
+    .borderRadius(`0 ${palette.radii.md} ${palette.radii.md} 0`)
+  styleBuilder
+    .select(
+      '.template-doc--nav-collapsed.template-doc--has-nav:not(.template-doc--nav-drawer) .doc-sidebar.doc-sidebar--open .nav__panel-toggle',
+      theme,
+    )
+    .media(mediaMin(BREAKPOINTS.lg))
+    .display('none')
+
+  styleBuilder
+    .select(
+      '.doc-sidebar .nav__panel-toggle, .doc-sidebar .nav__collapse-toggle',
+      theme,
+    )
+    .media(mediaBelow(BREAKPOINTS.lg))
+    .display('none')
+  styleBuilder
+    .select(
+      '.template-doc--nav-drawer .nav__panel-toggle, .template-doc--nav-drawer .nav__collapse-toggle',
+      theme,
+    )
+    .display('none')
+  styleBuilder
+    .select('.nav__list', theme)
+    .listStyle('none')
+    .margin('0')
+    .padding('0')
+  styleBuilder
+    .select('.template-doc--has-nav .doc-sidebar .nav__menu', theme)
+    .media(mediaBelow(BREAKPOINTS.lg))
+    .width('100%')
+    .maxWidth('none')
+    .minHeight(`calc(100dvh - ${docLayoutVar('sidebarTopMobile')})`)
+    .maxHeight('none')
+    .borderRadius('0 !important')
+    .border('0 !important')
+    .padding('1rem 1rem 1.25rem')
+    .height('100%')
+    .overflow('auto')
+    .boxSizing('border-box')
+}
+
+function registerNavAccountPlacementStyles(theme: ThemeMode) {
+  styleBuilder.select('.nav__menu .nav__account', theme).display('none')
+  for (const rule of getTopBarToggleVisibleSelectors(
+    '.doc-sidebar .nav__menu .nav__account',
+  )) {
+    let selector = styleBuilder.select(rule.selector, theme)
+    if (rule.media) selector = selector.media(rule.media)
+    selector.display('inline-block').marginLeft('auto')
+  }
+}
+
+export function registerNavSummaryStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder.select('.nav__summary', theme).position('relative')
+  styleBuilder
+    .select('.nav__chevron', theme)
+    .position('absolute')
+    .left('auto')
+    .right('0.125rem')
+    .transform('rotate(0deg)')
+    .transition('transform 160ms ease')
+    .top('50%')
+    .set('translate', '0 -50%')
+    .color(palette.current.text.subtle)
+  styleBuilder
+    .select('.nav__group[open] > .nav__summary .nav__chevron', theme)
+    .transform('rotate(-90deg)')
+  styleBuilder.select('.nav__summary::marker', theme).content('""')
+}

package/src/standard/pageLinks/pageLinks.ts

@@ -0,0 +1,90 @@
+import type {
+  PageNavigationLink,
+  PageNavigationLinks,
+  TsSsgContext,
+} from '@purestack/ts-common'
+import { resolveTsSsgContext } from '@purestack/ts-common'
+import { defineComponent, html } from 'regor'
+
+export interface PageLinks extends PageNavigationLinks {
+  hasLinks?: boolean
+}
+
+const pageLinksTemplate = html`<Grid
+  r-if="hasLinks"
+  container="nav"
+  columns="2"
+  class="pt-4 bt-1 b-subtle"
+  aria-label="Adjacent pages"
+>
+  <Flex class="min-w-0" justify="start">
+    <BtnLink
+      r-if="previous"
+      :href="previous.url"
+      tone="neutral"
+      variant="outline"
+      size="sm"
+      icon="iconoir:nav-arrow-left"
+      iconPosition="start"
+      rel="prev"
+      class="w-full ws-normal text-start min-w-0 justify-start"
+      :ariaLabel="'Previous: ' + previous.title"
+    >
+      <span class="d-inline-flex flex-column align-flex-start min-w-0">
+        <span class="text-eyebrow fs-xxxs">Previous</span>
+        <span class="min-w-0 lh-2">{{ previous.title }}</span>
+      </span>
+    </BtnLink>
+  </Flex>
+  <Flex class="min-w-0" justify="start" justifySm="end">
+    <BtnLink
+      r-if="next"
+      :href="next.url"
+      tone="neutral"
+      variant="outline"
+      size="sm"
+      icon="iconoir:nav-arrow-right"
+      iconPosition="end"
+      rel="next"
+      class="w-full ws-normal text-end min-w-0 justify-end"
+      :ariaLabel="'Next: ' + next.title"
+    >
+      <span class="d-inline-flex flex-column align-flex-end min-w-0">
+        <span class="text-eyebrow fs-xxxs">Next</span>
+        <span class="min-w-0 lh-2">{{ next.title }}</span>
+      </span>
+    </BtnLink>
+  </Flex>
+</Grid>`
+
+function resolvePageLinks(
+  props: PageLinks,
+  context: TsSsgContext | undefined,
+): PageLinks {
+  const previous = props.previous ?? context?.navigation?.pageLinks?.previous
+  const next = props.next ?? context?.navigation?.pageLinks?.next
+  const resolvedPrevious = resolvePageLink(previous)
+  const resolvedNext = resolvePageLink(next)
+  return {
+    previous: resolvedPrevious,
+    next: resolvedNext,
+    hasLinks: Boolean(resolvedPrevious || resolvedNext),
+  }
+}
+
+function resolvePageLink(link: PageNavigationLink | undefined) {
+  if (!link?.url || !link.title) return undefined
+  return link
+}
+
+function definePageLinksComponent() {
+  return defineComponent<PageLinks>(pageLinksTemplate, {
+    props: ['previous', 'next'],
+    context: (head) => resolvePageLinks(head.props, resolveTsSsgContext(head)),
+  })
+}
+
+export function definePageLinksComponents() {
+  const pageLinks = definePageLinksComponent()
+  return { pageLinks }
+}

package/src/standard/pageScript/pageScript.ts

@@ -0,0 +1,155 @@
+import { resolveTsSsgContext } from '@purestack/ts-common'
+import {
+  dirnamePosix,
+  joinPosix,
+  normalizePosixPath,
+  toOutputAssetRelPath,
+  toPosixPath,
+  urlNormalizer,
+} from '@purestack/ts-util'
+import { type ComponentHead, defineComponent, flatten, html } from 'regor'
+
+export interface PageScript {
+  teleport?: string
+  src?: string
+  sourceRelPath?: string
+  type?: string
+  async?: unknown
+  defer?: unknown
+  integrity?: string
+  nonce?: string
+  crossOrigin?: string
+  referrerPolicy?: string
+  noModule?: unknown
+}
+
+export interface RegorApp {
+  src?: string
+  sourceRelPath?: string
+}
+
+const pageScriptTemplate = html`<script
+  :r-teleport="teleport"
+  :src="src"
+  :type="type"
+  :async="async"
+  :defer="defer"
+  :integrity="integrity"
+  :nonce="nonce"
+  :crossorigin="crossOrigin"
+  :referrerpolicy="referrerPolicy"
+  :nomodule="noModule"
+></script>`
+
+const regorAppTemplate = html`<App><PageScript
+  :src="src"
+  :sourceRelPath="sourceRelPath"
+/></App>`
+
+function definePageScriptComponent() {
+  return defineComponent<PageScript>(pageScriptTemplate, {
+    props: [
+      'teleport',
+      'src',
+      'sourceRelPath',
+      'type',
+      'async',
+      'defer',
+      'integrity',
+      'nonce',
+      'crossOrigin',
+      'referrerPolicy',
+      'noModule',
+    ],
+    context: (head) => resolvePageScript(head),
+  })
+}
+
+function defineRegorAppComponent() {
+  return defineComponent<RegorApp>(regorAppTemplate, {
+    props: ['src', 'sourceRelPath'],
+    context: (head) => ({
+      src: head.props.src,
+      sourceRelPath: head.props.sourceRelPath,
+    }),
+  })
+}
+
+export function defineScriptComponents() {
+  return {
+    pageScript: definePageScriptComponent(),
+    regorApp: defineRegorAppComponent(),
+  }
+}
+
+function resolvePageScript(head: ComponentHead<PageScript>): PageScript {
+  const props = flatten(head.props)
+  const tsSsgContext = resolveTsSsgContext(head)
+  const ownerRelPath =
+    toOptionalString(props.sourceRelPath) ?? tsSsgContext.pageInfo.relPath
+  const src = resolveScriptSrc(
+    props.src,
+    ownerRelPath,
+    (sourceRelPath) => {
+      tsSsgContext.recordScriptEntrypoint(sourceRelPath)
+    },
+    tsSsgContext.resolveScriptPublicPath,
+  )
+  return {
+    ...props,
+    src,
+    type: toOptionalString(props.type) ?? 'module',
+    teleport: toOptionalString(props.teleport) ?? 'body',
+  }
+}
+
+function resolveScriptSrc(
+  src: unknown,
+  pageRelPath: string,
+  onSourceResolved?: (sourceRelPath: string) => void,
+  resolveScriptPublicPath?: (sourceRelPath: string) => string,
+) {
+  const normalized = toOptionalString(src)
+  if (!normalized) {
+    throw new Error('PageScript requires a non-empty "src" prop.')
+  }
+  if (isExternalSrc(normalized)) return normalized
+  const { base, suffix } = urlNormalizer.splitSuffix(normalized)
+  const sourceRelPath = resolveSourceRelPath(base, pageRelPath)
+  onSourceResolved?.(sourceRelPath)
+  const publicPath =
+    resolveScriptPublicPath?.(sourceRelPath) ??
+    `/${toOutputAssetRelPath(sourceRelPath)}`
+  return `${publicPath}${suffix}`
+}
+
+function resolveSourceRelPath(value: string, pageRelPath: string) {
+  if (value.startsWith('/')) {
+    return trimLeadingSlashes(value)
+  }
+  const sourceDir = dirnamePosix(toPosixPath(pageRelPath))
+  const normalizedSourceDir = sourceDir === '.' ? '' : sourceDir
+  const resolved = normalizePosixPath(joinPosix(normalizedSourceDir, value))
+  if (resolved === '..' || resolved.startsWith('../')) {
+    throw new Error(`PageScript src resolves outside content root: "${value}"`)
+  }
+  return resolved
+}
+
+function isExternalSrc(value: string) {
+  return (
+    value.startsWith('//') ||
+    value.startsWith('http://') ||
+    value.startsWith('https://')
+  )
+}
+
+function trimLeadingSlashes(value: string) {
+  return value.replace(/^\/+/, '')
+}
+
+function toOptionalString(value: unknown) {
+  if (value === null || value === undefined) return undefined
+  const trimmed = String(value).trim()
+  return trimmed.length > 0 ? trimmed : undefined
+}