fulldev-ui 0.5.0-beta.4 → 0.5.0-beta.6

package/src/content/pages/overview/introduction.mdx

@@ -5,20 +5,26 @@ title: Introduction
 
 # Introduction
 
-Fulldev UI focuses on content websites rather than applications.
+**Fulldev UI** is a full-featured UI library and website theme built on the [Astro](https://astro.build/) framework. Whether starting a new project or enhancing an existing one, this guide will help you get set up. For installation details, see the [installation guide](/getting-started/installation).
 
-##### Build entire websites with just components
+## Why we built it
 
-Fulldev UI is unique in that it introduces larger components to build entire pages, and even websites. Like a Section component that just works.
+We built **Fulldev UI** after repeatedly encountering the same challenges in client projects, covering the core needs of content-focused websites. Initially created for [our own company](https://full.dev), we decided to open-source it for others to use.
 
-##### Integrates with any JS / CSS framework
+## Some features
 
-Want to use Tailwind, or something else? You can overwrite all styles. Need an interactive framework component? Styles can be applied with one simple class.
+- Vanilla HTML and CSS.
+- Seamless integration with TailwindCSS and UnoCSS.
+- Minimal JavaScript.
+- Supports Astro's [Content Collections](https://docs.astro.build/en/guides/content-collections/).
+- Customizable via CSS variables.
+- Reusable components for pages and sections.
+- Includes blocks like Hero, CTA, Features, etc.
+- Page-building tools.
+- And more...
 
-##### Automated colors, spacing and sizes
+## A word of caution
 
-Everything is carefully designed to be fully responsive. Component adapt to their environment, like a Heading being different in a Section than in a Card. You can also customize via simple props.
+**Fulldev UI** includes a wide range of features, some still experimental. While a narrower focus would improve stability, we built it for flexibility in our projects.
 
-##### Content layer
-
-Build entire websites using just content files like Markdown using our components, blocks and layouts.
+This isn't just a single-purpose library; it's a framework for building blog, marketing, and portfolio websites—similar to how [Starlight](https://starlight.astro.build/) serves documentation. As it evolves, its focus will sharpen. In the meantime, feel free to use it and share feedback on [Discord](https://discord.gg/fulldev)!

package/src/content/pages/overview/theming.mdx

@@ -0,0 +1,69 @@
+---
+presets: [docs]
+title: Theming
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Theming
+
+With the fulldev-ui integration you can easily set a theme and generate a palette based on <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
+
+## Configuration
+
+### Generating a color palette
+
+- **css** is the path to your custom css file that applies to all pages on your site.
+- **colors** is an object that defines the colors for your site.
+  - **theme** is the default theme for your site.
+  - **dark** and **light** are objects that define the colors for the dark and light themes, these three properties are used to generate a color pallete using radix colors.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      css: '/src/css/custom.css',
+      colors: {
+        theme: 'dark',
+        dark: {
+          background: '#111110',
+          base: '#6F6D66',
+          brand: '#F50',
+        },
+        light: {
+          background: '#EEEEEC',
+          base: '#6F6D66',
+          brand: '#F50',
+        },
+      },
+    }),
+  ],
+})
+```
+
+### Generating favicons
+
+We've integrated <Link href="https://github.com/ACP-CODE/astro-favicons">astro-favicons</Link> into fulldev-ui to generate favicons from a svg file.
+
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      favicon: 'src/images/favicon.svg', // can also be png, webp, jpg, etc.
+      // other options here
+    }),
+  ],
+})
+```
+
+## Overwriting styles
+
+Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS.

package/src/content/pages/schemas/page.mdx

@@ -9,3 +9,9 @@ title: page
 Objects in the page schema are used to define the structure of a page. They are used to define the information, content and components that are used to render the page.
 
 import { Code } from 'astro:components'
+import { zodToTs, createTypeAlias, printNode } from 'zod-to-ts'
+import pageSchema from 'fulldev-ui/schemas/pageSchema'
+
+export const identifier = 'Page'
+export const node = zodToTs(pageSchema, identifier)
+export const typeAlias = createTypeAlias(node, identifier)

package/src/content/presets/base.yml

@@ -1,3 +1,5 @@
+theme: dark
+
 seo:
   image: /images/og-image.png
 
@@ -8,11 +10,9 @@ code:
       posthog.init('phc_mVacbe8Xydu0UZlh4bNw5EGisvzyRcpqXEEuEEp5lOY',{api_host:'https://eu.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
         })
     </script>
