fulldev-ui 0.6.0-beta.3 → 0.6.0-beta.6

package/src/content/pages/index.mdx

@@ -2,7 +2,7 @@
 head:
   title: Fulldev UI - Astro component and block library, open-source
   description: Make websites rapidly with pre-built components and blocks.
-  image: og-image.png
+  image: /og-image.png
 
 title: Home
 
@@ -25,7 +25,7 @@ blocks:
     tagline: Blocks
     heading: Use pre-built blocks with just props
     paragraph: We created a great gallery of blocks to build content sites with a modern look and feel, all of our blocks are build with components from the library to achieve a consistent look.
-    image: block-code.png
+    image: /block-code.png
     buttons:
       - href: /blocks/
         icon: layout
@@ -35,7 +35,7 @@ blocks:
     tagline: Components
     heading: Or build your own, with easy to use components
     paragraph: Our rich set of components make it easy to build your own blocks with great customizability through props and global theming.
-    image: component-code.png
+    image: /component-code.png
     buttons:
       - text: View components
         href: /components/badge/

package/src/content/{products → pages/products}/product.md

@@ -1,7 +1,7 @@
 ---
 title: Product
-categories: 
-  - category
+parents: 
+  - categories/category
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 price: 90
 images: 

package/src/integration/index.ts

@@ -5,9 +5,14 @@ import favicons from 'astro-favicons'
 import liveCode from 'astro-live-code'
 import robotsTxt from 'astro-robots-txt'
 import { envField } from 'astro/config'
+import fs from 'fs'
+import yaml from 'js-yaml'
+import path from 'path'
+import { assign } from 'radash'
 import tailwindcss from 'tailwindcss'
 import tailwindcssNesting from 'tailwindcss/nesting'
 import { loadEnv } from 'vite'
+import virtual from 'vite-plugin-virtual'
 import tailwindConfig from '../../tailwind.config.ts'
 
 interface Config {
@@ -15,6 +20,8 @@ interface Config {
   company?: string
   css?: string
   injectRoutes?: boolean
+  cloudcannon?: boolean
+  cart?: boolean
   overrides?: {
     [k: string]: string
   }
@@ -72,6 +79,11 @@ export default function fulldevIntegration(
                 ...config?.overrides,
               },
             },
+            plugins: [
+              virtual({
+                'virtual:fulldev-ui/config': config ?? {},
+              }),
+            ],
             css: {
               postcss: {
                 plugins: [tailwindcss(tailwindConfig), tailwindcssNesting],
@@ -105,22 +117,6 @@ export default function fulldevIntegration(
             pattern: '/[...page]',
             entrypoint: 'fulldev-ui/pages/[...page].astro',
           })
-          injectRoute({
-            pattern: '/[...doc]',
-            entrypoint: 'fulldev-ui/pages/[...doc].astro',
-          })
-          injectRoute({
-            pattern: '/[...category]',
-            entrypoint: 'fulldev-ui/pages/[...category].astro',
-          })
-          injectRoute({
-            pattern: '/[...post]',
-            entrypoint: 'fulldev-ui/pages/[...post].astro',
-          })
-          injectRoute({
-            pattern: '/[...product]',
-            entrypoint: 'fulldev-ui/pages/[...product].astro',
-          })
         }
 
         // ----------------------
@@ -128,6 +124,10 @@ export default function fulldevIntegration(
         // ----------------------
         config?.css && injectScript('page-ssr', `import "${config?.css}";`)
 
+        // ----------------------
+        // merge Cloudcannon configs
+        // ----------------------
+
         // ----------------------
         // Generate image YAML files
         // ----------------------
@@ -159,6 +159,28 @@ export default function fulldevIntegration(
         //   }
         // }
       },
+      'astro:build:done': async () => {
+        if (config?.cloudcannon) {
+          const __dirname = path.dirname(new URL(import.meta.url).pathname)
+          const libDir = path.join(__dirname, '../../cloudcannon.config.yml')
+          const userDir = path.join(process.cwd(), 'cloudcannon.config.yml')
+
+          console.log({ libDir, userDir })
+
+          const libConfig = yaml.load(
+            fs.readFileSync(path.resolve(libDir), 'utf8')
+          )
+
+          const userConfig = yaml.load(
+            fs.readFileSync(path.resolve(userDir), 'utf8')
+          )
+
+          const mergedConfig = assign(libConfig || {}, userConfig || {})
+          const yamlContent = yaml.dump(mergedConfig)
+
+          await fs.promises.writeFile(userDir, yamlContent, 'utf8')
+        }
+      },
     },
   }
 }

package/src/layouts/{CategoryLayout.astro → Category.astro}

@@ -1,32 +1,28 @@
 ---
+import type { ComponentProps } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
-import { getCollection, getEntry } from 'astro:content'
-import Intro1 from 'fulldev-ui/blocks/Intro1.astro'
+import { getCollection } from 'astro:content'
 import Products1 from 'fulldev-ui/blocks/Products1.astro'
 import Carousel from 'fulldev-ui/components/Carousel.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 Select from 'fulldev-ui/components/Select.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
