fulldev-ui 0.6.0-beta.2 → 0.6.0-beta.6

package/src/components/Toc.astro

@@ -1,22 +1,23 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
+import type { MarkdownHeading } from 'astro'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Links from './Links.astro'
+import Link from './Link.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  heading?: ComponentProps<typeof Heading>['text']
-  render?: CollectionEntry<'pages'>['render'] | undefined
+  headings?: MarkdownHeading[] | undefined
 }
 
-const { size = 'sm', heading = 'On this page', render, ...rest } = Astro.props
+const { headings, ...rest } = Astro.props
 
-const headings = render ? (await render())?.headings : []
 const filteredHeadings = headings?.filter(
   (heading: any) => heading.depth >= 2 && heading.depth <= 4
 )
+
+const h1 = headings?.find((heading: any) => heading.depth === 1)
+
 const links = filteredHeadings?.map((button: any) => ({
   text: button.text,
   href: `#${button.slug}`,
@@ -25,32 +26,32 @@ const links = filteredHeadings?.map((button: any) => ({
 ---
 
 <Element
-  if={filteredHeadings?.length > 1}
   class:list="toc"
-  {size}
+  if={filteredHeadings?.length}
   {...rest}
 >
   <Heading
-    level={5}
-    text={heading}
-    {size}
-  />
-  <Links
-    direction="column"
-    {links}
-    {size}
+    as="a"
+    href="#"
+    {...h1}
   />
+  {
+    links?.map((link) => (
+      <Link
+        variant="muted"
+        size="sm"
+        {...link}
+      />
+    ))
+  }
 </Element>
 
 <style is:global>
   @layer fulldev {
     .toc {
-      @apply sticky bottom-0 z-10 -mt-14 hidden w-52 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto py-14 md:flex;
+      @apply lg:top-sticky-16 sticky bottom-0 z-10 hidden w-48 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto md:flex;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
-      top: var(--header-height, 0px);
-      max-height: calc(100vh - var(--header-height, 0px));
-
       .depth-3 {
         @apply pl-3;
       }

package/src/components/Writeup.astro

@@ -1,107 +1,58 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Price from 'fulldev-ui/components/Price.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Lead from './Lead.astro'
-import Paragraph from './Paragraph.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  level?: ComponentProps<typeof Heading>['level']
-  badge?: ComponentProps<typeof Badge> | undefined
-  tagline?: ComponentProps<typeof Tagline>['text']
-  heading?: ComponentProps<typeof Heading>['text']
-  lead?: ComponentProps<typeof Lead>['text']
-  paragraph?: ComponentProps<typeof Paragraph>['text']
-  text?: ComponentProps<typeof Text>['text']
-  list?: ComponentProps<typeof List>['items']
-  align?: 'start' | 'center' | 'end' | undefined
-  price?: ComponentProps<typeof Price>['value']
-  rating?:
-    | ComponentProps<typeof Rating>
-    | ComponentProps<typeof Rating>['value']
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+  align?: 'left' | 'center' | 'right'
 }
 
-const {
-  level = 2,
-  rating,
-  badge,
-  tagline,
-  heading,
-  lead,
-  paragraph,
-  text,
-  list,
-  price,
-  size,
-  ...rest
-} = Astro.props
+const { align = 'start', ...rest } = Astro.props
 ---
 
 <Element
   class:list="writeup"
-  {size}
+  {align}
   {...rest}
 >
-  <slot>
-    <Rating
-      {size}
-      {...typeof rating === 'number' ? { value: rating } : rating}
-    />
-    <Tagline text={tagline} />
-    <Badge
-      {size}
-      {...badge}
-    />
-    <Heading
-      {size}
-      {level}
-      text={heading}
-    />
-    <Lead
-      {size}
-      text={lead}
-    />
-    <Paragraph
-      {size}
-      text={paragraph}
-    />
-    <List
-      items={list}
-      {size}
-    />
-    <Price value={price} />
-  </slot>
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .writeup {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: inherit;
-      text-align: inherit;
+      @apply relative w-full;
 
-      &.align-start {
-        align-items: flex-start;
-        text-align: left;
+      &.align-left {
+        @apply mr-auto flex flex-col items-start text-left;
       }
 
       &.align-center {
-        align-items: center;
-        text-align: center;
+        @apply mx-auto flex flex-col items-center text-center;
       }
 
-      &.align-end {
-        align-items: flex-end;
-        text-align: right;
+      &.align-right {
+        @apply ml-auto flex flex-col items-end text-right;
+      }
+
+      .heading {
+        @apply max-w-screen-lg text-balance;
+      }
+
+      .paragraph {
+        @apply max-w-screen-md text-balance;
+      }
+
+      > * {
+        & + * {
+          @apply mt-4;
+        }
+
+        & + .group,
+        & + .button,
+        & + .buttons {
+          @apply mt-8;
+        }
       }
     }
   }

package/src/components/_Author.astro

@@ -0,0 +1,90 @@
+<!-- ---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import type { RatingSchema } from 'fulldev-ui/schemas/components/rating'
+import Avatar from './Avatar.astro'
+
+interface Props extends HTMLAttributes<'div'>, RatingSchema {}
+
+const { size = 'md', score, text, avatars, avatar, ...rest } = Astro.props
+
+const getIcon = (count: number) => {
+  if (!score) return
+  const difference = score - count
+  if (difference >= -0.25) return 'star-filled'
+  if (difference >= -0.75) return 'star-half-filled'
+  return 'star'
+}
+---
+
+<Element
+  class:list="author"
+  {size}
+  {...rest}
+>
+  <Avatar {...avatar} />
+  {avatars?.map((avatar) => <Avatar {...avatar} />)}
+  <Element class:list="rating-content">
+    <Element
+      class:list="rating-stars"
+      {...rest}
+    >
+      {
+        score &&
+          [1, 2, 3, 4, 5].map((count) => (
+            <Icon
+              name={getIcon(count)}
+              {size}
+            />
+          ))
+      }
+    </Element>
+    <Fragment set:html={text} />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .rating {
+      @apply flex items-center gap-3;
+
+      .avatar + .avatar {
+        @apply -ml-3;
+      }
+
+      .rating-content {
+        @apply flex flex-col gap-1 text-muted-foreground;
+      }
+
+      .rating-stars {
+        @apply flex gap-1 text-primary;
+      }
+
+      &.size-sm {
+        @apply gap-2;
+
+        .rating-content {
+          @apply text-xs leading-none;
+        }
+      }
+
+      &.size-md {
+        @apply gap-2.5;
+
+        .rating-content {
+          @apply text-sm leading-none;
+        }
+      }
+
+      &.size-lg {
+        @apply gap-3;
+
+        .rating-content {
+          @apply text-base leading-none;
+        }
+      }
+    }
+  }
+</style> -->

package/src/components/_Header.astro

@@ -0,0 +1,129 @@
+<!-- ---
+import type { ComponentProps,HTMLAttributes } from 'astro/types'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Cart from 'fulldev-ui/components/Cart.astro'
+import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Links from 'fulldev-ui/components/Links.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
+import Themer from 'fulldev-ui/components/Themer.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Search from './Search.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'header'> {
+  logo?: ComponentProps<typeof Logo>
+  company?: ComponentProps<typeof Logo>['company']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  links?: ComponentProps<typeof Links>['links']
+  menu?: ComponentProps<typeof Menu>['groups']
+  panel?: boolean | undefined
+  search?: boolean | undefined
+  open?: boolean | undefined
+  cart?: string | undefined
+  socials?: ComponentProps<typeof Socials>['socials']
+  themer?: boolean | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
+
+const {
+  size = 'sm',
+  open,
+  logo,
+  company,
+  buttons,
+  links,
+  search,
+  panel,
+  socials,
+  menu,
+  cart,
+  themer,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list="header"
+  as="header"
+  {size}
+  {open}
+  {...rest}
+>
+  <Element class:list="header-container">
+    <Logo
+      {company}
+      {size}
+      {...typeof logo === 'string' ? { src: logo } : logo}
+    />
+    <Links
+      class:list="header-links"
+      {size}
+      {links}
+    />
+    <Socials
+      {size}
+      variant="ghost"
+      {socials}
+    />
+    <Buttons
+      class:list="header-buttons"
+      {size}
+      {buttons}
+    >
+      <Search size="sm" />
+      <Themer
+        if={themer}
+        {size}
+      />
+      <Cart
+        if={cart}
+        variant="secondary"
+        heading={cart}
+        {size}
+      />
+      <Drawer
+        class:list={['header-button']}
+        icon="menu-2"
+        id="menu"
+        variant="secondary"
+        {logo}
+        {company}
+        {buttons}
+        {links}
+        {menu}
+        {size}
+      />
+    </Buttons>
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .header {
+      @apply sticky left-0 top-0 z-20 flex h-14 items-center overflow-hidden border-b bg-background;
+
+      .header-container {
+        @apply container flex w-full items-center justify-between gap-6;
+      }
+
+      &,
+      & ~ * {
+        --header-height: 3.5rem;
+      }
+
+      .header-links {
+        @apply mr-auto max-lg:hidden;
+      }
+
+      .header-socials {
+        @apply ml-auto max-lg:hidden;
+      }
+
+      .menu-button {
+        @apply lg:hidden;
+      }
+    }
+  }
+</style> -->

package/src/components/_Image.astro

@@ -0,0 +1,79 @@
+---
+// @ts-nocheck
+import type { ImageMetadata } from 'astro'
+import type { HTMLAttributes } from 'astro/types'
+import { Image as AstroImage } from 'astro:assets'
+import { getEntry } from 'astro:content'
+
+interface Props extends GlobalProps, HTMLAttributes<'img'> {
+  id?: any
+  size?: 'sm' | 'md' | 'lg' | undefined
+  position?: 'background' | 'cover' | 'inset' | undefined
+}
+
+const { id } = Astro.props
+const entry = id ? (await getEntry('images', id))?.data : {}
+
+const {
+  width = 1920,
+  height = 1920,
+  position,
+  src,
+  alt,
+  size,
+  ...rest
+} = {
+  ...entry,
+  ...Astro.props,
+}
+
+function getAltBySrc() {
+  if (!src) return
+  const filename = src?.split('/').pop()
+  const slug = filename && filename.split('.')[0]
+  const unslugged = slug?.replace(/-/g, ' ')
+  return unslugged || ''
+}
+
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
+const image = images[src as keyof typeof images]
+---
+
+{
+  (image || src) && (
+    <AstroImage
+      class:list={[
+        'image',
+        {
+          [`size-${size}`]: size,
+          [`position-${position}`]: position,
+        },
+      ]}
+      alt={alt || getAltBySrc()}
+      src={image ? image() : src}
+      width={width ? Number(width) : undefined}
+      height={height ? Number(height) : undefined}
+      {...rest}
+    />
+  )
+}
+
+<style is:global>
+  @layer fulldev {
+    .image {
+      @apply block;
+
+      &.position-contain {
+        @apply h-auto w-full object-contain;
+      }
+
+      &.position-cover {
+        @apply h-full w-full object-cover;
+      }
+
+      &.position-background {
+        @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
+      }
+    }
+  }
+</style>

package/src/components/_Prose copy.astro

@@ -0,0 +1,172 @@
+---
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import {
+  default as Lead,
+  default as Paragraph,
+} from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import { crush } from 'radash'
+import type Sidebar from './Sidebar.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag | undefined
+  render?: any
+  sidebar?: ComponentProps<typeof Sidebar> | undefined
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  toc?: boolean | ComponentProps<typeof Toc>['heading'] | undefined
+  tagline?: ComponentProps<typeof Tagline>['text'] | undefined
+  heading?: ComponentProps<typeof Heading>['text'] | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  lead?: ComponentProps<typeof Lead>['text'] | undefined
+}
+
+const {
+  toc = false,
+  slug,
+  sidebar,
+  render,
+  tagline,
+  heading,
+  lead,
+  image,
+  ...rest
+} = Astro.props
+
+const Content = render && (await render())?.Content
+
+const flatMenu = crush(sidebar?.menu ?? {})
+const slugs = Object.entries(flatMenu)
+  .map(([key, value]) => (key.endsWith('.slug') ? value : null))
+  .filter(Boolean)
+const slugIndex = slugs.findIndex((val) => val === slug)
+
+const prevSlug = slugs[slugIndex - 1]
+const nextSlug = slugs[slugIndex + 1]
+---
+
+<Element
+  class:list="prose"
+  {...rest}
+>
+  <Element class:list="prose-container">
+    <Element class:list="prose-content">
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        level={2}
+        text={heading}
+      />
+      <Paragraph text={lead} />
+      <Image {...image} />
+      {Content && <Content />}
+      <slot />
+      <Element class:list="prose-footer">
+        <Button
+          class:list="prose-prev"
+          icon={prevSlug && 'arrow-left'}
+          slug={prevSlug}
+          variant="secondary"
+        />
+        <Button
+          class:list="prose-next"
+          icon={nextSlug && 'arrow-right'}
+          slug={nextSlug}
+          variant="secondary"
+          reverse
+        />
+      </Element>
+    </Element>
+    <Toc
+      if={toc}
+      heading={typeof toc === 'string' ? toc : undefined}
+      {render}
+    />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .prose {
+      @apply relative items-start py-28 first:pt-14;
+
+      .prose-container {
+        @apply container flex h-full w-full flex-grow items-start justify-evenly gap-14 gap-x-gutter;
+      }
+
+      .prose-content {
+        @apply w-full max-w-screen-md;
+
+        > * {
+          @apply mt-6 first:mt-0;
+        }
+
+        p {
+          @apply mt-4 first:mt-0;
+        }
+
+        code:not(.astro-code code) {
+          @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          @apply mt-8 scroll-m-20 font-semibold first:mt-0;
+
+          code {
+            font-size: inherit !important;
+          }
+        }
+
+        > h1 {
+          @apply text-4xl font-extrabold;
+        }
+
+        > h2 {
+          @apply text-2xl;
+        }
+
+        > h3 {
+          @apply text-xl;
+        }
+
+        > h4 {
+          @apply text-lg;
+        }
+
+        > h5 {
+          @apply text-base;
+        }
+
+        > h6 {
+          @apply text-sm;
+        }
+
+        > aside {
+          @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
+        }
+      }
+
+      .prose-footer {
+        @apply mt-14 flex items-center;
+
+        .prose-next {
+          @apply ml-auto;
+        }
+      }
+
+      .toc {
+        @apply order-last;
+      }
+    }
+  }
+</style>