fulldev-ui 0.4.29 → 0.5.0-beta.1

package/src/content/pages/blocks/cta.mdx

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: CTA
-image: /images/blocks/cta.png
 ---
 
 ```astro live
@@ -131,7 +130,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
   ]}
   structure="spread"
-  frame="fill"
 />
 ```
 
@@ -147,7 +145,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
   ]}
   structure="spread"
-  frame="none"
   color="brand"
 />
 ```
@@ -157,27 +154,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
 import Cta from 'fulldev-ui/blocks/Cta.astro'
 ---
 
-<Cta
-  label="Lorem ipsum dolor"
-  heading="Lorem ipsum dolor sit"
-  text="Lorem ipsum dolor sit amet consectetur ades"
-  buttons={[
-    { text: 'Lorem ipsum', href: '' },
-    { text: 'Lorem ipsum', href: '' },
-  ]}
-  position="inset"
-  structure="split"
-  align="center"
-  color="brand"
-  image="/images/placeholder-landscape.webp"
-/>
-```
-
-```astro live
----
-import Cta from 'fulldev-ui/blocks/Cta.astro'
----
-
 <Cta
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur ades"
@@ -186,6 +162,7 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
   ]}
   position="background"
+  theme="dark"
   align="center"
   image="/images/placeholder-landscape-dark.png"
 />

package/src/content/pages/blocks/features.mdx

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Features
-image: /images/blocks/features.png
 ---
 
 ```astro live