-sidebar: true
-toc: false
-themeselect: true
-
-header:
+header: true
+navigation:
+  cart: Winkelwagen
   company: Fulldev UI
   buttons:
     - text: Docs
@@ -30,41 +30,55 @@ header:
       target: _blank
       icon: brand-discord
       variant: secondary
-# footer:
-#   logo: Fulldev UI
-#   text: The Astro UI library to build content sites. Make websites with prebuilt components, blocks and layouts.
-#   columns:
-#     - heading: Pages
-#       buttons:
-#         - text: Docs
-#           href: /overview/introduction
-#         - text: Components
-#           href: /typography/heading
-#         - blocks
-#         - showcase
-#   socials:
-#     - https://www.linkedin.com/in/silveltman/
-#     - https://x.com/silveltm
-#     - https://github.com/fulldotdev/ui
-#   channels:
-#     - heading: Phone
-#       text: 123-456-7890
-#       icon: phone
-#       href: tel:123-456-7890
-#     - heading: Email
-#       text: contact@example.com
-#       icon: mail
-#       href: mailto:contact@example.com
-#     - heading: Address
-#       text: 1234 Main St, Springfield, IL 62701
-#       icon: map-pin
-#   hours:
-#     heading: Openingstijden
-#     days:
-#       ma.: 09:00 - 17:00
-#       di.: 09:00 - 17:00
-#       wo.: 09:00 - 17:00
-#       do.: 09:00 - 17:00
-#       vr.: 09:00 - 17:00
-#       za.: 09:00 - 17:00
-#       zo.: 09:00 - 17:00
+  menu:
+    - heading: Get Started
+      buttons:
+        - overview/introduction
+        - overview/installation
+        - overview/theming
+        - overview/frameworks
+        - overview/components
+        - overview/content-collections
+    - heading: Typography
+      buttons:
+        - typography/heading
+        - typography/label
+        - typography/link
+        - typography/list
+        - typography/text
+    - heading: Base
+      buttons:
+        - base/badge
+        - base/button
+        - base/card
+        - base/checkbox
+        - base/icon
+        - base/input
+        - base/rating
+        - base/section
+        - base/select
+        - base/table
+        - base/textarea
+        - base/theme-select
+        - base/image
+    - heading: Blocks
+      buttons:
+        - blocks/banner
+        - blocks/colleagues
+        - blocks/contact
+        - blocks/content
+        - blocks/cta
+        - blocks/features
+        - blocks/hero
+        - blocks/intro
+        - blocks/posts
+        - blocks/reviews
+    - heading: Schemas
+      buttons:
+        - schemas/page
+        - schemas/preset
+    - heading: More
+      buttons:
+        - showcase
+        - text: Changelog
+          href: https://github.com/fulldotdev/ui/releases

package/src/content/presets/blocks.yml

@@ -1,4 +1 @@
 component: BlockLayout
-
-navigation:
-  toc: false

package/src/content/presets/docs.yml

@@ -2,64 +2,4 @@ component: DocsLayout
 
 sidebar: true
 header: false
-banner: false
-toc: true
-
-navigation:
-  company: Fulldev UI
-  buttons:
-    - heading: Get Started
-      buttons:
-        - overview/introduction
-        - overview/installation
-        - overview/customization
-        - overview/frameworks
-        - overview/components
-        - overview/content-layer
-    - heading: Typography
-      buttons:
-        - typography/heading
-        - typography/label
-        - typography/link
-        - typography/list
-        - typography/text
-    - heading: Base
-      buttons:
-        - base/badge
-        - base/button
-        - base/card
-        - base/checkbox
-        - base/icon
-        - base/input
-        - base/rating
-        - base/section
-        - base/select
-        - base/table
-        - base/textarea
-        - base/theme-select
-        - base/image
-    - heading: Blocks
-      buttons:
-        - blocks/banner
-        - blocks/colleagues
-        - blocks/contact
-        - blocks/content
-        - blocks/cta
-        - blocks/features
-        - blocks/hero
-        - blocks/intro
-        - blocks/posts
-        - blocks/reviews
-    # - heading: Layouts
-    #   buttons:
-    #     - layouts/layout
-    #     - layouts/docslayout
-    - heading: Schemas
-      buttons:
-        - schemas/page
-        - schemas/preset
-    - heading: More
-      buttons:
-        - showcase
-        - text: Changelog
-          href: https://github.com/fulldotdev/ui/releases
+toc: 'On this page'

