astro-pure 1.0.0

package/bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+registry = "https://registry.npmmirror.com/"

package/components/advanced/Comment.astro

@@ -0,0 +1,148 @@
+---
+import config from 'virtual:config'
+
+import { cn } from '../../utils'
+
+const { class: className } = Astro.props
+---
+
+{
+  config.integ.waline.enable && (
+    <comment-component>
+      <div id='waline' class={cn('not-prose', className)}>
+        Comment seems to stuck. Try to refresh?✨
+      </div>
+    </comment-component>
+  )
+}
+
+<script>
+  import { init as walineInit } from '@waline/client'
+  import type { WalineEmojiPresets } from '@waline/client'
+  import config from 'virtual:config'
+
+  import '@waline/client/style'
+
+  const walineConfig = config.integ.waline
+
+  class Comment extends HTMLElement {
+    constructor() {
+      super()
+    }
+
+    connectedCallback() {
+      // Prevent Vue log errors
+      ;(globalThis as unknown as { __VUE_OPTIONS_API__: boolean }).__VUE_OPTIONS_API__ = true
+      ;(globalThis as unknown as { __VUE_PROD_DEVTOOLS__: boolean }).__VUE_PROD_DEVTOOLS__ = false
+      ;(
+        globalThis as unknown as { __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean }
+      ).__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false
+
+      const emoji = walineConfig.emoji?.map(
+        (preset) => `${config.npmCDN}/@waline/emojis@1.2.0/${preset}` as WalineEmojiPresets
+      )
+
+      walineInit({
+        el: '#waline',
+        serverURL: walineConfig.server || '',
+        emoji,
+        reaction: ['/icons/heart-item.svg'],
+        ...walineConfig.additionalConfigs
+      })
+    }
+  }
+
+  if (walineConfig.enable) customElements.define('comment-component', Comment)
+</script>
+
+<style>
+  /* Basic theme */
+  #waline {
+    /* Font size */
+    --waline-font-size: 16px;
+    /* Basic color */
+    --waline-white: hsl(var(--background), var(--tw-bg-opacity, 1));
+    --waline-light-grey: #999;
+    --waline-dark-grey: #666;
+    /* Theme color */
+    --waline-theme-color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+    --waline-active-color: hsl(var(--primary) / var(--tw-text-opacity, 1));
+    /* Layout */
+    --waline-color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
+    --waline-bg-color: hsl(var(--muted) / var(--tw-text-opacity, 1));
+    --waline-bg-color-light: hsl(var(--input) / var(--tw-text-opacity, 1));
+    --waline-bg-color-hover: #f0f0f0;
+    --waline-border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
+    --waline-disable-bg-color: #f8f8f8;
+    --waline-disable-color: #bbb;
+    --waline-code-bg-color: #282c34;
+    /* Special */
+    --waline-bq-color: #f0f0f0;
+    /* Avatar */
+    --waline-avatar-size: 3.25rem;
+    --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+    /* Badge */
+    --waline-badge-color: hsl(var(--border) / var(--tw-border-opacity, 1));
+    --waline-badge-font-size: 0.775em;
+    /* Info */
+    --waline-info-bg-color: var(--waline-bg-color-light);
+    --waline-info-color: var(--waline-color);
+    --waline-info-font-size: 0.625em;
+    /* Render selection */
+    --waline-border: 1px solid var(--waline-border-color);
+    --waline-avatar-radius: 50%;
+    --waline-box-shadow: none;
+  }
+
+  /* Reaction buttons */
+  #waline :global(.wl-reaction-title, .wl-reaction-text) {
+    display: none;
+  }
+  #waline :global(.wl-reaction) {
+    overflow: visible;
+    margin-bottom: 0.5em;
+  }
+  #waline :global(.wl-reaction-img) {
+    width: auto;
+    display: flex;
+    height: 35px;
+    align-items: center;
+    column-gap: 0.4rem;
+  }
+  #waline :global(.wl-reaction-votes) {
+    position: inherit;
+    top: inherit;
+    min-width: inherit;
+    inset-inline-end: inherit;
+    display: flex;
+    font-weight: normal;
+    border: none;
+    background: none;
+    color: inherit;
+    padding: 0.2rem 0.4rem;
+    border-radius: 6px;
+  }
+  #waline :global(.wl-reaction-loading) {
+    position: inherit;
+    top: inherit;
+    min-width: inherit;
+  }
+  #waline :global(.wl-reaction-item.active .wl-reaction-votes) {
+    background: var(--waline-theme-color);
+    color: var(--waline-bg-color);
+  }
+
+  #waline :global(.wl-reaction-votes:after) {
+    margin-left: 0.25em;
+    content: 'Like(s)';
+    display: inline-block;
+    clear: both;
+    border: 0;
+  }
+  #waline :global(.wl-reaction img) {
+    filter: invert(25%);
+  }
+  :global(.dark) #waline :global(.wl-reaction img) {
+    filter: invert(75%);
+  }
+</style>

