fulldev-ui 0.5.0-beta.1 → 0.5.0-beta.10

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,8 @@ 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:
+navigation:
+  header: true
   company: Fulldev UI
   buttons:
     - text: Docs
@@ -30,41 +29,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

@@ -1,65 +1,6 @@
 component: DocsLayout
 
-sidebar: true
-header: false
-banner: false
-
 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/pagelayout
-        - layouts/docslayout
-    - heading: Schemas
-      buttons:
-        - schemas/page
-        - schemas/preset
-    - heading: More
-      buttons:
-        - showcase
-        - text: Changelog
-          href: https://github.com/fulldotdev/ui/releases
+  sidebar: true
+  header: false
+  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/integration/index.ts

@@ -1,10 +1,8 @@
 import viteYaml from '@rollup/plugin-yaml'
 import type { AstroIntegration } from 'astro'
 import favicons from 'astro-favicons'
+import type { CollectionEntry } from 'astro:content'
 import merge from 'deepmerge'
-import fs from 'fs/promises'
-import yaml from 'js-yaml'
-import path from 'path'
 import virtual from 'vite-plugin-virtual'
 import { generateRadixColors } from './generate-colors'
 
@@ -18,9 +16,9 @@ interface Config {
   favicon?: string
   company?: string
   css?: string
+  basePreset?: CollectionEntry<'presets'>['id']
   injectRoutes?: boolean
-  overrideComponents?: boolean
-  generateImageEntries?: boolean
+  // generateImageEntries?: boolean
   colors: {
     theme: 'light' | 'dark'
     light?: Color | undefined
@@ -37,7 +35,7 @@ const defaultConfig: Config = {
       brand: '#000',
     },
   },
-  generateImageEntries: false,
+  // generateImageEntries: false,
 }
 
 export default function fulldevIntegration(
@@ -173,33 +171,33 @@ export default function fulldevIntegration(
         // ----------------------
         // 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)
-          }
-        }
+        // 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)
+        //   }
+        // }
 
         // ----------------------
         // Inject routes

package/src/layouts/DocsLayout.astro

@@ -2,14 +2,13 @@
 import type { ComponentProps } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Prose from 'fulldev-ui/components/experimental/Prose.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 import { crush } from 'radash'
+import PostLayout from './PostLayout.astro'
 
 type Props = ComponentProps<typeof Layout>
 
-const { render, slug, navigation, ...rest } = Astro.props
-const { Content } = await render()
+const { slug, navigation } = Astro.props
 
 const flatButtons = crush((navigation as any)?.buttons ?? {})
 const slugs = Object.entries(flatButtons)
@@ -21,45 +20,34 @@ const prevSlug = slugs[slugIndex - 1]
 const nextSlug = slugs[slugIndex + 1]
 ---
 
-<Layout
+<PostLayout
   class:list="docs-layout"
-  {render}
-  {slug}
-  {navigation}
-  {...rest}
+  {...Astro.props}
 >