package/src/env.d.ts

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

package/src/layouts/Layout.astro

@@ -7,6 +7,7 @@ import Footer from 'fulldev-ui/blocks/Footer.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Head from 'fulldev-ui/components/Head.astro'
 import Header from 'fulldev-ui/components/Header.astro'
+import Section from 'fulldev-ui/components/Section.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Sidebar from 'fulldev-ui/components/Sidebar.astro'
 import Toc from 'fulldev-ui/components/Toc.astro'
@@ -19,6 +20,7 @@ type Props = GlobalProps &
     header?: ComponentProps<typeof Header>
     footer?: ComponentProps<typeof Footer>
     sections?: ComponentProps<typeof Sections>['sections']
+    section?: ComponentProps<typeof Section> | undefined
     banner?: any
     toc?: any
     sidebar?: any
@@ -47,6 +49,7 @@ const {
   toc,
   sections,
   theme,
+  section,
   banner,
   code,
   themeselect,
@@ -57,41 +60,43 @@ const {
 <!doctype html>
 <html {...rest}>
   <Head {...Astro.props} />
-  <Element as="body">
+  <Element
+    as="body"
+    {theme}
+  >
     <slot name="banner">
       <Banner text={banner} />
     </slot>
     <slot name="header">
       <Header
-        open={header}
+        class:list={{
+          'for-sidebar': sidebar,
+        }}
+        if={navigation || header}
         {...navigation}
-        {themeselect}
         {...header}
       />
     </slot>
     <div class="core">
       <slot name="sidebar">
         <Sidebar
-          open={sidebar}
+          if={sidebar}
           {...navigation}
           {...sidebar}
         />
       </slot>
       <main data-pagefind-body>
         <slot>
+          <Section {...section} />
           <Article />
           <Sections {sections} />
         </slot>
       </main>
       <slot name="toc">
-        {
-          toc && (
-            <Toc
-              {render}
-              {...toc}
-            />
-          )
-        }
+        <Toc
+          heading={toc}
+          {render}
+        />
       </slot>
     </div>
     <slot name="footer">
@@ -114,12 +119,21 @@ const {
           --screen: 100vw;
           display: flex;
           flex-direction: column;
-
-          background-color: var(--base-2);
+          background-color: var(--base-background);
           width: 100%;
           min-height: 100vh;
           color: var(--base-11);
 
+          .for-sidebar {
+            @media (min-width: 1024px) {
+              display: none;
+
+              ~ * {
+                --header-height: 0px;
+              }
+            }
+          }
+
           .core {
             display: flex;
             position: relative;

package/src/layouts/PostLayout.astro

@@ -0,0 +1,24 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Article from 'fulldev-ui/blocks/Article.astro'
+import Sections from 'fulldev-ui/components/sections.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+import Excerpt from '../blocks/Excerpt.astro'
+
+type Props = ComponentProps<typeof Layout>
+
+const { sections, title, description, ...rest } = Astro.props
+---
+
+<Layout {...Astro.props}>
+  <Excerpt
+    heading={title}
+    align="start"
+    text={description}
+    style={{ '--screen': '768px' }}
+    {...rest}
+  />
+  <Article />
+  <Sections {sections} />
+  <slot />
+</Layout>

package/src/layouts/ProductLayout.astro

@@ -1,7 +1,7 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import Article from 'fulldev-ui/blocks/Article.astro'
-import Product from 'fulldev-ui/blocks/Product.astro'
+import Section from 'fulldev-ui/components/Section.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
@@ -11,7 +11,10 @@ const { render, sections, ...rest } = Astro.props
 ---
 
 <Layout {...Astro.props}>
-  <Product {...rest} />
+  <Section
+    component="Product"
+    {...rest as any}
+  />
   <Article />
   <Sections {sections} />
   <slot />

package/src/schemas/components/header.ts

@@ -2,12 +2,10 @@ import { z } from 'astro:content'
 import buttons from './buttons'
 import logo from './logo'
 
-export default z.boolean().or(
-  z
-    .object({
-      logo,
-      buttons,
-    })
-    .partial()
-    .passthrough()
-)
+export default z
+  .object({
+    logo,
+    buttons,
+  })
+  .partial()
+  .passthrough()

package/src/schemas/components/menu.ts

@@ -0,0 +1,13 @@
+import { z } from 'astro:content'
+import buttons from './buttons'
+import heading from './heading'
+
+export default z.array(
+  z
+    .object({
+      heading,
+      buttons,
+    })
+    .partial()
+    .passthrough()
+)

package/src/schemas/components/sidebar.ts

@@ -0,0 +1,15 @@
+import { z } from 'astro:content'
+import logo from '../components/logo'
+import menu from '../components/menu'
+import heading from './heading'
+import toc from './toc'
+
+export default z
+  .object({
+    logo,
+    heading,
+    menu,
+    toc,
+  })
+  .partial()
+  .passthrough()

package/src/schemas/components/toc.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string()

package/src/schemas/pageSchema.ts

@@ -5,13 +5,17 @@ import footer from './components/footer'
 import header from './components/header'
 import image from './components/image'
 import images from './components/images'
+import price from './components/price'
+import section from './components/section'
 import sections from './components/sections'
+import sidebar from './components/sidebar'
+import toc from './components/toc'
 import component from './utils/component'
 import navigation from './utils/navigation'
 import parents from './utils/parents'
 import pathSchema from './utils/pathSchema'
 
-const i18n = z
+export const i18n = z
   .object({
     i18n: pathSchema('pages').optional(),
   })
@@ -23,7 +27,7 @@ const i18n = z
     return merged as typeof rest
   })
 
-const presets = z
+export const presets = z
   .object({
     presets: z.array(pathSchema('presets')).optional(),
   })
@@ -47,31 +51,51 @@ const presets = z
     return mergedData as typeof rest
   })
 
