@prosefly/astro-components 0.1.0

package/dist/mdx/Callout.astro

@@ -0,0 +1,124 @@
+---
+import Icon from './Icon.astro';
+
+interface Props {
+  title?: string;
+  type?: 'note' | 'tip' | 'warning' | 'danger';
+}
+
+const iconNames = {
+  danger: 'lucide:badge-alert',
+  note: 'lucide:info',
+  tip: 'lucide:lightbulb',
+  warning: 'lucide:triangle-alert',
+} as const;
+const { title, type = 'note' } = Astro.props;
+const hasTitle = Boolean(title);
+---
+
+<aside class="pl-callout" data-has-title={hasTitle ? 'true' : 'false'} data-type={type}>
+  <span class="pl-callout__icon" aria-hidden="true">
+    <Icon name={iconNames[type]} />
+  </span>
+  <div class="pl-callout__content">
+    {hasTitle && <p class="pl-callout__title">{title}</p>}
+    <div class="pl-callout__slot">
+      <slot />
+    </div>
+  </div>
+</aside>
+
+<style>
+  .pl-callout {
+    --pl-callout-color: var(--pl-accent, #4f46e5);
+    --pl-callout-ink: var(--pl-accent, #4f46e5);
+    --pl-callout-bg: var(
+      --pl-accent-soft,
+      color-mix(in oklab, var(--pl-accent, #4f46e5) 8%, var(--pl-background, #ffffff))
+    );
+
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.875rem;
+    margin-block: 1.5rem;
+    border: 1px solid color-mix(in oklab, var(--pl-callout-color) 24%, var(--pl-surface, #f4f6f8));
+    border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
+    background: var(--pl-callout-bg);
+    color: var(--pl-text, #182230);
+    padding: 1rem 1.25rem;
+  }
+
+  .pl-callout[data-type='tip'] {
+    --pl-callout-color: oklch(0.64 0.16 155);
+    --pl-callout-ink: oklch(0.45 0.13 155);
+    --pl-callout-bg: color-mix(in oklab, oklch(0.64 0.16 155) 10%, var(--pl-background, #ffffff));
+  }
+
+  .pl-callout[data-type='warning'] {
+    --pl-callout-color: oklch(0.74 0.16 80);
+    --pl-callout-ink: oklch(0.5 0.12 80);
+    --pl-callout-bg: color-mix(in oklab, oklch(0.74 0.16 80) 12%, var(--pl-background, #ffffff));
+  }
+
+  .pl-callout[data-type='danger'] {
+    --pl-callout-color: oklch(0.62 0.2 25);
+    --pl-callout-ink: oklch(0.52 0.16 25);
+    --pl-callout-bg: color-mix(in oklab, oklch(0.62 0.2 25) 10%, var(--pl-background, #ffffff));
+  }
+
+  .pl-callout[data-has-title='false'] {
+    align-items: center;
+  }
+
+  .pl-callout__icon {
+    align-items: center;
+    color: var(--pl-callout-ink);
+    display: inline-flex;
+    height: 1.25rem;
+    justify-content: center;
+    line-height: 0;
+    margin-block-start: 0.125rem;
+    width: 1.25rem;
+  }
+
+  .pl-callout[data-has-title='false'] .pl-callout__icon {
+    margin-block-start: 0;
+  }
+
+  .pl-callout__icon :global(.pl-icon) {
+    display: block;
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+  .pl-callout__title {
+    color: var(--pl-callout-ink);
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.5;
+    margin: 0 0 0.5rem;
+  }
+
+  .pl-callout__slot {
+    color: var(--pl-text, #182230);
+    font-size: 0.9375rem;
+    line-height: 1.75;
+  }
+
+  .pl-callout[data-has-title='false'] .pl-callout__slot {
+    color: var(--pl-callout-ink);
+    font-size: 1rem;
+  }
+
+  .pl-callout__slot :global(> * + *) {
+    margin-top: 0.75rem;
+  }
+
+  .pl-callout__slot :global(> :first-child) {
+    margin-top: 0;
+  }
+
+  .pl-callout__slot :global(> :last-child) {
+    margin-bottom: 0;
+  }
+</style>

package/dist/mdx/Card.astro

@@ -0,0 +1,138 @@
+---
+import Icon from './Icon.astro';
+
+interface Props {
+  title?: string;
+  href?: string;
+  external?: boolean;
+  icon?: string;
+}
+
+const {
+  title,
+  href,
+  external = false,
+  icon,
+  class: _className,
+  ...attrs
+} = Astro.props as Props & { class?: unknown } & Record<string, unknown>;
+const Tag = href ? 'a' : 'article';
+const linkAttrs = href
+  ? {
+      href,
+      rel: external ? 'noreferrer' : undefined,
+      target: external ? '_blank' : undefined,
+    }
+  : {};
+---
+
+<Tag
+  class:list={['pl-card', href && 'pl-card--link']}
+  data-external={href && external ? 'true' : undefined}
+  {...linkAttrs}
+  {...attrs}
+>
+  <div class="pl-card__layout">
+    {
+      icon && (
+        <span aria-hidden="true" class="pl-card__icon">
+          <Icon name={icon} />
+        </span>
+      )
+    }
+    <div class="pl-card__body">
+      {title && <h3 class="pl-card__title">{title}</h3>}
+      <div class="pl-card__content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</Tag>
+
+<style>
+  .pl-card {
+    background: transparent;
+    border: 1px solid
+      color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
+    border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
+    color: inherit;
+    display: block;
+    padding: var(--pl-card-padding, 1rem);
+    text-decoration: none;
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease;
+  }
+
+  .pl-card--link:hover {
+    background: transparent;
+    border-color: var(--pl-accent, #4f46e5);
+  }
+
+  .pl-card--link:focus-visible {
+    outline: 2px solid var(--pl-accent, #4f46e5);
+    outline-offset: 2px;
+  }
+
+  .pl-card__layout {
+    display: grid;
+    gap: var(--pl-card-layout-gap, 0.75rem);
+  }
+
+  .pl-card__body {
+    display: grid;
+    gap: var(--pl-card-body-gap, 0.375rem);
+    min-width: 0;
+  }
+
+  .pl-card__icon {
+    align-items: center;
+    background: var(
+      --pl-accent-soft,
+      color-mix(in oklab, var(--pl-accent, #4f46e5) 12%, white)
+    );
+    border-radius: var(--pl-radius-md, 0.5rem);
+    color: var(--pl-accent, #4f46e5);
+    display: inline-flex;
+    height: var(--pl-card-icon-size, 2.25rem);
+    justify-content: center;
+    line-height: 0;
+    width: var(--pl-card-icon-size, 2.25rem);
+  }
+
+  .pl-card--link:hover .pl-card__icon {
+    color: var(--pl-accent, #4f46e5);
+  }
+
+  .pl-card__icon :global(.pl-icon) {
+    display: block;
+    height: var(--pl-card-icon-glyph-size, 1.125rem);
+    width: var(--pl-card-icon-glyph-size, 1.125rem);
+  }
+
+  .pl-card__title {
+    color: var(--pl-text-strong, var(--pl-text, #182230));
+    font-size: var(--pl-card-title-size, 0.9375rem);
+    font-weight: 600;
+    line-height: var(--pl-card-title-line-height, 1.375rem);
+    margin: 0;
+  }
+
+  .pl-card__content {
+    color: var(--pl-text-muted, #667085);
+    font-size: var(--pl-card-content-size, 0.875rem);
+    line-height: var(--pl-card-content-line-height, 1.625);
+  }
+
+  .pl-card__content :global(> :first-child) {
+    margin-top: 0;
+  }
+
+  .pl-card__content :global(> :last-child) {
+    margin-bottom: 0;
+  }
+
+  .pl-card__content :global(> * + *) {
+    margin-top: var(--pl-card-content-gap, 0.5rem);
+  }
+</style>

package/dist/mdx/CardGrid.astro

@@ -0,0 +1,18 @@
+<div class="pl-card-grid">
+  <slot />
+</div>
+
+<style>
+  .pl-card-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--pl-card-grid-gap, 1rem);
+    margin-block: var(--pl-card-grid-margin, 2rem);
+  }
+
+  @media (min-width: 48rem) {
+    .pl-card-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+</style>

package/dist/mdx/FileTree.astro

@@ -0,0 +1,231 @@
+---
+import FileTreeItem from './FileTreeItem.astro';
+import { parseFileTree } from './rehype-file-tree';
+
+const fileTreeHtml = await Astro.slots.render('default');
+const entries = parseFileTree(fileTreeHtml);
+---
+
+<ul class="pl-file-tree" role="list">
+  {entries.map((entry) => <FileTreeItem entry={entry} />)}
+</ul>
+
+<style is:global>
+  .pl-file-tree {
+    --pl-file-tree-border: color-mix(
+      in oklab,
+      var(--pl-text-muted, #667085) 18%,
+      transparent
+    );
+    --pl-file-tree-line: color-mix(
+      in oklab,
+      var(--pl-text-muted, #667085) 16%,
+      transparent
+    );
+
+    background: var(--pl-background, #ffffff);
+    border: 1px solid var(--pl-file-tree-border);
+    border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
+    color: var(--pl-text, #344054);
+    font-family:
+      var(--pl-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    list-style: none;
+    margin-block: 1.5rem;
+    overflow-x: auto;
+    padding: 0.75rem;
+  }
+
+  .pl-file-tree,
+  .pl-file-tree ul {
+    list-style: none;
+  }
+
+  .pl-file-tree :where(ul, li, p) {
+    margin: 0;
+  }
+
+  .pl-file-tree :where(ul) {
+    padding: 0;
+  }
+
+  .pl-file-tree__list {
+    margin-block-start: 0.125rem;
+    padding-inline-start: 1.5rem;
+    position: relative;
+  }
+
+  .pl-file-tree__list::before {
+    background: var(--pl-file-tree-line);
+    bottom: 0.75rem;
+    content: "";
+    inset-inline-start: 0.625rem;
+    position: absolute;
+    top: 0;
+    width: 1px;
+  }
+
+  .pl-file-tree__item {
+    margin: 0;
+    min-width: max-content;
+    padding: 0;
+  }
+
+  .pl-file-tree__entry {
+    align-items: center;
+    border-radius: var(--pl-radius-md, 0.5rem);
+    display: inline-flex;
+    gap: 0.375rem;
+    min-height: 1.75rem;
+    white-space: nowrap;
+  }
+
+  .pl-file-tree__target {
+    align-items: center;
+    border-radius: var(--pl-radius-md, 0.5rem);
+    box-sizing: border-box;
+    display: inline-flex;
+    gap: 0.375rem;
+    min-height: 1.625rem;
+    padding: 0.125rem 0.5rem;
+  }
+
+  .pl-file-tree__target--highlighted {
+    background: var(
+      --pl-accent-soft,
+      color-mix(in oklab, var(--pl-accent, #4f46e5) 12%, var(--pl-background, #ffffff))
+    );
+    color: var(--pl-text-strong, var(--pl-text, #182230));
+    font-weight: 600;
+  }
+
+  .pl-file-tree__summary {
+    cursor: pointer;
+    display: block;
+    list-style: none;
+  }
+
+  .pl-file-tree__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .pl-file-tree__summary:hover .pl-file-tree__target:not(.pl-file-tree__target--highlighted) {
+    background: var(--pl-surface, #f4f6f8);
+  }
+
+  .pl-file-tree__chevron {
+    align-items: center;
+    color: var(--pl-text-muted, #667085);
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    line-height: 0;
+    transition: transform 160ms ease;
+  }
+
+  .pl-file-tree__details[open] > .pl-file-tree__summary .pl-file-tree__chevron {
+    transform: rotate(90deg);
+  }
+
+  .pl-file-tree__icon {
+    align-items: center;
+    color: var(--pl-text-muted, #667085);
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  .pl-file-tree__icon .pl-icon,
+  .pl-file-tree__icon-closed .pl-icon,
+  .pl-file-tree__icon-open .pl-icon,
+  .pl-file-tree__chevron .pl-icon {
+    display: block;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  .pl-file-tree__icon-open,
+  .pl-file-tree__details[open] > .pl-file-tree__summary .pl-file-tree__icon-closed {
+    display: none;
+  }
+
+  .pl-file-tree__details[open] > .pl-file-tree__summary .pl-file-tree__icon-open {
+    display: inline-flex;
+  }
+
+  .pl-file-tree__icon[data-kind='directory'] {
+    color: color-mix(in oklab, var(--pl-accent, #4f46e5) 82%, var(--pl-text, #344054));
+  }
+
+  .pl-file-tree__icon[data-kind='code'] {
+    color: oklch(0.58 0.18 250);
+  }
+
+  .pl-file-tree__icon[data-kind='config'] {
+    color: oklch(0.56 0.14 155);
+  }
+
+  .pl-file-tree__icon[data-kind='style'] {
+    color: oklch(0.58 0.19 320);
+  }
+
+  .pl-file-tree__icon[data-kind='image'] {
+    color: oklch(0.58 0.16 80);
+  }
+
+  .pl-file-tree__name {
+    color: var(--pl-text, #344054);
+  }
+
+  .pl-file-tree__target--highlighted .pl-file-tree__name {
+    color: inherit;
+  }
+
+  .pl-file-tree__name code {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    color: inherit;
+    font: inherit;
+    padding: 0;
+  }
+
+  .pl-file-tree__comment {
+    color: var(--pl-text-muted, #667085);
+    font-family:
+      var(--pl-font-sans, ui-sans-serif, system-ui, sans-serif);
+    font-size: 0.8125rem;
+  }
+
+  .pl-file-tree__comment :where(strong) {
+    color: var(--pl-text-strong, var(--pl-text, #182230));
+    font-weight: 600;
+  }
+
+  .pl-file-tree__comment :where(code) {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    padding: 0;
+  }
+
+  .pl-file-tree__item--placeholder > .pl-file-tree__entry,
+  .pl-file-tree__item--placeholder .pl-file-tree__name {
+    color: var(--pl-text-muted, #667085);
+  }
+
+  .pl-file-tree__sr-only {
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+</style>

package/dist/mdx/FileTreeItem.astro

@@ -0,0 +1,97 @@
+---
+import Icon from './Icon.astro';
+import FileTreeItem from './FileTreeItem.astro';
+import type { FileTreeEntry } from './rehype-file-tree';
+
+interface Props {
+  entry: FileTreeEntry;
+}
+
+const { entry } = Astro.props;
+const placeholderEntry: FileTreeEntry = {
+  children: [],
+  commentHtml: '',
+  highlighted: false,
+  isDirectory: false,
+  isPlaceholder: true,
+  kind: 'file',
+  nameHtml: '…',
+  nameText: '…',
+};
+const children = entry.children.length > 0 ? entry.children : [placeholderEntry];
+---
+
+<li
+  class:list={[
+    'pl-file-tree__item',
+    entry.isDirectory ? 'pl-file-tree__item--directory' : 'pl-file-tree__item--file',
+    entry.isPlaceholder && 'pl-file-tree__item--placeholder',
+    entry.highlighted && 'pl-file-tree__item--highlighted',
+  ]}
+>
+  {
+    entry.isDirectory ? (
+      <details class="pl-file-tree__details" open={entry.children.length > 0 ? true : undefined}>
+        <summary class="pl-file-tree__summary">
+          <span class="pl-file-tree__entry">
+            {!entry.isPlaceholder && (
+              <span aria-hidden="true" class="pl-file-tree__chevron">
+                <Icon name="lucide:chevron-right" />
+              </span>
+            )}
+            <span
+              class:list={[
+                'pl-file-tree__target',
+                entry.highlighted && 'pl-file-tree__target--highlighted',
+              ]}
+            >
+              {!entry.isPlaceholder && (
+                <span aria-hidden="true" class="pl-file-tree__icon" data-kind={entry.kind}>
+                  <span class="pl-file-tree__icon-closed">
+                    <Icon name="lucide:folder" />
+                  </span>
+                  <span class="pl-file-tree__icon-open">
+                    <Icon name="lucide:folder-open" />
+                  </span>
+                </span>
+              )}
+              <span class="pl-file-tree__name">
+                {!entry.isPlaceholder && <span class="pl-file-tree__sr-only">Directory </span>}
+                <Fragment set:html={entry.nameHtml} />
+              </span>
+            </span>
+            {
+              entry.commentHtml && (
+                <span class="pl-file-tree__comment" set:html={entry.commentHtml} />
+              )
+            }
+          </span>
+        </summary>
+        <ul class="pl-file-tree__list" role="list">
+          {children.map((child) => <FileTreeItem entry={child} />)}
+        </ul>
+      </details>
+    ) : (
+      <span class="pl-file-tree__entry">
+        <span
+          class:list={[
+            'pl-file-tree__target',
+            entry.highlighted && 'pl-file-tree__target--highlighted',
+          ]}
+        >
+          {!entry.isPlaceholder && (
+            <span aria-hidden="true" class="pl-file-tree__icon" data-kind={entry.kind}>
+              <Icon name="lucide:file" />
+            </span>
+          )}
+          <span class="pl-file-tree__name" set:html={entry.nameHtml} />
+        </span>
+        {
+          entry.commentHtml && (
+            <span class="pl-file-tree__comment" set:html={entry.commentHtml} />
+          )
+        }
+      </span>
+    )
+  }
+</li>