fulldev-ui 0.5.0-beta.6 → 0.5.0-beta.8

package/astro.config.ts

@@ -25,6 +25,8 @@ export default defineConfig({
       company: 'Fulldev UI',
       favicon: 'src/images/favicon.svg',
       css: '/src/css/custom.css',
+      basePreset: 'base',
+      injectRoutes: true,
       colors: {
         theme: 'dark',
         light: {
@@ -38,7 +40,6 @@ export default defineConfig({
           brand: '#F50',
         },
       },
-      injectRoutes: true,
     }),
   ],
   redirects: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.5.0-beta.6",
+  "version": "0.5.0-beta.8",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Article.astro

@@ -1,21 +1,40 @@
 ---
-import { getEntry } from 'astro:content'
 import Prose from 'fulldev-ui/components/experimental/Prose.astro'
 import Section from 'fulldev-ui/components/Section.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
 
-const { ...rest } = Astro.props
-
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
-const currentEntry = await getEntry('pages', slug)
-const render = currentEntry && (await currentEntry.render())
-const { Content } = render || {}
+const { toc = 'Op deze pagina', render } = Astro.props
+const { Content } = (render && (await render())) || {}
 ---
 
-<Section
-  style={{ '--screen': '768px' }}
-  {...rest}
->
-  <Prose id="prose">
+<Section class:list="article">
+  <Prose>
     {Content && <Content />}
+    <slot />
   </Prose>
+  <Toc
+    {render}
+    heading={toc}
+  />
 </Section>
+
+<style is:global lang="scss">
+  .article {
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+    flex-direction: row;
+    align-items: start;
+    height: 100%;
+
+    &:first-child {
+      padding-top: var(--space-6);
+    }
+
+    .prose {
+      margin-right: auto;
+      margin-left: auto;
+      max-width: 768px;
+    }
+  }
+</style>

package/src/blocks/Product.astro

@@ -27,7 +27,7 @@ const {
   ...rest
 } = Astro.props
 
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
+const slug = Astro.params.page || 'index'
 const src = `/src/images/${images?.[0].id}`
 ---
 

package/src/components/Cart.astro

@@ -10,11 +10,13 @@ const {
   icon = 'shopping-cart',
   color = 'brand',
   id = 'cart',
+  if: ifProp,
   ...rest
 } = Astro.props
 ---
 
 <Drawer
+  if={ifProp}
   class:list="cart"
   {icon}
   {color}

package/src/components/Drawer.astro

@@ -5,6 +5,7 @@ import Element from 'fulldev-ui/components/Element.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
 import Menu from 'fulldev-ui/components/Menu.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Buttons from './Buttons.astro'
 import Heading from './Heading.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'aside'> {
@@ -15,6 +16,7 @@ interface Props extends GlobalProps, HTMLAttributes<'aside'> {
   logo?: ComponentProps<typeof Logo> | undefined
   company?: ComponentProps<typeof Logo>['company']
   menu?: ComponentProps<typeof Menu>['groups']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
 }
 
 const {
@@ -24,15 +26,21 @@ const {
   color,
   variant,
   text,
+  buttons,
   heading,
   logo,
   company,
   menu,
+  if: ifProp,
   ...rest
 } = Astro.props
+
+const buttonsGroup = { heading: '', buttons: buttons }
+const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
 ---
 
 <Button
+  if={ifProp}
   variant="secondary"
   class:list={['drawer-button', `${id}-button`]}
   onclick={`document.getElementById('${id}').showModal()`}
@@ -43,6 +51,7 @@ const {
 />
 
 <Element
+  if={ifProp}
   onclick={`event.target === this && this.close()`}
   class:list="drawer"
   as="dialog"
@@ -72,7 +81,7 @@ const {
       <slot name="header" />
     </Element>
     <Element class:list="drawer-content">
-      <Menu groups={menu} />
+      <Menu groups={mergedMenu} />
       <slot />
     </Element>
     <Element

package/src/components/Footer.astro

@@ -115,7 +115,6 @@ const {
       background-color: var(--base-2);
       padding: var(--space-7) var(--gutter);
       width: 100%;
-      overflow: auto;
 
       @media (min-width: 1024px) {
         grid-auto-columns: 1fr;

package/src/components/Header.astro

@@ -56,11 +56,15 @@ const {
   <Drawer
     icon="menu-2"
     id="menu"
-    {menu}
     {logo}
     {company}
+    {buttons}
+    {menu}
+  />
+  <Cart
+    if={cart}
+    heading={cart}
   />
-  <Cart heading={cart} />
 </Element>
 
 <style lang="scss" is:global>

package/src/components/Image.astro

@@ -42,7 +42,6 @@ const image = images[src as keyof typeof images]
   image && (
     <AstroImage
       class:list={['image', position && `position-${position}`]}
-      style={{ '--screen': '100vw' }}
       alt={alt || getAltBySrc()}
       src={image ? image() : src}
       width={width}

package/src/components/Section.astro

@@ -154,7 +154,6 @@ const Component =
       align-items: flex-start;
       gap: var(--space-6) var(--space-7);
       padding: var(--spacer) var(--gutter);
-      overflow: auto;
 
       .segment {
         display: flex;

package/src/components/Sidebar.astro

@@ -91,7 +91,7 @@ const {
           top: 0;
           flex: 1;
           flex-direction: column;
-          padding: var(--space-6) var(--gutter);
+          padding: var(--space-md-6) var(--gutter);
           width: 100%;
           overflow-y: auto;
         }

package/src/components/Toc.astro

@@ -20,7 +20,7 @@ const filteredHeadings = headings?.filter(
 ---
 
 <Element
-  if={filteredHeadings?.length > 0}
+  if={filteredHeadings?.length > 1}
   class:list="toc"
   {size}
   {...rest}
@@ -49,17 +49,14 @@ const filteredHeadings = headings?.filter(
       @media (min-width: 1024px) {
         display: flex;
         position: sticky;
-        top: var(--header-height, 0px);
+        top: calc(var(--header-height, 0px) + var(--space-6));
         bottom: 0;
         flex-shrink: 0;
         flex-direction: column;
         justify-content: flex-start;
         gap: var(--space-4);
         z-index: 10;
-        padding: var(--space-md-6) var(--gutter);
-        width: calc(var(--space-7) * 4);
-        height: calc(100vh - var(--header-height, 0px));
-        overflow-y: auto;
+        min-width: calc(var(--space-7) * 3);
 
         .depth-3 {
           padding-left: var(--space-4);

package/src/components/docs/PropsTable.astro

@@ -3,7 +3,7 @@ import Table from 'fulldev-ui/components/Table.astro'
 import { readFileSync } from 'node:fs'
 import { pascal } from 'radash'
 
-const slug = Astro.url.pathname.replace(/\/$/, '').split('/').pop() || ''
+const slug = Astro.params.page || 'index'
 const componentName = pascal(slug)
 
 const allComponents = import.meta.glob('/src/**/*.astro', { eager: true })

package/src/content/presets/base.yml

@@ -10,9 +10,8 @@ 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>
-header: true
 navigation:
-  cart: Winkelwagen
+  header: true
   company: Fulldev UI
   buttons:
     - text: Docs

package/src/content/presets/docs.yml

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

package/src/layouts/DocsLayout.astro

@@ -2,14 +2,13 @@
 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'
+import PostLayout from './PostLayout.astro'
 
 type Props = ComponentProps<typeof Layout>
 
-const { render, slug, navigation, ...rest } = Astro.props
-const { Content } = await render()
+const { slug, navigation } = Astro.props
 
 const flatButtons = crush((navigation as any)?.buttons ?? {})
 const slugs = Object.entries(flatButtons)
@@ -21,45 +20,34 @@ const prevSlug = slugs[slugIndex - 1]
 const nextSlug = slugs[slugIndex + 1]
 ---
 
-<Layout
+<PostLayout
   class:list="docs-layout"
-  {render}
-  {slug}
-  {navigation}
-  {...rest}
+  {...Astro.props}
 >
-  <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>
+  <Element
+    class:list={['prev-next', { 'next-only': !prevSlug }]}
+    slot="prose"
+  >
+    <Button
+      if={prevSlug}
+      slug={prevSlug}
+      icon="arrow-left"
+      variant="secondary"
+    />
+    <Button
+      if={nextSlug}
+      slug={nextSlug}
+      icon="arrow-right"
+      variant="secondary"
+      reverse={true}
+    />
+  </Element>
+</PostLayout>
 
 <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);

package/src/layouts/Layout.astro

@@ -10,7 +10,6 @@ import Header from 'fulldev-ui/components/Header.astro'
 import Section from 'fulldev-ui/components/Section.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Sidebar from 'fulldev-ui/components/Sidebar.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 type Props = GlobalProps &
@@ -69,19 +68,20 @@ const {
     </slot>
     <slot name="header">
       <Header
-        class:list={{
-          'for-sidebar': sidebar,
-        }}
-        if={navigation || header}
-        {...navigation}
+        {...navigation?.header === true ? navigation : {}}
         {...header}
       />
     </slot>
     <div class="core">
       <slot name="sidebar">
         <Sidebar
-          if={sidebar}
-          {...navigation}
+          {...navigation?.sidebar === true ? navigation : {}}
+          logo={navigation?.sidebar?.header
+            ? undefined
+            : navigation?.sidebar?.logo}
+          company={navigation?.sidebar?.header
+            ? undefined
+            : navigation?.sidebar?.company}
           {...sidebar}
         />
       </slot>
@@ -92,12 +92,6 @@ const {
           <Sections {sections} />
         </slot>
       </main>
-      <slot name="toc">
-        <Toc
-          heading={toc}
-          {render}
-        />
-      </slot>
     </div>
     <slot name="footer">
       <Footer {...footer} />
@@ -116,7 +110,6 @@ const {
         }
 
         body {
-          --screen: 100vw;
           display: flex;
           flex-direction: column;
           background-color: var(--base-background);
@@ -148,7 +141,6 @@ const {
               background-color: var(--color-background);
               width: 100%;
               max-width: 100vw;
-              overflow-x: hidden;
             }
           }
         }

package/src/layouts/OverviewLayout.astro

@@ -11,7 +11,7 @@ import { getReferenceChildren } from 'fulldev-ui/utils/getReferenceChildren'
 
 type Props = ComponentProps<typeof Layout>
 
-const { slug, sections, title, description } = Astro.props
+const { slug, sections, title, description, render } = Astro.props
 
 const folderChildren = await getFolderChildren(slug)
 const referenceChildren = await getReferenceChildren(slug)
@@ -33,7 +33,10 @@ const referenceChildren = await getReferenceChildren(slug)
     cards={referenceChildren}
     structure="grid"
   />
-  <Article style={{ '--screen': '768px' }} />
+  <Article
+    {render}
+    toc={false}
+  />
   <Sections {sections} />
   <slot />
 </Layout>

package/src/layouts/PostLayout.astro

@@ -3,22 +3,19 @@ import type { ComponentProps } from 'astro/types'
 import Article from 'fulldev-ui/blocks/Article.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
-import Excerpt from '../blocks/Excerpt.astro'
 
 type Props = ComponentProps<typeof Layout>
 
-const { sections, title, description, ...rest } = Astro.props
+const { sections, render, toc } = Astro.props
 ---
 
 <Layout {...Astro.props}>
-  <Excerpt
-    heading={title}
-    align="start"
-    text={description}
-    style={{ '--screen': '768px' }}
-    {...rest}
-  />
-  <Article />
+  <Article
+    {render}
+    {toc}
+  >
+    <slot name="prose" />
+  </Article>
   <Sections {sections} />
   <slot />
 </Layout>

package/src/schemas/pageSchema.ts

@@ -80,8 +80,8 @@ export const page = z
     section,
     sections,
     footer,
-    header: z.boolean().or(header),
-    sidebar: z.boolean().or(sidebar),
+    header: header,
+    sidebar: sidebar,
     navigation,
     toc,
     price,

package/src/schemas/utils/navigation.ts

@@ -1,4 +1,8 @@
+import { z } from 'astro:content'
 import header from '../components/header'
 import sidebar from '../components/sidebar'
 
-export default sidebar.merge(header)
+export default sidebar.merge(header).extend({
+  header: z.boolean().optional(),
+  sidebar: z.boolean().optional(),
+})