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

package/src/content/pages/index.mdx

@@ -1,64 +1,57 @@
 ---
-presets: [base]
-
-seo:
+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:
+    src: /images/og-image.png
 
 title: Home
 
 sections:
-  - component: Hero
+  - _block: Hero1
     badge:
-      text: 'Introducing v0.5: page building & generation'
+      text: 'Introducing v0.6: full pagebuilding'
       href: /overview/installation/
     heading: Build complete websites with this Astro UI library
-    # heading: The Astro UI library to build complete websites
-    lead: 'Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.'
+    paragraph: 'Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.'
     buttons:
       - text: Get Started
         href: /docs/
       - text: GitHub
         href: https://github.com/fulldotdev/ui
         icon: brand-github
-    image: block-code.png
+        target: _blank
 
-  - component: Content
-    color: brand
-    label: Blocks
+  - _block: Feature1
+    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:
+      src: /images/block-code.png
     buttons:
-      - href: /blocks
+      - href: /blocks/
         icon: layout
         text: View blocks
 
-  - component: Content
-    color: brand
-    label: Components
+  - _block: Feature1
+    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
-    reverse: odd
+    image:
+      src: /images/component-code.png
     buttons:
-      - href: /components/badge
+      - text: View components
+        href: /components/badge/
         icon: code
-        text: View components
 
-  - component: Cta
-    size: lg
-    variant: primary
+  - _block: Cta1
     heading: Build content websites in a fraction of time
-    lead: A library of components and blocks to build content sites, fast.
+    paragraph: A library of components and blocks to build content sites, fast.
     buttons:
       - text: Get Started
-        href: /overview/installation
-        color: brand
+        href: /overview/installation/
       - text: Github
         href: https://github.com/fulldotdev/ui
-        target: _blank
         icon: brand-github
-        color: brand
+        target: _blank
 ---

package/src/content/pages/posts/post.md

@@ -0,0 +1,7 @@
+---
+title: Post
+description: Lorem ipsum dolor sit
+---
+
+
+  

package/src/content/pages/showcase.mdx

@@ -1,10 +1,8 @@
 ---
-presets: [docs]
 title: Showcase
 ---
 
-import Card from 'fulldev-ui/components/Card.astro'
-import Cards from 'fulldev-ui/components/Cards.astro'
+import Card from 'fulldev-ui/structures/Card.astro'
 import { getCollection } from 'astro:content'
 
 export const projects = (
@@ -30,5 +28,3 @@ Projects that are built with Fulldev UI.
     target: '_blank',
   }}
 />
-
-<Cards structure="masonry" position="inset" panel cards={projects} />

package/src/css/theme.css

@@ -1,40 +1,3 @@
-/* :root {
-  --radius: 0.5rem;
-
-  --background: 33.3 30% 97.5%;
-  --foreground: 33.3 10% 10.5%;
-
-  --primary: 20 100% 50%;
-  --primary-foreground: 0 0% 100%;
-  --primary-hover: var(--primary) / 85%;
-
-  --secondary: 20 10% 92%;
-  --secondary-hover: var(--secondary) / 75%;
-  --secondary-foreground: var(--foreground);
-
-  --accent: var(--secondary-hover);
-  --accent-foreground: var(--secondary-foreground);
-
-  --muted: var(--accent);
-  --muted-foreground: var(--foreground) / 75%;
-
-  --card: var(--secondary) / 40%;
-  --card-foreground: var(--foreground);
-
-  --border: var(--foreground) / 8%;
-  --input: var(--foreground) / 26%;
-  --ring: var(--foreground);
-}
-
-.dark {
-  --foreground: 0 0% 100%;
-  --background: 20 40% 3%;
-  --primary: 20 30% 97%;
-  --primary-foreground: 20 100% 0%;
-  --secondary: 20 10% 10%;
-  --secondary-foreground: 20 30% 97%;
-} */
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -43,8 +6,8 @@
     --card-foreground: 20 14.3% 4.1%;
     --popover: 0 0% 100%;
     --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 0 0% 100%;
     --secondary: 60 4.8% 95.9%;
     --secondary-foreground: 24 9.8% 10%;
     --muted: 60 4.8% 95.9%;
