fulldev-ui 0.4.32 → 0.5.0-beta-16

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

@@ -1,20 +1,30 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+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.
+
+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

@@ -1,83 +1,69 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Theming
 ---
 
 import Link from 'fulldev-ui/components/Link.astro'
 
 # Theming
 
-## Colors
-
-The color theme is inspired by / compatible with <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
-
-### Automatic setup
-
-With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the <Link href="/overview/integration">integration page</Link> for details.
-
-### Manual setup
-
-You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explenation see <Link href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">this page</Link>.
-
-```css
-:root,
-.theme-light {
-  --base-1: ;
-  --base-2: ;
-  --base-3: ;
-  --base-4: ;
-  --base-5: ;
-  --base-6: ;
-  --base-7: ;
-  --base-8: ;
-  --base-9: ;
-  --base-10: ;
-  --base-11: ;
-  --base-12: ;
-  --base-contrast: ;
-
-  --brand-1: ;
-  --brand-2: ;
-  --brand-3: ;
-  --brand-4: ;
-  --brand-5: ;
-  --brand-6: ;
-  --brand-7: ;
-  --brand-8: ;
-  --brand-9: ;
-  --brand-10: ;
-  --brand-11: ;
-  --brand-12: ;
-  --brand-contrast: ;
-}
+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',
+        },
+      },
+    }),
+  ],
+})
 ```
 
-### Dark theme
+### Generating favicons
 
-Dark mode is set via a simple `.theme-dark` class.
+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.
 
