fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/components/Themer.astro

@@ -0,0 +1,76 @@
+---
+import Button from './Button.astro'
+import Icon from './Icon.astro'
+
+interface Props {
+  if?: any
+  size?: any
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
+}
+
+const { variant = 'secondary', ...rest } = Astro.props
+---
+
+<Button
+  class="themer"
+  {variant}
+  {...rest}
+>
+  <Icon
+    class="themer-light-icon"
+    name="sun"
+  />
+  <Icon
+    class="themer-dark-icon"
+    name="moon"
+  />
+  <select class="themer-select">
+    <option value="light">Light</option>
+    <option value="dark">Dark</option>
+    <option
+      value="system"
+      selected
+    >
+      System
+    </option>
+  </select>
+</Button>
+
+<script>
+  import { navigate } from 'astro:transitions/client'
+
+  function init(document: Document) {
+    document.querySelectorAll('.themer select').forEach((select) => {
+      select.addEventListener('change', (event) => {
+        if (event.target instanceof HTMLSelectElement) {
+          localStorage.setItem('theme', event.target.value)
+          navigate(window.location.href)
+        }
+      })
+    })
+  }
+
+  init(document)
+
+  document.addEventListener('astro:before-swap', (event) => {
+    init(event.newDocument)
+  })
+</script>
+
+<style is:global>
+  .themer {
+    @apply relative px-0;
+
+    .themer-select {
+      @apply absolute inset-0 cursor-pointer appearance-none opacity-0;
+    }
+  }
+
+  html.dark .themer-light-icon {
+    display: none;
+  }
+
+  html:not(.dark) .themer-dark-icon {
+    display: none;
+  }
+</style>

package/src/components/Toc.astro

@@ -1,70 +1,63 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Button from 'fulldev-ui/components/Button.astro'
+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 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, 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}`,
+  class: `depth-${button.depth}`,
+}))
 ---
 
 <Element
-  if={filteredHeadings?.length > 1}
   class:list="toc"
-  {size}
+  if={filteredHeadings?.length}
   {...rest}
 >
   <Heading
-    level={6}
-    text={heading}
+    as="a"
+    href="#"
+    {...h1}
   />
   {
-    filteredHeadings?.map((button: any) => (
-      <Button
-        class:list={`depth-${button.depth}`}
-        href={`#${button.slug}`}
-        variant="link"
-        text={button.text}
+    links?.map((link) => (
+      <Link
+        variant="muted"
+        size="sm"
+        {...link}
       />
     ))
   }
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .toc {
-      display: none;
+      @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;
 
-      @media (min-width: 1024px) {
-        display: flex;
-        position: sticky;
-        top: calc(var(--header-height, 0px) + var(--space-6));
-        bottom: 0;
-        flex-shrink: 0;
-        flex-direction: column;
-        justify-content: flex-start;
-        gap: var(--space-4);
-        z-index: 10;
-        min-width: calc(var(--space-7) * 3);
-
-        .depth-3 {
-          padding-left: var(--space-4);
-        }
+      .depth-3 {
+        @apply pl-3;
+      }
 
-        .depth-4 {
-          padding-left: var(--space-5);
-        }
+      .depth-4 {
+        @apply relative pl-6;
       }
     }
   }

package/src/components/Writeup.astro

@@ -1,89 +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'
 
-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']
-  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,
-  text,
-  list,
-  price,
-  ...rest
-} = Astro.props
+const { align = 'start', ...rest } = Astro.props
 ---
 
 <Element
   class:list="writeup"
+  {align}
   {...rest}
 >
-  <slot>
-    <Rating
-      color="brand"
-      {...typeof rating === 'number' ? { value: rating } : rating}
-    />
-    <Tagline text={tagline} />
-    <Badge {...badge} />
-    <Heading
-      {level}
-      text={heading}
-    />
-    <Text
-      lead={level === 1}
-      text={text}
-    />
-    <List items={list} />
-    <Price value={price} />
-  </slot>
+  <slot />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .writeup {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-      align-items: inherit;
-      gap: var(--space-3);
-      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>