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

package/src/content/layouts/docs.yml

@@ -1,70 +1,2 @@
-# sidebar:
-# menu:
-#   - heading: Get Started
-#     links:
-#       - docs
-#       - docs/installation
-#       - docs/customization
-#       - docs/frameworks
-#       - docs/components
-#       - docs/collections
-#   - heading: Collections
-#     links:
-#       - docs/collections/pages
-#       - docs/collections/presets
-#       - docs/collections/images
-#   - heading: Components
-#     links:
-#       - docs/components/avatar
-#       - docs/components/badge
-#       - docs/components/badges
-#       - docs/components/button
-#       - docs/components/buttons
-#       # - docs/components/card
-#       # - docs/components/cards
-#       # - docs/components/cart
-#       # - docs/components/cart-form
-#       # - docs/components/cart-list
-#       # - docs/components/cart-summary
-#       - docs/components/channel
-#       - docs/components/channels
-#       - docs/components/checkbox
-#       - docs/components/code
-#       # - docs/components/dialog
-#       # - docs/components/drawer
-#       # - docs/components/element
-#       # - docs/components/footer
-#       # - docs/components/form
-#       # - docs/components/head
-#       # - docs/components/header
-#       - docs/components/heading
-#       - docs/components/icon
-#       - docs/components/image
-#       - docs/components/input
-#       - docs/components/label
-#       - docs/components/lead
-#       - docs/components/link
-#       - docs/components/links
-#       - docs/components/list
-#       # - docs/components/locale-switcher
-#       - docs/components/logo
-#       - docs/components/menu
-#       - docs/components/paragraph
-#       # - docs/components/price
-#       - docs/components/prose
-#       - docs/components/rating
-#       # - docs/components/search
-#       # - docs/components/section
-#       # - docs/components/sections
-#       - docs/components/select
-#       # - docs/components/sidebar
-#       - docs/components/social
-#       - docs/components/socials
-#       - docs/components/switch
-#       # - docs/components/table
-#       - docs/components/tagline
-#       # - docs/components/text
-#       - docs/components/textarea
-#       - docs/components/themer
-#       # - docs/components/toc
-#       # - docs/components/writeup
+navigation:
+  sidebar: true

package/src/content/pages/index.mdx

@@ -1,62 +1,54 @@
 ---
-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
 
 title: Home
 
-sections:
-  - component: Hero
+blocks:
+  - _block: Hero1
     badge:
-      text: 'Introducing v0.5: page building & generation'
+      text: 'Introducing v0.6: layouts & 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
     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
     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/{categories/mugs.md → posts/post.md}

@@ -1,5 +1,5 @@
 ---
-title: Mug
+title: Post
 description: Lorem ipsum dolor sit
 ---
 

package/src/content/products/product.md

@@ -1,8 +1,8 @@
 ---
-title: My Product Title
+title: Product
 categories: 
-  - mugs
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, libero at lacinia ferment
+  - category
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 price: 90
 images: 
   - placeholder.webp

package/src/css/theme.css

@@ -89,5 +89,7 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+
+    color-scheme: dark;
   }
 }

package/src/images/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/favicon/mstile-150x150.png"/>
+      <TileColor>#fff</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

package/src/images/favicon/favicon.svg

@@ -0,0 +1,16 @@
+<svg width="758" height="758" viewBox="0 0 758 758" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_5)">
+<rect width="758" height="758" fill="#FF5500"/>
+<rect x="-133" y="-133" width="1024" height="1024" fill="url(#paint0_radial_45_5)"/>
+<path d="M269.363 565C264.945 565 261.363 561.419 261.363 557V200.637C261.363 196.218 264.945 192.637 269.363 192.637H499.909C504.327 192.637 507.909 196.218 507.909 200.637V249.546C507.909 253.964 504.327 257.546 499.909 257.546H348.091C343.672 257.546 340.091 261.128 340.091 265.546V338.273C340.091 342.691 343.672 346.273 348.091 346.273H483.545C487.963 346.273 491.545 349.855 491.545 354.273V403.182C491.545 407.6 487.963 411.182 483.545 411.182H348.091C343.672 411.182 340.091 414.764 340.091 419.182V557C340.091 561.419 336.509 565 332.091 565H269.363Z" fill="#EEEEEC"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_45_5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(379 379) rotate(45) scale(724.077)">
+<stop stop-color="#111110" stop-opacity="0.2"/>
+<stop offset="0.9" stop-color="#111110" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_45_5">
+<rect width="758" height="758" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/images/favicon/manifest.webmanifest

