fulldev-ui 0.6.0-beta.9 → 0.6.0

package/astro.config.ts

@@ -16,12 +16,10 @@ export default defineConfig({
     }),
     svelte(),
   ],
-  redirects: {
-    // '/structure/[...slug]': '/docs/components/[...slug]',
-    // '/segment/[...slug]': '/docs/components/[...slug]',
-    // '/typography/[...slug]': '/docs/components/[...slug]',
-    // '/base/[...slug]': '/docs/components/[...slug]',
-    // '/overview/theming/': '/docs/customization/',
-    // '/overview/[...slug]': '/docs/[...slug]',
-  },
+  // redirects: {
+  //   '/overview/[...slug]': '/docs/[...slug]',
+  //   '/typography/[...slug]': '/docs/components/[...slug]',
+  //   '/structure/[...slug]': '/docs/structures/[...slug]',
+  //   '/blocks': '/docs/blocks/banner/',
+  // },
 })

package/cloudcannon.config.yml

@@ -1,80 +1,97 @@
 paths:
-  uploads: public/images
   static: public
+  uploads: public/images
 
 collection_groups:
   - heading: Content
     collections:
       - pages
+      - records
   - heading: Settings
     collections:
       - layouts
 
 collections_config:
-  layouts:
-    path: src/content/layouts
-    name: Layouts
-    icon: web
-    disable_url: true
-    disable_add: true
-    disable_add_folder: true
-    disable_file_actions: true
-    _enabled_editors:
-      - data
   pages:
     path: src/content/pages
-    output: true
     url: /[full_slug]/
     disable_add_folder: true
     _enabled_editors:
       - visual
+      - content
     schemas:
       page:
         remove_extra_inputs: false
         remove_empty_inputs: true
         hide_extra_inputs: true
         path: schemas/page.md
-
+      job:
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/job.md
+      jobs:
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/jobs.md
+      post:
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/post.md
+  records:
+    path: src/content/records
+    name: Records
+    disable_url: true
+    disable_add_folder: true
+    _enabled_editors:
+      - data
+  layouts:
+    path: src/content/layouts
+    name: Layouts
+    icon: web
+    disable_url: true
+    disable_add: true
+    disable_add_folder: true
+    disable_file_actions: true
+    _enabled_editors:
+      - data
 _inputs:
-  head:
-    label: SEO / Settings
-  head.title:
-    label: SEO title
-    comment: 50-60 characters
-  head.description:
-    label: SEO description
-    comment: 50-120 characters
-  parents:
+  pages:
     type: multiselect
     label: Categorieën
     options:
       values: collections.pages
-  children:
-    type: multiselect
-    label: Subcategorieën
-    options:
-      values: collections.pages
-  siblings:
+  categories:
     type: multiselect
-    label: Aanbevolen pagina's
+    label: Categorieën
     options:
       values: collections.pages
   href:
     type: url
     label: Link
-  rating.value:
+  rating:
     label: Rating
     type: range
     options:
       min: 0
       max: 5
       step: 0.1
+  head:
+    label: SEO / Settings
+  head.title:
+    label: SEO title
+    comment: 50-60 characters
+  head.description:
+    label: SEO description
+    comment: 50-120 characters
   head.image:
     type: image
     label: Image
     comment: Visible when you share a link of the page
     options:
-      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      accepts_mime_types: image/jpeg,image/jpg,image/png,image/webp
       mime_type: image/png
       resize_style: contain
       width: 1200
@@ -85,7 +102,7 @@ _inputs:
   images[*]:
     type: image
     options:
-      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      accepts_mime_types: image/jpeg,image/jpg,image/png,image/webp
       mime_type: image/webp
       resize_style: contain
       width: 1920
@@ -94,7 +111,7 @@ _inputs:
     type: image
     label: Afbeelding
     options:
-      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      accepts_mime_types: image/jpeg,image/jpg,image/png,image/webp
       mime_type: image/webp
       resize_style: contain
       width: 1920
@@ -140,63 +157,19 @@ _inputs:
     type: image
     cascade: true
     options:
-      accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
+      accepts_mime_types: image/jpeg,image/jpg,image/png,image/webp
       mime_type: image/webp
       resize_style: contain
       width: 260
       height: 32
-  rating:
-    type: range
-    options:
-      min: 0
-      max: 5
-      step: 0.1
-    label: Rating
   price:
     type: number
-    label: Prijs
-  presets:
-    hidden: true
-  component:
-    hidden: true
-  dark:
-    hidden: true
+  content:
+    type: html
   name:
     hidden: true
-  color:
-    hidden: true
-  layout:
-    hidden: true
-  position:
-    hidden: true
-  scheme:
-    hidden: true
-  hue:
-    hidden: true
-  align:
-    hidden: true
-  frame:
-    hidden: true
-  variant:
-    hidden: true
-  scale:
-    hidden: true
-  render:
-    hidden: true
-  collection:
-    hidden: true
-  slug:
-    hidden: true
   id:
     hidden: true
-  class:
-    hidden: true
-  direction:
-    hidden: true
-  size:
-    hidden: true
-  structure:
-    hidden: true
 
 _structures:
   head:
@@ -205,11 +178,10 @@ _structures:
     values:
       - label: SEO / Settings
         value:
-          title:
-          description:
-          image:
-          code:
-
+          title: null
+          description: null
+          image: null
+          code: null
 _editables:
   content:
     allow_custom_markup: false
