fulldev-ui 0.6.0-beta-4 → 0.6.0-beta-5

package/src/blocks/Hero1.astro

@@ -3,15 +3,15 @@ import type { ComponentProps } from 'astro/types'
 import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Container from 'fulldev-ui/components/Container.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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { HeroSchema } from 'fulldev-ui/schemas/blocks/hero.ts'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, HeroSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
   Astro.props
@@ -22,31 +22,29 @@ const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
   {...rest}
 >
   <Container>
-    <Element class="hero-1-segment">
-      <Element class="hero-1-content">
-        <Badge
-          size="lg"
-          {...badge}
-        />
-        <Tagline
-          size="sm"
-          text={tagline}
-        />
-        <Heading
-          as="h1"
-          size="6xl"
-          text={heading}
-        />
-        <Paragraph
-          size="xl"
-          text={paragraph}
-        />
-      </Element>
+    <Writeup align="center">
+      <Badge
+        size="lg"
+        {...badge}
+      />
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="6xl"
+        text={heading}
+      />
+      <Paragraph
+        size="xl"
+        text={paragraph}
+      />
       <Buttons
         {buttons}
         size="lg"
       />
-    </Element>
+    </Writeup>
     <Image {...image} />
   </Container>
 </Section>
@@ -54,18 +52,6 @@ const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
 <style is:global>
   @layer fulldev {
     .hero-1 {
-      .hero-1-segment {
-        @apply flex flex-col items-center gap-8 text-center;
-      }
-
-      .hero-1-content {
-        @apply flex max-w-screen-md flex-col items-center gap-4 text-center;
-      }
-
-      .paragraph {
-        @apply text-balance;
-      }
-
       .image {
         @apply rounded-lg;
       }

package/src/blocks/Logos1.astro

@@ -0,0 +1,55 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Container from 'fulldev-ui/components/Container.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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block.ts'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, images, ...rest } = Astro.props
+---
+
+<Section
+  class:list="logos-1"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Heading
+        size="lg"
+        text={heading}
+      />
+      <Paragraph
+        size="sm"
+        muted
+        text={paragraph}
+      />
+    </Writeup>
+    <Element class:list="logos-1-cards">
+      {images?.map((image) => <Image {...image} />)}
+    </Element>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .logos-1 {
+      .logos-1-cards {
+        @apply grid grid-cols-1 gap-6 lg:grid-cols-3;
+      }
+
+      .logos-1-card {
+        @apply flex flex-col gap-3;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>

package/src/blocks/Products1.astro

@@ -9,10 +9,10 @@ import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Price from 'fulldev-ui/components/Price.astro'
 import Section from 'fulldev-ui/components/Section.astro'
-import type { ProductsSchema } from 'fulldev-ui/schemas/blocks/products'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 import { getHref } from 'fulldev-ui/utils/getHref'
 
-interface Props extends ComponentProps<typeof Section>, ProductsSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const { heading, button, products, ...rest } = Astro.props
 

package/src/blocks/Reviews1.astro

@@ -7,9 +7,9 @@ import Icon from 'fulldev-ui/components/Icon.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { FeaturesSchema } from 'fulldev-ui/schemas/blocks/features'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, FeaturesSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const { tagline, heading, paragraph, cards, ...rest } = Astro.props
 ---

package/src/components/Block.astro

@@ -1,30 +1,12 @@
 ---
 import { getEntries } from 'astro:content'
-import type { BannerSchema } from 'fulldev-ui/schemas/blocks/banner'
-import type { CategoriesSchema } from 'fulldev-ui/schemas/blocks/categories'
-import type { CtaSchema } from 'fulldev-ui/schemas/blocks/cta'
-import type { FeatureSchema } from 'fulldev-ui/schemas/blocks/feature'
-import type { HeroSchema } from 'fulldev-ui/schemas/blocks/hero'
-import type { ProductsSchema } from 'fulldev-ui/schemas/blocks/products'
-import type { FooterSchema } from 'fulldev-ui/schemas/components/footer'
-import type { HeaderSchema } from 'fulldev-ui/schemas/components/header'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props
-  extends HeroSchema,
-    CtaSchema,
-    FeatureSchema,
-    CategoriesSchema,
-    ProductsSchema,
-    HeaderSchema,
-    FooterSchema,
-    BannerSchema {
-  _block: string
-}
+interface Props extends BlockSchema {}
 
-let { _block, products, categories, ...rest } = Astro.props
+let { _block, pages, ...rest } = Astro.props
 
-products = products && (await getEntries(products))
-categories = categories && (await getEntries(categories))
+pages = pages && (await getEntries(pages))
 
 const blocks = {
   ...import.meta.glob('/src/blocks/**/*.astro'),
@@ -41,8 +23,7 @@ const BlockComponent = path && (await (blocks[path] as any)()).default
 {
   BlockComponent && (
     <BlockComponent
-      {products}
-      {categories}
+      {pages}
       {...rest}
     />
   )

package/src/components/{Banner.astro → Group.astro}

@@ -2,16 +2,15 @@
 import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 
-interface Props extends HTMLAttributes<'header'> {
+interface Props extends HTMLAttributes<'div'> {
   as?: HTMLTag
 }
 
-const { as = 'header', ...rest } = Astro.props
+const { ...rest } = Astro.props
 ---
 
 <Element
-  class:list="banner"
-  {as}
+  class:list="group"
   {...rest}
 >
   <slot />
@@ -19,8 +18,8 @@ const { as = 'header', ...rest } = Astro.props
 
 <style is:global>
   @layer fulldev {
-    .banner {
-      @apply relative flex w-full items-center bg-primary py-3;
+    .group {
+      @apply flex flex-wrap justify-stretch gap-2;
     }
   }
 </style>

package/src/components/Heading.astro

@@ -4,7 +4,7 @@ import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import { slugify } from 'fulldev-ui/utils/slugify'
 
-interface Props extends GlobalProps, HTMLAttributes<'h2'> {
+interface Props extends GlobalProps, HTMLAttributes<'h2'>, HTMLAttributes<'a'> {
   as?: HTMLTag
   text?: string | undefined
   muted?: boolean | undefined

package/src/components/Layout.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'astro/types'
 import Head from 'fulldev-ui/components/Head.astro'
 import type { HeadSchema } from 'fulldev-ui/schemas/components/head'
 
-type Props = HTMLAttributes<'body'> & {
+type Props = Omit<HTMLAttributes<'body'>, 'title'> & {
   head?: HeadSchema
 }
 

package/src/components/Panel.astro

@@ -19,7 +19,7 @@ const { ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .panel {
-      @apply w-full gap-x-gutter rounded-lg border bg-card px-gutter py-16 text-card-foreground lg:px-16;
+      @apply w-full gap-x-gutter rounded-lg border bg-card px-gutter py-20 text-card-foreground lg:px-20;
     }
   }
 </style>

package/src/components/Paragraph.astro

@@ -13,7 +13,7 @@ const { as = 'p', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list="text"
+  class:list="paragraph"
   {as}
   {...rest}
 >
@@ -23,32 +23,32 @@ const { as = 'p', text, ...rest } = Astro.props
 
 <style is:global>
   @layer fulldev {
-    .text,
+    .paragraph,
     .prose-content p {
-      @apply leading-relaxed text-foreground;
+      @apply text-foreground;
 
       &.muted {
         @apply text-muted-foreground;
       }
 
       &.size-xs {
-        @apply text-xs;
+        @apply text-xs leading-relaxed;
       }
 
       &.size-sm {
-        @apply text-sm;
+        @apply text-sm leading-relaxed;
       }
 
       &.size-md {
-        @apply text-base;
+        @apply text-base leading-relaxed;
       }
 
       &.size-lg {
-        @apply text-lg;
+        @apply text-lg leading-relaxed;
       }
 
       &.size-xl {
-        @apply text-xl;
+        @apply text-xl leading-relaxed;
       }
     }
   }

package/src/components/Prose.astro

@@ -19,14 +19,14 @@ const { ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .prose {
-      @apply relative w-full max-w-screen-md py-8;
+      @apply relative w-full max-w-screen-md;
 
       > * {
-        @apply mt-6 first:mt-0;
+        @apply mt-6;
       }
 
       p {
-        @apply mt-4 first:mt-0;
+        @apply mt-4;
       }
 
       code:not(.astro-code code) {
@@ -39,7 +39,7 @@ const { ...rest } = Astro.props
       h4,
       h5,
       h6 {
-        @apply mt-8 scroll-m-20 font-bold first:mt-0;
+        @apply scroll-m-20 font-bold;
 
         code {
           font-size: inherit !important;
@@ -51,11 +51,11 @@ const { ...rest } = Astro.props
       }
 
       > h2 {
-        @apply text-2xl;
+        @apply mt-10 text-2xl;
       }
 
       > h3 {
-        @apply text-xl;
+        @apply mt-8 text-xl;
       }
 
       > h4 {
@@ -71,7 +71,15 @@ const { ...rest } = Astro.props
       }
 
       > aside {
-        @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
+        @apply rounded-md border border-destructive p-4 text-destructive;
+      }
+
+      img {
+        @apply my-12 rounded-lg;
+      }
+
+      > *:first-child {
+        @apply mt-0;
       }
     }
   }

package/src/components/Section.astro

@@ -20,7 +20,7 @@ const { as = 'section', ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .section {
-      @apply relative w-full bg-background py-16 first:py-8;
+      @apply relative w-full bg-background py-20 first:pt-20 lg:py-32;
     }
   }
 </style>

package/src/components/Stack.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="stack"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .stack {
+      @apply relative grid w-full auto-cols-fr items-start gap-x-16 gap-y-8 lg:grid-flow-col;
+    }
+  }
+</style>

package/src/components/Tagline.astro

@@ -13,7 +13,7 @@ const { as = 'p', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list="text"
+  class:list="tagline"
   {as}
   {...rest}
 >

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,41 +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 hidden shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto py-8 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;
 
-      --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
-      top: var(--headers);
-      width: var(--toc-width);
-      max-height: calc(100vh - var(--headers));
-
-      &,
-      & ~ * {
-        @media (min-width: 768px) {
-          --toc-width: 12rem;
-        }
-      }
-
       .depth-3 {
         @apply pl-3;
       }

package/src/components/Writeup.astro

@@ -0,0 +1,59 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+  align?: 'left' | 'center' | 'right'
+}
+
+const { align = 'start', ...rest } = Astro.props
+---
+
+<Element
+  class:list="writeup"
+  {align}
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .writeup {
+      @apply relative w-full;
+
+      &.align-left {
+        @apply mr-auto flex flex-col items-start text-left;
+      }
+
+      &.align-center {
+        @apply mx-auto flex flex-col items-center text-center;
+      }
+
+      &.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;
+        }
+      }
+    }
+  }
+</style>

package/src/content/config.ts

@@ -1,6 +1,5 @@
 import { defineCollection } from 'astro:content'
-import { layoutSchema } from 'fulldev-ui/schemas/layoutSchema.ts'
-import { pageSchema } from 'fulldev-ui/schemas/pageSchema.ts'
+import { pageSchema } from 'fulldev-ui/schemas/page.ts'
 
 export const collections = {
   pages: defineCollection({
@@ -9,6 +8,6 @@ export const collections = {
   }),
   layouts: defineCollection({
     type: 'data',
-    schema: layoutSchema,
+    schema: pageSchema,
   }),
 }

package/src/layouts/Category.astro

@@ -1,5 +1,6 @@
 ---
 import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
 import { getCollection } from 'astro:content'
 import Products1 from 'fulldev-ui/blocks/Products1.astro'
 import Carousel from 'fulldev-ui/components/Carousel.astro'
@@ -7,9 +8,13 @@ import Element from 'fulldev-ui/components/Element.astro'
 import Layout from 'fulldev-ui/components/Layout.astro'
 import Prose from 'fulldev-ui/components/Prose.astro'
 import Select from 'fulldev-ui/components/Select.astro'
-import { getHref } from 'fulldev-ui/utils/getHref'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
 
-type Props = ComponentProps<typeof Layout>
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+  slug: CollectionEntry<'pages'>['slug']
+}
 
 const { render, slug, title, description } = Astro.props
 

package/src/layouts/Doc.astro

@@ -11,13 +11,11 @@ import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Prose from 'fulldev-ui/components/Prose.astro'
 import Sidebar from 'fulldev-ui/components/Sidebar.astro'
 import Toc from 'fulldev-ui/components/Toc.astro'
-import type { LayoutSchema } from 'fulldev-ui/schemas/layoutSchema.ts'
-import type { PageSchema } from 'fulldev-ui/schemas/pageSchema.ts'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
 
-type Props = ComponentProps<typeof Layout> &
-  LayoutSchema &
-  PageSchema &
-  Pick<CollectionEntry<'pages'>, 'render'>
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
 
 const { header, sidebar, render, title, description, footer } = Astro.props
 
@@ -56,17 +54,3 @@ const { Content } = await render()
   </Container>
   <Footer {...footer} />
 </Layout>
-
-<style is:global>
-  @layer fulldev {
-    .doc {
-      .doc-container {
-        @apply flex gap-x-gutter;
-      }
-
-      .doc-main {
-        @apply flex grow justify-evenly gap-x-gutter;
-      }
-    }
-  }
-</style>