fulldev-ui 0.6.0-beta.8 → 0.6.0

package/src/blocks/Projects1.astro

@@ -1,6 +1,4 @@
 ---
-// Heading etc left, image and content right, sticky
-import type { ComponentProps } from 'astro/types'
 import Badges from 'fulldev-ui/components/Badges.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Element from 'fulldev-ui/components/Element.astro'
@@ -8,96 +6,74 @@ import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  cards?: {
-    image?: ComponentProps<typeof Image> | undefined
-    badges?: ComponentProps<typeof Badges>['badges']
-    heading?: string | undefined
-    paragraph?: string | undefined
-  }[]
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, content, cards, ...rest } =
-  Astro.props
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  content,
+  cards,
+} = Astro.props
 ---
 
-<Section
-  class:list="projects-1"
-  {...rest}
->
+<Section class="projects-1">
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Element class:list="projects-1-cards">
-      {
-        cards?.map(({ image, badges, heading, paragraph }) => (
-          <Element class:list="projects-1-card">
-            <Image {...image} />
-            <Group>
-              <Badges
-                size="sm"
-                {badges}
+    <Split class="items-start">
+      <Prose class="lg:sticky lg:top-sticky-16 lg:max-w-xl">
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <Group>
+          <Buttons
+            variant="secondary"
+            {buttons}
+          />
+        </Group>
+      </Prose>
+      <Element class="flex flex-col gap-8">
+        {
+          cards?.map(({ image, badges, heading, paragraph }) => (
+            <Element class="flex flex-col gap-2">
+              <Image
+                class="mb-4"
+                {...image}
               />
-            </Group>
-            <Heading
-              as="h3"
-              size="xl"
-              text={heading}
-            />
-            <Paragraph text={paragraph} />
-          </Element>
-        ))
-      }
-    </Element>
+              <Group>
+                <Badges
+                  size="sm"
+                  {badges}
+                />
+              </Group>
+              <Heading
+                depth={(depth + 1) as 3}
+                as="h3"
+                size="xl"
+                text={heading}
+              />
+              <Paragraph text={paragraph} />
+            </Element>
+          ))
+        }
+      </Element>
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .projects-1 {
-      .container {
-        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
-      }
-
-      .prose {
-        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
-      }
-
-      .projects-1-cards {
-        @apply flex flex-col gap-8;
-      }
-
-      .projects-1-card {
-        @apply flex flex-col gap-2;
-
-        .image {
-          @apply mb-4 rounded-md;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Reviews1.astro

@@ -1,9 +1,7 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
+import Proof from 'fulldev-ui/components/Proof.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Card from 'fulldev-ui/structures/Card.astro'
@@ -12,9 +10,9 @@ import Masonry from 'fulldev-ui/structures/Masonry.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
 ---
 
 <Section
@@ -30,19 +28,21 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
       <Heading
         size="3xl"
         text={heading}
+        {depth}
       />
       <Paragraph text={paragraph} />
     </Writeup>
     <Masonry>
       {
-        cards?.map(({ rating, heading, paragraph, image }) => (
+        cards?.map(({ tagline, avatar, rating, heading, paragraph }) => (
           <Card class="reviews-1-card">
-            <Image {...image} />
-            <Rating
-              size="sm"
-              score={rating}
+            <Proof
+              text={tagline}
+              {rating}
+              {avatar}
             />
             <Heading
+              depth={(depth + 1) as 3}
               as="h3"
               size="md"
               text={heading}

package/src/blocks/Subheader.astro

@@ -1,27 +1,22 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Links from 'fulldev-ui/components/Links.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 
-interface Props extends HTMLAttributes<'header'> {
-  dark?: boolean | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  links?: ComponentProps<typeof Links>['links']
-}
+interface Props extends BlockSchema {}
 
-const { size = 'sm', links, ...rest } = Astro.props
+const { links, ...rest } = Astro.props
 ---
 
 <Element
   class:list={['subheader']}
   as="subheader"
-  {size}
   {...rest}
 >
   <Element class:list="subheader-container">
     <Links
       class:list="subheader-links"
-      {size}
+      size="sm"
       {links}
     />
   </Element>

package/src/blocks/{Contact1.astro → _Contact1.astro}

@@ -1,6 +1,5 @@
 ---
 // @ts-nocheck
-import type { ComponentProps } from 'astro/types'
 import Badges from 'fulldev-ui/components/Badges.astro'
 import Channel from 'fulldev-ui/components/Channel.astro'
 import Element from 'fulldev-ui/components/Element.astro'
@@ -13,7 +12,7 @@ import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Section from 'fulldev-ui/structures/Section.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
 const {
   badge,
@@ -40,7 +39,6 @@ const {
       <Element class:list="contact-1-content">
         <Badges
           size="sm"
-          {badge}
           {badges}
         />
         <Tagline

package/src/components/Avatar.astro

@@ -0,0 +1,40 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Image from 'fulldev-ui/components/Image.astro'
+
+interface Props extends ComponentProps<typeof Image> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
+
+const { size = 'md', ...rest } = Astro.props
+---
+
+<Image
+  class:list={[
+    'avatar',
+    {
+      [`size-${size}`]: size,
+    },
+  ]}
+  {...rest}
+/>
+
+<style is:global>
+  @layer fulldev {
+    .avatar {
+      @apply !rounded-full object-cover;
+
+      &.size-sm {
+        @apply h-9 w-9;
+      }
+
+      &.size-md {
+        @apply h-10 w-10;
+      }
+
+      &.size-lg {
+        @apply h-11 w-11;
+      }
+    }
+  }
+</style>

package/src/components/Avatars.astro

@@ -0,0 +1,20 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+
+interface Props extends ComponentProps<typeof Avatar> {
+  avatar?: ComponentProps<typeof Avatar> | undefined
+  avatars?: ComponentProps<typeof Avatar>[] | undefined
+}
+
+const { avatar, avatars, ...rest } = Astro.props
+---
+
+{
+  [avatar, ...(avatars || [])].filter(Boolean).map((avatar) => (
+    <Avatar
+      {...rest}
+      {...avatar}
+    />
+  ))
+}

package/src/components/Badge.astro

@@ -1,7 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
 
 interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
   variant?: 'primary' | 'secondary' | 'outline' | undefined
@@ -20,53 +19,25 @@ const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
   {size}
   {...rest}
 >
-  <Icon
-    size="sm"
-    name={icon}
-  />
-  <Element as="span">
-    <Fragment set:html={text} />
-    <slot />
-  </Element>
+  <Fragment set:html={text} />
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .badge {
-      @apply inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-full text-sm font-medium leading-none ring-offset-background transition-colors;
-      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
-      @apply disabled:pointer-events-none disabled:opacity-50;
-
-      &.size-sm {
-        @apply h-6 min-w-6 px-2;
-      }
-
-      &.size-md {
-        @apply h-7 min-w-7 px-3;
-      }
-
-      &.size-lg {
-        @apply h-8 min-w-8 px-3.5;
-      }
+      @apply inline-flex h-6 items-center justify-center whitespace-nowrap rounded-full px-2.5 text-xs font-medium leading-none ring-offset-background;
 
       &.variant-primary {
-        @apply bg-primary text-primary-foreground hover:bg-primary-hover;
+        @apply bg-primary text-primary-foreground;
       }
 
       &.variant-secondary {
-        @apply bg-secondary text-secondary-foreground hover:bg-secondary-hover;
+        @apply bg-secondary text-secondary-foreground;
       }
 
       &.variant-outline {
-        @apply border border-input text-accent-foreground hover:bg-accent;
-      }
-
-      .icon {
-        @apply first:last:absolute;
-      }
-
-      span {
-        @apply text-inherit;
+        @apply border border-input text-accent-foreground;
       }
     }
   }

package/src/components/Block.astro

@@ -1,12 +1,11 @@
 ---
 import { getEntries } from 'astro:content'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import { getHref } from 'fulldev-ui/utils/getHref'
 
 interface Props extends BlockSchema {}
 
-let { _block, pages, ...rest } = Astro.props
-
-pages = pages && (await getEntries(pages))
+let { _block, cards, pages, records, ...rest } = Astro.props
 
 const blocks = {
   ...import.meta.glob('/src/blocks/**/*.astro'),
@@ -18,13 +17,29 @@ const path = Object.keys(blocks).find(
 )
 
 const BlockComponent = path && (await (blocks[path] as any)()).default
+
+cards = [
+  ...(cards || []),
+  ...(await getEntries(records || [])).map(({ data }) => ({
+    ...data,
+  })),
+  ...(await getEntries(pages || [])).map(({ slug, data }) => ({
+    href: getHref(slug),
+    ...data,
+    heading: data.title,
+  })),
+]
 ---
 
 {
   BlockComponent && (
     <BlockComponent
+      {cards}
       {pages}
+      {records}
       {...rest}
-    />
+    >
+      <slot />
+    </BlockComponent>
   )
 }

package/src/components/Chip.astro

@@ -0,0 +1,73 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  variant?: 'primary' | 'secondary' | 'outline' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
+  icon?: string | undefined
+}
+
+const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
+---
+
+<Element
+  class:list="chip"
+  as={rest.href ? 'a' : 'div'}
+  {variant}
+  {size}
+  {...rest}
+>
+  <Icon
+    size="sm"
+    name={icon}
+  />
+  <Element as="span">
+    <Fragment set:html={text} />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .chip {
+      @apply inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-full text-sm font-medium leading-none ring-offset-background transition-colors;
+      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+      @apply disabled:pointer-events-none disabled:opacity-50;
+
+      &.size-sm {
+        @apply h-6 min-w-6 px-2;
+      }
+
+      &.size-md {
+        @apply h-7 min-w-7 px-3;
+      }
+
+      &.size-lg {
+        @apply h-8 min-w-8 px-3.5;
+      }
+
+      &.variant-primary {
+        @apply bg-primary text-primary-foreground hover:bg-primary-hover;
+      }
+
+      &.variant-secondary {
+        @apply bg-secondary text-secondary-foreground hover:bg-secondary-hover;
+      }
+
+      &.variant-outline {
+        @apply border border-input text-accent-foreground hover:bg-accent;
+      }
+
+      .icon {
+        @apply first:last:absolute;
+      }
+
+      span {
+        @apply text-inherit;
+      }
+    }
+  }
+</style>

package/src/components/Element.astro

@@ -66,4 +66,5 @@ const render = show === 'content' ? slot?.trim().length > 0 : show
   @import 'tailwindcss/base' layer(fulldev);
   @import 'fulldev-ui/css/theme' layer(fulldev);
   @import 'tailwindcss/components';
+  @import 'tailwindcss/utilities';
 </style>

package/src/components/Heading.astro

@@ -5,8 +5,8 @@ import Element from 'fulldev-ui/components/Element.astro'
 interface Props
   extends HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
+  depth?: 1 | 2 | 3 | 4 | 5 | 6 | number | undefined
   text?: string | undefined
-  muted?: boolean | undefined
   size?:
     | 'xs'
     | 'sm'
@@ -21,7 +21,7 @@ interface Props
     | undefined
 }
 
-const { as = 'h2', text, ...rest } = Astro.props
+const { depth = 2, as = `h${depth}`, text, ...rest } = Astro.props
 ---
 
 <Element
@@ -34,11 +34,12 @@ const { as = 'h2', text, ...rest } = Astro.props
 </Element>
 
 <style is:global>
-  .heading {
+  .heading,
+  .prose > :is(h1, h2, h3, h4, h5, h6) {
     @apply scroll-mt-20 font-bold tracking-tight text-foreground;
 
-    &.muted {
-      @apply text-muted-foreground;
+    code {
+      @apply rounded-sm bg-muted px-1 py-0.5 font-mono;
     }
 
     &.size-xs {
@@ -49,30 +50,37 @@ const { as = 'h2', text, ...rest } = Astro.props
       @apply text-sm;
     }
 
+    &:where(.prose > h6),
     &.size-md {
       @apply text-base;
     }
 
+    &:where(.prose > h5),
     &.size-lg {
       @apply text-lg;
     }
 
+    &:where(.prose > h4),
     &.size-xl {
       @apply text-xl;
     }
 
+    &:where(.prose > h3),
     &.size-2xl {
       @apply text-2xl;
     }
 
+    &:where(.prose > h2),
     &.size-3xl {
       @apply text-3xl;
     }
 
+    &:where(.prose > h2:not(:is(h1 ~ h2))),
     &.size-4xl {
       @apply text-4xl;
     }
 
+    &:where(.prose > h1),
     &.size-5xl {
       @apply text-4xl lg:text-5xl;
     }

package/src/components/Image.astro

@@ -42,7 +42,7 @@ const {
 <style is:global>
   @layer fulldev {
     .image {
-      @apply block;
+      @apply block rounded-md;
     }
   }
 </style>

package/src/components/Link.astro

@@ -30,7 +30,7 @@ const { variant = 'muted', size = 'md', text, icon, ...rest } = Astro.props
   @layer fulldev {
     .link,
     .prose-content > *:not(.prose-footer) > a {
-      @apply ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+      @apply cursor-pointer ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
 
       &.variant-primary,
       &:is(.prose-content > *:not(.prose-footer) > a) {

package/src/components/Menu.astro

@@ -19,11 +19,15 @@ const { size = 'md', heading, links, ...rest } = Astro.props
   class:list="menu"
   {...rest}
 >
-  <Heading
-    text={heading}
-    as="h6"
-    {size}
-  />
+  {
+    links && links.length > 0 && (
+      <Heading
+        text={heading}
+        as="h6"
+        {size}
+      />
+    )
+  }
   <Links
     {size}
     {links}