fulldev-ui 0.5.0-beta.13 → 0.5.0-beta.15

package/.env.example

@@ -1,3 +1,3 @@
-SITE_URL=https://localhost:4321
+URL=https://localhost:4321
 STRIPE_SECRET_KEY=
 STRIPE_RESTRICTED_KEY=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.5.0-beta.13",
+  "version": "0.5.0-beta.15",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -25,7 +25,7 @@
     "build:prod": "astro check && astro build",
     "astro": "astro",
     "test": "astro check && astro build && astro preview --host",
-    "link": "pnpm link --global"
+    "l": "pnpm link --global"
   },
   "type": "module",
   "exports": {

package/src/blocks/Intro.astro

@@ -1,7 +1,7 @@
 ---
 import Section from 'fulldev-ui/components/Section.astro'
 
-const { image, ...rest } = Astro.props
+const { ...rest } = Astro.props
 ---
 
 <Section
@@ -9,6 +9,7 @@ const { image, ...rest } = Astro.props
   structure="column"
   size="sm"
   level={1}
+  position="background"
   {...rest}
 />
 

package/src/blocks/Product.astro

@@ -29,10 +29,12 @@ const {
 } = Astro.props
 
 const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
-const src = `/src/images/${images?.[0].id}`
+const imageId = images?.[0]?.id
+const src = `/src/images/${imageId}`
 const allImages = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
 const foundImage = allImages[src]
-const gotImage = await getImage({ src: foundImage ? foundImage() : src })
+const gotImage =
+  imageId && (await getImage({ src: foundImage ? foundImage() : src }))
 ---
 
 <Section
@@ -64,7 +66,7 @@ const gotImage = await getImage({ src: foundImage ? foundImage() : src })
       style={{ marginTop: 'var(--space-5)' }}
     />
     <CartForm
-      image={gotImage.src}
+      image={gotImage?.src}
       {title}
       {price}
       {slug}

package/src/components/Badges.astro

@@ -10,17 +10,7 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
   badges?: ComponentProps<typeof Badge>[] | undefined
 }
 
-const { variant = 'secondary', badges, ...rest } = Astro.props
-
-const buttonVariant = (i: number) => {
-  if (variant === 'primary' && i === 0) return 'primary'
-  else if (variant === 'primary' && i === 1) return 'secondary'
-  else if (variant === 'primary' && i > 1) return 'tertiary'
-  else if (variant === 'secondary' && i === 0) return 'secondary'
-  else if (variant === 'secondary' && i > 0) return 'tertiary'
-  else if (variant === 'tertiary') return 'tertiary'
-  else return 'tertiary'
-}
+const { variant = 'tertiary', badges, ...rest } = Astro.props
 ---
 
 <Element