-export default i18n.pipe(presets).pipe(
-  z
-    .object({
-      component,
-      parents,
-      theme: z.enum(['light', 'dark']),
-      lang: z.string(),
-      seo: z
-        .object({
-          title: z.string().optional(),
-          description: z.string().optional(),
-        })
-        .optional(),
-      title: z.string(),
-      description: z.string().optional(),
-      image,
-      images,
-      sections,
-      header,
-      footer,
-      navigation,
-      toc: z.any(),
-      sidebar: z.any(),
-      banner: z.any(),
-    })
-    .partial()
-    .passthrough()
-)
+export const basePreset = z
+  .object({})
+  .passthrough()
+  .transform(async (data) => {
+    if (!fulldevConfig.basePreset) return data
+    const baseEntry = await getEntry('presets', fulldevConfig.basePreset)
+    const mergedData = assign(baseEntry?.data ?? {}, data)
+    return mergedData as typeof data
+  })
+
+export const page = z
+  .object({
+    component,
+    parents,
+    theme: z.enum(['light', 'dark']),
+    lang: z.string(),
+    seo: z
+      .object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+      })
+      .optional(),
+    title: z.string(),
+    description: z.string().optional(),
+    image,
+    images,
+    section,
+    sections,
+    footer,
+    header: z.boolean().or(header),
+    sidebar: z.boolean().or(sidebar),
+    navigation,
+    toc,
+    price,
+    code: z.any(),
+    sizes: z.any(),
+    banner: z.any(),
+    _schema: z.any(),
+    uitverkocht: z.any(),
+    rating: z.any(),
+    variants: z.any(),
+    heading: z.any(),
+    href: z.any(),
+  })
+  .partial()
+  .strict()
+
+export default i18n.pipe(basePreset).pipe(presets).pipe(page)

package/src/schemas/presetSchema.ts

@@ -1,33 +1,3 @@
-import { z } from 'astro:content'
-import footer from './components/footer'
-import header from './components/header'
-import image from './components/image'
-import sections from './components/sections'
-import component from './utils/component'
-import navigation from './utils/navigation'
-import parents from './utils/parents'
+import { page } from './pageSchema'
 
-export default z
-  .object({
-    component,
-    parents,
-    theme: z.enum(['light', 'dark']),
-    lang: z.string(),
-    seo: z
-      .object({
-        title: z.string().optional(),
-        description: z.string().optional(),
-      })
-      .optional(),
-    title: z.string(),
-    description: z.string().optional(),
-    image,
-    sections,
-    header,
-    footer,
-    navigation,
-    toc: z.any(),
-    sidebar: z.any(),
-  })
-  .partial()
-  .passthrough()
+export default page