@astronox/core 0.1.0

package/src/components/content/MarkdownContent/MarkdownContent.css

@@ -0,0 +1,358 @@
+.markdown-content {
+  display: grid;
+  min-width: 0;
+  gap: var(--nox-space-5);
+  color: var(--nox-text);
+}
+
+.markdown-content__section {
+  display: grid;
+  min-width: 0;
+  gap: var(--nox-space-3);
+}
+
+.markdown-content__section-title,
+.markdown-content__heading,
+.markdown-content__resource-title {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.markdown-content__section-title,
+.markdown-content__heading {
+  color: var(--nox-text-muted);
+  font-family: var(--nox-font-body);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: var(--nox-line-height-tight);
+  text-transform: uppercase;
+}
+
+.markdown-content
+  :is(
+    .markdown-content__section-title,
+    .markdown-content__heading
+  )[data-markdown-heading-level='2'] {
+  font-size: var(--nox-font-size-xl);
+}
+
+.markdown-content
+  :is(
+    .markdown-content__section-title,
+    .markdown-content__heading
+  )[data-markdown-heading-level='3'] {
+  font-size: var(--nox-font-size-lg);
+}
+
+.markdown-content
+  :is(
+    .markdown-content__section-title,
+    .markdown-content__heading
+  )[data-markdown-heading-level='4'] {
+  font-size: var(--nox-font-size-md);
+}
+
+.markdown-content
+  :is(
+    .markdown-content__section-title,
+    .markdown-content__heading
+  )[data-markdown-heading-level='5'] {
+  font-size: var(--nox-font-size-sm);
+}
+
+.markdown-content
+  :is(
+    .markdown-content__section-title,
+    .markdown-content__heading
+  )[data-markdown-heading-level='6'] {
+  font-size: var(--nox-font-size-xs);
+}
+
+.markdown-content__section-body,
+.markdown-content__quote {
+  display: grid;
+  min-width: 0;
+  gap: var(--nox-space-2);
+}
+
+.markdown-content__list-item-body {
+  display: grid;
+  min-width: 0;
+  gap: var(--nox-space-1);
+}
+
+.markdown-content__paragraph {
+  min-width: 0;
+  margin: 0;
+  line-height: 1.55;
+}
+
+.markdown-content__list {
+  display: grid;
+  min-width: 0;
+  margin: 0;
+  padding-inline-start: 1.25rem;
+  gap: 0;
+}
+
+.markdown-content__list .markdown-content__list {
+  padding-inline-start: var(--nox-space-5);
+}
+
+.markdown-content__list[data-markdown-has-resources] {
+  padding-inline-start: 0;
+}
+
+.markdown-content__list[data-markdown-has-headings] {
+  gap: var(--nox-space-2);
+}
+
+.markdown-content__list-item {
+  min-width: 0;
+  padding-inline-start: var(--nox-space-1);
+  line-height: 1.4;
+}
+
+.markdown-content__list-item[data-markdown-has-marker] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--nox-space-2);
+  padding-inline-start: 0;
+  list-style: none;
+}
+
+.markdown-content__list-item[data-markdown-resource] {
+  list-style: none;
+}
+
+.markdown-content__list-item[data-markdown-resource-layout='compact'] {
+  padding-inline-start: 0;
+}
+
+.markdown-content__list-item[data-markdown-resource-layout='detailed'] {
+  padding: var(--nox-space-2) 0;
+}
+
+.markdown-content__list-item[data-markdown-resource-media='lead'] {
+  display: grid;
+  grid-template-columns: 5.5rem minmax(0, 1fr);
+  align-items: center;
+  gap: var(--nox-space-4);
+}
+
+.markdown-content__list-item[data-markdown-resource-media='lead'][data-markdown-resource-media-scale='compact']
+  .markdown-content__lead-media {
+  inline-size: var(--nox-compact-media-responsive-size);
+  block-size: var(--nox-compact-media-responsive-size);
+  justify-self: center;
+}
+
+.markdown-content__list-item[data-markdown-resource-layout='detailed']
+  + .markdown-content__list-item[data-markdown-resource-layout='detailed'] {
+  border-top: var(--nox-border-width) solid var(--nox-border);
+}
+
+.markdown-content__list-item[data-markdown-resource]
+  > .markdown-content__list-item-body {
+  align-content: center;
+}
+
+.markdown-content__list-item[data-markdown-resource-layout='compact']
+  > .markdown-content__list-item-body {
+  gap: 0;
+}
+
+.markdown-content__list-item[data-markdown-resource]
+  .markdown-content__list {
+  padding-inline-start: 0;
+  list-style: none;
+}
+
+.markdown-content__resource-title {
+  font-size: var(--nox-font-size-md);
+  font-weight: var(--nox-font-weight-strong);
+  line-height: var(--nox-line-height-tight);
+}
+
+.markdown-content__list-item[data-markdown-resource-layout='compact']
+  .markdown-content__resource-title {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-content__resource-heading {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--nox-space-2);
+}
+
+.markdown-content__lead-media {
+  inline-size: 5.5rem;
+  block-size: 5.5rem;
+}
+
+.markdown-content__inline-media {
+  flex: none;
+  inline-size: var(--nox-compact-media-responsive-size);
+  block-size: var(--nox-compact-media-responsive-size);
+}
+
+.markdown-content__change {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0 var(--nox-space-3);
+  line-height: 1.4;
+}
+
+.markdown-content__change-label {
+  min-width: 0;
+  flex: none;
+  font-weight: var(--nox-font-weight-medium);
+  overflow-wrap: anywhere;
+}
+
+.markdown-content__change-values,
+.markdown-content__change-transition,
+.markdown-content__change-delta,
+.markdown-content__symbol {
+  display: inline-flex;
+  align-items: center;
+}
+
+.markdown-content__change-values {
+  max-width: 100%;
+  min-width: 0;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--nox-space-1);
+}
+
+.markdown-content__change-transition {
+  flex: none;
+  gap: var(--nox-space-1);
+  white-space: nowrap;
+}
+
+.markdown-content__change-delta {
+  color: var(--nox-tone-color);
+  font-weight: var(--nox-font-weight-strong);
+  gap: 0.1em;
+}
+
+.markdown-content__change-suffix {
+  min-width: 0;
+  color: var(--nox-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.markdown-content__symbol {
+  flex: none;
+  justify-content: center;
+  color: var(--nox-tone-color, currentColor);
+  gap: 0.25em;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.markdown-content__list-item[data-markdown-has-marker]
+  > .markdown-content__symbol {
+  min-block-size: 1.4em;
+}
+
+.markdown-content__symbol-icon {
+  display: block;
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+.markdown-content__symbol[data-markdown-symbol^='terrain-']
+  .markdown-content__symbol-icon {
+  inline-size: 1.25em;
+  block-size: 1.25em;
+}
+
+.markdown-content__symbol-label {
+  color: var(--nox-text);
+}
+
+.markdown-content__quote {
+  margin: 0;
+  padding: var(--nox-space-3) var(--nox-space-4);
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-inline-start-width: calc(var(--nox-border-width) * 3);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-surface-muted);
+  color: var(--nox-text);
+}
+
+.markdown-content__inline-code {
+  padding: 0.1em 0.35em;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-surface-muted);
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 0.9em;
+}
+
+.markdown-content__link {
+  color: var(--nox-tone-color);
+  overflow-wrap: anywhere;
+  text-decoration: none;
+}
+
+.markdown-content__link[data-markdown-link-treatment='reference'] {
+  font-weight: var(--nox-font-weight-strong);
+}
+
+.markdown-content [data-tone] {
+  color: var(--nox-tone-color);
+}
+
+.markdown-content__visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@container (width < 32rem) {
+  .markdown-content {
+    gap: var(--nox-space-4);
+  }
+
+  .markdown-content__list-item[data-markdown-resource-media='lead'] {
+    grid-template-columns: 4rem minmax(0, 1fr);
+    gap: var(--nox-space-3);
+  }
+
+  .markdown-content__lead-media {
+    inline-size: 4rem;
+    block-size: 4rem;
+  }
+
+  .markdown-content__change {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+    gap: var(--nox-space-1);
+  }
+
+  .markdown-content__change-label,
+  .markdown-content__change-values {
+    inline-size: 100%;
+  }
+
+  .markdown-content__change-values {
+    box-sizing: border-box;
+    padding-inline-start: var(--nox-space-3);
+  }
+}

package/src/components/content/MarkdownContent/MarkdownInline.astro

@@ -0,0 +1,44 @@
+---
+import MarkdownSymbol from './MarkdownSymbol.astro';
+import type { MarkdownInline } from './contracts';
+
+type Props = {
+  node: MarkdownInline;
+};
+
+const { node }: Props = Astro.props;
+---
+
+{
+  node.type === 'text' ? (
+    node.lang ? (
+      <span lang={node.lang}>{node.value}</span>
+    ) : (
+      node.value
+    )
+  ) : node.type === 'symbol' ? (
+    <MarkdownSymbol node={node} />
+  ) : node.type === 'strong' ? (
+    <strong>
+      {node.children.map((child) => <Astro.self node={child} />)}
+    </strong>
+  ) : node.type === 'emphasis' ? (
+    <em>{node.children.map((child) => <Astro.self node={child} />)}</em>
+  ) : node.type === 'code' ? (
+    <code class="markdown-content__inline-code">{node.value}</code>
+  ) : node.type === 'link' ? (
+    <a
+      class="markdown-content__link"
+      data-markdown-link-treatment={node.treatment}
+      data-tone="info"
+      href={node.href}
+      lang={node.lang}
+      rel={node.external ? 'noopener noreferrer' : undefined}
+      target={node.external ? '_blank' : undefined}
+    >
+      {node.children.map((child) => <Astro.self node={child} />)}
+    </a>
+  ) : (
+    <br />
+  )
+}

package/src/components/content/MarkdownContent/MarkdownNode.astro

@@ -0,0 +1,280 @@
+---
+import CodeBlock from '../CodeBlock/CodeBlock.astro';
+import type {
+  CodeBlockCopy,
+} from '../CodeBlock/contracts';
+import Media from '../../../primitives/media/Media/Media.astro';
+import Separator from '../../../primitives/layout/Separator/Separator.astro';
+import type { Tone } from '../../../theme/contracts';
+import MarkdownInline from './MarkdownInline.astro';
+import MarkdownSymbol from './MarkdownSymbol.astro';
+import type {
+  MarkdownBlock,
+  MarkdownHeadingLevel,
+  MarkdownListMarker,
+  MarkdownSection,
+} from './contracts';
+
+type Props = {
+  codeBlockCopy?: CodeBlockCopy;
+  node: MarkdownBlock | MarkdownSection;
+};
+
+function toHeadingTag(
+  level: MarkdownHeadingLevel,
+): 'h2' | 'h3' | 'h4' | 'h5' | 'h6' {
+  return `h${level}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+const defaultListMarker = {
+  symbol: 'bullet',
+  tone: 'neutral',
+} as const satisfies MarkdownListMarker;
+const nestedListMarker = {
+  symbol: 'arrow-right',
+  tone: 'neutral',
+} as const satisfies MarkdownListMarker;
+
+const codeBlockTones = new Set<Tone>([
+  'neutral',
+  'info',
+  'success',
+  'warning',
+  'danger',
+]);
+
+function normalizeCodeLanguage(language?: string): string | undefined {
+  const normalized = language?.trim().toLowerCase();
+  return normalized || undefined;
+}
+
+function resolveCodeBlockTone(language?: string): Tone {
+  const normalized = normalizeCodeLanguage(language);
+  return normalized && codeBlockTones.has(normalized as Tone)
+    ? (normalized as Tone)
+    : 'neutral';
+}
+
+const { codeBlockCopy, node }: Props = Astro.props;
+const HeadingTag =
+  node.type === 'section' || node.type === 'heading'
+    ? toHeadingTag(node.level)
+    : 'div';
+const listItems =
+  node.type === 'list'
+    ? node.items.map((item) => ({
+        item,
+        marker:
+          item.marker ??
+          (item.heading
+            ? nestedListMarker
+            : item.resource
+              ? undefined
+              : defaultListMarker),
+      }))
+    : [];
+---
+
+{
+  node.type === 'section' ? (
+    <section
+      class="markdown-content__section"
+      aria-labelledby={node.id}
+    >
+      <HeadingTag
+        class="markdown-content__section-title"
+        data-markdown-heading-level={node.level}
+        id={node.id}
+      >
+        {node.title}
+      </HeadingTag>
+      <div class="markdown-content__section-body">
+        {
+          node.blocks.map((block) => (
+            <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
+          ))
+        }
+      </div>
+    </section>
+  ) : node.type === 'paragraph' ? (
+    <p class="markdown-content__paragraph">
+      {node.children.map((child) => <MarkdownInline node={child} />)}
+    </p>
+  ) : node.type === 'heading' ? (
+    <HeadingTag
+      class="markdown-content__heading"
+      data-markdown-heading-level={node.level}
+      id={node.id}
+    >
+      {node.children.map((child) => <MarkdownInline node={child} />)}
+    </HeadingTag>
+  ) : node.type === 'change' ? (
+    <div class="markdown-content__change">
+      <span class="markdown-content__change-label">
+        {node.label.map((child) => <MarkdownInline node={child} />)}
+      </span>
+      {node.presentation === 'statement' ? (
+        <span class="markdown-content__change-values">
+          {node.value.map((child) => <MarkdownInline node={child} />)}
+        </span>
+      ) : (
+        <span class="markdown-content__change-values" lang={node.valueLang}>
+          <span class="markdown-content__change-transition">
+            <span>{node.before}</span>
+            <MarkdownSymbol
+              node={{
+                type: 'symbol',
+                name: 'arrow-right',
+                accessibleLabel: node.transitionLabel,
+                lang: node.valueLang,
+              }}
+            />
+            <span>{node.after}</span>
+            {node.delta ? (
+              <span
+                class="markdown-content__change-delta"
+                data-tone={node.delta.tone}
+              >
+                <span aria-hidden="true">(</span>
+                {node.delta.sign === 'neutral' ? null : (
+                  <>
+                    <span class="markdown-content__visually-hidden">
+                      {node.delta.accessibleLabel}
+                    </span>
+                    <span aria-hidden="true">
+                      {node.delta.sign === 'plus' ? '+' : '-'}
+                    </span>
+                  </>
+                )}
+                <span>{node.delta.value}</span>
+                <span aria-hidden="true">)</span>
+              </span>
+            ) : null}
+          </span>
+          {node.suffix?.length ? (
+            <span class="markdown-content__change-suffix">
+              {node.suffix.map((child) => (
+                <MarkdownInline node={child} />
+              ))}
+            </span>
+          ) : null}
+        </span>
+      )}
+    </div>
+  ) : node.type === 'list' ? (
+    <ul
+      class="markdown-content__list"
+      data-markdown-has-headings={
+        node.items.some((item) => item.heading) ? true : undefined
+      }
+      data-markdown-has-resources={
+        node.items.some((item) => item.resource) ? true : undefined
+      }
+    >
+      {listItems.map(({ item, marker }) => (
+        <li
+          class="markdown-content__list-item"
+          data-markdown-has-marker={marker ? true : undefined}
+          data-markdown-resource={item.resource ? true : undefined}
+          data-markdown-resource-layout={item.resource?.layout}
+          data-markdown-resource-media={item.resource?.mediaPlacement}
+          data-markdown-resource-media-scale={item.resource?.mediaScale}
+        >
+          {item.resource?.mediaPlacement === 'lead' ? (
+            <Media
+              class="markdown-content__lead-media"
+              media={item.resource.media}
+              size="fill"
+              upscale={
+                item.resource.mediaScale === 'compact'
+                  ? 'prevent'
+                  : undefined
+              }
+            />
+          ) : null}
+          {marker ? (
+            <MarkdownSymbol
+              node={{
+                type: 'symbol',
+                name: marker.symbol,
+                accessibleLabel: marker.label,
+                lang: marker.lang,
+                tone: marker.tone,
+              }}
+            />
+          ) : null}
+          <div class="markdown-content__list-item-body">
+            {item.heading ? (
+              <h5
+                class="markdown-content__heading"
+                data-markdown-heading-level="5"
+              >
+                {item.heading.map((child) => (
+                  <MarkdownInline node={child} />
+                ))}
+              </h5>
+            ) : item.resource ? (
+              <div class="markdown-content__resource-heading">
+                {item.resource.mediaPlacement === 'inline' ? (
+                  <Media
+                    class="markdown-content__inline-media"
+                    media={item.resource.media}
+                    upscale={
+                      item.resource.mediaScale === 'compact'
+                        ? 'prevent'
+                        : undefined
+                    }
+                  />
+                ) : null}
+                {item.resource.layout === 'detailed' ? (
+                  <h3 class="markdown-content__resource-title">
+                    {item.resource.title.map((child) => (
+                      <MarkdownInline node={child} />
+                    ))}
+                  </h3>
+                ) : (
+                  <span class="markdown-content__resource-title">
+                    {item.resource.title.map((child) => (
+                      <MarkdownInline node={child} />
+                    ))}
+                  </span>
+                )}
+              </div>
+            ) : null}
+            {
+              item.children.map((block) => (
+                <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
+              ))
+            }
+          </div>
+        </li>
+      ))}
+    </ul>
+  ) : node.type === 'quote' ? (
+    <blockquote
+      class="markdown-content__quote"
+      data-tone={node.tone ?? 'neutral'}
+    >
+      {
+        node.children.map((block) => (
+          <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
+        ))
+      }
+    </blockquote>
+  ) : node.type === 'separator' ? (
+    <Separator bleed emphasis={node.emphasis} />
+  ) : (
+    <CodeBlock
+      aria-label={node.language}
+      copy={codeBlockCopy}
+      presentation={
+        normalizeCodeLanguage(node.language) === 'markdown'
+          ? 'light'
+          : 'default'
+      }
+      text={node.value}
+      tone={resolveCodeBlockTone(node.language)}
+      wrap={false}
+    />
+  )
+}