@@ -28,9 +18,9 @@ const buttonVariant = (i: number) => {
   {...rest}
 >
   {
-    badges?.map((badge, i) => (
+    badges?.map((badge) => (
       <Badge
-        variant={variant === 'link' ? 'link' : buttonVariant(i)}
+        {variant}
         {...badge}
       />
     ))

package/src/components/Card.astro

@@ -35,7 +35,6 @@ const page = slug ? (await getEntry('pages', slug)).data : {}
 
 const entryProps = {
   heading: page.title,
-  text: page.description,
   href: slug ? `/${slug}/` : undefined,
   ...page,
 }

package/src/components/CartSummary.astro

@@ -62,7 +62,7 @@ const { ...rest } = Astro.props
 </style>
 
 <script>
-  import { SITE_URL, STRIPE_RESTRICTED_KEY } from 'astro:env/client'
+  import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
   import { $cart } from 'fulldev-ui/stores/cart.ts'
   import { formatPrice } from 'fulldev-ui/utils/cart'
   import Stripe from 'stripe'
@@ -79,8 +79,8 @@ const { ...rest } = Astro.props
   }
 
   document.addEventListener('astro:page-load', () => {
+    if (!STRIPE_RESTRICTED_KEY) return
     const stripe = new Stripe(STRIPE_RESTRICTED_KEY)
-    if (!stripe) return
     setPrice($cart.get())
 
     $cart.subscribe((items: any) => {
@@ -93,7 +93,7 @@ const { ...rest } = Astro.props
       const items = $cart.get()
 
       const checkoutConfig = {
-        success_url: `${SITE_URL}/checkout`,
+        success_url: `${URL}/checkout`,
         mode: 'payment',
         customer_creation: 'always',
         shipping_address_collection: {
@@ -129,7 +129,7 @@ const { ...rest } = Astro.props
             currency: 'eur',
             product_data: {
               name: item.name,
-              images: [SITE_URL + item.image],
+              images: [URL + item.image],
             },
             unit_amount: Math.round(item.price * 100),
           },

package/src/components/Drawer.astro

@@ -40,7 +40,6 @@ const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
 ---
 
 <Button
-  if={ifProp}
   variant="secondary"
   class:list={['drawer-button', `${id}-button`]}
   onclick={`document.getElementById('${id}').showModal()`}
@@ -51,7 +50,6 @@ const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
 />
 
 <Element
-  if={ifProp}
   onclick={`event.target === this && this.close()`}
   class:list="drawer"
   as="dialog"

package/src/components/Head.astro

@@ -25,6 +25,10 @@ const mergedImage =
     name="generator"
     content={Astro.generator}
   />
+  <link
+    rel="canonical"
+    href={Astro.url.href.endsWith('/') ? Astro.url.href : Astro.url.href + '/'}
+  />
   <ViewTransitions />
   <AstroSeo
     title={mergedTitle ?? ''}

package/src/components/Header.astro

@@ -8,6 +8,7 @@ import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import Cart from './Cart.astro'
 import Drawer from './Drawer.astro'
 import type Menu from './Menu.astro'
+import Socials from './Socials.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'header'> {
   logo?: ComponentProps<typeof Logo>
@@ -19,16 +20,18 @@ interface Props extends GlobalProps, HTMLAttributes<'header'> {
   open?: boolean | undefined
   themeselect?: boolean | undefined
   cart?: string | undefined
+  socials?: ComponentProps<typeof Socials>['socials']
 }
 
 const {
   size = 'sm',
-  open = true,
+  open,
   logo,
   company,
   buttons,
   search,
   panel,
+  socials,
   menu,
   themeselect,
   cart,
@@ -53,7 +56,13 @@ const {
     variant="link"
   />
   {themeselect && <ThemeSelect />}
+  <Socials {socials} />
+  <Cart
+    if={cart}
+    heading={cart}
+  />
   <Drawer
+    class:list={['header-button']}
     icon="menu-2"
     id="menu"
     {logo}
@@ -61,10 +70,6 @@ const {
     {buttons}
     {menu}
   />
-  <Cart
-    if={cart}
-    heading={cart}
-  />
 </Element>
 
 <style lang="scss" is:global>

package/src/components/Heading.astro

@@ -28,7 +28,7 @@ const {
   {...rest}
 >
   <slot />
-  <Fragment set:text={text} />
+  <Fragment set:html={text} />
 </Element>
 
 <style is:global lang="scss">

package/src/components/Label.astro

@@ -19,7 +19,7 @@ const { text, ...rest } = Astro.props
   {...rest}
 >
   <slot />
-  <Fragment set:text={text} />
+  <Fragment set:html={text} />
 </Element>
 
 <style is:global lang="scss">

package/src/components/Menu.astro

@@ -9,6 +9,7 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
   groups?:
     | {
         heading?: ComponentProps<typeof Heading>['text']
+        href?: string
         buttons?: ComponentProps<typeof Button>[]
       }[]
     | undefined
@@ -22,11 +23,11 @@ const { groups, ...rest } = Astro.props
   {...rest}
 >
   {
-    groups?.map(({ heading, buttons }) => (
+    groups?.map(({ heading, href, buttons }) => (
       <Element class:list="menu-group">
         <Heading
           level={6}
-          text={heading}
+          text={href ? `<a href="${href}">${heading}</a>` : heading}
         />
         {buttons?.map((button) => (
           <Button
@@ -44,12 +45,12 @@ const { groups, ...rest } = Astro.props
     .menu {
       display: flex;
       flex-direction: column;
-      gap: var(--space-5);
+      gap: var(--space-6);
 
       .menu-group {
         display: flex;
         flex-direction: column;
-        gap: var(--space-4);
+        gap: calc(var(--space-4) * 1.2);
       }
     }
   }

package/src/components/Section.astro

@@ -236,6 +236,7 @@ const Component =
 
         .segment {
           flex-direction: row;
+          flex-wrap: wrap;
           justify-content: space-between;
           width: 100%;
         }

package/src/components/Social.astro

@@ -16,6 +16,7 @@ const platform = () => {
   if (href.includes('tiktok')) return 'brand-tiktok'
   if (href.includes('twitch')) return 'brand-twitch'
   if (href.includes('github')) return 'brand-github'
+  if (href.includes('discord')) return 'brand-discord'
   return undefined
 }
 ---

package/src/components/Tagline.astro

@@ -16,7 +16,7 @@ const { text, ...rest } = Astro.props
   {...rest}
 >
   <slot />
-  <Fragment set:text={text} />
+  <Fragment set:html={text} />
 </Element>
 
 <style is:global lang="scss">

package/src/components/Text.astro

@@ -22,7 +22,7 @@ const { color = 'base', text, ...rest } = Astro.props
   {...rest}
 >
   <slot />
-  <Fragment set:text={text} />
+  <Fragment set:html={text} />
 </Element>
 
 <style is:global lang="scss">

package/src/components/Toc.astro

@@ -57,6 +57,13 @@ const filteredHeadings = headings?.filter(
         gap: var(--space-4);
         z-index: 10;
         min-width: calc(var(--space-7) * 3);
+        max-width: calc(var(--space-7) * 6);
+
+        .button {
+          line-height: 1.1;
+          text-align: left;
+          white-space: normal;
+        }
 
         .depth-3 {
           padding-left: var(--space-4);

package/src/content/presets/base.yml

@@ -10,6 +10,7 @@ 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:
   header: true
   company: Fulldev UI
@@ -21,14 +22,10 @@ navigation:
     - 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
+
+  socials:
+    - https://github.com/fulldotdev/ui
+    - https://discord.gg/vXZqMbadm8
   menu:
     - heading: Get Started
       buttons:

package/src/integration/index.ts

@@ -66,7 +66,7 @@ export default function fulldevIntegration(
               contentLayer: true,
               env: {
                 schema: {
-                  SITE_URL: envField.string({
+                  URL: envField.string({
                     context: 'client',
                     access: 'public',
                   }),
@@ -84,8 +84,7 @@ export default function fulldevIntegration(
                 validateSecrets: true,
               },
             },
-            site: loadEnv(process.env.NODE_ENV as any, process.cwd(), '')
-              .SITE_URL,
+            site: loadEnv(process.env.NODE_ENV as any, process.cwd(), '').URL,
             integrations: [
               sitemap(),
               mdx(),

package/src/layouts/Layout.astro

@@ -68,7 +68,8 @@ const {
     </slot>
     <slot name="header">
       <Header
-        {...navigation?.header === true ? navigation : {}}
+        open={navigation?.header}
+        {...navigation}
         {...header}
       />
     </slot>
@@ -76,12 +77,8 @@ const {
       <slot name="sidebar">
         <Sidebar
           {...navigation?.sidebar === true ? navigation : {}}
-          logo={navigation?.sidebar?.header
-            ? undefined
-            : navigation?.sidebar?.logo}
-          company={navigation?.sidebar?.header
-            ? undefined
-            : navigation?.sidebar?.company}
+          logo={navigation?.header ? undefined : navigation?.logo}
+          company={navigation?.header ? undefined : navigation?.company}
           {...sidebar}
         />
       </slot>
@@ -117,16 +114,6 @@ const {
           min-height: 100vh;
           color: var(--base-11);
 
-          .for-sidebar {
-            @media (min-width: 1024px) {
-              display: none;
-
-              ~ * {
-                --header-height: 0px;
-              }
-            }
-          }
-
           .core {
             display: flex;
             position: relative;

package/src/layouts/OverviewLayout.astro

@@ -7,7 +7,7 @@ import Products from 'fulldev-ui/blocks/Products.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 import { getFolderChildren } from 'fulldev-ui/utils/getFolderChildren.ts'
-import { getReferenceChildren } from 'fulldev-ui/utils/getReferenceChildren'
+import { getReferenceChildren } from 'fulldev-ui/utils/getReferenceChildren.ts'
 
 type Props = ComponentProps<typeof Layout>
 

package/src/schemas/pageSchema.ts

@@ -51,16 +51,6 @@ export const presets = z
     return mergedData as typeof rest
   })
 
-export const basePreset = z
-  .object({})
-  .passthrough()
-  .transform(async (data) => {
-    if (!fulldevConfig.basePreset) return data
-    const baseEntry = await getEntry('presets', fulldevConfig.basePreset)
-    const mergedData = assign(baseEntry?.data ?? {}, data)
-    return mergedData as typeof data
-  })
-
 export const page = z
   .object({
     component,
@@ -98,4 +88,4 @@ export const page = z
   .partial()
   .strict()
 
-export default i18n.pipe(basePreset).pipe(presets).pipe(page)
+export default i18n.pipe(presets).pipe(page)

package/src/utils/getDeepReferenceChildren.ts

@@ -0,0 +1,14 @@
+import { getCollection, type CollectionEntry } from 'astro:content'
+
+// Pages that reference the current page
+export const getDeepReferenceChildren = async (
+  slug: CollectionEntry<'pages'>['slug']
+) =>
+  (
+    await getCollection('pages', (page) =>
+      page.data?.parents?.some((p: any) => p.slug.includes(slug))
+    )
+  )?.map(({ slug, data }) => ({
+    ...data,
+    href: `/${slug}/`,
+  }))