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

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,8 +6,6 @@ collection_groups:
   - heading: Content
     collections:
       - pages
-      - jobs
-      - categories
   - heading: Settings
     collections:
       - layouts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.0-beta.7",
+  "version": "0.6.0-beta.8",
   "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;
       }
     }
   }

package/src/blocks/Content4.astro

@@ -1,30 +1,27 @@
 ---
+// Heading etc left, image and content right, sticky
 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 Buttons from 'fulldev-ui/components/Buttons.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 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 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 {
-  tagline,
-  heading,
-  paragraph,
-  list,
-  content,
-  button,
-  buttons,
-  image,
-  ...rest
-} = Astro.props
+const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+  Astro.props
 ---
 
 <Section
@@ -32,31 +29,27 @@ const {
   {...rest}
 >
   <Container>
-    <Writeup>
-      <Tagline
-        size="sm"
-        text={tagline}
-      />
+    <Prose>
+      <Tagline text={tagline} />
       <Heading
-        as="h1"
+        as="h2"
         size="4xl"
         text={heading}
       />
       <Paragraph
-        size="lg"
         muted
+        size="lg"
         text={paragraph}
       />
-      <List items={list} />
-    </Writeup>
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
     <Prose>
+      <Image {...image} />
       <Fragment set:html={content} />
       <slot />
     </Prose>
-    <Group>
-      <Button {...button} />
-      {buttons?.map((button) => <Button {...button} />)}
-    </Group>
   </Container>
 </Section>
 
@@ -64,11 +57,11 @@ const {
   @layer fulldev {
     .content-4 {
       .container {
-        @apply flex flex-col items-start gap-8;
+        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
       }
 
       .prose {
-        @apply max-w-none break-inside-avoid gap-x-gutter lg:columns-2;
+        @apply lg:sticky lg:top-sticky-16 lg:max-w-xl;
       }
     }
   }

package/src/blocks/Content5.astro

@@ -0,0 +1,72 @@
+---
+// Content in 2 columns
+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 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']
+}
+
+const { tagline, heading, paragraph, buttons, image, content, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="content-5"
+  {...rest}
+>
+  <Container>
+    <Prose>
+      <Tagline text={tagline} />
+      <Heading
+        as="h2"
+        size="5xl"
+        text={heading}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+    </Prose>
+    <Prose class:list="content-5-main">
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Group>
+      <Buttons {buttons} />
+    </Group>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .content-5 {
+      .container {
+        @apply flex flex-col items-start gap-8;
+      }
+
+      .content-5-main {
+        @apply max-w-none break-inside-avoid gap-x-gutter lg:columns-2;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>