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

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

@@ -1,6 +1,4 @@
 ---
-presets: [docs, blocks]
-
 title: Content
 ---
 
@@ -10,7 +8,6 @@ import Content from 'fulldev-ui/blocks/Content.astro'
 ---
 
 <Content
-  color="brand"
   label="Lorem ipsum"
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada."
@@ -25,7 +22,6 @@ import Content from 'fulldev-ui/blocks/Content.astro'
 ---
 
 <Content
-  color="brand"
   size="lg"
   label="Lorem ipsum"
   heading="Lorem ipsum dolor sit"
@@ -41,7 +37,6 @@ import Content from 'fulldev-ui/blocks/Content.astro'
 ---
 
 <Content
-  color="brand"
   size="sm"
   label="Lorem ipsum"
   heading="Lorem ipsum dolor sit"
@@ -77,7 +72,6 @@ import Content from 'fulldev-ui/blocks/Content.astro'
   text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada."
   buttons={[{ text: 'Lorem ipsum', href: '' }]}
   image="/images/placeholder-landscape.webp"
-  align="start"
   structure="column"
 />
 ```

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

@@ -1,6 +1,4 @@
 ---
-presets: [docs, blocks]
-
 title: CTA
 ---
 
@@ -47,7 +45,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
     { text: 'Lorem ipsum', href: '' },
   ]}
-  color="brand"
 />
 ```
 
@@ -64,7 +61,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '', contrast: true },
     { text: 'Lorem ipsum', href: '', contrast: true },
   ]}
-  theme="light"
 />
 ```
 
@@ -81,7 +77,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '', color: 'brand' },
     { text: 'Lorem ipsum', href: '', color: 'brand' },
   ]}
-  theme="light"
 />
 ```
 
@@ -98,8 +93,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
     { text: 'Lorem ipsum', href: '' },
   ]}
-  theme="light"
-  color="brand"
 />
 ```
 
@@ -145,7 +138,6 @@ import Cta from 'fulldev-ui/blocks/Cta.astro'
     { text: 'Lorem ipsum', href: '' },
   ]}
   structure="spread"
-  color="brand"
 />
 ```
 
@@ -162,8 +154,6 @@ 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,6 +1,4 @@
 ---
-presets: [docs, blocks]
-
 title: Features
 ---
 
@@ -10,7 +8,6 @@ import Features from 'fulldev-ui/blocks/Features.astro'
 ---
 
 <Features