package/components/advanced/GithubCard.astro

@@ -0,0 +1,148 @@
+---
+const { repo: repoRaw } = Astro.props
+
+// Remove 'https://github.com/' headings from the repo string
+const repo = repoRaw.replace(/^https:\/\/github\.com\//, '')
+
+const [owner, repoName] = repo.split('/')
+---
+
+<github-card class='not-prose loading' data-repo={repo}>
+  <a
+    href={`https://github.com/${repo}`}
+    target='_blank'
+    class='group block flex flex-col gap-y-2 rounded-xl border border-border px-5 py-4 transition-colors hover:bg-muted hover:text-muted-foreground'
+  >
+    <div class='flex items-center justify-between'>
+      <div class='flex items-center gap-x-2 text-foreground group-hover:text-primary'>
+        <div id='gh-avatar' class='gh-text me-2 size-8 bg-cover' style='border-radius:999px'></div>
+        <span class='text-lg transition-colors'>{owner}</span>
+        <span class='text-muted-foreground'>/</span>
+        <span class='text-lg font-bold transition-colors'>{repoName}</span>
+      </div>
+      <div class='rounded-full bg-primary-foreground p-1'>
+        <svg class='size-6'>
+          <use href='/icons/social.svg#mingcute-github-line'></use>
+        </svg>
+      </div>
+    </div>
+    <p id='gh-description' class='gh-text'>Waiting for api.github.com...</p>
+    <div class='flex items-center justify-between'>
+      <div class='gh-text flex flex-wrap items-center gap-x-5'>
+        <div class='flex items-center gap-x-2'>
+          <svg class='size-5'><use href='/icons/github-card.svg#mingcute-star-line'></use></svg>
+          <span id='gh-stars' class='leading-tight'>???</span>
+        </div>
+        <div class='flex items-center gap-x-2'>
+          <svg class='size-5'
+            ><use href='/icons/github-card.svg#mingcute-git-branch-line'></use></svg
+          >
+          <span id='gh-forks' class='leading-tight'>???</span>
+        </div>
+        <div class='flex items-center gap-x-2'>
+          <svg class='size-5'><use href='/icons/github-card.svg#mingcute-balance-line'></use></svg>
+          <span id='gh-license' class='leading-tight'>???</span>
+        </div>
+      </div>
+      <span id='gh-language' class='gh-text leading-tight'>?????</span>
+    </div>
+  </a>
+</github-card>
+
+<style>
+  @keyframes pulsate {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  .loading .gh-text {
+    color: transparent;
+    border-radius: calc(var(--radius) - 3px);
+    background-color: hsl(var(--primary-foreground) / var(--tw-text-opacity));
+    animation: pulsate 2s infinite linear;
+    user-select: none;
+  }
+  .loading .gh-text:nth-child(2) {
+    animation-delay: 1s;
+  }
+</style>
+
+<script>
+  interface GithubProps {
+    stargazers_count: number
+    forks: number
+    language: string
+    owner: { avatar_url: string }
+    license?: { spdx_id: string }
+    description: string
+  }
+
+  class GithubCard extends HTMLElement {
+    async fetchGithub(repo: string): Promise<GithubProps | null> {
+      try {
+        const res = await fetch(`https://api.github.com/repos/${repo}`, {
+          referrerPolicy: 'no-referrer'
+        })
+        if (!res.ok) {
+          throw new Error(`HTTP error! status: ${res.status}`)
+        }
+        return (await res.json()) as GithubProps
+      } catch (e) {
+        console.error('Failed to fetch Github data:', e)
+        return null
+      }
+    }
+
+    numberFormat(value: number): string {
+      return Intl.NumberFormat('en-us', {
+        notation: 'compact',
+        maximumFractionDigits: 1
+      }).format(value)
+    }
+
+    async connectedCallback() {
+      if (!this.dataset.repo) return
+      try {
+        const data = await this.fetchGithub(this.dataset.repo)
+        if (!data) return
+        ;(this.querySelector('#gh-stars') as HTMLElement).textContent = this.numberFormat(
+          data.stargazers_count
+        )
+        ;(this.querySelector('#gh-forks') as HTMLElement).textContent = this.numberFormat(
+          data.forks
+        )
+        ;(this.querySelector('#gh-language') as HTMLElement).textContent = data.language || 'N/A'
+        ;(this.querySelector('#gh-description') as HTMLElement).textContent =
+          typeof data.description === 'string'
+            ? data.description.replace(/:[a-zA-Z0-9_]+:/g, '')
+            : 'Description not set'
+
+        const licenseEl = this.querySelector('#gh-license') as HTMLElement
+        if (data.license?.spdx_id) {
+          licenseEl.textContent = data.license.spdx_id
+        } else {
+          licenseEl.classList.add('no-license')
+        }
+
+        const avatarEl = this.querySelector('#gh-avatar') as HTMLElement
+        if (avatarEl) {
+          avatarEl.style.backgroundImage = `url(${data.owner.avatar_url})`
+          avatarEl.style.backgroundColor = 'transparent'
+        }
+
+        this.classList.remove('loading')
+      } catch (e) {
+        console.error('Error setting Github data:', e)
+        ;(this.querySelector('#gh-description') as HTMLElement).textContent = 'Failed to fetch data'
+      }
+    }
+  }
+
+  customElements.define('github-card', GithubCard)
+</script>

package/components/advanced/LinkPreview.astro

@@ -0,0 +1,82 @@
+---
+import { Image } from 'astro:assets'
+
+import { parseOpenGraph } from '../../plugins/link-preview'
+import { cn } from '../../utils'
+
+export interface Props {
+  /** URL to fetch Open Graph data. */
+  href: string
+  /** Hide any image or video even if set in the OpenGraph data. */
+  hideMedia?: boolean
+  zoomable?: boolean
+}
+
+const { href, hideMedia = false, zoomable = true } = Astro.props
+
+const meta = await parseOpenGraph(href)
+const domain = meta?.url ? new URL(meta.url).hostname.replace('www.', '') : ''
+---
+
+{
+  meta && meta.title ? (
+    <div class='not-prose link-preview-container my-2 flex justify-center sm:my-4'>
+      <article
+        class:list={[
+          'link-preview flex flex-col overflow-hidden rounded-lg border max-sm:max-w-sm sm:flex-row',
+          {
+            'link-preview--has-video max-sm:max-w-none sm:flex-col':
+              !hideMedia && meta.video && meta.videoType,
+            'link-preview--no-media': hideMedia || !((meta.video && meta.videoType) || meta.image)
+          }
+        ]}
+      >
+        {hideMedia ? null : meta.video && meta.videoType ? (
+          <video controls preload='metadata' width='1200' height='630'>
+            <source src={meta.video} type={meta.videoType} />
+          </video>
+        ) : meta.image ? (
+          <Image
+            class={cn('m-0 sm:max-w-60', zoomable && 'zoomable')}
+            src={meta.image}
+            alt={meta.imageAlt || ''}
+            width='1200'
+            height='630'
+          />
+        ) : null}
+        <a
+          class='group font-normal text-muted-foreground no-underline hover:text-muted-foreground'
+          href={href}
+          target='_blank'
+        >
+          <div class='link-preview__content flex h-full flex-col gap-y-1 px-3 py-2 transition-colors group-hover:bg-muted sm:px-5 sm:py-4'>
+            <header class='line-clamp-1 font-medium text-foreground transition-colors group-hover:text-primary'>
+              {meta.title}
+            </header>
+            <p class='link-preview__description line-clamp-2'>
+              {meta.description}{' '}
+              {domain && <small class='link-preview__domain ml-1'>({domain})</small>}
+            </p>
+          </div>
+        </a>
+      </article>
+    </div>
+  ) : (
+    <div class='link-preview link-preview--no-metadata'>
+      <a {href} target='_blank'>
+        {href}
+      </a>
+    </div>
+  )
+}
+
+<style>
+  /* Default styles */
+  .link-preview img,
+  .link-preview video {
+    aspect-ratio: 1200 / 630;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+</style>

package/components/advanced/MediumZoom.astro

@@ -0,0 +1,50 @@
+---
+// https://github.com/francoischalifour/medium-zoom
+import config from 'virtual:config'
+
+interface Props {
+  selector?: string
+  background?: string
+}
+
+const { selector = config.integ.mediumZoom.selector, background = 'hsl(var(--background) / 0.8)' } =
+  Astro.props
+---
+
+<script is:inline src={`${config.npmCDN}/medium-zoom/dist/pure/medium-zoom.min.umd.js`}></script>
+<script is:inline define:vars={{ selector, background }}>
+  mediumZoom(selector, { background })
+</script>
+<style is:global>
+  .medium-zoom-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 0.3s;
+    will-change: opacity;
+  }
+  .medium-zoom--opened .medium-zoom-overlay {
+    cursor: pointer;
+    cursor: zoom-out;
+    opacity: 1;
+    z-index: 999;
+  }
+  .medium-zoom-image {
+    cursor: pointer;
+    cursor: zoom-in;
+    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1) !important;
+  }
+  .medium-zoom-image--hidden {
+    visibility: hidden;
+  }
+  .medium-zoom-image--opened {
+    position: relative;
+    cursor: pointer;
+    cursor: zoom-out;
+    will-change: transform;
+    z-index: 999;
+  }
+</style>

package/components/advanced/QRCode.astro

@@ -0,0 +1,35 @@
+---
+import config from 'virtual:config'
+
+const { content } = Astro.props
+---
+
+<div
+  id='qrcode-container'
+  aria-expanded='false'
+  class='absolute z-10 -mt-2 box-content max-h-0 overflow-hidden rounded-xl border bg-muted p-4 opacity-0 transition-all duration-300 ease-in-out *:my-0 aria-expanded:max-h-[256px] aria-expanded:translate-y-4 aria-expanded:opacity-100'
+>
+</div>
+
+<script is:inline src={`${config.npmCDN}/qrcodejs/qrcode.min.js`}></script>
+<script is:inline define:vars={{ content }}>
+  const renderContent = content ?? window.location.href
+  // Load qrcode
+  function loadqrcode(qrcodeContainer) {
+    if (!qrcodeContainer) throw new Error('qrcode container not found')
+    if (qrcodeContainer.innerHTML !== '') return
+    new QRCode(qrcodeContainer, renderContent)
+  }
+  const getQRCode = document.getElementById('get-qrcode')
+
+  const qrcodeContainer = document.getElementById('qrcode-container')
+  if (!qrcodeContainer) throw new Error('qrcode container not found')
+  getQRCode?.addEventListener('click', () => {
+    if (qrcodeContainer.ariaExpanded === 'true') {
+      qrcodeContainer.ariaExpanded = 'false'
+    } else {
+      loadqrcode(qrcodeContainer)
+      qrcodeContainer.ariaExpanded = 'true'
+    }
+  })
+</script>

package/components/advanced/Quote.astro

@@ -0,0 +1,44 @@
+---
+import { cn } from '../../utils'
+
+const { class: className } = Astro.props
+---
+
+<quote-component class={cn('not-prose inline-block', className)}>
+  <div
+    class='flex flex-row items-center gap-x-3 rounded-full border border-border px-4 py-2 text-sm shadow-sm'
+  >
+    <span class='relative flex items-center justify-center'>
+      <span
+        class='absolute size-2 animate-ping rounded-full border border-green-400 bg-green-400 opacity-75'
+      ></span>
+      <span class='size-2 rounded-full bg-green-400'></span>
+    </span>
+    <p id='quote-sentence' class='font-medium text-muted-foreground'>Loading...</p>
+  </div>
+</quote-component>
+
+<script>
+  import config from 'virtual:config'
+
+  const { quote } = config.integ
+
+  class Quote extends HTMLElement {
+    constructor() {
+      super()
+    }
+
+    render(sentence: string) {
+      const quoteEl = this.querySelector('#quote-sentence') as HTMLElement
+      if (!quoteEl) return
+      quoteEl.innerText = sentence
+    }
+
+    connectedCallback() {
+      fetch(quote.server)
+        .then((response) => response.json())
+        .then((data) => this.render(quote.target(data)))
+    }
+  }
+  customElements.define('quote-component', Quote)
+</script>

package/components/advanced/index.ts

@@ -0,0 +1,11 @@
+// Web content render
+export { default as Quote } from './Quote.astro'
+export { default as GithubCard } from './GithubCard.astro'
+export { default as LinkPreview } from './LinkPreview.astro'
+
+// Data transformer
+export { default as QRCode } from './QRCode.astro'
+export { default as MediumZoom } from './MediumZoom.astro'
+
+// Individual server integration
+export { default as Comment } from './Comment.astro'

package/components/user/Aside.astro

@@ -0,0 +1,74 @@
+---
+// https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Aside.astro
+import { AstroError } from 'astro/errors'
+
+import { cn } from '../../utils'
+
+const asideVariants = ['note', 'tip', 'caution', 'danger'] as const
+const icons = {
+  note: 'ui.svg#mingcute-information-line',
+  tip: 'aside.svg#mingcute-bulb-line',
+  caution: 'aside.svg#mingcute-alert-line',
+  danger: 'aside.svg#mingcute-alert-octagon-line'
+} as const
+
+interface Props {
+  type?: (typeof asideVariants)[number]
+  title?: string
+}
+
+let { type = 'note', title } = Astro.props
+
+if (!asideVariants.includes(type)) {
+  throw new AstroError(
+    'Invalid `type` prop passed to the `<Aside>` component.\n',
+    `Received: ${JSON.stringify(type)}\n` +
+      `Expected one of ${asideVariants.map((i) => JSON.stringify(i)).join(', ')}`
+  )
+}
+
+if (!title) {
+  title = type.toUpperCase()
+}
+---
+
+<aside aria-label={title} class='aside my-3 overflow-hidden rounded-xl border'>
+  <div
+    class={cn('aside-container border-l-8 border-primary px-4 py-3 bg-primary', `aside-${type}`)}
+  >
+    <p class='not-prose flex items-center gap-x-2 font-medium text-primary' aria-hidden='true'>
+      <svg class='size-6 text-primary'>
+        <use href={`/icons/${icons[type]}`}></use>
+      </svg>
+      {title}
+    </p>
+    <div class='aside-content mt-2'>
+      <slot />
+    </div>
+  </div>
+</aside>
+
+<style>
+  .aside > .aside-container {
+    --tw-bg-opacity: 0.07;
+
+    &.aside-tip {
+      --primary: 234 60% 60%;
+    }
+    &.aside-caution {
+      --primary: 41 90% 50%;
+    }
+    &.aside-danger {
+      --primary: 339 90% 60%;
+    }
+
+    .aside-content {
+      & > :first-child {
+        margin-top: 0;
+      }
+      & > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>

package/components/user/Button.astro

@@ -0,0 +1,79 @@
+---
+import { cn } from '../../utils'
+
+const { as: Tag = 'a', class: className, title, href, style = 'button', ...props } = Astro.props
+---
+
+<Tag
+  class={cn(
+    'group inline-flex items-center gap-x-1 rounded-lg bg-muted border border-border px-2 py-1 text-sm text-muted-foreground transition-all hover:bg-primary-foreground no-underline',
+    className,
+    !href && 'cursor-default',
+    style === 'pill' && 'rounded-xl'
+  )}
+  href={href}
+  data-astro-prefetch
+  {...props}
+>
+  <slot name='before'>
+    {
+      style === 'back' && (
+        <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='stroke-muted-foreground group-hover:stroke-primary'
+        >
+          <line
+            x1='19'
+            y1='12'
+            x2='5'
+            y2='12'
+            class='translate-x-3 scale-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-0 group-hover:scale-x-100'
+          />
+          <polyline
+            points='12 19 5 12 12 5'
+            class='translate-x-1 transition-all duration-300 ease-in-out group-hover:translate-x-0'
+          />
+        </svg>
+      )
+    }
+  </slot>
+  <slot>
+    {title && <p class='my-0'>{title}</p>}
+  </slot>
+  <slot name='after'>
+    {
+      style === 'ahead' && (
+        <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='stroke-muted-foreground group-hover:stroke-primary'
+        >
+          <line
+            x1='5'
+            y1='12'
+            x2='19'
+            y2='12'
+            class='translate-x-4 scale-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-1 group-hover:scale-x-100'
+          />
+          <polyline
+            points='12 5 19 12 12 19'
+            class='translate-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-1'
+          />
+        </svg>
+      )
+    }
+  </slot>
+</Tag>