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

package/src/layouts/Job.astro

@@ -2,20 +2,18 @@
 import type { ComponentProps } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 import { getEntries } from 'astro:content'
+import Content3 from 'fulldev-ui/blocks/Content3.astro'
 import Footer from 'fulldev-ui/blocks/Footer.astro'
 import Header from 'fulldev-ui/blocks/Header.astro'
-import Job1 from 'fulldev-ui/blocks/Job1.astro'
-import Blocks from 'fulldev-ui/components/Blocks.astro'
+import Block from 'fulldev-ui/components/Block.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Layout from 'fulldev-ui/components/Layout.astro'
-import type { LayoutSchema } from 'fulldev-ui/schemas/layoutSchema.ts'
-import type { PageSchema } from 'fulldev-ui/schemas/pageSchema.ts'
-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> &
-  LayoutSchema &
-  PageSchema &
-  Pick<CollectionEntry<'pages'>, 'render'>
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
 
 const {
   title,
@@ -31,6 +29,8 @@ const {
 } = Astro.props
 
 const categoriesEntries = categories && (await getEntries(categories))
+
+const { Content } = await render()
 ---
 
 <Layout
@@ -42,23 +42,19 @@ const categoriesEntries = categories && (await getEntries(categories))
     {...header}
   />
   <Element as="main">
-    <Job1
+    <Content3
       badges={categoriesEntries?.map((category) => ({
         text: category.data.title,
         href: getHref(category.slug),
       }))}
       heading={title}
       paragraph={description}
-      list={list}
-      button={button}
-      render={render}
-    />
-    <Blocks {blocks} />
+      {list}
+      {button}
+    >
+      <Content />
+    </Content3>
+    {blocks?.map((block) => <Block {...block} />)}
   </Element>
   <Footer {...footer} />
 </Layout>
-
-<style is:global>
-  @layer fulldev {
-  }
-</style>

package/src/layouts/Page.astro

@@ -1,15 +1,14 @@
 ---
 import type { ComponentProps } from 'astro/types'
+import Banner from 'fulldev-ui/blocks/Banner.astro'
 import Footer from 'fulldev-ui/blocks/Footer.astro'
 import Header from 'fulldev-ui/blocks/Header.astro'
-import Banner from 'fulldev-ui/components/Banner.astro'
-import Blocks from 'fulldev-ui/components/Blocks.astro'
+import Block from 'fulldev-ui/components/Block.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Layout from 'fulldev-ui/components/Layout.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
+interface Props extends ComponentProps<typeof Layout>, PageSchema {}
 
 const { banner, sidebar, header, blocks, footer } = Astro.props
 ---
@@ -24,7 +23,7 @@ const { banner, sidebar, header, blocks, footer } = Astro.props
     {...header}
   />
   <Element as="main">
-    <Blocks {blocks} />
+    {blocks?.map((block) => <Block {...block} />)}
   </Element>
   <Footer {...footer} />
 </Layout>

package/src/layouts/Post.astro

@@ -1,20 +1,52 @@
 ---
 import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Content1 from 'fulldev-ui/blocks/Content1.astro'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+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 type { PageSchema } from 'fulldev-ui/schemas/page'
 
-type Props = ComponentProps<typeof Layout>
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
 
-const { render } = Astro.props
+const {
+  title,
+  description,
+  list,
+  button,
+  header,
+  sidebar,
+  blocks,
+  footer,
+  render,
+} = Astro.props
+
+const { Content, headings } = await render()
 ---
 
 <Layout
   class:list="post"
   {...Astro.props}
 >
-  <Prose
-    {render}
-    toc={true}
+  <Header
+    {...sidebar}
+    {...header}
   />
-  <slot />
+  <Element as="main">
+    <Content1
+      heading={title}
+      paragraph={description}
+      {list}
+      {button}
+      {headings}
+    >
+      <Content />
+    </Content1>
+    {blocks?.map((block) => <Block {...block} />)}
+  </Element>
+  <Footer {...footer} />
 </Layout>

package/src/layouts/Product.astro

@@ -1,6 +1,7 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import { getImage } from 'astro:assets'
+import type { CollectionEntry } from 'astro:content'
 import { getCollection, getEntry } from 'astro:content'
 import Products1 from 'fulldev-ui/blocks/Products1.astro'
 import CartForm from 'fulldev-ui/components/CartForm.svelte'
@@ -11,8 +12,11 @@ import Layout from 'fulldev-ui/components/Layout.astro'
 import List from 'fulldev-ui/components/List.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Prose from 'fulldev-ui/components/Prose.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page'
 
-type Props = ComponentProps<typeof Layout>
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
 
 const {
   render,

package/src/schemas/components/block.ts

@@ -1,22 +1,60 @@
 import { z } from 'astro:content'
-import { categoriesSchema } from 'fulldev-ui/schemas/blocks/categories'
-import { ctaSchema } from 'fulldev-ui/schemas/blocks/cta'
-import { featuresSchema } from 'fulldev-ui/schemas/blocks/features'
-import { heroSchema } from 'fulldev-ui/schemas/blocks/hero'
-import { productsSchema } from 'fulldev-ui/schemas/blocks/products'
-import { featureSchema } from '../blocks/feature'
-import { reviewsSchema } from '../blocks/reviews'
-import { headerSchema } from './header'
+import pathSchema from '../utils/pathSchema'
+import { badgeSchema } from './badge'
+import { buttonSchema } from './button'
+import { channelSchema } from './channel'
+import { headingSchema } from './heading'
+import { iconSchema } from './icon'
+import { imageSchema } from './image'
+import { linkSchema } from './link'
+import { logoSchema } from './logo'
+import { menuSchema } from './menu'
+import { paragraphSchema } from './paragraph'
+import { socialSchema } from './social'
+import { taglineSchema } from './tagline'
 
-const _block = { _block: z.string() }
+export const blockSchema = z.object({
+  _block: z.string().optional(),
+  dark: z.boolean().optional(),
+  logo: logoSchema.optional(),
+  link: linkSchema.optional(),
+  links: linkSchema.array().optional(),
+  menus: menuSchema.array().optional(),
+  themer: z.boolean().optional(),
+  search: z.boolean().optional(),
+  cart: z.boolean().optional(),
+  text: z.string().optional(),
+  tagline: taglineSchema.shape.text,
+  badge: badgeSchema.optional(),
+  badges: badgeSchema.array().optional(),
+  heading: headingSchema.shape.text,
+  paragraph: paragraphSchema.shape.text,
+  list: z.string().array().optional(),
+  content: z.string().optional(),
+  button: buttonSchema.optional(),
+  buttons: buttonSchema.array().optional(),
+  image: imageSchema.optional(),
+  images: imageSchema.array().optional(),
+  channels: channelSchema.array().optional(),
+  socials: socialSchema.shape.href.array().optional(),
+  pages: pathSchema('pages').array().optional(),
+  products: pathSchema('pages').array().optional(),
+  cards: z
+    .object({
+      image: imageSchema.optional(),
+      icon: iconSchema.shape.name,
+      tagline: taglineSchema.shape.text,
+      badge: badgeSchema.optional(),
+      badges: badgeSchema.array().optional(),
+      heading: headingSchema.shape.text,
+      paragraph: paragraphSchema.shape.text,
+      list: z.string().array().optional(),
+      button: buttonSchema.optional(),
+      buttons: buttonSchema.array().optional(),
+    })
+    .strict()
+    .array()
+    .optional(),
+})
 
-export const blockSchema = z.union([
-  heroSchema.extend(_block),
-  ctaSchema.extend(_block),
-  featureSchema.extend(_block),
-  productsSchema.extend(_block),
-  categoriesSchema.extend(_block),
-  headerSchema.extend(_block),
-  featuresSchema.extend(_block),
-  reviewsSchema.extend(_block),
-])
+export type BlockSchema = z.infer<typeof blockSchema>

package/src/schemas/imageSchema.ts

@@ -5,9 +5,9 @@ export const imageSchema = z
     id: z.string(),
     src: z.string(),
     alt: z.string().default(''),
-    width: z.number(),
-    height: z.number(),
-    format: z.string(),
+    width: z.number().optional(),
+    height: z.number().optional(),
+    format: z.string().optional(),
   })
   .passthrough()
 