@@ -226,7 +198,6 @@ _editables:
     table: true
     underline: true
     undo: true
-    accepts_mime_types: 'image/jpeg,image/jpg,image/png,image/webp'
     mime_type: image/webp
     resize_style: contain
     width: 1920

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.0-beta.9",
+  "version": "0.6.0",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -38,6 +38,7 @@
     "@astrojs/mdx": "^3.1.9",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/svelte": "^6.0.2",
+    "@astrojs/tailwind": "^5.1.3",
     "@astrolib/seo": "1.0.0-beta.8",
     "@iconify-json/tabler": "^1.2.7",
     "@nanostores/persistent": "^0.10.2",

package/src/blocks/Banner.astro

@@ -1,18 +1,16 @@
 ---
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 
-interface Props extends HTMLAttributes<'header'>, BlockSchema {
-  as?: HTMLTag
-}
+interface Props extends BlockSchema {}
 
-const { as = 'header', text, ...rest } = Astro.props
+const { text, ...rest } = Astro.props
 ---
 
 <Element
   class:list="banner"
+  as="header"
   {...rest}
 >
   <Container>

package/src/blocks/Colleagues1.astro

@@ -1,5 +1,4 @@
 ---
-import type { ComponentProps } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
@@ -11,9 +10,9 @@ import Matrix from 'fulldev-ui/structures/Matrix.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
-interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
 ---
 
 <Section
@@ -29,6 +28,7 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
       <Heading
         size="3xl"
         text={heading}
+        {depth}
       />
       <Paragraph text={paragraph} />
     </Writeup>
@@ -38,6 +38,7 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
           <Element class:list="colleagues-card">
             <Image {...image} />
             <Heading
+              depth={(depth + 1) as 3}
               as="h3"
               size="xl"
               text={heading}

package/src/blocks/Content1.astro

@@ -1,40 +1,28 @@
 ---
-// Centered
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block.ts'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content } =
   Astro.props
 ---
 
-<Section
-  class:list="content-1"
-  {...rest}
->
+<Section class="content-1">
   <Container>
-    <Prose>
+    <Prose align="middle">
       <Tagline text={tagline} />
       <Heading
-        as="h2"
-        size="5xl"
         text={heading}
+        {depth}
       />
       <Paragraph
         muted
@@ -50,13 +38,3 @@ const { tagline, heading, paragraph, buttons, image, content, ...rest } =
     </Prose>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-1 {
-      .prose {
-        @apply mx-auto;
-      }
-    }
-  }
-</style>

package/src/blocks/Content2.astro

@@ -1,70 +1,46 @@
 ---
-// Content left, image right, centered
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
   Astro.props
 ---
 
 <Section
-  class:list="content-2"
+  class="content-2"
   {...rest}
 >
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Fragment set:html={content} />
-      <slot />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Image {...image} />
+    <Split align="center">
+      <Prose>
+        <Tagline text={tagline} />
+        <Heading
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <slot />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Image {...image} />
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-2 {
-      .container {
-        @apply grid items-center gap-x-gutter gap-y-16 lg:grid-cols-2;
-      }
-
-      .prose {
-        @apply max-w-screen-sm;
-      }
-
-      .image {
-        @apply rounded-md;
-      }
-    }
-  }
-</style>

package/src/blocks/Content3.astro

@@ -1,75 +1,46 @@
 ---
-// Content left, image right, sticky
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
   Astro.props
 ---
 
 <Section
-  class:list="content-3"
+  class="content-3"
   {...rest}
 >
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Fragment set:html={content} />
-      <slot />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Image {...image} />
+    <Split align="sticky">
+      <Prose>
+        <Tagline text={tagline} />
+        <Heading
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <slot />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Image {...image} />
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-3 {
-      .container {
-        @apply grid items-start gap-x-gutter gap-y-16 lg:grid-cols-2;
-      }
-
-      .prose,
-      .image {
-        @apply lg:sticky lg:top-sticky-16;
-      }
-
-      .prose {
-        @apply max-w-screen-sm;
-      }
-
-      .image {
-        @apply rounded-md;
-      }
-    }
-  }
-</style>

package/src/blocks/Content4.astro

@@ -1,68 +1,45 @@
 ---
-// Heading etc left, image and content right, sticky
-import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
 
-interface Props extends ComponentProps<typeof Section> {
-  tagline?: string | undefined
-  heading?: string | undefined
-  paragraph?: string | undefined
-  content?: string | undefined
-  image?: ComponentProps<typeof Image> | undefined
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-}
+interface Props extends BlockSchema {}
 
-const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+const { depth, tagline, heading, paragraph, buttons, image, content } =
   Astro.props
 ---
 
-<Section
-  class:list="content-4"
-  {...rest}
->
+<Section class="content-4">
   <Container>
-    <Prose>
-      <Tagline text={tagline} />
-      <Heading
-        as="h2"
-        size="4xl"
-        text={heading}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={paragraph}
-      />
-      <Group>
-        <Buttons {buttons} />
-      </Group>
-    </Prose>
-    <Prose>
-      <Image {...image} />
-      <Fragment set:html={content} />
-      <slot />
-    </Prose>
+    <Split align="sticky">
+      <Prose>
+        <Tagline text={tagline} />
+        <Heading
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Prose>
+        <Image {...image} />
+        <Fragment set:html={content} />
+        <slot />
+      </Prose>
+    </Split>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .content-4 {
-      .container {
-        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
-      }
-
-      .prose {
-        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
-      }
-    }
-  }
-</style>