fulldev-ui 0.4.29 → 0.5.0-beta.0

package/src/content/pages/overview/components.mdx

@@ -0,0 +1,70 @@
+---
+presets: [docs]
+title: Components
+---
+
+# Components
+
+Fulldev UI offers a collection of components that are styled with regular CSS, have cascading styles, and are easy to customize.
+
+## Usage
+
+To use a component, you need to import it from the `fulldev-ui` package.
+
+```astro
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button text="Click me" />
+```
+
+```astro
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+---
+
+<Hero text="Props here" />
+```
+
+```astro
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+---
+
+<Layout>
+  <Hero />
+</Layout>
+```
+
+## Slots
+
+Even though we recommend using props to pass content into components, you can also use slots to inject content into a component.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+{/* Slots example */}
+<Button>Click me</Button>
+
+{/* Props example */}
+<Button text="Click me" />
+```
+
+## Rendering
+
+If no content passed to a component, it will NOT render anything. unless you pass an `if` prop.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+{/* This will not render anything */}
+<Button />
+
+{/* This will render a button */}
+<Button if={true} />

package/src/content/pages/overview/content-layer.mdx

@@ -0,0 +1,128 @@
+---
+presets: [docs]
+title: Content Layer
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Content Layer
+
+We utilize <Link href="https://docs.astro.build/docs/guides/content-collections/">Astro's Content Layer</Link> to create entire websites using just content files and our components.
+
+## Starter Template
+
+This is the recommended way to get started with our content layer integration. We've created a <Link href="https://github.com/fulldotdev/starter/tree/main">starter template</Link> with examples of everything you need to get started.
+
+## Manual Setup
+
+To get started with the manual setup, you need to install the <Link href="/overview/installation/">integration</Link> and add `injectRoutes: true` to your `astro.config.ts` file, see <Link href="#folder-structure">file structure</Link> below for more information on how this generates a site using content files.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      // other options
+      injectRoutes: true,
+    }),
+  ],
+})
+```
+
+## Folder Structure
+
+```
+.
+├── src/
+│   ├── blocks/
+│   │   └── ...
+│   ├── components/
+│   │   └── ...
+│   ├── layouts/
+│   │   └── ...
+│   ├── assets/
+│   │   └── ...
+│   ├── content/
+│   │   ├── pages/
+│   │   │   └── ...
+│   │   ├── records/
+│   │   │   └── ...
+│   │   │       └── ...
+│   │   ├── presets/
+│   │   │   ├── base.yml
+│   │   │   └── ...
+│   │   └── ...
+│   ├── css/
+│   │   ├── custom.css
+│   │   └── ...
+├── public/
+│   └── ...
+└──
+```
+
+- **/src/**: The main source directory containing all the core files of the project.
+  - **/blocks/**: Contains reusable block components that can be composed to build pages (Custom or overwrites existing fulldev-ui blocks)
+  - **/components/**: Houses individual UI components used throughout the project (Custom or overwrites existing fulldev-ui components)
+  - **/layouts/**: Contains layout components used to structure pages (Custom or overwrites existing fulldev-ui layouts)
+  - **/assets/**: Contains assets like images, fonts, etc.
+  - **/content/**: Stores content-related files:
+    - **pages/**: Contains markdown or MDX files for individual pages.
+    - **records/**: Contains markdown or MDX files for content collections. Nested in directories by collection name.
+    - **/presets/**: Includes configuration files for various settings like the sidebar.
+  - **/css/**: Contains global CSS files and styles.
+
+### File Structure
+
+Each file has a few frontmatter objects that are important to know about. Seo has priority over title and description, however title and description is used in multiple places like a card.
+
+```md
+---
+seo:
+  title: Page Title
+  description: This is my page description
+  image: /image.jpg # Open Graph Image
+
+title: Page Title
+description: This is my page description
+---
+```
+
+For all objects avaliable in the Content Layer, see the <Link href="/schemas/page/">schemas</Link>.
+
+### Image Alt collection
+
+To create yml records for images, you can simply add `generateImageEntries: true` to the integration setup. This will generate a yml file in the **src/assets/** directory with the image alt text pre set to the unslugged filename which can be customized. If turned on the Image component will automatically use these records for the alt text of local images.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      // other options
+      generateImageEntries: true,
+    }),
+  ],
+})
+```
+
+## i18n
+
+Getting started with i18n is easy, you can easily add additional languages by creating a new folder in the **content/pages** directory and adding your content files in the new language.
+
+```
+.
+├── src/
+│   ├── content/
+│   │   ├── pages/
+│   │   │   ├── index.md
+│   │   │   ├── nl/
+│   │   │   │   └── index.md
+│   │   │   └── de/
+│   │   │   │   └── index.md
+```

package/src/content/pages/overview/{theming.mdx → customization.mdx}

@@ -1,23 +1,23 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Customization
 ---
 
 import Link from 'fulldev-ui/components/Link.astro'
 
-# Theming
+# Customization
 
 ## Colors
 
-The color theme is inspired by / compatible with <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
+The color theme is inspired by and compatible with <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
 
 ### Automatic setup
 
-With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the <Link href="/overview/integration">integration page</Link> for details.
+With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the <Link href="/overview/installation/">installation page</Link> to get started with the integration.
 
 ### Manual setup
 
-You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explenation see <Link href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">this page</Link>.
+You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explanation see <Link href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">this page</Link>.
 
 ```css
 :root,

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

@@ -1,6 +1,6 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Frameworks
 ---
 
 # Frameworks
@@ -22,8 +22,8 @@ This means you can apply Fulldev UI styles to any framework component as follows
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<a class="button variant-primary contrast radius-auto"> Button </a>
-<Button contrast> Button </Button>
+<a class="button variant-primary contrast">Button</a>
+<Button contrast>Button</Button>
 ```
 
 ## CSS frameworks

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

@@ -1,13 +1,13 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Installation
 ---
 
 import Link from 'fulldev-ui/components/Link.astro'
 
 # Installation
 
-Install fulldev-ui with your favorite package manager and you are ready to go. To get started with the integration see the <Link href="/overview/integration">integration page.</Link>
+Install fulldev-ui with your favorite package manager and you are ready to go.
 
 ```bash
 pnpm i fulldev-ui
@@ -18,3 +18,37 @@ yarn add fulldev-ui
 # or
 npm i fulldev-ui
 ```
+
+## Integration
+
+To install the integration, import it in your `astro.config.ts` file.
+You can optionally add a custom css file and define custom colors and other theming options, see the <Link href="/overview/customization/">customization documentation</Link> for more information.
+
+To get started with the content layer, see the <Link href="/overview/content-layer/#manual-setup">content layer documentation</Link>.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      css: '/src/css/custom.css',
+      colors: {
+        theme: 'dark',
+        dark: {
+          background: '#111110',
+          base: '#6F6D66',
+          brand: '#F50',
+        },
+        light: {
+          background: '#EEEEEC',
+          base: '#6F6D66',
+          brand: '#F50',
+        },
+      },
+    }),
+  ],
+})
+```

package/src/content/pages/overview/introduction.mdx

@@ -1,6 +1,6 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Introduction
 ---
 
 # Introduction
@@ -18,3 +18,7 @@ Want to use Tailwind, or something else? You can overwrite all styles. Need an i
 ##### Automated colors, spacing and sizes
 
 Everything is carefully designed to be fully responsive. Component adapt to their environment, like a Heading being different in a Section than in a Card. You can also customize via simple props.
+
+##### Content layer
+
+Build entire websites using just content files like Markdown using our components, blocks and layouts.

package/src/content/pages/schemas/page.mdx

@@ -0,0 +1,11 @@
+---
+presets: [docs]
+
+title: page
+---
+
+# page-schema
+
+Objects in the page schema are used to define the structure of a page. They are used to define the information, content and components that are used to render the page.
+
+import { Code } from 'astro:components'

package/src/content/pages/schemas/preset.mdx

@@ -0,0 +1,9 @@
+---
+presets: [docs]
+
+title: preset
+---
+
+# preset-schema
+
+import { Code } from 'astro:components'

package/src/content/pages/showcase/anti-slip-profiles.md

@@ -0,0 +1,5 @@
+---
+heading: Anti Slip Profiles
+image: 'anti-slip-profiles.webp'
+href: 'https://antislipprofiles.com'
+---

package/src/content/pages/showcase/fulldev-ui.md

@@ -0,0 +1,5 @@
+---
+heading: Fulldev UI
+image: fulldev-ui.webp
+href: 'https://ui.ull.dev'
+---

package/src/content/pages/showcase/lavis-detailing.md

@@ -0,0 +1,5 @@
+---
+heading: Lavis Detailing
+image: lavis-detailing.webp
+href: 'https://lavisdetailing.nl'
+---

package/src/content/pages/showcase/leren-trainingsacteren.md

@@ -0,0 +1,5 @@
+---
+heading: Leren Trainingsacteren
+image: leren-trainingsacteren.webp
+href: 'https://lerentrainingsacteren.nl'
+---

package/src/content/pages/showcase/miele-witgoedcenter-amsterdam.md

@@ -0,0 +1,5 @@
+---
+heading: Miele Witgoedcenter Amsterdam
+image: miele-witgoedcenter-amsterdam.webp
+href: 'https://witgoedcenteramsterdam.nl'
+---

package/src/content/{records/record.yml → pages/showcase/record.md}

@@ -1 +1,3 @@
+---
 title: Test
+---

package/src/content/pages/showcase/sloepverhuur-bolsward.md

@@ -0,0 +1,5 @@
+---
+heading: Sloepverhuur Bolsward
+image: sloepverhuur-bolsward.webp
+href: 'https://sloepverhuurbolsward.nl'
+---

package/src/content/pages/showcase/stark-vulcanising-products.md

@@ -0,0 +1,5 @@
+---
+heading: Stark Vulcanising Products
+image: stark-vulcanising-products.webp
+href: '#'
+---

package/src/content/pages/showcase/the-gym-haren.md

@@ -0,0 +1,5 @@
+---
+heading: The Gym Haren
+image: the-gym-haren.webp
+href: 'https://thegymharen.nl'
+---

package/src/content/pages/showcase/van-dillen-antieke-bouwmaterialen.md

@@ -0,0 +1,5 @@
+---
+heading: Van Dillen Antieke Bouwmaterialen
+image: van-dillen-antieke-bouwmaterialen.webp
+href: 'https://vdabouwmaterialen.nl'
+---

package/src/content/pages/showcase.mdx

@@ -1,40 +1,15 @@
 ---
-showcase:
-  # Add your project here below 👇
-
-  - heading: Van Dillen Antieke Bouwmaterialen
-    image: /showcase/van-dillen-antieke-bouwmaterialen.webp
-    href: 'https://vdabouwmaterialen.nl'
-  - heading: Anti Slip Profiles
-    image: /showcase/anti-slip-profiles.webp
-    href: 'https://antislipprofiles.com'
-  - heading: Fulldev UI
-    image: /showcase/fulldev-ui.webp
-    href: 'https://ui.full.dev'
-  - heading: The Gym Haren
-    image: /showcase/the-gym-haren.webp
-    href: 'https://thegymharen.nl'
-  - heading: Lavis Detailing
-    image: /showcase/lavis-detailing.webp
-    href: 'https://lavisdetailing.nl'
-  - heading: Leren Trainingsacteren
-    image: /showcase/leren-trainingsacteren.webp
-    href: 'https://lerentrainingsacteren.nl'
-  - heading: Miele Witgoedcenter Amsterdam
-    image: /showcase/miele-witgoedcenter-amsterdam.webp
-    href: 'https://witgoedcenteramsterdam.nl'
-  - heading: Sloepverhuur Bolsward
-    image: /showcase/sloepverhuur-bolsward.webp
-    href: 'https://sloepverhuurbolsward.nl'
-  - heading: Stark Vulcanising Products
-    image: /showcase/stark-vulcanising-products.webp
-
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Showcase
 ---
 
-import Masonry from 'fulldev-ui/components/Masonry.astro'
 import Card from 'fulldev-ui/components/Card.astro'
+import Cards from 'fulldev-ui/components/Cards.astro'
+import { getCollection } from 'astro:content'
+
+export const projects = (
+  await getCollection('pages', ({ slug }) => slug.startsWith('showcase'))
+).map((p) => p.data)
 
 # Showcase
 
@@ -43,20 +18,15 @@ Projects that are built with Fulldev UI.
 <Card
   color="brand"
   size="sm"
-  frame="panel"
   style={{ marginTop: 'var(--space-6)', marginBottom: 'var(--space-7)' }}
   heading="Your project in this showcase?"
-  description="Add your project to the showcase in 1 minute."
+  text="Add your project to the showcase in 1 minute."
+  panel
   button={{
     text: 'Add your project',
-    variant: 'secondary',
     href: 'https://github.com/fulldotdev/ui/blob/main/CONTRIBUTING.md#showcase',
     target: '_blank',
   }}
 />
 
-<Masonry>
-  {frontmatter.showcase.map((showcase) => (
-    <Card frame="panel" position="inset" {...showcase} target="_blank" />
-  ))}
-</Masonry>
+<Cards structure="masonry" position="inset" panel cards={projects} />

package/src/content/pages/typography/_tagline.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Tagline
 ---

package/src/content/pages/typography/heading.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Heading
 ---

package/src/content/pages/typography/label.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Label
 ---

package/src/content/pages/typography/link.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Link
 ---
@@ -38,17 +37,6 @@ import Link from 'fulldev-ui/components/Link.astro'
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link href="/base/link" underline="auto">Link</Link>
-<Link href="/base/link" underline="always">Link</Link>
-<Link href="/base/link" underline="hover">Link</Link>
-<Link href="/base/link" underline="none">Link</Link>
-```
-
-```astro live
----
-import Link from 'fulldev-ui/components/Link.astro'
----
-
 <Link href="#">Link</Link>
 <Link href="#" contrast>Link</Link>
 ```

package/src/content/pages/typography/list.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: List
 ---

package/src/content/pages/typography/text.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Text
 ---

package/src/content/presets/base.yml

@@ -0,0 +1,70 @@
+seo:
+  image: /images/og-image.png
+
+code:
+  head: |
+    <script is:inline>
+      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+      posthog.init('phc_mVacbe8Xydu0UZlh4bNw5EGisvzyRcpqXEEuEEp5lOY',{api_host:'https://eu.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
+        })
+    </script>
+sidebar: true
+toc: false
+themeselect: true
+
+header:
+  logo: Fulldev UI
+  buttons:
+    - text: Docs
+      href: /overview/introduction
+    - text: Components
+      href: /typography/heading
+    - text: Blocks
+      href: /blocks/banner
+    - showcase
+    - href: https://github.com/fulldotdev/ui
+      target: _blank
+      icon: brand-github
+      variant: secondary
+    - href: https://discord.gg/vXZqMbadm8
+      target: _blank
+      icon: brand-discord
+      variant: secondary
+# footer:
+#   logo: Fulldev UI
+#   text: The Astro UI library to build content sites. Make websites with prebuilt components, blocks and layouts.
+#   columns:
+#     - heading: Pages
+#       buttons:
+#         - text: Docs
+#           href: /overview/introduction
+#         - text: Components
+#           href: /typography/heading
+#         - blocks
+#         - showcase
+#   socials:
+#     - https://www.linkedin.com/in/silveltman/
+#     - https://x.com/silveltm
+#     - https://github.com/fulldotdev/ui
+#   channels:
+#     - heading: Phone
+#       text: 123-456-7890
+#       icon: phone
+#       href: tel:123-456-7890
+#     - heading: Email
+#       text: contact@example.com
+#       icon: mail
+#       href: mailto:contact@example.com
+#     - heading: Address
+#       text: 1234 Main St, Springfield, IL 62701
+#       icon: map-pin
+#   hours:
+#     heading: Openingstijden
+#     days:
+#       ma.: 09:00 - 17:00
+#       di.: 09:00 - 17:00
+#       wo.: 09:00 - 17:00
+#       do.: 09:00 - 17:00
+#       vr.: 09:00 - 17:00
+#       za.: 09:00 - 17:00
+#       zo.: 09:00 - 17:00

package/src/content/presets/blocks.yml

@@ -0,0 +1,4 @@
+component: BlockLayout
+
+navigation:
+  toc: false