-  <Prose>
-    {Content && <Content />}
-    <Element class:list={['prev-next', { 'next-only': !prevSlug }]}>
-      <Button
-        if={prevSlug}
-        slug={prevSlug}
-        icon="arrow-left"
-        variant="secondary"
-      />
-      <Button
-        if={nextSlug}
-        slug={nextSlug}
-        icon="arrow-right"
-        variant="secondary"
-        reverse={true}
-      />
-    </Element>
-  </Prose>
-</Layout>
+  <Element
+    class:list={['prev-next', { 'next-only': !prevSlug }]}
+    slot="prose"
+  >
+    <Button
+      if={prevSlug}
+      slug={prevSlug}
+      icon="arrow-left"
+      variant="secondary"
+    />
+    <Button
+      if={nextSlug}
+      slug={nextSlug}
+      icon="arrow-right"
+      variant="secondary"
+      reverse={true}
+    />
+  </Element>
+</PostLayout>
 
 <style lang="scss" is:global>
   @layer fulldev {
     .docs-layout {
       .prose {
-        --screen: 768px;
-        padding: var(--space-6) var(--gutter);
-        color: var(--color-12);
-
-        > h1 + p {
-          color: var(--color-11);
-        }
-
         > a,
         > p > a {
           color: var(--brand-11);

package/src/layouts/Layout.astro

@@ -1,14 +1,15 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
+import Article from 'fulldev-ui/blocks/Article.astro'
 import Banner from 'fulldev-ui/blocks/Banner.astro'
 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'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 type Props = GlobalProps &
@@ -18,6 +19,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
@@ -46,6 +48,7 @@ const {
   toc,
   sections,
   theme,
+  section,
   banner,
   code,
   themeselect,
@@ -56,36 +59,39 @@ 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}
-        {...navigation}
-        {themeselect}
+        {...navigation?.header === true ? navigation : {}}
         {...header}
       />
     </slot>
     <div class="core">
       <slot name="sidebar">
         <Sidebar
-          open={sidebar}
-          {...navigation}
+          {...navigation?.sidebar === true ? navigation : {}}
+          logo={navigation?.sidebar?.header
+            ? undefined
+            : navigation?.sidebar?.logo}
+          company={navigation?.sidebar?.header
+            ? undefined
+            : navigation?.sidebar?.company}
           {...sidebar}
         />
       </slot>
       <main data-pagefind-body>
-        <slot />
-        <Sections {sections} />
+        <slot>
+          <Section {...section} />
+          <Article />
+          <Sections {sections} />
+        </slot>
       </main>
-      <slot name="toc">
-        <Toc
-          {render}
-          {...toc}
-        />
-      </slot>
     </div>
     <slot name="footer">
       <Footer {...footer} />
@@ -104,27 +110,37 @@ const {
         }
 
         body {
-          --screen: 100vw;
-
-          background-color: var(--base-2);
+          display: flex;
+          flex-direction: column;
+          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;
+            flex-grow: 1;
+            height: 100%;
 
             main {
               --screen: 1280px;
-
               display: flex;
               flex: 1;
               flex-direction: column;
               background-color: var(--color-background);
               width: 100%;
               max-width: 100vw;
-              min-height: 100vh;
-              overflow-x: hidden;
             }
           }
         }

package/src/layouts/OverviewLayout.astro

@@ -6,30 +6,37 @@ import Intro from 'fulldev-ui/blocks/Intro.astro'
 import Products from 'fulldev-ui/blocks/Products.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
-import { getCategoryPages } from 'fulldev-ui/utils/getCategoryPages'
-import { getChildPages } from 'fulldev-ui/utils/getChildPages.ts'
+import { getFolderChildren } from 'fulldev-ui/utils/getFolderChildren.ts'
+import { getReferenceChildren } from 'fulldev-ui/utils/getReferenceChildren'
 
 type Props = ComponentProps<typeof Layout>
 
-const { slug, render, sections, children, ...rest } = Astro.props
+const { slug, sections, title, description, render } = Astro.props
 
-const childPages = await getChildPages(slug)
-const categoryPages = await getCategoryPages(slug)
-// const siblingPages = await getSiblingPages(slug)
+const folderChildren = await getFolderChildren(slug)
+const referenceChildren = await getReferenceChildren(slug)
 ---
 
 <Layout {...Astro.props}>
-  <Intro {...rest} />
+  <Intro
+    heading={title}
+    text={description}
+  />
   <Categories
-    pages={childPages}
+    component="Categories"
+    cards={folderChildren}
     structure="grid"
     panel
   />
   <Products
-    pages={categoryPages}
+    component="Products"
+    cards={referenceChildren}
     structure="grid"
   />
-  <Article style={{ '--screen': '768px' }} />
+  <Article
+    {render}
+    toc={false}
+  />
   <Sections {sections} />
   <slot />
 </Layout>

package/src/layouts/PostLayout.astro

@@ -1,21 +1,21 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import Article from 'fulldev-ui/blocks/Article.astro'
-import Intro from 'fulldev-ui/blocks/Intro.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
 type Props = ComponentProps<typeof Layout>
 
-const { render, sections, ...rest } = Astro.props
+const { sections, render, toc } = Astro.props
 ---
 
 <Layout {...Astro.props}>
-  <Intro
-    align="start"
-    {...rest}
-  />
-  <Article />
+  <Article
+    {render}
+    {toc}
+  >
+    <slot name="prose" />
+  </Article>
   <Sections {sections} />
   <slot />
 </Layout>