fulldev-ui 0.6.0-beta-4 → 0.6.0-beta-5

package/cloudcannon.config.yml

@@ -6,7 +6,7 @@ collection_groups:
   - heading: Content
     collections:
       - pages
-      - products
+      - jobs
       - categories
 
 collections_config:
@@ -21,14 +21,27 @@ collections_config:
       - content
     disable_add_folder: true
     schemas:
-      default:
+      page:
         name: Page
         icon: wysiwyg
         remove_extra_inputs: false
         remove_empty_inputs: true
         hide_extra_inputs: true
         path: schemas/page.md
-
+      job:
+        name: Job
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/job.md
+      category:
+        name: Category
+        icon: wysiwyg
+        remove_extra_inputs: false
+        remove_empty_inputs: true
+        hide_extra_inputs: true
+        path: schemas/category.md
 _inputs:
   head:
     label: SEO / Settings
@@ -41,14 +54,19 @@ _inputs:
     label: SEO description
     comment: 50-120 characters
 
-  cards:
+  parents:
     type: multiselect
+    label: Categorieën
     options:
       values: collections.pages
-
-  categories:
+  children:
+    type: multiselect
+    label: Subcategorieën
+    options:
+      values: collections.pages
+  siblings:
     type: multiselect
-    label: Categories
+    label: Aanbevolen pagina's
     options:
       values: collections.pages
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.0-beta-4",
+  "version": "0.6.0-beta-5",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Banner.astro

@@ -2,9 +2,9 @@
 import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Container from 'fulldev-ui/components/Container.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { BannerSchema } from 'fulldev-ui/schemas/blocks/banner'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends HTMLAttributes<'header'>, BannerSchema {
+interface Props extends HTMLAttributes<'header'>, BlockSchema {
   as?: HTMLTag
 }
 

package/src/blocks/Contact1.astro

@@ -9,9 +9,9 @@ import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Section from 'fulldev-ui/components/Section.astro'
 import Social from 'fulldev-ui/components/Social.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { ContactSchema } from 'fulldev-ui/schemas/blocks/contact'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, ContactSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const {
   heading,

package/src/blocks/Content1.astro

@@ -0,0 +1,77 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  headings?: ComponentProps<typeof Toc>['headings']
+}
+
+const {
+  tagline,
+  badge,
+  badges,
+  heading,
+  paragraph,
+  list,
+  button,
+  buttons,
+  image,
+  headings,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-1"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Group>
+        <Badge {...badge} />
+        {badges?.map((badge) => <Badge {...badge} />)}
+      </Group>
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Button {...button} />
+        {buttons?.map((button) => <Button {...button} />)}
+      </Group>
+      <Image {...image} />
+      <slot />
+    </Prose>
+    <Toc {headings} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-1 {
+      .container {
+        @apply flex items-start justify-evenly gap-x-gutter;
+      }
+    }
+  }
+</style>

package/src/blocks/Content2.astro

