fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/structures/Section.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'section'> {
+  as?: HTMLTag
+}
+
+const { as = 'section', ...rest } = Astro.props
+---
+
+<Element
+  class:list="section"
+  {as}
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .section {
+      @apply relative w-full bg-background py-20 first:pt-20 lg:py-32;
+    }
+  }
+</style>

package/src/structures/Sidebar.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'aside'> {}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="sidebar"
+  as="aside"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .sidebar {
+      @apply sticky top-header hidden shrink-0 grow flex-col items-start gap-8 overflow-y-auto bg-background p-8 lg:flex;
+      @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+
+      width: var(--sidebar-width);
+      max-width: var(--sidebar-width);
+      max-height: calc(100vh - var(--header-height, 0px));
+
+      &,
+      & ~ * {
+        @media (min-width: 1024px) {
+          --sidebar-width: 14rem;
+        }
+      }
+    }
+  }
+</style>

package/src/structures/Split.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="split"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .split {
+      @apply grid gap-x-4 gap-y-16 sm:gap-x-8 lg:grid-cols-2;
+    }
+  }
+</style>

package/src/structures/Stack.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="stack"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .stack {
+      @apply relative grid w-full auto-cols-fr items-start gap-x-8 gap-y-8 lg:grid-flow-col lg:gap-x-16;
+    }
+  }
+</style>

package/src/structures/Writeup.astro

@@ -0,0 +1,67 @@
+---
+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;
+
+        .paragraph {
+          @apply text-balance;
+        }
+      }
+
+      &.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;
+      }
+
+      > * {
+        & + * {
+          @apply mt-2;
+        }
+
+        &:is(h1, h2) + * {
+          @apply mt-4;
+        }
+
+        & + .group,
+        & + .button,
+        & + .buttons {
+          @apply mt-8;
+        }
+      }
+    }
+  }
+</style>

package/src/structures/_Bento.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="bento"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .bento {
+      @apply relative grid w-full grid-cols-1 gap-4 lg:grid-cols-5;
+
+      & > * {
+        @apply lg:grid-col-span-2;
+      }
+
+      & > *:nth-child(3n + 2),
+      & > *:nth-child(3n + 3) {
+        @apply lg:grid-col-span-3;
+      }
+    }
+  }
+</style>

package/src/utils/cart.ts

@@ -1,4 +1,4 @@
-import { slugify } from './slugify'
+import { slugify } from './slugify.ts'
 
 export const generateProductId = (
   slug: string,

package/src/utils/getHref.ts

@@ -0,0 +1,6 @@
+import type { CollectionEntry } from 'astro:content'
+
+export function getHref(slug: CollectionEntry<'pages'>['slug']) {
+  if (slug === 'index') return '/'
+  else return `/${slug}/`
+}

package/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+}

package/tailwind.config.ts

