astro-pure 1.0.0

package/components/user/Card.astro

@@ -0,0 +1,23 @@
+---
+import { cn } from '../../utils'
+
+const { as: Tag = 'div', class: className, href, heading, subheading, date } = Astro.props
+---
+
+<Tag
+  class={cn(
+    'not-prose block relative rounded-2xl border border-border bg-muted px-5 py-3',
+    href && 'transition-all hover:border-foreground/25 hover:shadow-sm',
+    className
+  )}
+  href={href}
+>
+  <div class='flex flex-col gap-y-1.5'>
+    <div class='flex flex-col gap-y-0.5'>
+      <h2 class='text-lg font-medium'>{heading}</h2>
+      <p class='text-muted-foreground'>{subheading}</p>
+      <p class='text-muted-foreground'>{date}</p>
+    </div>
+    <slot />
+  </div>
+</Tag>

package/components/user/CardList.astro

@@ -0,0 +1,28 @@
+---
+import type { CardListData } from 'virtual:types'
+
+import Collapse from '../user/Collapse.astro'
+import CardListChildren from './CardListChildren.astro'
+
+type Props = CardListData & {
+  collapse?: boolean
+  class?: string
+}
+
+const { title, list, collapse, class: className } = Astro.props
+---
+
+<div class={className}>
+  {
+    collapse ? (
+      <Collapse title={title} class='not-prose'>
+        <CardListChildren children={list} />
+      </Collapse>
+    ) : (
+      <div class='not-prose my-3 flex flex-col gap-y-2 rounded-xl border px-4 py-3 sm:py-4'>
+        <p class='text-lg font-medium text-foreground'>{title}</p>
+        <CardListChildren children={list} />
+      </div>
+    )
+  }
+</div>

package/components/user/CardListChildren.astro

@@ -0,0 +1,24 @@
+---
+import type { CardList } from 'virtual:types'
+
+import { cn } from '../../utils'
+
+type Props = { children: CardList }
+const { children } = Astro.props
+---
+
+<ul class='ms-5 flex list-disc flex-col gap-y-1'>
+  {
+    children.map((child) => {
+      const Tag = child.link ? 'a' : 'p'
+      return (
+        <li>
+          <Tag href={child.link} class={cn('block', Tag == 'a' && 'text-foreground')}>
+            {child.title}
+          </Tag>
+          {child.children && child.children.length > 0 && <Astro.self children={child.children} />}
+        </li>
+      )
+    })
+  }
+</ul>

package/components/user/Collapse.astro

@@ -0,0 +1,84 @@
+---
+import { cn } from '../../utils'
+
+interface Props {
+  class?: string
+  title: string
+}
+const { class: className, title, ...props } = Astro.props
+---
+
+<collapse-component class='group/expand'>
+  <div
+    class={cn(
+      'rounded-xl border border-border px-3 my-4 sm:px-4 group-[.expanded]/expand:bg-muted',
+      className
+    )}
+    {...props}
+  >
+    <slot name='before' />
+    <div
+      class='group/highlight expand-title sticky top-0 z-20 flex cursor-pointer items-center justify-between py-1.5 group-[.expanded]/expand:bg-muted sm:py-2'
+    >
+      <p class='m-0 transition-colors group-hover/highlight:text-primary'>{title}</p>
+      <div class='expand-button'>
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          width='16'
+          height='16'
+          viewBox='0 0 24 24'
+          fill='none'
+          stroke-width='2.5'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+          class='my-1 stroke-muted-foreground transition-all duration-300 group-hover/highlight:stroke-primary group-[.expanded]/expand:-rotate-90'
+        >
+          <line
+            x1='5'
+            y1='12'
+            x2='19'
+            y2='12'
+            class='translate-x-1 scale-x-100 duration-300 ease-in-out group-[.expanded]/expand:translate-x-4 group-[.expanded]/expand:scale-x-0'
+          ></line>
+          <polyline
+            points='12 5 19 12 12 19'
+            class='translate-x-1 duration-300 ease-in-out group-[.expanded]/expand:translate-x-0'
+          ></polyline>
+        </svg>
+      </div>
+    </div>
+    <div
+      class='expand-conetent grid opacity-0 transition-all duration-300 ease-in-out group-[.expanded]/expand:mb-3 group-[.expanded]/expand:opacity-100 sm:group-[.expanded]/expand:mb-4'
+    >
+      <div class='overflow-hidden'>
+        <slot />
+      </div>
+    </div>
+  </div>
+</collapse-component>
+
+<script>
+  class Collapse extends HTMLElement {
+    constructor() {
+      super()
+    }
+
+    connectedCallback() {
+      const expandTitle = this.querySelector('.expand-title')
+      // const expandable = this.querySelector('.expandable')
+      expandTitle?.addEventListener('click', () => {
+        this.classList.toggle('expanded')
+      })
+    }
+  }
+  customElements.define('collapse-component', Collapse)
+</script>
+
+<style>
+  .expand-conetent {
+    grid-template-rows: 0fr;
+  }
+  .expanded .expand-conetent {
+    grid-template-rows: 1fr;
+  }
+</style>

