fulldev-ui 0.5.0-beta.9 → 0.6.0-beta.0

package/src/images/logo-basic.svg

@@ -0,0 +1,10 @@
+<svg width="622" height="601" viewBox="0 0 622 601" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M418.133 0H621.066L588.933 117.5H386L418.133 0Z" fill="#FF5500"/>
+<path d="M275.133 234H478.066L445.933 351.5H243L275.133 234Z" fill="#FF5500"/>
+<path d="M225.133 0H428.066L395.933 117.5H193L225.133 0Z" fill="#FF5500"/>
+<path d="M130.133 234H333.066L300.933 351.5H98L130.133 234Z" fill="#FF5500"/>
+<path d="M99.1329 348L233.633 348L201.5 465.5H67L99.1329 348Z" fill="#FF5500"/>
+<path d="M78.1329 424L212.633 424L180.5 541.5H46L78.1329 424Z" fill="#FF5500"/>
+<path d="M61.94 483L195.633 483L163.693 600.5H30L61.94 483Z" fill="#FF5500"/>
+<path d="M32.1329 0H235.066L202.933 117.5H0L32.1329 0Z" fill="#FF5500"/>
+</svg>

package/src/images/logo-simple.svg

@@ -0,0 +1,13 @@
+<svg width="1610" height="1666" viewBox="0 0 1610 1666" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1250.82 1H1609.5L1542.62 248.771C1524.95 314.216 1465.59 359.68 1397.8 359.68H1154L1250.82 1Z" fill="#FF5500"/>
+<path d="M592.82 0H951.5L854.68 358.68H496L592.82 0Z" fill="#FF5500"/>
+<path d="M908.82 1H1267.5L1170.68 359.68H812L908.82 1Z" fill="#FF5500"/>
+<path d="M234.82 0H593.5L496.68 358.68H138L234.82 0Z" fill="#FF5500"/>
+<path d="M66.882 110.909C84.5479 45.4638 143.911 0 211.699 0H455.5L358.68 358.68H0L66.882 110.909Z" fill="#FF5500"/>
+<path d="M336.681 737H695.36L598.54 1095.68H239.86L336.681 737Z" fill="#FF5500"/>
+<path d="M336.681 737H695.36L598.54 1095.68H239.86L336.681 737Z" fill="#FF5500"/>
+<path d="M693.82 737H1052.5L955.68 1095.68H597L693.82 737Z" fill="#FF5500"/>
+<path d="M1037.82 737H1396.5L1299.68 1095.68H941L1037.82 737Z" fill="#FF5500"/>
+<path d="M240.82 1092H599.5L502.68 1450.68H144L240.82 1092Z" fill="#FF5500"/>
+<path d="M182.82 1307H541.5L444.68 1665.68H86L182.82 1307Z" fill="#FF5500"/>
+</svg>

package/src/images/logo-thin.svg

@@ -0,0 +1,15 @@
+<svg width="1960" height="2035" viewBox="0 0 1960 2035" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1600.82 1H1959.5L1892.62 248.771C1874.95 314.216 1815.59 359.68 1747.8 359.68H1504L1600.82 1Z" fill="#FF5500"/>
+<path d="M942.82 0H1301.5L1204.68 358.68H846L942.82 0Z" fill="#FF5500"/>
+<path d="M1258.82 1H1617.5L1520.68 359.68H1162L1258.82 1Z" fill="#FF5500"/>
+<path d="M584.82 0H943.5L846.68 358.68H488L584.82 0Z" fill="#FF5500"/>
+<path d="M196.882 110.909C214.548 45.4638 273.911 0 341.699 0H585.5L488.68 358.68H130L196.882 110.909Z" fill="#FF5500"/>
+<path d="M716.681 840H1075.36L978.54 1198.68H619.86L716.681 840Z" fill="#FF5500"/>
+<path d="M1064.82 840H1423.5L1326.68 1198.68H968L1064.82 840Z" fill="#FF5500"/>
+<path d="M358.681 840H717.36L620.54 1198.68H261.86L358.681 840Z" fill="#FF5500"/>
+<path d="M262.82 1195H621.5L524.68 1553.68H166L262.82 1195Z" fill="#FF5500"/>
+<path d="M204.82 1410H563.5L466.68 1768.68H108L204.82 1410Z" fill="#FF5500"/>
+<path d="M131.82 1676H490.5L393.68 2034.68H35L131.82 1676Z" fill="#FF5500"/>
+<path d="M177.82 180H536.5L439.68 538.68H81L177.82 180Z" fill="#FF5500"/>
+<path d="M96.8202 481H455.5L358.68 839.68H0L96.8202 481Z" fill="#FF5500"/>
+</svg>

