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

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

@@ -1,15 +1,14 @@
 ---
-presets: [docs]
+_block: Content7
 title: Customization
+description: Customize styles and components.
 ---
 
-# Customization
+## Overriding styles
 
-Customize styles and components.
+While fulldev-ui outputs 100% vanilla CSS, it is also fully compatible with [TailwindCSS](https://tailwindcss.com/) and [Shadcn/ui](https://ui.shadcn.com/).
 
-## 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/).
+### Using CSS variables
 
 ###### Default colors for backgrounds and text
 
@@ -77,7 +76,7 @@ While outputting 100% vanilla CSS, the underlying theming variables are based on
 --radius: 0.5rem;
 ```
 
-### Dark mode
+#### Dark mode
 
 Dark mode colors can be customized by adding them within the `.dark` class:
 
@@ -91,17 +90,15 @@ Dark mode colors can be customized by adding them within the `.dark` class:
 }
 ```
 
-## Overwriting styles
+### Using vanilla CSS
 
 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
+- `<Heading muted/>` adds `.muted`
 
-Write your own CSS wihtin an Astro component, or anywhere else in your project.
+You can then simply override the styles in your own CSS file like this:
 
 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.
 
@@ -113,22 +110,21 @@ import Button from 'fulldev-ui/components/Button.astro'
 <Button>Button</Button>
 <Button variant="secondary">Secondary</Button>
 
-<style>
+<style is:global>
   .button {
     border-radius: 999px;
 
     &.variant-secondary {
-      border: 1px solid rgba(0, 0, 0, 0.3);
+      border: 1px solid hsl(var(--primary));
+      background-color: transparent;
     }
   }
 </style>
 ```
 
-### Using Tailwind
-
-Using Tailwind is **completely optional**, but since all styles match Tailwind's utility values, they work seamlessly together.
+### Using Tailwind classes
 
-Tailwind is pre-installed, so your can use either classes or the `@apply` directive out of the box.
+Tailwind is pre-installed. You don't have to use it, but you can.
 
 ```astro live
 ---
@@ -136,16 +132,52 @@ import Button from 'fulldev-ui/components/Button.astro'
 ---
 
 <Button class="rounded-full">Button</Button>
+<Button variant="secondary" class="border border-primary bg-transparent">
+  Secondary
+</Button>
+```
+
+### Using Tailwind @apply
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button>Button</Button>
+<Button variant="secondary"> Secondary </Button>
 
 <style>
   .button {
     @apply rounded-full;
+
+    &.variant-secondary {
+      @apply border border-primary bg-transparent;
+    }
   }
 </style>
 ```
 
-## Customizing components
+## Overriding components
+
+All components can be overridden by defining a new path in the integration:
+
+```ts
+// astro.config.ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+export default defineConfig({
+  integrations: [
+    fulldev({
+      override: {
+        Button: 'src/components/Button.astro',
+      },
+    }),
+  ],
+})
+```
 
-Components can be copied from the repository and customized, without breaking imports.
+Everywhere where the `Button` component is imported, the new component will be used instead.
 
-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.
+This not only works for .astro files, but for all files in the entire library. Please check the [repository](https://github.com/fulldotdev/ui) to see what you can override.

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

@@ -1,18 +1,9 @@
 ---
-presets: [docs]
-title: Frameworks
+_block: Content7
+title: Integrating frameworks
+description: Compatible with all JS and CSS 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.
@@ -27,3 +18,13 @@ import Button from 'fulldev-ui/components/Button.astro'
 <button class="button size-md variant-primary">Button</button>
 <Button>Button</Button>
 ```
+
+## 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.
+
+## TailwindCSS
+
+TailwindCSS comes pre-installed. You don't have to use it, but you can if you want to.

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

@@ -1,23 +1,21 @@
 ---
-presets: [docs]
+_block: Content7
 title: Introduction
+description: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.
 ---
 
-# Introduction
-
-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
+## Some features
 
-- Built entirely with `.astro` components
+- 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
+- Layouts included, like Docs, Post and Product
 - Automatically generated pages
 - And more...

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

@@ -1,14 +1,11 @@
 ---
-presets: [docs]
+_block: Content7
 title: Installation
+description: How to install dependencies and setup the integration.
 ---
 
 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).
@@ -23,10 +20,16 @@ npx astro add fulldev-ui
 
 ### Manual setup
 
-Run the following command to add fulldev-ui to your dependencies.
+Run any of the following commands to add fulldev-ui to your dependencies.
 
 ```bash
 npm i fulldev-ui
+# or
+pnpm i fulldev-ui
+# or
+yarn add fulldev-ui
+# or
+bun add fulldev-ui
 ```
 
 Add the integration to your `astro.config.ts` file.
@@ -41,7 +44,7 @@ export default defineConfig({
 })
 ```
 
-## Create new project
+## Create a new project
 
 Run the following command to setup a new project from the [starter template](https://github.com/fulldotdev/starter).
 

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

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Doc
+description: For documentation pages, just like this one.
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please try it in your own project for now.

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

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Page
+description: For marketing pages, just like the home page.
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please try it in your own project for now.

package/src/content/pages/docs/{generating-pages.mdx → pages.mdx}

@@ -1,6 +1,7 @@
 ---
-presets: [docs]
+_block: Content7
 title: Generating Pages
+description: Go a step further than just using components.
 ---
 
 import Link from 'fulldev-ui/components/Link.astro'

package/src/content/pages/docs/{components → structures}/_card.mdx

@@ -1,16 +1,15 @@
 ---
-presets: [docs]
-
+_block: Content7
 title: Card
 ---
 
 # Card
 
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
-import Card from 'fulldev-ui/components/Card.astro'
+import Card from 'fulldev-ui/structures/Card.astro'
 ---
 
 <Card
@@ -21,13 +20,13 @@ import Card from 'fulldev-ui/components/Card.astro'
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 
 ```astro live
 ---
-import Card from 'fulldev-ui/components/Card.astro'
+import Card from 'fulldev-ui/structures/Card.astro'
 ---
 
 <Card
@@ -46,7 +45,7 @@ import Card from 'fulldev-ui/components/Card.astro'
 
 ```astro live
 ---
-import Card from 'fulldev-ui/components/Card.astro'
+import Card from 'fulldev-ui/structures/Card.astro'
 ---
 
 <Card
@@ -70,7 +69,7 @@ import Card from 'fulldev-ui/components/Card.astro'
 
 ```astro live
 ---
-import Card from 'fulldev-ui/components/Card.astro'
+import Card from 'fulldev-ui/structures/Card.astro'
 ---
 
 <Card

package/src/content/pages/docs/{components → structures}/_dialog.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_block: Content7
 title: Dialog
 ---
 

package/src/content/pages/docs/{components → structures}/_drawer.mdx

@@ -1,13 +1,12 @@
 ---
-presets: [docs]
-
+_block: Content7
 title: Drawer
 ---
 
 ```astro live
 ---
-import Drawer from 'fulldev-ui/components/Drawer.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
+import Drawer from 'fulldev-ui/structures/Drawer.astro'
 ---
 
 <Drawer label="Open Drawer">

package/src/content/pages/docs/structures/card.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Card
+description: A box with a border, padding and rounded corners
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/{components → structures}/code.mdx

@@ -1,15 +1,11 @@
 ---
-presets: [docs]
-
+_block: Content7
 title: Code
+description: Enhanced code component with live preview.
 ---
 
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-import Code from 'fulldev-ui/components/Code.astro'
-
-# Code
-
-Enhanced code component with live preview.
+import Props from 'fulldev-ui/components/docs/Props.astro'
+import Code from 'fulldev-ui/structures/Code.astro'
 
 ```astro live
 <h1>I'm a live preview</h1>
@@ -23,7 +19,7 @@ The following code will translate to the example at the top of this page:
 
 ```astro
 ---
-import Code from 'fulldev-ui/components/Code.astro'
+import Code from 'fulldev-ui/structures/Code.astro'
 ---
 
 <Code code={`<h1>I'm a live preview</h1>`} />

package/src/content/pages/docs/structures/container.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Container
+description: Sets a max-width, padding and centers the content
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/drawer.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Drawer
+description: A panel that slides out from the side of the screen
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the Header blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/group.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Group
+description: Group buttons and similar components
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/layout.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Container
+description: Sets a head, body and some base styles
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the layouts for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/masonry.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Masonry
+description: Places items like cards in a masonry layout
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/matrix.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Matrix
+description: Places items like cards in a grid
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/panel.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Panel
+description: A box with a border, padding and rounded corners used for sections
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/{components → structures}/prose.mdx

@@ -1,18 +1,14 @@
 ---
-presets: [docs]
-
+_block: Content7
 title: Prose
+description: Applies styling to child components
 ---
 
-# Prose
-
-<aside>This component is experimental and likely to change</aside>
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
-import Prose from 'fulldev-ui/components/Prose.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 ---
 
 <Prose>

package/src/content/pages/docs/structures/section.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Section
+description: Sets vertical padding and some base styles
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/stack.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Stack
+description: Places items like cards in a horizontal or vertical stack
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/writeup.mdx

@@ -0,0 +1,15 @@
+---
+_block: Content7
+title: Writeup
+description: Applies styling to child components, similar to Prose
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

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

@@ -0,0 +1,7 @@
+---
+_block: Content7
+title: Using Structures
+description: Build consistent blocks and layouts with structures.
+---
+
+Please look into the the blocks and layouts in the Gtihub repo to see how they are used.