fulldev-ui 0.4.29 → 0.5.0-beta.1

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

@@ -1,6 +1,6 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Frameworks
 ---
 
 # Frameworks
@@ -22,8 +22,8 @@ This means you can apply Fulldev UI styles to any framework component as follows
 import Button from 'fulldev-ui/components/Button.astro'
 ---
 
-<a class="button variant-primary contrast radius-auto"> Button </a>
-<Button contrast> Button </Button>
+<a class="button variant-primary contrast">Button</a>
+<Button contrast>Button</Button>
 ```
 
 ## CSS frameworks

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

@@ -1,13 +1,13 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Installation
 ---
 
 import Link from 'fulldev-ui/components/Link.astro'
 
 # Installation
 
-Install fulldev-ui with your favorite package manager and you are ready to go. To get started with the integration see the <Link href="/overview/integration">integration page.</Link>
+Install fulldev-ui with your favorite package manager and you are ready to go.
 
 ```bash
 pnpm i fulldev-ui
@@ -18,3 +18,37 @@ yarn add fulldev-ui
 # or
 npm i fulldev-ui
 ```
+
+## Integration
+
+To install the integration, import it in your `astro.config.ts` file.
+You can optionally add a custom css file and define custom colors and other theming options, see the <Link href="/overview/customization/">customization documentation</Link> for more information.
+
+To get started with the content layer, see the <Link href="/overview/content-layer/#manual-setup">content layer documentation</Link>.
+
+```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',
+        },
+      },
+    }),
+  ],
+})
+```

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

@@ -1,6 +1,6 @@
 ---
-_layout: PostLayout
-settings: components
+presets: [docs]
+title: Introduction
 ---
 
 # Introduction
@@ -18,3 +18,7 @@ Want to use Tailwind, or something else? You can overwrite all styles. Need an i
 ##### Automated colors, spacing and sizes
 
 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.
+
+##### Content layer
+
+Build entire websites using just content files like Markdown using our components, blocks and layouts.

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

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

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/presets/base.yml

@@ -0,0 +1,70 @@
+seo:
+  image: /images/og-image.png
+
+code:
+  head: |
+    <script is:inline>
+      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+      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:
+  company: Fulldev UI
+  buttons:
+    - text: Docs
+      href: /overview/introduction
+    - text: Components
+      href: /typography/heading
+    - text: Blocks
+      href: /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
+# 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

package/src/content/presets/blocks.yml

@@ -0,0 +1,4 @@
+component: BlockLayout
+
+navigation:
+  toc: false

package/src/content/presets/docs.yml

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

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);
-} */

package/src/css/custom.css

@@ -1,59 +1,7 @@
-/* TODO: temporary decreased due to z-index issue over header */
-.hero:not(.window .hero)::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  background: radial-gradient(
-    ellipse closest-side,
-    rgba(255, 85, 0, 0.1),
-    #f500 70%
-  );
-  width: 100%;
-  height: 100%;
-  content: '';
-}
-/* .hero:not(.window .hero)::before {
-  position: absolute;
-  top: -80%;
-  left: 0;
-  z-index: -1;
-  background: radial-gradient(
-    ellipse closest-side,
-    rgba(255, 85, 0, 0.1),
-    #f500 90%
-  );
-  width: 100%;
-  height: 170%;
-  content: '';
-} */
-
-.header:not(.window .header) {
-  backdrop-filter: blur(10px);
-  border-color: var(--base-a6) !important;
-  background-color: rgba(17, 17, 16, 0.2) !important;
-}
+@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);
 
-.cta:not(.window .cta) {
-  backdrop-filter: blur(10px);
-  border-color: var(--base-a6) !important;
-  background-color: rgba(17, 17, 16, 0.2) !important;
-  overflow: visible;
-
-  &::before {
-    position: absolute;
-    top: -30%;
-    left: 0;
-    z-index: -1;
-    background: radial-gradient(
-      ellipse closest-side,
-      rgba(255, 85, 0, 0.06),
-      #f500 90%
-    );
-    width: 100%;
-    height: 160%;
-    content: '';
-  }
+* {
+  font-family: 'Inter', sans-serif;
 }
 
 mark {
@@ -64,6 +12,11 @@ mark {
 .astro-code {
   border: 1px solid var(--base-6);
   border-radius: var(--radius-2);
-  background-color: var(--base-2) !important;
+  background-color: #191919 !important;
   padding: var(--space-5);
 }
+
+.header,
+.panel {
+  background-color: var(--color-background);
+}

package/src/css/size.css

@@ -128,3 +128,13 @@
   --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/space.css

@@ -75,11 +75,3 @@
 .link + .heading {
   --space-auto: var(--space-5);
 }
-
-/* // .button:not(.variant-link) + .button:not(.variant-link) {
-//   margin-top: var(--space-3);
-// }
-
-// .variant-link + .variant-link{
-//   margin-top: var(--space-2);
-// } */

package/src/css/styles.css

@@ -1,15 +0,0 @@
-@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);
-
-:root,
-.root {
-  --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
-
-  --font-family: 'Inter', sans-serif;
-  --font-weight: 400;
-
-  --text-heading-font-family: var(--font-family);
-  --text-heading-font-weight: 700;
-
-  --button-font-family: var(--font-family);
-  --button-font-weight: 500;
-}

package/src/images/avatar-1.yml

@@ -0,0 +1 @@
+alt: worlddd