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

package/src/content/pages/docs/generating-pages.mdx

@@ -0,0 +1,129 @@
+---
+_layout: doc
+title: Generating Pages
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Generating Pages
+
+With our integration, you can generate pages using content files with type-safe frontmatter, minimal configuration, and an easy-to-understand project structure.
+
+## 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. This instantly gives you access to generating pages, using presets, internationalization and more without any additional setup.
+
+```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,
+    }),
+  ],
+})
+```
+
+`injectRoutes` reads your content files and generates routes for them in the generated site. Supporting file types like markdown and MDX.
+
+## Project Structure
+
+To start with, your project structure should look like this:
+
+```md
+.
+├── src/
+│ ├── blocks/
+│ │ └── ...
+│ ├── components/
+│ │ └── ...
+│ ├── layouts/
+│ │ └── ...
+│ ├── images/
+│ │ └── ...
+│ ├── content/
+│ │ ├── pages/
+│ │ │ └── ...
+│ │ ├── presets/
+│ │ │ ├── base.yml
+│ │ │ └── ...
+│ │ └── ...
+│ ├── css/
+│ │ ├── custom.css
+│ │ └── ...
+├── public/
+│ └── ...
+└──
+```
+
+## Creating a page
+
+Creating a page is as simple as creating a new file in the **src/content/pages** directory.
+
+For example,
+
+- **src/content/pages/index.mdx** will be the root of your site.
+- **src/content/pages/about.mdx** will appear at /about.
+- **src/content/pages/team/first-name.mdx** will appear at /team/first-name.
+
+### Using presets
+
+Presets are a way to apply a set of configurations to a page. This can be apply navigation settings, seo and more.
+
+To learn more about presets, see the <Link href="/guides/using-presets/">using presets</Link> guide.
+
+### Using layouts
+
+Layouts are a way to apply styles to a page. Used for having multiple layouts like a blog layout, documentation layout, etc.
+
+To learn more about layouts, see the <Link href="/guides/using-layouts/">using layouts</Link> guide.
+
+### Frontmatter
+
+Each file has a few frontmatter objects that are important to know about. The frontmatter is fully type-safe, so you will know if you use an unavailable option or mistype something. SEO has priority over title and description, however title and description are used in multiple places like cards so they remain important.
+
+```yml
+---
+preset: [docs]
+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, typically used for blogs, docs, etc.
+```
+
+For all objects avaliable in the frontmatter, see the <Link href="https://ui.full.dev/content-collections/pages/">pages collection</Link>.
+
+## Using custom components
+
+You can use custom components simply creating them in the **src/components**, **src/blocks** or **src/layouts** directory. You can then use those in the component property of the frontmatter. If you want to override a component from the library, see the [overriding components](/guides/overriding-components/) guide.

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