-If you want to use a dark theme by default, remove the `:root` selector from the light theme and add it to the dark theme.
+```ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
 
-Components in Fulldev UI that support theme switching have the `theme` prop available, which adds either the `theme-dark` or `theme-light` class
-
-```css
-.theme-dark {
-  /* Same variables here as above */
-}
-```
-
-## Radius
-
-The `--border-radius` variable is a multiplier applied to all radius values. The default value is `1`.
-
-```css
-:root {
-  --border-radius: 1;
-}
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    fulldev({
+      favicon: 'src/images/favicon.svg', // can also be png, webp, jpg, etc.
+      // other options here
+    }),
+  ],
+})
 ```
 
-## Other
+## Overwriting styles
 
 Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS.
-
-We plan to add more customization via variables later.

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

@@ -0,0 +1,17 @@
+---
+presets: [docs]
+
+title: page
+---
+
+# page-schema
+
+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/pages/schemas/preset.mdx

@@ -0,0 +1,9 @@
+---
+presets: [docs]
+
+title: preset
+---
+
+# preset-schema
+
+import { Code } from 'astro:components'

package/src/content/pages/showcase/anti-slip-profiles.md

@@ -0,0 +1,5 @@
+---
+heading: Anti Slip Profiles
+image: 'anti-slip-profiles.webp'
+href: 'https://antislipprofiles.com'
+---

package/src/content/pages/showcase/fulldev-ui.md

@@ -0,0 +1,5 @@
+---
+heading: Fulldev UI
+image: fulldev-ui.webp
+href: 'https://ui.ull.dev'
+---

package/src/content/pages/showcase/lavis-detailing.md

@@ -0,0 +1,5 @@
+---
+heading: Lavis Detailing
+image: lavis-detailing.webp
+href: 'https://lavisdetailing.nl'
+---

package/src/content/pages/showcase/leren-trainingsacteren.md

@@ -0,0 +1,5 @@
+---
+heading: Leren Trainingsacteren
+image: leren-trainingsacteren.webp
+href: 'https://lerentrainingsacteren.nl'
+---

package/src/content/pages/showcase/miele-witgoedcenter-amsterdam.md

@@ -0,0 +1,5 @@
+---
+heading: Miele Witgoedcenter Amsterdam
+image: miele-witgoedcenter-amsterdam.webp
+href: 'https://witgoedcenteramsterdam.nl'
+---

package/src/content/{records/record.yml → pages/showcase/record.md}

@@ -1 +1,3 @@
+---
 title: Test
+---

package/src/content/pages/showcase/sloepverhuur-bolsward.md

@@ -0,0 +1,5 @@
+---
+heading: Sloepverhuur Bolsward
+image: sloepverhuur-bolsward.webp
+href: 'https://sloepverhuurbolsward.nl'
+---

package/src/content/pages/showcase/stark-vulcanising-products.md

@@ -0,0 +1,5 @@
+---
+heading: Stark Vulcanising Products
+image: stark-vulcanising-products.webp
+href: '#'
+---

package/src/content/pages/showcase/the-gym-haren.md

@@ -0,0 +1,5 @@
+---
+heading: The Gym Haren
+image: the-gym-haren.webp
+href: 'https://thegymharen.nl'
+---

package/src/content/pages/showcase/van-dillen-antieke-bouwmaterialen.md

@@ -0,0 +1,5 @@
+---
+heading: Van Dillen Antieke Bouwmaterialen
+image: van-dillen-antieke-bouwmaterialen.webp
+href: 'https://vdabouwmaterialen.nl'
+---

package/src/content/pages/showcase.mdx

@@ -1,40 +1,15 @@
 ---
-showcase:
-  # Add your project here below 👇
-
-  - heading: Van Dillen Antieke Bouwmaterialen
-    image: /showcase/van-dillen-antieke-bouwmaterialen.webp
-    href: 'https://vdabouwmaterialen.nl'
-  - heading: Anti Slip Profiles
-    image: /showcase/anti-slip-profiles.webp
-    href: 'https://antislipprofiles.com'
-  - heading: Fulldev UI
-    image: /showcase/fulldev-ui.webp
-    href: 'https://ui.full.dev'
-  - heading: The Gym Haren
-    image: /showcase/the-gym-haren.webp
-    href: 'https://thegymharen.nl'
-  - heading: Lavis Detailing
-    image: /showcase/lavis-detailing.webp
-    href: 'https://lavisdetailing.nl'
-  - heading: Leren Trainingsacteren
-    image: /showcase/leren-trainingsacteren.webp
-    href: 'https://lerentrainingsacteren.nl'
-  - heading: Miele Witgoedcenter Amsterdam
-    image: /showcase/miele-witgoedcenter-amsterdam.webp
-    href: 'https://witgoedcenteramsterdam.nl'
-  - heading: Sloepverhuur Bolsward
-    image: /showcase/sloepverhuur-bolsward.webp
-    href: 'https://sloepverhuurbolsward.nl'
-  - heading: Stark Vulcanising Products
-    image: /showcase/stark-vulcanising-products.webp
-
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Showcase
 ---
 
-import Masonry from 'fulldev-ui/components/Masonry.astro'
 import Card from 'fulldev-ui/components/Card.astro'
+import Cards from 'fulldev-ui/components/Cards.astro'
+import { getCollection } from 'astro:content'
+
+export const projects = (
+  await getCollection('pages', ({ slug }) => slug.startsWith('showcase'))
+).map((p) => p.data)
 
 # Showcase
 
@@ -43,20 +18,15 @@ Projects that are built with Fulldev UI.
 <Card
   color="brand"
   size="sm"
-  frame="panel"
   style={{ marginTop: 'var(--space-6)', marginBottom: 'var(--space-7)' }}
   heading="Your project in this showcase?"
-  description="Add your project to the showcase in 1 minute."
+  text="Add your project to the showcase in 1 minute."
+  panel
   button={{
     text: 'Add your project',
-    variant: 'secondary',
     href: 'https://github.com/fulldotdev/ui/blob/main/CONTRIBUTING.md#showcase',
     target: '_blank',
   }}
 />
 
-<Masonry>
-  {frontmatter.showcase.map((showcase) => (
-    <Card frame="panel" position="inset" {...showcase} target="_blank" />
-  ))}
-</Masonry>
+<Cards structure="masonry" position="inset" panel cards={projects} />

package/src/content/pages/typography/_tagline.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Tagline
 ---

package/src/content/pages/typography/heading.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Heading
 ---

package/src/content/pages/typography/label.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Label
 ---

package/src/content/pages/typography/link.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Link
 ---
@@ -38,17 +37,6 @@ import Link from 'fulldev-ui/components/Link.astro'
 import Link from 'fulldev-ui/components/Link.astro'
 ---
 
-<Link href="/base/link" underline="auto">Link</Link>
-<Link href="/base/link" underline="always">Link</Link>
-<Link href="/base/link" underline="hover">Link</Link>
-<Link href="/base/link" underline="none">Link</Link>
-```
-
-```astro live
----
-import Link from 'fulldev-ui/components/Link.astro'
----
-
 <Link href="#">Link</Link>
 <Link href="#" contrast>Link</Link>
 ```

package/src/content/pages/typography/list.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: List
 ---

package/src/content/pages/typography/text.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Text
 ---

package/src/content/{settings → presets}/base.yml

@@ -1,3 +1,5 @@
+theme: dark
+
 seo:
   image: /images/og-image.png
 
@@ -9,55 +11,70 @@ code:
         })
     </script>
 
-header:
-  heading: Fulldev UI
-  variant: base
-  links:
+navigation:
+  header: true
+  company: Fulldev UI
+  buttons:
     - text: Docs
       href: /overview/introduction
     - text: Components
       href: /typography/heading
     - text: Blocks
