@prosefly/astro-components 0.1.0

package/dist/mdx/Icon.astro

@@ -0,0 +1,132 @@
+---
+import { getIconData, iconToSVG, replaceIDs, validateIconSet } from '@iconify/utils';
+
+interface Props {
+  name: string;
+  title?: string;
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+  class?: string;
+  focusable?: string;
+  apiBase?: string;
+}
+
+type IconCollection = ReturnType<typeof validateIconSet>;
+
+const iconDataCache = new Map<string, Promise<IconCollection>>();
+const preloadedIconDataCache = new WeakMap<object, IconCollection>();
+
+function parseIconName(name: string): { prefix: string; icon: string } {
+  const separatorIndex = name.indexOf(':');
+
+  if (separatorIndex <= 0 || separatorIndex === name.length - 1) {
+    throw new Error(`Icon name "${name}" must use the "prefix:icon" format.`);
+  }
+
+  return {
+    prefix: name.slice(0, separatorIndex),
+    icon: name.slice(separatorIndex + 1),
+  };
+}
+
+async function loadIconCollection(
+  prefix: string,
+  icon: string,
+  apiBase: string,
+): Promise<IconCollection> {
+  const normalizedApiBase = apiBase.replace(/\/$/, '');
+  const cacheKey = `${normalizedApiBase}:${prefix}:${icon}`;
+  const cached = iconDataCache.get(cacheKey);
+
+  if (cached) {
+    return cached;
+  }
+
+  const request = fetch(
+    `${normalizedApiBase}/${encodeURIComponent(prefix)}.json?icons=${encodeURIComponent(icon)}`,
+  ).then(async (response) => {
+    if (!response.ok) {
+      throw new Error(
+        `Failed to load Iconify data for "${prefix}:${icon}" from ${normalizedApiBase}.`,
+      );
+    }
+
+    return validateIconSet(await response.json());
+  });
+
+  iconDataCache.set(cacheKey, request);
+  return request;
+}
+
+function getPreloadedIconCollection(prefix: string, icon: string): IconCollection | undefined {
+  const locals = Astro.locals as {
+    proseflyIconCollections?: Record<string, unknown>;
+  };
+  const rawCollection = locals.proseflyIconCollections?.[prefix];
+
+  if (!rawCollection || typeof rawCollection !== 'object') {
+    return undefined;
+  }
+
+  const rawCollectionObject = rawCollection as object;
+  const cachedCollection = preloadedIconDataCache.get(rawCollectionObject);
+
+  if (cachedCollection) {
+    return getIconData(cachedCollection, icon) ? cachedCollection : undefined;
+  }
+
+  const collection = validateIconSet(rawCollection);
+
+  if (!collection) {
+    return undefined;
+  }
+
+  preloadedIconDataCache.set(rawCollectionObject, collection);
+
+  return getIconData(collection, icon) ? collection : undefined;
+}
+
+const {
+  name,
+  title,
+  size,
+  width = size ?? '1em',
+  height = size ?? '1em',
+  class: className,
+  focusable = 'false',
+  apiBase = 'https://api.iconify.design',
+  ...attributes
+} = Astro.props;
+const { prefix, icon } = parseIconName(name);
+const collection =
+  getPreloadedIconCollection(prefix, icon) ?? (await loadIconCollection(prefix, icon, apiBase));
+const iconData = getIconData(collection, icon);
+
+if (!iconData) {
+  throw new Error(`Icon "${name}" was not found in the Iconify API response.`);
+}
+
+const renderedIcon = iconToSVG(iconData, { height, width });
+const body = replaceIDs(renderedIcon.body);
+const svgAttributes = {
+  ...renderedIcon.attributes,
+  ...attributes,
+  'aria-hidden': title ? undefined : ('true' as const),
+  focusable,
+  role: title ? ('img' as const) : undefined,
+};
+---
+
+<svg class:list={['pl-icon', className]} {...svgAttributes}>
+  {title && <title>{title}</title>}
+  <Fragment set:html={body} />
+</svg>
+
+<style>
+  .pl-icon {
+    display: inline-block;
+    flex-shrink: 0;
+    vertical-align: -0.125em;
+  }
+</style>

