fulldev-ui 0.4.29 → 0.5.0-beta.0

package/.astro/data-store.json

@@ -0,0 +1 @@
+[["Map",1,2,7,8],"meta::meta",["Map",3,4,5,6],"astro-version","4.16.6","config-digest","0df9cf64727d4e91","images",["Map",9,10,17,18,23,24,27,28,31,32,35,36,40,41,47,48,53,54,59,60,64,65,68,69,73,74,77,78,83,84,89,90,95,96,99,100,104,105,108,109,113,114,117,118,121,122,125,126],"anti-slip-profiles.webp",{"id":9,"data":11},{"id":9,"src":12,"alt":13,"width":14,"height":15,"format":16},"/src/images/anti-slip-profiles.webp","",1430,931,"webp","avatar-1.jpeg",{"id":17,"data":19},{"id":17,"src":20,"alt":13,"width":21,"height":21,"format":22},"/src/images/avatar-1.jpeg",500,"jpg","avatar-2.jpeg",{"id":23,"data":25},{"id":23,"src":26,"alt":13,"width":21,"height":21,"format":22},"/src/images/avatar-2.jpeg","avatar-3.jpeg",{"id":27,"data":29},{"id":27,"src":30,"alt":13,"width":21,"height":21,"format":22},"/src/images/avatar-3.jpeg","avatar-4.jpeg",{"id":31,"data":33},{"id":31,"src":34,"alt":13,"width":21,"height":21,"format":22},"/src/images/avatar-4.jpeg","avatar-placeholder.jpg",{"id":35,"data":37},{"id":35,"src":38,"alt":13,"width":39,"height":39,"format":16},"/src/images/avatar-placeholder.jpg",600,"block-code.png",{"id":40,"data":42},{"id":40,"src":43,"alt":13,"width":44,"height":45,"format":46},"/src/images/block-code.png",2508,1556,"png","component-code.png",{"id":47,"data":49},{"id":47,"src":50,"alt":13,"width":51,"height":52,"format":46},"/src/images/component-code.png",1930,1182,"favicon.svg",{"id":53,"data":55},{"id":53,"src":56,"alt":13,"width":57,"height":57,"format":58},"/src/images/favicon.svg",758,"svg","fulldev-ui.webp",{"id":59,"data":61},{"id":59,"src":62,"alt":13,"width":14,"height":63,"format":16},"/src/images/fulldev-ui.webp",817,"lavis-detailing.webp",{"id":64,"data":66},{"id":64,"src":67,"alt":13,"width":14,"height":15,"format":16},"/src/images/lavis-detailing.webp","leren-trainingsacteren.webp",{"id":68,"data":70},{"id":68,"src":71,"alt":13,"width":14,"height":72,"format":16},"/src/images/leren-trainingsacteren.webp",799,"miele-witgoedcenter-amsterdam.webp",{"id":73,"data":75},{"id":73,"src":76,"alt":13,"width":14,"height":15,"format":16},"/src/images/miele-witgoedcenter-amsterdam.webp","og-image.png",{"id":77,"data":79},{"id":77,"src":80,"alt":13,"width":81,"height":82,"format":46},"/src/images/og-image.png",1200,630,"placeholder-center.webp",{"id":83,"data":85},{"id":83,"src":86,"alt":13,"width":87,"height":88,"format":16},"/src/images/placeholder-center.webp",1792,1024,"placeholder-landscape-dark.png",{"id":89,"data":91},{"id":89,"src":92,"alt":13,"width":93,"height":94,"format":46},"/src/images/placeholder-landscape-dark.png",1920,1282,"placeholder-landscape.webp",{"id":95,"data":97},{"id":95,"src":98,"alt":13,"width":93,"height":94,"format":16},"/src/images/placeholder-landscape.webp","placeholder-portrait.webp",{"id":99,"data":101},{"id":99,"src":102,"alt":13,"width":93,"height":103,"format":16},"/src/images/placeholder-portrait.webp",2874,"placeholder-right.webp",{"id":104,"data":106},{"id":104,"src":107,"alt":13,"width":87,"height":88,"format":16},"/src/images/placeholder-right.webp","placeholder.webp",{"id":108,"data":110},{"id":108,"src":111,"alt":13,"width":81,"height":112,"format":16},"/src/images/placeholder.webp",800,"sloepverhuur-bolsward.webp",{"id":113,"data":115},{"id":113,"src":116,"alt":13,"width":14,"height":15,"format":16},"/src/images/sloepverhuur-bolsward.webp","stark-vulcanising-products.webp",{"id":117,"data":119},{"id":117,"src":120,"alt":13,"width":14,"height":15,"format":16},"/src/images/stark-vulcanising-products.webp","the-gym-haren.webp",{"id":121,"data":123},{"id":121,"src":124,"alt":13,"width":14,"height":15,"format":16},"/src/images/the-gym-haren.webp","van-dillen-antieke-bouwmaterialen.webp",{"id":125,"data":127},{"id":125,"src":128,"alt":13,"width":129,"height":130,"format":16},"/src/images/van-dillen-antieke-bouwmaterialen.webp",1420,925]