@@ -66,13 +29,13 @@
 
   .dark {
     --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+    --foreground: 60 4.8% 95.9%;
     --card: 20 14.3% 4.1%;
     --card-foreground: 60 9.1% 97.8%;
     --popover: 20 14.3% 4.1%;
     --popover-foreground: 60 9.1% 97.8%;
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 0 0% 100%;
     --secondary: 12 6.5% 15.1%;
     --secondary-foreground: 60 9.1% 97.8%;
     --muted: 12 6.5% 15.1%;
@@ -89,5 +52,11 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+
+    color-scheme: dark;
   }
 }
+
+.astro-code {
+  @apply mt-4 rounded-md p-4 text-sm first:mt-0;
+}

package/src/env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="astro/client" />
 /// <reference path="../.astro/types.d.ts" />
+/// <reference types="simple-stack-form/types" />

package/src/integration/index.ts

@@ -5,22 +5,30 @@ import favicons from 'astro-favicons'
 import liveCode from 'astro-live-code'
 import robotsTxt from 'astro-robots-txt'
 import { envField } from 'astro/config'
-import type { CollectionEntry } from 'astro:content'
+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 {
   favicon?: string
   company?: string
   css?: string
-  basePreset?: CollectionEntry<'presets'>['id']
   injectRoutes?: boolean
+  cloudcannon?: boolean
+  cart?: boolean
+  overrides?: {
+    [k: string]: string
+  }
 }
 
 export default function fulldevIntegration(
-  config?: Partial<Config> | undefined
+  config: Partial<Config> | undefined
 ): AstroIntegration {
   return {
     name: '/integration',
@@ -62,10 +70,20 @@ export default function fulldevIntegration(
             sitemap(),
             robotsTxt(),
             liveCode({
-              layout: '/src/components/Code.astro',
+              layout: '/src/structures/Code.astro',
             }),
           ],
           vite: {
+            resolve: {
+              alias: {
+                ...config?.overrides,
+              },
+            },
+            plugins: [
+              virtual({
+                'virtual:fulldev-ui/config': config ?? {},
+              }),
+            ],
             css: {
               postcss: {
                 plugins: [tailwindcss(tailwindConfig), tailwindcssNesting],
@@ -90,16 +108,15 @@ export default function fulldevIntegration(
               }),
             ],
           })
+
         // ----------------------
         // Inject routes
         // ----------------------
         if (config?.injectRoutes) {
-          const pages = import.meta.glob('/src/pages/**/*.astro')
-          !pages['/src/pages/[...page].astro'] &&
-            injectRoute({
-              pattern: '/[...page]',
-              entrypoint: 'fulldev-ui/[...page].astro',
-            })
+          injectRoute({
+            pattern: '/[...page]',
+            entrypoint: 'fulldev-ui/pages/[...page].astro',
+          })
         }
 
         // ----------------------
@@ -107,6 +124,10 @@ export default function fulldevIntegration(
         // ----------------------
         config?.css && injectScript('page-ssr', `import "${config?.css}";`)
 
+        // ----------------------
+        // merge Cloudcannon configs
+        // ----------------------
+
         // ----------------------
         // Generate image YAML files
         // ----------------------
@@ -138,6 +159,26 @@ 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')
+
+          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/Block.astro

@@ -0,0 +1,81 @@
+---
+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 Heading from 'fulldev-ui/components/Heading.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
+
+const { header, sidebar, render, title, description, footer } = Astro.props
+
+const { Content } = await render()
+---
+
+<Layout
+  class:list="block"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container
+    class:list="block-main"
+    as="main"
+  >
+    <Sidebar>
+      <Menus
+        size="sm"
+        menus={sidebar?.menus}
+      />
+    </Sidebar>
+    <Container class:list="block-container">
+      <Prose class:list="block-prose">
+        <Heading
+          size="4xl"
+          as="h1"
+          text={title}
+        />
+        <Paragraph
+          muted
+          text={description}
+        />
+        <Content />
+      </Prose>
+    </Container>
+  </Container>
+  <Footer {...footer} />
+</Layout>
+
+<style is:global>
+  @layer fulldev {
+    .block {
+      .block-main {
+        @apply flex w-full items-start justify-between !px-0;
+      }
+
+      .block-container {
+        max-width: calc(100% - var(--sidebar-width)) !important;
+      }
+
+      .sidebar {
+        @apply hidden lg:flex;
+      }
+
+      .block-prose {
+        @apply mx-auto max-w-none py-8;
+      }
+    }
+  }
+</style>

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

@@ -1,30 +1,31 @@
----
+<!-- ---
 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 Products1 from 'fulldev-ui/blocks/Products1.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 type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+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 { slug, sections, title, image, images, description, render } =
-  Astro.props
+const { render, slug, title, description } = Astro.props
 
-const children = await getCollection('pages', (page) =>
-  page.data.categories?.some((c: any) => c.slug.includes(slug))
+const categories = await getCollection('pages', ({ data }) =>
+  data.categories?.some((c) => c.slug.includes(slug))
 )
 
-const categories = children?.filter(
-  (c) => c.data.component === 'CategoryLayout'
+const products = await getCollection('pages', ({ data }) =>
+  data.categories?.some((c) => c.slug.includes(slug))
 )
 
-const products = children?.filter((c) => c.data.component === 'ProductLayout')
-
 const sorts = [
   {
     option: 'Aanbevolen',
@@ -72,11 +73,13 @@ const sorts = [
   })
 </script>
 
-<Layout {...Astro.props}>
-  <Intro
+<Layout
+  class:list="category"
+  {...Astro.props}
+>
+  <Intro1
     heading={title}
-    paragraph={description}
-    image={image || images?.[0]}
+    text={description}
   />
   <Carousel>
     {
@@ -84,7 +87,7 @@ const sorts = [
         <Element
           as="a"
           class:list="item"
-          href={`/${category.slug}/`}
+          href={getHref(category.slug)}
         >
           {category.data.title}
         </Element>
@@ -101,16 +104,14 @@ const sorts = [
     />
   </Element>
   {
-    sorts.map((sort) => (
-      <Products
+    sorts.map((sort: any) => (
+      <Products1
         class:list={sort.option !== 'Aanbevolen' ? 'hide' : ''}
-        id={sort.option}
-        cards={sort.products}
+        products={sort.products}
       />
     ))
   }
   <Prose {render} />
-  <Sections {sections} />
   <slot />
 </Layout>
 
@@ -132,4 +133,4 @@ const sorts = [
       @apply text-sm text-muted-foreground;
     }
   }
-</style>
+</style> -->

package/src/layouts/Doc.astro

@@ -0,0 +1,96 @@
+---
+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 Heading from 'fulldev-ui/components/Heading.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
+
+const { header, sidebar, render, title, description, footer } = Astro.props
+
+const { Content, headings } = await render()
+
+const filteredHeadings = headings?.filter(
+  (heading: any) => heading.depth >= 2 && heading.depth <= 4
+)
+
+const links = filteredHeadings?.map((button: any) => ({
+  text: button.text,
+  href: `#${button.slug}`,
+  class: `depth-${button.depth}`,
+}))
+---
+
+<Layout
+  class:list="doc"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container as="main">
+    <Sidebar>
+      <Menus
+        size="sm"
+        menus={sidebar?.menus}
+      />
+    </Sidebar>
+    <Container>
+      <Prose>
+        <Heading
+          size="4xl"
+          as="h1"
+          text={title}
+        />
+        <Paragraph
+          muted
+          text={description}
+        />
+        <Content />
+      </Prose>
+    </Container>
+    <Sidebar class:list="doc-toc">
+      <Menu
+        size="sm"
+        heading={title}
+        {links}
+      />
+    </Sidebar>
+  </Container>
+  <Footer {...footer} />
+</Layout>
+
+<style is:global>
+  @layer fulldev {
+    .doc {
+      main {
+        @apply flex w-full items-start justify-between !px-0;
+      }
+
+      .sidebar {
+        @apply hidden lg:flex;
+      }
+
+      .doc-toc {
+        @apply hidden xl:flex;
+      }
+
+      .prose {
+        @apply mx-auto py-8;
+      }
+    }
+  }
+</style>

package/src/layouts/Job.astro

@@ -0,0 +1,60 @@
+---
+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 Element from 'fulldev-ui/components/Element.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
+
+const {
+  title,
+  description,
+  list,
+  button,
+  buttons,
+  header,
+  sidebar,
+  render,
+  parents,
+  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>
+  </Element>
+  <Footer {...footer} />
+</Layout>