fulldev-ui 0.4.14 → 0.4.16

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/integration/index.ts

@@ -129,13 +129,13 @@ export default function fulldevIntegration(
                 'virtual:colors.css': css,
               }),
             ],
-            // css: {
-            //   preprocessorOptions: {
-            //     scss: {
-            //       additionalData: `$layer: ${config.layer};`,
-            //     },
-            //   },
-            // },
+            css: {
+              preprocessorOptions: {
+                scss: {
+                  api: 'modern',
+                },
+              },
+            },
           },
         })
 

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,