fulldev-ui 0.5.0-beta.8 → 0.6.0-beta.0

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

@@ -1,75 +0,0 @@
----
-presets: [docs]
-title: Components
----
-
-# Components
-
-Fulldev UI offers a collection of components that are styled with regular CSS, have cascading styles, and are easy to customize.
-
-## Usage
-
-To use a component, you need to import it from the `fulldev-ui` package.
-
-```astro
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button text="Click me" />
-```
-
-```astro
----
-import Hero from 'fulldev-ui/blocks/Hero.astro'
----
-
-<Hero text="Props here" />
-```
-
-```astro
----
-import Hero from 'fulldev-ui/blocks/Hero.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
----
-
-<Layout>
-  <Hero />
-</Layout>
-```
-
-## Slots
-
-Even though we recommend using props to pass content into components, you can also use slots to inject content into a component.
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-{/* Slots example */}
-<Button>Click me</Button>
-
-{/* Props example */}
-<Button text="Click me" />
-```
-
-## Rendering
-
-If no content passed to a component, it will NOT render anything. unless you pass an `if` prop.
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-{/* This will not render anything */}
-<Button />
-
-{/* This will render a button */}
-<Button if={true} />
-```
-
-## Overriding Components
-
-You can override components by creating a new component with the same name as one from the library in the **src/components** directory and adding your custom code. This also works for blocks and layouts.

package/src/content/pages/overview/content-collections.mdx

@@ -1,139 +0,0 @@
----
-presets: [docs]
-title: Content Collections
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-# Content Collections
-
-We utilize <Link href="https://docs.astro.build/docs/guides/content-collections/">Astro's Content Layer</Link> to create entire websites using just content files and our components.
-
-## Starter Template
-
-This is the recommended way to get started with our content layer integration. We've created a <Link href="https://github.com/fulldotdev/starter/tree/main">starter template</Link> with examples of everything you need to get started.
-
-```bash
-pnpm create astro@latest -- --template fulldotdev/starter
-```
-
-## Manual Setup
-
-To get started with the manual setup, you need to install the <Link href="/overview/installation/">integration</Link> and add `injectRoutes: true` to your `astro.config.ts` file, see <Link href="#type-safe-frontmatter">frontmatter</Link> below for more information on how this generates a site using content files.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      // other options
-      injectRoutes: true,
-    }),
-  ],
-})
-```
-
-## Type-safe frontmatter
-
-Each file has a few frontmatter objects that are important to know about. Seo has priority over title and description, however title and description is used in multiple places like a card.
-
-```yml
----
-preset: [docs] # Applies the configuration from src/content/presets/docs.yml
-component: DocsLayout
-
-seo:
-  title: Page Title
-  description: This is my page description
-  image: /image.jpg # Open Graph Image
-
-# Information on the page, this is used in places like card, sidebar, etc.
-title: Page Title
-description: This is my page description
-
-sections: # Here you generate the page by adding a component and passing props
-  - component: Hero
-    heading: Page Title
-    text: This is my page description
-    buttons:
-      - text: Button
-        color: brand
-        href: /
-      - text: Button
-        href: /
----
-# This is the prose, you can use markdown here
-```
-
-For all objects avaliable in the Content Layer, see the <Link href="https://ui.full.dev/schemas/page/">schemas</Link>.
-
-### Presets
-
-Presets are configuration files that can be used to set the default values for a page. They are located in the **src/content/presets** directory and you can use them by adding the `preset` property to the frontmatter of a page or add a `basePreset` to the integration setup in the `astro.config.ts` file.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      // other options
-      basePreset: 'base', // Applies the configuration from src/content/presets/base.yml to every page
-    }),
-  ],
-})
-```
-
-## i18n
-
-Getting started with i18n is easy, you can easily add additional languages by creating a new folder named after a language code in the **content/pages** directory and adding your content files in the new language.
-
-These pages are just as static as the others however you can merge them with the default language by adding the `i18n` key to the frontmatter.
-
-By merging pages you only need to specify the content that is different for the new language. Things like images do not need to be repeated in these new files. See example:
-
-content/pages/index.md:
-
-```md
----
-sections:
-  - component: Hero
-    image: /image.webp
-    heading: Page Title
-    text: This is my page description
----
-```
-
-content/pages/nl/index.md:
-
-```md
----
-i18n: index
-
-sections:
-  - component: Hero
-    heading: Page Title
-    text: This is my page description
----
-```
-
-These return the same results
-
-### Example structure
-
-```bash
-.
-├── src/
-│   ├── content/
-│   │   ├── pages/
-│   │   │   ├── index.md
-│   │   │   ├── nl/
-│   │   │   │   └── index.md
-│   │   │   └── de/
-│   │   │   │   └── index.md
-```

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