@@ -4,11 +4,12 @@ import tailwindcssAnimate from 'tailwindcss-animate'
 
 export default {
   darkMode: ['class'],
-  content: ['src/**/*.{ts,tsx,astro,css,mdx}'],
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    'node_modules/fulldev-ui/src/**/*.astro',
+  ],
   theme: {
     container: {
-      center: true,
-      padding: 'clamp(16px, 4vw, 32px)',
       screens: ['1536px'],
     },
     extend: {
@@ -16,6 +17,9 @@ export default {
         gutter: 'clamp(16px, 4vw, 32px)',
         container: 'var(--container, 1536px)',
         hero: 'calc(100vh - var(--header-height, 0px) - var(--subheader-height, 0px) - var(--banner-height, 0px))',
+        header: 'var(--header-height, 0px)',
+        'sticky-8': 'calc(var(--header-height, 0px)  + 2rem)',
+        'sticky-16': 'calc(var(--header-height, 0px)  + 4rem)',
       },
       colors: {
         border: 'hsl(var(--border))',
@@ -26,7 +30,8 @@ export default {
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
-          hover: 'hsl(var(--primary) / 85%)',
+          // hover: 'hsl(var(--primary) / 85%)',
+          hover: 'hsl(var(--primary) / 75%)',
         },
         secondary: {
           DEFAULT: 'hsl(var(--secondary))',

package/tsconfig.json

@@ -1,12 +1,12 @@
 {
   "extends": "astro/tsconfigs/strictest",
-  "include": ["src", "astro.config.ts"],
+  "include": ["src", "astro.config.ts", "virtual.d.ts"],
   "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "baseUrl": ".",
     "paths": {
-      "fulldev-ui/*": [
-        "src/*"
-      ]
+      "fulldev-ui/*": ["src/*"],
     }
   },
 }

package/{src/types/virtual-modules.d.ts → virtual.d.ts}

@@ -1,4 +1,4 @@
-declare module 'virtual:*' {
+declare module 'virtual:fulldev-ui/config' {
   import type { Config } from 'fulldev-ui/integration'
   const content: Config
   export default content

package/src/blocks/Categories.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="categories"
-  structure="grid"
-  position="inset"
-  {...rest}
-/>

package/src/blocks/Colleagues.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="colleagues"
-  structure="grid"
-  position="inset"
-  {...rest}
-/>

package/src/blocks/Contact.astro

@@ -1,117 +0,0 @@
----
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Form from 'fulldev-ui/components/Form.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-
-const {
-  as = 'section',
-  size = 'md',
-  variant = 1,
-  heading,
-  form,
-  text,
-  tagline,
-  googleMaps,
-  paragraph,
-  buttons,
-  socials,
-  position,
-  image,
-  channels,
-  level = 1,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="contact"
-  {as}
-  {size}
-  {variant}
-  {...rest}
->
-  <Element class:list="contact-container">
-    <Element class:list="contact-segment">
-      <Element class:list="contact-content">
-        <Tagline text={tagline} />
-        <Heading
-          size={'sm'}
-          level={level}
-          text={heading}
-        />
-        <Paragraph text={paragraph} />
-      </Element>
-      <Channels {channels} />
-      <Socials {socials} />
-      <Form
-        action="/thank-you"
-        method="POST"
-        {...form}
-      />
-    </Element>
-    <Image
-      class:list="contact-image"
-      {position}
-      {...image}
-    />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .contact {
-      @apply relative w-full;
-
-      .contact-container {
-        @apply mx-auto flex h-full w-full flex-col;
-      }
-
-      .contact-segment {
-        @apply z-10 flex flex-col items-start gap-8;
-      }
-
-      .contact-content {
-        @apply flex max-w-screen-md flex-col gap-6;
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      /* Narrow left aligned */
-      &.variant-1 {
-        .contact-container {
-          @apply max-w-screen-md px-gutter py-8;
-        }
-
-        .contact-segment {
-          @apply gap-8 py-16;
-        }
-
-        .content-image {
-          @apply rounded-lg;
-        }
-      }
-
-      /* Split */
-      &.variant-2 {
-        .contact-container {
-          @apply container gap-x-gutter gap-y-16 py-20 lg:grid lg:grid-cols-2 lg:items-center;
-        }
-
-        .contact-segment {
-          @apply max-w-xl;
-        }
-
-        .contact-image {
-          @apply rounded-lg;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Content.astro

@@ -1,130 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Lead from 'fulldev-ui/components/Lead.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-
-interface Props extends HTMLAttributes<'section'> {
-  rating?: ComponentProps<typeof Rating> | undefined
-  badge?: ComponentProps<typeof Badge> | undefined
-  tagline?: ComponentProps<typeof Tagline>['text']
-  heading?: ComponentProps<typeof Heading>['text']
-  lead?: ComponentProps<typeof Lead>['text']
-  paragraph?: ComponentProps<typeof Paragraph>['text']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  image?: ComponentProps<typeof Image>['id']
-  level?: ComponentProps<typeof Heading>['level']
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
-}
-
-const {
-  as = 'section',
-  size = 'md',
-  variant = 1,
-  level = 2,
-  rating,
-  tagline,
-  badge,
-  heading,
-  lead,
-  paragraph,
-  buttons,
-  image,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="content"
-  {as}
-  {size}
-  {variant}
-  {...rest}
->
-  <Element class:list="content-container">
-    <Element class:list="content-segment">
-      <Element class:list="content-content">
-        <Rating
-          {size}
-          {...rating}
-        />
-        <Tagline
-          text={tagline}
-          {size}
-        />
-        <Badge
-          {size}
-          {...badge}
-        />
-        <Heading
-          text={heading}
-          {level}
-          {size}
-        />
-        <Lead
-          text={lead}
-          {size}
-        />
-        <Paragraph
-          text={paragraph}
-          {size}
-        />
-        <slot name="content" />
-      </Element>
-      <Buttons
-        variant="secondary"
-        {size}
-        {buttons}
-      />
-      <slot name="segment" />
-    </Element>
-    <Image
-      class:list="content-image"
-      {...image}
-    />
-    <slot />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .content {
-      @apply relative w-full;
-
-      .content-container {
-        @apply flex h-full flex-col;
-      }
-
-      .content-segment {
-        @apply z-10 flex flex-col items-start gap-8;
-      }
-
-      .content-content {
-        @apply flex max-w-screen-md flex-col gap-6;
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      /* Split */
-      &.variant-1 {
-        .content-container {
-          @apply container py-16 lg:grid lg:grid-cols-2 lg:items-center;
-        }
-
-        .content-image {
-          @apply rounded-lg;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Cta.astro

@@ -1,13 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="cta"
-  variant="primary"
-  size="lg"
-  panel
-  {...rest}
-/>

package/src/blocks/Excerpt.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  level={1}
-  size="lg"
-  variant="primary"
-  {...rest}
-/>

package/src/blocks/Features.astro

@@ -1,11 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="features"
-  structure="stack"
-  {...rest}
-/>