fulldev-ui 0.6.0-beta.7 → 0.6.0-beta.9

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

@@ -8,13 +8,14 @@ description: Everything you need to rapidly build content-driven websites. Compo
 
 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 @@
 ---
 _layout: doc
 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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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/layouts.mdx

@@ -1,33 +1,80 @@
 ---
 _layout: doc
-title: Layouts
+title: Using Layouts
+description: Ready to use layouts and page generation.
 ---
 
-import Link from 'fulldev-ui/components/Link.astro'
+## Regular usage
 
-# Layouts
+```astro
+---
+import Page from 'fulldev-ui/layouts/Page.astro'
+---
 
-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.
+<Page
+  title="Your meta title"
+  description="Your meta description"
+  banner={{
+    text: 'This is a banner',
+  }}
+  header={{
+    logo: {
+      image: '/favicon/android-chrome-512x512.png',
+      text: 'Fulldev UI',
+    },
+    links: [{ text: 'Docs', href: '/docs/' }],
+    socials: [
+      'https://github.com/fulldotdev/ui',
+      'https://discord.gg/vXZqMbadm8',
+    ],
+  }}
+/>
+```
 
-## Creating a layout
+## Dynamic page generation
 
-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.
+To generate pages dynamically, you need to enable page generation in your `astro.config.ts` file.
 
-Currently there are 6 layouts included in the library:
+```ts
+// astro.config.ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
 
-- `Layout`
-- `DocsLayout`
-- `PostLayout`
-- `ProductLayout`
-- `BlockLayout`
-- `ContactLayout`
+export default defineConfig({
+  integrations: [
+    fulldev({
+      injectRoutes: true,
+    }),
+  ],
+})
+```
 
-## Applying a layout
+### Configuring collections
 
-To apply a preset to a page, you can add the `component` property to the frontmatter of a page.
+There are two types of collections:
 
-```md
----
-component: DocsLayout
----
+1. `pages`: Used for generating pages and/or cards.
+2. `layouts`: Default values that can be referenced by pages
+
+Create a content collections config file at `src/content/config.ts`, and add the following content:
+
+```ts
+// src/content/config.ts
+import { defineCollection } from 'astro:content'
+import { pageSchema } from 'fulldev-ui/schemas/page.ts'
+
+export const collections = {
+  pages: defineCollection({
+    type: 'content',
+    schema: pageSchema,
+  }),
+  layouts: defineCollection({
+    type: 'data',
+    schema: pageSchema,
+  }),
+}
 ```
+
+#### Pages
+
+Please reference `fulldev-ui/schemas/page.ts` for more information on the page schema.

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

@@ -1,6 +1,7 @@
 ---
 _layout: doc
 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

@@ -5,11 +5,11 @@ 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
@@ -20,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
@@ -45,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
@@ -69,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}/_drawer.mdx

@@ -5,8 +5,8 @@ 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 @@
+---
+_layout: doc
+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,14 +1,11 @@
 ---
 _layout: doc
 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>
@@ -22,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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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,17 +1,14 @@
 ---
 _layout: doc
 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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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 @@
+---
+_layout: doc
+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.

package/src/content/pages/index.mdx

@@ -2,11 +2,12 @@
 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
 
-blocks:
+sections:
   - _block: Hero1
     badge:
       text: 'Introducing v0.6: layouts & pagebuilding'
@@ -25,7 +26,8 @@ blocks:
     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/
         icon: layout
@@ -35,7 +37,8 @@ blocks:
     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
+    image:
+      src: /images/component-code.png
     buttons:
       - text: View components
         href: /components/badge/

package/src/content/pages/showcase.mdx

@@ -2,8 +2,7 @@
 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 = (
@@ -29,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%;
@@ -93,3 +56,7 @@
     color-scheme: dark;
   }
 }
+
+.astro-code {
+  @apply mt-4 rounded-md p-4 text-sm first:mt-0;
+}

package/src/integration/index.ts

@@ -70,7 +70,7 @@ export default function fulldevIntegration(
             sitemap(),
             robotsTxt(),
             liveCode({
-              layout: '/src/components/Code.astro',
+              layout: '/src/structures/Code.astro',
             }),
           ],
           vite: {