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

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,
+  }),
+}
+```

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

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Card
 ---
 
@@ -15,7 +14,7 @@ import Card from 'fulldev-ui/components/Card.astro'
 
 <Card
   heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 ```
 
@@ -74,13 +73,11 @@ import Card from 'fulldev-ui/components/Card.astro'
 ---
 
 <Card
-  color="base"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />
 
 <Card
-  color="brand"
   heading="Lorem ipsum dolor"
   text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 />

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

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Dialog
 ---
 

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

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Drawer
 ---
 

package/src/content/pages/{base → docs/components}/_localeswitcher.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: LocaleSwitcher
 ---
 

package/src/content/pages/{base → docs/components}/_switch.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Switch
 ---
 
@@ -27,6 +26,6 @@ import Switch from 'fulldev-ui/components/Switch.astro'
 import Switch from 'fulldev-ui/components/Switch.astro'
 ---
 
-<Switch color="base" trueLabel="On" falseLabel="Off" />
-<Switch color="brand" trueLabel="On" falseLabel="Off" />
+<Switch trueLabel="On" falseLabel="Off" />
+<Switch trueLabel="On" falseLabel="Off" />
 ```

package/src/content/pages/{typography → docs/components}/_tagline.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Tagline
 ---
 
@@ -19,8 +18,8 @@ import Tagline from 'fulldev-ui/components/Tagline.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 ---
 
-<Tagline color="base">The quick brown fox jumps</Tagline>
-<Tagline color="brand">The quick brown fox jumps</Tagline>
+<Tagline>The quick brown fox jumps</Tagline>
+<Tagline>The quick brown fox jumps</Tagline>
 ```
 
 Set to `true` by default on Headings, which you can override by setting it to `false`.

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

@@ -0,0 +1,30 @@
+---
+_layout: doc
+title: Toggle
+---
+
+# Toggle
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle text="Click me" icon="click" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle icon={'code'} text="Auto save" toggled={true} />
+```

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

@@ -0,0 +1,34 @@
+---
+_layout: doc
+title: Avatar
+---
+
+# Avatar
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+---
+
+<Avatar id="avatar-1.jpeg" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+---
+
+<Avatar id="avatar-1.jpeg" size="sm" />
+<Avatar id="avatar-1.jpeg" size="md" />
+<Avatar id="avatar-1.jpeg" size="lg" />
+```

package/src/content/pages/{base → docs/components}/badge.mdx

@@ -1,6 +1,5 @@
 ---
-presets: [docs]
-
+_layout: doc
 title: Badge
 ---
 
@@ -22,38 +21,57 @@ import Badge from 'fulldev-ui/components/Badge.astro'
 
 ## Examples
 
+### `variant`
+
 ```astro live
 ---
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge size="sm">Badge</Badge>
-<Badge size="md">Badge</Badge>
-<Badge size="lg">Badge</Badge>
+<Badge variant="primary">Primary</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="outline">Outline</Badge>
 ```
 
+### `size`
+
 ```astro live
 ---
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge color="base">Badge</Badge>
-<Badge color="brand">Badge</Badge>
+<Badge size="sm">Small</Badge>
+<Badge size="md">Medium</Badge>
+<Badge size="lg">Large</Badge>
 ```
 
+### `icon`
+
 ```astro live
 ---
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge>Badge</Badge>
-<Badge contrast>Badge</Badge>
+<Badge icon="circle" text="Badge" />
+<Badge icon="circle" />
 ```
 
+### `href`
+
 ```astro live
 ---
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge icon="circle" text="Badge" />
+<Badge href="#">Link</Badge>
+```
+
+### `text`
+
+```astro live
+---
+import Badge from 'fulldev-ui/components/Badge.astro'
+---
+
+<Badge text="Badge" />
 ```

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

@@ -0,0 +1,46 @@
+---
+_layout: doc
+title: Badges
+---
+
+# Badges
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Badges from 'fulldev-ui/components/Badges.astro'
+---
+
+<Badges badges={[{ text: 'First' }, { text: 'Second' }]} />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Badges from 'fulldev-ui/components/Badges.astro'
+---
+
+<Badges variant="primary" badges={[{ text: 'First' }, { text: 'Second' }]} />
+<Badges variant="secondary" badges={[{ text: 'First' }, { text: 'Second' }]} />
+<Badges variant="outline" badges={[{ text: 'First' }, { text: 'Second' }]} />
+```
+
+### `size`
+
+```astro live
+---
+import Badges from 'fulldev-ui/components/Badges.astro'
+---
+
+<Badges size="sm" badges={[{ text: 'First' }, { text: 'Second' }]} />
+<Badges size="md" badges={[{ text: 'First' }, { text: 'Second' }]} />
+<Badges size="lg" badges={[{ text: 'First' }, { text: 'Second' }]} />
+```

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

@@ -0,0 +1,78 @@
+---
+_layout: doc
+title: Button
+---
+
+# Button
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button>Button</Button>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+```
+
+### `size`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+```
+
+### `icon`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button icon="confetti" text="Button" />
+<Button icon="confetti" />
+```
+
+### `href`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button href="#">Link</Button>
+```
+
+### `text`
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button text="Button" />
+```