fulldev-ui 0.6.5 → 0.7.0-beta.1

package/src/content/pages/docs/structures/masonry.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Masonry
-description: Places items like cards in a masonry layout
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/matrix.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Matrix
-description: Places items like cards in a grid
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/panel.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Panel
-description: A box with a border, padding and rounded corners used for sections
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/prose.mdx

@@ -1,33 +0,0 @@
----
-_block: Content7
-title: Prose
-description: Applies styling to child components
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-```astro live
----
-import Prose from 'fulldev-ui/structures/Prose.astro'
----
-
-<Prose>
-  <h1>Welcome to Our Blog</h1>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia
-    odio vitae vestibulum vestibulum.
-  </p>
-
-  <h2>Key Features</h2>
-  <p>
-    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-    ex ea commodo consequat.
-  </p>
-  <ul>
-    <li>Simple and elegant design</li>
-    <li>Responsive layout</li>
-    <li>Easy customization</li>
-  </ul>
-</Prose>
-```

package/src/content/pages/docs/structures/section.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Section
-description: Sets vertical padding and some base styles
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/stack.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Stack
-description: Places items like cards in a horizontal or vertical stack
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/writeup.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Writeup
-description: Applies styling to child components, similar to Prose
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures.mdx

@@ -1,7 +0,0 @@
----
-_block: Content7
-title: Using Structures
-description: Build consistent blocks and layouts with structures.
----
-
-Please look into the the blocks and layouts in the Gtihub repo to see how they are used.

package/src/content/pages/index.mdx

@@ -1,52 +0,0 @@
----
-_schema: page
-_block: Hero1
-
-title: Fulldev UI - Astro component and block library, open-source
-description: Make websites rapidly with pre-built components and blocks.
-heading: The Astro UI library for building content sites
-paragraph: Components and blocks to build content-driven websites.
-buttons:
-  - text: Get Started
-    href: /docs/
-  - text: GitHub
-    href: https://github.com/fulldotdev/ui
-    icon: brand-github
-    target: _blank
-
-sections:
-  - _block: Content2
-    tagline: Blocks
-    heading: Use pre-built blocks with just props
-    paragraph: We created a great gallery of blocks to build content sites with a modern look and feel, all of our blocks are build with components from the library to achieve a consistent look.
-    image:
-      src: /images/block-code.png
-    buttons:
-      - href: /docs/blocks/
-        icon: layout
-        text: View blocks
-        variant: secondary
-
-  - _block: Content2
-    tagline: Components
-    heading: Or build your own, with easy to use components
-    paragraph: Our rich set of components make it easy to build your own blocks with great customizability through props and global theming.
-    image:
-      src: /images/component-code.png
-    buttons:
-      - text: View components
-        href: /docs/components/
-        icon: code
-        variant: secondary
-
-  - _block: Cta1
-    heading: Build content websites in a fraction of time
-    paragraph: A library of components and blocks to build content sites, fast.
-    buttons:
-      - text: Get Started
-        href: /docs/
-      - text: Github
-        href: https://github.com/fulldotdev/ui
-        icon: brand-github
-        target: _blank
----

package/src/content/pages/showcase.mdx

@@ -1,30 +0,0 @@
----
-title: Showcase
----
-
-import Card from 'fulldev-ui/structures/Card.astro'
-import { getCollection } from 'astro:content'
-
-export const projects = (
-  await getCollection(
-    'pages',
-    ({ slug }) => slug.startsWith('showcase') && slug !== 'showcase'
-  )
-).map((p) => p.data)
-
-# Showcase
-
-Projects that are built with Fulldev UI.
-
-<Card
-  size="sm"
-  style={{ marginTop: 'var(--space-6)', marginBottom: 'var(--space-7)' }}
-  heading="Your project in this showcase?"
-  text="Add your project to the showcase in 1 minute."
-  panel
-  button={{
-    text: 'Add your project',
-    href: 'https://github.com/fulldotdev/ui/blob/main/CONTRIBUTING.md#showcase',
-    target: '_blank',
-  }}
-/>

package/src/css/custom.css