package/src/images/logo.svg

@@ -0,0 +1,14 @@
+<svg width="1960" height="1797" viewBox="0 0 1960 1797" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1600.82 1H1959.5L1892.62 248.771C1874.95 314.216 1815.59 359.68 1747.8 359.68H1504L1600.82 1Z" fill="#FF5500"/>
+<path d="M942.82 0H1301.5L1204.68 358.68H846L942.82 0Z" fill="#FF5500"/>
+<path d="M1258.82 1H1617.5L1520.68 359.68H1162L1258.82 1Z" fill="#FF5500"/>
+<path d="M584.82 0H943.5L846.68 358.68H488L584.82 0Z" fill="#FF5500"/>
+<path d="M196.882 110.909C214.548 45.4638 273.911 0 341.699 0H585.5L488.68 358.68H130L196.882 110.909Z" fill="#FF5500"/>
+<path d="M1025.68 602H1384.36L1287.54 960.68H928.86L1025.68 602Z" fill="#FF5500"/>
+<path d="M667.681 602H1026.36L929.54 960.68H570.86L667.681 602Z" fill="#FF5500"/>
+<path d="M571.82 957H930.5L833.68 1315.68H475L571.82 957Z" fill="#FF5500"/>
+<path d="M513.82 1172H872.5L775.68 1530.68H417L513.82 1172Z" fill="#FF5500"/>
+<path d="M440.82 1438H799.5L702.68 1796.68H344L440.82 1438Z" fill="#FF5500"/>
+<path d="M177.82 180H536.5L439.68 538.68H81L177.82 180Z" fill="#FF5500"/>
+<path d="M96.8202 481H455.5L358.68 839.68H0L96.8202 481Z" fill="#FF5500"/>
+</svg>

package/src/images/logofat.svg

@@ -0,0 +1,11 @@
+<svg width="1449" height="1467" viewBox="0 0 1449 1467" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1089.82 0H1448.5L1381.62 247.771C1363.95 313.216 1304.59 358.68 1236.8 358.68H993L1089.82 0Z" fill="#FF5500"/>
+<path d="M861.82 0H1220.5L1123.68 358.68H765L861.82 0Z" fill="#FF5500"/>
+<path d="M503.82 0H862.5L765.68 358.68H407L503.82 0Z" fill="#FF5500"/>
+<path d="M115.882 110.909C133.548 45.4638 192.911 0 260.699 0H504.5L407.68 358.68H49L115.882 110.909Z" fill="#FF5500"/>
+<path d="M716.681 538H1075.36L978.54 896.68H619.86L716.681 538Z" fill="#FF5500"/>
+<path d="M358.681 538H717.36L620.54 896.68H261.86L358.681 538Z" fill="#FF5500"/>
+<path d="M262.82 893H621.5L524.68 1251.68H166L262.82 893Z" fill="#FF5500"/>
+<path d="M204.82 1108H563.5L466.68 1466.68H108L204.82 1108Z" fill="#FF5500"/>
+<path d="M96.8202 180H455.5L358.68 538.68H0L96.8202 180Z" fill="#FF5500"/>
+</svg>

package/src/integration/index.ts

@@ -1,16 +1,15 @@
-import viteYaml from '@rollup/plugin-yaml'
+import mdx from '@astrojs/mdx'
+import sitemap from '@astrojs/sitemap'
 import type { AstroIntegration } from 'astro'
 import favicons from 'astro-favicons'
+import liveCode from 'astro-live-code'
+import robotsTxt from 'astro-robots-txt'
+import { envField } from 'astro/config'
 import type { CollectionEntry } from 'astro:content'
