fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/content/pages/docs/components/themer.mdx

@@ -0,0 +1,49 @@
+---
+_layout: doc
+title: Themer
+---
+
+# Themer
+
+<aside>This component is experimental and likely to change</aside>
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Themer from 'fulldev-ui/components/Themer.astro'
+---
+
+<Themer />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Themer from 'fulldev-ui/components/Themer.astro'
+---
+
+<Themer variant="primary" />
+<Themer variant="secondary" />
+<Themer variant="outline" />
+<Themer variant="ghost" />
+```
+
+### `size`
+
+```astro live
+---
+import Themer from 'fulldev-ui/components/Themer.astro'
+---
+
+<Themer size="sm" />
+<Themer size="md" />
+<Themer size="lg" />
+```

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

@@ -0,0 +1,37 @@
+---
+_layout: doc
+title: Components
+description: Features shared across components.
+---
+
+## Slots versus props
+
+You can use either slots or props. Props are recommended as they are type safe and work better in combination with content collections.
+
+Though, the following examples do the same thing.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button href="#">Click me</Button>
+<Button href="#" text="Click me" />
+```
+
+## Conditional rendering
+
+By default, if no content is passed to a component, it will **NOT** render anything. This helps optimize your code, especially when working with content collections.
+
+You can override this default behavior using the `if` prop, which lets you control component rendering based on a truthy or falsy value.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button text="With content" />
+<Button if={true} />
+<Button if={false} />
+<Button />
+```

package/src/content/pages/docs/customization.mdx

@@ -0,0 +1,151 @@
+---
+_layout: doc
+title: Customization
+---
+
+# Customization
+
+Customize styles and components.
+
+## CSS Variables
+
+While outputting 100% vanilla CSS, the underlying theming variables are based on - and therefore fully compatible with - the popular [Shadcn/ui](https://ui.shadcn.com/).
+
+###### Default colors for backgrounds and text
+
+```
+--background: 0 0% 100%;
+--foreground: 222.2 47.4% 11.2%;
+```
+
+###### Used for muted backgrounds and text
+
+```
+--muted: 210 40% 96.1%;
+--muted-foreground: 215.4 16.3% 46.9%;
+```
+
+###### Used for `<Card/>` and other panels
+
+```
+--card: 0 0% 100%;
+--card-foreground: 222.2 47.4% 11.2%;
+```
+
+###### Default border color
+
+```
+--border: 214.3 31.8% 91.4%;
+```
+
+###### Border color for inputs such as `<Input />`, `<Select />`, `<Textarea />`
+
+```
+--input: 214.3 31.8% 91.4%;
+```
+
+###### Primary colors for `<Button/>`
+
+```
+--primary: 222.2 47.4% 11.2%;
+--primary-foreground: 210 40% 98%;
+```
+
+###### Secondary colors for `<Button/>`
+
+```
+--secondary: 210 40% 96.1%;
+--secondary-foreground: 222.2 47.4% 11.2%;
+```
+
+###### Accent colors ghost and outline `<Button/>`
+
+```
+--accent: 210 40% 96.1%;
+--accent-foreground: 222.2 47.4% 11.2%;
+```
+
+###### Used for focus ring
+
+```
+--ring: 215 20.2% 65.1%;
+```
+
+###### Border radius for cards, panels, input and buttons
+
+```
+--radius: 0.5rem;
+```
+
+### Dark mode
+
+Dark mode colors can be customized by adding them within the `.dark` class:
+
+```css
+:root {
+  /* Regular color go here */
+}
+
+.dark {
+  /* Dark mode colors go here */
+}
+```
+
+## Overwriting styles
+
+Components use simple CSS classes that match their names. For example:
+
+- `<Button/>` uses the class `.button`
+- `<Button variant="secondary"/>` adds `.variant-secondary`
+- `<Card panel={true}/>` or `<Card panel />` adds `.panel`
+
+### Using vanilla CSS
+
+Write your own CSS wihtin an Astro component, or anywhere else in your project.
+
+The plugin [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) is pre-installed so you can use the `&` operator to nest your styles.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button>Button</Button>
+<Button variant="secondary">Secondary</Button>
+
+<style>
+  .button {
+    border-radius: 999px;
+
+    &.variant-secondary {
+      border: 1px solid rgba(0, 0, 0, 0.3);
+    }
+  }
+</style>
+```
+
+### Using Tailwind
+
+Using Tailwind is **completely optional**, but since all styles match Tailwind's utility values, they work seamlessly together.
+
+Tailwind is pre-installed, so your can use either classes or the `@apply` directive out of the box.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button class="rounded-full">Button</Button>
+
+<style>
+  .button {
+    @apply rounded-full;
+  }
+</style>
+```
+
+## Customizing components
+
+Components can be copied from the repository and customized, without breaking imports.
+
+The repositiory is setup like a regular Astro project, so it easy to find your way around, as long as you have basic knowledge of Astro.

package/src/content/pages/docs/frameworks.mdx

@@ -0,0 +1,29 @@
+---
+_layout: doc
+title: Frameworks
+---
+
+# Frameworks
+
+Compatible with Shadcn/ui and other frameworks.
+
+## Shadcn/ui
+
+As detailed in the [customization documentation](/overview/customization/), Fulldev UI shares the same styling variables as Shadcn/ui, ensuring complete compatibility between the two libraries.
+
+This means you can seamlessly integrate Shadcn/ui components alongside Fulldev UI components while maintaining consistent styling and behavior.
+
+## Svelte, Vue React, etc.
+
+While fulldev-ui is built with Tailwind CSS internally, all styles are converted to regular CSS classes using the `@apply` directive. This means all component styles are available globally through standard CSS classes.
+
+You can use these component classes (like `button`, `variant-primary`, etc.) directly in any framework (Svelte, Vue, React, and all other frameworks), similar to how you would use other CSS frameworks like DaisyUI.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<button class="button size-md variant-primary">Button</button>
+<Button>Button</Button>
+```