@@ -0,0 +1,30 @@
+{
+  "name": "Fulldev UI",
+  "short_name": "Fulldev UI",
+  "description": "Fulldev UI",
+  "dir": "auto",
+  "lang": "en-GB",
+  "display": "standalone",
+  "display_override": [
+    "window-controls-overlay",
+    "standalone"
+  ],
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

package/src/images/favicon/safari-pinned-tab.svg

@@ -0,0 +1,16 @@
+<svg width="758" height="758" viewBox="0 0 758 758" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_5)">
+<rect width="758" height="758" fill="#FF5500"/>
+<rect x="-133" y="-133" width="1024" height="1024" fill="url(#paint0_radial_45_5)"/>
+<path d="M269.363 565C264.945 565 261.363 561.419 261.363 557V200.637C261.363 196.218 264.945 192.637 269.363 192.637H499.909C504.327 192.637 507.909 196.218 507.909 200.637V249.546C507.909 253.964 504.327 257.546 499.909 257.546H348.091C343.672 257.546 340.091 261.128 340.091 265.546V338.273C340.091 342.691 343.672 346.273 348.091 346.273H483.545C487.963 346.273 491.545 349.855 491.545 354.273V403.182C491.545 407.6 487.963 411.182 483.545 411.182H348.091C343.672 411.182 340.091 414.764 340.091 419.182V557C340.091 561.419 336.509 565 332.091 565H269.363Z" fill="#EEEEEC"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_45_5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(379 379) rotate(45) scale(724.077)">
+<stop stop-color="#111110" stop-opacity="0.2"/>
+<stop offset="0.9" stop-color="#111110" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_45_5">
+<rect width="758" height="758" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/images/favicon/yandex-browser-manifest.json