@@ -0,0 +1,20 @@
+---
+_layout: doc
+title: Introduction
+description: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.
+---
+
+## Why we built it
+
+After repeatedly encountering the same challenges in [our company's](https://full.dev) client projects, we decided to build this library. After successfully using it in production websites, we decided to open-source it to help others facing similar problems.
+
+## What makes it special
+
+- Built entirely with `.astro` components
+- Outputs vanilla CSS, html and minimal JavaScript
+- Compatible with all JS frameworks
+- Compatible with Tailwind and Shadcn/ui
+- Integrates with [content collections](https://docs.astro.build/en/guides/content-collections/)
+- Blocks included, like Hero, CTA and Features
+- Automatically generated pages
+- And more...

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

@@ -0,0 +1,50 @@
+---
+_layout: doc
+title: Installation
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Installation
+
+How to install dependencies and setup the integration.
+
+## Add to existing project
+
+If you don't have an existing project, you can create a new one using the [starter template](https://github.com/fulldotdev/starter).
+
+### Automatic setup
+
+Run the following command to automatically install the dependencies and add the integration.
+
+```bash
+npx astro add fulldev-ui
+```
+
+### Manual setup
+
+Run the following command to add fulldev-ui to your dependencies.
+
+```bash
+npm i fulldev-ui
+```
+
+Add the integration to your `astro.config.ts` file.
+
+```ts
+// astro.config.ts
+import { defineConfig } from 'astro/config'
+import fulldev from 'fulldev-ui/integration'
+
+export default defineConfig({
+  integrations: [fulldev()],
+})
+```
+
+## Create new project
+
+Run the following command to setup a new project from the [starter template](https://github.com/fulldotdev/starter).
+
+```bash
+npx astro create --template fulldev-ui
+```

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

@@ -0,0 +1,33 @@
+---
+_layout: doc
+title: Layouts
+---
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+# Layouts
+
+Layouts are astro components that can be used to set the default styles for a page. They are located in the **src/content/layouts** directory.
+
+## Creating a layout
+
+Beside the layouts that are included in the library you can also create your own by adding a new astro component to the **src/content/layouts** directory. You can also override the existing layouts, see the <Link href="/guides/overriding-components/">overriding components</Link> guide for more information.
+
+Currently there are 6 layouts included in the library:
+
+- `Layout`
+- `DocsLayout`
+- `PostLayout`
+- `ProductLayout`
+- `BlockLayout`
+- `ContactLayout`
+
+## Applying a layout
+
+To apply a preset to a page, you can add the `component` property to the frontmatter of a page.
+
+```md
+---
+component: DocsLayout
+---
+```

package/src/content/pages/index.mdx

@@ -1,62 +1,54 @@
 ---
-presets: [base]
-
-seo:
+head:
   title: Fulldev UI - Astro component and block library, open-source
   description: Make websites rapidly with pre-built components and blocks.
-  image: og-image.png
+  image: /og-image.png
 
 title: Home
 
-sections:
-  - component: Hero
+blocks:
+  - _block: Hero1
     badge:
-      text: We added layouts, now you can build entire sites
+      text: 'Introducing v0.6: layouts & pagebuilding'
       href: /overview/installation/
-    heading: The Astro UI library to build content sites
-    text: Make websites with prebuilt components, blocks and layouts
+    heading: Build complete websites with this Astro UI library
+    paragraph: 'Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.'
     buttons:
       - text: Get Started
-        href: /overview/installation/
+        href: /docs/
       - text: GitHub
         href: https://github.com/fulldotdev/ui
         icon: brand-github
-  - component: Article
-  - component: Content
-    color: brand
-    label: Blocks
+        target: _blank
+
+  - _block: Feature1
+    tagline: Blocks
     heading: Use pre-built blocks with just props
-    text: 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: block-code.png
+    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: /block-code.png
     buttons:
-      - href: /blocks
+      - href: /blocks/
         icon: layout
         text: View blocks
 
-  - component: Content
-    color: brand
-    label: Components
+  - _block: Feature1
+    tagline: Components
     heading: Or build your own, with easy to use components
-    text: our rich set of components make it easy to build your own blocks with great customizability through props and global theming.
-    image: component-code.png
-    reverse: odd
+    paragraph: Our rich set of components make it easy to build your own blocks with great customizability through props and global theming.
+    image: /component-code.png
     buttons:
-      - href: /base/badge
+      - text: View components
+        href: /components/badge/
         icon: code
-        text: View components
 
-  - component: Cta
-    size: lg
-    variant: primary
+  - _block: Cta1
     heading: Build content websites in a fraction of time
-    text: A library of components and blocks to build content sites, fast.
+    paragraph: A library of components and blocks to build content sites, fast.
     buttons:
       - text: Get Started
-        href: /overview/installation
-        color: brand
+        href: /overview/installation/
       - text: Github
         href: https://github.com/fulldotdev/ui
-        target: _blank
         icon: brand-github
-        color: brand
+        target: _blank
 ---

package/src/content/pages/posts/post.md

@@ -0,0 +1,7 @@
+---
+title: Post
+description: Lorem ipsum dolor sit
+---
+
+
+  

package/src/content/pages/products/product.md

@@ -0,0 +1,20 @@
+---
+title: Product
+categories: 
+  - categories/category
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+price: 90
+images: 
+  - placeholder.webp
+variants:
+  kleur: 
+    - wit
+    - zwart
+  maat: 
+    - S
+    - M
+    - L
+---
+
+
+  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/content/pages/showcase.mdx

@@ -1,5 +1,4 @@
 ---
-presets: [docs]
 title: Showcase
 ---
 
@@ -8,7 +7,10 @@ import Cards from 'fulldev-ui/components/Cards.astro'
 import { getCollection } from 'astro:content'
 
 export const projects = (
-  await getCollection('pages', ({ slug }) => slug.startsWith('showcase'))
+  await getCollection(
+    'pages',
+    ({ slug }) => slug.startsWith('showcase') && slug !== 'showcase'
+  )
 ).map((p) => p.data)
 
 # Showcase
@@ -16,7 +18,6 @@ export const projects = (
 Projects that are built with Fulldev UI.
 
 <Card
-  color="brand"
   size="sm"
   style={{ marginTop: 'var(--space-6)', marginBottom: 'var(--space-7)' }}
   heading="Your project in this showcase?"

package/src/css/color.css

@@ -1,13 +1,3 @@
-.theme-light,
-.theme-light * {
-  color-scheme: light;
-}
-
-.theme-dark,
-.theme-dark * {
-  color-scheme: dark;
-}
-
 :where(:root),
 :where(.theme-light),
 :where(.theme-dark),

package/src/css/custom.css

@@ -1,22 +1,20 @@
 @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;
 }
 
-.astro-code {
-  border: 1px solid var(--base-6);
-  border-radius: var(--radius-2);
-  background-color: #191919 !important;
-  padding: var(--space-5);
+.rounded-full {
+  border-radius: 999px !important;
+}
+
+.hero .heading,
+.hero .lead {
+  max-width: 680px;
+  text-wrap: balance;
 }
 
-.header,
-.panel {
-  background-color: var(--color-background);
+.logo .image {
+  border-radius: 2px;
 }

package/src/css/size.css

@@ -1,4 +1,4 @@
-:root {
+/* :root {
   --space-sm-1: 4px;
   --space-sm-2: 6px;
   --space-sm-3: 8px;
@@ -128,13 +128,4 @@
   --text-7: var(--text-lg-7);
   --text-8: var(--text-lg-8);
 }
-
-:root {
-  --spacer: var(--space-7);
-  --screen: 100vw;
-  --gutter: max(24px, calc((100% - var(--screen)) / 2));
-}
-
-* {
-  --gutter: max(24px, calc((100% - var(--screen)) / 2));
-}
+ */

package/src/css/theme.css

@@ -0,0 +1,95 @@
+/* :root {
+  --radius: 0.5rem;
+
+  --background: 33.3 30% 97.5%;
+  --foreground: 33.3 10% 10.5%;
+
+  --primary: 20 100% 50%;
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: var(--primary) / 85%;
+
+  --secondary: 20 10% 92%;
+  --secondary-hover: var(--secondary) / 75%;
+  --secondary-foreground: var(--foreground);
+
+  --accent: var(--secondary-hover);
+  --accent-foreground: var(--secondary-foreground);
+
+  --muted: var(--accent);
+  --muted-foreground: var(--foreground) / 75%;
+
+  --card: var(--secondary) / 40%;
+  --card-foreground: var(--foreground);
+
+  --border: var(--foreground) / 8%;
+  --input: var(--foreground) / 26%;
+  --ring: var(--foreground);
+}
+
+.dark {
+  --foreground: 0 0% 100%;
+  --background: 20 40% 3%;
+  --primary: 20 30% 97%;
+  --primary-foreground: 20 100% 0%;
+  --secondary: 20 10% 10%;
+  --secondary-foreground: 20 30% 97%;
+} */
+
+@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: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --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 9.1% 97.8%;
+    --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: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+    --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;
+  }
+}

package/src/env.d.ts

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

package/src/images/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/favicon/mstile-150x150.png"/>
+      <TileColor>#fff</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

package/src/images/favicon/favicon.svg

@@ -0,0 +1,16 @@
+<svg width="758" height="758" viewBox="0 0 758 758" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_5)">
+<rect width="758" height="758" fill="#FF5500"/>
+<rect x="-133" y="-133" width="1024" height="1024" fill="url(#paint0_radial_45_5)"/>
+<path d="M269.363 565C264.945 565 261.363 561.419 261.363 557V200.637C261.363 196.218 264.945 192.637 269.363 192.637H499.909C504.327 192.637 507.909 196.218 507.909 200.637V249.546C507.909 253.964 504.327 257.546 499.909 257.546H348.091C343.672 257.546 340.091 261.128 340.091 265.546V338.273C340.091 342.691 343.672 346.273 348.091 346.273H483.545C487.963 346.273 491.545 349.855 491.545 354.273V403.182C491.545 407.6 487.963 411.182 483.545 411.182H348.091C343.672 411.182 340.091 414.764 340.091 419.182V557C340.091 561.419 336.509 565 332.091 565H269.363Z" fill="#EEEEEC"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_45_5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(379 379) rotate(45) scale(724.077)">
+<stop stop-color="#111110" stop-opacity="0.2"/>
+<stop offset="0.9" stop-color="#111110" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_45_5">
+<rect width="758" height="758" fill="white"/>
+</clipPath>
+</defs>
+</svg>