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

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,136 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+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 type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+  slug: CollectionEntry<'pages'>['slug']
+}
+
+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,56 @@
+---
+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 { PageSchema } from 'fulldev-ui/schemas/page.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: 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>

package/src/layouts/Job.astro

@@ -0,0 +1,60 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntries } from 'astro:content'
+import Content3 from 'fulldev-ui/blocks/Content3.astro'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
+
+const {
+  title,
+  description,
+  list,
+  button,
+  header,
+  sidebar,
+  render,
+  categories,
+  blocks,
+  footer,
+} = Astro.props
+
+const categoriesEntries = categories && (await getEntries(categories))
+
+const { Content } = await render()
+---
+
+<Layout
+  class:list="job"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    <Content3
+      badges={categoriesEntries?.map((category) => ({
+        text: category.data.title,
+        href: getHref(category.slug),
+      }))}
+      heading={title}
+      paragraph={description}
+      {list}
+      {button}
+    >
+      <Content />
+    </Content3>
+    {blocks?.map((block) => <Block {...block} />)}
+  </Element>
+  <Footer {...footer} />
+</Layout>

package/src/layouts/Page.astro

@@ -0,0 +1,29 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Banner from 'fulldev-ui/blocks/Banner.astro'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {}
+
+const { banner, sidebar, header, blocks, footer } = Astro.props
+---
+
+<Layout
+  class:list="page"
+  {...Astro.props}
+>
+  <Banner {...banner} />
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    {blocks?.map((block) => <Block {...block} />)}
+  </Element>
+  <Footer {...footer} />
+</Layout>

package/src/layouts/Post.astro

@@ -0,0 +1,52 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Content1 from 'fulldev-ui/blocks/Content1.astro'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
+
+const {
+  title,
+  description,
+  list,
+  button,
+  header,
+  sidebar,
+  blocks,
+  footer,
+  render,
+} = Astro.props
+
+const { Content, headings } = await render()
+---
+
+<Layout
+  class:list="post"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    <Content1
+      heading={title}
+      paragraph={description}
+      {list}
+      {button}
+      {headings}
+    >
+      <Content />
+    </Content1>
+    {blocks?.map((block) => <Block {...block} />)}
+  </Element>
+  <Footer {...footer} />
+</Layout>