fulldev-ui 0.4.15 → 0.4.16

package/src/components/Root.astro

@@ -87,7 +87,7 @@ const render =
 
   @layer fulldev {
     .root {
-      z-index: 1;
+      z-index: 0;
       box-sizing: border-box;
     }
   }

package/src/components/Section.astro

@@ -41,7 +41,14 @@ type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> & {
   frame?: 'none' | 'fill' | 'panel'
   align?: 'start' | 'center' | 'end'
   justify?: 'start' | 'center' | 'end'
-  structure?: 'column' | 'split' | 'spread' | 'carousel' | 'grid' | 'masonry'
+  structure?:
+    | 'column'
+    | 'split'
+    | 'spread'
+    | 'carousel'
+    | 'grid'
+    | 'masonry'
+    | 'stack'
   level?: 1 | 2 | 3 | 4 | 5 | 6
   space?: 'auto' | 'none'
   reverse?: 'odd' | 'even'
@@ -75,12 +82,16 @@ const {
   pages,
   records,
   mask,
+  justify,
+  theme,
   ratio,
   ...rest
 } = Astro.props
 
 const mergedCards = (pages || records || cards)?.filter(Boolean)
 const hasCards = mergedCards && mergedCards?.length > 0
+const hasText = text || html || description || list
+const hasButton = button || (buttons && buttons?.length > 0)
 
 const buttonVariant = (i: number) => {
   if (variant === 'primary' && i === 0) return 'primary'
@@ -95,6 +106,8 @@ const buttonVariant = (i: number) => {
 <Root
   class:list="section"
   variant={hasCards ? undefined : variant}
+  justify={hasCards ? undefined : justify}
+  theme={hasCards ? undefined : theme}
   structure={structure === 'split' ? 'split' : 'column'}
   frame={frame === 'panel' && hasCards ? 'none' : frame}
   {as}
@@ -104,7 +117,9 @@ const buttonVariant = (i: number) => {
   {...rest}
 >
   <Box
-    structure={structure === 'spread' || structure === 'carousel'
+    structure={structure === 'spread' ||
+    structure === 'carousel' ||
+    (!hasText && hasButton)
       ? 'spread'
       : 'column'}
     align={structure === 'split' ? 'start' : align}
@@ -119,6 +134,7 @@ const buttonVariant = (i: number) => {
         <slot name="writeup">
           <Rating
             color="brand"
+            {align}
             {...typeof rating === 'number' ? { value: rating } : rating}
           />
           <Badge
@@ -174,6 +190,8 @@ const buttonVariant = (i: number) => {
               level={Number(level) + 2}
               {position}
               {frame}
+              {justify}
+              {theme}
               {variant}
               {ratio}
               {mask}

package/src/components/Stack.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const { ...rest } = Astro.props
+---
+
+<Root
+  class:list="stack"
+  {...rest}
+>
+  <slot />
+</Root>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .stack {
+      display: grid;
+      position: relative;
+      grid-template-columns: 1fr;
+      align-items: flex-start;
+      gap: var(--space-6);
+      width: 100%;
+
+      @media (min-width: 1024px) {
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+      }
+    }
+  }
+</style>

package/src/components/docs/NavigationButtons.astro

@@ -0,0 +1,59 @@
+---
+import { getCollection } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Section from '../Section.astro'
+import Spread from '../Spread.astro'
+
+const { sidebar = [] } = Astro.props
+
+const allPages = await getCollection('pages')
+const pages = []
+
+for (const item of sidebar as any) {
+  if (item.links) pages.push(...item.links)
+  if (item.folder) {
+    const folderPages = allPages.filter(
+      (page: any) =>
+        page.slug.startsWith(item.folder) && !page.slug.endsWith(item.folder)
+    )
+    pages.push(
+      ...folderPages.map((page: any) => ({
+        href: `/${page.slug}`,
+        text: page.data.title,
+      }))
+    )
+  }
+}
+
+const withoutLeadingOrTrailingSlashes = (path: string) =>
+  path.replace(/^\/+|\/+$/g, '')
+
+const currentIndex = pages.findIndex(
+  (page: any) =>
+    withoutLeadingOrTrailingSlashes(page?.href) ===
+    withoutLeadingOrTrailingSlashes(Astro.url.pathname)
+)
+
+const prevPage = pages[currentIndex - 1]
+const nextPage = pages[currentIndex + 1]
+---
+
+{
+  sidebar && sidebar.length > 0 && (
+    <Section>
+      <Spread>
+        <Button
+          href={prevPage?.href}
+          variant="secondary"
+          text={prevPage ? `← ${prevPage.text}` : undefined}
+        />
+        <Button
+          href={nextPage?.href}
+          variant="secondary"
+          text={nextPage ? `${nextPage.text} →` : undefined}
+          style={{ marginLeft: 'auto' }}
+        />
+      </Spread>
+    </Section>
+  )
+}

package/src/components/experimental/Channel.astro

@@ -51,10 +51,7 @@ const {
       {level}
       set:html={heading}
     />
-    <Text
-      style={{ marginTop: 'var(--space-1)' }}
-      set:html={text}
-    />
+    <Text set:html={text} />
   </Column>
 </Root>
 

package/src/content/pages/_segment/footer.mdx

@@ -16,7 +16,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
 
 <Footer
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   align="start"
   size="sm"
   columns={[
@@ -45,7 +45,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
 
 <Footer
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   align="start"
   size="sm"
   columns={[
@@ -70,7 +70,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
 
 <Footer
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   align="start"
   size="sm"
   structure="spread"
@@ -88,7 +88,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
 
 <Footer
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   align="start"
   size="md"
   structure="spread"
@@ -106,7 +106,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
 
 <Footer
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   align="start"
   size="lg"
   structure="spread"
@@ -133,7 +133,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
   structure="spread"
   align="start"
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   columns={[
     {
       heading: 'Links',
@@ -151,7 +151,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
   structure="spread"
   align="start"
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   columns={[
     {
       heading: 'Links',
@@ -169,7 +169,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
   structure="spread"
   align="start"
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   columns={[
     {
       heading: 'Links',
@@ -187,7 +187,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
   structure="spread"
   align="start"
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   columns={[
     {
       heading: 'Links',
@@ -211,7 +211,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
   structure="spread"
   align="start"
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   columns={[
     {
       heading: 'Links',
@@ -229,7 +229,7 @@ import Footer from 'fulldev-ui/components/Footer.astro'
   structure="spread"
   align="start"
   heading="Fulldev UI"
-  set:html="Rapidly build content-driven websites."
+  text="Rapidly build content-driven websites."
   columns={[
     {
       heading: 'Links',

package/src/content/pages/base/badge.mdx

@@ -66,5 +66,5 @@ import Badge from 'fulldev-ui/components/Badge.astro'
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge icon="circle" set:html="Badge" />
+<Badge icon="circle" text="Badge" />
 ```

package/src/content/pages/base/button.mdx

@@ -38,7 +38,7 @@ import Button from 'fulldev-ui/components/Button.astro'
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<Button icon="circle" set:html="Button" set:html="Buttontje" />
+<Button icon="circle" text="Button" text="Buttontje" />
 ```
 
 ```astro live
@@ -46,9 +46,9 @@ import Button from 'fulldev-ui/components/Button.astro'
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<Button size="sm" set:html="Button" />
-<Button size="md" set:html="Button" />
-<Button size="lg" set:html="Button" />
+<Button size="sm" text="Button" />
+<Button size="md" text="Button" />
+<Button size="lg" text="Button" />
 ```
 
 ```astro live
@@ -56,8 +56,8 @@ import Button from 'fulldev-ui/components/Button.astro'
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<Button color="base" set:html="Button" />
-<Button color="brand" set:html="Button" />
+<Button color="base" text="Button" />
+<Button color="brand" text="Button" />
 ```
 
 ```astro live
@@ -65,7 +65,7 @@ import Button from 'fulldev-ui/components/Button.astro'
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<Button radius="none" set:html="Button" />
-<Button radius="auto" set:html="Button" />
-<Button radius="full" set:html="Button" />
+<Button radius="none" text="Button" />
+<Button radius="auto" text="Button" />
+<Button radius="full" text="Button" />
 ```

package/src/content/pages/overview/showcase.mdx

@@ -0,0 +1,62 @@
+---
+showcase:
+  # Add your project here below 👇
+
+  - heading: Van Dillen Antieke Bouwmaterialen
+    image: /showcase/van-dillen-antieke-bouwmaterialen.webp
+    href: 'https://vdabouwmaterialen.nl'
+  - heading: Anti Slip Profiles
+    image: /showcase/anti-slip-profiles.webp
+    href: 'https://antislipprofiles.com'
+  - heading: Fulldev UI
+    image: /showcase/fulldev-ui.webp
+    href: 'https://ui.ull.dev'
+  - heading: The Gym Haren
+    image: /showcase/the-gym-haren.webp
+    href: 'https://thegymharen.nl'
+  - heading: Lavis Detailing
+    image: /showcase/lavis-detailing.webp
+    href: 'https://lavisdetailing.nl'
+  - heading: Leren Trainingsacteren
+    image: /showcase/leren-trainingsacteren.webp
+    href: 'https://lerentrainingsacteren.nl'
+  - heading: Miele Witgoedcenter Amsterdam
+    image: /showcase/miele-witgoedcenter-amsterdam.webp
+    href: 'https://witgoedcenteramsterdam.nl'
+  - heading: Sloepverhuur Bolsward
+    image: /showcase/sloepverhuur-bolsward.webp
+    href: 'https://sloepverhuurbolsward.nl'
+  - heading: Stark Vulcanising Products
+    image: /showcase/stark-vulcanising-products.webp
+
+_layout: PostLayout
+settings: components
+---
+
+import Masonry from 'fulldev-ui/components/Masonry.astro'
+import Card from 'fulldev-ui/components/Card.astro'
+
+# Showcase
+
+Projects that are built with Fulldev UI.
+
+<Card
+  color="brand"
+  size="sm"
+  frame="panel"
+  style={{ marginTop: 'var(--space-6)', marginBottom: 'var(--space-7)' }}
+  heading="Your project in this showcase?"
+  description="Add your project to the showcase in 1 minute."
+  button={{
+    text: 'Add your project',
+    variant: 'secondary',
+    href: 'https://github.com/fulldotdev/ui/blob/main/CONTRIBUTING.md#showcase',
+    target: '_blank',
+  }}
+/>
+
+<Masonry>
+  {frontmatter.showcase.map((showcase) => (
+    <Card frame="panel" position="inset" {...showcase} target="_blank" />
+  ))}
+</Masonry>

package/src/content/pages/structure/stack.mdx

@@ -0,0 +1,22 @@
+---
+_layout: BlockLayout
+settings: components
+
+title: Stack
+---
+
+```astro live
+---
+import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Stack from 'fulldev-ui/components/Stack.astro'
+---
+
+<Section>
+  <Stack>
+    <DecorativeBox />
+    <DecorativeBox />
+    <DecorativeBox />
+  </Stack>
+</Section>
+```

package/src/content/settings/base.yml

@@ -11,6 +11,8 @@ header:
       href: /typography/heading
     - text: Blocks
       href: /blocks
+    - text: Showcase
+      href: /overview/showcase
   search:
     icon: search
     variant: soft
@@ -43,6 +45,8 @@ header:
           href: /overview/theming
         - text: Frameworks
           href: /overview/frameworks
+        - text: Showcase
+          href: /overview/showcase
     - heading: Typography
       folder: typography
     - heading: Base

package/src/content/settings/components.yml

@@ -11,6 +11,8 @@ sidebar:
         href: /overview/theming
       - text: Frameworks
         href: /overview/frameworks
+      - text: Showcase
+        href: /overview/showcase
   - heading: Typography
     folder: typography
   - heading: Base

package/src/css/custom.css

@@ -1,4 +1,19 @@
+/* TODO: temporary decreased due to z-index issue over header */
 .hero:not(.window .hero)::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: radial-gradient(
+    ellipse closest-side,
+    rgba(255, 85, 0, 0.1),
+    #f500 70%
+  );
+  width: 100%;
+  height: 100%;
+  content: '';
+}
+/* .hero:not(.window .hero)::before {
   position: absolute;
   top: -80%;
   left: 0;
@@ -11,7 +26,7 @@
   width: 100%;
   height: 170%;
   content: '';
-}
+} */
 
 .header:not(.window .header) {
   backdrop-filter: blur(10px);

package/src/layouts/Layout.astro

@@ -7,6 +7,7 @@ import Head from 'fulldev-ui/components/Head.astro'
 import Header from 'fulldev-ui/components/Header.astro'
 import Sidebar from 'fulldev-ui/components/Sidebar.astro'
 import Toc from 'fulldev-ui/components/Toc.astro'
+import NavigationButtons from '../components/docs/NavigationButtons.astro'
 
 type Props = Partial<CollectionEntry<'pages'>> & {
   class?: string
@@ -44,10 +45,7 @@ const h2Headings = headings.filter((heading: any) => heading.depth === 2)
       },
     ]}
   >
-    <Header
-      {logo}
-      {...header}
-    />
+    <Header {...header} />
     <div class="core">
       <Sidebar {sidebar} />
       <main data-pagefind-body>
@@ -57,6 +55,7 @@ const h2Headings = headings.filter((heading: any) => heading.depth === 2)
         />
         <div class="blocks">
           <slot />
+          <NavigationButtons {sidebar} />
         </div>
       </main>
     </div>
@@ -87,78 +86,80 @@ const h2Headings = headings.filter((heading: any) => heading.depth === 2)
 
     <Fragment set:html={data?.code?.body} />
     <style lang="scss" is:global>
-      :root {
-        --screen: 1536px;
-        --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
-        --gutter-left: var(--gutter);
-        --gutter-right: var(--gutter);
-        --sidebar-width: 0px;
-        --toc-width: 0px;
-        --header-height: calc(
-          var(--text-2) + 2 * var(--space-4) + 2 * var(--space-3)
-        );
-      }
+      @layer fulldev {
+        :root {
+          --screen: 1536px;
+          --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
+          --gutter-left: var(--gutter);
+          --gutter-right: var(--gutter);
+          --sidebar-width: 0px;
+          --toc-width: 0px;
+          --header-height: calc(
+            var(--text-2) + 2 * var(--space-4) + 2 * var(--space-3)
+          );
+        }
 
-      html,
-      body {
-        box-sizing: border-box;
-        margin: 0;
-        background-color: var(--color-background);
-        padding: 0;
-        width: 100%;
-        min-height: 100vh;
-        color: var(--base-11);
-        color-scheme: var(--color-scheme);
-        font-size: var(--text-2);
-        font-family: var(--font-family);
-      }
+        html,
+        body {
+          box-sizing: border-box;
+          margin: 0;
+          background-color: var(--color-background);
+          padding: 0;
+          width: 100%;
+          min-height: 100vh;
+          color: var(--base-11);
+          color-scheme: var(--color-scheme);
+          font-size: var(--text-2);
+          font-family: var(--font-family);
+        }
 
-      body {
-        display: flex;
-        flex-direction: column;
+        body {
+          display: flex;
+          flex-direction: column;
 
-        @media (min-width: 1024px) {
-          &.has-sidebar .core {
-            --gutter-left: var(--space-6);
-            --sidebar-width: calc(var(--gutter) + 200px);
+          @media (min-width: 1024px) {
+            &.has-sidebar .core {
+              --gutter-left: var(--space-6);
+              --sidebar-width: calc(var(--gutter) + 200px);
 
-            display: grid;
-            grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
-          }
+              display: grid;
+              grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+            }
 
-          &.has-toc main {
-            --gutter-right: var(--space-6);
-            --toc-width: calc(var(--gutter) + 200px);
+            &.has-toc main {
+              --gutter-right: var(--space-6);
+              --toc-width: calc(var(--gutter) + 200px);
 
-            display: grid;
-            grid-template-columns: minmax(0, 1fr) var(--toc-width);
+              display: grid;
+              grid-template-columns: minmax(0, 1fr) var(--toc-width);
+            }
           }
-        }
-
-        .header {
-          width: 100%;
-          height: var(--header-height);
-        }
 
-        .core {
-          .sidebar {
-            position: sticky;
-            top: 0;
-            padding-left: var(--gutter);
+          .header {
+            width: 100%;
+            height: var(--header-height);
           }
 
-          main {
-            .toc {
+          .core {
+            .sidebar {
               position: sticky;
               top: 0;
-              order: 1;
-              padding-right: var(--gutter);
+              padding-left: var(--gutter);
             }
 
-            .blocks {
-              display: flex;
-              flex-direction: column;
-              width: 100%;
+            main {
+              .toc {
+                position: sticky;
+                top: 0;
+                order: 1;
+                padding-right: var(--gutter);
+              }
+
+              .blocks {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+              }
             }
           }
         }

package/src/schemas/base.ts

@@ -32,7 +32,16 @@ export const base = z
     html: z.string(),
     image: z.string(),
     images: z.string().array(),
-    rating: z.number(),
+    rating: z.number().or(
+      z
+        .object({
+          value: z.number(),
+          label: z.string(),
+          avatars: z.string().array(),
+          avatar: z.string(),
+        })
+        .partial()
+    ),
     button: button,
     buttons: button.array(),
     link: link,