@@ -1,24 +0,0 @@
-@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);
-
-* {
-  font-family: 'Inter', sans-serif;
-}
-
-mark {
-  background-color: var(--brand-12) !important;
-  color: var(--brand-1) !important;
-}
-
-.rounded-full {
-  border-radius: 999px !important;
-}
-
-.hero .heading,
-.hero .lead {
-  max-width: 680px;
-  text-wrap: balance;
-}
-
-.logo .image {
-  border-radius: 2px;
-}

package/src/css/theme.css

@@ -1,62 +0,0 @@
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 4.8% 95.9%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-
-    color-scheme: dark;
-  }
-}
-
-.astro-code {
-  @apply mt-4 rounded-md p-4 text-sm first:mt-0;
-}

package/src/env.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="astro/client" />
-/// <reference path="../.astro/types.d.ts" />
-/// <reference types="simple-stack-form/types" />

package/src/integration/index.ts

@@ -1,185 +0,0 @@
-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 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 tailwindConfig from '../../tailwind.config.ts'
-
-interface Config {
-  favicon?: string
-  company?: string
-  css?: string
-  injectRoutes?: boolean
-  cloudcannon?: boolean
-  cart?: boolean
-  overrides?: {
-    [k: string]: string
-  }
-}
-
-export default function fulldevIntegration(
-  config: Partial<Config> | undefined
-): AstroIntegration {
-  return {
-    name: '/integration',
-    hooks: {
-      'astro:config:setup': async ({
-        updateConfig,
-        injectRoute,
-        injectScript,
-      }) => {
-        // ----------------------
-        // Update config
-        // ----------------------
-        updateConfig({
-          site: loadEnv(process.env.NODE_ENV as any, process.cwd(), '').URL,
-          experimental: {
-            contentLayer: true,
-            env: {
-              schema: {
-                URL: envField.string({
-                  context: 'client',
-                  access: 'public',
-                  optional: true,
-                }),
-                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/structures/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({
-                path: 'favicon',
-                masterPicture: config.favicon,
-                appName: config.company,
-                appShortName: config.company,
-                appDescription: config.company,
-              }),
-            ],
-          })
-
-        // ----------------------
-        // Inject routes
-        // ----------------------
-        if (config?.injectRoutes) {
-          injectRoute({
-            pattern: '/[...page]',
-            entrypoint: 'fulldev-ui/pages/[...page].astro',
-          })
-        }
-
-        // ----------------------
-        // Inject css
-        // ----------------------
-        config?.css && injectScript('page-ssr', `import "${config?.css}";`)
-
-        // ----------------------
-        // merge Cloudcannon configs
-        // ----------------------
-
-        // ----------------------
-        // Generate image YAML files
-        // ----------------------
-        // if (config.generateImageEntries) {
-        //   const srcDir = path.join(process.cwd(), 'src')
-        //   const filesDir = path.join(srcDir, 'images')
-        //   const entriesDir = path.join(srcDir, 'content', 'images')
-
-        //   try {
-        //     await fs.mkdir(filesDir, { recursive: true })
-        //     await fs.mkdir(entriesDir, { recursive: true })
-
-        //     const files = await fs.readdir(filesDir)
-        //     files.forEach(async (file) => {
-        //       const filename = path.parse(file).name
-        //       const yamlPath = path.join(entriesDir, `${filename}.yml`)
-
-        //       try {
-        //         await fs.access(yamlPath)
-        //       } catch {
-        //         const yamlContent = yaml.dump({
-        //           alt: '',
-        //         })
-        //         await fs.writeFile(yamlPath, yamlContent, 'utf8')
-        //       }
-        //     })
-        //   } catch (error) {
-        //     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')
-
-          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/Page.astro

@@ -1,64 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Block from 'fulldev-ui/components/Block.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-
-type Props = ComponentProps<typeof Layout> &
-  PageSchema & {
-    render: CollectionEntry<'pages'>['render']
-  }
-
-const {
-  _block,
-  title,
-  heading,
-  description,
-  paragraph,
-  banner,
-  sidebar,
-  header,
-  sections,
-  footer,
-  render,
-  navigation,
-  ...rest
-} = Astro.props
-
-const { Content, headings } = await render()
----
-
-<Layout
-  class:list="page"
-  {...rest}
->
-  <Block
-    _block="Banner"
-    {...banner}
-  />
-  <Block
-    _block="Header"
-    {...rest}
-    {...header}
-  />
-  <Element as="main">
-    <Block
-      _block={_block || 'Hero1'}
-      depth={1}
-      heading={heading || title}
-      paragraph={paragraph || description}
-      {headings}
-      {...rest}
-    >
-      <Content />
-    </Block>
-    {sections?.map((section) => <Block {...section} />)}
-  </Element>
-  <Block
-    _block="Footer"
-    {...rest}
-    {...footer}
-  />
-</Layout>

package/src/layouts/_Product.astro

@@ -1,115 +0,0 @@
-<!-- ---
-// @ts-nocheck
-import type { ComponentProps } from 'astro/types'
-import { getImage } from 'astro:assets'
-import type { CollectionEntry } from 'astro:content'
-import { getCollection,getEntry } from 'astro:content'
-import Products1 from 'fulldev-ui/blocks/Products1.astro'
-import CartForm from 'fulldev-ui/components/CartForm.svelte'
-import Element from 'fulldev-ui/components/Element.astro'
-import Gallery from 'fulldev-ui/components/Gallery.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import type { PageSchema } from 'fulldev-ui/schemas/page'
-import Layout from 'fulldev-ui/structures/Layout.astro'
-import Prose from 'fulldev-ui/structures/Prose.astro'
-
-interface Props extends ComponentProps<typeof Layout>, PageSchema {
-  render: CollectionEntry<'pages'>['render']
-}
-
-const {
-  render,
-  title,
-  price,
-  images,
-  description,
-  soldout,
-  categories,
-  variants,
-} = Astro.props
-
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
-const imageId = images?.[0]?.id
-const src = `/src/images/${imageId}`
-const allImages = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
-const foundImage = allImages[src]
-const gotImage =
-  imageId && (await getImage({ src: foundImage ? foundImage() : src }))
-
-const relatedProducts = await getCollection('products', (product) =>
-  product.data.categories?.some((category) =>
-    categories?.map((c) => c.slug).includes(category.slug)
-  )
-)
-
-const baseLayout = await getEntry('layouts', 'base')
----
-
-<Layout
-  class:list="product"
-  {...Astro.props}
->
-  <Element
-    class:list="product"
-    as="section"
-  >
-    <Element class:list="product-container">
-      <Element class:list="product-main">
-        <Gallery {images} />
-        <Prose {render} />
-      </Element>
-      <Element class:list="product-segment">
-        <Element class:list="product-content">
-          <Heading
-            as="h1"
-            size="3xl"
-            text={title}
-          />
-          <Paragraph text={description} />
-        </Element>
-        <CartForm
-          product={Astro.props}
-          client:load
-        />
-        <List
-          size="sm"
-          items={baseLayout.data.banner?.split('|')}
-        />
-      </Element>
-    </Element>
-  </Element>
-  <Products1
-    heading="Gerelateerde producten"
-    products={[...relatedProducts].sort(() => Math.random() - 0.5).slice(0, 6)}
-  />
-  <slot />
-</Layout>
-
-<style is:global>
-  .product {
-    @apply relative w-full;
-
-    .product-container {
-      @apply flex h-full w-full flex-col items-start gap-32 lg:container lg:grid lg:grid-cols-2 lg:py-8;
-    }
-
-    .product-segment {
-      @apply z-10 flex flex-col items-start gap-8 max-lg:container lg:sticky lg:top-0;
-
-      --height: calc(
-        var(--header-height, 0px) + var(--subheader-height, 0px) + 2rem
-      );
-      top: var(--height);
-    }
-
-    .product-content {
-      @apply flex max-w-screen-md flex-col gap-6;
-    }
-
-    &.dark {
-      @apply bg-background;
-    }
-  }
-</style> -->