fulldev-ui 0.5.0-beta.8 → 0.6.0-beta-4

package/src/images/favicon/manifest.webmanifest

@@ -0,0 +1,30 @@
+{
+  "name": "Fulldev UI",
+  "short_name": "Fulldev UI",
+  "description": "Fulldev UI",
+  "dir": "auto",
+  "lang": "en-GB",
+  "display": "standalone",
+  "display_override": [
+    "window-controls-overlay",
+    "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": "maskable"
+    }
+  ]
+}

package/src/images/favicon/safari-pinned-tab.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/src/images/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/images/logo-1.svg

@@ -0,0 +1,11 @@
+<svg width="694" height="671" viewBox="0 0 694 671" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M490.133 0H693.066L660.933 117.5H458L490.133 0Z" fill="#FF5500"/>
+<path d="M286.133 304H489.066L456.933 421.5H254L286.133 304Z" fill="#FF5500"/>
+<path d="M297.133 0H500.066L467.933 117.5H265L297.133 0Z" fill="#FF5500"/>
+<path d="M141.133 304H344.066L311.933 421.5H109L141.133 304Z" fill="#FF5500"/>
+<path d="M110.133 418L244.633 418L212.5 535.5H78L110.133 418Z" fill="#FF5500"/>
+<path d="M89.1329 494L223.633 494L191.5 611.5H57L89.1329 494Z" fill="#FF5500"/>
+<path d="M72.94 553L206.633 553L174.693 670.5H41L72.94 553Z" fill="#FF5500"/>
+<path d="M104.133 0H307.066L274.933 117.5H72L104.133 0Z" fill="#FF5500"/>
+<path d="M32.1329 0H235.066L202.933 117.5H0L32.1329 0Z" fill="#FF5500"/>
+</svg>

package/src/images/logo-2.svg

@@ -0,0 +1,13 @@
+<svg width="694" height="739" viewBox="0 0 694 739" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M490.133 0H693.066L660.933 117.5H458L490.133 0Z" fill="#FF5500"/>
+<path d="M286.133 304H489.066L456.933 421.5H254L286.133 304Z" fill="#FF5500"/>
+<path d="M354.133 304H557.066L524.933 421.5H322L354.133 304Z" fill="#FF5500"/>
+<path d="M297.133 0H500.066L467.933 117.5H265L297.133 0Z" fill="#FF5500"/>
+<path d="M141.133 304H344.066L311.933 421.5H109L141.133 304Z" fill="#FF5500"/>
+<path d="M110.133 418L244.633 418L212.5 535.5H78L110.133 418Z" fill="#FF5500"/>
+<path d="M89.1329 494L223.633 494L191.5 611.5H57L89.1329 494Z" fill="#FF5500"/>
+<path d="M72.94 553L206.633 553L174.693 670.5H41L72.94 553Z" fill="#FF5500"/>
+<path d="M54.94 621L188.633 621L156.693 738.5H23L54.94 621Z" fill="#FF5500"/>
+<path d="M104.133 0H307.066L274.933 117.5H72L104.133 0Z" fill="#FF5500"/>
+<path d="M32.1329 0H235.066L202.933 117.5H0L32.1329 0Z" fill="#FF5500"/>
+</svg>

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,62 +1,102 @@
-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 type { CollectionEntry } from 'astro:content'
-import merge from 'deepmerge'
+import liveCode from 'astro-live-code'
+import robotsTxt from 'astro-robots-txt'
+import { envField } from 'astro/config'
+import fs from 'fs'
+import yaml from 'js-yaml'
+import path from 'path'
+import { assign } from 'radash'
+import tailwindcss from 'tailwindcss'
+import tailwindcssNesting from 'tailwindcss/nesting'
+import { loadEnv } from 'vite'
 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 tailwindConfig from '../../tailwind.config.ts'
 
 interface Config {
   favicon?: string
   company?: string
   css?: string
-  basePreset?: CollectionEntry<'presets'>['id']
   injectRoutes?: boolean
-  // generateImageEntries?: boolean
-  colors: {
-    theme: 'light' | 'dark'
-    light?: Color | undefined
-    dark?: Color | undefined
+  cloudcannon?: boolean
+  cart?: boolean
+  overrides?: {
+    [k: string]: string
   }
 }
 
-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: {
+            resolve: {
+              alias: {
+                ...config?.overrides,
+              },
+            },
+            plugins: [
+              virtual({
+                'virtual:fulldev-ui/config': config ?? {},
+              }),
+            ],
+            css: {
+              postcss: {
+                plugins: [tailwindcss(tailwindConfig), tailwindcssNesting],
+              },
+            },
+          },
+        })
+
+        // ----------------------
+        // Inject Favicon
+        // ----------------------
+        config?.favicon &&
+          config?.company &&
           updateConfig({
             integrations: [
               favicons({
@@ -64,109 +104,29 @@ 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,
+        if (config?.injectRoutes) {
+          injectRoute({
+            pattern: '/[...page]',
+            entrypoint: 'fulldev-ui/pages/[...page].astro',
           })
-
-          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
         }
 
-        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',
-                },
-              },
-            },
-          },
-        })
+        // ----------------------
+        // Inject css
+        // ----------------------
+        config?.css && injectScript('page-ssr', `import "${config?.css}";`)
 