-import merge from 'deepmerge'
-import virtual from 'vite-plugin-virtual'
-import { generateRadixColors } from './generate-colors'
-
-type Color = {
-  background: Parameters<typeof generateRadixColors>[0]['background']
-  base: Parameters<typeof generateRadixColors>[0]['gray']
-  brand: Parameters<typeof generateRadixColors>[0]['accent']
-}
+import tailwindcss from 'tailwindcss'
+import tailwindcssNesting from 'tailwindcss/nesting'
+import { loadEnv } from 'vite'
+import tailwindConfig from '../../tailwind.config.ts'
 
 interface Config {
   favicon?: string
@@ -18,45 +17,68 @@ interface Config {
   css?: string
   basePreset?: CollectionEntry<'presets'>['id']
   injectRoutes?: boolean
-  // generateImageEntries?: boolean
-  colors: {
-    theme: 'light' | 'dark'
-    light?: Color | undefined
-    dark?: Color | undefined
-  }
-}
-
-const defaultConfig: Config = {
-  colors: {
-    theme: 'light',
-    light: {
-      background: '#fff',
-      base: '#000',
-      brand: '#000',
-    },
-  },
-  // generateImageEntries: false,
 }
 
 export default function fulldevIntegration(
-  userConfig?: Partial<Config> | undefined
+  config?: Partial<Config> | undefined
 ): AstroIntegration {
-  const config = merge(defaultConfig, userConfig ?? {})
-
   return {
     name: '/integration',
     hooks: {
       'astro:config:setup': async ({
-        config: astroConfig,
         updateConfig,
-        injectScript,
         injectRoute,
+        injectScript,
       }) => {
         // ----------------------
-        // Inject favicon integration
+        // Update config
         // ----------------------
-        config.favicon &&
-          config.company &&
+        updateConfig({
+          site: loadEnv(process.env.NODE_ENV as any, process.cwd(), '').URL,
+          experimental: {
+            contentLayer: true,
+            env: {
+              schema: {
+                URL: envField.string({
+                  context: 'client',
+                  access: 'public',
+                }),
+                STRIPE_RESTRICTED_KEY: envField.string({
+                  context: 'client',
+                  access: 'public',
+                  optional: true,
+                }),
+                STRIPE_SECRET_KEY: envField.string({
+                  context: 'server',
+                  access: 'secret',
+                  optional: true,
+                }),
+              },
+              validateSecrets: true,
+            },
+          },
+          integrations: [
+            mdx(),
+            sitemap(),
+            robotsTxt(),
+            liveCode({
+              layout: '/src/components/Code.astro',
+            }),
+          ],
+          vite: {
+            css: {
+              postcss: {
+                plugins: [tailwindcss(tailwindConfig), tailwindcssNesting],
+              },
+            },
+          },
+        })
+
+        // ----------------------
+        // Inject Favicon
+        // ----------------------
+        config?.favicon &&
+          config?.company &&
           updateConfig({
             integrations: [
               favicons({
@@ -64,109 +86,26 @@ export default function fulldevIntegration(
                 masterPicture: config.favicon,
                 appName: config.company,
                 appShortName: config.company,
+                appDescription: config.company,
               }),
             ],
           })
         // ----------------------
-        // Inject css
+        // Inject routes
         // ----------------------
-        config?.css && injectScript('page-ssr', `import "${config?.css}";`)
-
-        const generateCss = (
-          defaultTheme: 'light' | 'dark',
-          theme: 'light' | 'dark',
-          color: Color
-        ) => {
-          const { background, base, brand } = color
-          const generated = generateRadixColors({
-            background,
-            appearance: theme,
-            gray: base,
-            accent: brand,
-          })
-
-          const scaleToString = (
-            scale: any,
-            palette: 'base' | 'brand',
-            alpha?: boolean | undefined
-          ) =>
-            scale
-              .map(
-                (color: any, i: any) =>
-                  `--${palette}-${alpha ? 'a' : ''}${i + 1}: ${color};`
-              )
-              .join('\n')
-
-          const baseString = scaleToString(generated.grayScale, 'base', false)
-          const baseAlphaString = scaleToString(
-            generated.grayScaleAlpha,
-            'base',
-            true
-          )
-          const brandString = scaleToString(
-            generated.accentScale,
-            'brand',
-            false
-          )
-          const brandAlphaString = scaleToString(
-            generated.accentScaleAlpha,
-            'brand',
-            true
-          )
-          const brandContrastString = `--brand-contrast: ${generated.accentContrast};`
-          const baseContrastString = `--base-contrast: ${generated.accentContrast};`
-          const baseBackgroundString = `--base-background: ${generated.background};`
-          const brandBackgroundString = `--brand-background: ${generated.background};`
-          const colorSchemeString = `--color-scheme: ${theme};`
-
-          const css = `${defaultTheme == theme ? ':root, ' : ''} .theme-${theme}  {
-  ${baseString}
-  ${baseAlphaString}
-  ${baseContrastString}
-  ${baseBackgroundString}
-  ${brandString}
-  ${brandAlphaString}
-  ${brandContrastString}
-  ${brandBackgroundString}
-  ${colorSchemeString}
-  }`
-          return css
+        if (config?.injectRoutes) {
+          const pages = import.meta.glob('/src/pages/**/*.astro')
+          !pages['/src/pages/[...page].astro'] &&
+            injectRoute({
+              pattern: '/[...page]',
+              entrypoint: 'fulldev-ui/[...page].astro',
+            })
         }
 
-        const lightCss =
-          (config.colors.light &&
-            generateCss(config.colors.theme, 'light', config.colors.light)) ||
-          ''
-        const darkCss =
-          (config.colors.dark &&
-            generateCss(config.colors.theme, 'dark', config.colors.dark)) ||
-          ''
-
-        const css = lightCss + '\n' + darkCss
-
-        updateConfig({
-          vite: {
-            plugins: [
-              viteYaml(),
-              virtual({
-                'virtual:astro/config': `export default ${JSON.stringify(astroConfig)}`,
-                'virtual:fulldev-ui/config': `export default ${JSON.stringify({
-                  ...config,
-                })}`,
-                'virtual:colors.css': css,
-              }) as any,
-            ],
-            css: {
-              preprocessorOptions: {
-                scss: {
-                  api: 'modern',
-                },
-              },
-            },
-          },
-        })
-
-        injectScript('page-ssr', `import "virtual:colors.css";`)
+        // ----------------------
+        // Inject css
+        // ----------------------
+        config?.css && injectScript('page-ssr', `import "${config?.css}";`)
 
         // ----------------------
         // Generate image YAML files
@@ -198,18 +137,6 @@ export default function fulldevIntegration(
         //     console.error('Error generating image YAML files:', error)
         //   }
         // }
-
-        // ----------------------
-        // Inject routes
-        // ----------------------
-        if (config.injectRoutes) {
-          const pages = import.meta.glob('/src/pages/**/*.astro')
-          !pages['/src/pages/[...page].astro'] &&
-            injectRoute({
-              pattern: '/[...page]',
-              entrypoint: 'fulldev-ui/[...page].astro',
-            })
-        }
       },
     },
   }

package/src/layouts/CategoryLayout.astro

@@ -0,0 +1,135 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { getCollection } from 'astro:content'
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+import Products from 'fulldev-ui/blocks/Products.astro'
+import Carousel from 'fulldev-ui/components/Carousel.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Sections from 'fulldev-ui/components/sections.astro'
+import Select from 'fulldev-ui/components/Select.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = ComponentProps<typeof Layout>
+
+const { slug, sections, title, image, images, description, render } =
+  Astro.props
+
+const children = await getCollection('pages', (page) =>
+  page.data.categories?.some((c: any) => c.slug.includes(slug))
+)
+
+const categories = children?.filter(
+  (c) => c.data.component === 'CategoryLayout'
+)
+
+const products = children?.filter((c) => c.data.component === 'ProductLayout')
+
+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 {...Astro.props}>
+  <Intro
+    heading={title}
+    paragraph={description}
+    image={image || images?.[0]}
+  />
+  <Carousel>
+    {
+      categories.map((category) => (
+        <Element
+          as="a"
+          class:list="item"
+          href={`/${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) => (
+      <Products
+        class:list={sort.option !== 'Aanbevolen' ? 'hide' : ''}
+        id={sort.option}
+        cards={sort.products}
+      />
+    ))
+  }
+  <Prose {render} />
+  <Sections {sections} />
+  <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>