fulldev-ui 0.5.0-beta.0 → 0.5.0-beta.10

package/src/components/experimental/Gallery.astro

@@ -1,180 +1,104 @@
 ---
-import Icon from 'fulldev-ui/components/Icon.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 
-const { images, direction } = Astro.props
+const { images } = Astro.props
 ---
 
 <script>
-  const carousel = document.querySelector('.gallery .large-carousel')
-  const icon = document.querySelector('.gallery .icon')
-  const smallImages = document.querySelectorAll('.gallery .small-image')
-
-  carousel &&
-    icon?.addEventListener('click', () => {
-      const carouselWidth = (carousel as HTMLElement).offsetWidth
-      const currentScroll = carousel.scrollLeft
-      const maxScroll = carousel.scrollWidth - carouselWidth
-
-      let scrollAmount = currentScroll + carouselWidth
-      if (scrollAmount > maxScroll) {
-        scrollAmount = 0 // Reset to beginning if we're at the end
-      }
-
-      carousel.scrollTo({
-        left: scrollAmount,
-        behavior: 'smooth',
-      })
-    })
-
-  carousel &&
-    smallImages?.forEach((image, i) => {
-      image.addEventListener('click', () => {
-        const imageWidth = (carousel as HTMLElement).offsetWidth
-        carousel.scrollTo({
-          left: i * imageWidth,
-          behavior: 'smooth',
+  const setupGallery = (document: Document) => {
+    const galleries = document.querySelectorAll('.gallery')
+
+    galleries.forEach((gallery) => {
+      const carousel = gallery.querySelector('.large-carousel')
+      const smallImages = gallery.querySelectorAll('.small-image')
+
+      carousel &&
+        smallImages?.forEach((image, i) => {
+          image.addEventListener('click', () => {
+            const largeImages = carousel.querySelectorAll('.large-image')
+            if (largeImages[i]) {
+              largeImages[i].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'start',
+              })
+            }
+          })
         })
-      })
     })
+  }
+
+  setupGallery(document)
+
+  document.addEventListener('astro:before-swap', (event) => {
+    setupGallery(event.newDocument)
+  })
 </script>
 
-<div
-  class:list={[
-    'full',
-    'gallery',
-    {
-      [`direction-${direction}`]: direction,
-    },
-  ]}
->
-  <div class="large-container">
-    <div class="large-carousel">
-      {
-        images?.map((image: any) => (
-          <Image
-            class="large-image"
-            src={image}
-          />
-        ))
-      }
-    </div>
+<Element class:list={['gallery']}>
+  <Element class="large-carousel">
     {
-      images?.length > 1 && (
-        <Icon
-          class="icon"
-          name="swipe-left"
+      images?.map((image: any) => (
+        <Image
+          class="large-image"
+          {...(typeof image === 'string' ? { src: image } : image)}
         />
-      )
+      ))
     }
-  </div>
-  <div class="small-carousel">
+  </Element>
+  <Element class="small-carousel">
     {
       images?.length > 1 &&
         images.map((image: any) => (
           <Image
             class="small-image"
-            src={image}
+            {...(typeof image === 'string' ? { src: image } : image)}
           />
         ))
     }
-  </div>
-</div>
+  </Element>
+</Element>
 
 <style is:global lang="scss">
   .gallery {
     display: flex;
     position: relative;
-    column-gap: var(--space-4);
-    row-gap: var(--space-1);
     flex-direction: column;
-
-    @media (min-width: 1024px) {
-      flex-direction: row-reverse;
-    }
-
-    .large-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      &:hover .icon {
-        opacity: 1;
-      }
-
-      .icon {
-        position: absolute;
-        right: var(--space-3);
-        opacity: 0.5;
-        animation: swipe-icon 1.6s ease-in-out infinite;
-        transition: opacity 0.2s ease-in-out;
-        font-size: calc(var(--text-2) * 1.7);
-
-        @media (min-width: 1024px) {
-          display: none;
-        }
-      }
-
-      @keyframes swipe-icon {
-        0%,
-        100% {
-          right: var(--space-3);
-        }
-        50% {
-          right: calc(var(--space-3) * 2);
-        }
-      }
-    }
+    gap: var(--space-1) var(--space-4);
 
     .small-carousel,
     .large-carousel {
-      --column-width: 100%;
       display: flex;
       position: relative;
-      align-items: flex-start;
+      align-items: center;
       gap: var(--space-4);
-
       box-sizing: border-box;
       padding-bottom: var(--space-4);
       width: 100%;
-      overflow-x: auto;
+      overflow: auto;
       scroll-behavior: smooth;
       scroll-snap-type: x mandatory;
 
-      > .root {
+      > .image {
         flex-grow: 0;
         flex-shrink: 0;
         width: var(--column-width);
         scroll-snap-align: center;
       }
+    }
 
-      &.position-inset {
-        margin-right: calc(var(--inner-x) * -1);
-        margin-left: calc(var(--inner-x) * -1);
-        padding-right: var(--inner-x);
-        padding-left: var(--inner-x);
-        width: calc(100% + var(--inner-x) * 2);
-      }
+    .large-carousel {
+      --column-width: 100%;
     }
 
     .small-carousel {
       --column-width: var(--space-7);
 
-      @media (min-width: 1024px) {
-        --column-width: 100%;
-
-        flex-direction: column;
-        width: 40%;
+      .image:hover {
+        opacity: 0.8;
+        cursor: pointer;
       }
     }
-
-    .small-image,
-    .large-image {
-    }
-
-    .small-image:hover {
-      opacity: 0.8;
-      cursor: pointer;
-    }
   }
 </style>

package/src/components/experimental/Prose.astro

@@ -151,6 +151,38 @@ const { as = 'div', ...rest } = Astro.props
       }
     }
 
+    ul,
+    ol {
+      display: flex;
+      flex-direction: column;
+      margin: var(--space-4) 0;
+      padding-left: var(--space-5);
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1.625;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    li {
+      align-items: center;
+      margin-bottom: var(--space-2);
+      max-width: calc(var(--space-4) * 44);
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1.625;
+    }
+
+    li:last-child {
+      margin-bottom: 0;
+    }
+
     p code {
       background-color: var(--base-12);
       padding: 0 var(--space-1);

package/src/content/pages/base/select.mdx

@@ -2,14 +2,6 @@
 presets: [docs]
 
 title: Select
-
-example:
-  label: Select
-  name: select
-  placeholder: Select an option
-  options:
-    - Option 1
-    - Option 2
 ---
 
 # Select

package/src/content/pages/base/textarea.mdx

@@ -2,11 +2,6 @@
 presets: [docs]
 
 title: Textarea
-
-example:
-  name: textarea
-  placeholder: Write a message..
-  label: Textarea
 ---
 
 # Textarea

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

@@ -13,8 +13,79 @@ import Product from 'fulldev-ui/blocks/Product.astro'
   heading="Basic Tee"
   price={48}
   rating={5}
-  image="/images/placeholder-landscape.webp"
-  buttons={[{ text: 'Add to cart' }]}
+  image="placeholder-landscape.webp"
+  form={{ submit: 'Add to cart' }}
+  description="Oversized white tee made of 100% cotton."
+  list={[
+    'Shortsleeve',
+    'Ribbed collar',
+    'Runs large',
+    'Unisex',
+    'Material: 100% cotton',
+    'Imported',
+  ]}
+/>
+```
+
+```astro live
+---
+import Product from 'fulldev-ui/blocks/Product.astro'
+---
+
+<Product
+  heading="Basic Tee"
+  price={48}
+  rating={5}
+  images={[
+    '/images/blocks/colleagues.png',
+    '/images/blocks/content.png',
+    '/images/blocks/cta.png',
+    '/images/blocks/features.png',
+    '/images/blocks/footer.png',
+    '/images/blocks/header.png',
+    '/images/blocks/hero.png',
+    '/images/blocks/intro.png',
+    '/images/blocks/posts.png',
+    '/images/blocks/prices.png',
+    '/images/blocks/reviews.png',
+  ]}
+  form={{ submit: 'Add to cart' }}
+  description="Oversized white tee made of 100% cotton."
+  list={[
+    'Shortsleeve',
+    'Ribbed collar',
+    'Runs large',
+    'Unisex',
+    'Material: 100% cotton',
+    'Imported',
+  ]}
+/>
+```
+
+```astro live
+---
+import Product from 'fulldev-ui/blocks/Product.astro'
+---
+
+<Product
+  heading="Basic Tee"
+  price={48}
+  rating={5}
+  images={[
+    '/images/blocks/colleagues.png',
+    '/images/blocks/content.png',
+    '/images/blocks/cta.png',
+    '/images/blocks/features.png',
+    '/images/blocks/footer.png',
+    '/images/blocks/header.png',
+    '/images/blocks/hero.png',
+    '/images/blocks/intro.png',
+    '/images/blocks/posts.png',
+    '/images/blocks/prices.png',
+    '/images/blocks/reviews.png',
+  ]}
+  gallery="vertical"
+  form={{ submit: 'Add to cart' }}
   description="Oversized white tee made of 100% cotton."
   list={[
     'Shortsleeve',

package/src/content/pages/index.mdx

@@ -1,8 +1,5 @@
 ---
 presets: [base]
-component: PageLayout
-sidebar: false
-toc: false
 
 seo:
   title: Fulldev UI - Astro component and block library, open-source

package/src/content/pages/layouts/_layout.mdx

@@ -0,0 +1,14 @@
+---
+presets: [docs]
+
+title: Layout
+---
+
+import Layout from 'fulldev-ui/layouts/Layout.astro?raw'
+import { Code } from 'astro:components'
+
+# Layout
+
+The Layout component is used to wrap the content of a page. It provides a structured template for your website.
+
+<Code code={Layout} lang="astro" />

package/src/content/pages/layouts/docslayout.mdx

@@ -1,5 +1,14 @@
 ---
-presets: [docs, blocks]
+presets: [docs]
 
 title: DocsLayout
 ---
+
+import Layout from 'fulldev-ui/layouts/DocsLayout.astro?raw'
+import { Code } from 'astro:components'
+
+# DocsLayout
+
+The DocsLayout component is used to wrap the content of a page in a sidebar and a main content area and table of contents.
+
+<Code code={Layout} lang="astro" />

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

@@ -68,3 +68,8 @@ import Button from 'fulldev-ui/components/Button.astro'
 
 {/* This will render a button */}
 <Button if={true} />
+```
+
+## Overriding Components
+
+You can override components by creating a new component with the same name as one from the library in the **src/components** directory and adding your custom code. This also works for blocks and layouts.

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

@@ -0,0 +1,139 @@
+---
+presets: [docs]
+title: Content Collections
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Content Collections
+
+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.
+
+```bash
+pnpm create astro@latest -- --template fulldotdev/starter
+```
+
+## 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="#type-safe-frontmatter">frontmatter</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,
+    }),
+  ],
+})
+```
+
+## Type-safe frontmatter
+
+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.
+
+```yml
+---
+preset: [docs] # Applies the configuration from src/content/presets/docs.yml
+component: DocsLayout
+
+seo:
+  title: Page Title
+  description: This is my page description
+  image: /image.jpg # Open Graph Image
+
+# Information on the page, this is used in places like card, sidebar, etc.
+title: Page Title
+description: This is my page description
+
+sections: # Here you generate the page by adding a component and passing props
+  - component: Hero
+    heading: Page Title
+    text: This is my page description
+    buttons:
+      - text: Button
+        color: brand
+        href: /
+      - text: Button
+        href: /
+---
+# This is the prose, you can use markdown here
+```
+
+For all objects avaliable in the Content Layer, see the <Link href="https://ui.full.dev/schemas/page/">schemas</Link>.
+
+### 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.
+
+```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', // Applies the configuration from src/content/presets/base.yml to every page
+    }),
+  ],
+})
+```
+
+## 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:
+
+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
+
+### Example structure
+
+```bash
+.
+├── src/
+│   ├── content/
+│   │   ├── pages/
+│   │   │   ├── index.md
+│   │   │   ├── nl/
+│   │   │   │   └── index.md
+│   │   │   └── de/
+│   │   │   │   └── index.md
+```

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

@@ -7,7 +7,21 @@ import Link from 'fulldev-ui/components/Link.astro'
 
 # Installation
 
-Install fulldev-ui with your favorite package manager and you are ready to go.
+You can add fulldev-ui to your project, or use the starter template.
+
+## Add to existing project
+
+### Automatic setup
+
+Use the astro add command to automatically install the dependencies and add the integration.
+
+```bash
+npx astro add fulldev-ui
+```
+
+## Manual installation
+
+Install fulldev-ui with your favorite package manager.
 
 ```bash
 pnpm i fulldev-ui
@@ -19,36 +33,21 @@ yarn add fulldev-ui
 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>.
+Then setup the integration in your `astro.config.ts` file.
 
 ```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',
-        },
-      },
-    }),
-  ],
+  integrations: [fulldev()],
 })
 ```
+
+## Using the starter template
+
+The easiest way to get started is to use the [starter template](https://github.com/fulldotdev/starter).
+
+```bash
+pnpm create astro@latest -- --template fulldotdev/starter
+```

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

@@ -5,20 +5,26 @@ title: Introduction
 
 # Introduction
 
-Fulldev UI focuses on content websites rather than applications.
+**Fulldev UI** is a full-featured UI library and website theme built on the [Astro](https://astro.build/) framework. Whether starting a new project or enhancing an existing one, this guide will help you get set up. For installation details, see the [installation guide](/getting-started/installation).
 
-##### Build entire websites with just components
+## Why we built it
 
-Fulldev UI is unique in that it introduces larger components to build entire pages, and even websites. Like a Section component that just works.
+We built **Fulldev UI** after repeatedly encountering the same challenges in client projects, covering the core needs of content-focused websites. Initially created for [our own company](https://full.dev), we decided to open-source it for others to use.
 
-##### Integrates with any JS / CSS framework
+## Some features
 
-Want to use Tailwind, or something else? You can overwrite all styles. Need an interactive framework component? Styles can be applied with one simple class.
+- Vanilla HTML and CSS.
+- Seamless integration with TailwindCSS and UnoCSS.
+- Minimal JavaScript.
+- Supports Astro's [Content Collections](https://docs.astro.build/en/guides/content-collections/).
+- Customizable via CSS variables.
+- Reusable components for pages and sections.
+- Includes blocks like Hero, CTA, Features, etc.
+- Page-building tools.
+- And more...
 
-##### Automated colors, spacing and sizes
+## A word of caution
 
-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.
+**Fulldev UI** includes a wide range of features, some still experimental. While a narrower focus would improve stability, we built it for flexibility in our projects.
 
-##### Content layer
-
-Build entire websites using just content files like Markdown using our components, blocks and layouts.
+This isn't just a single-purpose library; it's a framework for building blog, marketing, and portfolio websites—similar to how [Starlight](https://starlight.astro.build/) serves documentation. As it evolves, its focus will sharpen. In the meantime, feel free to use it and share feedback on [Discord](https://discord.gg/fulldev)!