fulldev-ui 0.6.0-beta.6 → 0.6.0-beta.8

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: {
@@ -165,8 +165,6 @@ export default function fulldevIntegration(
           const libDir = path.join(__dirname, '../../cloudcannon.config.yml')
           const userDir = path.join(process.cwd(), 'cloudcannon.config.yml')
 
-          console.log({ libDir, userDir })
-
           const libConfig = yaml.load(
             fs.readFileSync(path.resolve(libDir), 'utf8')
           )

package/src/layouts/Block.astro

@@ -0,0 +1,81 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
+
+const { header, sidebar, render, title, description, footer } = Astro.props
+
+const { Content } = await render()
+---
+
+<Layout
+  class:list="block"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container
+    class:list="block-main"
+    as="main"
+  >
+    <Sidebar>
+      <Menus
+        size="sm"
+        menus={sidebar?.menus}
+      />
+    </Sidebar>
+    <Container class:list="block-container">
+      <Prose class:list="block-prose">
+        <Heading
+          size="4xl"
+          as="h1"
+          text={title}
+        />
+        <Paragraph
+          muted
+          text={description}
+        />
+        <Content />
+      </Prose>
+    </Container>
+  </Container>
+  <Footer {...footer} />
+</Layout>
+
+<style is:global>
+  @layer fulldev {
+    .block {
+      .block-main {
+        @apply flex w-full items-start justify-between !px-0;
+      }
+
+      .block-container {
+        max-width: calc(100% - var(--sidebar-width)) !important;
+      }
+
+      .sidebar {
+        @apply hidden lg:flex;
+      }
+
+      .block-prose {
+        @apply mx-auto max-w-none py-8;
+      }
+    }
+  }
+</style>

package/src/layouts/Category.astro

@@ -1,14 +1,14 @@
----
+<!-- ---
 import type { ComponentProps } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 import { getCollection } from 'astro:content'
 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 Layout from 'fulldev-ui/components/Layout.astro'
-import Prose from 'fulldev-ui/components/Prose.astro'
 import Select from 'fulldev-ui/components/Select.astro'
 import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import { getHref } from 'fulldev-ui/utils/getHref.ts'
 
 interface Props extends ComponentProps<typeof Layout>, PageSchema {
@@ -77,10 +77,10 @@ const sorts = [
   class:list="category"
   {...Astro.props}
 >
-  <!-- <Intro1
+  <Intro1
     heading={title}
     text={description}
-  /> -->
+  />
   <Carousel>
     {
       categories.map((category) => (
@@ -133,4 +133,4 @@ const sorts = [
       @apply text-sm text-muted-foreground;
     }
   }
-</style>
+</style> -->