-      href: /blocks
-    - text: Showcase
-      href: /showcase
-  search:
-    icon: search
-    variant: soft
-  buttons:
-    - href: https://github.com/fulldotdev/ui
-      target: _blank
-      aria-label: GitHub
-      icon: brand-github
-    - href: https://discord.gg/vXZqMbadm8
-      target: _blank
-      aria-label: Discord
-      icon: brand-discord
-  drawer:
-    - links:
-        - text: Docs
-          href: /overview/introduction
-        - text: Components
-          href: /typography/heading
-        - text: Blocks
-          href: /blocks
-    - heading: Overview
-      links:
-        - text: Introduction
-          href: /overview/introduction
-        - text: Installation
-          href: /overview/installation
-        - text: Integration
-          href: /overview/integration
-        - text: Theming
-          href: /overview/theming
-        - text: Frameworks
-          href: /overview/frameworks
-        - text: Showcase
-          href: /showcase
+      href: /blocks/banner
+    - showcase
+
+  socials:
+    - https://github.com/fulldotdev/ui
+    - https://discord.gg/vXZqMbadm8
+  menu:
+    - heading: Get Started
+      buttons:
+        - overview/introduction
+        - overview/installation
+        - overview/theming
+        - overview/frameworks
+        - overview/components
+        - overview/content-collections
     - heading: Typography
-      folder: typography
+      buttons:
+        - typography/heading
+        - typography/label
+        - typography/link
+        - typography/list
+        - typography/text
     - heading: Base
-      folder: base
-    - heading: Structure
-      folder: structure
+      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

@@ -0,0 +1 @@
+component: BlockLayout

package/src/content/presets/docs.yml

@@ -0,0 +1,6 @@
+component: DocsLayout
+
+navigation:
+  sidebar: true
+  header: false
+  toc: 'On this page'

package/src/css/color.css

@@ -84,85 +84,3 @@
   --color-11: var(--color-12);
   --color-contrast: var(--color-1);
 }
-
-/* :where(:root),
-:where(.theme-light),
-:where(.theme-dark),
-:where(.color-base),
-:where(.color-brand),
-.variant-base,
-.variant-base
-  *:not([class*='variant-']):not(.variant-base [class*='variant-'] *) {
-  --background: var(--color-background, var(--color-1));
-  --background-hover: var(--color-1);
-  --background-active: var(--color-1);
-  --border: var(--color-6);
-  --border-hover: var(--color-6);
-  --text: var(--color-11);
-}
-
-.variant-subtle,
-.variant-subtle
-  *:not([class*='variant-']):not(.variant-subtle [class*='variant-'] *) {
-  --background: var(--color-2);
-  --background-hover: var(--color-2);
-  --background-active: var(--color-2);
-  --border: var(--color-6);
-  --border-hover: var(--color-6);
-  --text: var(--color-11);
-}
-
-.variant-ghost,
-.variant-ghost
-  *:not([class*='variant-']):not(.variant-ghost [class*='variant-'] *) {
-  --background: transparent;
-  --background-hover: var(--color-3);
-  --background-active: var(--color-4);
-  --border: transparent;
-  --border-hover: transparent;
-  --text: var(--color-11);
-}
-
-.variant-outline,
-.variant-outline
-  *:not([class*='variant-']):not(.variant-outline [class*='variant-'] *) {
-  --background: transparent;
-  --background-hover: var(--color-3);
-  --background-active: var(--color-5);
-  --border: var(--color-7);
-  --border-hover: var(--color-8);
-  --text: var(--color-11);
-}
-
-.variant-soft,
-.variant-soft
-  *:not([class*='variant-']):not(.variant-soft [class*='variant-'] *) {
-  --background: var(--color-3);
-  --background-hover: var(--color-4);
-  --background-active: var(--color-5);
-  --border: transparent;
-  --border-hover: transparent;
-  --text: var(--color-11);
-}
-
-.variant-surface,
-.variant-surface
-  *:not([class*='variant-']):not(.variant-surface [class*='variant-'] *) {
-  --background: var(--color-3);
-  --background-hover: var(--color-4);
-  --background-active: var(--color-5);
-  --border: var(--color-7);
-  --border-hover: var(--color-8);
-  --text: var(--color-11);
-}
-
-.variant-solid,
-.variant-solid
-  *:not([class*='variant-']):not(.variant-solid [class*='variant-'] *) {
-  --background: var(--color-9);
-  --background-hover: var(--color-10);
-  --background-active: var(--color-10);
-  --border: transparent;
-  --border-hover: transparent;
-  --text: var(--color-contrast);
-} */