fulldev-ui 0.6.0-beta.3 → 0.6.0-beta.7

package/src/components/Toc.astro

@@ -1,22 +1,23 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
+import type { MarkdownHeading } from 'astro'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Links from './Links.astro'
+import Link from './Link.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  heading?: ComponentProps<typeof Heading>['text']
-  render?: CollectionEntry<'pages'>['render'] | undefined
+  headings?: MarkdownHeading[] | undefined
 }
 
-const { size = 'sm', heading = 'On this page', render, ...rest } = Astro.props
+const { headings, ...rest } = Astro.props
 
-const headings = render ? (await render())?.headings : []
 const filteredHeadings = headings?.filter(
   (heading: any) => heading.depth >= 2 && heading.depth <= 4
 )
+
+const h1 = headings?.find((heading: any) => heading.depth === 1)
+
 const links = filteredHeadings?.map((button: any) => ({
   text: button.text,
   href: `#${button.slug}`,
@@ -25,41 +26,32 @@ const links = filteredHeadings?.map((button: any) => ({
 ---
 
 <Element
-  if={filteredHeadings?.length > 1}
   class:list="toc"
-  {size}
+  if={filteredHeadings?.length}
   {...rest}
 >
   <Heading
-    level={5}
-    text={heading}
-    {size}
-  />
-  <Links
-    direction="column"
-    {links}
-    {size}
+    as="a"
+    href="#"
+    {...h1}
   />
+  {
+    links?.map((link) => (
+      <Link
+        variant="muted"
+        size="sm"
+        {...link}
+      />
+    ))
+  }
 </Element>
 
 <style is:global>
   @layer fulldev {
     .toc {
-      @apply sticky bottom-0 z-10 hidden shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto py-8 md:flex;
+      @apply lg:top-sticky-16 sticky bottom-0 z-10 hidden w-48 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto md:flex;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
-      --headers: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
-      top: var(--headers);
-      width: var(--toc-width);
-      max-height: calc(100vh - var(--headers));
-
-      &,
-      & ~ * {
-        @media (min-width: 768px) {
-          --toc-width: 12rem;
-        }
-      }
-
       .depth-3 {
         @apply pl-3;
       }

package/src/components/Writeup.astro

@@ -0,0 +1,59 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+  align?: 'left' | 'center' | 'right'
+}
+
+const { align = 'start', ...rest } = Astro.props
+---
+
+<Element
+  class:list="writeup"
+  {align}
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .writeup {
+      @apply relative w-full;
+
+      &.align-left {
+        @apply mr-auto flex flex-col items-start text-left;
+      }
+
+      &.align-center {
+        @apply mx-auto flex flex-col items-center text-center;
+      }
+
+      &.align-right {
+        @apply ml-auto flex flex-col items-end text-right;
+      }
+
+      .heading {
+        @apply max-w-screen-lg text-balance;
+      }
+
+      .paragraph {
+        @apply max-w-screen-md text-balance;
+      }
+
+      > * {
+        & + * {
+          @apply mt-4;
+        }
+
+        & + .group,
+        & + .button,
+        & + .buttons {
+          @apply mt-8;
+        }
+      }
+    }
+  }
+</style>

package/src/components/_Image.astro

@@ -0,0 +1,79 @@
+---
+// @ts-nocheck
+import type { ImageMetadata } from 'astro'
+import type { HTMLAttributes } from 'astro/types'
+import { Image as AstroImage } from 'astro:assets'
+import { getEntry } from 'astro:content'
+
+interface Props extends GlobalProps, HTMLAttributes<'img'> {
+  id?: any
+  size?: 'sm' | 'md' | 'lg' | undefined
+  position?: 'background' | 'cover' | 'inset' | undefined
+}
+
+const { id } = Astro.props
+const entry = id ? (await getEntry('images', id))?.data : {}
+
+const {
+  width = 1920,
+  height = 1920,
+  position,
+  src,
+  alt,
+  size,
+  ...rest
+} = {
+  ...entry,
+  ...Astro.props,
+}
+
+function getAltBySrc() {
+  if (!src) return
+  const filename = src?.split('/').pop()
+  const slug = filename && filename.split('.')[0]
+  const unslugged = slug?.replace(/-/g, ' ')
+  return unslugged || ''
+}
+
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
+const image = images[src as keyof typeof images]
+---
+
+{
+  (image || src) && (
+    <AstroImage
+      class:list={[
+        'image',
+        {
+          [`size-${size}`]: size,
+          [`position-${position}`]: position,
+        },
+      ]}
+      alt={alt || getAltBySrc()}
+      src={image ? image() : src}
+      width={width ? Number(width) : undefined}
+      height={height ? Number(height) : undefined}
+      {...rest}
+    />
+  )
+}
+
+<style is:global>
+  @layer fulldev {
+    .image {
+      @apply block;
+
+      &.position-contain {
+        @apply h-auto w-full object-contain;
+      }
+
+      &.position-cover {
+        @apply h-full w-full object-cover;
+      }
+
+      &.position-background {
+        @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
+      }
+    }
+  }
+</style>

package/src/content/config.ts

@@ -1,39 +1,13 @@
 import { defineCollection } from 'astro:content'
-import { categorySchema } from 'fulldev-ui/schemas/categorySchema.ts'
-import { docSchema } from 'fulldev-ui/schemas/docSchema.ts'
-import { imageLoader, imageSchema } from 'fulldev-ui/schemas/imageSchema.ts'
-import { layoutSchema } from 'fulldev-ui/schemas/layoutSchema.ts'
-import { pageSchema } from 'fulldev-ui/schemas/pageSchema.ts'
-import { postSchema } from 'fulldev-ui/schemas/postSchema.ts'
-import { productSchema } from 'fulldev-ui/schemas/productSchema.ts'
+import { pageSchema } from 'fulldev-ui/schemas/page.ts'
 
 export const collections = {
   pages: defineCollection({
     type: 'content',
     schema: pageSchema,
   }),
-  posts: defineCollection({
-    type: 'content',
-    schema: postSchema,
-  }),
-  docs: defineCollection({
-    type: 'content',
-    schema: docSchema,
-  }),
-  categories: defineCollection({
-    type: 'content',
-    schema: categorySchema,
-  }),
-  products: defineCollection({
-    type: 'content',
-    schema: productSchema,
-  }),
   layouts: defineCollection({
     type: 'data',
-    schema: layoutSchema,
-  }),
-  images: defineCollection({
-    loader: imageLoader,
-    schema: imageSchema,
+    schema: pageSchema,
   }),
 }

package/src/content/layouts/base.yml

@@ -12,11 +12,10 @@ head:
 banner:
   text: 'Introducing v0.6: layouts & pagebuilding 🎉'
 
-navigation:
-  header: true
-  themer: true
+header:
   search: true
   logo:
+    image: /src/images/favicon/android-chrome-512x512.png
     text: Fulldev UI
   links:
     - text: Docs
@@ -30,6 +29,8 @@ navigation:
   socials:
     - https://github.com/fulldotdev/ui
     - https://discord.gg/vXZqMbadm8
+
+sidebar:
   menus:
     - heading: Get Started
       links:

package/src/content/{docs → pages/docs}/_internationalization.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Internationalization
 ---
 

package/src/content/{docs → pages/docs}/_using-blocks.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Using Blocks
 ---
 

package/src/content/{docs → pages/docs}/_using-presets.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Using Presets
 ---
 

package/src/content/{docs → pages/docs}/blocks.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Blocks
 ---
 

package/src/content/{docs → pages/docs}/collections/images.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: images
 ---
 

package/src/content/{docs → pages/docs}/collections/pages.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: pages
 ---
 

package/src/content/{docs → pages/docs}/collections/presets.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: presets
 ---
 

package/src/content/{docs → pages/docs}/collections.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Collections
 ---
 

package/src/content/{docs → pages/docs}/components/_card.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Card
 ---
 

package/src/content/{docs → pages/docs}/components/_dialog.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Dialog
 ---
 

package/src/content/{docs → pages/docs}/components/_drawer.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Drawer
 ---
 

package/src/content/{docs → pages/docs}/components/_localeswitcher.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: LocaleSwitcher
 ---
 

package/src/content/{docs → pages/docs}/components/_switch.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Switch
 ---
 

package/src/content/{docs → pages/docs}/components/_tagline.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Tagline
 ---
 

package/src/content/{docs → pages/docs}/components/_toggle.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Toggle
 ---
 

package/src/content/{docs → pages/docs}/components/avatar.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Avatar
 ---
 

package/src/content/{docs → pages/docs}/components/badge.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Badge
 ---
 

package/src/content/{docs → pages/docs}/components/badges.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Badges
 ---
 

package/src/content/{docs → pages/docs}/components/button.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Button
 ---
 

package/src/content/{docs → pages/docs}/components/buttons.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Buttons
 ---
 

package/src/content/{docs → pages/docs}/components/channel.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Channel
 ---
 

package/src/content/{docs → pages/docs}/components/channels.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Channels
 ---
 

package/src/content/{docs → pages/docs}/components/checkbox.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Checkbox
 ---
 

package/src/content/{docs → pages/docs}/components/code.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Code
 ---
 

package/src/content/{docs → pages/docs}/components/heading.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Heading
 ---
 

package/src/content/{docs → pages/docs}/components/icon.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Icon
 ---
 

package/src/content/{docs → pages/docs}/components/image.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Image
 ---
 

package/src/content/{docs → pages/docs}/components/input.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Input
 ---
 

package/src/content/{docs → pages/docs}/components/label.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Label
 ---
 

package/src/content/{docs → pages/docs}/components/link.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Link
 ---
 

package/src/content/{docs → pages/docs}/components/links.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Links
 ---
 

package/src/content/{docs → pages/docs}/components/list.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: List
 ---
 

package/src/content/{docs → pages/docs}/components/logo.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Logo
 ---
 

package/src/content/{docs → pages/docs}/components/menu.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Menu
 ---
 

package/src/content/{docs → pages/docs}/components/prose.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Prose
 ---
 

package/src/content/{docs → pages/docs}/components/rating.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Rating
 ---
 

package/src/content/{docs → pages/docs}/components/section.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Section
 ---
 

package/src/content/{docs → pages/docs}/components/select.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Select
 ---
 

package/src/content/{docs → pages/docs}/components/social.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Social
 ---
 

package/src/content/{docs → pages/docs}/components/socials.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Socials
 ---
 

package/src/content/{docs → pages/docs}/components/switch.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Switch
 ---
 

package/src/content/{docs → pages/docs}/components/table.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Table
 ---
 

package/src/content/{docs → pages/docs}/components/tagline.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Tagline
 ---
 

package/src/content/{docs → pages/docs}/components/text.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Text
 ---
 

package/src/content/{docs → pages/docs}/components/textarea.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Textarea
 ---
 

package/src/content/{docs → pages/docs}/components/themer.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Themer
 ---
 

package/src/content/{docs → pages/docs}/components.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Components
 description: Features shared across components.
 ---

package/src/content/{docs → pages/docs}/customization.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Customization
 ---
 

package/src/content/{docs → pages/docs}/frameworks.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Frameworks
 ---
 

package/src/content/{docs → pages/docs}/generating-pages.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Generating Pages
 ---
 

package/src/content/{docs → pages/docs}/index.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Introduction
 description: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.
 ---

package/src/content/{docs → pages/docs}/installation.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Installation
 ---
 

package/src/content/{docs → pages/docs}/layouts.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: doc
 title: Layouts
 ---