@@ -0,0 +1,91 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  headings?: ComponentProps<typeof Toc>['headings']
+}
+
+const {
+  tagline,
+  badge,
+  badges,
+  heading,
+  paragraph,
+  list,
+  button,
+  buttons,
+  image,
+  headings,
+  content,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-2"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Group>
+        <Badge {...badge} />
+        {badges?.map((badge) => <Badge {...badge} />)}
+      </Group>
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <List items={list} />
+      <Group>
+        <Button {...button} />
+        {buttons?.map((button) => <Button {...button} />)}
+      </Group>
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-2 {
+      .container {
+        @apply grid items-start gap-x-gutter gap-y-16 lg:grid-cols-2;
+      }
+
+      .prose,
+      .image {
+        @apply lg:top-sticky-16 lg:sticky;
+      }
+
+      .prose {
+        @apply max-w-screen-sm;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>

package/src/blocks/Content3.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { badges, heading, paragraph, list, button, ...rest } = Astro.props
+---
+
+<Section
+  class:list="content-3"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Group>
+        {
+          badges?.map((badge) => (
+            <Badge
+              size="sm"
+              {...badge}
+            />
+          ))
+        }
+      </Group>
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        muted
+        text={paragraph}
+      />
+      <List items={list} />
+      <Button
+        size="lg"
+        {...button}
+      />
+    </Writeup>
+    <Prose>
+      <slot />
+    </Prose>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-3 {
+      .container {
+        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
+      }
+
+      .writeup {
+        @apply lg:top-sticky-16 lg:sticky lg:max-w-xl;
+      }
+    }
+  }
+</style>

package/src/blocks/Content4.astro

@@ -0,0 +1,72 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Group from 'fulldev-ui/components/Group.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const {
+  tagline,
+  heading,
+  paragraph,
+  list,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="content-4"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        size="4xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        muted
+        text={paragraph}
+      />
+      <List items={list} />
+    </Writeup>
+    <Prose>
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Group>
+      <Button {...button} />
+      {buttons?.map((button) => <Button {...button} />)}
+    </Group>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-4 {
+      .container {
+        @apply flex flex-col items-start gap-8;
+      }
+
+      .prose {
+        @apply max-w-none break-inside-avoid gap-x-gutter lg:columns-2;
+      }
+    }
+  }
+</style>

package/src/blocks/Cta1.astro

@@ -2,16 +2,16 @@
 import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Container from 'fulldev-ui/components/Container.astro'
-import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Panel from 'fulldev-ui/components/Panel.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { CtaSchema } from 'fulldev-ui/schemas/blocks/cta.ts'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, CtaSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
 ---
@@ -22,24 +22,22 @@ const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
 >
   <Container>
     <Panel>
-      <Element class="cta-1-segment">
-        <Element class="cta-1-content">
-          <Tagline text={tagline} />
-          <Heading
-            size="4xl"
-            as="h2"
-            text={heading}
-          />
-          <Paragraph
-            size="lg"
-            text={paragraph}
-          />
-        </Element>
+      <Writeup align="center">
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          as="h2"
+          text={heading}
+        />
+        <Paragraph
+          size="lg"
+          text={paragraph}
+        />
         <Buttons
           {buttons}
           size="lg"
         />
-      </Element>
+      </Writeup>
       <Image {...image} />
     </Panel>
   </Container>
@@ -48,20 +46,8 @@ const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .cta-1 {
-      .panel {
-        @apply flex flex-col items-center gap-16;
-      }
-
-      .cta-1-segment {
-        @apply z-10 flex flex-col items-center gap-8 text-center;
-      }
-
-      .cta-1-content {
-        @apply flex max-w-screen-md flex-col items-center gap-4 text-center;
-      }
-
       .text {
-        @apply text-balance;
+        @apply text-pretty;
       }
 
       .image {

package/src/blocks/Feature1.astro

@@ -2,15 +2,15 @@
 import type { ComponentProps } from 'astro/types'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Container from 'fulldev-ui/components/Container.astro'
-import Element from 'fulldev-ui/components/Element.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 Section from 'fulldev-ui/components/Section.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { FeatureSchema } from 'fulldev-ui/schemas/blocks/feature'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, FeatureSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
 ---
@@ -20,26 +20,24 @@ const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
   {...rest}
 >
   <Container>
-    <Element class="feature-1-segment">
-      <Element class="feature-1-content">
-        <Tagline
-          size="sm"
-          text={tagline}
-        />
-        <Heading
-          size="3xl"
-          text={heading}
-        />
-        <Paragraph
-          size="lg"
-          text={paragraph}
-        />
-      </Element>
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+      />
       <Buttons
         variant="secondary"
         {buttons}
       />
-    </Element>
+    </Writeup>
     <Image {...image} />
   </Container>
 </Section>
@@ -51,12 +49,8 @@ const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
         @apply gap-x-gutter gap-y-12 lg:grid lg:grid-cols-2 lg:items-center;
       }
 
-      .feature-1-segment {
-        @apply flex flex-col items-start gap-6 lg:max-w-xl;
-      }
-
-      .feature-1-content {
-        @apply flex max-w-screen-md flex-col items-start gap-3;
+      .writeup {
+        @apply lg:max-w-xl;
       }
 
       .image {

package/src/blocks/Features1.astro

@@ -1,15 +1,16 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import Container from 'fulldev-ui/components/Container.astro'
-import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Section from 'fulldev-ui/components/Section.astro'
+import Stack from 'fulldev-ui/components/Stack.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { FeaturesSchema } from 'fulldev-ui/schemas/blocks/features'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends ComponentProps<typeof Section>, FeaturesSchema {}
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
 const { tagline, heading, paragraph, cards, ...rest } = Astro.props
 ---
@@ -19,54 +20,44 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
   {...rest}
 >
   <Container>
-    <Element class="features-1-segment">
-      <Element class="features-1-content">
-        <Tagline
-          size="sm"
-          text={tagline}
-        />
-        <Heading
-          size="3xl"
-          text={heading}
-        />
-        <Paragraph
-          size="lg"
-          text={paragraph}
-        />
-      </Element>
-    </Element>
-    <Element class:list="features-1-cards">
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph
+        size="lg"
+        text={paragraph}
+      />
+    </Writeup>
+    <Stack>
       {
         cards?.map(({ icon, heading, paragraph }) => (
-          <Element class="features-1-card">
+          <Writeup>
             <Icon
               size="lg"
               name={icon}
             />
             <Heading
               as="h3"
-              size="lg"
+              size="xl"
               text={heading}
             />
             <Paragraph text={paragraph} />
-          </Element>
+          </Writeup>
         ))
       }
-    </Element>
+    </Stack>
   </Container>
 </Section>
 
 <style is:global>
   @layer fulldev {
     .features-1 {
-      .features-1-cards {
-        @apply grid grid-cols-1 gap-6 lg:grid-cols-3;
-      }
-
-      .features-1-card {
-        @apply flex flex-col gap-3;
-      }
-
       .icon {
         @apply text-primary;
       }

package/src/blocks/Footer.astro

@@ -7,9 +7,9 @@ import Logo from 'fulldev-ui/components/Logo.astro'
 import Menu from 'fulldev-ui/components/Menu.astro'
 import { default as Paragraph } from 'fulldev-ui/components/Paragraph.astro'
 import Social from 'fulldev-ui/components/Social.astro'
-import type { FooterSchema } from 'fulldev-ui/schemas/components/footer'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends HTMLAttributes<'footer'>, FooterSchema {
+interface Props extends HTMLAttributes<'footer'>, BlockSchema {
   as?: HTMLTag
 }
 

package/src/blocks/Header.astro

@@ -11,9 +11,9 @@ import Logo from 'fulldev-ui/components/Logo.astro'
 import Search from 'fulldev-ui/components/Search.astro'
 import Social from 'fulldev-ui/components/Social.astro'
 import Themer from 'fulldev-ui/components/Themer.astro'
-import type { HeaderSchema } from 'fulldev-ui/schemas/components/header'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-interface Props extends HTMLAttributes<'header'>, HeaderSchema {}
+interface Props extends HTMLAttributes<'header'>, BlockSchema {}
 
 const {
   logo,