package/src/schemas/{pageSchema.ts → page.ts}

@@ -18,13 +18,21 @@ export const pageSchema = z
     image: imageSchema.optional(),
     images: imageSchema.array().optional(),
     price: priceSchema.shape.amount,
-    categories: pathSchema('pages').array().optional(),
-    blocks: blockSchema.array().optional(),
     order: z.number().optional(),
     variants: z.record(z.string(), z.string().array()).optional(),
     soldout: z.boolean().optional(),
     head: headSchema.optional(),
     button: buttonSchema.optional(),
+    banner: blockSchema.optional(),
+    navigation: blockSchema.optional(),
+    header: blockSchema.optional(),
+    blocks: blockSchema.array().optional(),
+    subheader: blockSchema.array().optional(),
+    sidebar: blockSchema.optional(),
+    footer: blockSchema.optional(),
+    parents: pathSchema('pages').array().optional(),
+    children: pathSchema('pages').array().optional(),
+    siblings: pathSchema('pages').array().optional(),
   })
   .strict()
 

package/tailwind.config.ts

@@ -16,6 +16,10 @@ export default {
         gutter: 'clamp(16px, 4vw, 32px)',
         container: 'var(--container, 1536px)',
         hero: 'calc(100vh - var(--header-height, 0px) - var(--subheader-height, 0px) - var(--banner-height, 0px))',
+        'sticky-8':
+          'calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 2rem)',
+        'sticky-16':
+          'calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 4rem)',
       },
       colors: {
         border: 'hsl(var(--border))',

package/src/blocks/Job1.astro

@@ -1,97 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Button from 'fulldev-ui/components/Button.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 List from 'fulldev-ui/components/List.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Prose from 'fulldev-ui/components/Prose.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-
-interface Props extends ComponentProps<typeof Section> {
-  badges?: ComponentProps<typeof Badge>[] | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  list?: ComponentProps<typeof List>['items'] | undefined
-  button?: ComponentProps<typeof Button> | undefined
-  render: CollectionEntry<'pages'>['render']
-}
-
-const { badges, heading, paragraph, list, button, render, ...rest } =
-  Astro.props
-
-const { Content } = await render()
----
-
-<Section
-  class:list="job-1"
-  {...rest}
->
-  <Container class:list="job-1-container">
-    <Element class:list="job-1-segment">
-      <Element class:list="job-1-content">
-        <Element class:list="job-1-badges">
-          {
-            badges?.map((badge) => (
-              <Badge
-                size="sm"
-                {...badge}
-              />
-            ))
-          }
-        </Element>
-        <Heading
-          as="h1"
-          size="4xl"
-          text={heading}
-        />
-        <Paragraph
-          size="lg"
-          muted
-          text={paragraph}
-        />
-        <List items={list} />
-      </Element>
-      <Button
-        size="lg"
-        {...button}
-      />
-    </Element>
-    <Prose>
-      <Content />
-    </Prose>
-  </Container>
-</Section>
-
-<style is:global>
-  @layer fulldev {
-    .job-1 {
-      .container {
-        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
-      }
-
-      .job-1-segment {
-        @apply sticky top-0 flex max-w-xl flex-col items-start gap-8 py-16;
-
-        top: var(--header-height, 0px);
-        width: var(--sidebar-width);
-        height: calc(100vh - var(--headers));
-      }
-
-      .job-1-content {
-        @apply flex flex-col items-start gap-4;
-      }
-
-      .job-1-badges {
-        @apply flex flex-wrap gap-2;
-      }
-
-      .prose {
-        @apply py-16;
-      }
-    }
-  }
-</style>

package/src/schemas/blocks/banner.ts

@@ -1,10 +0,0 @@
-import { z } from 'astro:content'
-
-export const bannerSchema = z.preprocess(
-  (data: unknown) => (typeof data === 'string' ? { text: data } : data),
-  z.object({
-    text: z.string().optional(),
-  })
-)
-
-export type BannerSchema = z.infer<typeof bannerSchema>

package/src/schemas/blocks/categories.ts

@@ -1,14 +0,0 @@
-import { z } from 'astro:content'
-import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
-import { headingSchema } from '../components/heading'
-import pathSchema from '../utils/pathSchema'
-
-export const categoriesSchema = z
-  .object({
-    heading: headingSchema.shape.text,
-    button: buttonSchema.optional(),
-    categories: pathSchema('categories').array().optional(),
-  })
-  .strict()
-
-export type CategoriesSchema = z.infer<typeof categoriesSchema>

package/src/schemas/blocks/contact.ts

@@ -1,18 +0,0 @@
-import { z } from 'astro:content'
-import { headingSchema } from 'fulldev-ui/schemas/components/heading'
-import { taglineSchema } from 'fulldev-ui/schemas/components/tagline'
-import { channelSchema } from '../components/channel'
-import { paragraphSchema } from '../components/paragraph'
-import { socialSchema } from '../components/social'
-
-export const contactSchema = z
-  .object({
-    tagline: taglineSchema.shape.text,
-    heading: headingSchema.shape.text,
-    paragraph: paragraphSchema.shape.text,
-    channels: channelSchema.array().optional(),
-    socials: socialSchema.shape.href.array().optional(),
-  })
-  .strict()
-
-export type ContactSchema = z.infer<typeof contactSchema>

package/src/schemas/blocks/cta.ts

@@ -1,19 +0,0 @@
-import { z } from 'astro:content'
-import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
-import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
-import { headingSchema } from '../components/heading'
-import { paragraphSchema } from '../components/paragraph'
-import { taglineSchema } from '../components/tagline'
-
-export const ctaSchema = z
-  .object({
-    tagline: taglineSchema.shape.text,
-    heading: headingSchema.shape.text,
-    paragraph: paragraphSchema.shape.text,
-    buttons: buttonSchema.array().optional(),
-    image: imageSchema.optional(),
-    dark: z.boolean().optional(),
-  })
-  .strict()
-
-export type CtaSchema = z.infer<typeof ctaSchema>

package/src/schemas/blocks/feature.ts

@@ -1,18 +0,0 @@
-import { z } from 'astro:content'
-import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
-import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
-import { headingSchema } from '../components/heading'
-import { paragraphSchema } from '../components/paragraph'
-import { taglineSchema } from '../components/tagline'
-
-export const featureSchema = z
-  .object({
-    tagline: taglineSchema.shape.text,
-    heading: headingSchema.shape.text,
-    paragraph: paragraphSchema.shape.text,
-    buttons: buttonSchema.array().optional(),
-    image: imageSchema.optional(),
-  })
-  .strict()
-
-export type FeatureSchema = z.infer<typeof featureSchema>

package/src/schemas/blocks/features.ts

@@ -1,24 +0,0 @@
-import { z } from 'astro:content'
-import { headingSchema } from 'fulldev-ui/schemas/components/heading'
-import { iconSchema } from '../components/icon'
-import { paragraphSchema } from '../components/paragraph'
-import { taglineSchema } from '../components/tagline'
-
-export const featuresSchema = z
-  .object({
-    tagline: taglineSchema.shape.text,
-    heading: headingSchema.shape.text,
-    paragraph: paragraphSchema.shape.text,
-    cards: z
-      .object({
-        icon: iconSchema.shape.name,
-        heading: headingSchema.shape.text,
-        paragraph: paragraphSchema.shape.text,
-      })
-      .strict()
-      .array()
-      .optional(),
-  })
-  .strict()
-
-export type FeaturesSchema = z.infer<typeof featuresSchema>

package/src/schemas/blocks/hero.ts

@@ -1,20 +0,0 @@
-import { z } from 'astro:content'
-import { badgeSchema } from 'fulldev-ui/schemas/components/badge.ts'
-import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
-import { headingSchema } from 'fulldev-ui/schemas/components/heading'
-import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
-import { taglineSchema } from 'fulldev-ui/schemas/components/tagline'
-import { paragraphSchema } from '../components/paragraph'
-
-export const heroSchema = z
-  .object({
-    badge: badgeSchema.optional(),
-    tagline: taglineSchema.shape.text,
-    heading: headingSchema.shape.text,
-    paragraph: paragraphSchema.shape.text,
-    buttons: buttonSchema.array().optional(),
-    image: imageSchema.optional(),
-  })
-  .strict()
-
-export type HeroSchema = z.infer<typeof heroSchema>

package/src/schemas/blocks/intro.ts

@@ -1,16 +0,0 @@
-import { z } from 'astro:content'
-import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
-import { headingSchema } from 'fulldev-ui/schemas/components/heading'
-import { taglineSchema } from 'fulldev-ui/schemas/components/tagline'
-import { paragraphSchema } from '../components/paragraph'
-
-export const introSchema = z
-  .object({
-    tagline: taglineSchema.shape.text,
-    heading: headingSchema.shape.text,
-    paragraph: paragraphSchema.shape.text,
-    buttons: buttonSchema.array().optional(),
-  })
-  .strict()
-
-export type IntroSchema = z.infer<typeof introSchema>

package/src/schemas/blocks/products.ts

@@ -1,14 +0,0 @@
-import { z } from 'astro:content'
-import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
-import { headingSchema } from 'fulldev-ui/schemas/components/heading'
-import pathSchema from '../utils/pathSchema'
-
-export const productsSchema = z
-  .object({
-    heading: headingSchema.shape.text,
-    button: buttonSchema.optional(),
-    products: pathSchema('products').array().optional(),
-  })
-  .strict()
-
-export type ProductsSchema = z.infer<typeof productsSchema>

package/src/schemas/blocks/reviews.ts

@@ -1,24 +0,0 @@
-import { z } from 'astro:content'
-import { headingSchema } from 'fulldev-ui/schemas/components/heading'
-import { paragraphSchema } from '../components/paragraph'
-import { ratingSchema } from '../components/rating'
-import { taglineSchema } from '../components/tagline'
-
-export const reviewsSchema = z
-  .object({
-    tagline: taglineSchema.shape.text,
-    heading: headingSchema.shape.text,
-    paragraph: paragraphSchema.shape.text,
-    cards: z
-      .object({
-        rating: ratingSchema.shape.score,
-        heading: headingSchema.shape.text,
-        paragraph: paragraphSchema.shape.text,
-      })
-      .strict()
-      .array()
-      .optional(),
-  })
-  .strict()
-
-export type ReviewsSchema = z.infer<typeof reviewsSchema>

package/src/schemas/layoutSchema.ts

@@ -1,22 +0,0 @@
-import { z } from 'astro:content'
-import { bannerSchema } from 'fulldev-ui/schemas/blocks/banner.ts'
-import { footerSchema } from 'fulldev-ui/schemas/components/footer.ts'
-import { headSchema } from 'fulldev-ui/schemas/components/head.ts'
-import { headerSchema } from 'fulldev-ui/schemas/components/header.ts'
-import { linkSchema } from 'fulldev-ui/schemas/components/link.ts'
-import { navigationSchema } from 'fulldev-ui/schemas/components/navigation.ts'
-import { sidebarSchema } from 'fulldev-ui/schemas/components/sidebar.ts'
-
-export const layoutSchema = z
-  .object({
-    head: headSchema.optional(),
-    banner: bannerSchema.optional(),
-    navigation: navigationSchema.optional(),
-    header: headerSchema.optional(),
-    subheader: linkSchema.array().optional(),
-    sidebar: sidebarSchema.optional(),
-    footer: footerSchema.optional(),
-  })
-  .strict()
-
-export type LayoutSchema = z.infer<typeof layoutSchema>