fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.2

package/src/layouts/CategoryLayout.astro

@@ -1,30 +1,28 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
 import { getCollection } from 'astro:content'
 import Intro from 'fulldev-ui/blocks/Intro.astro'
 import Products from 'fulldev-ui/blocks/Products.astro'
 import Carousel from 'fulldev-ui/components/Carousel.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Prose from 'fulldev-ui/components/Prose.astro'
-import Sections from 'fulldev-ui/components/sections.astro'
 import Select from 'fulldev-ui/components/Select.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
+import { getHref } from 'fulldev-ui/utils/getHref'
 
-type Props = ComponentProps<typeof Layout>
+type Props = CollectionEntry<'categories'>
 
-const { slug, sections, title, image, images, description, render } =
-  Astro.props
+const { render, slug } = Astro.props
+const { title, description } = Astro.props.data
 
-const children = await getCollection('pages', (page) =>
-  page.data.categories?.some((c: any) => c.slug.includes(slug))
+const categories = await getCollection('categories', ({ data }) =>
+  data.categories?.some((c) => c.slug.includes(slug))
 )
 
-const categories = children?.filter(
-  (c) => c.data.component === 'CategoryLayout'
+const products = await getCollection('products', ({ data }) =>
+  data.categories?.some((c) => c.slug.includes(slug))
 )
 
-const products = children?.filter((c) => c.data.component === 'ProductLayout')
-
 const sorts = [
   {
     option: 'Aanbevolen',
@@ -76,7 +74,6 @@ const sorts = [
   <Intro
     heading={title}
     paragraph={description}
-    image={image || images?.[0]}
   />
   <Carousel>
     {
@@ -84,7 +81,7 @@ const sorts = [
         <Element
           as="a"
           class:list="item"
-          href={`/${category.slug}/`}
+          href={getHref('categories', category.slug)}
         >
           {category.data.title}
         </Element>
@@ -101,16 +98,14 @@ const sorts = [
     />
   </Element>
   {
-    sorts.map((sort) => (
+    sorts.map((sort: any) => (
       <Products
         class:list={sort.option !== 'Aanbevolen' ? 'hide' : ''}
-        id={sort.option}
-        cards={sort.products}
+        products={sort.products}
       />
     ))
   }
   <Prose {render} />
-  <Sections {sections} />
   <slot />
 </Layout>
 

package/src/layouts/DocLayout.astro

@@ -0,0 +1,17 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = CollectionEntry<'docs'>
+
+const { render } = Astro.props
+---
+
+<Layout>
+  <Prose
+    {render}
+    toc={true}
+  />
+  <slot />
+</Layout>

package/src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { CollectionEntry, ContentCollectionKey } from 'astro:content'
+import { getEntry } from 'astro:content'
 import Banner from 'fulldev-ui/blocks/Banner.astro'
 import Footer from 'fulldev-ui/blocks/Footer.astro'
 import Element from 'fulldev-ui/components/Element.astro'
@@ -8,49 +9,19 @@ import Header from 'fulldev-ui/components/Header.astro'
 import Sidebar from 'fulldev-ui/components/Sidebar.astro'
 import Subheader from 'fulldev-ui/components/Subheader.astro'
 
-type Props = HTMLAttributes<'html'> & {
-  banner?: ComponentProps<typeof Banner>['text'] | undefined
-  header?: ComponentProps<typeof Header> | undefined
-  subheader?: ComponentProps<typeof Subheader> | undefined
-  sidebar?: ComponentProps<typeof Sidebar> | undefined
-  footer?: ComponentProps<typeof Footer> | undefined
-  theme?: 'light' | 'dark' | 'system' | undefined
-  title?: string
-  code?: {
-    head?: string
-    body?: string
-  }
-  description?: string
-  image?: any
-  seo?: {
-    title?: string
-    description?: string
-    image?: string
-  }
-  next?: string
-  prev?: string
-}
+type Props = CollectionEntry<ContentCollectionKey>
 
-const {
-  banner,
-  header,
-  subheader,
-  sidebar,
-  footer,
-  theme,
-  code,
-  next,
-  prev,
-  ...rest
-} = Astro.props
+const layout = await getEntry('layouts', 'base')
+
+const { banner, header, subheader, sidebar, footer, theme, code } = layout.data
 ---
 
 <!doctype html>
-<html
-  class="layout"
-  {...rest}
->
-  <Head {...Astro.props} />
+<html class="layout">
+  <Head
+    {...layout.data}
+    {...Astro.props.data}
+  />
   <Element
     class:list="layout-body"
     as="body"

package/src/layouts/PageLayout.astro

@@ -1,25 +1,19 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import Hero from 'fulldev-ui/blocks/Hero.astro'
+import type { CollectionEntry } from 'astro:content'
 import Prose from 'fulldev-ui/components/Prose.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
-interface Props
-  extends ComponentProps<typeof Layout>,
-    ComponentProps<typeof Prose> {
-  hero?: ComponentProps<typeof Hero>
-  sections?: ComponentProps<typeof Sections>['sections']
-}
+type Props = CollectionEntry<'pages'>
 
-const { hero, render, toc, sections, ...rest } = Astro.props
+const { render } = Astro.props
+const { sections } = Astro.props.data
 ---
 
-<Layout {...rest}>
-  <Hero {...hero} />
+<Layout {...Astro.props}>
   <Prose
     {render}
-    {toc}
+    toc={false}
   />
   <Sections {sections} />
   <slot />

package/src/layouts/PostLayout.astro

@@ -1,25 +1,19 @@
 ---
-import type { ComponentProps } from 'astro/types'
-import Hero from 'fulldev-ui/blocks/Hero.astro'
+import type { CollectionEntry } from 'astro:content'
 import Prose from 'fulldev-ui/components/Prose.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
-interface Props
-  extends ComponentProps<typeof Layout>,
-    ComponentProps<typeof Prose> {
-  hero?: ComponentProps<typeof Hero>
-  sections?: ComponentProps<typeof Sections>['sections']
-}
+type Props = CollectionEntry<'posts'>
 
-const { hero, render, toc, sections, ...rest } = Astro.props
+const { render } = Astro.props
+const { sections } = Astro.props.data
 ---
 
-<Layout {...rest}>
-  <Hero {...hero} />
+<Layout {...Astro.props}>
   <Prose
     {render}
-    {toc}
+    toc={true}
   />
   <Sections {sections} />
   <slot />

package/src/layouts/ProductLayout.astro

@@ -1,35 +1,22 @@
 ---
 import { getImage } from 'astro:assets'
-import CartForm from 'fulldev-ui/components/CartForm.astro'
+import type { CollectionEntry } from 'astro:content'
+import { getCollection, getEntry } from 'astro:content'
+import Products from 'fulldev-ui/blocks/Products.astro'
+import CartForm from 'fulldev-ui/components/CartForm.svelte'
 import Element from 'fulldev-ui/components/Element.astro'
 import Gallery from 'fulldev-ui/components/Gallery.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 Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
-const {
-  variant = 1,
-  level = 1,
-  heading,
-  paragraph,
-  title,
-  list,
-  price,
-  images,
-  text,
-  subheading,
-  variants,
-  button,
-  description,
-  form,
-  uitverkocht,
-  render,
-  sections,
-  banner,
-} = Astro.props
+type Props = CollectionEntry<'products'>
+
+const { render } = Astro.props
+const { title, price, images, description, soldout, categories, variants } =
+  Astro.props.data
 
 const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
 const imageId = images?.[0]?.id
@@ -38,6 +25,14 @@ const allImages = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
 const foundImage = allImages[src]
 const gotImage =
   imageId && (await getImage({ src: foundImage ? foundImage() : src }))
+
+const relatedProducts = await getCollection('products', (product) =>
+  product.data.categories?.some((category) =>
+    categories?.map((c) => c.slug).includes(category.slug)
+  )
+)
+
+const baseLayout = await getEntry('layouts', 'base')
 ---
 
 <Layout {...Astro.props}>
@@ -53,27 +48,27 @@ const gotImage =
       <Element class:list="product-segment">
         <Element class:list="product-content">
           <Heading
-            {level}
-            text={heading || title}
+            as="h1"
+            level={2}
+            text={title}
           />
-          <Paragraph text={paragraph || description} />
+          <Paragraph text={description} />
         </Element>
         <CartForm
-          soldout={uitverkocht}
-          image={gotImage?.src}
-          {title}
-          {price}
-          {slug}
-          {variants}
+          product={Astro.props}
+          client:load
         />
         <List
           size="sm"
-          items={banner.split('|')}
+          items={baseLayout.data.banner?.split('|')}
         />
       </Element>
     </Element>
   </Element>
-  <Sections {sections} />
+  <Products
+    heading="Gerelateerde producten"
+    products={[...relatedProducts].sort(() => Math.random() - 0.5).slice(0, 6)}
+  />
   <slot />
 </Layout>
 

package/src/pages/[...category].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection } from 'astro:content'
+import CategoryLayout from 'fulldev-ui/layouts/CategoryLayout.astro'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+
+export async function getStaticPaths() {
+  const collection = await getCollection('categories')
+  return collection.map((entry) => ({
+    params: {
+      category: getHref(entry.collection, entry.slug),
+    },
+    props: entry,
+  }))
+}
+---
+
+<CategoryLayout {...Astro.props} />

package/src/pages/[...doc].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection } from 'astro:content'
+import DocLayout from 'fulldev-ui/layouts/DocLayout.astro'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+
+export async function getStaticPaths() {
+  const collection = await getCollection('docs')
+  return collection.map((entry) => ({
+    params: {
+      doc: getHref(entry.collection, entry.slug),
+    },
+    props: entry,
+  }))
+}
+---
+
+<DocLayout {...Astro.props} />

package/src/pages/[...page].astro

@@ -1,36 +1,17 @@
 ---
 import { getCollection } from 'astro:content'
 import PageLayout from 'fulldev-ui/layouts/PageLayout.astro'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
 
 export async function getStaticPaths() {
-  const pages = await getCollection('pages')
-  return pages.map((page) => ({
+  const collection = await getCollection('pages')
+  return collection.map((entry) => ({
     params: {
-      page: page.slug === 'index' ? undefined : page.slug,
+      page: getHref(entry.collection, entry.slug),
     },
-    props: page,
+    props: entry,
   }))
 }
-
-const { data, ...rest } = Astro.props
-const { component, ...restData } = data
-
-const layouts = {
-  ...import.meta.glob('/src/layouts/**/*.astro'),
-  ...import.meta.glob('../layouts/**/*.astro'),
-}
-
-const componentPath = Object.keys(layouts).find((path) => {
-  const strip = (str?: string) => str?.split('/').pop()?.split('.')[0]
-  return strip(path) === strip(component)
-})
-
-const Component =
-  (componentPath && (await (layouts[componentPath] as any)()).default) ??
-  PageLayout
 ---
 
-<Component
-  {...restData}
-  {...rest}
-/>
+<PageLayout {...Astro.props} />

package/src/pages/[...post].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection } from 'astro:content'
+import PostLayout from 'fulldev-ui/layouts/PostLayout.astro'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+
+export async function getStaticPaths() {
+  const collection = await getCollection('posts')
+  return collection.map((entry) => ({
+    params: {
+      post: getHref(entry.collection, entry.slug),
+    },
+    props: entry,
+  }))
+}
+---
+
+<PostLayout {...Astro.props} />

package/src/pages/[...product].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection } from 'astro:content'
+import ProductLayout from 'fulldev-ui/layouts/ProductLayout.astro'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+
+export async function getStaticPaths() {
+  const collection = await getCollection('products')
+  return collection.map((entry) => ({
+    params: {
+      product: getHref(entry.collection, entry.slug),
+    },
+    props: entry,
+  }))
+}
+---
+
+<ProductLayout {...Astro.props} />

package/src/pages/test.astro

@@ -1,20 +1,5 @@
 ---
-import Product from 'fulldev-ui/blocks/Product.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
-
-const product = {
-  images: [
-    '/src/images/placeholder-right.webp',
-    '/src/images/placeholder-right.webp',
-    '/src/images/placeholder-right.webp',
-    '/src/images/placeholder-right.webp',
-    '/src/images/placeholder-right.webp',
-  ],
-  title: 'Hello world',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-}
 ---
 
-<Layout>
-  <Product {...product} />
-</Layout>
+<Layout />

package/src/schemas/archive/_pageSchema.ts

@@ -0,0 +1,94 @@
+// import { getEntries, getEntry, z } from 'astro:content'
+// import { assign } from 'radash'
+// import footer from '../components/footer'
+// import header from '../components/header'
+// import image from '../components/image'
+// import section from '../components/section'
+// import sections from '../components/sections'
+// import sidebar from '../components/sidebar'
+// import subheader from '../components/subheader'
+// import toc from '../components/toc'
+// import images from '../fields/images'
+// import price from '../fields/price'
+// import component from '../utils/component'
+// import navigation from '../utils/navigation'
+// import pathSchema from '../utils/pathSchema'
+// import categories from './utils/categories'
+
+// export const i18n = z
+//   .object({
+//     i18n: pathSchema('pages').optional(),
+//   })
+//   .passthrough()
+//   .transform(async ({ i18n, ...rest }) => {
+//     if (!i18n) return rest
+//     const entry = await getEntry(i18n)
+//     const merged = assign(entry.data, rest) as typeof rest
+//     return merged as typeof rest
+//   })
+
+// export const presets = z
+//   .object({
+//     presets: z.array(pathSchema('presets')).optional(),
+//   })
+//   .passthrough()
+//   .transform(async ({ presets, ...rest }) => {
+//     let mergedData = {}
+
+//     const baseEntry = await getEntry('presets', 'base')
+//     mergedData = assign(mergedData, baseEntry?.data || {})
+
+//     if (presets) {
+//       const entries = await getEntries(presets)
+//       entries.forEach(
+//         (preset: any) => (mergedData = assign(mergedData, preset.data))
+//       )
+//     }
+
+//     mergedData = assign(mergedData, rest)
+//     return mergedData as typeof rest
+//   })
+
+// export const page = z
+//   .object({
+//     component,
+//     categories,
+//     order: z.number().optional(),
+//     theme: z.enum(['light', 'dark', 'system']),
+//     lang: z.string(),
+//     seo: z
+//       .object({
+//         title: z.string().optional(),
+//         description: z.string().optional(),
+//       })
+//       .optional(),
+//     title: z.string(),
+//     description: z.string().optional(),
+//     paragraph: z.string().optional(),
+//     image,
+//     images,
+//     section,
+//     sections,
+//     footer,
+//     header,
+//     sidebar,
+//     subheader,
+//     navigation,
+//     toc,
+//     price,
+//     code: z.any(),
+//     sizes: z.any(),
+//     banner: z.any(),
+//     _schema: z.any(),
+//     uitverkocht: z.any(),
+//     rating: z.any(),
+//     variants: z.any(),
+//     heading: z.any(),
+//     href: z.any(),
+//     next: z.any(),
+//     prev: z.any(),
+//   })
+//   .partial()
+//   .strict()
+
+// export default i18n.pipe(presets).pipe(page)

package/src/schemas/categorySchema.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro:content'
+import categories from 'fulldev-ui/schemas/fields/categories'
+import description from 'fulldev-ui/schemas/fields/description'
+import image from 'fulldev-ui/schemas/fields/image'
+import title from 'fulldev-ui/schemas/fields/title'
+
+export const categorySchema = z
+  .object({
+    title,
+    description,
+    image,
+    categories,
+  })
+  .strict()
+
+export type CategorySchema = z.infer<typeof categorySchema>

package/src/schemas/components/banner.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string().optional()

package/src/schemas/components/card.ts

@@ -1,11 +1,11 @@
 import { z } from 'astro:content'
+import images from '../fields/images'
 import pathSchema from '../utils/pathSchema'
 import button from './button'
 import buttons from './buttons'
 import globalSchema from './global'
 import icon from './icon'
 import image from './image'
-import images from './images'
 
 export const cardSchema = z
   .union([pathSchema('pages'), z.object({}).passthrough()])

package/src/schemas/components/footer.ts

@@ -15,3 +15,4 @@ export default z
   })
   .partial()
   .passthrough()
+  .optional()

package/src/schemas/components/header.ts

@@ -17,3 +17,4 @@ export default z
   })
   .partial()
   .passthrough()
+  .optional()

package/src/schemas/components/link.ts

@@ -1,16 +1,23 @@
 import { z } from 'astro:content'
-import pathSchema from '../utils/pathSchema'
 
-export default z.union([pathSchema('pages'), z.object({}).passthrough()]).pipe(
-  z
-    .object({
-      slug: z
-        .string()
-        .refine(async (data) => await pathSchema('pages').parseAsync(data)),
-      text: z.string(),
-      href: z.string(),
-      icon: z.string(),
-    })
-    .partial()
-    .passthrough()
-)
+// export default z.union([pathSchema('pages'), z.object({}).passthrough()]).pipe(
+//   z
+//     .object({
+//       slug: z
+//         .string()
+//         .refine(async (data) => await pathSchema('pages').parseAsync(data)),
+//       text: z.string(),
+//       href: z.string(),
+//       icon: z.string(),
+//     })
+//     .partial()
+//     .passthrough()
+// )
+
+export default z
+  .object({
+    text: z.string().optional(),
+    href: z.string().optional(),
+  })
+  .strict()
+  .optional()

package/src/schemas/components/section.ts

@@ -1,3 +1,4 @@
+import { reference } from 'astro:content'
 import component from '../utils/component'
 import buttons from './buttons'
 import cards from './cards'
@@ -10,6 +11,7 @@ export default writeup
     image,
     buttons,
     cards,
+    products: reference('products').array().optional(),
   })
   .partial()
   .passthrough()

package/src/schemas/components/sections.ts

@@ -1,3 +1,3 @@
 import section from './section'
 
-export default section.array()
+export default section.array().optional()

package/src/schemas/components/sidebar.ts

@@ -13,3 +13,4 @@ export default z
   })
   .partial()
   .passthrough()
+  .optional()