-import { getHref } from 'fulldev-ui/utils/getHref'
-import { mergeDeep } from 'remeda'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
 
-type Props = CollectionEntry<'categories'>
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+  slug: CollectionEntry<'pages'>['slug']
+}
 
-const layout = await getEntry('layouts', 'categories')
-const merged = mergeDeep(layout || {}, Astro.props)
+const { render, slug, title, description } = Astro.props
 
-const {
-  render,
-  slug,
-  data: { title, description },
-} = merged
-
-const categories = await getCollection('categories', ({ data }) =>
+const categories = await getCollection('pages', ({ data }) =>
   data.categories?.some((c) => c.slug.includes(slug))
 )
 
-const products = await getCollection('products', ({ data }) =>
+const products = await getCollection('pages', ({ data }) =>
   data.categories?.some((c) => c.slug.includes(slug))
 )
 
@@ -77,18 +73,21 @@ const sorts = [
   })
 </script>
 
-<Layout {...merged}>
-  <Intro1
+<Layout
+  class:list="category"
+  {...Astro.props}
+>
+  <!-- <Intro1
     heading={title}
     text={description}
-  />
+  /> -->
   <Carousel>
     {
       categories.map((category) => (
         <Element
           as="a"
           class:list="item"
-          href={getHref('categories', category.slug)}
+          href={getHref(category.slug)}
         >
           {category.data.title}
         </Element>

package/src/layouts/Doc.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.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 Layout from 'fulldev-ui/components/Layout.astro'
+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 { PageSchema } from 'fulldev-ui/schemas/page.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
+
+const { header, sidebar, render, title, description, footer } = Astro.props
+
+const { Content } = await render()
+---
+
+<Layout
+  class:list="doc"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container class:list="doc-container">
+    <Sidebar {...sidebar} />
+    <Element
+      class:list="doc-main"
+      as="main"
+    >
+      <Prose>
+        <Heading
+          as="h1"
+          size="4xl"
+          text={title}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={description}
+        />
+        <Content />
+      </Prose>
+      <Toc {render} />
+    </Element>
+  </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>

package/src/layouts/Job.astro

@@ -0,0 +1,62 @@
+---
+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 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 { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
+
+const {
+  title,
+  description,
+  list,
+  button,
+  buttons,
+  header,
+  sidebar,
+  render,
+  parents,
+  blocks,
+  footer,
+} = Astro.props
+
+const parentEntries = parents && (await getEntries(parents))
+
+const { Content } = await render()
+---
+
+<Layout
+  class:list="job"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    <Content3
+      badges={parentEntries?.map((parent) => ({
+        text: parent.data.title,
+        href: getHref(parent.slug),
+      }))}
+      heading={title}
+      paragraph={description}
+      {list}
+      {button}
+      {buttons}
+    >
+      <Content />
+    </Content3>
+    {blocks?.map((block) => <Block {...block} />)}
+  </Element>
+  <Footer {...footer} />
+</Layout>

package/src/layouts/Jobs.astro

@@ -0,0 +1,72 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getCollection } from 'astro:content'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Intro1 from 'fulldev-ui/blocks/Intro1.astro'
+import Jobs1 from 'fulldev-ui/blocks/Jobs1.astro'
+import Container from 'fulldev-ui/components/Container.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 Sidebar from 'fulldev-ui/components/Sidebar.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  slug: CollectionEntry<'pages'>['slug']
+  render: CollectionEntry<'pages'>['render']
+}
+
+const { slug, header, sidebar, render, title, description, footer } =
+  Astro.props
+
+const { Content } = await render()
+
+const children = (
+  await getCollection('pages', ({ data }) =>
+    data.parents?.some((p) => p.slug.includes(slug))
+  )
+)?.map(({ collection, slug }) => ({ collection, slug }))
+---
+
+<Layout
+  class:list="jobs"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container class:list="jobs-container">
+    <Sidebar {...sidebar} />
+    <Element
+      class:list="jobs-main"
+      as="main"
+    >
+      <Intro1
+        heading={title}
+        paragraph={description}
+      />
+      <Jobs1 pages={children} />
+      <Prose>
+        <Content />
+      </Prose>
+    </Element>
+  </Container>
+</Layout>
+<Footer {...footer} />
+
+<style is:global>
+  @layer fulldev {
+    .jobs {
+      .jobs-container {
+        @apply flex !pr-0;
+      }
+
+      .jobs-main {
+        @apply flex w-full flex-col;
+      }
+    }
+  }
+</style>

package/src/layouts/Page.astro

@@ -0,0 +1,29 @@
+---
+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 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 { PageSchema } from 'fulldev-ui/schemas/page.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {}
+
+const { banner, sidebar, header, blocks, footer } = Astro.props
+---
+
+<Layout
+  class:list="page"
+  {...Astro.props}
+>
+  <Banner {...banner} />
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    {blocks?.map((block) => <Block {...block} />)}
+  </Element>
+  <Footer {...footer} />
+</Layout>

package/src/layouts/Post.astro

@@ -0,0 +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 type { PageSchema } from 'fulldev-ui/schemas/page'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
+
+const {
+  title,
+  description,
+  list,
+  button,
+  header,
+  sidebar,
+  blocks,
+  footer,
+  render,
+} = Astro.props
+
+const { Content, headings } = await render()
+---
+
+<Layout
+  class:list="post"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <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/{ProductLayout.astro → Product.astro}

@@ -1,4 +1,5 @@
 ---
+import type { ComponentProps } from 'astro/types'
 import { getImage } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
 import { getCollection, getEntry } from 'astro:content'
@@ -7,21 +8,26 @@ 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 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 Layout from 'fulldev-ui/layouts/Layout.astro'
-import { mergeDeep } from 'remeda'
+import type { PageSchema } from 'fulldev-ui/schemas/page'
 
-type Props = CollectionEntry<'products'>
-
-const layout = await getEntry('layouts', 'products')
-const merged = mergeDeep(layout || {}, Astro.props)
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
 
 const {
   render,
-  data: { title, price, images, description, soldout, categories, variants },
-} = merged
+  title,
+  price,
+  images,
+  description,
+  soldout,
+  categories,
+  variants,
+} = Astro.props
 
 const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
 const imageId = images?.[0]?.id
@@ -40,7 +46,10 @@ const relatedProducts = await getCollection('products', (product) =>
 const baseLayout = await getEntry('layouts', 'base')
 ---
 
-<Layout {...merged}>
+<Layout
+  class:list="product"
+  {...Astro.props}
+>
   <Element
     class:list="product"
     as="section"
@@ -59,10 +68,10 @@ const baseLayout = await getEntry('layouts', 'base')
           />
           <Paragraph text={description} />
         </Element>
-        <CartForm
+        <!-- <CartForm
           product={Astro.props}
           client:load
-        />
+        /> -->
         <List
           size="sm"
           items={baseLayout.data.banner?.split('|')}

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

@@ -1,17 +1,49 @@
 ---
-import { getCollection } from 'astro:content'
-import PageLayout from 'fulldev-ui/layouts/PageLayout.astro'
+import { getCollection, getEntry } from 'astro:content'
 import { getHref } from 'fulldev-ui/utils/getHref.ts'
+import { dash, pascal } from 'radash'
+import { mergeDeep } from 'remeda'
 
 export async function getStaticPaths() {
   const collection = await getCollection('pages')
   return collection.map((entry) => ({
     params: {
-      page: getHref(entry.collection, entry.slug),
+      page: getHref(entry.slug),
     },
     props: entry,
   }))
 }
+
+const layoutName = Astro.props.data._layout ?? 'Page'
+const layoutComponentName = pascal(layoutName)
+
+const layoutsComponents = {
+  ...import.meta.glob('/src/layouts/**/*.astro'),
+  ...import.meta.glob('../layouts/**/*.astro'),
+}
+
+const layoutComponentPath = Object.keys(layoutsComponents).find(
+  (path) => path.split('/').pop()?.split('.')[0] === layoutComponentName
+)
+
+const LayoutComponent =
+  layoutComponentPath &&
+  (await (layoutsComponents[layoutComponentPath] as any)()).default
+
+const layoutEntryName = dash(layoutName)
+const layoutEntry = await getEntry('layouts', layoutEntryName)
+const baseLayout = await getEntry('layouts', 'base')
+const mergedLayouts = mergeDeep(baseLayout || {}, layoutEntry || {})
+const merged = mergeDeep(mergedLayouts, Astro.props)
+
+const { data, ...rest } = merged
 ---
 
-<PageLayout {...Astro.props} />
+{
+  LayoutComponent && (
+    <LayoutComponent
+      {...data}
+      {...rest}
+    />
+  )
+}

package/src/pages/test.astro

@@ -1,6 +1,10 @@
 ---
 import Hero1 from 'fulldev-ui/blocks/Hero1.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+
+import { $cart } from 'fulldev-ui/stores/cart'
+
+const value = $cart.get()
 ---
 
 <Layout>
@@ -8,4 +12,24 @@ import Layout from 'fulldev-ui/layouts/Layout.astro'
     heading="hello world"
     class="hoi"
   />
+  {value}
+
+  <button id="myyy-button">Add item</button>
+
+  <script>
+    import { addItem } from 'fulldev-ui/stores/cart'
+
+    const button = document.querySelector('#myyy-button')
+    button?.addEventListener('click', () => {
+      console.log('clicked')
+      addItem({
+        slug: 'test',
+        title: 'title',
+        price: 10,
+        quantity: 10,
+        image: '',
+        variants: [],
+      })
+    })
+  </script>
 </Layout>