package/dist/mdx/Steps.astro

@@ -0,0 +1,88 @@
+---
+import { processSteps } from './rehype-steps';
+
+const content = await Astro.slots.render('default');
+const { html } = processSteps(content);
+---
+
+<Fragment set:html={html} />
+
+<style is:global>
+  .pl-steps {
+    --pl-steps-bullet-size: 1.75rem;
+    --pl-steps-bullet-margin: 0.375rem;
+    --pl-steps-line: var(--pl-border-subtle, #e5e7eb);
+    --pl-steps-marker-background: var(--pl-surface, #f4f6f8);
+    --pl-steps-marker-foreground: var(--pl-text, #344054);
+    counter-reset: pl-steps-counter var(--pl-steps-start, 0);
+    list-style: none;
+    margin-block: 1.5rem;
+    padding-inline-start: 0;
+  }
+
+  .pl-steps > li {
+    counter-increment: pl-steps-counter;
+    min-height: calc(
+      var(--pl-steps-bullet-size) + var(--pl-steps-bullet-margin)
+    );
+    padding-block-end: 1px;
+    padding-inline-start: calc(var(--pl-steps-bullet-size) + 1rem);
+    position: relative;
+  }
+
+  .pl-steps > li + li {
+    margin-block-start: 0;
+  }
+
+  .pl-steps > li::before {
+    background: var(--pl-steps-marker-background);
+    border-radius: 999px;
+    color: var(--pl-steps-marker-foreground);
+    content: counter(pl-steps-counter);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    height: var(--pl-steps-bullet-size);
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    line-height: var(--pl-steps-bullet-size);
+    position: absolute;
+    text-align: center;
+    width: var(--pl-steps-bullet-size);
+    z-index: 1;
+  }
+
+  .pl-steps > li::after {
+    background: var(--pl-steps-line);
+    bottom: var(--pl-steps-bullet-margin);
+    content: "";
+    inset-inline-start: calc((var(--pl-steps-bullet-size) - 1px) / 2);
+    position: absolute;
+    top: calc(var(--pl-steps-bullet-size) + var(--pl-steps-bullet-margin));
+    width: 1px;
+  }
+
+  .pl-steps > li:last-child::after {
+    display: none;
+  }
+
+  .pl-steps > li > :first-child {
+    --pl-steps-first-line-height: 1.75em;
+    --pl-steps-shift-y: calc(
+      0.5 *
+        (var(--pl-steps-bullet-size) - var(--pl-steps-first-line-height))
+    );
+    margin-block-start: 0;
+    margin-bottom: var(--pl-steps-shift-y);
+    transform: translateY(var(--pl-steps-shift-y));
+  }
+
+  .pl-steps > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
+    --pl-steps-first-line-height: 1.25em;
+  }
+
+  @supports (--prop: 1lh) {
+    .pl-steps > li > :first-child {
+      --pl-steps-first-line-height: 1lh;
+    }
+  }
+</style>

package/dist/mdx/TabItem.astro

@@ -0,0 +1,21 @@
+---
+import { TabItemTagName } from './rehype-tabs';
+
+interface Props {
+  icon?: string;
+  label: string;
+  value?: string;
+}
+
+const { icon, label, value } = Astro.props;
+
+if (!label) {
+  throw new Error('Missing prop `label` on `<TabItem>`.');
+}
+
+const TabItemTag = TabItemTagName;
+---
+
+<TabItemTag data-icon={icon} data-label={label} data-value={value}>
+  <slot />
+</TabItemTag>

package/dist/mdx/Tabs.astro

@@ -0,0 +1,272 @@
+---
+import Icon from './Icon.astro';
+import { processPanels } from './rehype-tabs';
+
+interface Props {
+  copy?: boolean | string;
+  defaultValue?: string;
+  syncKey?: string;
+}
+
+const { copy, defaultValue, syncKey } = Astro.props;
+const hasCopy = copy === true || copy === 'true' || copy === '';
+const tabsId = `pl-tabs-${globalThis.crypto.randomUUID()}`;
+const panelHtml = await Astro.slots.render('default');
+const { activeIndex, html, panels } = processPanels(panelHtml, {
+  defaultValue,
+  idPrefix: tabsId,
+});
+const hasIcons = panels.some((panel) => panel.icon);
+const activePanel = panels[activeIndex] ?? panels[0];
+---
+
+<section class="pl-tabs" data-pl-tabs data-sync-key={syncKey}>
+  <div class="pl-tabs__header">
+    {
+      hasIcons && (
+        <div
+          aria-hidden="true"
+          class="pl-tabs__active-icons"
+          hidden={!activePanel?.icon}
+        >
+          {panels.map((panel, index) => (
+            panel.icon && (
+              <span
+                class="pl-tabs__active-icon"
+                data-pl-tabs-icon-for={panel.panelId}
+                hidden={index !== activeIndex}
+              >
+                <Icon name={panel.icon} />
+              </span>
+            )
+          ))}
+        </div>
+      )
+    }
+    <div aria-label="Tabs" class="pl-tabs__list" role="tablist">
+      {
+        panels.map((panel, index) => (
+          <button
+            aria-controls={panel.panelId}
+            aria-selected={index === activeIndex ? 'true' : 'false'}
+            class="pl-tabs__trigger"
+            data-pl-tabs-trigger
+            data-tab-label={panel.label}
+            data-tab-panel={panel.panelId}
+            data-tab-value={panel.value}
+            id={panel.tabId}
+            role="tab"
+            tabindex={index === activeIndex ? '0' : '-1'}
+            type="button"
+          >
+            {panel.label}
+          </button>
+        ))
+      }
+    </div>
+    {
+      hasCopy && (
+        <button
+          aria-label="Copy code"
+          class="pl-tabs__copy"
+          data-pl-tabs-copy
+          title="Copy code"
+          type="button"
+        >
+          <span class="pl-tabs__copy-icon" data-pl-tabs-copy-icon="copy">
+            <Icon name="lucide:copy" />
+          </span>
+          <span class="pl-tabs__copy-icon" data-pl-tabs-copy-icon="check" hidden>
+            <Icon name="lucide:check" />
+          </span>
+        </button>
+      )
+    }
+  </div>
+  <div class="pl-tabs__panels" set:html={html} />
+</section>
+
+<script>
+  import '../client/tabs';
+</script>
+
+<style is:global>
+  .pl-tabs {
+    background: var(--pl-surface, #f4f6f8);
+    border: 1px solid var(--pl-border-subtle, #e5e7eb);
+    border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
+    margin-block: 1.25rem;
+    overflow: hidden;
+  }
+
+  .pl-tabs__header {
+    align-items: center;
+    background: var(--pl-surface, #f4f6f8);
+    border-bottom: 1px solid var(--pl-border-subtle, #e5e7eb);
+    display: flex;
+    gap: 0.625rem;
+    padding: 0.5rem 1rem;
+  }
+
+  .pl-tabs__active-icons {
+    align-items: center;
+    color: var(--pl-text, #344054);
+    display: inline-grid;
+    flex: 0 0 auto;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  .pl-tabs__active-icons[hidden],
+  .pl-tabs__active-icon[hidden],
+  .pl-tabs__copy-icon[hidden],
+  .pl-tabs__panel[hidden] {
+    display: none;
+  }
+
+  .pl-tabs__active-icon {
+    align-items: center;
+    display: inline-flex;
+    height: 1rem;
+    justify-content: center;
+    line-height: 0;
+    width: 1rem;
+  }
+
+  .pl-tabs__active-icon > .pl-icon {
+    display: block;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  .pl-tabs__list {
+    align-items: center;
+    background: transparent;
+    display: inline-flex;
+    flex: 1 1 auto;
+    gap: 0.25rem;
+    max-width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    padding: 0;
+    scrollbar-width: none;
+  }
+
+  .pl-tabs__list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .pl-tabs__trigger {
+    appearance: none;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--pl-radius-md, 0.5rem);
+    color: var(--pl-text-muted, #667085);
+    cursor: pointer;
+    flex: 0 0 auto;
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    padding: 0.25rem 0.5rem;
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease,
+      box-shadow 160ms ease,
+      color 160ms ease;
+  }
+
+  .pl-tabs__trigger:hover {
+    color: var(--pl-text-strong, var(--pl-text, #182230));
+  }
+
+  .pl-tabs__trigger:focus-visible {
+    outline: 2px solid var(--pl-accent, #4f46e5);
+    outline-offset: 2px;
+  }
+
+  .pl-tabs__trigger[aria-selected='true'] {
+    background: var(--pl-background, #ffffff);
+    border-color: var(--pl-border-muted, #d0d5dd);
+    box-shadow: none;
+    color: var(--pl-text-strong, var(--pl-text, #182230));
+  }
+
+  .pl-tabs__copy {
+    align-items: center;
+    appearance: none;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--pl-radius-md, 0.5rem);
+    color: var(--pl-text-muted, #667085);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 1.875rem;
+    justify-content: center;
+    margin-inline-start: auto;
+    padding: 0;
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease,
+      color 160ms ease;
+    width: 1.875rem;
+  }
+
+  .pl-tabs__copy:hover {
+    background: var(--pl-background, #ffffff);
+    border-color: var(--pl-border-muted, #d0d5dd);
+    color: var(--pl-text-strong, var(--pl-text, #182230));
+  }
+
+  .pl-tabs__copy:focus-visible {
+    outline: 2px solid var(--pl-accent, #4f46e5);
+    outline-offset: 2px;
+  }
+
+  .pl-tabs__copy-icon {
+    align-items: center;
+    display: inline-flex;
+    height: 1rem;
+    justify-content: center;
+    line-height: 0;
+    width: 1rem;
+  }
+
+  .pl-tabs__copy-icon > .pl-icon {
+    display: block;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  .pl-tabs__panels {
+    background: var(--pl-background, #fff);
+    padding: 1rem;
+  }
+
+  .pl-tabs__panel {
+    color: var(--pl-text, #344054);
+  }
+
+  .pl-tabs__panel:focus-visible {
+    border-radius: var(--pl-radius-md, 0.5rem);
+    outline: 2px solid var(--pl-accent, #4f46e5);
+    outline-offset: 2px;
+  }
+
+  .pl-tabs__panel > :first-child {
+    margin-block-start: 0;
+  }
+
+  .pl-tabs__panel > :last-child {
+    margin-block-end: 0;
+  }
+
+  .pl-tabs__panel pre {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+  }
+</style>

package/dist/mdx/rehype-file-tree.d.ts

@@ -0,0 +1,14 @@
+type FileTreeKind = 'directory' | 'code' | 'config' | 'file' | 'image' | 'style' | 'text';
+export interface FileTreeEntry {
+    children: FileTreeEntry[];
+    commentHtml: string;
+    highlighted: boolean;
+    isDirectory: boolean;
+    isPlaceholder: boolean;
+    kind: FileTreeKind;
+    nameHtml: string;
+    nameText: string;
+}
+export declare function parseFileTree(html: string | undefined): FileTreeEntry[];
+export {};
+//# sourceMappingURL=rehype-file-tree.d.ts.map

package/dist/mdx/rehype-file-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rehype-file-tree.d.ts","sourceRoot":"","sources":["../../src/mdx/rehype-file-tree.ts"],"names":[],"mappings":"AAKA,KAAK,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1F,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAiCD,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,EAAE,CAWvE"}