@@ -1,198 +0,0 @@
----
-presets: [docs]
-title: Frameworks
----
-
-# Frameworks
-
-Fulldev UI is written in vanilla CSS and .astro files. It is framework agnostic.
-
-## JS frameworks
-
-All styles in Fulldev UI use regular CSS and classes. Classes use the following naming convention:
-
-- Component classes are the same as the component name, like `button` for `<Button>`.
-- Prop classes have the prop name as prefix, like `variant-primary` for `<Button variant="primary">`.
-- If a prop is a boolean the class is added without a prefix, like `contrast`.
-
-This means you can apply Fulldev UI styles to any framework component as follows:
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<a class="button variant-primary contrast">Button</a>
-<Button contrast>Button</Button>
-```
-
-## CSS frameworks
-
-A TailwindCSS plugin and UnoCSS preset is available.
-
-### TailwindCSS
-
-In your `tailwind.config.ts` add the following:
-
-```ts
-// tailwind.config.ts
-import fulldevUI from 'fulldev-ui/tailwind'
-
-export default {
-  plugins: [fulldevUI],
-}
-```
-
-In your `astro.config.ts` add the following:
-
-```ts
-// astro.config.ts
-import tailwind from '@astrojs/tailwind'
-
-export default defineConfig({
-  integrations: [
-    tailwind({
-      // Disable injecting styles, import manually instead
-      applyBaseStyles: false,
-    }),
-  ],
-})
-```
-
-Import the css file file below anywhere in your project.
-
-```css
-@tailwind base layer(base);
-@tailwind components;
-@tailwind utilities;
-```
-
-### UnoCSS
-
-In your `uno.config.ts` add the following:
-
-```ts
-// uno.config.ts
-import fulldevUI from 'fulldev-ui/unocss'
-
-export default defineConfig({
-  injectReset: false,
-  presets: [fulldevUI],
-})
-```
-
-Do not use `injectReset` when using the UnoCSS preset, as it will conflict with the reset provided by Fulldev UI. If you do want a style reset, be sure to import it in the `base` layer, similar to the TailwindCSS example above.
-
-## Utility classes
-
-The following classes are available when using the Tailwind plugin or UnoCSS preset.
-
-### Spacing
-
-The following spacing classes are added to your tailwind/uno config.
-
-You can use them like `p-space-1`, `m-space-1`, `h-space-1`, `w-space-1`, etc.
-
-```ts
-spacing: {
-  'space-1': 'var(--space-1)',
-  'space-2': 'var(--space-2)',
-  'space-3': 'var(--space-3)',
-  'space-4': 'var(--space-4)',
-  'space-5': 'var(--space-5)',
-  'space-6': 'var(--space-6)',
-  'space-7': 'var(--space-7)',
-},
-```
-
-### Font size
-
-The following spacing classes are added to your tailwind/uno config.
-
-You can use them like `text-1`, `text-2`, `text-3`, etc.
-
-```ts
-fontSize: {
-  1: 'var(--text-1)',
-  2: 'var(--text-2)',
-  3: 'var(--text-3)',
-  4: 'var(--text-4)',
-  5: 'var(--text-5)',
-  6: 'var(--text-6)',
-  7: 'var(--text-7)',
-  8: 'var(--text-8)',
-}
-```
-
-### Border radius
-
-The following border radius classes are added to your tailwind/uno config.
-
-You can use them like `rounded-1`, `rounded-2`, `rounded-3`, etc.
-
-```ts
-borderRadius: {
-  1: 'var(--radius-1)',
-  2: 'var(--radius-2)',
-  3: 'var(--radius-3)',
-}
-```
-
-### Color classes
-
-The following color classes are added to your tailwind/uno config.
-
-You can use them like `bg-color-1`, `text-base-2`, `border-base-6`, etc.
-
-```ts
-colors: {
-  color: {
-    1: 'var(--color-1)',
-    2: 'var(--color-2)',
-    3: 'var(--color-3)',
-    4: 'var(--color-4)',
-    5: 'var(--color-5)',
-    6: 'var(--color-6)',
-    7: 'var(--color-7)',
-    8: 'var(--color-8)',
-    9: 'var(--color-9)',
-    10: 'var(--color-10)',
-    11: 'var(--color-11)',
-    12: 'var(--color-12)',
-    contrast: 'var(--color-contrast)',
-    background: 'var(--color-background)',
-  },
-  base: {
-    1: 'var(--color-base-1)',
-    2: 'var(--color-base-2)',
-    3: 'var(--color-base-3)',
-    4: 'var(--color-base-4)',
-    5: 'var(--color-base-5)',
-    6: 'var(--color-base-6)',
-    7: 'var(--color-base-7)',
-    8: 'var(--color-base-8)',
-    9: 'var(--color-base-9)',
-    10: 'var(--color-base-10)',
-    11: 'var(--color-base-11)',
-    12: 'var(--color-base-12)',
-    contrast: 'var(--color-base-contrast)',
-    background: 'var(--color-base-background)',
-  },
-  brand: {
-    1: 'var(--color-brand-1)',
-    2: 'var(--color-brand-2)',
-    3: 'var(--color-brand-3)',
-    4: 'var(--color-brand-4)',
-    5: 'var(--color-brand-5)',
-    6: 'var(--color-brand-6)',
-    7: 'var(--color-brand-7)',
-    8: 'var(--color-brand-8)',
-    9: 'var(--color-brand-9)',
-    10: 'var(--color-brand-10)',
-    11: 'var(--color-brand-11)',
-    12: 'var(--color-brand-12)',
-    contrast: 'var(--color-brand-contrast)',
-    background: 'var(--color-brand-background)',
-  }
-}
-```

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

@@ -1,53 +0,0 @@
----
-presets: [docs]
-title: Installation
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-# Installation
-
-You can add fulldev-ui to your project, or use the starter template.
-
-## Add to existing project
-
-### Automatic setup
-
-Use the astro add command to automatically install the dependencies and add the integration.
-
-```bash
-npx astro add fulldev-ui
-```
-
-## Manual installation
-
-Install fulldev-ui with your favorite package manager.
-
-```bash
-pnpm i fulldev-ui
-# or
-bun i fulldev-ui
-# or
-yarn add fulldev-ui
-# or
-npm i fulldev-ui
-```
-
-Then setup the integration in your `astro.config.ts` file.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-export default defineConfig({
-  integrations: [fulldev()],
-})
-```
-
-## Using the starter template
-
-The easiest way to get started is to use the [starter template](https://github.com/fulldotdev/starter).
-
-```bash
-pnpm create astro@latest -- --template fulldotdev/starter
-```

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

@@ -1,30 +0,0 @@
----
-presets: [docs]
-title: Introduction
----
-
-# Introduction
-
-**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).
-
-## Why we built it
-
-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.
-
-## Some features
-
-- 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...
-
-## A word of caution
-
-**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,69 +0,0 @@
----
-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

@@ -1,17 +0,0 @@
----
-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

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

package/src/content/pages/showcase/record.md

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

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

@@ -1,73 +0,0 @@
----
-presets: [docs]
-
-title: Heading
----
-
-# Heading
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading>The quick brown fox jumps</Heading>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading level={1}>The quick brown fox jumps</Heading>
-<Heading level={2}>The quick brown fox jumps</Heading>
-<Heading level={3}>The quick brown fox jumps</Heading>
-<Heading level={4}>The quick brown fox jumps</Heading>
-<Heading level={5}>The quick brown fox jumps</Heading>
-<Heading level={6}>The quick brown fox jumps</Heading>
-```
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading size="sm">The quick brown fox jumps</Heading>
-<Heading size="md">The quick brown fox jumps</Heading>
-<Heading size="lg">The quick brown fox jumps</Heading>
-```
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading>The quick brown fox jumps</Heading>
-<Heading contrast={false}>The quick brown fox jumps</Heading>
-```
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading color="base">The quick brown fox jumps</Heading>
-<Heading color="brand">The quick brown fox jumps</Heading>
-```
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading contrast={false} color="base">The quick brown fox jumps</Heading>
-<Heading contrast={false} color="brand">The quick brown fox jumps</Heading>
-```