fulldev-ui 0.4.28 → 0.5.0-beta.0

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:
+  logo: 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:
+  logo: 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

package/src/images/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>

package/src/integration/generate-colors.ts

@@ -1,3 +1,5 @@
+// Below code is taken from Radix UI, therefore it does not satisfy Astro strictest tsconfig.
+// @ts-nocheck
 import * as RadixColors from '@radix-ui/colors'
 import BezierEasing from 'bezier-easing'
 import Color from 'colorjs.io'

package/src/integration/index.ts

@@ -1,5 +1,9 @@
+import viteYaml from '@rollup/plugin-yaml'
 import type { AstroIntegration } from 'astro'
 import merge from 'deepmerge'
+import fs from 'fs/promises'
+import yaml from 'js-yaml'
+import path from 'path'
 import virtual from 'vite-plugin-virtual'
 import { generateRadixColors } from './generate-colors'
 
@@ -12,10 +16,12 @@ type Color = {
 interface Config {
   css?: string
   injectRoutes?: boolean
+  overrideComponents?: boolean
+  generateImageEntries?: boolean
   colors: {
     theme: 'light' | 'dark'
-    light?: Color
-    dark?: Color
+    light?: Color | undefined
+    dark?: Color | undefined
   }
 }
 
@@ -28,11 +34,13 @@ const defaultConfig: Config = {
       brand: '#000',
     },
   },
+  generateImageEntries: false,
 }
+
 export default function fulldevIntegration(
-  userConfig?: Partial<Config>
+  userConfig?: Partial<Config> | undefined
 ): AstroIntegration {
-  const config = merge(defaultConfig ?? {}, userConfig ?? {})
+  const config = merge(defaultConfig, userConfig ?? {})
 
   return {
     name: '/integration',
@@ -64,7 +72,7 @@ export default function fulldevIntegration(
           const scaleToString = (
             scale: any,
             palette: 'base' | 'brand',
-            alpha?: boolean
+            alpha?: boolean | undefined
           ) =>
             scale
               .map(
@@ -123,11 +131,14 @@ export default function fulldevIntegration(
         updateConfig({
           vite: {
             plugins: [
+              viteYaml(),
               virtual({
                 'virtual:astro/config': `export default ${JSON.stringify(astroConfig)}`,
-                'virtual:fulldev-ui/config': `export default ${JSON.stringify(config)}`,
+                'virtual:fulldev-ui/config': `export default ${JSON.stringify({
+                  ...config,
+                })}`,
                 'virtual:colors.css': css,
-              }),
+              }) as any,
             ],
             css: {
               preprocessorOptions: {
@@ -141,6 +152,37 @@ export default function fulldevIntegration(
 
         injectScript('page-ssr', `import "virtual:colors.css";`)
 
+        // ----------------------
+        // Generate image YAML files
+        // ----------------------
+        if (config.generateImageEntries) {
+          const srcDir = path.join(process.cwd(), 'src')
+          const filesDir = path.join(srcDir, 'images')
+          const entriesDir = path.join(srcDir, 'content', 'images')
+
+          try {
+            await fs.mkdir(filesDir, { recursive: true })
+            await fs.mkdir(entriesDir, { recursive: true })
+
+            const files = await fs.readdir(filesDir)
+            files.forEach(async (file) => {
+              const filename = path.parse(file).name
+              const yamlPath = path.join(entriesDir, `${filename}.yml`)
+
+              try {
+                await fs.access(yamlPath)
+              } catch {
+                const yamlContent = yaml.dump({
+                  alt: '',
+                })
+                await fs.writeFile(yamlPath, yamlContent, 'utf8')
+              }
+            })
+          } catch (error) {
+            console.error('Error generating image YAML files:', error)
+          }
+        }
+
         // ----------------------
         // Inject routes
         // ----------------------

package/src/layouts/BlockLayout.astro

@@ -1,24 +1,19 @@
 ---
-import type { CollectionEntry } from 'astro:content'
+import type { ComponentProps } from 'astro/types'
 import Intro from 'fulldev-ui/blocks/Intro.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
-type Props = CollectionEntry<'pages'>
+type Props = ComponentProps<typeof Layout>
 
-const { data, render } = Astro.props
+const { render, title, sections, ...rest } = Astro.props
 const { Content } = await render()
 ---
 
-<Layout {...Astro.props}>
-  <Intro
-    variant="ghost"
-    size="md"
-    style={{
-      paddingBottom: '0px',
-      borderColor: 'transparent',
-    }}
-    {...data}
-  />
-  <Content />
-  <slot />
+<Layout
+  class:list="block-layout"
+  {render}
+  {...rest}
+>
+  <Intro heading={title} />
+  {Content && <Content />}
 </Layout>

package/src/layouts/ContactLayout.astro

@@ -0,0 +1,21 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Sections from 'fulldev-ui/components/sections.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+import Contact from '../blocks/Contact.astro'
+
+type Props = ComponentProps<typeof Layout> & {
+  contactProps: ComponentProps<typeof Contact>
+}
+
+const { render, sections, contactProps, ...rest } = Astro.props
+---
+
+<Layout {...Astro.props}>
+  <Contact
+    level={1}
+    {...rest}
+  />
+  <Sections {sections} />
+  <slot />
+</Layout>

package/src/layouts/ContentLayout.astro

@@ -0,0 +1,16 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Article from 'fulldev-ui/blocks/Article.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+
+type Props = ComponentProps<typeof Layout>
+
+const { sections, ...rest } = Astro.props
+---
+
+<Layout
+  class:list="content-layout"
+  {...rest}
+>
+  <Article />
+</Layout>

package/src/layouts/DocsLayout.astro

@@ -0,0 +1,85 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Prose from 'fulldev-ui/components/experimental/Prose.astro'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
+import { crush } from 'radash'
+
+type Props = ComponentProps<typeof Layout>
+
+const { render, slug, navigation, ...rest } = Astro.props
+const { Content } = await render()
+
+const flatButtons = crush((navigation as any)?.buttons ?? {})
+const slugs = Object.entries(flatButtons)
+  .map(([key, value]) => (key.endsWith('.slug') ? value : null))
+  .filter(Boolean)
+const slugIndex = slugs.findIndex((val) => val === slug)
+
+const prevSlug = slugs[slugIndex - 1]
+const nextSlug = slugs[slugIndex + 1]
+---
+
+<Layout
+  class:list="docs-layout"
+  {render}
+  {slug}
+  {navigation}
+  {...rest}
+>
+  <Prose>
+    {Content && <Content />}
+    <Element class:list={['prev-next', { 'next-only': !prevSlug }]}>
+      <Button
+        if={prevSlug}
+        slug={prevSlug}
+        icon="arrow-left"
+        variant="secondary"
+      />
+      <Button
+        if={nextSlug}
+        slug={nextSlug}
+        icon="arrow-right"
+        variant="secondary"
+        reverse={true}
+      />
+    </Element>
+  </Prose>
+</Layout>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    .docs-layout {
+      .prose {
+        --screen: 768px;
+        padding: var(--space-6) var(--gutter);
+        color: var(--color-12);
+
+        > h1 + p {
+          color: var(--color-11);
+        }
+
+        > a,
+        > p > a {
+          color: var(--brand-11);
+
+          &:hover {
+            color: var(--brand-12);
+          }
+        }
+
+        .prev-next {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: var(--space-7);
+
+          &.next-only {
+            justify-content: flex-end;
+          }
+        }
+      }
+    }
+  }
+</style>