-        injectScript('page-ssr', `import "virtual:colors.css";`)
+        // ----------------------
+        // merge Cloudcannon configs
+        // ----------------------
 
         // ----------------------
         // Generate image YAML files
@@ -198,17 +158,27 @@ export default function fulldevIntegration(
         //     console.error('Error generating image YAML files:', error)
         //   }
         // }
+      },
+      'astro:build:done': async () => {
+        if (config?.cloudcannon) {
+          const __dirname = path.dirname(new URL(import.meta.url).pathname)
+          const libDir = path.join(__dirname, '../../cloudcannon.config.yml')
+          const userDir = path.join(process.cwd(), 'cloudcannon.config.yml')
 
-        // ----------------------
-        // 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',
-            })
+          console.log({ libDir, userDir })
+
+          const libConfig = yaml.load(
+            fs.readFileSync(path.resolve(libDir), 'utf8')
+          )
+
+          const userConfig = yaml.load(
+            fs.readFileSync(path.resolve(userDir), 'utf8')
+          )
+
+          const mergedConfig = assign(libConfig || {}, userConfig || {})
+          const yamlContent = yaml.dump(mergedConfig)
+
+          await fs.promises.writeFile(userDir, yamlContent, 'utf8')
         }
       },
     },

package/src/layouts/Category.astro

@@ -0,0 +1,131 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Layout from 'fulldev-ui/components/Layout.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Select from 'fulldev-ui/components/Select.astro'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+type Props = ComponentProps<typeof Layout>
+
+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

@@ -0,0 +1,72 @@
+---
+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 Container from 'fulldev-ui/components/Container.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Sidebar from 'fulldev-ui/components/Sidebar.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import type { LayoutSchema } from 'fulldev-ui/schemas/layoutSchema.ts'
+import type { PageSchema } from 'fulldev-ui/schemas/pageSchema.ts'
+
+type Props = ComponentProps<typeof Layout> &
+  LayoutSchema &
+  PageSchema &
+  Pick<CollectionEntry<'pages'>, 'render'>
+
+const { header, sidebar, render, title, description, footer } = Astro.props
+
+const { Content } = await render()
+---
+
+<Layout
+  class:list="doc"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container class:list="doc-container">
+    <Sidebar {...sidebar} />
+    <Element
+      class:list="doc-main"
+      as="main"
+    >
+      <Prose>
+        <Heading
+          as="h1"
+          size="4xl"
+          text={title}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={description}
+        />
+        <Content />
+      </Prose>
+      <Toc {render} />
+    </Element>
+  </Container>
+  <Footer {...footer} />
+</Layout>
+
+<style is:global>
+  @layer fulldev {
+    .doc {
+      .doc-container {
+        @apply flex gap-x-gutter;
+      }
+
+      .doc-main {
+        @apply flex grow justify-evenly gap-x-gutter;
+      }
+    }
+  }
+</style>