package/components/user/FormattedDate.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { cn, getFormattedDate } from '../../utils'
+
+type Props = HTMLAttributes<'time'> & {
+  date: Date
+  dateTimeOptions?: Intl.DateTimeFormatOptions
+  class?: string
+}
+
+const { date, dateTimeOptions, class: className, ...attrs } = Astro.props
+
+const postDate = getFormattedDate(date, dateTimeOptions)
+---
+
+<span class={cn('text-muted-foreground font-mono', className)} {...attrs}>
+  <time datetime={date.toISOString()}>
+    {postDate}
+  </time>
+</span>

package/components/user/Label.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from '../../utils'
+
+const { class: className, as: Tag = 'div', title, href, ...props } = Astro.props
+---
+
+<Tag
+  class={cn(
+    className,
+    'flex flex-row items-center justify-center gap-x-2',
+    href && 'hover:opacity-75 transition-all'
+  )}
+  href={href}
+  {...props}
+>
+  <slot name='icon' />
+  <p>{title}</p>
+</Tag>

package/components/user/Spoiler.astro

@@ -0,0 +1,11 @@
+---
+import { cn } from '../../utils'
+
+const { as: Tag = 'span', class: className } = Astro.props
+---
+
+<Tag
+  class={cn('bg-muted rounded text-transparent hover:text-inherit transition-colors', className)}
+>
+  <slot />
+</Tag>

package/components/user/Steps.astro

@@ -0,0 +1,84 @@
+---
+// https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro
+import { processSteps } from '../../plugins/rehype-steps'
+
+const content = await Astro.slots.render('default')
+const { html } = processSteps(content)
+---
+
+<Fragment set:html={html} />
+
+<style is:global>
+  .sl-steps {
+    --bullet-size: calc(1.75rem);
+    --bullet-margin: 0.375rem;
+
+    list-style: none !important;
+    counter-reset: steps-counter var(--sl-steps-start, 0);
+    padding-inline-start: 0 !important;
+  }
+
+  .sl-steps > li {
+    counter-increment: steps-counter;
+    position: relative;
+    padding-inline-start: calc(var(--bullet-size) + 1rem);
+    /* HACK: Keeps any `margin-bottom` inside the `<li>`’s padding box to avoid gaps in the hairline border. */
+    padding-bottom: 1px;
+    /* Prevent bullets from touching in short list items. */
+    min-height: calc(var(--bullet-size) + var(--bullet-margin));
+  }
+  .sl-steps > li + li {
+    /* Remove margin between steps. */
+    margin-top: 0;
+  }
+
+  /* Custom list marker element. */
+  .sl-steps > li::before {
+    content: counter(steps-counter);
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: var(--bullet-size);
+    height: var(--bullet-size);
+    line-height: var(--bullet-size);
+
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-align: center;
+    color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+    background-color: hsl(var(--primary-foreground) / var(--tw-bg-opacity, 1));
+    border-radius: 99rem;
+    box-shadow: inset 0 0 0 1px hsl(var(--border) / var(--tw-border-opacity, 1));
+  }
+
+  /* Vertical guideline linking list numbers. */
+  .sl-steps > li::after {
+    --guide-width: 1px;
+    content: '';
+    position: absolute;
+    top: calc(var(--bullet-size) + var(--bullet-margin));
+    bottom: var(--bullet-margin);
+    inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
+    width: var(--guide-width);
+    background-color: hsl(var(--border) / var(--tw-border-opacity, 1));
+  }
+
+  /* Adjust first item inside a step so that it aligns vertically with the number
+			even if using a larger font size (e.g. a heading) */
+  .sl-steps > li > :first-child {
+    /*
+		The `lh` unit is not yet supported by all browsers in our support matrix
+		— see https://caniuse.com/mdn-css_types_length_lh
+		In unsupported browsers we approximate this using our known line-heights.
+		*/
+    --lh: calc(1.75em);
+    --shift-y: calc(0.5 * (var(--bullet-size) - var(--lh)));
+    margin-top: 0;
+    transform: translateY(var(--shift-y));
+    margin-bottom: var(--shift-y);
+    color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+  }
+  .sl-steps > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
+    --lh: calc(1.2em);
+  }
+</style>

