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

package/src/components/Toc.astro

@@ -1,22 +1,27 @@
 ---
 import type { ComponentProps, HTMLAttributes } 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 type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Links from './Links.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   heading?: ComponentProps<typeof Heading>['text']
   render?: CollectionEntry<'pages'>['render'] | undefined
 }
 
-const { size = 'sm', heading, render, ...rest } = Astro.props
+const { size = 'sm', heading = 'On this page', render, ...rest } = Astro.props
 
 const headings = render ? (await render())?.headings : []
 const filteredHeadings = headings?.filter(
   (heading: any) => heading.depth >= 2 && heading.depth <= 4
 )
+const links = filteredHeadings?.map((button: any) => ({
+  text: button.text,
+  href: `#${button.slug}`,
+  class: `depth-${button.depth}`,
+}))
 ---
 
 <Element
@@ -26,45 +31,41 @@ const filteredHeadings = headings?.filter(
   {...rest}
 >
   <Heading
-    level={6}
+    level={5}
     text={heading}
+    {size}
+  />
+  <Links
+    direction="column"
+    {links}
+    {size}
   />
-  {
-    filteredHeadings?.map((button: any) => (
-      <Button
-        class:list={`depth-${button.depth}`}
-        href={`#${button.slug}`}
-        variant="link"
-        text={button.text}
-      />
-    ))
-  }
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .toc {
-      display: none;
+      @apply sticky bottom-0 z-10 hidden shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto py-8 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);
+      --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--headers);
+      width: var(--toc-width);
+      max-height: calc(100vh - var(--headers));
 
-        .depth-3 {
-          padding-left: var(--space-4);
+      &,
+      & ~ * {
+        @media (min-width: 768px) {
+          --toc-width: 12rem;
         }
+      }
 
-        .depth-4 {
-          padding-left: var(--space-5);
-        }
+      .depth-3 {
+        @apply pl-3;
+      }
+
+      .depth-4 {
+        @apply relative pl-6;
       }
     }
   }

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>

package/src/components/_Sidebar copy.astro

@@ -0,0 +1,87 @@
+<!-- ---
+import type { HTMLAttributes } from 'astro/types'
+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 Themer from 'fulldev-ui/components/Themer.astro'
+import type { SidebarSchema } from 'fulldev-ui/schemas/components/sidebar'
+import Heading from './Heading.astro'
+
+interface Props extends HTMLAttributes<'aside'>, SidebarSchema {}
+
+const { company, logo, menus, heading, themer, ...rest } = Astro.props
+---
+
+<Element
+  class:list="sidebar"
+  as="aside"
+  {...rest}
+>
+  <Element
+    class:list="sidebar-header"
+    as="header"
+  >
+    <Logo
+      {company}
+      {...logo}
+      size="sm"
+    />
+    <Heading
+      as="h5"
+      size="md"
+      text={heading}
+    />
+  </Element>
+  <Element class:list="sidebar-content">
+    <Element
+      class:list="sidebar-nav"
+      as="nav"
+    >
+      {
+        menus?.map(({ heading, links }) => (
+          <Element class:list="sidebar-menu">
+            <Heading
+              text={heading}
+              size="sm"
+              as="h6"
+            />
+            <Links
+              direction="column"
+              size="sm"
+              {links}
+            />
+          </Element>
+        ))
+      }
+    </Element>
+    <Themer if={themer} />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .sidebar {
+      @apply sticky bottom-0 z-10 hidden h-full flex-col items-start justify-start border-r bg-background lg:flex;
+
+      --height: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--height);
+      width: var(--sidebar-width);
+      max-height: calc(100vh - var(--height));
+
+      &,
+      & ~ * {
+        --sidebar-width: 13rem;
+      }
+
+      .sidebar-header {
+        @apply sticky flex h-14 w-full items-center px-gutter py-6;
+      }
+
+      .sidebar-content {
+        @apply flex w-full flex-1 flex-col items-start gap-7 overflow-y-auto px-gutter pb-14 pt-6 first:pt-14;
+        @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+      }
+    }
+  }
+</style> -->