fulldev-ui 0.6.0-beta.7 → 0.6.0-beta.9

package/.vscode/settings.json

@@ -20,4 +20,6 @@
   "files.associations": {
     "*.astro": "astro"
   },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

package/astro.config.ts

@@ -4,21 +4,19 @@ import integration from 'fulldev-ui/integration'
 
 // https://astro.build/config
 export default defineConfig({
-  publicDir: './src/images',
   devToolbar: {
     enabled: false,
   },
   integrations: [
     integration({
       company: 'Fulldev UI',
-      favicon: 'src/images/favicon.svg',
+      favicon: 'public/images/favicon.svg',
       css: '/src/css/custom.css',
       injectRoutes: false,
     }),
     svelte(),
   ],
   redirects: {
-    '/discord': 'https://discord.gg/vXZqMbadm8',
     // '/structure/[...slug]': '/docs/components/[...slug]',
     // '/segment/[...slug]': '/docs/components/[...slug]',
     // '/typography/[...slug]': '/docs/components/[...slug]',

package/cloudcannon.config.yml

@@ -6,89 +6,44 @@ collection_groups:
   - heading: Content
     collections:
       - pages
-      - jobs
-      - categories
   - 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]/
-    icon: wysiwyg
-    name: Pages
     disable_add_folder: true
     _enabled_editors:
       - visual
-      - content
     schemas:
       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
-      jobs:
-        name: Job overview
-        icon: wysiwyg
-        remove_extra_inputs: false
-        remove_empty_inputs: true
-        hide_extra_inputs: true
-        path: schemas/jobs.md
-      post:
-        name: Content
-        icon: wysiwyg
-        remove_extra_inputs: false
-        remove_empty_inputs: true
-        hide_extra_inputs: true
-        path: schemas/post.md
-      category:
-        name: Category
-        icon: wysiwyg
-        remove_extra_inputs: false
-        remove_empty_inputs: true
-        hide_extra_inputs: true
-        path: schemas/category.md
-      product:
-        name: Product
-        icon: wysiwyg
-        remove_extra_inputs: false
-        remove_empty_inputs: true
-        hide_extra_inputs: true
-        path: schemas/product.md
-  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:
     type: multiselect
     label: Categorieën
@@ -104,11 +59,9 @@ _inputs:
     label: Aanbevolen pagina's
     options:
       values: collections.pages
-
   href:
     type: url
     label: Link
-
   rating.value:
     label: Rating
     type: range
@@ -116,7 +69,6 @@ _inputs:
       min: 0
       max: 5
       step: 0.1
-
   head.image:
     type: image
     label: Image
@@ -147,7 +99,6 @@ _inputs:
       resize_style: contain
       width: 1920
       height: 1920
-
   list:
     type: array
   list[*]:
@@ -247,6 +198,18 @@ _inputs:
   structure:
     hidden: true
 
+_structures:
+  head:
+    remove_empty_inputs: true
+    id_key: title
+    values:
+      - label: SEO / Settings
+        value:
+          title:
+          description:
+          image:
+          code:
+
 _editables:
   content:
     allow_custom_markup: false

package/package.json

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

package/src/blocks/Banner.astro

@@ -1,8 +1,8 @@
 ---
 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 { BlockSchema } from 'fulldev-ui/schemas/components/block'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
 
 interface Props extends HTMLAttributes<'header'>, BlockSchema {
   as?: HTMLTag
@@ -23,7 +23,7 @@ const { as = 'header', text, ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .banner {
-      @apply relative flex w-full items-center bg-primary py-3 text-primary-foreground;
+      @apply relative flex w-full items-center bg-primary py-2.5 text-primary-foreground;
 
       .container {
         @apply flex items-center justify-center overflow-hidden bg-primary text-center text-sm leading-none text-primary-foreground;

package/src/blocks/Colleagues1.astro

@@ -1,15 +1,15 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import Card from 'fulldev-ui/components/Card.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 Stack from 'fulldev-ui/components/Stack.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'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+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 {}
 
@@ -32,10 +32,10 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
       />
       <Paragraph text={paragraph} />
     </Writeup>
-    <Stack>
+    <Matrix>
       {
         cards?.map(({ image, heading, paragraph }) => (
-          <Card>
+          <Element class:list="colleagues-card">
             <Image {...image} />
             <Heading
               as="h3"
@@ -43,10 +43,10 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
               text={heading}
             />
             <Paragraph text={paragraph} />
-          </Card>
+          </Element>
         ))
       }
-    </Stack>
+    </Matrix>
   </Container>
 </Section>
 
@@ -57,16 +57,16 @@ const { tagline, heading, paragraph, cards, ...rest } = Astro.props
         @apply flex flex-col items-center gap-16;
       }
 
-      .card {
-        @apply mt-20 flex flex-col items-center gap-1 pt-0;
+      .colleagues-cards {
+        @apply grid grid-cols-1 gap-8 lg:grid-cols-3;
       }
 
-      .image {
-        @apply -mt-20 mb-4 aspect-square max-w-40 rounded-full object-cover;
+      .colleagues-card {
+        @apply flex flex-col items-center text-center;
       }
 
-      .icon {
-        @apply text-primary;
+      .image {
+        @apply mb-4 aspect-square w-2/3 rounded-full object-cover;
       }
     }
   }

package/src/blocks/Contact1.astro

@@ -1,4 +1,5 @@
 ---
+// @ts-nocheck
 import type { ComponentProps } from 'astro/types'
 import Badges from 'fulldev-ui/components/Badges.astro'
 import Channel from 'fulldev-ui/components/Channel.astro'
@@ -7,10 +8,10 @@ import Form from 'fulldev-ui/components/Form.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 Social from 'fulldev-ui/components/Social.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
-import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Section from 'fulldev-ui/structures/Section.astro'
 
 interface Props extends ComponentProps<typeof Section>, BlockSchema {}
 
@@ -19,16 +20,13 @@ const {
   badges,
   tagline,
   heading,
-  form,
   text,
-  googleMaps,
   paragraph,
   buttons,
   socials,
-  position,
+  form,
   image,
   channels,
-  level = 1,
   ...rest
 } = Astro.props
 ---
@@ -68,10 +66,7 @@ const {
         {...form}
       />
     </Element>
-    <Image
-      {position}
-      {...image}
-    />
+    <Image {...image} />
   </Element>
 </Section>
 

package/src/blocks/Content1.astro

@@ -1,37 +1,27 @@
 ---
+// Centered
 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 Buttons from 'fulldev-ui/components/Buttons.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'
+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>, BlockSchema {
-  headings?: ComponentProps<typeof Toc>['headings']
+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']
 }
 
-const {
-  tagline,
-  badge,
-  badges,
-  heading,
-  paragraph,
-  list,
-  button,
-  buttons,
-  image,
-  content,
-  headings,
-  ...rest
-} = Astro.props
+const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+  Astro.props
 ---
 
 <Section
@@ -40,14 +30,10 @@ const {
 >
   <Container>
     <Prose>
-      <Group>
-        <Badge {...badge} />
-        {badges?.map((badge) => <Badge {...badge} />)}
-      </Group>
       <Tagline text={tagline} />
       <Heading
-        as="h1"
-        size="4xl"
+        as="h2"
+        size="5xl"
         text={heading}
       />
       <Paragraph
@@ -55,24 +41,21 @@ const {
         size="lg"
         text={paragraph}
       />
-      <List items={list} />
-      <Group>
-        <Button {...button} />
-        {buttons?.map((button) => <Button {...button} />)}
-      </Group>
       <Image {...image} />
       <Fragment set:html={content} />
       <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
     </Prose>
-    <Toc {headings} />
   </Container>
 </Section>
 
 <style is:global>
   @layer fulldev {
     .content-1 {
-      .container {
-        @apply flex items-start justify-evenly gap-x-gutter;
+      .prose {
+        @apply mx-auto;
       }
     }
   }

package/src/blocks/Content2.astro

@@ -1,37 +1,27 @@
 ---
+// Content left, image right, centered
 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 Buttons from 'fulldev-ui/components/Buttons.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'
+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>, BlockSchema {
-  headings?: ComponentProps<typeof Toc>['headings']
+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']
 }
 
-const {
-  tagline,
-  badge,
-  badges,
-  heading,
-  paragraph,
-  list,
-  button,
-  buttons,
-  image,
-  headings,
-  content,
-  ...rest
-} = Astro.props
+const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+  Astro.props
 ---
 
 <Section
@@ -40,16 +30,9 @@ const {
 >
   <Container>
     <Prose>
-      <Group>
-        <Badge {...badge} />
-        {badges?.map((badge) => <Badge {...badge} />)}
-      </Group>
-      <Tagline
-        size="sm"
-        text={tagline}
-      />
+      <Tagline text={tagline} />
       <Heading
-        as="h1"
+        as="h2"
         size="4xl"
         text={heading}
       />
@@ -58,13 +41,11 @@ const {
         size="lg"
         text={paragraph}
       />
-      <List items={list} />
-      <Group>
-        <Button {...button} />
-        {buttons?.map((button) => <Button {...button} />)}
-      </Group>
       <Fragment set:html={content} />
       <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
     </Prose>
     <Image {...image} />
   </Container>
@@ -74,12 +55,7 @@ const {
   @layer fulldev {
     .content-2 {
       .container {
-        @apply grid items-start gap-x-gutter gap-y-16 lg:grid-cols-2;
-      }
-
-      .prose,
-      .image {
-        @apply lg:sticky lg:top-sticky-16;
+        @apply grid items-center gap-x-gutter gap-y-16 lg:grid-cols-2;
       }
 
       .prose {

package/src/blocks/Content3.astro

@@ -1,20 +1,26 @@
 ---
+// Content left, image right, sticky
 import type { ComponentProps } from 'astro/types'
-import Badges from 'fulldev-ui/components/Badges.astro'
 import Buttons from 'fulldev-ui/components/Buttons.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 Image from 'fulldev-ui/components/Image.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'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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>, BlockSchema {}
+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']
+}
 
-const { badge, badges, heading, paragraph, list, button, buttons, ...rest } =
+const { tagline, heading, paragraph, buttons, image, content, ...rest } =
   Astro.props
 ---
 
@@ -23,35 +29,25 @@ const { badge, badges, heading, paragraph, list, button, buttons, ...rest } =
   {...rest}
 >
   <Container>
-    <Writeup>
-      <Group>
-        <Badges
-          size="sm"
-          {badge}
-          {badges}
-        />
-      </Group>
+    <Prose>
+      <Tagline text={tagline} />
       <Heading
-        as="h1"
+        as="h2"
         size="4xl"
         text={heading}
       />
       <Paragraph
-        size="lg"
         muted
+        size="lg"
         text={paragraph}
       />
-      <List items={list} />
+      <Fragment set:html={content} />
+      <slot />
       <Group>
-        <Buttons
-          {button}
-          {buttons}
-        />
+        <Buttons {buttons} />
       </Group>
-    </Writeup>
-    <Prose>
-      <slot />
     </Prose>
+    <Image {...image} />
   </Container>
 </Section>
 
@@ -59,11 +55,20 @@ const { badge, badges, heading, paragraph, list, button, buttons, ...rest } =
   @layer fulldev {
     .content-3 {
       .container {
-        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
+        @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;
       }
 
-      .writeup {
-        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
+      .image {
+        @apply rounded-md;
       }
     }
   }