package/components/user/TabItem.astro

@@ -0,0 +1,18 @@
+---
+// https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/TabItem.astro
+import { TabItemTagname } from '../../plugins/rehype-tabs'
+
+interface Props {
+  label: string
+}
+
+const { label } = Astro.props
+
+if (!label) {
+  throw new Error('Missing prop `label` on `<TabItem>` component.')
+}
+---
+
+<TabItemTagname data-label={label}>
+  <slot />
+</TabItemTagname>

package/components/user/Tabs.astro

@@ -0,0 +1,266 @@
+---
+// https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro
+import { processPanels } from '../../plugins/rehype-tabs'
+
+interface Props {
+  syncKey?: string
+}
+
+const { syncKey } = Astro.props
+const panelHtml = await Astro.slots.render('default')
+const { html, panels } = processPanels(panelHtml)
+
+/**
+ * Synced tabs are persisted across page using `localStorage`. The script used to restore the
+ * active tab for a given sync key has a few requirements:
+ *
+ * - The script should only be included when at least one set of synced tabs is present on the page.
+ * - The script should be inlined to avoid a flash of invalid active tab.
+ * - The script should only be included once per page.
+ *
+ * To do so, we keep track of whether the script has been rendered using a variable stored using
+ * `Astro.locals` which will be reset for each new page. The value is tracked using an untyped
+ * symbol on purpose to avoid Starlight users to get autocomplete for it and avoid potential
+ * clashes with user-defined variables.
+ *
+ * The restore script defines a custom element `starlight-tabs-restore` that will be included in
+ * each set of synced tabs to restore the active tab based on the persisted value using the
+ * `connectedCallback` lifecycle method. To ensure this callback can access all tabs and panels for
+ * the current set of tabs, the script should be rendered before the tabs themselves.
+ */
+const isSynced = syncKey !== undefined
+const didRenderSyncedTabsRestoreScriptSymbol = Symbol.for(
+  'starlight:did-render-synced-tabs-restore-script'
+)
+// @ts-expect-error - See bove
+const shouldRenderSyncedTabsRestoreScript = isSynced && Astro.locals[didRenderSyncedTabsRestoreScriptSymbol] !== true
+
+if (isSynced) {
+  // @ts-expect-error - See above
+  Astro.locals[didRenderSyncedTabsRestoreScriptSymbol] = true
+}
+---
+
+{/* Inlined to avoid a flash of invalid active tab. */}
+{shouldRenderSyncedTabsRestoreScript && (
+  <script is:inline>
+    class StarlightTabsRestore extends HTMLElement {
+      connectedCallback() {
+        const starlightTabs = this.closest('starlight-tabs');
+        if (!(starlightTabs instanceof HTMLElement) || typeof localStorage === 'undefined') return;
+        const syncKey = starlightTabs.dataset.syncKey;
+        if (!syncKey) return;
+        const label = localStorage.getItem(`starlight-synced-tabs__${syncKey}`);
+        if (!label) return;
+        const tabs = starlightTabs ? [...starlightTabs.querySelectorAll('[role="tab"]')] : [];
+        const tabIndexToRestore = tabs.findIndex(
+          (tab) => tab instanceof HTMLAnchorElement && tab.textContent?.trim() === label
+        );
+        const panels = starlightTabs?.querySelectorAll(':scope > [role="tabpanel"]');
+        const newTab = tabs[tabIndexToRestore];
+        const newPanel = panels[tabIndexToRestore];
+        if (tabIndexToRestore < 1 || !newTab || !newPanel) return;
+        tabs[0]?.setAttribute('aria-selected', 'false');
+        tabs[0]?.setAttribute('tabindex', '-1');
+        panels?.[0]?.setAttribute('hidden', 'true');
+        newTab.removeAttribute('tabindex');
+        newTab.setAttribute('aria-selected', 'true');
+        newPanel.removeAttribute('hidden');
+      }
+    }
+    customElements.define('starlight-tabs-restore', StarlightTabsRestore);
+  </script>
+)}
+
+<starlight-tabs data-sync-key={syncKey}>
+  {
+    panels && (
+      <div class='tablist-wrapper not-content'>
+        <ul role='tablist' class='my-0'>
+          {panels.map(({ label, panelId, tabId }, idx) => (
+            <li role='presentation' class='tab'>
+              <a
+                role='tab'
+                href={'#' + panelId}
+                id={tabId}
+                aria-selected={idx === 0 ? 'true' : 'false'}
+                tabindex={idx !== 0 ? -1 : 0}
+              >
+                {label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+  <Fragment set:html={html} />
+  {isSynced && <starlight-tabs-restore />}
+</starlight-tabs>
+
+<style>
+  starlight-tabs {
+    display: block;
+  }
+
+  .tablist-wrapper {
+    overflow-x: auto;
+  }
+
+  [role='tablist'] {
+    display: flex;
+    list-style: none;
+    border-bottom: 2px solid hsl(var(--border) / var(--tw-border-opacity, 1));
+    padding: 0;
+  }
+
+  .tab {
+    margin-bottom: -2px;
+  }
+  .tab > [role='tab'] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.2rem 1.25rem;
+    text-decoration: none;
+    border-bottom: 2px solid hsl(var(--border) / var(--tw-border-opacity, 1));
+    color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+    outline-offset: -0.1875rem;
+    overflow-wrap: initial;
+  }
+  .tab [role='tab'][aria-selected='true'] {
+    color: hsl(var(--primary) / var(--tw-text-opacity, 1));
+    border-color: hsl(var(--primary) / var(--tw-text-opacity, 1));
+    font-weight: 600;
+  }
+
+  .tablist-wrapper ~ :global([role='tabpanel']) {
+    margin-top: 1rem;
+  }
+</style>
+
+<script>
+  class StarlightTabs extends HTMLElement {
+    // A map of sync keys to all tabs that are synced to that key.
+    static #syncedTabs = new Map<string, StarlightTabs[]>()
+
+    tabs: HTMLAnchorElement[]
+    panels: HTMLElement[]
+    #syncKey: string | undefined
+    // The storage key prefix should be in sync with the one used in the restore script.
+    #storageKeyPrefix = 'starlight-synced-tabs__'
+
+    constructor() {
+      super()
+      const tablist = this.querySelector<HTMLUListElement>('[role="tablist"]')!
+      this.tabs = [...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]')]
+      this.panels = [...this.querySelectorAll<HTMLElement>(':scope > [role="tabpanel"]')]
+      this.#syncKey = this.dataset.syncKey
+
+      if (this.#syncKey) {
+        const syncedTabs = StarlightTabs.#syncedTabs.get(this.#syncKey) ?? []
+        syncedTabs.push(this)
+        StarlightTabs.#syncedTabs.set(this.#syncKey, syncedTabs)
+      }
+
+      this.tabs.forEach((tab, i) => {
+        // Handle clicks for mouse users
+        tab.addEventListener('click', (e) => {
+          e.preventDefault()
+          const currentTab = tablist.querySelector('[aria-selected="true"]')
+          if (e.currentTarget !== currentTab) {
+            this.switchTab(e.currentTarget as HTMLAnchorElement, i)
+          }
+        })
+
+        // Handle keyboard input
+        tab.addEventListener('keydown', (e) => {
+          const index = this.tabs.indexOf(e.currentTarget as HTMLAnchorElement)
+          // Work out which key the user is pressing and
+          // Calculate the new tab's index where appropriate
+          const nextIndex =
+            e.key === 'ArrowLeft'
+              ? index - 1
+              : e.key === 'ArrowRight'
+                ? index + 1
+                : e.key === 'Home'
+                  ? 0
+                  : e.key === 'End'
+                    ? this.tabs.length - 1
+                    : null
+          if (nextIndex === null) return
+          if (this.tabs[nextIndex]) {
+            e.preventDefault()
+            this.switchTab(this.tabs[nextIndex], nextIndex)
+          }
+        })
+      })
+    }
+
+    switchTab(newTab: HTMLAnchorElement | null | undefined, index: number, shouldSync = true) {
+      if (!newTab) return
+
+      // If tabs should be synced, we store the current position so we can restore it after
+      // switching tabs to prevent the page from jumping when the new tab content is of a different
+      // height than the previous tab.
+      const previousTabsOffset = shouldSync ? this.getBoundingClientRect().top : 0
+
+      // Mark all tabs as unselected and hide all tab panels.
+      this.tabs.forEach((tab) => {
+        tab.setAttribute('aria-selected', 'false')
+        tab.setAttribute('tabindex', '-1')
+      })
+      this.panels.forEach((oldPanel) => {
+        oldPanel.hidden = true
+      })
+
+      // Show new panel and mark new tab as selected.
+      const newPanel = this.panels[index]
+      if (newPanel) newPanel.hidden = false
+      // Restore active tab to the default tab order.
+      newTab.removeAttribute('tabindex')
+      newTab.setAttribute('aria-selected', 'true')
+      if (shouldSync) {
+        newTab.focus()
+        StarlightTabs.#syncTabs(this, newTab)
+        window.scrollTo({
+          top: window.scrollY + (this.getBoundingClientRect().top - previousTabsOffset)
+        })
+      }
+    }
+
+    #persistSyncedTabs(label: string) {
+      if (!this.#syncKey || typeof localStorage === 'undefined') return
+      localStorage.setItem(this.#storageKeyPrefix + this.#syncKey, label)
+    }
+
+    static #syncTabs(emitter: StarlightTabs, newTab: HTMLAnchorElement) {
+      const syncKey = emitter.#syncKey
+      const label = StarlightTabs.#getTabLabel(newTab)
+      if (!syncKey || !label) return
+      const syncedTabs = StarlightTabs.#syncedTabs.get(syncKey)
+      if (!syncedTabs) return
+
+      for (const receiver of syncedTabs) {
+        if (receiver === emitter) continue
+        const labelIndex = receiver.tabs.findIndex(
+          (tab) => StarlightTabs.#getTabLabel(tab) === label
+        )
+        if (labelIndex === -1) continue
+        receiver.switchTab(receiver.tabs[labelIndex], labelIndex, false)
+      }
+
+      emitter.#persistSyncedTabs(label)
+    }
+
+    static #getTabLabel(tab: HTMLAnchorElement) {
+      // `textContent` returns the content of all elements. In the case of a tab with an icon, this
+      // could potentially include extra spaces due to the presence of the SVG icon.
+      // To sync tabs with the same sync key and label, no matter the presence of an icon, we trim
+      // these extra spaces.
+      return tab.textContent?.trim()
+    }
+  }
+
+  customElements.define('starlight-tabs', StarlightTabs)
+</script>

package/components/user/Timeline.astro

@@ -0,0 +1,38 @@
+---
+import type { TimelineEvent } from 'virtual:types'
+
+interface Props {
+  class?: string
+  events: TimelineEvent[]
+}
+
+const { class: className, events, ...props } = Astro.props
+---
+
+<div class={className} {...props}>
+  <ul class='ps-0 sm:ps-2'>
+    {
+      events.map((event, index) => (
+        <li class='group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2'>
+          {/* circle */}
+          <span class='z-10 my-2 ms-2 h-3 w-3 min-w-3 rounded-full border-2 border-muted-foreground transition-transform group-hover:scale-125' />
+          {/* line */}
+          {index !== events.length - 1 && (
+            <span
+              class='absolute start-[12px] top-[20px] w-1 bg-border'
+              style={{ height: 'calc(100% - 4px)' }}
+            />
+          )}
+          <div class='flex gap-2 max-sm:flex-col'>
+            <samp class='w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-primary-foreground max-sm:px-2 sm:min-w-[82px] sm:text-right'>
+              {event.date}
+            </samp>
+            <div>
+              <Fragment set:html={event.content} />
+            </div>
+          </div>
+        </li>
+      ))
+    }
+  </ul>
+</div>

package/components/user/index.ts

@@ -0,0 +1,17 @@
+// Caontainer
+export { default as Card } from './Card.astro'
+export { default as Collapse } from './Collapse.astro'
+export { default as Aside } from './Aside.astro'
+export { default as Tabs } from './Tabs.astro'
+export { default as TabItem } from './TabItem.astro'
+
+// List
+export { default as CardList } from './CardList.astro'
+export { default as Timeline } from './Timeline.astro'
+export { default as Steps } from './Steps.astro'
+
+// Simple text rerender
+export { default as Button } from './Button.astro'
+export { default as Spoiler } from './Spoiler.astro'
+export { default as FormattedDate } from './FormattedDate.astro'
+export { default as Label } from './Label.astro'