fulldev-ui 0.6.0-beta.10 → 0.6.0-beta.12

package/package.json

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

package/src/blocks/Content1.astro

@@ -33,7 +33,7 @@ const {
 
 <Section class="content-1">
   <Container>
-    <Prose>
+    <Prose class="mx-auto">
       <Tagline text={tagline} />
       <Heading
         size="5xl"

package/src/blocks/Header.astro

@@ -107,7 +107,7 @@ const {
 <style is:global>
   @layer fulldev {
     .header {
-      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center overflow-hidden border-b bg-background;
+      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center border-b bg-background;
       height: var(--header-height);
 
       &,

package/src/blocks/{Industries1.astro → JobCategories1.astro}

@@ -22,11 +22,11 @@ const { heading, button, pages, ...rest } = Astro.props
 ---
 
 <Section
-  class:list="industries-1"
+  class="job-categories-1"
   {...rest}
 >
-  <Container>
-    <Element class:list="industries-1-segment">
+  <Container class="flex flex-col gap-12">
+    <Element class="flex items-center justify-between gap-8">
       <Heading
         size="3xl"
         text={heading}
@@ -41,11 +41,11 @@ const { heading, button, pages, ...rest } = Astro.props
       {
         pages?.map(({ slug, data: { title, list, image } }) => (
           <Card
-            class="industries-1-card"
+            class="p-0"
             href={getHref(slug)}
           >
             <Image {...image} />
-            <Writeup>
+            <Writeup class="p-4">
               <Heading
                 as="h2"
                 size="lg"
@@ -62,25 +62,3 @@ const { heading, button, pages, ...rest } = Astro.props
     </Matrix>
   </Container>
 </Section>
-
-<style is:global>
-  @layer fulldev {
-    .industries-1 {
-      .container {
-        @apply flex flex-col gap-12;
-      }
-
-      .industries-1-segment {
-        @apply flex items-center justify-between gap-8;
-      }
-
-      .card {
-        @apply overflow-hidden p-0;
-
-        .writeup {
-          @apply p-4;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/JobCategory1.astro

@@ -0,0 +1,90 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import { getCollection } from 'astro:content'
+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 Card from 'fulldev-ui/structures/Card.astro'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Matrix from 'fulldev-ui/structures/Matrix.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props {
+  slug?: CollectionEntry<'pages'>['slug']
+  heading?: string | undefined
+  paragraph?: string | undefined
+  pages?: CollectionEntry<'pages'>[]
+}
+
+const { slug, heading, paragraph, pages, ...rest } = Astro.props
+
+// Jobs that reference the current category, or any of `pages` select categories
+const jobs = await getCollection('pages', (page) =>
+  page.data.parents?.some(
+    (category) =>
+      category.slug == slug || pages?.some((p) => p.slug == category.slug)
+  )
+)
+---
+
+<Section
+  class:list="job-category-1 flex flex-col gap-12 pt-0"
+  {...rest}
+>
+  <Container class="border-b py-12">
+    <Prose>
+      <Heading
+        as="h1"
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+    </Prose>
+  </Container>
+  <Container class="flex flex-col gap-12">
+    <Matrix class="gap-2">
+      {
+        pages?.map(({ slug, data: { title, image } }) => (
+          <Card
+            class="grid grid-cols-3 items-center bg-transparent p-0"
+            href={getHref(slug)}
+          >
+            <Image
+              class="h-full w-auto rounded-sm object-cover"
+              {...image}
+            />
+            <Heading
+              class="col-span-2 p-4"
+              as="h3"
+              size="md"
+              text={title}
+            />
+          </Card>
+        ))
+      }
+    </Matrix>
+    <Matrix>
+      {
+        jobs?.map(({ slug, data: { title, list } }) => (
+          <Card
+            class="jobs-1-card flex flex-col gap-3"
+            href={getHref(slug)}
+          >
+            <Heading
+              as="h2"
+              size="lg"
+              text={title}
+            />
+            <List
+              size="sm"
+              items={list}
+            />
+          </Card>
+        ))
+      }
+    </Matrix>
+  </Container>
+</Section>

package/src/blocks/Projects1.astro

@@ -48,7 +48,10 @@ const { tagline, heading, paragraph, buttons, content, cards } = Astro.props
         />
         <Fragment set:html={content} />
         <Group>
-          <Buttons {buttons} />
+          <Buttons
+            variant="secondary"
+            {buttons}
+          />
         </Group>
       </Prose>
       <Element class="flex flex-col gap-8">

package/src/layouts/{Product.astro → _Product.astro}

@@ -1,9 +1,9 @@
----
+<!-- ---
 // @ts-nocheck
 import type { ComponentProps } from 'astro/types'
 import { getImage } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
-import { getCollection, getEntry } from 'astro:content'
+import { getCollection,getEntry } from 'astro:content'
 import Products1 from 'fulldev-ui/blocks/Products1.astro'
 import CartForm from 'fulldev-ui/components/CartForm.svelte'
 import Element from 'fulldev-ui/components/Element.astro'
@@ -58,7 +58,7 @@ const baseLayout = await getEntry('layouts', 'base')
     <Element class:list="product-container">
       <Element class:list="product-main">
         <Gallery {images} />
-        <!-- <Prose {render} /> -->
+        <Prose {render} />
       </Element>
       <Element class:list="product-segment">
         <Element class:list="product-content">
@@ -69,10 +69,10 @@ const baseLayout = await getEntry('layouts', 'base')
           />
           <Paragraph text={description} />
         </Element>
-        <!-- <CartForm
+        <CartForm
           product={Astro.props}
           client:load
-        /> -->
+        />
         <List
           size="sm"
           items={baseLayout.data.banner?.split('|')}
@@ -112,4 +112,4 @@ const baseLayout = await getEntry('layouts', 'base')
       @apply bg-background;
     }
   }
-</style>
+</style> -->

package/src/schemas/page.ts

@@ -33,6 +33,7 @@ export const pageSchema = z
     sidebar: menuSchema.array().optional(),
     footer: blockSchema.optional(),
     parents: pathSchema('pages').array().optional(),
+    pages: pathSchema('pages').array().optional(),
   })
   .strict()
 

package/src/structures/Drawer.astro

@@ -42,7 +42,6 @@ const render = slot?.trim().length > 0
       >
         <Fragment set:html={slot} />
       </Element>
-
       <label
         for={id}
         class="drawer-backdrop"
@@ -62,7 +61,7 @@ const render = slot?.trim().length > 0
     }
 
     .drawer-backdrop {
-      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-full w-full bg-black opacity-0 transition-opacity;
+      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-screen w-full bg-black opacity-0 transition-opacity;
 
       &:is(.drawer-checkbox:checked ~ &) {
         @apply pointer-events-auto visible opacity-50;
@@ -70,7 +69,7 @@ const render = slot?.trim().length > 0
     }
 
     .drawer-body {
-      @apply fixed bottom-0 left-0 top-0 z-40 h-full w-80 max-w-[75vw] -translate-x-full overflow-y-auto rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
+      @apply fixed bottom-0 left-0 top-0 z-40 h-screen w-80 max-w-[75vw] -translate-x-full overflow-y-auto rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
       &:is(.drawer-checkbox:checked ~ &) {

package/src/structures/Prose.astro

@@ -89,6 +89,10 @@ const { ...rest } = Astro.props
         @apply my-12 rounded-md;
       }
 
+      blockquote > p + p {
+        @apply !mt-1;
+      }
+
       > *:first-child {
         @apply mt-0;
       }

package/src/layouts/Block.astro

@@ -1,81 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Footer from 'fulldev-ui/blocks/Footer.astro'
-import Header from 'fulldev-ui/blocks/Header.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Menus from 'fulldev-ui/components/Menus.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
-
-type Props = ComponentProps<typeof Layout> &
-  PageSchema & {
-    render: CollectionEntry<'pages'>['render']
-  }
-
-const { header, sidebar, render, title, description, footer } = Astro.props
-
-const { Content } = await render()
----
-
-<Layout
-  class:list="block"
-  {...Astro.props}
->
-  <Header
-    {...sidebar}
-    {...header}
-  />
-  <Container
-    class:list="block-main"
-    as="main"
-  >
-    <Sidebar>
-      <Menus
-        size="sm"
-        menus={sidebar?.menus}
-      />
-    </Sidebar>
-    <Container class:list="block-container">
-      <Prose class:list="block-prose">
-        <Heading
-          size="4xl"
-          as="h1"
-          text={title}
-        />
-        <Paragraph
-          muted
-          text={description}
-        />
-        <Content />
-      </Prose>
-    </Container>
-  </Container>
-  <Footer {...footer} />
-</Layout>
-
-<style is:global>
-  @layer fulldev {
-    .block {
-      .block-main {
-        @apply flex w-full items-start justify-between !px-0;
-      }
-
-      .block-container {
-        max-width: calc(100% - var(--sidebar-width)) !important;
-      }
-
-      .sidebar {
-        @apply hidden lg:flex;
-      }
-
-      .block-prose {
-        @apply mx-auto max-w-none py-8;
-      }
-    }
-  }
-</style>

package/src/layouts/Category.astro

@@ -1,136 +0,0 @@
-<!-- ---
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getCollection } from 'astro:content'
-import Products1 from 'fulldev-ui/blocks/Products1.astro'
-import Carousel from 'fulldev-ui/components/Carousel.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Select from 'fulldev-ui/components/Select.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-import { getHref } from 'fulldev-ui/utils/getHref.ts'
-
-interface Props extends ComponentProps<typeof Layout>, PageSchema {
-  render: CollectionEntry<'pages'>['render']
-  slug: CollectionEntry<'pages'>['slug']
-}
-
-const { render, slug, title, description } = Astro.props
-
-const categories = await getCollection('pages', ({ data }) =>
-  data.categories?.some((c) => c.slug.includes(slug))
-)
-
-const products = await getCollection('pages', ({ data }) =>
-  data.categories?.some((c) => c.slug.includes(slug))
-)
-
-const sorts = [
-  {
-    option: 'Aanbevolen',
-    products: [...products].sort(
-      (a, b) => (a.data.order || 0) - (b.data.order || 0)
-    ),
-  },
-  {
-    option: 'Prijs (laag - hoog)',
-    products: [...products].sort(
-      (a, b) => (a.data.price || 0) - (b.data.price || 0)
-    ),
-  },
-  {
-    option: 'Prijs (hoog - laag)',
-    products: [...products].sort(
-      (a, b) => (b.data.price || 0) - (a.data.price || 0)
-    ),
-  },
-  {
-    option: 'Alfabetisch (A-Z)',
-    products: [...products],
-  },
-  {
-    option: 'Alfabetisch (Z-A)',
-    products: [...products].sort((a, b) =>
-      (b.data.title || '').localeCompare(a.data.title || '')
-    ),
-  },
-]
----
-
-<script>
-  document.addEventListener('astro:page-load', () => {
-    const sort = document.querySelector('.sort')
-
-    sort?.addEventListener('change', (e) => {
-      const blocks = document.querySelectorAll('.products')
-      const value = (e.target as HTMLSelectElement).value
-      blocks?.forEach((block) => block.classList.add('hide'))
-
-      const block = document.querySelector(`.products[id='${value}']`)
-      block?.classList.remove('hide')
-    })
-  })
-</script>
-
-<Layout
-  class:list="category"
-  {...Astro.props}
->
-  <Intro1
-    heading={title}
-    text={description}
-  />
-  <Carousel>
-    {
-      categories.map((category) => (
-        <Element
-          as="a"
-          class:list="item"
-          href={getHref(category.slug)}
-        >
-          {category.data.title}
-        </Element>
-      ))
-    }
-  </Carousel>
-  <Element class:list="toolbar">
-    <span>{products.length} resultaten</span>
-    <Select
-      class:list="sort"
-      size="sm"
-      name="Sorteren"
-      options={sorts.map((sort) => sort.option)}
-    />
-  </Element>
-  {
-    sorts.map((sort: any) => (
-      <Products1
-        class:list={sort.option !== 'Aanbevolen' ? 'hide' : ''}
-        products={sort.products}
-      />
-    ))
-  }
-  <Prose {render} />
-  <slot />
-</Layout>
-
-<style is:global>
-  .carousel {
-    .item {
-      @apply min-w-48 rounded-sm border p-4 text-sm;
-    }
-  }
-
-  .products.hide {
-    @apply hidden;
-  }
-
-  .toolbar {
-    @apply container flex items-center justify-between pt-8;
-
-    span {
-      @apply text-sm text-muted-foreground;
-    }
-  }
-</style> -->

package/src/layouts/Doc.astro

@@ -1,96 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Footer from 'fulldev-ui/blocks/Footer.astro'
-import Header from 'fulldev-ui/blocks/Header.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import Menus from 'fulldev-ui/components/Menus.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
-
-type Props = ComponentProps<typeof Layout> &
-  PageSchema & {
-    render: CollectionEntry<'pages'>['render']
-  }
-
-const { header, sidebar, render, title, description, footer } = Astro.props
-
-const { Content, headings } = await render()
-
-const filteredHeadings = headings?.filter(
-  (heading: any) => heading.depth >= 2 && heading.depth <= 4
-)
-
-const links = filteredHeadings?.map((button: any) => ({
-  text: button.text,
-  href: `#${button.slug}`,
-  class: `depth-${button.depth}`,
-}))
----
-
-<Layout
-  class:list="doc"
-  {...Astro.props}
->
-  <Header
-    {...sidebar}
-    {...header}
-  />
-  <Container as="main">
-    <Sidebar>
-      <Menus
-        size="sm"
-        menus={sidebar?.menus}
-      />
-    </Sidebar>
-    <Container>
-      <Prose>
-        <Heading
-          size="4xl"
-          as="h1"
-          text={title}
-        />
-        <Paragraph
-          muted
-          text={description}
-        />
-        <Content />
-      </Prose>
-    </Container>
-    <Sidebar class:list="doc-toc">
-      <Menu
-        size="sm"
-        heading={title}
-        {links}
-      />
-    </Sidebar>
-  </Container>
-  <Footer {...footer} />
-</Layout>
-
-<style is:global>
-  @layer fulldev {
-    .doc {
-      main {
-        @apply flex w-full items-start justify-between !px-0;
-      }
-
-      .sidebar {
-        @apply hidden lg:flex;
-      }
-
-      .doc-toc {
-        @apply hidden xl:flex;
-      }
-
-      .prose {
-        @apply mx-auto py-8;
-      }
-    }
-  }
-</style>

package/src/layouts/Job.astro

@@ -1,60 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntries } from 'astro:content'
-import Content3 from 'fulldev-ui/blocks/Content3.astro'
-import Footer from 'fulldev-ui/blocks/Footer.astro'
-import Header from 'fulldev-ui/blocks/Header.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-import { getHref } from 'fulldev-ui/utils/getHref.ts'
-
-type Props = ComponentProps<typeof Layout> &
-  PageSchema & {
-    render: CollectionEntry<'pages'>['render']
-  }
-
-const {
-  title,
-  description,
-  list,
-  button,
-  buttons,
-  header,
-  sidebar,
-  render,
-  parents,
-  footer,
-} = Astro.props
-
-const parentEntries = parents && (await getEntries(parents))
-
-const { Content } = await render()
----
-
-<Layout
-  class:list="job"
-  {...Astro.props}
->
-  <Header
-    {...sidebar}
-    {...header}
-  />
-  <Element as="main">
-    <Content3
-      badges={parentEntries?.map((parent) => ({
-        text: parent.data.title,
-        href: getHref(parent.slug),
-      }))}
-      heading={title}
-      paragraph={description}
-      {list}
-      {button}
-      {buttons}
-    >
-      <Content />
-    </Content3>
-  </Element>
-  <Footer {...footer} />
-</Layout>

package/src/layouts/Jobs.astro

@@ -1,72 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Footer from 'fulldev-ui/blocks/Footer.astro'
-import Header from 'fulldev-ui/blocks/Header.astro'
-import Intro1 from 'fulldev-ui/blocks/Intro1.astro'
-import Jobs1 from 'fulldev-ui/blocks/Jobs1.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Sidebar from 'fulldev-ui/components/Sidebar.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
-import Container from 'fulldev-ui/structures/Container.astro'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-
-type Props = ComponentProps<typeof Layout> &
-  PageSchema & {
-    slug: CollectionEntry<'pages'>['slug']
-    render: CollectionEntry<'pages'>['render']
-  }
-
-const { slug, header, sidebar, render, title, description, footer } =
-  Astro.props
-
-const { Content } = await render()
-
-// const children = (
-//   await getCollection('pages', ({ data }) =>
-//     data.parents?.some((p) => p.slug.includes(slug))
-//   )
-// )?.map(({ collection, slug }) => ({ collection, slug }))
----
-
-<Layout
-  class:list="jobs"
-  {...Astro.props}
->
-  <Header
-    {...sidebar}
-    {...header}
-  />
-  <Container class:list="jobs-container">
-    <Sidebar {...sidebar} />
-    <Element
-      class:list="jobs-main"
-      as="main"
-    >
-      <Intro1
-        heading={title}
-        paragraph={description}
-      />
-      <!-- <Jobs1 pages={children} /> -->
-      <Prose>
-        <Content />
-      </Prose>
-    </Element>
-  </Container>
-</Layout>
-<Footer {...footer} />
-
-<style is:global>
-  @layer fulldev {
-    .jobs {
-      .jobs-container {
-        @apply flex !pr-0;
-      }
-
-      .jobs-main {
-        @apply flex w-full flex-col;
-      }
-    }
-  }
-</style>

package/src/layouts/Post.astro

@@ -1,53 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Content1 from 'fulldev-ui/blocks/Content1.astro'
-import Footer from 'fulldev-ui/blocks/Footer.astro'
-import Header from 'fulldev-ui/blocks/Header.astro'
-import Block from 'fulldev-ui/components/Block.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-
-type Props = ComponentProps<typeof Layout> &
-  PageSchema & {
-    render: CollectionEntry<'pages'>['render']
-  }
-
-const {
-  title,
-  description,
-  list,
-  button,
-  header,
-  sidebar,
-  sections,
-  footer,
-  render,
-} = Astro.props
-
-const { Content, headings } = await render()
----
-
-<Layout
-  class:list="post"
-  {...Astro.props}
->
-  <Header
-    {...sidebar}
-    {...header}
-  />
-  <Element as="main">
-    <Content1
-      heading={title}
-      paragraph={description}
-      {list}
-      {button}
-      {headings}
-    >
-      <Content />
-    </Content1>
-    {sections?.map((section) => <Block {...section} />)}
-  </Element>
-  <Footer {...footer} />
-</Layout>