@@ -0,0 +1,9 @@
+{
+  "version": "1.0",
+  "api_version": 1,
+  "layout": {
+    "logo": "/favicon/yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}

package/src/integration/index.ts

@@ -15,10 +15,13 @@ interface Config {
   company?: string
   css?: string
   injectRoutes?: boolean
+  overrides?: {
+    [k: string]: string
+  }
 }
 
 export default function fulldevIntegration(
-  config?: Partial<Config> | undefined
+  config: Partial<Config> | undefined
 ): AstroIntegration {
   return {
     name: '/integration',
@@ -64,6 +67,11 @@ export default function fulldevIntegration(
             }),
           ],
           vite: {
+            resolve: {
+              alias: {
+                ...config?.overrides,
+              },
+            },
             css: {
               postcss: {
                 plugins: [tailwindcss(tailwindConfig), tailwindcssNesting],
@@ -88,6 +96,7 @@ export default function fulldevIntegration(
               }),
             ],
           })
+
         // ----------------------
         // Inject routes
         // ----------------------

package/src/layouts/CategoryLayout.astro

@@ -1,19 +1,26 @@
 ---
 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 { getCollection, getEntry } from 'astro:content'
+import Intro1 from 'fulldev-ui/blocks/Intro1.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 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'
 
 type Props = CollectionEntry<'categories'>
 
-const { render, slug } = Astro.props
-const { title, description } = Astro.props.data
+const layout = await getEntry('layouts', 'categories')
+const merged = mergeDeep(layout || {}, Astro.props)
+
+const {
+  render,
+  slug,
+  data: { title, description },
+} = merged
 
 const categories = await getCollection('categories', ({ data }) =>
   data.categories?.some((c) => c.slug.includes(slug))
@@ -70,10 +77,10 @@ const sorts = [
   })
 </script>
 
-<Layout {...Astro.props}>
-  <Intro
+<Layout {...merged}>
+  <Intro1
     heading={title}
-    paragraph={description}
+    text={description}
   />
   <Carousel>
     {
@@ -99,7 +106,7 @@ const sorts = [
   </Element>
   {
     sorts.map((sort: any) => (
-      <Products
+      <Products1
         class:list={sort.option !== 'Aanbevolen' ? 'hide' : ''}
         products={sort.products}
       />

package/src/layouts/DocLayout.astro

@@ -1,17 +1,59 @@
 ---
 import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
+import Container from 'fulldev-ui/components/Container.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Prose from 'fulldev-ui/components/Prose.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
+import { mergeDeep } from 'remeda'
 
 type Props = CollectionEntry<'docs'>
 
-const { render } = Astro.props
+const layout = await getEntry('layouts', 'docs')
+const merged = mergeDeep(layout || {}, Astro.props)
+
+const {
+  render,
+  data: { title, description },
+} = merged
+
+const { Content } = await render()
 ---
 
-<Layout>
-  <Prose
-    {render}
-    toc={true}
-  />
-  <slot />
+<Layout
+  class:list="doc-layout"
+  {...merged}
+>
+  <Container class:list="doc-layout-container">
+    <Toc {render} />
+    <Prose>
+      <Heading
+        as="h1"
+        size="4xl"
+        text={title}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={description}
+      />
+      <Content />
+    </Prose>
+  </Container>
 </Layout>
+
+<style is:global>
+  @layer fulldev {
+    .doc-layout {
+      .doc-layout-container {
+        @apply relative flex w-full grow items-start justify-evenly gap-x-gutter;
+      }
+
+      .toc {
+        @apply order-last;
+      }
+    }
+  }
+</style>

package/src/layouts/Layout.astro

@@ -1,56 +1,88 @@
 ---
+import type { 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 Block from 'fulldev-ui/components/Block.astro'
+import Container from 'fulldev-ui/components/Container.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Head from 'fulldev-ui/components/Head.astro'
-import Header from 'fulldev-ui/components/Header.astro'
 import Sidebar from 'fulldev-ui/components/Sidebar.astro'
 import Subheader from 'fulldev-ui/components/Subheader.astro'
+import { mergeDeep } from 'remeda'
 
-type Props = CollectionEntry<ContentCollectionKey>
+type Props = HTMLAttributes<'body'> & CollectionEntry<ContentCollectionKey>
 
 const layout = await getEntry('layouts', 'base')
+const merged = mergeDeep(layout || {}, Astro.props)
 
-const { banner, header, subheader, sidebar, footer, theme, code } = layout.data
+const {
+  collection,
+  slug,
+  id,
+  render,
+  body,
+  data: {
+    banner,
+    header,
+    subheader,
+    sidebar,
+    footer,
+    head,
+    navigation,
+    title,
+    description,
+    image,
+  },
+  ...rest
+} = merged
 ---
 
 <!doctype html>
-<html class="layout">
+<Element
+  class:list="layout"
+  as="html"
+  {...rest}
+>
   <Head
-    {...layout.data}
-    {...Astro.props.data}
+    {title}
+    {description}
+    {image}
+    {...head}
   />
   <Element
     class:list="layout-body"
     as="body"
-    {theme}
   >
-    <Banner text={banner} />
-    <Header {...header} />
+    <Block
+      _block="Banner1"
+      {...banner}
+    />
+    <Block
+      _block="Header1"
+      {...navigation?.header && navigation}
+      {...header}
+    />
     <Subheader {...subheader} />
-    <slot name="before" />
-
-    <Element class:list={['layout-container', { 'has-sidebar': sidebar }]}>
-      <Sidebar {...sidebar} />
+    <Container class:list={['layout-container', { 'has-sidebar': sidebar }]}>
+      <Sidebar
+        {...navigation?.sidebar && navigation}
+        {...sidebar}
+      />
       <main class="layout-main">
         <slot />
       </main>
-    </Element>
+    </Container>
     <Footer {...footer} />
-    <slot name="after" />
-    <Fragment set:html={code?.body} />
-
     <style is:global>
       @layer fulldev {
         .layout {
           @apply w-full font-sans text-base leading-relaxed text-foreground;
           color-scheme: light;
+        }
 
-          &.dark {
-            color-scheme: dark;
-          }
+        .dark {
+          color-scheme: dark;
         }
 
         .layout-body {
@@ -58,11 +90,7 @@ const { banner, header, subheader, sidebar, footer, theme, code } = layout.data
         }
 
         .layout-container {
-          @apply relative flex h-full w-full flex-grow;
-
-          &.has-sidebar {
-            @apply container px-0;
-          }
+          @apply flex w-full grow !px-0;
         }
 
         .layout-main {
@@ -76,4 +104,4 @@ const { banner, header, subheader, sidebar, footer, theme, code } = layout.data
       }
     </style>
   </Element>
-</html>
+</Element>

package/src/layouts/PageLayout.astro

@@ -1,20 +1,27 @@
 ---
 import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
+import Blocks from 'fulldev-ui/components/Blocks.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'
+import { mergeDeep } from 'remeda'
 
 type Props = CollectionEntry<'pages'>
 
-const { render } = Astro.props
-const { sections } = Astro.props.data
+const layout = await getEntry('layouts', 'pages')
+const merged = mergeDeep(layout || {}, Astro.props)
+
+const {
+  render,
+  data: { blocks },
+} = merged
 ---
 
-<Layout {...Astro.props}>
+<Layout {...merged}>
   <Prose
     {render}
     toc={false}
   />
-  <Sections {sections} />
+  <Blocks {blocks} />
   <slot />
 </Layout>

package/src/layouts/PostLayout.astro

@@ -1,20 +1,22 @@
 ---
 import type { CollectionEntry } from 'astro:content'
+import { getEntry } 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'
+import { mergeDeep } from 'remeda'
 
 type Props = CollectionEntry<'posts'>
 
-const { render } = Astro.props
-const { sections } = Astro.props.data
+const layout = await getEntry('layouts', 'posts')
+const merged = mergeDeep(layout || {}, Astro.props)
+
+const { render } = merged
 ---
 
-<Layout {...Astro.props}>
+<Layout {...merged}>
   <Prose
     {render}
     toc={true}
   />
-  <Sections {sections} />
   <slot />
 </Layout>