-  color="brand"
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
   cards={[
@@ -42,7 +39,6 @@ import Features from 'fulldev-ui/blocks/Features.astro'
 ---
 
 <Features
-  color="brand"
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
   cards={[
@@ -71,7 +67,6 @@ import Features from 'fulldev-ui/blocks/Features.astro'
 ---
 
 <Features
-  color="brand"
   variant="primary"
   heading="Lorem ipsum dolor sit"
   text="Lorem ipsum dolor sit amet consectetur adipisicing elit."

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

@@ -1,6 +1,4 @@
 ---
-presets: [docs, blocks]
-
 title: Hero
 ---
 
@@ -91,9 +89,6 @@ import Hero from 'fulldev-ui/blocks/Hero.astro'
   ]}
   image="/images/placeholder-landscape-dark.png"
   position="background"
-  align="center"
-  theme="dark"
-  justify="center"
   style={{ minHeight: '100vh', justifyContent: 'center' }}
 />
 ```

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

@@ -1,6 +1,4 @@
 ---
-presets: [docs, blocks]
-
 title: Intro
 ---
 
@@ -26,7 +24,6 @@ import Intro from 'fulldev-ui/blocks/Intro.astro'
 
 <Intro
   heading="Lorem ipsum dolor sit amet"
-  align="center"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
 />
 ```
@@ -52,7 +49,6 @@ import Intro from 'fulldev-ui/blocks/Intro.astro'
 ---
 
 <Intro
-  color="brand"
   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."
   buttons={[
@@ -69,7 +65,6 @@ import Intro from 'fulldev-ui/blocks/Intro.astro'
 
 <Intro
   variant="primary"
-  color="brand"
   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."
   buttons={[

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

@@ -1,6 +1,4 @@
 ---
-presets: [docs, blocks]
-
 title: Posts
 ---
 

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

@@ -1,6 +1,4 @@
 ---
-presets: [docs, blocks]
-
 title: Reviews
 ---
 
@@ -161,7 +159,6 @@ import Reviews from 'fulldev-ui/blocks/Reviews.astro'
 
 <Reviews
   size="sm"
-  align="start"
   structure="carousel"
   heading="What Our Customers Say"
   text="Discover what our satisfied customers are saying about us."

package/src/content/pages/categories/category.md

@@ -0,0 +1,7 @@
+---
+title: Category
+description: Lorem ipsum dolor sit
+---
+
+
+  

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

@@ -0,0 +1,55 @@
+---
+_layout: doc
+title: Internationalization
+---
+
+# Internationalization (i18n)
+
+Getting started with i18n is easy, you can easily add additional languages by creating a new folder named after a language code in the **content/pages** directory and adding your content files in the new language.
+
+These pages are just as static as the others however you can merge them with the default language by adding the `i18n` key to the frontmatter.
+
+By merging pages you only need to specify the content that is different for the new language. Things like images do not need to be repeated in these new files. See example:
+
+## Example
+
+content/pages/index.md:
+
+```md
+---
+sections:
+  - component: Hero
+    image: /image.webp
+    heading: Page Title
+    text: This is my page description
+---
+```
+
+content/pages/nl/index.md:
+
+```md
+---
+i18n: index
+
+sections:
+  - component: Hero
+    heading: Page Title
+    text: This is my page description
+---
+```
+
+These return the same results
+
+## Project structure
+
+```bash
+.
+├── src/
+│   ├── content/
+│   │   ├── pages/
+│   │   │   ├── index.md
+│   │   │   ├── nl/
+│   │   │   │   └── index.md
+│   │   │   └── de/
+│   │   │   │   └── index.md
+```

package/src/content/pages/docs/_using-blocks.mdx

@@ -0,0 +1,33 @@
+---
+_layout: doc
+title: Using Blocks
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Using Blocks
+
+Blocks are astro components that can be used to create reusable content blocks. They are located in the **src/blocks** directory and you can use them by adding the `component` property to the frontmatter of a section in a page.
+
+There are plenty of prestyled blocks included in the library, see the <Link href="/blocks/banner/">blocks examples</Link> for more information.
+
+```yml
+---
+# Other options...
+
+sections:
+  - component: Hero # The block you want to use
+    heading: Page Title
+    text: This is my page description
+    buttons:
+      - text: Button
+        color: brand
+        href: /
+      - text: Button
+        href: /
+---
+```
+
+## Creating a block
+
+Beside the blocks 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 blocks, see the <Link href="/guides/overriding-components/">overriding components</Link> guide for more information.

package/src/content/pages/docs/_using-presets.mdx

@@ -0,0 +1,49 @@
+---
+_layout: doc
+title: Using Presets
+---
+
+# Using Presets
+
+Presets are configuration files that can be used to set the default values for a page. They are located in the **src/content/presets** directory and you can use them by adding the `preset` property to the frontmatter of a page or add a `basePreset` to the integration setup in the `astro.config.ts` file.
+
+Presets can be applied to pages in the frontmatter or as a base preset.
+
+## Creating a preset
+
+Beside the presets that are included in the library you can also create your own by adding a new yaml file to the **src/content/presets** directory. See the [presets collection](/content-collections/presets/) for more information on what properties are available.
+
+Currently there are 5 presets included in the library:
+
+- `base`
+- `docs`
+- `blocks`
+
+## Setting a preset
+
+To apply a preset to a page, you can add the `preset` property to the frontmatter of a page.
+
+```yml
+---
+presets: [base, docs]
+---
+```
+
+## Setting a base preset
+
+To apply a preset to every page, you can set a `basePreset` in the integration setup in the `astro.config.ts` file therefore the base preset will not have to be added to the frontmatter anymore.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      // other options
+      basePreset: 'base',
+    }),
+  ],
+})
+```

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

@@ -0,0 +1,33 @@
+---
+_layout: doc
+title: Blocks
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Blocks
+
+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/docs/collections/images.mdx

@@ -0,0 +1,102 @@
+---
+_layout: doc
+title: images
+---
+
+# images
+
+Adds type-safety and optimization for local images
+
+## Features
+
+- Type-safe image references
+- Integrates with Astro's `<Image />` component
+- Integrates even better with fulldev-ui's `<Image />` component
+- Get images using the `getEntry()` helper function
+- Define alt texts globally, so you don't have to repeat yourself
+
+## Adding images
+
+Image files added to the `src/images` directory will automatically be added to the images collection.
+
+## Global alt texts
+
+Alt texts can be defined globally in the same folder as where the images live. You create a `[IMAGE NAME].yml` in the same folder as the images.
+
+This way you can define alt texts once and they will be used everyhwere you use the image. An example of such a `yaml` file would be:
+
+```yaml
+alt: 'A placeholder landscape image'
+```
+
+## Using images
+
+### Automatic (recommended)
+
+Use fulldev-ui's included `<Image />` component to get the following benefits out of the box:
+
+- You only have to pass the image id
+- Automatic type-safety and warnings
+- Automatically uses global alt text
+- Automatically optimizes image file
+
+This is also the easiest way to use images:
+
+```astro
+---
+import Image from 'fulldev-ui/components/Image.astro'
+---
+
+<Image id="my-image.png" />
+```
+
+### Manual
+
+If you want more control over the image, you can use the `getEntry()` helper function to get an image.
+
+```astro
+---
+import { getEntry } from 'fulldev-ui/utils'
+
+const image = getEntry('my-image.png')
+---
+```
+
+It will return an image in the following format:
+
+```ts
+{
+  id: 'my-image.png',
+  src: '/src/images/my-image.png',
+  alt: 'Alt text provided via steps above',
+  width: 1930,
+  height: 1080,
+  format: 'png'
+}
+```
+
+You can pass these values directly into Astro's `<Image />` component to render the image.
+
+```astro
+---
+import { getEntry } from 'fulldev-ui/utils'
+
+const image = getEntry('my-image.png')
+---
+
+<Image {...image} />
+```
+
+But to get an optimized version, you should use an imported image instead:
+
+```astro
+---
+import { getEntry } from 'fulldev-ui/utils'
+
+const image = getEntry('my-image.png')
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
+const image = images[image.src]
+---
+
+<Image src={image()} alt={image.alt} />
+```

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

@@ -0,0 +1,119 @@
+---
+_layout: doc
+title: pages
+---
+
+# pages
+
+Used for generating pages and/or cards.
+
+## Features
+
+- Pages are automatically generated from `.md` and `.mdx` files in `src/content/pages`
+- References to other pages, and other collections
+- Setting a preset, which automatically gets merged with the current page
+- Type-safe frontmatter validation with helpful error messages
+
+## Frontmatter reference
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+<PropsTable schema="pageSchema" />
+
+### `presets`
+
+Type: Filepath of an entry in `src/content/presets`
+
+### `component`
+
+Type: Filename of a component in `src/layouts`
+
+### `theme`
+
+Type: `'light' | 'dark' | 'system' | undefined`
+
+### `lang`
+
+Type: `string` | undefined
+
+### `title`
+
+Type: `string` | undefined
+
+### `description`
+
+Type: `string` | undefined
+
+### `image`
+
+### `images`
+
+### `seo`
+
+## Example
+
+```md
+---
+presets: [post]
+component: PostLayout
+
+seo:
+  title: About us - Fulldev
+  description: Learn more about Fulldev
+
+title: About us
+
+sections:
+  - component: Hero
+    tagline: We are a team of passionate developers
+    heading: About us
+    description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    buttons:
+      - text: Get in touch
+        href: /contact
+---
+
+# Write your markdown here!
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+```
+
+## Disabling page generation
+
+### If no content is passed
+
+No page will be generated if no content is passed, meaning the page does not have body content or any of the following frontmatter keys:
+
+- `component`
+- `section`
+- `sections`
+
+### On a global level
+
+You can disable all automatic page generation by setting the `injectRoutes` option in 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({
+      injectRoutes: false,
+    }),
+  ],
+})
+```
+
+### On a per-page level
+
+You can disable page generation per page by setting the `inject` key to `false`.
+
+This makes sense for content you might only want to show as a card on another page, like reviews or the showcases on this website.
+
+```md
+---
+inject: false
+---
+```

package/src/content/pages/docs/collections/presets.mdx

@@ -0,0 +1,60 @@
+---
+_layout: doc
+title: presets
+---
+
+# presets
+
+Default values that can be referenced by pages
+
+## Features
+
+- Uses same schema as pages
+- Can be referenced by pages, to automatically merge values
+- Global preset can be set which will be automatically merged with all pages
+
+## Frontmatter reference
+
+Presets accept the exact same properties as the [pages collection](/docs/collections/pages/), except for the `presets` key, since this could potentially create a circular reference.
+
+## Configuring a base preset
+
+To configure a base preset, you can set the `basePreset` option in your `astro.config.ts` file. It accepts the filepath of a preset in `src/content/presets`.
+
+```ts
+// astro.config.ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+export default defineConfig({
+  integrations: [
+    fulldev({
+      basePreset: 'base',
+    }),
+  ],
+})
+```
+
+## Example
+
+```yml
+seo:
+  title: Default site title
+  description: Default site description
+  image: default-og-image.png
+
+header:
+  logo: logo.svg
+  links:
+    - docs
+    - about
+    - showcase
+    - text: Custom link text
+      href: /custom-link-href
+
+footer:
+  logo: logo.svg
+  socials:
+    - https://github.com/fulldotdev/ui
+    - https://discord.gg/vXZqMbadm8
+```

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

@@ -0,0 +1,42 @@
+---
+_layout: doc
+title: Collections
+---
+
+# Collections
+
+A general overview of how Astro's [content collections](https://docs.astro.build/en/guides/content-collections/) are used.
+
+## Types of content collections
+
+1. `pages`: Used for generating pages and/or cards.
+2. `presets`: Default values that can be referenced by pages
+3. `images`: Adds type-safety and optimization for local images
+
+## Setup collections
+
+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 imageLoader from 'fulldev-ui/loaders/imageLoader.ts'
+import imageSchema from 'fulldev-ui/schemas/imageSchema.ts'
+import pageSchema from 'fulldev-ui/schemas/pageSchema.ts'
+import presetSchema from 'fulldev-ui/schemas/presetSchema.ts'
+
+export const collections = {
+  pages: defineCollection({
+    type: 'content',
+    schema: pageSchema,
+  }),
+  presets: defineCollection({
+    type: 'data',
+    schema: presetSchema,
+  }),
+  images: defineCollection({
+    loader: imageLoader,
+    schema: imageSchema,
+  }),
+}
+```