@@ -108,7 +107,7 @@ import Features from 'fulldev-ui/blocks/Features.astro'
 <Features
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
-  frame="panel"
+  panel
   position="inset"
   cards={[
     {

package/src/content/pages/blocks/hero.mdx

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Hero
-image: /images/blocks/hero.png
 ---
 
 ```astro live
@@ -18,6 +17,7 @@ import Hero from 'fulldev-ui/blocks/Hero.astro'
     { text: 'Lorem ipsum', href: '' },
     { text: 'Lorem ipsum', href: '' },
   ]}
+  position="inset"
   image="/images/placeholder-landscape.webp"
 />
 ```
@@ -35,6 +35,7 @@ import Hero from 'fulldev-ui/blocks/Hero.astro'
     { text: 'Lorem ipsum', href: '' },
   ]}
   structure="spread"
+  position="inset"
   image="/images/placeholder-landscape.webp"
 />
 ```
@@ -91,7 +92,8 @@ import Hero from 'fulldev-ui/blocks/Hero.astro'
   image="/images/placeholder-landscape-dark.png"
   position="background"
   align="center"
-  frame="viewport"
+  theme="dark"
   justify="center"
+  style={{ minHeight: '100vh', justifyContent: 'center' }}
 />
 ```

package/src/content/pages/blocks/intro.mdx

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Intro
-image: /images/blocks/intro.png
 ---
 
 ```astro live
@@ -86,7 +85,6 @@ import Intro from 'fulldev-ui/blocks/Intro.astro'
 ---
 
 <Intro
-  frame="fill"
   variant="primary"
   heading="Lorem ipsum dolor sit amet"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
@@ -103,7 +101,6 @@ import Intro from 'fulldev-ui/blocks/Intro.astro'
 ---
 
 <Intro
-  frame="fill"
   variant="primary"
   heading="Lorem ipsum dolor sit amet"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
@@ -120,7 +117,7 @@ import Intro from 'fulldev-ui/blocks/Intro.astro'
 ---
 
 <Intro
-  frame="panel"
+  panel
   variant="primary"
   heading="Lorem ipsum dolor sit amet"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."

package/src/content/pages/blocks/posts.mdx

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Posts
-image: /images/blocks/posts.png
 ---
 
 ```astro live
@@ -13,6 +12,7 @@ import Posts from 'fulldev-ui/blocks/Posts.astro'
 <Posts
   heading="Latest posts"
   text="Read the latest articles from our blog."
+  panel={false}
   cards={[
     {
       tagline: '2024-03-15',
@@ -35,6 +35,13 @@ import Posts from 'fulldev-ui/blocks/Posts.astro'
       image: '/images/placeholder-landscape.webp',
       href: '',
     },
+    {
+      tagline: '2024-03-05',
+      heading: 'Lorem ipsum dolor sit amet consectetur',
+      text: 'Discover our flexible Content block with split layout and panel options. Ideal for presenting detailed information about your products or services.',
+      image: '/images/placeholder-landscape.webp',
+      href: '',
+    },
   ]}
 />
 ```

package/src/content/pages/blocks/reviews.mdx

@@ -1,8 +1,7 @@
 ---
-_layout: BlockLayout
+presets: [docs, blocks]
 
 title: Reviews
-image: /images/blocks/reviews.png
 ---
 
 ```astro live
@@ -19,7 +18,7 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     {
       rating: {
         value: 5,
-        avatar: '/images/avatars/1.jpeg',
+        avatar: 'avatar-1.jpeg',
         label: 'John Doe',
       },
       heading: 'Exceptional Service',
@@ -28,7 +27,7 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     {
       rating: {
         value: 5,
-        avatar: '/images/avatars/2.jpeg',
+        avatar: 'avatar-2.jpeg',
         label: 'Jane Smith',
       },
       heading: 'Great Product',
@@ -37,7 +36,7 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     {
       rating: {
         value: 5,
-        avatar: '/images/avatars/3.jpeg',
+        avatar: 'avatar-3.jpeg',
         label: 'Mike Johnson',
       },
       heading: 'Reliable and Efficient',
@@ -46,7 +45,7 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     {
       rating: {
         value: 5,
-        avatar: '/images/avatars/4.jpeg',
+        avatar: 'avatar-4.jpeg',
         label: 'Emily Brown',
       },
       heading: 'Fantastic Experience',
@@ -55,7 +54,7 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     {
       rating: {
         value: 5,
-        avatar: '/images/avatars/5.jpeg',
+        avatar: 'avatar-1.jpeg',
         label: 'David Wilson',
       },
       heading: 'Best in Class',
@@ -64,7 +63,7 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     {
       rating: {
         value: 5,
-        avatar: '/images/avatars/6.jpeg',
+        avatar: 'avatar-2.jpeg',
         label: 'Sarah Davis',
       },
       heading: 'Innovative Design',
@@ -73,7 +72,7 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     {
       rating: {
         value: 5,
-        avatar: '/images/avatars/7.jpeg',
+        avatar: 'avatar-3.jpeg',
         label: 'Alex Taylor',
       },
       heading: 'Time-Saver',
@@ -82,7 +81,7 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     {
       rating: {
         value: 5,
-        avatar: '/images/avatars/8.jpeg',
+        avatar: 'avatar-4.jpeg',
         label: 'Olivia Martinez',
       },
       heading: 'Reliable and Durable',
@@ -102,10 +101,10 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
     value: 5,
     label: 'Rated 5,0 out of 86 reviews',
     avatars: [
-      '/images/avatars/1.jpeg',
-      '/images/avatars/2.jpeg',
-      '/images/avatars/3.jpeg',
-      '/images/avatars/4.jpeg',
+      'avatar-1.jpeg',
+      'avatar-2.jpeg',
+      'avatar-3.jpeg',
+      'avatar-4.jpeg',
     ],
   }}
   heading="What Our Customers Say"
@@ -220,28 +219,34 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
   heading="Customer Testimonials"
   text="See what our valued customers have to say about their experiences."
   structure="grid"
-  frame="panel"
   variant="primary"
   cards={[
     {
       rating: 5,
       heading: 'Life-Changing Product',
       text: "This product has revolutionized my daily routine. I can't imagine life without it now!",
-      avatar: '/images/avatars/1.jpeg',
+      avatar: 'avatar-1.jpeg',
       label: 'John Doe',
     },
     {
       rating: 4,
       heading: 'Great Value for Money',
       text: 'Excellent quality at a reasonable price. Definitely worth every penny.',
-      avatar: '/images/avatars/2.jpeg',
+      avatar: 'avatar-2.jpeg',
       label: 'Jane Smith',
     },
     {
       rating: 5,
       heading: 'Superb Customer Service',
       text: 'The support team went above and beyond to help me. Truly impressive!',
-      avatar: '/images/avatars/3.jpeg',
+      avatar: 'avatar-3.jpeg',
+      label: 'Mike Johnson',
+    },
+    {
+      rating: 5,
+      heading: 'Superb Customer Service',
+      text: 'The support team went above and beyond to help me. Truly impressive!',
+      avatar: 'avatar-3.jpeg',
       label: 'Mike Johnson',
     },
   ]}

package/src/content/pages/index.mdx

@@ -1,55 +1,54 @@
 ---
+presets: [base]
+component: PageLayout
+sidebar: false
+toc: false
+
 seo:
   title: Fulldev UI - Astro component and block library, open-source
   description: Make websites rapidly with pre-built components and blocks.
-  image: /images/og-image.png
+  image: og-image.png
+
+title: Home
 
 sections:
-  hero:
-    _bookshop_name: Hero
-    color: brand
+  - component: Hero
     badge:
-      as: a
-      text: We just released our biggest update yet 🎉
-      href: https://discord.gg/vXZqMbadm8
+      text: We added layouts, now you can build entire sites
+      href: /overview/installation/
     heading: The Astro UI library to build content sites
-    text: Make websites with prebuilt components and blocks
+    text: Make websites with prebuilt components, blocks and layouts
     buttons:
       - text: Get Started
-        href: /overview/installation
+        href: /overview/installation/
       - text: GitHub
         href: https://github.com/fulldotdev/ui
-        target: _blank
         icon: brand-github
-
-  blocks:
-    _bookshop_name: Content
+  - component: Article
+  - component: Content
     color: brand
     label: Blocks
     heading: Use pre-built blocks with just props
     text: 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: /images/block-code.png
-    reverse: odd
+    image: block-code.png
     buttons:
       - href: /blocks
         icon: layout
         text: View blocks
 
-  components:
-    _bookshop_name: Content
+  - component: Content
     color: brand
     label: Components
     heading: Or build your own, with easy to use components
     text: our rich set of components make it easy to build your own blocks with great customizability through props and global theming.
-    image: /images/component-code.png
+    image: component-code.png
     reverse: odd
     buttons:
       - href: /base/badge
         icon: code
         text: View components
 
-  cta:
-    _bookshop_name: Cta
+  - component: Cta
     size: lg
     variant: primary
     heading: Build content websites in a fraction of time

package/src/content/pages/layouts/docslayout.mdx

@@ -0,0 +1,5 @@
+---
+presets: [docs, blocks]
+
+title: DocsLayout
+---

package/src/content/pages/layouts/layout.mdx

@@ -0,0 +1,21 @@
+---
+presets: [docs, blocks]
+
+title: Layout
+---
+
+```astro live
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+---
+
+<Layout>
+  <Hero
+    heading="Layout"
+    text="The Layout component is used to wrap the content of a page."
+    align="center"
+    frame="viewport"
+  />
+</Layout>
+```

package/src/content/pages/layouts/pagelayout.mdx

@@ -0,0 +1,21 @@
+---
+presets: [docs, blocks]
+
+title: PageLayout
+---
+
+```astro live
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+import PageLayout from 'fulldev-ui/layouts/PageLayout.astro'
+---
+
+<PageLayout>
+  <Hero
+    heading="PageLayout"
+    text="The PageLayout component is used to wrap the content of a page."
+    align="center"
+    frame="viewport"
+  />
+</PageLayout>
+```

package/src/content/pages/overview/components.mdx

@@ -0,0 +1,70 @@
+---
+presets: [docs]
+title: Components
+---
+
+# Components
+
+Fulldev UI offers a collection of components that are styled with regular CSS, have cascading styles, and are easy to customize.
+
+## Usage
+
+To use a component, you need to import it from the `fulldev-ui` package.
+
+```astro
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button text="Click me" />
+```
+
+```astro
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+---
+
+<Hero text="Props here" />
+```
+
+```astro
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+---
+
+<Layout>
+  <Hero />
+</Layout>
+```
+
+## Slots
+
+Even though we recommend using props to pass content into components, you can also use slots to inject content into a component.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+{/* Slots example */}
+<Button>Click me</Button>
+
+{/* Props example */}
+<Button text="Click me" />
+```
+
+## Rendering
+
+If no content passed to a component, it will NOT render anything. unless you pass an `if` prop.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+{/* This will not render anything */}
+<Button />
+
+{/* This will render a button */}
+<Button if={true} />

package/src/content/pages/overview/content-layer.mdx

@@ -0,0 +1,128 @@
+---
+presets: [docs]
+title: Content Layer
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Content Layer
+
+We utilize <Link href="https://docs.astro.build/docs/guides/content-collections/">Astro's Content Layer</Link> to create entire websites using just content files and our components.
+
+## Starter Template
+
+This is the recommended way to get started with our content layer integration. We've created a <Link href="https://github.com/fulldotdev/starter/tree/main">starter template</Link> with examples of everything you need to get started.
+
+## Manual Setup
+
+To get started with the manual setup, you need to install the <Link href="/overview/installation/">integration</Link> and add `injectRoutes: true` to your `astro.config.ts` file, see <Link href="#folder-structure">file structure</Link> below for more information on how this generates a site using content files.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      // other options
+      injectRoutes: true,
+    }),
+  ],
+})
+```
+
+## Folder Structure
+
+```
+.
+├── src/
+│   ├── blocks/
+│   │   └── ...
+│   ├── components/
+│   │   └── ...
+│   ├── layouts/
+│   │   └── ...
+│   ├── assets/
+│   │   └── ...
+│   ├── content/
+│   │   ├── pages/
+│   │   │   └── ...
+│   │   ├── records/
+│   │   │   └── ...
+│   │   │       └── ...
+│   │   ├── presets/
+│   │   │   ├── base.yml
+│   │   │   └── ...
+│   │   └── ...
+│   ├── css/
+│   │   ├── custom.css
+│   │   └── ...
+├── public/
+│   └── ...
+└──
+```
+
+- **/src/**: The main source directory containing all the core files of the project.
+  - **/blocks/**: Contains reusable block components that can be composed to build pages (Custom or overwrites existing fulldev-ui blocks)
+  - **/components/**: Houses individual UI components used throughout the project (Custom or overwrites existing fulldev-ui components)
+  - **/layouts/**: Contains layout components used to structure pages (Custom or overwrites existing fulldev-ui layouts)
+  - **/assets/**: Contains assets like images, fonts, etc.
+  - **/content/**: Stores content-related files:
+    - **pages/**: Contains markdown or MDX files for individual pages.
+    - **records/**: Contains markdown or MDX files for content collections. Nested in directories by collection name.
+    - **/presets/**: Includes configuration files for various settings like the sidebar.
+  - **/css/**: Contains global CSS files and styles.
+
+### File Structure
+
+Each file has a few frontmatter objects that are important to know about. Seo has priority over title and description, however title and description is used in multiple places like a card.
+
+```md
+---
+seo:
+  title: Page Title
+  description: This is my page description
+  image: /image.jpg # Open Graph Image
+
+title: Page Title
+description: This is my page description
+---
+```
+
+For all objects avaliable in the Content Layer, see the <Link href="/schemas/page/">schemas</Link>.
+
+### Image Alt collection
+
+To create yml records for images, you can simply add `generateImageEntries: true` to the integration setup. This will generate a yml file in the **src/assets/** directory with the image alt text pre set to the unslugged filename which can be customized. If turned on the Image component will automatically use these records for the alt text of local images.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      // other options
+      generateImageEntries: true,
+    }),
+  ],
+})
+```
+
+## i18n
+
+Getting started with i18n is easy, you can easily add additional languages by creating a new folder in the **content/pages** directory and adding your content files in the new language.
+
+```
+.
+├── src/
+│   ├── content/
+│   │   ├── pages/
+│   │   │   ├── index.md
+│   │   │   ├── nl/
+│   │   │   │   └── index.md
+│   │   │   └── de/
+│   │   │   │   └── index.md
+```

package/src/content/pages/overview/{theming.mdx → customization.mdx}

@@ -1,23 +1,23 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Customization
 ---
 
 import Link from 'fulldev-ui/components/Link.astro'
 
-# Theming
+# Customization
 
 ## Colors
 
-The color theme is inspired by / compatible with <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
+The color theme is inspired by and compatible with <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
 
 ### Automatic setup
 
-With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the <Link href="/overview/integration">integration page</Link> for details.
+With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the <Link href="/overview/installation/">installation page</Link> to get started with the integration.
 
 ### Manual setup
 
-You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explenation see <Link href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">this page</Link>.
+You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explanation see <Link href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">this page</Link>.
 
 ```css
 :root,