package/.astro/modules.mjs

@@ -0,0 +1 @@
+export default new Map();

package/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1728554592879
+	}
+}

package/.astro/types.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="astro/content.d.ts" />

package/CONTRIBUTING.md

@@ -101,8 +101,8 @@ For a faster and easier review we advise you to use [conventional commits](https
 Have you used fulldev-ui to build a website? Add it to the showcase!
 
 1. Fork this repository.
-2. Add a screenshot of your site to the `public/showcase/` directory.
-3. Add your site to the `showcase` array at the top of `src/content/pages/showcase.mdx`.
+2. Add a screenshot of your site to the `public/images/showcase/` directory.
+3. Create a file which is your unslugged domain in `src/pages/records/showcase/` for example `src/pages/records/showcase/google-com.mdx`.
 4. Go to the forked repository on your Github and clicke the 'Contribute` button to make a Pull Request.
 
 ## Community / Contact

package/astro.config.ts

@@ -1,5 +1,6 @@
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
+import favicons from 'astro-favicons'
 // @ts-ignore
 import liveCode from 'astro-live-code'
 import pagefind from 'astro-pagefind'
@@ -9,29 +10,43 @@ import integration from 'fulldev-ui/integration'
 // https://astro.build/config
 export default defineConfig({
   site: 'https://ui.full.dev',
+  devToolbar: {
+    enabled: false,
+  },
+  experimental: {
+    contentIntellisense: false,
+    contentLayer: true,
+  },
   integrations: [
     sitemap(),
     mdx(),
     pagefind(),
-
     liveCode({
       layout: '/src/components/experimental/Window.astro',
     }),
+    favicons({
+      path: 'favicon',
+      masterPicture: 'src/images/favicon.svg',
+      appName: 'Fulldev UI',
+      appShortName: 'Fulldev UI',
+    }),
     integration({
       css: '/src/css/custom.css',
       colors: {
         theme: 'dark',
         light: {
           background: '#fff',
-          base: '#6F6D66',
+          base: '#0F0F0F',
           brand: '#F50',
         },
         dark: {
-          background: '#111110',
-          base: '#6F6D66',
+          background: '#0F0F0F',
+          base: '#0F0F0F',
           brand: '#F50',
         },
       },
+      injectRoutes: true,
+      overrideComponents: true,
     }),
   ],
   redirects: {
@@ -40,5 +55,6 @@ export default defineConfig({
     '/segment/section': '/base/section',
     '/segment/header': '/blocks/header',
     '/segment/footer': '/blocks/footer',
+    '/blocks': '/blocks/banner',
   },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.4.29",
+  "version": "0.5.0-beta.0",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -24,7 +24,8 @@
     "preview": "astro preview",
     "build:prod": "astro check && astro build",
     "astro": "astro",
-    "test": "astro check && astro build && astro preview --host"
+    "test": "astro check && astro build && astro preview --host",
+    "link": "pnpm link --global"
   },
   "type": "module",
   "exports": {
@@ -36,13 +37,15 @@
     "./unocss": "./src/integration/unocss-preset.ts"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.7",
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrolib/seo": "1.0.0-beta.6",
-    "@iconify-json/tabler": "^1.2.3",
+    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrolib/seo": "1.0.0-beta.8",
+    "@iconify-json/tabler": "^1.2.5",
     "@radix-ui/colors": "^3.0.0",
-    "@unocss/reset": "^0.62.4",
-    "astro": "^4.15.8",
+    "@types/js-yaml": "^4.0.9",
+    "@unocss/reset": "^0.63.4",
+    "astro": "^4.16.6",
+    "astro-favicons": "^2.0.2",
     "astro-live-code": "^0.0.3",
     "astro-pagefind": "^1.6.0",
     "astro-seo": "^0.8.4",
@@ -50,20 +53,27 @@
     "colorjs.io": "^0.5.2",
     "deepmerge": "^4.3.1",
     "fs": "0.0.1-security",
+    "install": "^0.13.0",
+    "js-yaml": "^4.1.0",
+    "npm": "^10.9.0",
     "radash": "^12.1.0",
-    "remeda": "2.14.0",
-    "sass": "^1.78.0",
-    "tailwindcss": "^3.4.12",
-    "typescript": "^5.6.2",
-    "unocss": "^0.62.4",
+    "remeda": "2.15.2",
+    "sass": "^1.80.2",
+    "sharp": "^0.33.5",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "unocss": "^0.63.4",
     "url": "^0.11.4",
-    "vite-plugin-virtual": "^0.3.0"
+    "vite-plugin-virtual": "^0.3.0",
+    "zod": "^3.23.8",
+    "zod-to-ts": "^1.2.0"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.3",
+    "@astrojs/check": "^0.9.4",
+    "@rollup/plugin-yaml": "^4.1.2",
     "prettier": "3.3.3",
     "prettier-plugin-astro": "0.14.1",
-    "prettier-plugin-astro-organize-imports": "^0.4.9",
+    "prettier-plugin-astro-organize-imports": "^0.4.10",
     "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-organize-imports": "^4.1.0"
   }

package/public/favicon/browserconfig.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/favicon/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/favicon/mstile-150x150.png"/>
+      <TileColor>#fff</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

package/public/favicon/favicon.svg

@@ -0,0 +1,16 @@
+<svg width="758" height="758" viewBox="0 0 758 758" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_5)">
+<rect width="758" height="758" fill="#FF5500"/>
+<rect x="-133" y="-133" width="1024" height="1024" fill="url(#paint0_radial_45_5)"/>
+<path d="M269.363 565C264.945 565 261.363 561.419 261.363 557V200.637C261.363 196.218 264.945 192.637 269.363 192.637H499.909C504.327 192.637 507.909 196.218 507.909 200.637V249.546C507.909 253.964 504.327 257.546 499.909 257.546H348.091C343.672 257.546 340.091 261.128 340.091 265.546V338.273C340.091 342.691 343.672 346.273 348.091 346.273H483.545C487.963 346.273 491.545 349.855 491.545 354.273V403.182C491.545 407.6 487.963 411.182 483.545 411.182H348.091C343.672 411.182 340.091 414.764 340.091 419.182V557C340.091 561.419 336.509 565 332.091 565H269.363Z" fill="#EEEEEC"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_45_5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(379 379) rotate(45) scale(724.077)">
+<stop stop-color="#111110" stop-opacity="0.2"/>
+<stop offset="0.9" stop-color="#111110" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_45_5">
+<rect width="758" height="758" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/public/favicon/manifest.webmanifest

@@ -0,0 +1,26 @@
+{
+  "name": "Fulldev UI",
+  "short_name": "Fulldev UI",
+  "description": "A Multi-platform Favicon generator for Astro Project.",
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}

package/public/favicon/safari-pinned-tab.svg

@@ -1,17 +1,16 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="525.000000pt" height="525.000000pt" viewBox="0 0 525.000000 525.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,525.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M81 5237 c-19 -7 -44 -25 -55 -40 l-21 -28 0 -2543 c0 -2445 1 -2543
-18 -2570 40 -60 -141 -56 2599 -55 1920 0 2521 3 2547 12 19 7 44 25 55 40
-l21 28 0 2543 c0 2445 -1 2543 -18 2570 -40 60 141 56 -2599 55 -1920 0 -2521
--3 -2547 -12z"/>
+<svg width="758" height="758" viewBox="0 0 758 758" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_5)">
+<rect width="758" height="758" fill="#FF5500"/>
+<rect x="-133" y="-133" width="1024" height="1024" fill="url(#paint0_radial_45_5)"/>
+<path d="M269.363 565C264.945 565 261.363 561.419 261.363 557V200.637C261.363 196.218 264.945 192.637 269.363 192.637H499.909C504.327 192.637 507.909 196.218 507.909 200.637V249.546C507.909 253.964 504.327 257.546 499.909 257.546H348.091C343.672 257.546 340.091 261.128 340.091 265.546V338.273C340.091 342.691 343.672 346.273 348.091 346.273H483.545C487.963 346.273 491.545 349.855 491.545 354.273V403.182C491.545 407.6 487.963 411.182 483.545 411.182H348.091C343.672 411.182 340.091 414.764 340.091 419.182V557C340.091 561.419 336.509 565 332.091 565H269.363Z" fill="#EEEEEC"/>
 </g>
+<defs>
+<radialGradient id="paint0_radial_45_5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(379 379) rotate(45) scale(724.077)">
+<stop stop-color="#111110" stop-opacity="0.2"/>
+<stop offset="0.9" stop-color="#111110" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_45_5">
+<rect width="758" height="758" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/public/favicon/yandex-browser-manifest.json

@@ -0,0 +1,9 @@
+{
+  "version": "1.0",
+  "api_version": 1,
+  "layout": {
+    "logo": "/favicon/yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}

package/src/blocks/Article.astro

@@ -0,0 +1,21 @@
+---
+import { getEntry } from 'astro:content'
+import Prose from 'fulldev-ui/components/experimental/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+
+const { ...rest } = Astro.props
+
+const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
+const currentEntry = await getEntry('pages', slug)
+const render = currentEntry && (await currentEntry.render())
+const { Content } = render || {}
+---
+
+<Section
+  style={{ '--screen': '768px' }}
+  {...rest}
+>
+  <Prose id="prose">
+    {Content && <Content />}
+  </Prose>
+</Section>

package/src/blocks/Banner.astro

@@ -0,0 +1,47 @@
+---
+import Element from 'fulldev-ui/components/Element.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+
+type Props = {
+  color?: 'base' | 'brand' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
+}
+
+const { color = 'brand', size = 'sm', text, ...rest } = Astro.props
+---
+
+<Element
+  class:list={'banner'}
+  as="header"
+  {size}
+  {color}
+  {...rest}
+>
+  <Text text={text} />
+</Element>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    .banner {
+      display: flex;
+      position: relative;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--color-9);
+      padding: 0 var(--gutter);
+      width: 100%;
+      height: var(--banner-height);
+      overflow: hidden;
+
+      .text {
+        color: var(--color-contrast);
+      }
+
+      &,
+      & ~ * {
+        --banner-height: 32px;
+      }
+    }
+  }
+</style>

package/src/blocks/Colleagues.astro

@@ -5,8 +5,9 @@ const { ...rest } = Astro.props
 ---
 
 <Section
-  class:list="employees"
+  class:list="colleagues"
   structure="grid"
   align="center"
+  position="inset"
   {...rest}
 />

package/src/blocks/Contact.astro

@@ -1,154 +1,139 @@
 ---
 import Button from 'fulldev-ui/components/Button.astro'
-import Column from 'fulldev-ui/components/Column.astro'
-import Channel from 'fulldev-ui/components/experimental/Channel.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Channels from 'fulldev-ui/components/Channels.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Form from 'fulldev-ui/components/experimental/Form.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Input from 'fulldev-ui/components/Input.astro'
-import Row from 'fulldev-ui/components/Row.astro'
 import Section from 'fulldev-ui/components/Section.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import Text from 'fulldev-ui/components/Text.astro'
 import Textarea from 'fulldev-ui/components/Textarea.astro'
 
+// interface Channel {
+//   type: 'tel' | 'email' | 'address'
+//   text: string
+//   heading?: string
+//   icon?: string
+//   href?: string
+// }
+
+// interface FormField {
+//   type: 'text' | 'email' | 'tel' | 'textarea'
+//   name: string
+//   label: string
+//   required?: boolean
+// }
+
+// interface Form {
+//   fields: FormField[]
+//   button: string
+// }
+
+// type Props<As extends HTMLTag = 'section'> = ComponentProps<
+//   typeof Section<As>
+// > & {
+//   form: Form
+//   googleMaps?: string
+//   socials?: any
+//   channels: Channel[]
+// }
+
 const {
   heading,
+  form,
   text,
   tagline,
   googleMaps,
   buttons,
-  channels,
   socials,
   position,
   image,
+  channels,
+  level = 2,
   ...rest
 } = Astro.props
 ---
 
 <Section
-  class:list={'contact'}
+  class:list="contact"
   structure="split"
   {...rest}
 >
-  <Column>
-    <Tagline text={tagline} />
+  <Element class:list="column">
+    <Tagline
+      color="brand"
+      text={tagline}
+    />
     <Heading
-      level={1}
+      level={level}
       text={heading}
     />
     <Text text={text} />
-    <Row>
-      {buttons?.map((button: any) => <Button {...button} />)}
-    </Row>
-    <Column>
-      <Channel
-        if={channels?.phone}
-        icon="phone"
-        heading="Telefoon"
-        text={channels?.phone}
-        href={`tel:${channels?.phone}`}
-      />
-      <Channel
-        if={channels?.email}
-        icon="mail"
-        heading="Email"
-        text={channels?.email}
-        href={`mailto:${channels?.email}`}
-      />
-      {
-        channels?.address && (
-          <Channel
-            if={channels?.address}
-            icon="pin"
-            heading="Adres"
-            text={channels?.address}
-          />
-        )
-      }
-    </Column>
-    {
-      socials && (
-        <Row size="sm">
-          {socials?.facebook && (
-            <Button
-              href={socials?.facebook}
-              variant="secondary"
-              icon="brand-facebook"
-            />
-          )}
-          {socials?.instagram && (
-            <Button
-              href={socials?.instagram}
-              variant="secondary"
-              href={socials?.instagram}
-              icon="brand-instagram"
-            />
-          )}
-        </Row>
-      )
-    }
-
+    <Buttons {buttons} />
+    <Channels {channels} />
+    <Socials {socials} />
     <Form
-      action="/bedankt"
+      action="/thank-you"
       method="POST"
     >
-      <Input
-        label="Naam"
-        id="Naam"
-        name="Naam"
-        type="text"
-        required
-      />
-      <Input
-        label="Email"
-        id="Email"
-        name="Email"
-        type="email"
-        required
-      />
-      <Input
-        label="Telefoon"
-        id="Telefoon"
-        name="Telefoon"
-        type="tel"
-        required
-      />
-      <Textarea
-        label="Bericht"
-        id="Bericht"
-        name="Bericht"
-      />
+      {
+        form.fields.map((field: any) => {
+          if (field.type === 'textarea') {
+            return (
+              <Textarea
+                label={field.label}
+                id={field.name}
+                name={field.name}
+                required={field.required}
+              />
+            )
+          }
+          return (
+            <Input
+              label={field.label}
+              id={field.name}
+              name={field.name}
+              type={field.type}
+              required={field.required}
+            />
+          )
+        })
+      }
       <Button
-        as="button"
         type="submit"
         color="brand"
-        text="Verstuur bericht"
+        text={form.button}
       />
     </Form>
-  </Column>
+  </Element>
 
-  <!-- <iframe
-    src={googleMaps}
-    width="100%"
-    height="450"
-    style="border:0; margin-top: var(--space-6);"
-    allowfullscreen="false"
-    loading="lazy"
-    referrerpolicy="no-referrer-when-downgrade"
-  ></iframe> -->
   <Image
     {position}
-    src={image}
+    {...image}
   />
 </Section>
 
 <style is:global lang="scss">
   @layer fulldev {
     .contact {
+      .column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
       .channel + .channel {
         margin-top: var(--space-3) !important;
       }
+
+      .socials {
+        display: flex;
+        gap: var(--space-2);
+      }
     }
   }
 </style>

package/src/blocks/Cta.astro

@@ -8,7 +8,8 @@ const { ...rest } = Astro.props
   class:list="cta"
   variant="primary"
   align="center"
-  frame="panel"
   size="lg"
+  color="brand"
+  panel
   {...rest}
 />