package/src/content/pages/docs/generating-pages.mdx

@@ -0,0 +1,129 @@
+---
+_layout: doc
+title: Generating Pages
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Generating Pages
+
+With our integration, you can generate pages using content files with type-safe frontmatter, minimal configuration, and an easy-to-understand project structure.
+
+## 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. This instantly gives you access to generating pages, using presets, internationalization and more without any additional setup.
+
+```bash
+pnpm create astro@latest -- --template fulldotdev/starter
+```
+
+## 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="#type-safe-frontmatter">frontmatter</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,
+    }),
+  ],
+})
+```
+
+`injectRoutes` reads your content files and generates routes for them in the generated site. Supporting file types like markdown and MDX.
+
+## Project Structure
+
+To start with, your project structure should look like this:
+
+```md
+.
+├── src/
+│ ├── blocks/
+│ │ └── ...
+│ ├── components/
+│ │ └── ...
+│ ├── layouts/
+│ │ └── ...
+│ ├── images/
+│ │ └── ...
+│ ├── content/
+│ │ ├── pages/
+│ │ │ └── ...
+│ │ ├── presets/
+│ │ │ ├── base.yml
+│ │ │ └── ...
+│ │ └── ...
+│ ├── css/
+│ │ ├── custom.css
+│ │ └── ...
+├── public/
+│ └── ...
+└──
+```
+
+## Creating a page
+
+Creating a page is as simple as creating a new file in the **src/content/pages** directory.
+
+For example,
+
+- **src/content/pages/index.mdx** will be the root of your site.
+- **src/content/pages/about.mdx** will appear at /about.
+- **src/content/pages/team/first-name.mdx** will appear at /team/first-name.
+
+### Using presets
+
+Presets are a way to apply a set of configurations to a page. This can be apply navigation settings, seo and more.
+
+To learn more about presets, see the <Link href="/guides/using-presets/">using presets</Link> guide.
+
+### Using layouts
+
+Layouts are a way to apply styles to a page. Used for having multiple layouts like a blog layout, documentation layout, etc.
+
+To learn more about layouts, see the <Link href="/guides/using-layouts/">using layouts</Link> guide.
+
+### Frontmatter
+
+Each file has a few frontmatter objects that are important to know about. The frontmatter is fully type-safe, so you will know if you use an unavailable option or mistype something. SEO has priority over title and description, however title and description are used in multiple places like cards so they remain important.
+
+```yml
+---
+preset: [docs]
+component: DocsLayout
+
+seo:
+  title: Page Title
+  description: This is my page description
+  image: /image.jpg # Open Graph Image
+
+# Information on the page, this is used in places like card, sidebar, etc.
+title: Page Title
+description: This is my page description
+
+sections: # Here you generate the page by adding a component and passing props
+  - component: Hero
+    heading: Page Title
+    text: This is my page description
+    buttons:
+      - text: Button
+        color: brand
+        href: /
+      - text: Button
+        href: /
+---
+# This is the prose, you can use markdown here, typically used for blogs, docs, etc.
+```
+
+For all objects avaliable in the frontmatter, see the <Link href="https://ui.full.dev/content-collections/pages/">pages collection</Link>.
+
+## Using custom components
+
+You can use custom components simply creating them in the **src/components**, **src/blocks** or **src/layouts** directory. You can then use those in the component property of the frontmatter. If you want to override a component from the library, see the [overriding components](/guides/overriding-components/) guide.

package/src/content/pages/docs/index.mdx

@@ -0,0 +1,20 @@
+---
+_layout: doc
+title: Introduction
+description: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.
+---
+
+## Why we built it
+
+After repeatedly encountering the same challenges in [our company's](https://full.dev) client projects, we decided to build this library. After successfully using it in production websites, we decided to open-source it to help others facing similar problems.
+
+## What makes it special
+
+- Built entirely with `.astro` components
+- Outputs vanilla CSS, html and minimal JavaScript
+- Compatible with all JS frameworks
+- Compatible with Tailwind and Shadcn/ui
+- Integrates with [content collections](https://docs.astro.build/en/guides/content-collections/)
+- Blocks included, like Hero, CTA and Features
+- Automatically generated pages
+- And more...

package/src/content/pages/docs/installation.mdx

@@ -0,0 +1,50 @@
+---
+_layout: doc
+title: Installation
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Installation
+
+How to install dependencies and setup the integration.
+
+## Add to existing project
+
+If you don't have an existing project, you can create a new one using the [starter template](https://github.com/fulldotdev/starter).
+
+### Automatic setup
+
+Run the following command to automatically install the dependencies and add the integration.
+
+```bash
+npx astro add fulldev-ui
+```
+
+### Manual setup
+
+Run the following command to add fulldev-ui to your dependencies.
+
+```bash
+npm i fulldev-ui
+```
+
+Add the integration to your `astro.config.ts` file.
+
+```ts
+// astro.config.ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+export default defineConfig({
+  integrations: [fulldev()],
+})
+```
+
+## Create new project
+
+Run the following command to setup a new project from the [starter template](https://github.com/fulldotdev/starter).
+
+```bash
+npx astro create --template fulldev-ui
+```

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

@@ -0,0 +1,33 @@
+---
+_layout: doc
+title: Layouts
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Layouts
+
+Layouts are astro components that can be used to set the default styles for a page. They are located in the **src/content/layouts** directory.
+
+## Creating a layout
+
+Beside the layouts that are included in the library you can also create your own by adding a new astro component to the **src/content/layouts** directory. You can also override the existing layouts, see the <Link href="/guides/overriding-components/">overriding components</Link> guide for more information.
+
+Currently there are 6 layouts included in the library:
+
+- `Layout`
+- `DocsLayout`
+- `PostLayout`
+- `ProductLayout`
+- `BlockLayout`
+- `ContactLayout`
+
+## Applying a layout
+
+To apply a preset to a page, you can add the `component` property to the frontmatter of a page.
+
+```md
+---
+component: DocsLayout
+---
+```

package/src/content/pages/index.mdx

@@ -1,62 +1,54 @@
 ---
-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: /og-image.png
 
 title: Home
 
-sections:
-  - component: Hero
+blocks:
+  - _block: Hero1
     badge:
-      text: We added layouts, now you can build entire sites
+      text: 'Introducing v0.6: layouts & pagebuilding'
       href: /overview/installation/
-    heading: The Astro UI library to build content sites
-    text: Make websites with prebuilt components, blocks and layouts
+    heading: Build complete websites with this Astro UI library
+    paragraph: 'Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.'
     buttons:
       - text: Get Started
-        href: /overview/installation/
+        href: /docs/
       - text: GitHub
         href: https://github.com/fulldotdev/ui
         icon: brand-github
-  - component: Article
-  - component: Content
-    color: brand
-    label: Blocks
+        target: _blank
+
+  - _block: Feature1
+    tagline: 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: block-code.png
+    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
-    text: 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
+    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
     buttons:
-      - href: /base/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
-    text: 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/products/product.md

@@ -0,0 +1,20 @@
+---
+title: Product
+categories: 
+  - categories/category
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+price: 90
+images: 
+  - placeholder.webp
+variants:
+  kleur: 
+    - wit
+    - zwart
+  maat: 
+    - S
+    - M
+    - L
+---
+
+
+  

package/src/content/pages/showcase/anti-slip-profiles.md

@@ -1,5 +1,5 @@
 ---
-heading: Anti Slip Profiles
+title: Anti Slip Profiles
 image: 'anti-slip-profiles.webp'
-href: 'https://antislipprofiles.com'
+slug: 'https://antislipprofiles.com'
 ---

package/src/content/pages/showcase/fulldev-ui.md

@@ -1,5 +1,5 @@
 ---
-heading: Fulldev UI
+title: Fulldev UI
 image: fulldev-ui.webp
 href: 'https://ui.ull.dev'
 ---

package/src/content/pages/showcase/lavis-detailing.md

@@ -1,5 +1,5 @@
 ---
-heading: Lavis Detailing
+title: Lavis Detailing
 image: lavis-detailing.webp
 href: 'https://lavisdetailing.nl'
 ---

package/src/content/pages/showcase/leren-trainingsacteren.md

@@ -1,5 +1,5 @@
 ---
-heading: Leren Trainingsacteren
+title: Leren Trainingsacteren
 image: leren-trainingsacteren.webp
 href: 'https://lerentrainingsacteren.nl'
 ---

package/src/content/pages/showcase/miele-witgoedcenter-amsterdam.md

@@ -1,5 +1,5 @@
 ---
-heading: Miele Witgoedcenter Amsterdam
+title: Miele Witgoedcenter Amsterdam
 image: miele-witgoedcenter-amsterdam.webp
 href: 'https://witgoedcenteramsterdam.nl'
 ---

package/src/content/pages/showcase/sloepverhuur-bolsward.md

@@ -1,5 +1,5 @@
 ---
-heading: Sloepverhuur Bolsward
+title: Sloepverhuur Bolsward
 image: sloepverhuur-bolsward.webp
 href: 'https://sloepverhuurbolsward.nl'
 ---

package/src/content/pages/showcase/stark-vulcanising-products.md

@@ -1,5 +1,5 @@
 ---
-heading: Stark Vulcanising Products
+title: Stark Vulcanising Products
 image: stark-vulcanising-products.webp
 href: '#'
 ---

package/src/content/pages/showcase/the-gym-haren.md

@@ -1,5 +1,5 @@
 ---
-heading: The Gym Haren
+title: The Gym Haren
 image: the-gym-haren.webp
 href: 'https://thegymharen.nl'
 ---