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

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

@@ -0,0 +1,129 @@
+---
+presets: [docs]
+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,23 @@
+---
+presets: [docs]
+title: Introduction
+---
+
+# Introduction
+
+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 @@
+---
+presets: [docs]
+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 @@
+---
+presets: [docs]
+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

@@ -11,22 +11,24 @@ title: Home
 sections:
   - component: Hero
     badge:
-      text: We added layouts, now you can build entire sites
+      text: 'Introducing v0.5: page building & generation'
       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
+    # heading: The Astro UI library to build complete websites
+    lead: '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
+    image: block-code.png
+
   - component: Content
     color: brand
     label: 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.
+    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
@@ -37,11 +39,11 @@ sections:
     color: brand
     label: 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.
+    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
     reverse: odd
     buttons:
-      - href: /base/badge
+      - href: /components/badge
         icon: code
         text: View components
 
@@ -49,7 +51,7 @@ sections:
     size: lg
     variant: primary
     heading: Build content websites in a fraction of time
-    text: A library of components and blocks to build content sites, fast.
+    lead: A library of components and blocks to build content sites, fast.
     buttons:
       - text: Get Started
         href: /overview/installation

package/src/content/pages/showcase.mdx

@@ -8,7 +8,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 +19,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/content/presets/base.yml

@@ -1,4 +1,4 @@
-theme: dark
+theme: system
 
 seo:
   image: /images/og-image.png
@@ -10,74 +10,91 @@ 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>
+
 navigation:
+  themer: true
   header: true
   company: Fulldev UI
-  buttons:
+  logo: favicon.svg
+  links:
     - text: Docs
-      href: /overview/introduction
+      href: /docs/
     - text: Components
-      href: /typography/heading
+      href: /docs/components/badge/
     - text: Blocks
-      href: /blocks/banner
+      href: /docs/blocks/banner/
     - showcase
-    - href: https://github.com/fulldotdev/ui
-      target: _blank
-      icon: brand-github
-      variant: secondary
-    - href: https://discord.gg/vXZqMbadm8
-      target: _blank
-      icon: brand-discord
-      variant: secondary
+
+  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
-      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
+      links:
+        - docs
+        - docs/installation
+        - docs/customization
+        - docs/frameworks
+        - docs/components
+        - docs/collections
+    - heading: Collections
+      links:
+        - docs/collections/pages
+        - docs/collections/presets
+        - docs/collections/images
+    - heading: Components
+      links:
+        - docs/components/avatar
+        - docs/components/badge
+        - docs/components/badges
+        - docs/components/button
+        - docs/components/buttons
+        # - docs/components/card
+        # - docs/components/cards
+        # - docs/components/cart
+        # - docs/components/cart-form
+        # - docs/components/cart-list
+        # - docs/components/cart-summary
+        - docs/components/channel
+        - docs/components/channels
+        - docs/components/checkbox
+        - docs/components/code
+        # - docs/components/dialog
+        # - docs/components/drawer
+        # - docs/components/element
+        # - docs/components/footer
+        # - docs/components/form
+        # - docs/components/head
+        # - docs/components/header
+        - docs/components/heading
+        - docs/components/icon
+        - docs/components/image
+        - docs/components/input
+        - docs/components/label
+        - docs/components/lead
+        - docs/components/link
+        - docs/components/links
+        - docs/components/list
+        # - docs/components/locale-switcher
+        - docs/components/logo
+        - docs/components/menu
+        - docs/components/paragraph
+        # - docs/components/price
+        - docs/components/prose
+        - docs/components/rating
+        # - docs/components/search
+        # - docs/components/section
+        # - docs/components/sections
+        - docs/components/select
+        # - docs/components/sidebar
+        - docs/components/social
+        - docs/components/socials
+        - docs/components/switch
+        # - docs/components/table
+        - docs/components/tagline
+        # - docs/components/text
+        - docs/components/textarea
+        - docs/components/themer
+        # - docs/components/toc
+        # - docs/components/writeup

package/src/content/presets/docs.yml

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

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,93 @@
+/* :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%;
+  }
+}

package/src/images/logo-1.svg

@@ -0,0 +1,11 @@
+<svg width="694" height="671" viewBox="0 0 694 671" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M490.133 0H693.066L660.933 117.5H458L490.133 0Z" fill="#FF5500"/>
+<path d="M286.133 304H489.066L456.933 421.5H254L286.133 304Z" fill="#FF5500"/>
+<path d="M297.133 0H500.066L467.933 117.5H265L297.133 0Z" fill="#FF5500"/>
+<path d="M141.133 304H344.066L311.933 421.5H109L141.133 304Z" fill="#FF5500"/>
+<path d="M110.133 418L244.633 418L212.5 535.5H78L110.133 418Z" fill="#FF5500"/>
+<path d="M89.1329 494L223.633 494L191.5 611.5H57L89.1329 494Z" fill="#FF5500"/>
+<path d="M72.94 553L206.633 553L174.693 670.5H41L72.94 553Z" fill="#FF5500"/>
+<path d="M104.133 0H307.066L274.933 117.5H72L104.133 0Z" fill="#FF5500"/>
+<path d="M32.1329 0H235.066L202.933 117.5H0L32.1329 0Z" fill="#FF5500"/>
+</svg>

package/src/images/logo-2.svg

@@ -0,0 +1,13 @@
+<svg width="694" height="739" viewBox="0 0 694 739" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M490.133 0H693.066L660.933 117.5H458L490.133 0Z" fill="#FF5500"/>
+<path d="M286.133 304H489.066L456.933 421.5H254L286.133 304Z" fill="#FF5500"/>
+<path d="M354.133 304H557.066L524.933 421.5H322L354.133 304Z" fill="#FF5500"/>
+<path d="M297.133 0H500.066L467.933 117.5H265L297.133 0Z" fill="#FF5500"/>
+<path d="M141.133 304H344.066L311.933 421.5H109L141.133 304Z" fill="#FF5500"/>
+<path d="M110.133 418L244.633 418L212.5 535.5H78L110.133 418Z" fill="#FF5500"/>
+<path d="M89.1329 494L223.633 494L191.5 611.5H57L89.1329 494Z" fill="#FF5500"/>
+<path d="M72.94 553L206.633 553L174.693 670.5H41L72.94 553Z" fill="#FF5500"/>
+<path d="M54.94 621L188.633 621L156.693 738.5H23L54.94 621Z" fill="#FF5500"/>
+<path d="M104.133 0H307.066L274.933 117.5H72L104.133 0Z" fill="#FF5500"/>
+<path d="M32.1329 0H235.066L202.933 117.5H0L32.1329 0Z" fill="#FF5500"/>
+</svg>