+ {capitalize(key)} +
+ Please reference + + {path} + for now. +
This is an example of HTML content inserted into the Content block.
This is an example of HTML content inserted into the Content2 block. It demonstrates how you can use HTML to structure your content within the block.
Adding more content to make it longer. You can include various HTML elements such as headings, paragraphs, lists, images, and more to enrich your content.
Here is another paragraph to further extend the content. This allows you to provide more information and details within the Content2 block.
+ This is an example of HTML content inserted into the Content4 block. Lorem + ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! + Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum + dolor sit amet consectetur adipisicing elit. Praesent sapien massa, + convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget + malesuada. +
I'm a live preview`} /> +``` + +Will render as: + +I'm a live preview`} /> + +## Usage in markdown + +Thanks to [this great plugin](https://github.com/mattjennings/astro-live-code) you can also use it directly in markdown files. + +The following code will translate to the example at the top of this page: + +````html +```astro live +I'm a live preview +``` +```` diff --git a/src/content/pages/docs/structures/container.mdx b/src/content/pages/docs/structures/container.mdx new file mode 100644 index 000000000..606c24bf2 --- /dev/null +++ b/src/content/pages/docs/structures/container.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Container +description: Sets a max-width, padding and centers the content +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/drawer.mdx b/src/content/pages/docs/structures/drawer.mdx new file mode 100644 index 000000000..60637f417 --- /dev/null +++ b/src/content/pages/docs/structures/drawer.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Drawer +description: A panel that slides out from the side of the screen +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the Header blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/group.mdx b/src/content/pages/docs/structures/group.mdx new file mode 100644 index 000000000..e029447d0 --- /dev/null +++ b/src/content/pages/docs/structures/group.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Group +description: Group buttons and similar components +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/layout.mdx b/src/content/pages/docs/structures/layout.mdx new file mode 100644 index 000000000..c6aebe59b --- /dev/null +++ b/src/content/pages/docs/structures/layout.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Container +description: Sets a head, body and some base styles +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the layouts for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/masonry.mdx b/src/content/pages/docs/structures/masonry.mdx new file mode 100644 index 000000000..0d153d984 --- /dev/null +++ b/src/content/pages/docs/structures/masonry.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Masonry +description: Places items like cards in a masonry layout +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/matrix.mdx b/src/content/pages/docs/structures/matrix.mdx new file mode 100644 index 000000000..cdce5e31b --- /dev/null +++ b/src/content/pages/docs/structures/matrix.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Matrix +description: Places items like cards in a grid +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/panel.mdx b/src/content/pages/docs/structures/panel.mdx new file mode 100644 index 000000000..39507c239 --- /dev/null +++ b/src/content/pages/docs/structures/panel.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Panel +description: A box with a border, padding and rounded corners used for sections +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/prose.mdx b/src/content/pages/docs/structures/prose.mdx new file mode 100644 index 000000000..4b75ded1a --- /dev/null +++ b/src/content/pages/docs/structures/prose.mdx @@ -0,0 +1,33 @@ +--- +_block: Content7 +title: Prose +description: Applies styling to child components +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +```astro live +--- +import Prose from 'fulldev-ui/structures/Prose.astro' +--- + + + Welcome to Our Blog + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia + odio vitae vestibulum vestibulum. + + + Key Features + + Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + + + Simple and elegant design + Responsive layout + Easy customization + + +``` diff --git a/src/content/pages/docs/structures/section.mdx b/src/content/pages/docs/structures/section.mdx new file mode 100644 index 000000000..3f4535b0b --- /dev/null +++ b/src/content/pages/docs/structures/section.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Section +description: Sets vertical padding and some base styles +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/stack.mdx b/src/content/pages/docs/structures/stack.mdx new file mode 100644 index 000000000..526318912 --- /dev/null +++ b/src/content/pages/docs/structures/stack.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Stack +description: Places items like cards in a horizontal or vertical stack +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/writeup.mdx b/src/content/pages/docs/structures/writeup.mdx new file mode 100644 index 000000000..0a8a58b51 --- /dev/null +++ b/src/content/pages/docs/structures/writeup.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Writeup +description: Applies styling to child components, similar to Prose +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/index.mdx b/src/content/pages/index.mdx index 87835c12e..db3a9e0f1 100644 --- a/src/content/pages/index.mdx +++ b/src/content/pages/index.mdx @@ -1,66 +1,52 @@ --- -seo: - title: Fulldev UI - Astro component and block library, open-source - description: Make websites rapidly with pre-built components and blocks. - image: /images/og-image.png +_schema: page +_block: Hero1 -sections: - hero: - _bookshop_name: Hero - color: brand - badge: - as: a - text: We just released our biggest update yet 🎉 - href: https://discord.gg/vXZqMbadm8 - heading: The Astro UI library to build content sites - text: Make websites with prebuilt components and blocks - buttons: - - text: Get Started - href: /overview/installation - - text: GitHub - href: https://github.com/fulldotdev/ui - target: _blank - icon: brand-github +title: Fulldev UI - Astro component and block library, open-source +description: Make websites rapidly with pre-built components and blocks. +heading: Build complete websites with this Astro UI library +paragraph: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation. +buttons: + - text: Get Started + href: /docs/ + - text: GitHub + href: https://github.com/fulldotdev/ui + icon: brand-github + target: _blank - blocks: - _bookshop_name: Content - color: brand - label: Blocks +sections: + - _block: Content2 + tagline: Blocks heading: Use pre-built blocks with just props - text: we created a great gallery of blocks to build content sites with a modern look and feel, all of our blocks are build with components from the library to achieve a consistent look. - image: /images/block-code.png - reverse: odd + paragraph: We created a great gallery of blocks to build content sites with a modern look and feel, all of our blocks are build with components from the library to achieve a consistent look. + image: + src: /images/block-code.png buttons: - - href: /blocks + - href: /docs/blocks/ icon: layout text: View blocks + variant: secondary - components: - _bookshop_name: Content - color: brand - label: Components + - _block: Content2 + tagline: Components heading: Or build your own, with easy to use components - text: our rich set of components make it easy to build your own blocks with great customizability through props and global theming. - image: /images/component-code.png - reverse: odd + paragraph: Our rich set of components make it easy to build your own blocks with great customizability through props and global theming. + image: + src: /images/component-code.png buttons: - - href: /base/badge + - text: View components + href: /docs/components/ icon: code - text: View components + variant: secondary - cta: - _bookshop_name: Cta - size: lg - variant: primary + - _block: Cta1 heading: Build content websites in a fraction of time - text: A library of components and blocks to build content sites, fast. + paragraph: A library of components and blocks to build content sites, fast. buttons: - text: Get Started - href: /overview/installation - color: brand + href: /docs/ - text: Github href: https://github.com/fulldotdev/ui - target: _blank icon: brand-github - color: brand + target: _blank --- diff --git a/src/content/pages/overview/frameworks.mdx b/src/content/pages/overview/frameworks.mdx deleted file mode 100644 index 6c2831153..000000000 --- a/src/content/pages/overview/frameworks.mdx +++ /dev/null @@ -1,198 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -# Frameworks - -Fulldev UI is written in vanilla CSS and .astro files. It is framework agnostic. - -## JS frameworks - -All styles in Fulldev UI use regular CSS and classes. Classes use the following naming convention: - -- Component classes are the same as the component name, like `button` for ``. -- Prop classes have the prop name as prefix, like `variant-primary` for ``. -- If a prop is a boolean the class is added without a prefix, like `contrast`. - -This means you can apply Fulldev UI styles to any framework component as follows: - -```astro live ---- -import Button from 'fulldev-ui/components/Button.astro' ---- - - Button - Button -``` - -## CSS frameworks - -A TailwindCSS plugin and UnoCSS preset is available. - -### TailwindCSS - -In your `tailwind.config.ts` add the following: - -```ts -// tailwind.config.ts -import fulldevUI from 'fulldev-ui/tailwind' - -export default { - plugins: [fulldevUI], -} -``` - -In your `astro.config.ts` add the following: - -```ts -// astro.config.ts -import tailwind from '@astrojs/tailwind' - -export default defineConfig({ - integrations: [ - tailwind({ - // Disable injecting styles, import manually instead - applyBaseStyles: false, - }), - ], -}) -``` - -Import the css file file below anywhere in your project. - -```css -@tailwind base layer(base); -@tailwind components; -@tailwind utilities; -``` - -### UnoCSS - -In your `uno.config.ts` add the following: - -```ts -// uno.config.ts -import fulldevUI from 'fulldev-ui/unocss' - -export default defineConfig({ - injectReset: false, - presets: [fulldevUI], -}) -``` - -Do not use `injectReset` when using the UnoCSS preset, as it will conflict with the reset provided by Fulldev UI. If you do want a style reset, be sure to import it in the `base` layer, similar to the TailwindCSS example above. - -## Utility classes - -The following classes are available when using the Tailwind plugin or UnoCSS preset. - -### Spacing - -The following spacing classes are added to your tailwind/uno config. - -You can use them like `p-space-1`, `m-space-1`, `h-space-1`, `w-space-1`, etc. - -```ts -spacing: { - 'space-1': 'var(--space-1)', - 'space-2': 'var(--space-2)', - 'space-3': 'var(--space-3)', - 'space-4': 'var(--space-4)', - 'space-5': 'var(--space-5)', - 'space-6': 'var(--space-6)', - 'space-7': 'var(--space-7)', -}, -``` - -### Font size - -The following spacing classes are added to your tailwind/uno config. - -You can use them like `text-1`, `text-2`, `text-3`, etc. - -```ts -fontSize: { - 1: 'var(--text-1)', - 2: 'var(--text-2)', - 3: 'var(--text-3)', - 4: 'var(--text-4)', - 5: 'var(--text-5)', - 6: 'var(--text-6)', - 7: 'var(--text-7)', - 8: 'var(--text-8)', -} -``` - -### Border radius - -The following border radius classes are added to your tailwind/uno config. - -You can use them like `rounded-1`, `rounded-2`, `rounded-3`, etc. - -```ts -borderRadius: { - 1: 'var(--radius-1)', - 2: 'var(--radius-2)', - 3: 'var(--radius-3)', -} -``` - -### Color classes - -The following color classes are added to your tailwind/uno config. - -You can use them like `bg-color-1`, `text-base-2`, `border-base-6`, etc. - -```ts -colors: { - color: { - 1: 'var(--color-1)', - 2: 'var(--color-2)', - 3: 'var(--color-3)', - 4: 'var(--color-4)', - 5: 'var(--color-5)', - 6: 'var(--color-6)', - 7: 'var(--color-7)', - 8: 'var(--color-8)', - 9: 'var(--color-9)', - 10: 'var(--color-10)', - 11: 'var(--color-11)', - 12: 'var(--color-12)', - contrast: 'var(--color-contrast)', - background: 'var(--color-background)', - }, - base: { - 1: 'var(--color-base-1)', - 2: 'var(--color-base-2)', - 3: 'var(--color-base-3)', - 4: 'var(--color-base-4)', - 5: 'var(--color-base-5)', - 6: 'var(--color-base-6)', - 7: 'var(--color-base-7)', - 8: 'var(--color-base-8)', - 9: 'var(--color-base-9)', - 10: 'var(--color-base-10)', - 11: 'var(--color-base-11)', - 12: 'var(--color-base-12)', - contrast: 'var(--color-base-contrast)', - background: 'var(--color-base-background)', - }, - brand: { - 1: 'var(--color-brand-1)', - 2: 'var(--color-brand-2)', - 3: 'var(--color-brand-3)', - 4: 'var(--color-brand-4)', - 5: 'var(--color-brand-5)', - 6: 'var(--color-brand-6)', - 7: 'var(--color-brand-7)', - 8: 'var(--color-brand-8)', - 9: 'var(--color-brand-9)', - 10: 'var(--color-brand-10)', - 11: 'var(--color-brand-11)', - 12: 'var(--color-brand-12)', - contrast: 'var(--color-brand-contrast)', - background: 'var(--color-brand-background)', - } -} -``` diff --git a/src/content/pages/overview/installation.mdx b/src/content/pages/overview/installation.mdx deleted file mode 100644 index 961174d02..000000000 --- a/src/content/pages/overview/installation.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -import Link from 'fulldev-ui/components/Link.astro' - -# Installation - -Install fulldev-ui with your favorite package manager and you are ready to go. To get started with the integration see the integration page. - -```bash -pnpm i fulldev-ui -# or -bun i fulldev-ui -# or -yarn add fulldev-ui -# or -npm i fulldev-ui -``` diff --git a/src/content/pages/overview/integration.mdx b/src/content/pages/overview/integration.mdx deleted file mode 100644 index c032bacec..000000000 --- a/src/content/pages/overview/integration.mdx +++ /dev/null @@ -1,37 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -import Link from 'fulldev-ui/components/Link.astro' - -# Integration - -After installation you can generate your color palettes via an Astro integration. You can optionally add a custom css file and define custom colors and other theming options, see the theming page for more information. - -```ts -import { defineConfig } from 'astro/config' -import fulldev from 'fulldev-ui/integration' - -// https://astro.build/config -export default defineConfig({ - integrations: [ - fulldev({ - css: '/src/css/custom.css', - colors: { - theme: 'dark', - dark: { - background: '#111110', - base: '#6F6D66', - brand: '#F50', - }, - light: { - background: '#EEEEEC', - base: '#6F6D66', - brand: '#F50', - }, - }, - }), - ], -}) -``` diff --git a/src/content/pages/overview/introduction.mdx b/src/content/pages/overview/introduction.mdx deleted file mode 100644 index f783756f8..000000000 --- a/src/content/pages/overview/introduction.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -# Introduction - -Fulldev UI focuses on content websites rather than applications. - -##### Build entire websites with just components - -Fulldev UI is unique in that it introduces larger components to build entire pages, and even websites. Like a Section component that just works. - -##### Integrates with any JS / CSS framework - -Want to use Tailwind, or something else? You can overwrite all styles. Need an interactive framework component? Styles can be applied with one simple class. - -##### Automated colors, spacing and sizes - -Everything is carefully designed to be fully responsive. Component adapt to their environment, like a Heading being different in a Section than in a Card. You can also customize via simple props. diff --git a/src/content/pages/overview/theming.mdx b/src/content/pages/overview/theming.mdx deleted file mode 100644 index 2bfc03a4b..000000000 --- a/src/content/pages/overview/theming.mdx +++ /dev/null @@ -1,83 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -import Link from 'fulldev-ui/components/Link.astro' - -# Theming - -## Colors - -The color theme is inspired by / compatible with Radix Colors. - -### Automatic setup - -With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the integration page for details. - -### Manual setup - -You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explenation see this page. - -```css -:root, -.theme-light { - --base-1: ; - --base-2: ; - --base-3: ; - --base-4: ; - --base-5: ; - --base-6: ; - --base-7: ; - --base-8: ; - --base-9: ; - --base-10: ; - --base-11: ; - --base-12: ; - --base-contrast: ; - - --brand-1: ; - --brand-2: ; - --brand-3: ; - --brand-4: ; - --brand-5: ; - --brand-6: ; - --brand-7: ; - --brand-8: ; - --brand-9: ; - --brand-10: ; - --brand-11: ; - --brand-12: ; - --brand-contrast: ; -} -``` - -### Dark theme - -Dark mode is set via a simple `.theme-dark` class. - -If you want to use a dark theme by default, remove the `:root` selector from the light theme and add it to the dark theme. - -Components in Fulldev UI that support theme switching have the `theme` prop available, which adds either the `theme-dark` or `theme-light` class - -```css -.theme-dark { - /* Same variables here as above */ -} -``` - -## Radius - -The `--border-radius` variable is a multiplier applied to all radius values. The default value is `1`. - -```css -:root { - --border-radius: 1; -} -``` - -## Other - -Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS. - -We plan to add more customization via variables later. diff --git a/src/content/pages/showcase.mdx b/src/content/pages/showcase.mdx index 76d4a3cfb..a5be8f421 100644 --- a/src/content/pages/showcase.mdx +++ b/src/content/pages/showcase.mdx @@ -1,62 +1,30 @@ --- -showcase: - # Add your project here below 👇 - - - heading: Van Dillen Antieke Bouwmaterialen - image: /showcase/van-dillen-antieke-bouwmaterialen.webp - href: 'https://vdabouwmaterialen.nl' - - heading: Anti Slip Profiles - image: /showcase/anti-slip-profiles.webp - href: 'https://antislipprofiles.com' - - heading: Fulldev UI - image: /showcase/fulldev-ui.webp - href: 'https://ui.full.dev' - - heading: The Gym Haren - image: /showcase/the-gym-haren.webp - href: 'https://thegymharen.nl' - - heading: Lavis Detailing - image: /showcase/lavis-detailing.webp - href: 'https://lavisdetailing.nl' - - heading: Leren Trainingsacteren - image: /showcase/leren-trainingsacteren.webp - href: 'https://lerentrainingsacteren.nl' - - heading: Miele Witgoedcenter Amsterdam - image: /showcase/miele-witgoedcenter-amsterdam.webp - href: 'https://witgoedcenteramsterdam.nl' - - heading: Sloepverhuur Bolsward - image: /showcase/sloepverhuur-bolsward.webp - href: 'https://sloepverhuurbolsward.nl' - - heading: Stark Vulcanising Products - image: /showcase/stark-vulcanising-products.webp - -_layout: PostLayout -settings: components +title: Showcase --- -import Masonry from 'fulldev-ui/components/Masonry.astro' -import Card from 'fulldev-ui/components/Card.astro' +import Card from 'fulldev-ui/structures/Card.astro' +import { getCollection } from 'astro:content' + +export const projects = ( + await getCollection( + 'pages', + ({ slug }) => slug.startsWith('showcase') && slug !== 'showcase' + ) +).map((p) => p.data) # Showcase Projects that are built with Fulldev UI. - - - {frontmatter.showcase.map((showcase) => ( - - ))} - diff --git a/src/content/pages/structure/_row.mdx b/src/content/pages/structure/_row.mdx deleted file mode 100644 index 6eee78f5d..000000000 --- a/src/content/pages/structure/_row.mdx +++ /dev/null @@ -1,23 +0,0 @@ ---- -_layout: BlockLayout -title: Row -description: Structures children in a horizontal row. This component sizes dynamically, the margin between a heading and a paragraph is smaller than the margin between a paragraph an image. ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Row from 'fulldev-ui/components/Row.astro' ---- - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/_wrap.mdx b/src/content/pages/structure/_wrap.mdx deleted file mode 100644 index 978414a38..000000000 --- a/src/content/pages/structure/_wrap.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: Wrap -description: Structures children onto one line or can wrap onto multiple lines. ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Wrap from 'fulldev-ui/components/Wrap.astro' ---- - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/carousel.mdx b/src/content/pages/structure/carousel.mdx deleted file mode 100644 index 33c3b6fb5..000000000 --- a/src/content/pages/structure/carousel.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Carousel ---- - -```astro live ---- -import Carousel from 'fulldev-ui/components/Carousel.astro' -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' ---- - - - - - - - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/column.mdx b/src/content/pages/structure/column.mdx deleted file mode 100644 index da37a9380..000000000 --- a/src/content/pages/structure/column.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Column ---- - -```astro live ---- -import Column from 'fulldev-ui/components/Column.astro' -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' ---- - - - - - - - -``` diff --git a/src/content/pages/structure/grid.mdx b/src/content/pages/structure/grid.mdx deleted file mode 100644 index c0a330a1a..000000000 --- a/src/content/pages/structure/grid.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Grid ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Grid from 'fulldev-ui/components/Grid.astro' -import Section from 'fulldev-ui/components/Section.astro' ---- - - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/masonry.mdx b/src/content/pages/structure/masonry.mdx deleted file mode 100644 index a458b7a8d..000000000 --- a/src/content/pages/structure/masonry.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Masonry ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Masonry from 'fulldev-ui/components/Masonry.astro' -import Section from 'fulldev-ui/components/Section.astro' ---- - - - - - - - - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/split.mdx b/src/content/pages/structure/split.mdx deleted file mode 100644 index fcb8a10e4..000000000 --- a/src/content/pages/structure/split.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Split ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Split from 'fulldev-ui/components/Split.astro' ---- - - - - - - - -``` diff --git a/src/content/pages/structure/spread.mdx b/src/content/pages/structure/spread.mdx deleted file mode 100644 index 5f152608f..000000000 --- a/src/content/pages/structure/spread.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Spread ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Spread from 'fulldev-ui/components/Spread.astro' ---- - - - - - - - -``` diff --git a/src/content/pages/structure/stack.mdx b/src/content/pages/structure/stack.mdx deleted file mode 100644 index 505dfd082..000000000 --- a/src/content/pages/structure/stack.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Stack ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Stack from 'fulldev-ui/components/Stack.astro' ---- - - - - - - - - -``` diff --git a/src/content/pages/typography/heading.mdx b/src/content/pages/typography/heading.mdx deleted file mode 100644 index e87c82ca6..000000000 --- a/src/content/pages/typography/heading.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: Heading ---- - -# Heading - -import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro' - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -``` - -## Props - - - -## Examples - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` diff --git a/src/content/pages/typography/link.mdx b/src/content/pages/typography/link.mdx deleted file mode 100644 index c51412579..000000000 --- a/src/content/pages/typography/link.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: Link ---- - -# Link - -import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro' - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -``` - -## Props - - - -## Examples - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -Link -Link -``` - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -Link -Link -Link -``` - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -Link -``` - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -Link -``` diff --git a/src/content/pages/typography/list.mdx b/src/content/pages/typography/list.mdx deleted file mode 100644 index a36aeb554..000000000 --- a/src/content/pages/typography/list.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: List ---- - -# List - -import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro' - -```astro live ---- -import List from 'fulldev-ui/components/List.astro' ---- - - -``` - -## Props - - - -## Examples - -```astro live ---- -import List from 'fulldev-ui/components/List.astro' ---- - - - - -``` - -```astro live ---- -import List from 'fulldev-ui/components/List.astro' ---- - - - -``` - -```astro live ---- -import List from 'fulldev-ui/components/List.astro' ---- - - - -``` diff --git a/src/content/pages/typography/text.mdx b/src/content/pages/typography/text.mdx deleted file mode 100644 index e3cbbc4cd..000000000 --- a/src/content/pages/typography/text.mdx +++ /dev/null @@ -1,62 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: Text ---- - -# Text - -import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro' - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps over the lazy dog -``` - -## Props - - - -## Examples - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps over the lazy dog -The quick brown fox jumps over the lazy dog -The quick brown fox jumps over the lazy dog -``` - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps over the lazy dog -The quick brown fox jumps over the lazy dog -The quick brown fox jumps over the lazy dog -``` - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` diff --git a/src/content/records/record.yml b/src/content/records/record.yml deleted file mode 100644 index d99e1b8f7..000000000 --- a/src/content/records/record.yml +++ /dev/null @@ -1 +0,0 @@ -title: Test diff --git a/src/content/settings/base.yml b/src/content/settings/base.yml deleted file mode 100644 index 265bdfa5e..000000000 --- a/src/content/settings/base.yml +++ /dev/null @@ -1,63 +0,0 @@ -seo: - image: /images/og-image.png - -code: - head: | - - -header: - heading: Fulldev UI - variant: base - links: - - text: Docs - href: /overview/introduction - - text: Components - href: /typography/heading - - text: Blocks - href: /blocks - - text: Showcase - href: /showcase - search: - icon: search - variant: soft - buttons: - - href: https://github.com/fulldotdev/ui - target: _blank - aria-label: GitHub - icon: brand-github - - href: https://discord.gg/vXZqMbadm8 - target: _blank - aria-label: Discord - icon: brand-discord - drawer: - - links: - - text: Docs - href: /overview/introduction - - text: Components - href: /typography/heading - - text: Blocks - href: /blocks - - heading: Overview - links: - - text: Introduction - href: /overview/introduction - - text: Installation - href: /overview/installation - - text: Integration - href: /overview/integration - - text: Theming - href: /overview/theming - - text: Frameworks - href: /overview/frameworks - - text: Showcase - href: /showcase - - heading: Typography - folder: typography - - heading: Base - folder: base - - heading: Structure - folder: structure diff --git a/src/content/settings/components.yml b/src/content/settings/components.yml deleted file mode 100644 index d26552028..000000000 --- a/src/content/settings/components.yml +++ /dev/null @@ -1,29 +0,0 @@ -sidebar: - - heading: Overview - links: - - text: Introduction - href: /overview/introduction - - text: Installation - href: /overview/installation - - text: Integration - href: /overview/integration - - text: Theming - href: /overview/theming - - text: Frameworks - href: /overview/frameworks - - text: Showcase - href: /showcase - - heading: Typography - folder: typography - - heading: Base - folder: base - - heading: Structure - folder: structure - -toc: - - heading: On this page - links: - - text: Props - href: /overview/introduction - - text: Examples - href: /overview/installation diff --git a/src/css/color.css b/src/css/color.css deleted file mode 100644 index 98636e1dc..000000000 --- a/src/css/color.css +++ /dev/null @@ -1,168 +0,0 @@ -.theme-light, -.theme-light * { - color-scheme: light; -} - -.theme-dark, -.theme-dark * { - color-scheme: dark; -} - -:where(:root), -:where(.theme-light), -:where(.theme-dark), -.color-base, -.color-base - *:where(:not([class*='color-']):not(.color-base [class*='color-'] *)) { - --color-1: var(--base-1); - --color-2: var(--base-2); - --color-3: var(--base-3); - --color-4: var(--base-4); - --color-5: var(--base-5); - --color-6: var(--base-6); - --color-7: var(--base-7); - --color-8: var(--base-8); - --color-9: var(--base-9); - --color-10: var(--base-10); - --color-11: var(--base-11); - --color-12: var(--base-12); - - --color-a1: var(--base-a1, var(--base-1)); - --color-a2: var(--base-a2, var(--base-2)); - --color-a3: var(--base-a3, var(--base-3)); - --color-a4: var(--base-a4, var(--base-4)); - --color-a5: var(--base-a5, var(--base-5)); - --color-a6: var(--base-a6, var(--base-6)); - --color-a7: var(--base-a7, var(--base-7)); - --color-a8: var(--base-a8, var(--base-8)); - --color-a9: var(--base-a9, var(--base-9)); - --color-a10: var(--base-a10, var(--base-10)); - --color-a11: var(--base-a11, var(--base-11)); - --color-a12: var(--base-a12, var(--base-12)); - - --color-contrast: var(--base-contrast); - --color-background: var(--base-background); -} - -.color-brand, -.color-brand - *:where(:not([class*='color-']):not(.color-brand [class*='color-'] *)) { - --color-1: var(--brand-1); - --color-2: var(--brand-2); - --color-3: var(--brand-3); - --color-4: var(--brand-4); - --color-5: var(--brand-5); - --color-6: var(--brand-6); - --color-7: var(--brand-7); - --color-8: var(--brand-8); - --color-9: var(--brand-9); - --color-10: var(--brand-10); - --color-11: var(--brand-11); - --color-12: var(--brand-12); - - --color-a1: var(--brand-a1, var(--brand-1)); - --color-a2: var(--brand-a2, var(--brand-2)); - --color-a3: var(--brand-a3, var(--brand-3)); - --color-a4: var(--brand-a4, var(--brand-4)); - --color-a5: var(--brand-a5, var(--brand-5)); - --color-a6: var(--brand-a6, var(--brand-6)); - --color-a7: var(--brand-a7, var(--brand-7)); - --color-a8: var(--brand-a8, var(--brand-8)); - --color-a9: var(--brand-a9, var(--brand-9)); - --color-a10: var(--brand-a10, var(--brand-10)); - --color-a11: var(--brand-a11, var(--brand-11)); - --color-a12: var(--brand-a12, var(--brand-12)); - - --color-contrast: var(--brand-contrast); - --color-background: var(--brand-background); -} - -.contrast, -.contrast * { - --color-9: var(--color-12); - --color-10: var(--color-12); - --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); -} */ diff --git a/src/css/custom.css b/src/css/custom.css index 7966013c6..13cf57172 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,69 +1,20 @@ -/* 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: ''; -} */ +@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900); -.header:not(.window .header) { - backdrop-filter: blur(10px); - border-color: var(--base-a6) !important; - background-color: rgba(17, 17, 16, 0.2) !important; +mark { + background-color: var(--brand-12) !important; + color: var(--brand-1) !important; } -.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: ''; - } +.rounded-full { + border-radius: 999px !important; } -mark { - background-color: var(--brand-12) !important; - color: var(--brand-1) !important; +.hero .heading, +.hero .lead { + max-width: 680px; + text-wrap: balance; } -.astro-code { - border: 1px solid var(--base-6); - border-radius: var(--radius-2); - background-color: var(--base-2) !important; - padding: var(--space-5); +.logo .image { + border-radius: 2px; } diff --git a/src/css/size.css b/src/css/size.css deleted file mode 100644 index af17c5922..000000000 --- a/src/css/size.css +++ /dev/null @@ -1,130 +0,0 @@ -:root { - --space-sm-1: 4px; - --space-sm-2: 6px; - --space-sm-3: 8px; - --space-sm-4: 12px; - --space-sm-5: 20px; - --space-sm-6: 40px; - --space-sm-7: 60px; - - --space-md-1: 5px; - --space-md-2: 8px; - --space-md-3: 11px; - --space-md-4: 14px; - --space-md-5: 28px; - --space-md-6: 56px; - --space-md-7: 84px; - - --space-lg-1: 6px; - --space-lg-2: 10px; - --space-lg-3: 14px; - --space-lg-4: 18px; - --space-lg-5: 36px; - --space-lg-6: 72px; - --space-lg-7: 120px; - - --text-sm-1: 12px; - --text-sm-2: 14px; - --text-sm-3: 14px; - --text-sm-4: 16px; - --text-sm-5: 18px; - --text-sm-6: 20px; - --text-sm-7: 24px; - --text-sm-8: 30px; - - --text-md-1: 12px; - --text-md-2: 14px; - --text-md-3: 16px; - --text-md-4: 18px; - --text-md-5: 20px; - --text-md-6: 24px; - --text-md-7: 30px; - --text-md-8: 36px; - - --text-lg-1: 14px; - --text-lg-2: 14px; - --text-lg-3: 18px; - --text-lg-4: 20px; - --text-lg-5: 24px; - --text-lg-6: 30px; - --text-lg-7: 36px; - --text-lg-8: 48px; -} - -@media (min-width: 768px) { - :root { - --text-sm-8: 36px; - --text-md-8: 48px; - --text-lg-8: 60px; - } -} - -.size-sm { - --space-1: var(--space-sm-1); - --space-2: var(--space-sm-2); - --space-3: var(--space-sm-3); - --space-4: var(--space-sm-4); - --space-5: var(--space-sm-5); - --space-6: var(--space-sm-6); - --space-7: var(--space-sm-7); - - --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1)); - --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2)); - --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3)); - - --text-1: var(--text-sm-1); - --text-2: var(--text-sm-2); - --text-3: var(--text-sm-3); - --text-4: var(--text-sm-4); - --text-5: var(--text-sm-5); - --text-6: var(--text-sm-6); - --text-7: var(--text-sm-7); - --text-8: var(--text-sm-8); -} - -:root, -.size-md { - --space-1: var(--space-md-1); - --space-2: var(--space-md-2); - --space-3: var(--space-md-3); - --space-4: var(--space-md-4); - --space-5: var(--space-md-5); - --space-6: var(--space-md-6); - --space-7: var(--space-md-7); - - --radius-1: calc(var(--border-radius, 1) * var(--space-md-1)); - --radius-2: calc(var(--border-radius, 1) * var(--space-md-2)); - --radius-3: calc(var(--border-radius, 1) * var(--space-md-3)); - - --text-1: var(--text-md-1); - --text-2: var(--text-md-2); - --text-3: var(--text-md-3); - --text-4: var(--text-md-4); - --text-5: var(--text-md-5); - --text-6: var(--text-md-6); - --text-7: var(--text-md-7); - --text-8: var(--text-md-8); -} - -.size-lg { - --space-1: var(--space-lg-1); - --space-2: var(--space-lg-2); - --space-3: var(--space-lg-3); - --space-4: var(--space-lg-4); - --space-5: var(--space-lg-5); - --space-6: var(--space-lg-6); - --space-7: var(--space-lg-7); - - --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1)); - --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2)); - --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3)); - - --text-1: var(--text-lg-1); - --text-2: var(--text-lg-2); - --text-3: var(--text-lg-3); - --text-4: var(--text-lg-4); - --text-5: var(--text-lg-5); - --text-6: var(--text-lg-6); - --text-7: var(--text-lg-7); - --text-8: var(--text-lg-8); -} diff --git a/src/css/space.css b/src/css/space.css deleted file mode 100644 index 46e44de34..000000000 --- a/src/css/space.css +++ /dev/null @@ -1,85 +0,0 @@ -.root + .root, -.root + .box, -.root + .masonry, -.root + .carousel, -.image + .root, -.icon + .root { - --space-auto: var(--space-6); -} - -.root + .group, -.root + .row, -.root + .wrap, -.root + .button, -.root + .price, -.root + .switch { - --space-auto: var(--space-5); -} - -.card - :is( - .root + .root, - .root + .box, - .root + .masonry, - .root + .carousel, - .image + .root, - .icon + .root, - .root + .group, - .root + .row, - .root + .wrap, - .root + .button, - .root + .price, - .root + .switch - ) { - --space-auto: var(--space-4); -} - -.root + .heading, -.root + .link, -.root + .paragraph, -.root + .text, -.root + .tagline, -.root + .input, -.root + .textarea, -.root + .select, -.root + .badge, -.root + .rating { - --space-auto: var(--space-4); -} - -.paragraph + .paragraph, -.text + .text, -.button + .button, -.input + .button { - --space-auto: var(--space-3); -} - -.root + .label, -.label + .input, -.label + .textarea, -.label + .select, -.icon + .icon { - --space-auto: var(--space-2); -} - -.rating + .text, -.text + .rating { - --space-auto: var(--space-1); -} - -.image + .root, -.icon + .root { - --space-auto: var(--space-6); -} - -.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); -// } */ diff --git a/src/css/styles.css b/src/css/styles.css deleted file mode 100644 index ca253ac1e..000000000 --- a/src/css/styles.css +++ /dev/null @@ -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; -} diff --git a/src/css/theme.css b/src/css/theme.css new file mode 100644 index 000000000..0e8cb8688 --- /dev/null +++ b/src/css/theme.css @@ -0,0 +1,62 @@ +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 0 0% 100%; + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + --ring: 20 14.3% 4.1%; + --radius: 0.5rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + } + + .dark { + --background: 20 14.3% 4.1%; + --foreground: 60 4.8% 95.9%; + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 0 0% 100%; + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + --ring: 24 5.7% 82.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + + color-scheme: dark; + } +} + +.astro-code { + @apply mt-4 rounded-md p-4 text-sm first:mt-0; +} diff --git a/src/env.d.ts b/src/env.d.ts index 5b0a7e0c5..55722dadf 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1,2 +1,3 @@ /// -/// \ No newline at end of file +/// +/// diff --git a/src/integration/generate-colors.ts b/src/integration/generate-colors.ts deleted file mode 100644 index 97d77b692..000000000 --- a/src/integration/generate-colors.ts +++ /dev/null @@ -1,637 +0,0 @@ -import * as RadixColors from '@radix-ui/colors' -import BezierEasing from 'bezier-easing' -import Color from 'colorjs.io' - -type ArrayOf12 = [T, T, T, T, T, T, T, T, T, T, T, T] -const arrayOf12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as const - -// prettier-ignore -const grayScaleNames = ['gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const; - -// prettier-ignore -const scaleNames = [...grayScaleNames, 'tomato', 'red', 'ruby', 'crimson', 'pink', -'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green', -'grass', 'brown', 'orange', 'sky', 'mint', 'lime', 'yellow', 'amber'] as const; - -const lightColors = Object.fromEntries( - scaleNames.map((scaleName) => [ - scaleName, - Object.values(RadixColors[`${scaleName}P3`]).map((str) => - new Color(str).to('oklch') - ), - ]) -) as Record<(typeof scaleNames)[number], ArrayOf12> - -const darkColors = Object.fromEntries( - scaleNames.map((scaleName) => [ - scaleName, - Object.values(RadixColors[`${scaleName}DarkP3`]).map((str) => - new Color(str).to('oklch') - ), - ]) -) as Record<(typeof scaleNames)[number], ArrayOf12> - -const lightGrayColors = Object.fromEntries( - grayScaleNames.map((scaleName) => [ - scaleName, - Object.values(RadixColors[`${scaleName}P3`]).map((str) => - new Color(str).to('oklch') - ), - ]) -) as Record<(typeof grayScaleNames)[number], ArrayOf12> - -const darkGrayColors = Object.fromEntries( - grayScaleNames.map((scaleName) => [ - scaleName, - Object.values(RadixColors[`${scaleName}DarkP3`]).map((str) => - new Color(str).to('oklch') - ), - ]) -) as Record<(typeof grayScaleNames)[number], ArrayOf12> - -export const generateRadixColors = ({ - appearance, - ...args -}: { - appearance: 'light' | 'dark' - accent: string - gray: string - background: string -}) => { - const allScales = appearance === 'light' ? lightColors : darkColors - const grayScales = appearance === 'light' ? lightGrayColors : darkGrayColors - const backgroundColor = new Color(args.background).to('oklch') - - const grayBaseColor = new Color(args.gray).to('oklch') - const grayScaleColors = getScaleFromColor( - grayBaseColor, - grayScales, - backgroundColor - ) - - const accentBaseColor = new Color(args.accent).to('oklch') - - let accentScaleColors = getScaleFromColor( - accentBaseColor, - allScales, - backgroundColor - ) - - // Enforce srgb for the background color - const backgroundHex = backgroundColor.to('srgb').toString({ format: 'hex' }) - - // Make sure we use the tint from the gray scale for when base is pure white or black - const accentBaseHex = accentBaseColor.to('srgb').toString({ format: 'hex' }) - if (accentBaseHex === '#000' || accentBaseHex === '#fff') { - accentScaleColors = grayScaleColors.map((color) => - color.clone() - ) as ArrayOf12 - } - - const [accent9Color, accentContrastColor] = getStep9Colors( - accentScaleColors, - accentBaseColor - ) - - accentScaleColors[8] = accent9Color - accentScaleColors[9] = getButtonHoverColor(accent9Color, [accentScaleColors]) - - // Limit saturation of the text colors - accentScaleColors[10].coords[1] = Math.min( - Math.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]), - accentScaleColors[10].coords[1] - ) - accentScaleColors[11].coords[1] = Math.min( - Math.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]), - accentScaleColors[11].coords[1] - ) - - const accentScaleHex = accentScaleColors.map((color) => - color.to('srgb').toString({ format: 'hex' }) - ) as ArrayOf12 - - const accentScaleWideGamut = accentScaleColors.map( - toOklchString - ) as ArrayOf12 - - const accentScaleAlphaHex = accentScaleHex.map((color) => - getAlphaColorSrgb(color, backgroundHex) - ) as ArrayOf12 - - const accentScaleAlphaWideGamutString = accentScaleHex.map((color) => - getAlphaColorP3(color, backgroundHex) - ) as ArrayOf12 - - const accentContrastColorHex = accentContrastColor - .to('srgb') - .toString({ format: 'hex' }) - - const grayScaleHex = grayScaleColors.map((color) => - color.to('srgb').toString({ format: 'hex' }) - ) as ArrayOf12 - - const grayScaleWideGamut = grayScaleColors.map( - toOklchString - ) as ArrayOf12 - - const grayScaleAlphaHex = grayScaleHex.map((color) => - getAlphaColorSrgb(color, backgroundHex) - ) as ArrayOf12 - - const grayScaleAlphaWideGamutString = grayScaleHex.map((color) => - getAlphaColorP3(color, backgroundHex) - ) as ArrayOf12 - - const accentSurfaceHex = - appearance === 'light' - ? getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.8) - : getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.5) - - const accentSurfaceWideGamutString = - appearance === 'light' - ? getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.8) - : getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.5) - - return { - accentScale: accentScaleHex, - accentScaleAlpha: accentScaleAlphaHex, - accentScaleWideGamut: accentScaleWideGamut, - accentScaleAlphaWideGamut: accentScaleAlphaWideGamutString, - accentContrast: accentContrastColorHex, - - grayScale: grayScaleHex, - grayScaleAlpha: grayScaleAlphaHex, - grayScaleWideGamut: grayScaleWideGamut, - grayScaleAlphaWideGamut: grayScaleAlphaWideGamutString, - - graySurface: appearance === 'light' ? '#ffffffcc' : 'rgba(0, 0, 0, 0.05)', - graySurfaceWideGamut: - appearance === 'light' - ? 'color(display-p3 1 1 1 / 80%)' - : 'color(display-p3 0 0 0 / 5%)', - - accentSurface: accentSurfaceHex, - accentSurfaceWideGamut: accentSurfaceWideGamutString, - - background: backgroundHex, - } -} - -function getStep9Colors( - scale: ArrayOf12, - accentBaseColor: Color -): [Color, Color] { - const referenceBackgroundColor = scale[0] - const distance = accentBaseColor.deltaEOK(referenceBackgroundColor) * 100 - - // If the accent base color is close to the page background color, it's likely - // white on white or black on black, so we want to return something that makes sense instead - if (distance < 25) { - return [scale[8], getTextColor(scale[8])] - } - - return [accentBaseColor, getTextColor(accentBaseColor)] -} - -function getButtonHoverColor(source: Color, scales: ArrayOf12[]) { - const [L, C, H] = source.coords - const newL = L > 0.4 ? L - 0.03 / (L + 0.1) : L + 0.03 / (L + 0.1) - const newC = L > 0.4 && !isNaN(H) ? C * 0.93 + 0 : C - const buttonHoverColor = new Color('oklch', [newL, newC, H]) - - // Find closest in-scale color to donate the chroma and hue. - // Especially useful when the source color is pure white or black, - // but the gray scale is tinted. - let closestColor = buttonHoverColor - let minDistance = Infinity - - scales.forEach((scale) => { - for (const color of scale) { - const distance = buttonHoverColor.deltaEOK(color) - if (distance < minDistance) { - minDistance = distance - closestColor = color - } - } - }) - - buttonHoverColor.coords[1] = closestColor.coords[1] - buttonHoverColor.coords[2] = closestColor.coords[2] - return buttonHoverColor -} - -function getScaleFromColor( - source: Color, - scales: Record>, - backgroundColor: Color -) { - let allColors: { scale: string; color: Color; distance: number }[] = [] - - Object.entries(scales).forEach(([name, scale]) => { - for (const color of scale) { - const distance = source.deltaEOK(color) - allColors.push({ scale: name, distance, color }) - } - }) - - allColors.sort((a, b) => a.distance - b.distance) - - // Remove non-unique scales - let closestColors = allColors.filter( - (color, i, arr) => - i === arr.findIndex((value) => value.scale === color.scale) - ) - - // If the next two closest colors are both grays, remove the second one until it’s not a gray anymore. - // This is because up next we will be comparing how close the two closest colors are to the source color, - // and since the grays are all extremely close to each other, we won’t get any useful data from the second - // closest color if it’s also a gray. - const grayScaleNamesStr = grayScaleNames as readonly string[] - const allAreGrays = closestColors.every((color) => - grayScaleNamesStr.includes(color.scale) - ) - if (!allAreGrays && grayScaleNamesStr.includes(closestColors[0].scale)) { - while (grayScaleNamesStr.includes(closestColors[1].scale)) { - closestColors.splice(1, 1) - } - } - - let colorA = closestColors[0] - let colorB = closestColors[1] - - // Light trigonometry ahead. - // - // We want to determine the color that is the closest to the source color. Sometimes it makes sense - // to proportionally mix the two closest colors together, but sometimes it is not useful at all. - // Color coords are spatial in 3D, however we can treat the data we have as a 2D projection that is good enough. - // - // Case 1: - // If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form - // a triangle where NEITHER angle A nor B are larger than 90 degrees, then we want to mix the 1st and the 2nd - // closest colors in the same proportion as distances AD and BD are to each other. Mixing the two would result - // in a color that would be closer to the source color than either of the two original closest colors. - // Example: source color is a desaturated blue, which is between "indigo" and "slate" scales. - // - // C ← Source color - // /|⟍ - // / | ⟍ - // b / | ⟍ a - // / | ⟍ - // / | ⟍ - // A --- D -------- B - // ↑ - // The color we want to use as the base, which is a mix of A and B. - // - // Case 2: - // If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form - // a triangle where EITHER angle A or B are larger than 90 degrees, then we don’t care about point B because it’s - // directionally the same as A, as mixing A and B can’t provide us with a color that is any closer to the source. - // Example: source color is a saturated blue, with "blue" being the closest scale, and "indigo" just being further. - // - // C ← Source color - // \⟍ - // \ ⟍ - // \ ⟍ a - // b \ ⟍ - // \ ⟍ - // A ------- B - // ↑ - // The color we want to use as the base, which is not influenced by B. - - // We’ll need all the lengths of the triangle sides, named after the angles they look at: - const a = colorB.distance - const b = colorA.distance - const c = colorA.color.deltaEOK(colorB.color) - - // We can get the ratios of AD to BD lengths with trigonometry using tangents, - // as the ratio of the tangents of the opposite angles will match. - const cosA = (b ** 2 + c ** 2 - a ** 2) / (2 * b * c) - const radA = Math.acos(cosA) - const sinA = Math.sin(radA) - - const cosB = (a ** 2 + c ** 2 - b ** 2) / (2 * a * c) - const radB = Math.acos(cosB) - const sinB = Math.sin(radB) - - // Tangent of angle C in the ACD triangle - const tanC1 = cosA / sinA - - // Tangent of angle C in the BCD triangle - const tanC2 = cosB / sinB - - // The ratio of the tangents corresponds to the ratio of the distances AD to BD - // In the end, it means how much of scale B we want to mix into scale A. - // If it’s "0" or less, this is an obtuse triangle from case 2, and we use just scale A. - const ratio = Math.max(0, tanC1 / tanC2) * 0.5 - - // The base scale is going to be a mix of the two closest scales, with the mix ratio we determined before - const scaleA = scales[colorA.scale] - const scaleB = scales[colorB.scale] - const scale = arrayOf12.map((i) => - new Color(Color.mix(scaleA[i], scaleB[i], ratio)).to('oklch') - ) as ArrayOf12 - - // Get the closest color from the pre-mixed scale we created - const baseColor = scale - .slice() - .sort((a, b) => source.deltaEOK(a) - source.deltaEOK(b))[0] - - // Note the chroma difference between the source color and the base color - const ratioC = source.coords[1] / baseColor.coords[1] - - // Modify hue and chroma of the scale to match the source color - scale.forEach((color) => { - color.coords[1] = Math.min(source.coords[1] * 1.5, color.coords[1] * ratioC) - color.coords[2] = source.coords[2] - }) - - // Light mode - if (scale[0].coords[0] > 0.5) { - const lightnessScale = scale.map(({ coords }) => coords[0]) - const backgroundL = Math.max(0, Math.min(1, backgroundColor.coords[0])) - const newLightnessScale = transposeProgressionStart( - backgroundL, - // Add white as the first "step" of the light scale - [1, ...lightnessScale], - lightModeEasing - ) - - // Remove the step we added - newLightnessScale.shift() - - newLightnessScale.forEach((lightness, i) => { - scale[i].coords[0] = lightness - }) - - return scale - } - - // Dark mode - let ease: typeof darkModeEasing = [...darkModeEasing] - const referenceBackgroundColorL = scale[0].coords[0] - const backgroundColorL = Math.max(0, Math.min(1, backgroundColor.coords[0])) - - // If background is lighter than step 0, we want to gradually change the easing to linear - const ratioL = backgroundColorL / referenceBackgroundColorL - - if (ratioL > 1) { - const maxRatio = 1.5 - - for (let i = 0; i < ease.length; i++) { - const metaRatio = (ratioL - 1) * (maxRatio / (maxRatio - 1)) - ease[i] = ratioL > maxRatio ? 0 : Math.max(0, ease[i] * (1 - metaRatio)) - } - } - - const lightnessScale = scale.map(({ coords }) => coords[0]) - const backgroundL = backgroundColor.coords[0] - const newLightnessScale = transposeProgressionStart( - backgroundL, - lightnessScale, - ease - ) - - newLightnessScale.forEach((lightness, i) => { - scale[i].coords[0] = lightness - }) - - return scale -} - -function getTextColor(background: Color) { - const white = new Color('oklch', [1, 0, 0]) - - if (Math.abs(white.contrastAPCA(background)) < 40) { - const [C, H] = background.coords - return new Color('oklch', [0.25, Math.max(0.08 * C, 0.04), H]) - } - - return white -} - -// target = background * (1 - alpha) + foreground * alpha -// alpha = (target - background) / (foreground - background) -// Expects 0-1 numbers for the RGB channels -function getAlphaColor( - targetRgb: number[], - backgroundRgb: number[], - rgbPrecision: number, - alphaPrecision: number, - targetAlpha?: number -) { - const [tr, tg, tb] = targetRgb.map((c) => Math.round(c * rgbPrecision)) - const [br, bg, bb] = backgroundRgb.map((c) => Math.round(c * rgbPrecision)) - - if ( - tr === undefined || - tg === undefined || - tb === undefined || - br === undefined || - bg === undefined || - bb === undefined - ) { - throw Error('Color is undefined') - } - - // Is the background color lighter, RGB-wise, than target color? - // Decide whether we want to add as little color or as much color as possible, - // darkening or lightening the background respectively. - // If at least one of the bits of the target RGB value - // is lighter than the background, we want to lighten it. - let desiredRgb = 0 - if (tr > br) { - desiredRgb = rgbPrecision - } else if (tg > bg) { - desiredRgb = rgbPrecision - } else if (tb > bb) { - desiredRgb = rgbPrecision - } - - const alphaR = (tr - br) / (desiredRgb - br) - const alphaG = (tg - bg) / (desiredRgb - bg) - const alphaB = (tb - bb) / (desiredRgb - bb) - - const isPureGray = [alphaR, alphaG, alphaB].every((alpha) => alpha === alphaR) - - // No need for precision gymnastics with pure grays, and we can get cleaner output - if (!targetAlpha && isPureGray) { - // Convert back to 0-1 values - const V = desiredRgb / rgbPrecision - return [V, V, V, alphaR] as const - } - - const clampRgb = (n: number) => - isNaN(n) ? 0 : Math.min(rgbPrecision, Math.max(0, n)) - const clampA = (n: number) => - isNaN(n) ? 0 : Math.min(alphaPrecision, Math.max(0, n)) - const maxAlpha = targetAlpha ?? Math.max(alphaR, alphaG, alphaB) - - const A = clampA(Math.ceil(maxAlpha * alphaPrecision)) / alphaPrecision - let R = clampRgb(((br * (1 - A) - tr) / A) * -1) - let G = clampRgb(((bg * (1 - A) - tg) / A) * -1) - let B = clampRgb(((bb * (1 - A) - tb) / A) * -1) - - R = Math.ceil(R) - G = Math.ceil(G) - B = Math.ceil(B) - - const blendedR = blendAlpha(R, A, br) - const blendedG = blendAlpha(G, A, bg) - const blendedB = blendAlpha(B, A, bb) - - // Correct for rounding errors in light mode - if (desiredRgb === 0) { - if (tr <= br && tr !== blendedR) { - R = tr > blendedR ? R + 1 : R - 1 - } - - if (tg <= bg && tg !== blendedG) { - G = tg > blendedG ? G + 1 : G - 1 - } - - if (tb <= bb && tb !== blendedB) { - B = tb > blendedB ? B + 1 : B - 1 - } - } - - // Correct for rounding errors in dark mode - if (desiredRgb === rgbPrecision) { - if (tr >= br && tr !== blendedR) { - R = tr > blendedR ? R + 1 : R - 1 - } - - if (tg >= bg && tg !== blendedG) { - G = tg > blendedG ? G + 1 : G - 1 - } - - if (tb >= bb && tb !== blendedB) { - B = tb > blendedB ? B + 1 : B - 1 - } - } - - // Convert back to 0-1 values - R = R / rgbPrecision - G = G / rgbPrecision - B = B / rgbPrecision - - return [R, G, B, A] as const -} - -// Important – I empirically discovered that this rounding is how the browser actually overlays -// transparent RGB bits over each other. It does NOT round the whole result altogether. -function blendAlpha( - foreground: number, - alpha: number, - background: number, - round = true -) { - if (round) { - return Math.round(background * (1 - alpha)) + Math.round(foreground * alpha) - } - - return background * (1 - alpha) + foreground * alpha -} - -function getAlphaColorSrgb( - targetColor: string, - backgroundColor: string, - targetAlpha?: number -) { - const [r, g, b, a] = getAlphaColor( - new Color(targetColor).to('srgb').coords, - new Color(backgroundColor).to('srgb').coords, - 255, - 255, - targetAlpha - ) - - return formatHex(new Color('srgb', [r, g, b], a).toString({ format: 'hex' })) -} - -function getAlphaColorP3( - targetColor: string, - backgroundColor: string, - targetAlpha?: number -) { - const [r, g, b, a] = getAlphaColor( - new Color(targetColor).to('p3').coords, - new Color(backgroundColor).to('p3').coords, - // Not sure why, but the resulting P3 alpha colors are blended in the browser most precisely when - // rounded to 255 integers too. Is the browser using 0-255 rather than 0-1 under the hood for P3 too? - 255, - 1000, - targetAlpha - ) - - return ( - new Color('p3', [r, g, b], a) - .toString({ precision: 4 }) - // Important: in non-browser environments colorjs.io outputs a different format for some reason - .replace('color(p3 ', 'color(display-p3 ') - ) -} - -// Format shortform hex to longform -function formatHex(str: string) { - if (!str.startsWith('#')) { - return str - } - - if (str.length === 4) { - const hash = str.charAt(0) - const r = str.charAt(1) - const g = str.charAt(2) - const b = str.charAt(3) - return hash + r + r + g + g + b + b - } - - if (str.length === 5) { - const hash = str.charAt(0) - const r = str.charAt(1) - const g = str.charAt(2) - const b = str.charAt(3) - const a = str.charAt(4) - return hash + r + r + g + g + b + b + a + a - } - - return str -} - -const darkModeEasing = [1, 0, 1, 0] as [number, number, number, number] -const lightModeEasing = [0, 2, 0, 2] as [number, number, number, number] - -export function transposeProgressionStart( - to: number, - arr: number[], - curve: [number, number, number, number] -) { - return arr.map((n, i, arr) => { - const lastIndex = arr.length - 1 - const diff = arr[0] - to - const fn = BezierEasing(...curve) - return n - diff * fn(1 - i / lastIndex) - }) -} - -export function transposeProgressionEnd( - to: number, - arr: number[], - curve: [number, number, number, number] -) { - return arr.map((n, i, arr) => { - const lastIndex = arr.length - 1 - const diff = arr[lastIndex] - to - const fn = BezierEasing(...curve) - return n - diff * fn(i / lastIndex) - }) -} - -// Convert to OKLCH string with percentage for the lightness channel -// https://github.com/radix-ui/themes/issues/420 -function toOklchString(color: Color) { - const L = +(color.coords[0] * 100).toFixed(1) - return color - .to('oklch') - .toString({ precision: 4 }) - .replace(/(\S+)(.+)/, `oklch(${L}%$2`) -} diff --git a/src/integration/index.ts b/src/integration/index.ts index d6e3de993..dfef10e5a 100644 --- a/src/integration/index.ts +++ b/src/integration/index.ts @@ -1,156 +1,182 @@ +import mdx from '@astrojs/mdx' +import sitemap from '@astrojs/sitemap' import type { AstroIntegration } from 'astro' -import merge from 'deepmerge' +import favicons from 'astro-favicons' +import liveCode from 'astro-live-code' +import robotsTxt from 'astro-robots-txt' +import { envField } from 'astro/config' +import fs from 'fs' +import yaml from 'js-yaml' +import path from 'path' +import { assign } from 'radash' +import tailwindcss from 'tailwindcss' +import tailwindcssNesting from 'tailwindcss/nesting' +import { loadEnv } from 'vite' import virtual from 'vite-plugin-virtual' -import { generateRadixColors } from './generate-colors' - -type Color = { - background: Parameters[0]['background'] - base: Parameters[0]['gray'] - brand: Parameters[0]['accent'] -} +import tailwindConfig from '../../tailwind.config.ts' interface Config { + favicon?: string + company?: string css?: string injectRoutes?: boolean - colors: { - theme: 'light' | 'dark' - light?: Color - dark?: Color + cloudcannon?: boolean + cart?: boolean + overrides?: { + [k: string]: string } } -const defaultConfig: Config = { - colors: { - theme: 'light', - light: { - background: '#fff', - base: '#000', - brand: '#000', - }, - }, -} export default function fulldevIntegration( - userConfig?: Partial + config: Partial | undefined ): AstroIntegration { - const config = merge(defaultConfig ?? {}, userConfig ?? {}) - return { name: '/integration', hooks: { 'astro:config:setup': async ({ - config: astroConfig, updateConfig, - injectScript, injectRoute, + injectScript, }) => { // ---------------------- - // Inject css + // Update config // ---------------------- - config?.css && injectScript('page-ssr', `import "${config?.css}";`) - - const generateCss = ( - defaultTheme: 'light' | 'dark', - theme: 'light' | 'dark', - color: Color - ) => { - const { background, base, brand } = color - const generated = generateRadixColors({ - background, - appearance: theme, - gray: base, - accent: brand, - }) - - const scaleToString = ( - scale: any, - palette: 'base' | 'brand', - alpha?: boolean - ) => - scale - .map( - (color: any, i: any) => - `--${palette}-${alpha ? 'a' : ''}${i + 1}: ${color};` - ) - .join('\n') - - const baseString = scaleToString(generated.grayScale, 'base', false) - const baseAlphaString = scaleToString( - generated.grayScaleAlpha, - 'base', - true - ) - const brandString = scaleToString( - generated.accentScale, - 'brand', - false - ) - const brandAlphaString = scaleToString( - generated.accentScaleAlpha, - 'brand', - true - ) - const brandContrastString = `--brand-contrast: ${generated.accentContrast};` - const baseContrastString = `--base-contrast: ${generated.accentContrast};` - const baseBackgroundString = `--base-background: ${generated.background};` - const brandBackgroundString = `--brand-background: ${generated.background};` - const colorSchemeString = `--color-scheme: ${theme};` - - const css = `${defaultTheme == theme ? ':root, ' : ''} .theme-${theme} { - ${baseString} - ${baseAlphaString} - ${baseContrastString} - ${baseBackgroundString} - ${brandString} - ${brandAlphaString} - ${brandContrastString} - ${brandBackgroundString} - ${colorSchemeString} - }` - return css - } - - const lightCss = - (config.colors.light && - generateCss(config.colors.theme, 'light', config.colors.light)) || - '' - const darkCss = - (config.colors.dark && - generateCss(config.colors.theme, 'dark', config.colors.dark)) || - '' - - const css = lightCss + '\n' + darkCss - updateConfig({ + site: loadEnv(process.env.NODE_ENV as any, process.cwd(), '').URL, + experimental: { + contentLayer: true, + env: { + schema: { + URL: envField.string({ + context: 'client', + access: 'public', + }), + STRIPE_RESTRICTED_KEY: envField.string({ + context: 'client', + access: 'public', + optional: true, + }), + STRIPE_SECRET_KEY: envField.string({ + context: 'server', + access: 'secret', + optional: true, + }), + }, + validateSecrets: true, + }, + }, + integrations: [ + mdx(), + sitemap(), + robotsTxt(), + liveCode({ + layout: '/src/structures/Code.astro', + }), + ], vite: { + resolve: { + alias: { + ...config?.overrides, + }, + }, plugins: [ virtual({ - 'virtual:astro/config': `export default ${JSON.stringify(astroConfig)}`, - 'virtual:fulldev-ui/config': `export default ${JSON.stringify(config)}`, - 'virtual:colors.css': css, + 'virtual:fulldev-ui/config': config ?? {}, }), ], css: { - preprocessorOptions: { - scss: { - api: 'modern', - }, + postcss: { + plugins: [tailwindcss(tailwindConfig), tailwindcssNesting], }, }, }, }) - injectScript('page-ssr', `import "virtual:colors.css";`) + // ---------------------- + // Inject Favicon + // ---------------------- + config?.favicon && + config?.company && + updateConfig({ + integrations: [ + favicons({ + path: 'favicon', + masterPicture: config.favicon, + appName: config.company, + appShortName: config.company, + appDescription: config.company, + }), + ], + }) // ---------------------- // Inject routes // ---------------------- - if (config.injectRoutes) { - const pages = import.meta.glob('/src/pages/**/*.astro') - !pages['/src/pages/[...page].astro'] && - injectRoute({ - pattern: '/[...page]', - entrypoint: 'fulldev-ui/[...page].astro', - }) + if (config?.injectRoutes) { + injectRoute({ + pattern: '/[...page]', + entrypoint: 'fulldev-ui/pages/[...page].astro', + }) + } + + // ---------------------- + // Inject css + // ---------------------- + config?.css && injectScript('page-ssr', `import "${config?.css}";`) + + // ---------------------- + // merge Cloudcannon configs + // ---------------------- + + // ---------------------- + // 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) + // } + // } + }, + 'astro:build:done': async () => { + if (config?.cloudcannon) { + const __dirname = path.dirname(new URL(import.meta.url).pathname) + const libDir = path.join(__dirname, '../../cloudcannon.config.yml') + const userDir = path.join(process.cwd(), 'cloudcannon.config.yml') + + const libConfig = yaml.load( + fs.readFileSync(path.resolve(libDir), 'utf8') + ) + + const userConfig = yaml.load( + fs.readFileSync(path.resolve(userDir), 'utf8') + ) + + const mergedConfig = assign(libConfig || {}, userConfig || {}) + const yamlContent = yaml.dump(mergedConfig) + + await fs.promises.writeFile(userDir, yamlContent, 'utf8') } }, }, diff --git a/src/integration/tailwind-plugin.ts b/src/integration/tailwind-plugin.ts deleted file mode 100644 index 2c3ff6115..000000000 --- a/src/integration/tailwind-plugin.ts +++ /dev/null @@ -1,80 +0,0 @@ -import plugin from 'tailwindcss/plugin' - -export default plugin(() => {}, { - theme: { - spacing: { - 'space-1': 'var(--space-1)', - 'space-2': 'var(--space-2)', - 'space-3': 'var(--space-3)', - 'space-4': 'var(--space-4)', - 'space-5': 'var(--space-5)', - 'space-6': 'var(--space-6)', - 'space-7': 'var(--space-7)', - }, - borderRadius: { - 1: 'var(--radius-1)', - 2: 'var(--radius-2)', - 3: 'var(--radius-3)', - }, - fontSize: { - 1: 'var(--text-1)', - 2: 'var(--text-2)', - 3: 'var(--text-3)', - 4: 'var(--text-4)', - 5: 'var(--text-5)', - 6: 'var(--text-6)', - 7: 'var(--text-7)', - 8: 'var(--text-8)', - }, - colors: { - color: { - 1: 'var(--color-1)', - 2: 'var(--color-2)', - 3: 'var(--color-3)', - 4: 'var(--color-4)', - 5: 'var(--color-5)', - 6: 'var(--color-6)', - 7: 'var(--color-7)', - 8: 'var(--color-8)', - 9: 'var(--color-9)', - 10: 'var(--color-10)', - 11: 'var(--color-11)', - 12: 'var(--color-12)', - contrast: 'var(--color-contrast)', - background: 'var(--color-background)', - }, - base: { - 1: 'var(--color-base-1)', - 2: 'var(--color-base-2)', - 3: 'var(--color-base-3)', - 4: 'var(--color-base-4)', - 5: 'var(--color-base-5)', - 6: 'var(--color-base-6)', - 7: 'var(--color-base-7)', - 8: 'var(--color-base-8)', - 9: 'var(--color-base-9)', - 10: 'var(--color-base-10)', - 11: 'var(--color-base-11)', - 12: 'var(--color-base-12)', - contrast: 'var(--color-base-contrast)', - background: 'var(--color-base-background)', - }, - brand: { - 1: 'var(--color-brand-1)', - 2: 'var(--color-brand-2)', - 3: 'var(--color-brand-3)', - 4: 'var(--color-brand-4)', - 5: 'var(--color-brand-5)', - 6: 'var(--color-brand-6)', - 7: 'var(--color-brand-7)', - 8: 'var(--color-brand-8)', - 9: 'var(--color-brand-9)', - 10: 'var(--color-brand-10)', - 11: 'var(--color-brand-11)', - 12: 'var(--color-brand-12)', - contrast: 'var(--color-brand-contrast)', - background: 'var(--color-brand-background)', - }, - }, - }, -}) diff --git a/src/integration/unocss-preset.ts b/src/integration/unocss-preset.ts deleted file mode 100644 index 170ce7c3c..000000000 --- a/src/integration/unocss-preset.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { definePreset, presetUno } from 'unocss' - -export default definePreset(() => { - return { - name: 'fullUI', - presets: [presetUno()], - theme: { - spacing: { - 'space-1': 'var(--space-1)', - 'space-2': 'var(--space-2)', - 'space-3': 'var(--space-3)', - 'space-4': 'var(--space-4)', - 'space-5': 'var(--space-5)', - 'space-6': 'var(--space-6)', - 'space-7': 'var(--space-7)', - }, - borderRadius: { - 1: 'var(--radius-1)', - 2: 'var(--radius-2)', - 3: 'var(--radius-3)', - }, - fontSize: { - 1: 'var(--text-1)', - 2: 'var(--text-2)', - 3: 'var(--text-3)', - 4: 'var(--text-4)', - 5: 'var(--text-5)', - 6: 'var(--text-6)', - 7: 'var(--text-7)', - 8: 'var(--text-8)', - }, - colors: { - color: { - 1: 'var(--color-1)', - 2: 'var(--color-2)', - 3: 'var(--color-3)', - 4: 'var(--color-4)', - 5: 'var(--color-5)', - 6: 'var(--color-6)', - 7: 'var(--color-7)', - 8: 'var(--color-8)', - 9: 'var(--color-9)', - 10: 'var(--color-10)', - 11: 'var(--color-11)', - 12: 'var(--color-12)', - contrast: 'var(--color-contrast)', - background: 'var(--color-background)', - }, - base: { - 1: 'var(--color-base-1)', - 2: 'var(--color-base-2)', - 3: 'var(--color-base-3)', - 4: 'var(--color-base-4)', - 5: 'var(--color-base-5)', - 6: 'var(--color-base-6)', - 7: 'var(--color-base-7)', - 8: 'var(--color-base-8)', - 9: 'var(--color-base-9)', - 10: 'var(--color-base-10)', - 11: 'var(--color-base-11)', - 12: 'var(--color-base-12)', - contrast: 'var(--color-base-contrast)', - background: 'var(--color-base-background)', - }, - brand: { - 1: 'var(--color-brand-1)', - 2: 'var(--color-brand-2)', - 3: 'var(--color-brand-3)', - 4: 'var(--color-brand-4)', - 5: 'var(--color-brand-5)', - 6: 'var(--color-brand-6)', - 7: 'var(--color-brand-7)', - 8: 'var(--color-brand-8)', - 9: 'var(--color-brand-9)', - 10: 'var(--color-brand-10)', - 11: 'var(--color-brand-11)', - 12: 'var(--color-brand-12)', - contrast: 'var(--color-brand-contrast)', - background: 'var(--color-brand-background)', - }, - }, - }, - } -}) diff --git a/src/layouts/BlockLayout.astro b/src/layouts/BlockLayout.astro deleted file mode 100644 index 525bca33b..000000000 --- a/src/layouts/BlockLayout.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Intro from 'fulldev-ui/blocks/Intro.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { Content } = await render() ---- - - - - - - diff --git a/src/layouts/BlockOverviewLayout.astro b/src/layouts/BlockOverviewLayout.astro deleted file mode 100644 index 06654cca8..000000000 --- a/src/layouts/BlockOverviewLayout.astro +++ /dev/null @@ -1,39 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Hero from 'fulldev-ui/blocks/Hero.astro' -import Block from 'fulldev-ui/components/Block.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data } = Astro.props ---- - - - - - - - diff --git a/src/layouts/ComponentLayout.astro b/src/layouts/ComponentLayout.astro deleted file mode 100644 index b202d94bb..000000000 --- a/src/layouts/ComponentLayout.astro +++ /dev/null @@ -1,23 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { render } = Astro.props -const { Content } = await render() ---- - - - - - - - - - diff --git a/src/layouts/JobsLayout.astro b/src/layouts/JobsLayout.astro deleted file mode 100644 index 1b8e9c260..000000000 --- a/src/layouts/JobsLayout.astro +++ /dev/null @@ -1,40 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import { getCollection } from 'astro:content' -import JobDeck from 'fulldev-ui/blocks/Jobs.astro' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, slug, ...rest } = Astro.props - -const childPages = ( - await getCollection('pages', (page: any) => page.slug.startsWith(slug)) -).map((page: any) => ({ href: `/${page.slug}/`, ...page.data })) ---- - - - - - - - - - - - - diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro deleted file mode 100644 index d8cf36e77..000000000 --- a/src/layouts/Layout.astro +++ /dev/null @@ -1,169 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Button from 'fulldev-ui/components/Button.astro' -import Head from 'fulldev-ui/components/Head.astro' -import Header from 'fulldev-ui/components/Header.astro' -import Sidebar from 'fulldev-ui/components/Sidebar.astro' -import Toc from 'fulldev-ui/components/Toc.astro' -import NavigationButtons from '../components/docs/NavigationButtons.astro' - -type Props = Partial> & { - class?: string - theme?: 'light' | 'dark' -} - -const { slug, data, theme, class: classes, render } = Astro.props -const { logo, header, footer, footers, channels, sidebar, toc } = data || {} - -const { headings } = render ? await render() : { headings: [] } - -const h2Headings = headings.filter((heading: any) => heading.depth === 2) ---- - - - - - - - - - - - - - - - - - - { - channels?.whatsapp && ( - - ) - } - - - - - - - diff --git a/src/layouts/OverviewLayout.astro b/src/layouts/OverviewLayout.astro deleted file mode 100644 index eda484f57..000000000 --- a/src/layouts/OverviewLayout.astro +++ /dev/null @@ -1,45 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { sections, blocks, children, references } = data -const { Content } = await render() ---- - - - - - - - - - - - - - - diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro new file mode 100644 index 000000000..f67525f24 --- /dev/null +++ b/src/layouts/Page.astro @@ -0,0 +1,63 @@ +--- +import type { ComponentProps } from 'astro/types' +import type { CollectionEntry } from 'astro:content' +import Block from 'fulldev-ui/components/Block.astro' +import Element from 'fulldev-ui/components/Element.astro' +import type { PageSchema } from 'fulldev-ui/schemas/page.ts' +import Layout from 'fulldev-ui/structures/Layout.astro' + +type Props = ComponentProps & + PageSchema & { + render: CollectionEntry<'pages'>['render'] + } + +const { + _block, + title, + heading, + description, + paragraph, + banner, + sidebar, + header, + sections, + footer, + render, + navigation, + ...rest +} = Astro.props + +const { Content, headings } = await render() +--- + + + + + + + + + {sections?.map((section) => )} + + + diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro deleted file mode 100644 index ed8111443..000000000 --- a/src/layouts/PageLayout.astro +++ /dev/null @@ -1,32 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { hero, section, sections, block, blocks } = data -const { Content } = await render() ---- - - - - - - - - - - - - - - diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro deleted file mode 100644 index ec8ae413b..000000000 --- a/src/layouts/PostLayout.astro +++ /dev/null @@ -1,32 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Intro from 'fulldev-ui/blocks/Intro.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { section, sections, blocks } = data -const { Content } = await render() ---- - - - - - - - - - - - - diff --git a/src/layouts/ProductLayout.astro b/src/layouts/ProductLayout.astro deleted file mode 100644 index 686a69635..000000000 --- a/src/layouts/ProductLayout.astro +++ /dev/null @@ -1,31 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { section, sections, block, blocks } = data -const { Content } = await render() ---- - - - - - - - - - - - - - - diff --git a/src/layouts/_Product.astro b/src/layouts/_Product.astro new file mode 100644 index 000000000..a2490deb1 --- /dev/null +++ b/src/layouts/_Product.astro @@ -0,0 +1,115 @@ + diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro index 2f3605c27..79c77add6 100644 --- a/src/pages/[...page].astro +++ b/src/pages/[...page].astro @@ -1,40 +1,49 @@ --- -import { getCollection } from 'astro:content' -import PageLayout from 'fulldev-ui/layouts/PageLayout.astro' -import { mapKeys } from 'radash' -import { mergeEntries } from '../utils/mergeEntries' +import { getCollection, getEntry } from 'astro:content' +import { getHref } from 'fulldev-ui/utils/getHref.ts' +import { dash, pascal } from 'radash' +import { mergeDeep } from 'remeda' export async function getStaticPaths() { - const pages = await getCollection('pages') - return pages.map((page) => ({ + const collection = await getCollection('pages') + return collection.map((entry) => ({ params: { - page: page.slug === 'index' ? undefined : page.slug, + page: getHref(entry.slug), }, - props: page, + props: entry, })) } -const { data, slug, ...rest } = Astro.props +const layoutName = Astro.props.data._layout ?? 'Page' +const layoutComponentName = pascal(layoutName) -const merged = (await mergeEntries({ data, slug })) as any +const layoutsComponents = { + ...import.meta.glob('/src/layouts/**/*.astro'), + ...import.meta.glob('../layouts/**/*.astro'), +} -const packageLayouts = import.meta.glob('../layouts/**/*.astro') -const userLayouts = import.meta.glob('/src/layouts/**/*.astro') +const layoutComponentPath = Object.keys(layoutsComponents).find( + (path) => path.split('/').pop()?.split('.')[0] === layoutComponentName +) -const mapBlockKeys = (blocks: any) => - mapKeys(blocks, (key: any) => key.split('/').pop().split('.').shift()) +const LayoutComponent = + layoutComponentPath && + (await (layoutsComponents[layoutComponentPath] as any)()).default -const components = { - ...mapBlockKeys(packageLayouts), - ...mapBlockKeys(userLayouts), -} +const layoutEntryName = dash(layoutName) +const layoutEntry = await getEntry('layouts', layoutEntryName) +const baseLayout = await getEntry('layouts', 'base') +const mergedLayouts = mergeDeep(baseLayout || {}, layoutEntry || {}) +const merged = mergeDeep(mergedLayouts, Astro.props) -const found = components[(merged.data._layout ?? 'PageLayout') as string] as any -const functioncomp = found && (await found()) -const Layout = functioncomp?.default ?? PageLayout +const { data, ...rest } = merged --- - +{ + LayoutComponent && ( + + ) +} diff --git a/src/pages/test.astro b/src/pages/test.astro new file mode 100644 index 000000000..d4f92294f --- /dev/null +++ b/src/pages/test.astro @@ -0,0 +1,16 @@ + + + + Sign up + diff --git a/src/schemas/base.ts b/src/schemas/base.ts deleted file mode 100644 index 937d9a780..000000000 --- a/src/schemas/base.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { z } from 'astro:content' - -export const button = z - .object({ - text: z.string(), - href: z.string(), - icon: z.string(), - }) - .partial() - .passthrough() - -export const link = z - .object({ - text: z.string(), - href: z.string(), - }) - .partial() - .passthrough() - -export const base = z - .object({ - tagline: z.string(), - icon: z.string(), - badge: z.string().or( - z.object({ - text: z.string(), - href: z.string(), - }) - ), - heading: z.string(), - text: z.string(), - html: z.string(), - image: z.string(), - images: z.string().array(), - rating: z.number().or( - z - .object({ - value: z.number(), - label: z.string(), - avatars: z.string().array(), - avatar: z.string(), - }) - .partial() - ), - button: button, - buttons: button.array(), - link: link, - links: link.array(), - list: z.string().array(), - avatar: z.string(), - price: z.number(), - input: z - .object({ - placeholder: z.string(), - submit: z.string(), - }) - .partial() - .passthrough(), - logos: z.string().array(), - logo: z.string(), - channels: z - .object({ - phone: z.string(), - email: z.string(), - address: z.string(), - }) - .partial() - .passthrough(), - socials: z - .object({ - facebook: z.string(), - instagram: z.string(), - }) - .partial() - .passthrough(), - hours: z - .object({ - monday: z.string(), - tuesday: z.string(), - wednesday: z.string(), - thursday: z.string(), - friday: z.string(), - saturday: z.string(), - sunday: z.string(), - }) - .partial() - .passthrough(), - }) - .partial() - .passthrough() diff --git a/src/schemas/block.ts b/src/schemas/block.ts index 6e70c3ec7..fef54f512 100644 --- a/src/schemas/block.ts +++ b/src/schemas/block.ts @@ -1,15 +1,32 @@ import { z } from 'astro:content' -import { base } from './base' -import { card } from './card' -import { pathSchema } from './utils' +import { cardSchema } from 'fulldev-ui/schemas/card.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' +import { pathSchema } from 'fulldev-ui/schemas/path.ts' -export const block = base +export const blockSchema = cardSchema .extend({ - columns: card.array(), - cards: z.array(card), - source: z.enum(['children', 'references']), - pages: pathSchema('pages').array(), - records: pathSchema('records').array(), + _block: z.string().optional(), + depth: z.union([z.literal(1), z.literal(2), z.literal(3)]).optional(), + themer: z.boolean().optional(), + search: z.boolean().optional(), + cart: z.boolean().optional(), + cards: cardSchema.array().optional(), + pages: pathSchema('pages').array().optional(), + records: pathSchema('records').array().optional(), + soldout: z.boolean().optional(), + variants: z.record(z.string(), z.string().array()).optional(), + categories: pathSchema('pages').array().optional(), + menus: menuSchema.array().optional(), + headings: z + .array( + z.object({ + depth: z.number(), + slug: z.string(), + text: z.string(), + }) + ) + .optional(), }) - .partial() - .passthrough() + .strict() + +export type BlockSchema = z.infer diff --git a/src/schemas/button.ts b/src/schemas/button.ts new file mode 100644 index 000000000..c0bb5c615 --- /dev/null +++ b/src/schemas/button.ts @@ -0,0 +1,17 @@ +import { z } from 'astro:content' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' + +export const buttonSchema = z + .object({ + icon: z.string().optional(), + image: imageSchema.optional(), + text: z.string().optional(), + href: z.string().optional(), + target: z.literal('_blank').optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + reverse: z.boolean().optional(), + variant: z.enum(['primary', 'secondary', 'outline', 'ghost']).optional(), + }) + .strict() + +export type ButtonSchema = z.infer diff --git a/src/schemas/card.ts b/src/schemas/card.ts index d41315cbf..af5c8d4a9 100644 --- a/src/schemas/card.ts +++ b/src/schemas/card.ts @@ -1,3 +1,43 @@ -import { base } from './base' +import { z } from 'astro:content' +import { buttonSchema } from 'fulldev-ui/schemas/button.ts' +import { channelSchema } from 'fulldev-ui/schemas/channel.ts' +import { chipSchema } from 'fulldev-ui/schemas/chip.ts' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' +import { linkSchema } from 'fulldev-ui/schemas/link.ts' +import { logoSchema } from 'fulldev-ui/schemas/logo.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' +import { proofSchema } from 'fulldev-ui/schemas/proof.ts' -export const card = base +export const cardSchema = z + .object({ + target: z.string().optional(), + href: z.string().optional(), + order: z.number().optional(), + dark: z.boolean().optional(), + text: z.string().optional(), + content: z.string().optional(), + tagline: z.string().optional(), + heading: z.string().optional(), + paragraph: z.string().optional(), + list: z.string().array().optional(), + socials: z.string().array().optional(), + logo: logoSchema.optional(), + link: linkSchema.optional(), + links: linkSchema.array().optional(), + menus: menuSchema.array().optional(), + chip: chipSchema.optional(), + badges: z.string().array().optional(), + button: buttonSchema.optional(), + buttons: buttonSchema.array().optional(), + image: imageSchema.optional(), + images: imageSchema.array().optional(), + channels: channelSchema.array().optional(), + proof: proofSchema.optional(), + price: z.number().optional(), + icon: z.string().optional(), + rating: z.number().optional(), + avatar: imageSchema.optional(), + avatars: imageSchema.array().optional(), + soldout: z.boolean().optional(), + }) + .strict() diff --git a/src/schemas/channel.ts b/src/schemas/channel.ts new file mode 100644 index 000000000..7fd62d6ae --- /dev/null +++ b/src/schemas/channel.ts @@ -0,0 +1,14 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Channel from 'fulldev-ui/components/Channel.astro' + +export const channelSchema = z + .object({ + icon: z.string().optional(), + heading: z.string().optional(), + text: z.string().optional(), + href: z.string().optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + variant: z.enum(['secondary', 'outline']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/checkbox.ts b/src/schemas/checkbox.ts new file mode 100644 index 000000000..b5aa7b835 --- /dev/null +++ b/src/schemas/checkbox.ts @@ -0,0 +1,13 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Checkbox from 'fulldev-ui/components/Checkbox.astro' + +export const checkboxSchema = z + .object({ + name: z.string().optional(), + label: z.string().optional(), + id: z.string().optional(), + value: z.string().optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/chip.ts b/src/schemas/chip.ts new file mode 100644 index 000000000..047ebd140 --- /dev/null +++ b/src/schemas/chip.ts @@ -0,0 +1,14 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Chip from 'fulldev-ui/components/Chip.astro' + +export const chipSchema = z + .object({ + icon: z.string().optional(), + text: z.string().optional(), + href: z.string().optional(), + target: z.literal('_blank').optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + variant: z.enum(['primary', 'secondary', 'outline']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/footer.ts b/src/schemas/footer.ts new file mode 100644 index 000000000..4d9a8d800 --- /dev/null +++ b/src/schemas/footer.ts @@ -0,0 +1,17 @@ +import { z } from 'astro:content' +import { channelSchema } from 'fulldev-ui/schemas/channel.ts' +import { logoSchema } from 'fulldev-ui/schemas/logo.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' + +export const footerSchema = z + .object({ + logo: logoSchema.optional(), + heading: z.string().optional(), + paragraph: z.string().optional(), + socials: z.string().url().array().optional(), + channels: channelSchema.array().optional(), + menus: menuSchema.array().optional(), + }) + .strict() + +export type FooterSchema = z.infer diff --git a/src/schemas/head.ts b/src/schemas/head.ts new file mode 100644 index 000000000..4d4bd67dc --- /dev/null +++ b/src/schemas/head.ts @@ -0,0 +1,17 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Head from 'fulldev-ui/components/Head.astro' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' + +export const headSchema = z + .object({ + title: z.string().optional(), + description: z.string().optional(), + image: imageSchema.optional(), + theme: z.enum(['light', 'dark', 'system']).optional(), + favicon: z.string().optional(), + company: z.string().optional(), + scripts: z.string().array().optional(), + code: z.string().optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/header.ts b/src/schemas/header.ts new file mode 100644 index 000000000..28f2387a8 --- /dev/null +++ b/src/schemas/header.ts @@ -0,0 +1,21 @@ +import { z } from 'astro:content' +import { buttonSchema } from 'fulldev-ui/schemas/button.ts' +import { linkSchema } from 'fulldev-ui/schemas/link.ts' +import { logoSchema } from 'fulldev-ui/schemas/logo.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' + +export const headerSchema = z + .object({ + logo: logoSchema.optional(), + heading: z.string().optional(), + links: linkSchema.array().optional(), + socials: z.string().array().optional(), + buttons: buttonSchema.array().optional(), + menus: menuSchema.array().optional(), + themer: z.boolean().optional(), + cart: z.boolean().optional(), + search: z.boolean().optional(), + }) + .strict() + +export type HeaderSchema = z.infer diff --git a/src/schemas/image.ts b/src/schemas/image.ts new file mode 100644 index 000000000..17b1b61ed --- /dev/null +++ b/src/schemas/image.ts @@ -0,0 +1,53 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Image from 'fulldev-ui/components/Image.astro' + +// const imagePath = z.preprocess((data: unknown) => { +// if (typeof data === 'string') { +// return data.split('/').pop() +// } +// return data +// }, reference('images')) + +// export const imageSchema = z +// .union([imagePath, z.object({}).passthrough()]) +// .pipe( +// z +// .object({ +// id: z +// .string() +// .refine(async (data) => await reference('images').parseAsync(data)), +// src: z.string(), +// alt: z.string(), +// width: z.number(), +// height: z.number(), +// }) +// .partial() +// .passthrough() +// ) +// .optional() + +// export const imageSchema = z +// .object({ +// src: z.string().optional(), +// alt: z.string().optional(), +// width: z.number().optional(), +// height: z.number().optional(), +// }) +// .strict() satisfies z.ZodType> + +const image = z + .object({ + src: z.string().optional(), + alt: z.string().optional(), + width: z.number().optional(), + height: z.number().optional(), + }) + .strict() satisfies z.ZodType> + +export const imageSchema = z + .preprocess( + (data: unknown) => (typeof data === 'string' ? { src: data } : data), + image + ) + .optional() as z.ZodType> diff --git a/src/schemas/input.ts b/src/schemas/input.ts new file mode 100644 index 000000000..11b9156ef --- /dev/null +++ b/src/schemas/input.ts @@ -0,0 +1,13 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Input from 'fulldev-ui/components/Input.astro' + +export const inputSchema = z + .object({ + icon: z.string().optional(), + label: z.string().optional(), + placeholder: z.string().optional(), + value: z.string().optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/link.ts b/src/schemas/link.ts new file mode 100644 index 000000000..bb91689df --- /dev/null +++ b/src/schemas/link.ts @@ -0,0 +1,14 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Link from 'fulldev-ui/components/Link.astro' + +export const linkSchema = z + .object({ + text: z.string().optional(), + href: z.string().optional(), + icon: z.string().optional(), + target: z.literal('_blank').optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + variant: z.enum(['primary', 'underline', 'muted']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/logo.ts b/src/schemas/logo.ts new file mode 100644 index 000000000..faf75915b --- /dev/null +++ b/src/schemas/logo.ts @@ -0,0 +1,13 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Logo from 'fulldev-ui/components/Logo.astro' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' + +export const logoSchema = z + .object({ + image: imageSchema.optional(), + text: z.string().optional(), + href: z.string().optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/menu.ts b/src/schemas/menu.ts new file mode 100644 index 000000000..a825cceef --- /dev/null +++ b/src/schemas/menu.ts @@ -0,0 +1,11 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Menu from 'fulldev-ui/components/Menu.astro' +import { linkSchema } from 'fulldev-ui/schemas/link.ts' + +export const menuSchema = z + .object({ + heading: z.string().optional(), + links: linkSchema.array().optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/page.ts b/src/schemas/page.ts index ced52e1a9..a7a586110 100644 --- a/src/schemas/page.ts +++ b/src/schemas/page.ts @@ -1,43 +1,23 @@ import { z } from 'astro:content' -import { base } from './base' -import { block } from './block' -import { pathSchema } from './utils' +import { blockSchema } from 'fulldev-ui/schemas/block.ts' +import { headSchema } from 'fulldev-ui/schemas/head.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' -export const page = base +export const pageSchema = blockSchema .extend({ - i18n: pathSchema('pages'), - settings: pathSchema('settings'), - seo: z - .object({ - title: z.string(), - description: z.string(), - image: z.string(), - }) - .partial() - .passthrough(), - code: z - .object({ - head: z.string(), - body: z.string(), - }) - .partial() - .passthrough(), - pages: pathSchema('pages').array(), - records: pathSchema('records').array(), - title: z.string(), - description: z.string(), - header: block.or(z.literal(false)), - headers: block.array().or(z.literal(false)), - hero: block.or(z.literal(false)), - block: block.or(z.literal(false)), - section: block.or(z.literal(false)), - blocks: block.array().or(z.object({}).catchall(block)), - sections: block.array().or(z.object({}).catchall(block)), - cta: block.or(z.literal(false)), - footer: block.or(z.literal(false)), - footers: block.array().or(z.literal(false)), + _layout: z.string().optional(), + _schema: z.string().optional(), + title: z.string().optional(), + description: z.string().optional(), + head: headSchema.optional(), + banner: blockSchema.optional(), + navigation: blockSchema.optional(), + header: blockSchema.optional(), + sections: blockSchema.array().optional(), + subheader: blockSchema.array().optional(), + sidebar: menuSchema.array().optional(), + footer: blockSchema.optional(), }) - .partial() - .passthrough() + .strict() -export type Page = z.infer +export type PageSchema = z.infer diff --git a/src/schemas/utils.ts b/src/schemas/path.ts similarity index 61% rename from src/schemas/utils.ts rename to src/schemas/path.ts index a749ac209..e5513828c 100644 --- a/src/schemas/utils.ts +++ b/src/schemas/path.ts @@ -1,19 +1,10 @@ import { reference, z, type AnyEntryMap } from 'astro:content' -// export const pagesPath = z -// .string() -// .transform((value) => { -// const fullpath = value?.split(`pages/`).pop() -// const slug = fullpath?.split('.').shift() -// return slug -// }) -// .pipe(reference('pages')) - +// TODO: preprocess instead export const pathSchema = (collection: C) => z .string() .transform((value) => { - // @ts-ignore const fullpath = value?.split(`${collection}/`).pop() const slug = fullpath?.split('.').shift() const noIndexEnding = slug?.replace('/index', '') diff --git a/src/schemas/proof.ts b/src/schemas/proof.ts new file mode 100644 index 000000000..686231ab8 --- /dev/null +++ b/src/schemas/proof.ts @@ -0,0 +1,12 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Proof from 'fulldev-ui/components/Proof.astro' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' + +export const proofSchema = z + .object({ + rating: z.number().optional(), + avatars: imageSchema.array().optional(), + text: z.string().optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/textarea.ts b/src/schemas/textarea.ts new file mode 100644 index 000000000..b54687c98 --- /dev/null +++ b/src/schemas/textarea.ts @@ -0,0 +1,11 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Textarea from 'fulldev-ui/components/Textarea.astro' + +export const textareaSchema = z + .object({ + label: z.string().optional(), + placeholder: z.string().optional(), + value: z.string().optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/stores/cart.svelte.ts b/src/stores/cart.svelte.ts new file mode 100644 index 000000000..5da624751 --- /dev/null +++ b/src/stores/cart.svelte.ts @@ -0,0 +1,78 @@ +import { derived, writable } from 'svelte/store' + +export type CartItem = { + uid: string + quantity: number + slug: string + title: string + price?: number | undefined + image?: string | undefined + variants?: + | { + [k: string]: string | undefined + } + | undefined +} + +export type Cart = CartItem[] + +const isServer = import.meta.env.SSR +const storageJson = !isServer && localStorage.getItem('cart') +const storageData = storageJson ? JSON.parse(storageJson) : [] + +export const cart = writable(storageData) + +cart.subscribe((newCart) => { + if (isServer) return + const json = JSON.stringify(newCart) + localStorage.setItem('cart', json) +}) + +export const getUid = ( + slug: CartItem['slug'], + variants?: CartItem['variants'] +) => (variants ? `${slug}-${Object.values(variants)?.join('-')}` : slug) + +export const getItemIndex = (currentCart: Cart, uid: CartItem['uid']) => { + const index = currentCart.findIndex((i) => i.uid === uid) + if (index === -1) throw new Error(`Item with uid ${uid} not found`) + return index +} + +export const addItem = (item: CartItem) => + cart.update((currentCart) => [...currentCart, item]) + +export const removeItem = (uid: CartItem['uid']) => + cart.update((currentCart) => { + const index = getItemIndex(currentCart, uid) + currentCart.splice(index, 1) + return [...currentCart] + }) + +export const updateQuantity = ( + uid: CartItem['uid'], + quantity: CartItem['quantity'] +) => + cart.update((currentCart) => { + const index = getItemIndex(currentCart, uid) + if (currentCart[index]) currentCart[index].quantity = quantity + return [...currentCart] + }) + +export const openCart = () => { + const cartDialog = document.querySelector('dialog#cart') + if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal() +} + +export const closeCart = () => { + const cartDialog = document.querySelector('dialog#cart') + if (cartDialog instanceof HTMLDialogElement) cartDialog.close() +} + +export const totalPrice = derived(cart, ($cart) => { + return $cart.length + // return $cart.reduce( + // (acc, item) => acc + (item.price || 0) * (item.quantity || 0), + // 0 + // ) +}) diff --git a/src/stores/cart.ts b/src/stores/cart.ts new file mode 100644 index 000000000..0bb77204b --- /dev/null +++ b/src/stores/cart.ts @@ -0,0 +1,76 @@ +import { persistentAtom } from '@nanostores/persistent' +import { computed } from 'nanostores' + +type Item = { + slug: string + title: string + price: number + image: string + quantity: number + variants: string[] +} + +type Cart = Item[] | [] + +export const $cart = persistentAtom('cart', [], { + encode: JSON.stringify, + decode: JSON.parse, +}) + +// for svelte files +export const cart = $cart + +export const getCart = () => $cart.get() + +export const setCart = (cart: Cart) => $cart.set(cart) + +export const removeItem = (slug: string) => { + const currentCart = getCart() + const newCart = [...currentCart] + const index = currentCart.findIndex((item) => item.slug === slug) + newCart.splice(index, 1) + $cart.set(newCart) +} + +export const addItem = (item: Item) => { + const currentCart = getCart() + const newCart = [...currentCart] + const index = currentCart.findIndex( + (i) => i.slug === item.slug && i.variants.join() === item.variants.join() + ) + if (index === -1) newCart.push(item) + else { + let newItem = { ...newCart[index] } as Item + newItem.quantity += item.quantity + newCart[index] = newItem + } + setCart(newCart) +} + +export const updateQuantity = (slug: string, quantity: number) => { + const currentCart = getCart() + const newCart = [...currentCart] + const index = currentCart.findIndex((item) => item.slug === slug) + let newItem = { ...newCart[index] } as Item + newItem.quantity = quantity + newCart[index] = newItem + setCart(newCart) +} + +export const $totalPrice = computed($cart, ($cart) => + $cart.reduce((a, b) => +a + b.price * b.quantity, 0) +) + +export const openCart = () => { + const cartDialog = document.querySelector('dialog#cart') + if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal() +} + +export const closeCart = () => { + const cartDialog = document.querySelector('dialog#cart') + if (cartDialog instanceof HTMLDialogElement) cartDialog.close() +} + +// export const totalQuantity = computed(cart, ($cart) => +// $cart.reduce((a, b) => +a + b.quantity, 0) +// ) diff --git a/src/structures/Card.astro b/src/structures/Card.astro new file mode 100644 index 000000000..68e0c36e7 --- /dev/null +++ b/src/structures/Card.astro @@ -0,0 +1,35 @@ +--- +import type { HTMLAttributes, HTMLTag } from 'astro/types' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> { + as?: HTMLTag +} + +const { href, as = href ? 'a' : 'div', ...rest } = Astro.props +--- + + + + + + diff --git a/src/structures/Carousel.astro b/src/structures/Carousel.astro new file mode 100644 index 000000000..1fa2e1c34 --- /dev/null +++ b/src/structures/Carousel.astro @@ -0,0 +1,106 @@ +--- +import Button from 'fulldev-ui/components/Button.astro' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props {} +--- + + + + + + + + + + + + diff --git a/src/structures/Code.astro b/src/structures/Code.astro new file mode 100644 index 000000000..a3c5d8c8a --- /dev/null +++ b/src/structures/Code.astro @@ -0,0 +1,53 @@ +--- +import type { ComponentProps } from 'astro/types' +import { Code as AstroCode } from 'astro:components' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends ComponentProps {} + +const { lang = 'astro', code, ...rest } = Astro.props +--- + + + + + + + + { + code && ( + + ) + } + + + diff --git a/src/structures/Container.astro b/src/structures/Container.astro new file mode 100644 index 000000000..5840700af --- /dev/null +++ b/src/structures/Container.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 +--- + + + + + + diff --git a/src/structures/Drawer.astro b/src/structures/Drawer.astro new file mode 100644 index 000000000..7bd771632 --- /dev/null +++ b/src/structures/Drawer.astro @@ -0,0 +1,80 @@ +--- +import type { ComponentProps, HTMLAttributes } from 'astro/types' +import Button from 'fulldev-ui/components/Button.astro' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props + extends HTMLAttributes<'aside'>, + Pick, 'variant' | 'size' | 'text' | 'icon'> { + id: string + icon: string +} + +const { id, variant = 'ghost', size = 'md', icon, text, ...rest } = Astro.props + +const slot = await Astro.slots.render('default') +const render = slot?.trim().length > 0 +--- + +{ + render && ( + + + + + + + + + + + ) +} + + diff --git a/src/structures/Group.astro b/src/structures/Group.astro new file mode 100644 index 000000000..f722dd9a0 --- /dev/null +++ b/src/structures/Group.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 +--- + + + + + + diff --git a/src/structures/Layout.astro b/src/structures/Layout.astro new file mode 100644 index 000000000..1d3f58054 --- /dev/null +++ b/src/structures/Layout.astro @@ -0,0 +1,34 @@ +--- +import type { ComponentProps, HTMLAttributes } from 'astro/types' +import Head from 'fulldev-ui/components/Head.astro' + +type Props = Omit, 'title'> & { + head?: ComponentProps +} + +const { head, ...rest } = Astro.props +--- + + + + + + + + + diff --git a/src/structures/Masonry.astro b/src/structures/Masonry.astro new file mode 100644 index 000000000..cf19ccc0f --- /dev/null +++ b/src/structures/Masonry.astro @@ -0,0 +1,42 @@ +--- +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 +--- + + + + + + diff --git a/src/structures/Matrix.astro b/src/structures/Matrix.astro new file mode 100644 index 000000000..5098252b5 --- /dev/null +++ b/src/structures/Matrix.astro @@ -0,0 +1,39 @@ +--- +import type { HTMLAttributes, HTMLTag } from 'astro/types' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends HTMLAttributes<'div'> { + as?: HTMLTag + size?: 'sm' | 'md' | 'lg' | undefined +} + +const { size = 'md', ...rest } = Astro.props +--- + + + + + + diff --git a/src/structures/Panel.astro b/src/structures/Panel.astro new file mode 100644 index 000000000..ce0b15d2a --- /dev/null +++ b/src/structures/Panel.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 +--- + + + + + + diff --git a/src/structures/Prose.astro b/src/structures/Prose.astro new file mode 100644 index 000000000..ac90de9f9 --- /dev/null +++ b/src/structures/Prose.astro @@ -0,0 +1,88 @@ +--- +import type { HTMLAttributes, HTMLTag } from 'astro/types' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends HTMLAttributes<'div'> { + as?: HTMLTag + align?: 'center' | 'middle' | 'columns' +} + +const { ...rest } = Astro.props +--- + + + + + + diff --git a/src/structures/Section.astro b/src/structures/Section.astro new file mode 100644 index 000000000..8bb0391ac --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/structures/Sidebar.astro b/src/structures/Sidebar.astro new file mode 100644 index 000000000..de72b863e --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/structures/Split.astro b/src/structures/Split.astro new file mode 100644 index 000000000..b9fc5abf8 --- /dev/null +++ b/src/structures/Split.astro @@ -0,0 +1,38 @@ +--- +import type { HTMLAttributes, HTMLTag } from 'astro/types' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends HTMLAttributes<'div'> { + as?: HTMLTag + align?: 'start' | 'center' | 'sticky' +} + +const { ...rest } = Astro.props +--- + + + + + + diff --git a/src/structures/Stack.astro b/src/structures/Stack.astro new file mode 100644 index 000000000..429aacbcf --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/structures/Writeup.astro b/src/structures/Writeup.astro new file mode 100644 index 000000000..40fec3e63 --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/structures/_Bento.astro b/src/structures/_Bento.astro new file mode 100644 index 000000000..a1c5e809c --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/utils/_archive/Childmorphic.ts b/src/utils/_archive/Childmorphic.ts deleted file mode 100644 index 0409b50a5..000000000 --- a/src/utils/_archive/Childmorphic.ts +++ /dev/null @@ -1,8 +0,0 @@ -// import type { AstroGlobal } from 'astro' - -// export type Childmorphic = { -// [Key in keyof C & string as -// | Lowercase -// | Capitalize -// | `${string}${Capitalize}`]?: C[Key] -// } diff --git a/src/utils/_archive/getAllCollections.ts b/src/utils/_archive/getAllCollections.ts deleted file mode 100644 index f5547ac7d..000000000 --- a/src/utils/_archive/getAllCollections.ts +++ /dev/null @@ -1,10 +0,0 @@ -// import type { CollectionKey } from 'astro:content' -// import { getCollection } from 'astro:content' - -// export const getAllCollections = async (names: CollectionKey[]) => { -// const promises = names.map((name) => getCollection(name)) -// const resolved = await Promise.all(promises) -// const flattened = resolved.flat() -// const filtered = flattened.filter(Boolean) -// return filtered -// } diff --git a/src/utils/_archive/getCollectionCascade.ts b/src/utils/_archive/getCollectionCascade.ts deleted file mode 100644 index aba39bab2..000000000 --- a/src/utils/_archive/getCollectionCascade.ts +++ /dev/null @@ -1,33 +0,0 @@ -// import { -// getCollection, -// type CollectionEntry, -// type CollectionKey, -// type ContentCollectionKey, -// type DataCollectionKey, -// } from 'astro:content' -// import { unflatten } from 'flat' -// import { objectify } from 'radash' -// import { mapValues } from 'remeda' - -// export type CollectionCascade = { -// [Key in ContentCollectionKey]: { -// [Key in CollectionEntry['slug']]: any -// } -// } & { -// [Key in DataCollectionKey]: { -// [Key in CollectionEntry['id']]: any -// } -// } - -// export const getCollectionCascade = async (collectionKeys: CollectionKey[]) => { -// const promises = collectionKeys.map((key) => getCollection(key)) -// const resolved = await Promise.all(promises) -// const flattened = resolved.flat() -// const object = objectify( -// flattened, -// ({ collection, slug, id }) => `${collection}.${slug || id}` -// ) -// const mapped = mapValues(object, (value) => value.data) -// const unflattened = unflatten(mapped) -// return unflattened as CollectionCascade -// } diff --git a/src/utils/_archive/getPathname.ts b/src/utils/_archive/getPathname.ts deleted file mode 100644 index e0503f5c9..000000000 --- a/src/utils/_archive/getPathname.ts +++ /dev/null @@ -1,18 +0,0 @@ -// import type { AstroGlobal } from 'astro' -// import type { CollectionEntry, ContentCollectionKey } from 'astro:content' - -// export const getPathname = ({ -// slug, -// collection, -// data, -// }: CollectionEntry): -// | AstroGlobal['url']['pathname'] -// | undefined => { -// if (!slug) return -// if (data.draft) return -// if (data.output === false) return -// if (collection === 'pages' && slug === 'index') return '/' -// if (collection === 'pages') return `/${slug}` -// if (slug === 'index') return `/${collection}` -// return `/${collection}/${slug}` -// } diff --git a/src/utils/_archive/staticPageSchema.ts b/src/utils/_archive/staticPageSchema.ts deleted file mode 100644 index b53084964..000000000 --- a/src/utils/_archive/staticPageSchema.ts +++ /dev/null @@ -1,124 +0,0 @@ -// import { -// getCollection, -// getEntry, -// z, -// type CollectionEntry, -// type CollectionKey, -// } from 'astro:content' -// import { flatten, unflatten } from 'flat' -// import { all, camel, construct, get, isString, mapValues } from 'radash' -// import { mapKeys, merge } from 'remeda' - -// interface Options { -// casing: boolean -// layouts: boolean -// references: boolean -// selfs: boolean -// } - -// const defaults: Options = { -// casing: true, -// layouts: true, -// references: true, -// selfs: true, -// } - -// const transformReferences = async (data: object) => -// await all( -// mapValues(flatten(data) as any, async (value) => { -// if (!isString(value)) return value -// const parts = (value as string).split(' ') -// const results = await all( -// parts.map(async (valuePart) => { -// if (!valuePart.startsWith('$')) return valuePart -// if (valuePart.startsWith('$self')) return valuePart - -// const reference = valuePart.split('.')[0].replace('$', '') -// const collection = reference.split('/')[0] -// const slug = reference.split('/').slice(1).join('/') -// const path = valuePart.split('.').slice(1).join('.') - -// if (collection && slug) { -// let response = await getEntry(collection as CollectionKey, slug) -// const result = get(response?.data, path) -// return result -// } else if (collection) { -// const response = await getCollection(collection as CollectionKey) -// const result = response?.map((entry: any) => get(entry?.data, path)) -// return result -// } - -// return valuePart -// }) -// ) -// if (results.length == 1) return results[0] -// return results.join(' ') -// }) -// ) - -// const transformLayouts = (data: object) => { -// const flat: any = flatten(data) -// let store: any = {} -// let i: number = 0 - -// const merged = mapKeys(flat, (key) => { -// if (!isString(key)) return key -// const parts = key.split('.') -// const result = parts.map((part) => { -// return part.replace(/^_+/, '') -// }) -// const filtered = result.filter(Boolean) -// const joined = filtered.join('.') -// return joined -// }) -// const nested = construct(merged) -// return nested -// } - -// const transformSelfs = (data: object) => { -// const flat = flatten(data) as any -// const mapped = mapValues(flat, (value) => { -// if (!isString(value)) return value -// const parts = (value as string).split(' ') -// const result = parts.map((part) => { -// if (!part.startsWith('$self')) return part -// const pathParts = part.split('.').slice(1) -// const camelCased = pathParts.map((part) => camel(part)) -// const path = camelCased.join('.') -// const result = get(data, path) -// return result ? result : part -// }) -// return result.join(' ') -// }) -// return unflatten(mapped) -// } - -// const transformCasing = (object: object) => { -// const flat = flatten(object) -// const mapped = mapKeys(flat, (key) => { -// if (!isString(key)) return key -// const parts = (key as string).split('.') -// const result = parts.map((part) => camel(part)) -// return result.join('.') -// }) -// return unflatten(mapped) -// } - -// export const pageSchema = (options: Partial = {}) => -// z.any().transform(async (data: CollectionEntry['data']) => { -// const { layouts, casing, references, selfs } = merge(defaults, options) - -// if (references) data = await transformReferences(data) -// // console.log('references', JSON.stringify(data, null, 2)) - -// if (layouts) data = transformLayouts(data) -// // console.log('layouts', data) - -// if (casing) data = transformCasing(data) -// // console.log('casing', data) - -// if (selfs) data = transformSelfs(data) -// // console.log('selfs', data) - -// return data -// }) diff --git a/src/utils/_archive/transform/transform.ts b/src/utils/_archive/transform/transform.ts deleted file mode 100644 index 16aa65be5..000000000 --- a/src/utils/_archive/transform/transform.ts +++ /dev/null @@ -1,25 +0,0 @@ -// import type { CollectionEntry, CollectionKey } from 'astro:content' -// import { transformCasing } from './transformCasing' -// import { transformReferences } from './transformReferences' -// import { transformSelfs } from './transformSelfs' -// import { transformUnderscores } from './transformUnderscores' - -// export const transform = async ( -// entry: CollectionEntry -// ): Promise => { -// // console.log('entry', entry.data) - -// entry = await transformReferences(entry) -// // console.log('references', entry) - -// entry = transformUnderscores(entry) -// // console.log('underscores', entry) - -// entry = transformCasing(entry) -// // console.log('casing', entry) - -// entry = transformSelfs(entry) -// // console.log('selfs', entry) - -// return entry -// } diff --git a/src/utils/_archive/transform/transformCasing.ts b/src/utils/_archive/transform/transformCasing.ts deleted file mode 100644 index c934a9477..000000000 --- a/src/utils/_archive/transform/transformCasing.ts +++ /dev/null @@ -1,24 +0,0 @@ -// import { flatten, unflatten } from 'flat' -// import { camel, isObject } from 'radash' -// import { isArray, isString, mapKeys } from 'remeda' - -// export const transformCasing = (data: any) => { -// if (!isObject(data) && !isArray(data)) return data - -// const flat: any = flatten(data) -// const transformedData = mapKeys(flat, (key) => { -// if (!isString(key)) return key -// const parts = (key as string).split('.') -// const result = parts.map((part) => { -// const leadingUnderscores = part.match(/^_+/) || [''] -// const withoutLeadingUnderscores = part.replace(/^_+/, '') -// const camelCased = camel(withoutLeadingUnderscores) -// const result = leadingUnderscores + camelCased -// return result -// }) -// return result.join('.') -// }) - -// const nested = unflatten(transformedData) -// return nested -// } diff --git a/src/utils/_archive/transform/transformReferences.ts b/src/utils/_archive/transform/transformReferences.ts deleted file mode 100644 index 830cf492c..000000000 --- a/src/utils/_archive/transform/transformReferences.ts +++ /dev/null @@ -1,54 +0,0 @@ -// import { getCollection, getEntry, type CollectionKey } from 'astro:content' -// import { flatten, unflatten } from 'flat' -// import { all, get, isString, mapValues } from 'radash' -// import { getPathname } from '../getPathname' -// import { transform } from './transform' - -// export const transformReferences = async (data: object): Promise => { -// const flat = flatten(data) -// const mappedValues = await all( -// mapValues(flat as any, async (value) => { -// if (!isString(value)) return value -// const parts = (value as string).split(' ') -// const mappedParts = await all( -// parts.map(async (valuePart) => { -// if (!valuePart.startsWith('$/')) return valuePart - -// const reference = valuePart.split('.')[0].replace('$/', '') -// const collection = reference.split('/')[0] -// const slug = reference.split('/').slice(1).join('/') -// const path = valuePart.split('.').slice(1).join('.') - -// if (collection && slug) { -// let response = await getEntry(collection as CollectionKey, slug) -// if (!response) -// throw new Error(`Entry not found: ${collection}/${slug}`) -// const transformed = await transform(response as any) -// const result = get(transformed?.data, path) -// if (!path) -// return { -// ...transformed?.data, -// pathname: getPathname(transformed), -// } -// return result ? result : valuePart -// } else if (collection) { -// const response = await getCollection(collection as CollectionKey) -// if (!response) -// throw new Error(`Entry not found: ${collection}/${slug}`) -// const mapped = response?.map(async (entry: any) => { -// const transformed = await transform(entry?.data) -// return get(transformed, path) -// }) -// const result = await all(mapped) -// return result ? result : valuePart -// } - -// return valuePart -// }) -// ) -// if (mappedParts.length == 1) return mappedParts[0] -// else return mappedParts.join(' ') -// }) -// ) -// return unflatten(mappedValues) -// } diff --git a/src/utils/_archive/transform/transformSelfs.ts b/src/utils/_archive/transform/transformSelfs.ts deleted file mode 100644 index cd5705e65..000000000 --- a/src/utils/_archive/transform/transformSelfs.ts +++ /dev/null @@ -1,20 +0,0 @@ -// import { flatten, unflatten } from 'flat' -// import { camel, get, isString, mapValues } from 'radash' - -// export const transformSelfs = (data: any): any => { -// const flat = flatten(data) as any -// const mapped = mapValues(flat, (value) => { -// if (!isString(value)) return value -// const parts = (value as string).split(' ') -// const result = parts.map((part) => { -// if (!part.startsWith('$.')) return part -// const pathParts = part.replace('$.', '').split('.') -// const camelCased = pathParts.map((part) => camel(part)) -// const path = 'data.' + camelCased.join('.') -// const result = get(data, path) -// return result ? result : part -// }) -// return result.join(' ') -// }) -// return unflatten(mapped) -// } diff --git a/src/utils/_archive/transform/transformUnderscores.ts b/src/utils/_archive/transform/transformUnderscores.ts deleted file mode 100644 index ce2bcc31a..000000000 --- a/src/utils/_archive/transform/transformUnderscores.ts +++ /dev/null @@ -1,19 +0,0 @@ -// import { flatten, unflatten } from 'flat' -// import { isString } from 'radash' -// import { mapKeys } from 'remeda' - -// export const transformUnderscores = (data: any): any => { -// const flat: any = flatten(data) -// const merged = mapKeys(flat, (key) => { -// if (!isString(key)) return key -// const parts = key.split('.') -// const result = parts.map((part) => { -// return part.replace(/^_+/, '') -// }) -// const filtered = result.filter(Boolean) -// const joined = filtered.join('.') -// return joined -// }) -// const nested = unflatten(merged) -// return nested -// } diff --git a/src/utils/cart.ts b/src/utils/cart.ts new file mode 100644 index 000000000..81863ece8 --- /dev/null +++ b/src/utils/cart.ts @@ -0,0 +1,27 @@ +import { slugify } from './slugify.ts' + +export const generateProductId = ( + slug: string, + variants?: string[] | undefined +): string => { + const slugified = slugify(slug) + + if (variants && variants.length > 0) + return `${slugified}--${variants.map((variant) => slugify(variant)).join('--')}` + + return slugified +} + +export const generateProductName = ( + title: string, + variants?: string[] | undefined +): string => { + if (variants && variants.length > 0) + return `${title} / ${variants.join(' / ')}` + + return title +} + +export const formatPrice = (price: number): string => { + return `€${price?.toFixed(2).replace('.', ',')}` +} diff --git a/src/utils/getHref.ts b/src/utils/getHref.ts new file mode 100644 index 000000000..7cc1ecb9b --- /dev/null +++ b/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}/` +} diff --git a/src/utils/mergeEntries.ts b/src/utils/mergeEntries.ts deleted file mode 100644 index cef69be2d..000000000 --- a/src/utils/mergeEntries.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { getEntry } from 'astro:content' -import { assign } from 'radash' - -export const mergeEntries = async (entry: any) => { - if (!entry) return entry - const { data, slug } = entry - const baseSettings = await getEntry('settings', 'base') - const enSettings = await getEntry('settings', 'en') - const deSettings = await getEntry('settings', 'de') - const frSettings = await getEntry('settings', 'fr') - const pageSettings = data.settings && (await getEntry(data.settings)) - const i18nSettings = data.i18n && (await getEntry(data.i18n)) - - let merged = {} - merged = assign(merged, baseSettings?.data ?? {}) - slug?.startsWith('en') && (merged = assign(merged, enSettings?.data ?? {})) - slug?.startsWith('de') && (merged = assign(merged, deSettings?.data ?? {})) - slug?.startsWith('fr') && (merged = assign(merged, frSettings?.data ?? {})) - merged = assign(merged, i18nSettings?.data ?? {}) - merged = assign(merged, pageSettings?.data ?? {}) - merged = assign(merged, data) - - const newEntry = { - ...entry, - data: merged, - } - return newEntry -} diff --git a/src/utils/slugify.ts b/src/utils/slugify.ts new file mode 100644 index 000000000..e1fda3dbc --- /dev/null +++ b/src/utils/slugify.ts @@ -0,0 +1,6 @@ +export const slugify = (input: string): string => { + return input + .toLowerCase() + .replace(/[^a-z0-9]+/g, '-') + .replace(/^-+|-+$/g, '') +} diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 000000000..522c1ef6a --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,5 @@ +import { vitePreprocess } from '@astrojs/svelte'; + +export default { + preprocess: vitePreprocess(), +} diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 000000000..630dab39d --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,72 @@ +import tailwindcssScrollbar from 'tailwind-scrollbar' +import type { Config } from 'tailwindcss' +import tailwindcssAnimate from 'tailwindcss-animate' + +export default { + darkMode: ['class'], + content: [ + './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', + 'node_modules/fulldev-ui/src/**/*.astro', + ], + theme: { + container: { + screens: ['1536px'], + }, + extend: { + spacing: { + 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))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + // hover: 'hsl(var(--primary) / 85%)', + hover: 'hsl(var(--primary) / 75%)', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + hover: 'hsl(var(--secondary) / 75%)', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + hover: 'hsl(var(--muted) / 75%)', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + hover: 'hsl(var(--accent) / 75%)', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + hover: 'hsl(var(--card) / 75%)', + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', + }, + }, + borderRadius: { + lg: `var(--radius)`, + md: `calc(var(--radius) - 2px)`, + sm: 'calc(var(--radius) - 4px)', + }, + borderColor: { + DEFAULT: 'hsl(var(--border))', + }, + }, + }, + plugins: [tailwindcssAnimate, tailwindcssScrollbar({ nocompatible: true })], +} satisfies Config diff --git a/tsconfig.json b/tsconfig.json index 7c119d37d..27a4e2617 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,15 +1,12 @@ { - "extends": "astro/tsconfigs/strict", + "extends": "astro/tsconfigs/strictest", + "include": ["src", "astro.config.ts", "virtual.d.ts"], "compilerOptions": { - "jsx": "preserve", + "module": "NodeNext", + "moduleResolution": "NodeNext", "baseUrl": ".", "paths": { - "fulldev-ui/*": [ - "src/*" - ] + "fulldev-ui/*": ["src/*"], } }, - "exclude": [ - "dist" - ] } \ No newline at end of file diff --git a/virtual.d.ts b/virtual.d.ts new file mode 100644 index 000000000..8c009ed84 --- /dev/null +++ b/virtual.d.ts @@ -0,0 +1,5 @@ +declare module 'virtual:fulldev-ui/config' { + import type { Config } from 'fulldev-ui/integration' + const content: Config + export default content +}
I'm a live preview`} /> + +## Usage in markdown + +Thanks to [this great plugin](https://github.com/mattjennings/astro-live-code) you can also use it directly in markdown files. + +The following code will translate to the example at the top of this page: + +````html +```astro live +I'm a live preview +``` +```` diff --git a/src/content/pages/docs/structures/container.mdx b/src/content/pages/docs/structures/container.mdx new file mode 100644 index 000000000..606c24bf2 --- /dev/null +++ b/src/content/pages/docs/structures/container.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Container +description: Sets a max-width, padding and centers the content +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/drawer.mdx b/src/content/pages/docs/structures/drawer.mdx new file mode 100644 index 000000000..60637f417 --- /dev/null +++ b/src/content/pages/docs/structures/drawer.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Drawer +description: A panel that slides out from the side of the screen +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the Header blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/group.mdx b/src/content/pages/docs/structures/group.mdx new file mode 100644 index 000000000..e029447d0 --- /dev/null +++ b/src/content/pages/docs/structures/group.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Group +description: Group buttons and similar components +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/layout.mdx b/src/content/pages/docs/structures/layout.mdx new file mode 100644 index 000000000..c6aebe59b --- /dev/null +++ b/src/content/pages/docs/structures/layout.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Container +description: Sets a head, body and some base styles +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the layouts for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/masonry.mdx b/src/content/pages/docs/structures/masonry.mdx new file mode 100644 index 000000000..0d153d984 --- /dev/null +++ b/src/content/pages/docs/structures/masonry.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Masonry +description: Places items like cards in a masonry layout +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/matrix.mdx b/src/content/pages/docs/structures/matrix.mdx new file mode 100644 index 000000000..cdce5e31b --- /dev/null +++ b/src/content/pages/docs/structures/matrix.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Matrix +description: Places items like cards in a grid +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/panel.mdx b/src/content/pages/docs/structures/panel.mdx new file mode 100644 index 000000000..39507c239 --- /dev/null +++ b/src/content/pages/docs/structures/panel.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Panel +description: A box with a border, padding and rounded corners used for sections +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/prose.mdx b/src/content/pages/docs/structures/prose.mdx new file mode 100644 index 000000000..4b75ded1a --- /dev/null +++ b/src/content/pages/docs/structures/prose.mdx @@ -0,0 +1,33 @@ +--- +_block: Content7 +title: Prose +description: Applies styling to child components +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +```astro live +--- +import Prose from 'fulldev-ui/structures/Prose.astro' +--- + + + Welcome to Our Blog + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia + odio vitae vestibulum vestibulum. + + + Key Features + + Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + + + Simple and elegant design + Responsive layout + Easy customization + + +``` diff --git a/src/content/pages/docs/structures/section.mdx b/src/content/pages/docs/structures/section.mdx new file mode 100644 index 000000000..3f4535b0b --- /dev/null +++ b/src/content/pages/docs/structures/section.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Section +description: Sets vertical padding and some base styles +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/stack.mdx b/src/content/pages/docs/structures/stack.mdx new file mode 100644 index 000000000..526318912 --- /dev/null +++ b/src/content/pages/docs/structures/stack.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Stack +description: Places items like cards in a horizontal or vertical stack +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/docs/structures/writeup.mdx b/src/content/pages/docs/structures/writeup.mdx new file mode 100644 index 000000000..0a8a58b51 --- /dev/null +++ b/src/content/pages/docs/structures/writeup.mdx @@ -0,0 +1,15 @@ +--- +_block: Content7 +title: Writeup +description: Applies styling to child components, similar to Prose +--- + +import Props from 'fulldev-ui/components/docs/Props.astro' + +## Props + + + +## Examples + +Please reference the blocks for examples on how to use the wrapper components. diff --git a/src/content/pages/index.mdx b/src/content/pages/index.mdx index 87835c12e..db3a9e0f1 100644 --- a/src/content/pages/index.mdx +++ b/src/content/pages/index.mdx @@ -1,66 +1,52 @@ --- -seo: - title: Fulldev UI - Astro component and block library, open-source - description: Make websites rapidly with pre-built components and blocks. - image: /images/og-image.png +_schema: page +_block: Hero1 -sections: - hero: - _bookshop_name: Hero - color: brand - badge: - as: a - text: We just released our biggest update yet 🎉 - href: https://discord.gg/vXZqMbadm8 - heading: The Astro UI library to build content sites - text: Make websites with prebuilt components and blocks - buttons: - - text: Get Started - href: /overview/installation - - text: GitHub - href: https://github.com/fulldotdev/ui - target: _blank - icon: brand-github +title: Fulldev UI - Astro component and block library, open-source +description: Make websites rapidly with pre-built components and blocks. +heading: Build complete websites with this Astro UI library +paragraph: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation. +buttons: + - text: Get Started + href: /docs/ + - text: GitHub + href: https://github.com/fulldotdev/ui + icon: brand-github + target: _blank - blocks: - _bookshop_name: Content - color: brand - label: Blocks +sections: + - _block: Content2 + tagline: Blocks heading: Use pre-built blocks with just props - text: we created a great gallery of blocks to build content sites with a modern look and feel, all of our blocks are build with components from the library to achieve a consistent look. - image: /images/block-code.png - reverse: odd + paragraph: We created a great gallery of blocks to build content sites with a modern look and feel, all of our blocks are build with components from the library to achieve a consistent look. + image: + src: /images/block-code.png buttons: - - href: /blocks + - href: /docs/blocks/ icon: layout text: View blocks + variant: secondary - components: - _bookshop_name: Content - color: brand - label: Components + - _block: Content2 + tagline: Components heading: Or build your own, with easy to use components - text: our rich set of components make it easy to build your own blocks with great customizability through props and global theming. - image: /images/component-code.png - reverse: odd + paragraph: Our rich set of components make it easy to build your own blocks with great customizability through props and global theming. + image: + src: /images/component-code.png buttons: - - href: /base/badge + - text: View components + href: /docs/components/ icon: code - text: View components + variant: secondary - cta: - _bookshop_name: Cta - size: lg - variant: primary + - _block: Cta1 heading: Build content websites in a fraction of time - text: A library of components and blocks to build content sites, fast. + paragraph: A library of components and blocks to build content sites, fast. buttons: - text: Get Started - href: /overview/installation - color: brand + href: /docs/ - text: Github href: https://github.com/fulldotdev/ui - target: _blank icon: brand-github - color: brand + target: _blank --- diff --git a/src/content/pages/overview/frameworks.mdx b/src/content/pages/overview/frameworks.mdx deleted file mode 100644 index 6c2831153..000000000 --- a/src/content/pages/overview/frameworks.mdx +++ /dev/null @@ -1,198 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -# Frameworks - -Fulldev UI is written in vanilla CSS and .astro files. It is framework agnostic. - -## JS frameworks - -All styles in Fulldev UI use regular CSS and classes. Classes use the following naming convention: - -- Component classes are the same as the component name, like `button` for ``. -- Prop classes have the prop name as prefix, like `variant-primary` for ``. -- If a prop is a boolean the class is added without a prefix, like `contrast`. - -This means you can apply Fulldev UI styles to any framework component as follows: - -```astro live ---- -import Button from 'fulldev-ui/components/Button.astro' ---- - - Button - Button -``` - -## CSS frameworks - -A TailwindCSS plugin and UnoCSS preset is available. - -### TailwindCSS - -In your `tailwind.config.ts` add the following: - -```ts -// tailwind.config.ts -import fulldevUI from 'fulldev-ui/tailwind' - -export default { - plugins: [fulldevUI], -} -``` - -In your `astro.config.ts` add the following: - -```ts -// astro.config.ts -import tailwind from '@astrojs/tailwind' - -export default defineConfig({ - integrations: [ - tailwind({ - // Disable injecting styles, import manually instead - applyBaseStyles: false, - }), - ], -}) -``` - -Import the css file file below anywhere in your project. - -```css -@tailwind base layer(base); -@tailwind components; -@tailwind utilities; -``` - -### UnoCSS - -In your `uno.config.ts` add the following: - -```ts -// uno.config.ts -import fulldevUI from 'fulldev-ui/unocss' - -export default defineConfig({ - injectReset: false, - presets: [fulldevUI], -}) -``` - -Do not use `injectReset` when using the UnoCSS preset, as it will conflict with the reset provided by Fulldev UI. If you do want a style reset, be sure to import it in the `base` layer, similar to the TailwindCSS example above. - -## Utility classes - -The following classes are available when using the Tailwind plugin or UnoCSS preset. - -### Spacing - -The following spacing classes are added to your tailwind/uno config. - -You can use them like `p-space-1`, `m-space-1`, `h-space-1`, `w-space-1`, etc. - -```ts -spacing: { - 'space-1': 'var(--space-1)', - 'space-2': 'var(--space-2)', - 'space-3': 'var(--space-3)', - 'space-4': 'var(--space-4)', - 'space-5': 'var(--space-5)', - 'space-6': 'var(--space-6)', - 'space-7': 'var(--space-7)', -}, -``` - -### Font size - -The following spacing classes are added to your tailwind/uno config. - -You can use them like `text-1`, `text-2`, `text-3`, etc. - -```ts -fontSize: { - 1: 'var(--text-1)', - 2: 'var(--text-2)', - 3: 'var(--text-3)', - 4: 'var(--text-4)', - 5: 'var(--text-5)', - 6: 'var(--text-6)', - 7: 'var(--text-7)', - 8: 'var(--text-8)', -} -``` - -### Border radius - -The following border radius classes are added to your tailwind/uno config. - -You can use them like `rounded-1`, `rounded-2`, `rounded-3`, etc. - -```ts -borderRadius: { - 1: 'var(--radius-1)', - 2: 'var(--radius-2)', - 3: 'var(--radius-3)', -} -``` - -### Color classes - -The following color classes are added to your tailwind/uno config. - -You can use them like `bg-color-1`, `text-base-2`, `border-base-6`, etc. - -```ts -colors: { - color: { - 1: 'var(--color-1)', - 2: 'var(--color-2)', - 3: 'var(--color-3)', - 4: 'var(--color-4)', - 5: 'var(--color-5)', - 6: 'var(--color-6)', - 7: 'var(--color-7)', - 8: 'var(--color-8)', - 9: 'var(--color-9)', - 10: 'var(--color-10)', - 11: 'var(--color-11)', - 12: 'var(--color-12)', - contrast: 'var(--color-contrast)', - background: 'var(--color-background)', - }, - base: { - 1: 'var(--color-base-1)', - 2: 'var(--color-base-2)', - 3: 'var(--color-base-3)', - 4: 'var(--color-base-4)', - 5: 'var(--color-base-5)', - 6: 'var(--color-base-6)', - 7: 'var(--color-base-7)', - 8: 'var(--color-base-8)', - 9: 'var(--color-base-9)', - 10: 'var(--color-base-10)', - 11: 'var(--color-base-11)', - 12: 'var(--color-base-12)', - contrast: 'var(--color-base-contrast)', - background: 'var(--color-base-background)', - }, - brand: { - 1: 'var(--color-brand-1)', - 2: 'var(--color-brand-2)', - 3: 'var(--color-brand-3)', - 4: 'var(--color-brand-4)', - 5: 'var(--color-brand-5)', - 6: 'var(--color-brand-6)', - 7: 'var(--color-brand-7)', - 8: 'var(--color-brand-8)', - 9: 'var(--color-brand-9)', - 10: 'var(--color-brand-10)', - 11: 'var(--color-brand-11)', - 12: 'var(--color-brand-12)', - contrast: 'var(--color-brand-contrast)', - background: 'var(--color-brand-background)', - } -} -``` diff --git a/src/content/pages/overview/installation.mdx b/src/content/pages/overview/installation.mdx deleted file mode 100644 index 961174d02..000000000 --- a/src/content/pages/overview/installation.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -import Link from 'fulldev-ui/components/Link.astro' - -# Installation - -Install fulldev-ui with your favorite package manager and you are ready to go. To get started with the integration see the integration page. - -```bash -pnpm i fulldev-ui -# or -bun i fulldev-ui -# or -yarn add fulldev-ui -# or -npm i fulldev-ui -``` diff --git a/src/content/pages/overview/integration.mdx b/src/content/pages/overview/integration.mdx deleted file mode 100644 index c032bacec..000000000 --- a/src/content/pages/overview/integration.mdx +++ /dev/null @@ -1,37 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -import Link from 'fulldev-ui/components/Link.astro' - -# Integration - -After installation you can generate your color palettes via an Astro integration. You can optionally add a custom css file and define custom colors and other theming options, see the theming page for more information. - -```ts -import { defineConfig } from 'astro/config' -import fulldev from 'fulldev-ui/integration' - -// https://astro.build/config -export default defineConfig({ - integrations: [ - fulldev({ - css: '/src/css/custom.css', - colors: { - theme: 'dark', - dark: { - background: '#111110', - base: '#6F6D66', - brand: '#F50', - }, - light: { - background: '#EEEEEC', - base: '#6F6D66', - brand: '#F50', - }, - }, - }), - ], -}) -``` diff --git a/src/content/pages/overview/introduction.mdx b/src/content/pages/overview/introduction.mdx deleted file mode 100644 index f783756f8..000000000 --- a/src/content/pages/overview/introduction.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -# Introduction - -Fulldev UI focuses on content websites rather than applications. - -##### Build entire websites with just components - -Fulldev UI is unique in that it introduces larger components to build entire pages, and even websites. Like a Section component that just works. - -##### Integrates with any JS / CSS framework - -Want to use Tailwind, or something else? You can overwrite all styles. Need an interactive framework component? Styles can be applied with one simple class. - -##### Automated colors, spacing and sizes - -Everything is carefully designed to be fully responsive. Component adapt to their environment, like a Heading being different in a Section than in a Card. You can also customize via simple props. diff --git a/src/content/pages/overview/theming.mdx b/src/content/pages/overview/theming.mdx deleted file mode 100644 index 2bfc03a4b..000000000 --- a/src/content/pages/overview/theming.mdx +++ /dev/null @@ -1,83 +0,0 @@ ---- -_layout: PostLayout -settings: components ---- - -import Link from 'fulldev-ui/components/Link.astro' - -# Theming - -## Colors - -The color theme is inspired by / compatible with Radix Colors. - -### Automatic setup - -With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the integration page for details. - -### Manual setup - -You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explenation see this page. - -```css -:root, -.theme-light { - --base-1: ; - --base-2: ; - --base-3: ; - --base-4: ; - --base-5: ; - --base-6: ; - --base-7: ; - --base-8: ; - --base-9: ; - --base-10: ; - --base-11: ; - --base-12: ; - --base-contrast: ; - - --brand-1: ; - --brand-2: ; - --brand-3: ; - --brand-4: ; - --brand-5: ; - --brand-6: ; - --brand-7: ; - --brand-8: ; - --brand-9: ; - --brand-10: ; - --brand-11: ; - --brand-12: ; - --brand-contrast: ; -} -``` - -### Dark theme - -Dark mode is set via a simple `.theme-dark` class. - -If you want to use a dark theme by default, remove the `:root` selector from the light theme and add it to the dark theme. - -Components in Fulldev UI that support theme switching have the `theme` prop available, which adds either the `theme-dark` or `theme-light` class - -```css -.theme-dark { - /* Same variables here as above */ -} -``` - -## Radius - -The `--border-radius` variable is a multiplier applied to all radius values. The default value is `1`. - -```css -:root { - --border-radius: 1; -} -``` - -## Other - -Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS. - -We plan to add more customization via variables later. diff --git a/src/content/pages/showcase.mdx b/src/content/pages/showcase.mdx index 76d4a3cfb..a5be8f421 100644 --- a/src/content/pages/showcase.mdx +++ b/src/content/pages/showcase.mdx @@ -1,62 +1,30 @@ --- -showcase: - # Add your project here below 👇 - - - heading: Van Dillen Antieke Bouwmaterialen - image: /showcase/van-dillen-antieke-bouwmaterialen.webp - href: 'https://vdabouwmaterialen.nl' - - heading: Anti Slip Profiles - image: /showcase/anti-slip-profiles.webp - href: 'https://antislipprofiles.com' - - heading: Fulldev UI - image: /showcase/fulldev-ui.webp - href: 'https://ui.full.dev' - - heading: The Gym Haren - image: /showcase/the-gym-haren.webp - href: 'https://thegymharen.nl' - - heading: Lavis Detailing - image: /showcase/lavis-detailing.webp - href: 'https://lavisdetailing.nl' - - heading: Leren Trainingsacteren - image: /showcase/leren-trainingsacteren.webp - href: 'https://lerentrainingsacteren.nl' - - heading: Miele Witgoedcenter Amsterdam - image: /showcase/miele-witgoedcenter-amsterdam.webp - href: 'https://witgoedcenteramsterdam.nl' - - heading: Sloepverhuur Bolsward - image: /showcase/sloepverhuur-bolsward.webp - href: 'https://sloepverhuurbolsward.nl' - - heading: Stark Vulcanising Products - image: /showcase/stark-vulcanising-products.webp - -_layout: PostLayout -settings: components +title: Showcase --- -import Masonry from 'fulldev-ui/components/Masonry.astro' -import Card from 'fulldev-ui/components/Card.astro' +import Card from 'fulldev-ui/structures/Card.astro' +import { getCollection } from 'astro:content' + +export const projects = ( + await getCollection( + 'pages', + ({ slug }) => slug.startsWith('showcase') && slug !== 'showcase' + ) +).map((p) => p.data) # Showcase Projects that are built with Fulldev UI. - - - {frontmatter.showcase.map((showcase) => ( - - ))} - diff --git a/src/content/pages/structure/_row.mdx b/src/content/pages/structure/_row.mdx deleted file mode 100644 index 6eee78f5d..000000000 --- a/src/content/pages/structure/_row.mdx +++ /dev/null @@ -1,23 +0,0 @@ ---- -_layout: BlockLayout -title: Row -description: Structures children in a horizontal row. This component sizes dynamically, the margin between a heading and a paragraph is smaller than the margin between a paragraph an image. ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Row from 'fulldev-ui/components/Row.astro' ---- - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/_wrap.mdx b/src/content/pages/structure/_wrap.mdx deleted file mode 100644 index 978414a38..000000000 --- a/src/content/pages/structure/_wrap.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: Wrap -description: Structures children onto one line or can wrap onto multiple lines. ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Wrap from 'fulldev-ui/components/Wrap.astro' ---- - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/carousel.mdx b/src/content/pages/structure/carousel.mdx deleted file mode 100644 index 33c3b6fb5..000000000 --- a/src/content/pages/structure/carousel.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Carousel ---- - -```astro live ---- -import Carousel from 'fulldev-ui/components/Carousel.astro' -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' ---- - - - - - - - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/column.mdx b/src/content/pages/structure/column.mdx deleted file mode 100644 index da37a9380..000000000 --- a/src/content/pages/structure/column.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Column ---- - -```astro live ---- -import Column from 'fulldev-ui/components/Column.astro' -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' ---- - - - - - - - -``` diff --git a/src/content/pages/structure/grid.mdx b/src/content/pages/structure/grid.mdx deleted file mode 100644 index c0a330a1a..000000000 --- a/src/content/pages/structure/grid.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Grid ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Grid from 'fulldev-ui/components/Grid.astro' -import Section from 'fulldev-ui/components/Section.astro' ---- - - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/masonry.mdx b/src/content/pages/structure/masonry.mdx deleted file mode 100644 index a458b7a8d..000000000 --- a/src/content/pages/structure/masonry.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Masonry ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Masonry from 'fulldev-ui/components/Masonry.astro' -import Section from 'fulldev-ui/components/Section.astro' ---- - - - - - - - - - - - - - - - - - - -``` diff --git a/src/content/pages/structure/split.mdx b/src/content/pages/structure/split.mdx deleted file mode 100644 index fcb8a10e4..000000000 --- a/src/content/pages/structure/split.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Split ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Split from 'fulldev-ui/components/Split.astro' ---- - - - - - - - -``` diff --git a/src/content/pages/structure/spread.mdx b/src/content/pages/structure/spread.mdx deleted file mode 100644 index 5f152608f..000000000 --- a/src/content/pages/structure/spread.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Spread ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Spread from 'fulldev-ui/components/Spread.astro' ---- - - - - - - - -``` diff --git a/src/content/pages/structure/stack.mdx b/src/content/pages/structure/stack.mdx deleted file mode 100644 index 505dfd082..000000000 --- a/src/content/pages/structure/stack.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -_layout: BlockLayout -settings: components - -title: Stack ---- - -```astro live ---- -import DecorativeBox from 'fulldev-ui/components/docs/DecorativeBox.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Stack from 'fulldev-ui/components/Stack.astro' ---- - - - - - - - - -``` diff --git a/src/content/pages/typography/heading.mdx b/src/content/pages/typography/heading.mdx deleted file mode 100644 index e87c82ca6..000000000 --- a/src/content/pages/typography/heading.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: Heading ---- - -# Heading - -import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro' - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -``` - -## Props - - - -## Examples - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Heading from 'fulldev-ui/components/Heading.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` diff --git a/src/content/pages/typography/link.mdx b/src/content/pages/typography/link.mdx deleted file mode 100644 index c51412579..000000000 --- a/src/content/pages/typography/link.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: Link ---- - -# Link - -import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro' - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -``` - -## Props - - - -## Examples - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -Link -Link -``` - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -Link -Link -Link -``` - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -Link -``` - -```astro live ---- -import Link from 'fulldev-ui/components/Link.astro' ---- - -Link -Link -``` diff --git a/src/content/pages/typography/list.mdx b/src/content/pages/typography/list.mdx deleted file mode 100644 index a36aeb554..000000000 --- a/src/content/pages/typography/list.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: List ---- - -# List - -import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro' - -```astro live ---- -import List from 'fulldev-ui/components/List.astro' ---- - - -``` - -## Props - - - -## Examples - -```astro live ---- -import List from 'fulldev-ui/components/List.astro' ---- - - - - -``` - -```astro live ---- -import List from 'fulldev-ui/components/List.astro' ---- - - - -``` - -```astro live ---- -import List from 'fulldev-ui/components/List.astro' ---- - - - -``` diff --git a/src/content/pages/typography/text.mdx b/src/content/pages/typography/text.mdx deleted file mode 100644 index e3cbbc4cd..000000000 --- a/src/content/pages/typography/text.mdx +++ /dev/null @@ -1,62 +0,0 @@ ---- -_layout: ComponentLayout -settings: components - -title: Text ---- - -# Text - -import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro' - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps over the lazy dog -``` - -## Props - - - -## Examples - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps over the lazy dog -The quick brown fox jumps over the lazy dog -The quick brown fox jumps over the lazy dog -``` - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps over the lazy dog -The quick brown fox jumps over the lazy dog -The quick brown fox jumps over the lazy dog -``` - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` - -```astro live ---- -import Text from 'fulldev-ui/components/Text.astro' ---- - -The quick brown fox jumps -The quick brown fox jumps -``` diff --git a/src/content/records/record.yml b/src/content/records/record.yml deleted file mode 100644 index d99e1b8f7..000000000 --- a/src/content/records/record.yml +++ /dev/null @@ -1 +0,0 @@ -title: Test diff --git a/src/content/settings/base.yml b/src/content/settings/base.yml deleted file mode 100644 index 265bdfa5e..000000000 --- a/src/content/settings/base.yml +++ /dev/null @@ -1,63 +0,0 @@ -seo: - image: /images/og-image.png - -code: - head: | - - -header: - heading: Fulldev UI - variant: base - links: - - text: Docs - href: /overview/introduction - - text: Components - href: /typography/heading - - text: Blocks - href: /blocks - - text: Showcase - href: /showcase - search: - icon: search - variant: soft - buttons: - - href: https://github.com/fulldotdev/ui - target: _blank - aria-label: GitHub - icon: brand-github - - href: https://discord.gg/vXZqMbadm8 - target: _blank - aria-label: Discord - icon: brand-discord - drawer: - - links: - - text: Docs - href: /overview/introduction - - text: Components - href: /typography/heading - - text: Blocks - href: /blocks - - heading: Overview - links: - - text: Introduction - href: /overview/introduction - - text: Installation - href: /overview/installation - - text: Integration - href: /overview/integration - - text: Theming - href: /overview/theming - - text: Frameworks - href: /overview/frameworks - - text: Showcase - href: /showcase - - heading: Typography - folder: typography - - heading: Base - folder: base - - heading: Structure - folder: structure diff --git a/src/content/settings/components.yml b/src/content/settings/components.yml deleted file mode 100644 index d26552028..000000000 --- a/src/content/settings/components.yml +++ /dev/null @@ -1,29 +0,0 @@ -sidebar: - - heading: Overview - links: - - text: Introduction - href: /overview/introduction - - text: Installation - href: /overview/installation - - text: Integration - href: /overview/integration - - text: Theming - href: /overview/theming - - text: Frameworks - href: /overview/frameworks - - text: Showcase - href: /showcase - - heading: Typography - folder: typography - - heading: Base - folder: base - - heading: Structure - folder: structure - -toc: - - heading: On this page - links: - - text: Props - href: /overview/introduction - - text: Examples - href: /overview/installation diff --git a/src/css/color.css b/src/css/color.css deleted file mode 100644 index 98636e1dc..000000000 --- a/src/css/color.css +++ /dev/null @@ -1,168 +0,0 @@ -.theme-light, -.theme-light * { - color-scheme: light; -} - -.theme-dark, -.theme-dark * { - color-scheme: dark; -} - -:where(:root), -:where(.theme-light), -:where(.theme-dark), -.color-base, -.color-base - *:where(:not([class*='color-']):not(.color-base [class*='color-'] *)) { - --color-1: var(--base-1); - --color-2: var(--base-2); - --color-3: var(--base-3); - --color-4: var(--base-4); - --color-5: var(--base-5); - --color-6: var(--base-6); - --color-7: var(--base-7); - --color-8: var(--base-8); - --color-9: var(--base-9); - --color-10: var(--base-10); - --color-11: var(--base-11); - --color-12: var(--base-12); - - --color-a1: var(--base-a1, var(--base-1)); - --color-a2: var(--base-a2, var(--base-2)); - --color-a3: var(--base-a3, var(--base-3)); - --color-a4: var(--base-a4, var(--base-4)); - --color-a5: var(--base-a5, var(--base-5)); - --color-a6: var(--base-a6, var(--base-6)); - --color-a7: var(--base-a7, var(--base-7)); - --color-a8: var(--base-a8, var(--base-8)); - --color-a9: var(--base-a9, var(--base-9)); - --color-a10: var(--base-a10, var(--base-10)); - --color-a11: var(--base-a11, var(--base-11)); - --color-a12: var(--base-a12, var(--base-12)); - - --color-contrast: var(--base-contrast); - --color-background: var(--base-background); -} - -.color-brand, -.color-brand - *:where(:not([class*='color-']):not(.color-brand [class*='color-'] *)) { - --color-1: var(--brand-1); - --color-2: var(--brand-2); - --color-3: var(--brand-3); - --color-4: var(--brand-4); - --color-5: var(--brand-5); - --color-6: var(--brand-6); - --color-7: var(--brand-7); - --color-8: var(--brand-8); - --color-9: var(--brand-9); - --color-10: var(--brand-10); - --color-11: var(--brand-11); - --color-12: var(--brand-12); - - --color-a1: var(--brand-a1, var(--brand-1)); - --color-a2: var(--brand-a2, var(--brand-2)); - --color-a3: var(--brand-a3, var(--brand-3)); - --color-a4: var(--brand-a4, var(--brand-4)); - --color-a5: var(--brand-a5, var(--brand-5)); - --color-a6: var(--brand-a6, var(--brand-6)); - --color-a7: var(--brand-a7, var(--brand-7)); - --color-a8: var(--brand-a8, var(--brand-8)); - --color-a9: var(--brand-a9, var(--brand-9)); - --color-a10: var(--brand-a10, var(--brand-10)); - --color-a11: var(--brand-a11, var(--brand-11)); - --color-a12: var(--brand-a12, var(--brand-12)); - - --color-contrast: var(--brand-contrast); - --color-background: var(--brand-background); -} - -.contrast, -.contrast * { - --color-9: var(--color-12); - --color-10: var(--color-12); - --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); -} */ diff --git a/src/css/custom.css b/src/css/custom.css index 7966013c6..13cf57172 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,69 +1,20 @@ -/* 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: ''; -} */ +@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900); -.header:not(.window .header) { - backdrop-filter: blur(10px); - border-color: var(--base-a6) !important; - background-color: rgba(17, 17, 16, 0.2) !important; +mark { + background-color: var(--brand-12) !important; + color: var(--brand-1) !important; } -.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: ''; - } +.rounded-full { + border-radius: 999px !important; } -mark { - background-color: var(--brand-12) !important; - color: var(--brand-1) !important; +.hero .heading, +.hero .lead { + max-width: 680px; + text-wrap: balance; } -.astro-code { - border: 1px solid var(--base-6); - border-radius: var(--radius-2); - background-color: var(--base-2) !important; - padding: var(--space-5); +.logo .image { + border-radius: 2px; } diff --git a/src/css/size.css b/src/css/size.css deleted file mode 100644 index af17c5922..000000000 --- a/src/css/size.css +++ /dev/null @@ -1,130 +0,0 @@ -:root { - --space-sm-1: 4px; - --space-sm-2: 6px; - --space-sm-3: 8px; - --space-sm-4: 12px; - --space-sm-5: 20px; - --space-sm-6: 40px; - --space-sm-7: 60px; - - --space-md-1: 5px; - --space-md-2: 8px; - --space-md-3: 11px; - --space-md-4: 14px; - --space-md-5: 28px; - --space-md-6: 56px; - --space-md-7: 84px; - - --space-lg-1: 6px; - --space-lg-2: 10px; - --space-lg-3: 14px; - --space-lg-4: 18px; - --space-lg-5: 36px; - --space-lg-6: 72px; - --space-lg-7: 120px; - - --text-sm-1: 12px; - --text-sm-2: 14px; - --text-sm-3: 14px; - --text-sm-4: 16px; - --text-sm-5: 18px; - --text-sm-6: 20px; - --text-sm-7: 24px; - --text-sm-8: 30px; - - --text-md-1: 12px; - --text-md-2: 14px; - --text-md-3: 16px; - --text-md-4: 18px; - --text-md-5: 20px; - --text-md-6: 24px; - --text-md-7: 30px; - --text-md-8: 36px; - - --text-lg-1: 14px; - --text-lg-2: 14px; - --text-lg-3: 18px; - --text-lg-4: 20px; - --text-lg-5: 24px; - --text-lg-6: 30px; - --text-lg-7: 36px; - --text-lg-8: 48px; -} - -@media (min-width: 768px) { - :root { - --text-sm-8: 36px; - --text-md-8: 48px; - --text-lg-8: 60px; - } -} - -.size-sm { - --space-1: var(--space-sm-1); - --space-2: var(--space-sm-2); - --space-3: var(--space-sm-3); - --space-4: var(--space-sm-4); - --space-5: var(--space-sm-5); - --space-6: var(--space-sm-6); - --space-7: var(--space-sm-7); - - --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1)); - --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2)); - --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3)); - - --text-1: var(--text-sm-1); - --text-2: var(--text-sm-2); - --text-3: var(--text-sm-3); - --text-4: var(--text-sm-4); - --text-5: var(--text-sm-5); - --text-6: var(--text-sm-6); - --text-7: var(--text-sm-7); - --text-8: var(--text-sm-8); -} - -:root, -.size-md { - --space-1: var(--space-md-1); - --space-2: var(--space-md-2); - --space-3: var(--space-md-3); - --space-4: var(--space-md-4); - --space-5: var(--space-md-5); - --space-6: var(--space-md-6); - --space-7: var(--space-md-7); - - --radius-1: calc(var(--border-radius, 1) * var(--space-md-1)); - --radius-2: calc(var(--border-radius, 1) * var(--space-md-2)); - --radius-3: calc(var(--border-radius, 1) * var(--space-md-3)); - - --text-1: var(--text-md-1); - --text-2: var(--text-md-2); - --text-3: var(--text-md-3); - --text-4: var(--text-md-4); - --text-5: var(--text-md-5); - --text-6: var(--text-md-6); - --text-7: var(--text-md-7); - --text-8: var(--text-md-8); -} - -.size-lg { - --space-1: var(--space-lg-1); - --space-2: var(--space-lg-2); - --space-3: var(--space-lg-3); - --space-4: var(--space-lg-4); - --space-5: var(--space-lg-5); - --space-6: var(--space-lg-6); - --space-7: var(--space-lg-7); - - --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1)); - --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2)); - --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3)); - - --text-1: var(--text-lg-1); - --text-2: var(--text-lg-2); - --text-3: var(--text-lg-3); - --text-4: var(--text-lg-4); - --text-5: var(--text-lg-5); - --text-6: var(--text-lg-6); - --text-7: var(--text-lg-7); - --text-8: var(--text-lg-8); -} diff --git a/src/css/space.css b/src/css/space.css deleted file mode 100644 index 46e44de34..000000000 --- a/src/css/space.css +++ /dev/null @@ -1,85 +0,0 @@ -.root + .root, -.root + .box, -.root + .masonry, -.root + .carousel, -.image + .root, -.icon + .root { - --space-auto: var(--space-6); -} - -.root + .group, -.root + .row, -.root + .wrap, -.root + .button, -.root + .price, -.root + .switch { - --space-auto: var(--space-5); -} - -.card - :is( - .root + .root, - .root + .box, - .root + .masonry, - .root + .carousel, - .image + .root, - .icon + .root, - .root + .group, - .root + .row, - .root + .wrap, - .root + .button, - .root + .price, - .root + .switch - ) { - --space-auto: var(--space-4); -} - -.root + .heading, -.root + .link, -.root + .paragraph, -.root + .text, -.root + .tagline, -.root + .input, -.root + .textarea, -.root + .select, -.root + .badge, -.root + .rating { - --space-auto: var(--space-4); -} - -.paragraph + .paragraph, -.text + .text, -.button + .button, -.input + .button { - --space-auto: var(--space-3); -} - -.root + .label, -.label + .input, -.label + .textarea, -.label + .select, -.icon + .icon { - --space-auto: var(--space-2); -} - -.rating + .text, -.text + .rating { - --space-auto: var(--space-1); -} - -.image + .root, -.icon + .root { - --space-auto: var(--space-6); -} - -.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); -// } */ diff --git a/src/css/styles.css b/src/css/styles.css deleted file mode 100644 index ca253ac1e..000000000 --- a/src/css/styles.css +++ /dev/null @@ -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; -} diff --git a/src/css/theme.css b/src/css/theme.css new file mode 100644 index 000000000..0e8cb8688 --- /dev/null +++ b/src/css/theme.css @@ -0,0 +1,62 @@ +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 0 0% 100%; + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + --ring: 20 14.3% 4.1%; + --radius: 0.5rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + } + + .dark { + --background: 20 14.3% 4.1%; + --foreground: 60 4.8% 95.9%; + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 0 0% 100%; + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + --ring: 24 5.7% 82.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + + color-scheme: dark; + } +} + +.astro-code { + @apply mt-4 rounded-md p-4 text-sm first:mt-0; +} diff --git a/src/env.d.ts b/src/env.d.ts index 5b0a7e0c5..55722dadf 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1,2 +1,3 @@ /// -/// \ No newline at end of file +/// +/// diff --git a/src/integration/generate-colors.ts b/src/integration/generate-colors.ts deleted file mode 100644 index 97d77b692..000000000 --- a/src/integration/generate-colors.ts +++ /dev/null @@ -1,637 +0,0 @@ -import * as RadixColors from '@radix-ui/colors' -import BezierEasing from 'bezier-easing' -import Color from 'colorjs.io' - -type ArrayOf12 = [T, T, T, T, T, T, T, T, T, T, T, T] -const arrayOf12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as const - -// prettier-ignore -const grayScaleNames = ['gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const; - -// prettier-ignore -const scaleNames = [...grayScaleNames, 'tomato', 'red', 'ruby', 'crimson', 'pink', -'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green', -'grass', 'brown', 'orange', 'sky', 'mint', 'lime', 'yellow', 'amber'] as const; - -const lightColors = Object.fromEntries( - scaleNames.map((scaleName) => [ - scaleName, - Object.values(RadixColors[`${scaleName}P3`]).map((str) => - new Color(str).to('oklch') - ), - ]) -) as Record<(typeof scaleNames)[number], ArrayOf12> - -const darkColors = Object.fromEntries( - scaleNames.map((scaleName) => [ - scaleName, - Object.values(RadixColors[`${scaleName}DarkP3`]).map((str) => - new Color(str).to('oklch') - ), - ]) -) as Record<(typeof scaleNames)[number], ArrayOf12> - -const lightGrayColors = Object.fromEntries( - grayScaleNames.map((scaleName) => [ - scaleName, - Object.values(RadixColors[`${scaleName}P3`]).map((str) => - new Color(str).to('oklch') - ), - ]) -) as Record<(typeof grayScaleNames)[number], ArrayOf12> - -const darkGrayColors = Object.fromEntries( - grayScaleNames.map((scaleName) => [ - scaleName, - Object.values(RadixColors[`${scaleName}DarkP3`]).map((str) => - new Color(str).to('oklch') - ), - ]) -) as Record<(typeof grayScaleNames)[number], ArrayOf12> - -export const generateRadixColors = ({ - appearance, - ...args -}: { - appearance: 'light' | 'dark' - accent: string - gray: string - background: string -}) => { - const allScales = appearance === 'light' ? lightColors : darkColors - const grayScales = appearance === 'light' ? lightGrayColors : darkGrayColors - const backgroundColor = new Color(args.background).to('oklch') - - const grayBaseColor = new Color(args.gray).to('oklch') - const grayScaleColors = getScaleFromColor( - grayBaseColor, - grayScales, - backgroundColor - ) - - const accentBaseColor = new Color(args.accent).to('oklch') - - let accentScaleColors = getScaleFromColor( - accentBaseColor, - allScales, - backgroundColor - ) - - // Enforce srgb for the background color - const backgroundHex = backgroundColor.to('srgb').toString({ format: 'hex' }) - - // Make sure we use the tint from the gray scale for when base is pure white or black - const accentBaseHex = accentBaseColor.to('srgb').toString({ format: 'hex' }) - if (accentBaseHex === '#000' || accentBaseHex === '#fff') { - accentScaleColors = grayScaleColors.map((color) => - color.clone() - ) as ArrayOf12 - } - - const [accent9Color, accentContrastColor] = getStep9Colors( - accentScaleColors, - accentBaseColor - ) - - accentScaleColors[8] = accent9Color - accentScaleColors[9] = getButtonHoverColor(accent9Color, [accentScaleColors]) - - // Limit saturation of the text colors - accentScaleColors[10].coords[1] = Math.min( - Math.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]), - accentScaleColors[10].coords[1] - ) - accentScaleColors[11].coords[1] = Math.min( - Math.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]), - accentScaleColors[11].coords[1] - ) - - const accentScaleHex = accentScaleColors.map((color) => - color.to('srgb').toString({ format: 'hex' }) - ) as ArrayOf12 - - const accentScaleWideGamut = accentScaleColors.map( - toOklchString - ) as ArrayOf12 - - const accentScaleAlphaHex = accentScaleHex.map((color) => - getAlphaColorSrgb(color, backgroundHex) - ) as ArrayOf12 - - const accentScaleAlphaWideGamutString = accentScaleHex.map((color) => - getAlphaColorP3(color, backgroundHex) - ) as ArrayOf12 - - const accentContrastColorHex = accentContrastColor - .to('srgb') - .toString({ format: 'hex' }) - - const grayScaleHex = grayScaleColors.map((color) => - color.to('srgb').toString({ format: 'hex' }) - ) as ArrayOf12 - - const grayScaleWideGamut = grayScaleColors.map( - toOklchString - ) as ArrayOf12 - - const grayScaleAlphaHex = grayScaleHex.map((color) => - getAlphaColorSrgb(color, backgroundHex) - ) as ArrayOf12 - - const grayScaleAlphaWideGamutString = grayScaleHex.map((color) => - getAlphaColorP3(color, backgroundHex) - ) as ArrayOf12 - - const accentSurfaceHex = - appearance === 'light' - ? getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.8) - : getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.5) - - const accentSurfaceWideGamutString = - appearance === 'light' - ? getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.8) - : getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.5) - - return { - accentScale: accentScaleHex, - accentScaleAlpha: accentScaleAlphaHex, - accentScaleWideGamut: accentScaleWideGamut, - accentScaleAlphaWideGamut: accentScaleAlphaWideGamutString, - accentContrast: accentContrastColorHex, - - grayScale: grayScaleHex, - grayScaleAlpha: grayScaleAlphaHex, - grayScaleWideGamut: grayScaleWideGamut, - grayScaleAlphaWideGamut: grayScaleAlphaWideGamutString, - - graySurface: appearance === 'light' ? '#ffffffcc' : 'rgba(0, 0, 0, 0.05)', - graySurfaceWideGamut: - appearance === 'light' - ? 'color(display-p3 1 1 1 / 80%)' - : 'color(display-p3 0 0 0 / 5%)', - - accentSurface: accentSurfaceHex, - accentSurfaceWideGamut: accentSurfaceWideGamutString, - - background: backgroundHex, - } -} - -function getStep9Colors( - scale: ArrayOf12, - accentBaseColor: Color -): [Color, Color] { - const referenceBackgroundColor = scale[0] - const distance = accentBaseColor.deltaEOK(referenceBackgroundColor) * 100 - - // If the accent base color is close to the page background color, it's likely - // white on white or black on black, so we want to return something that makes sense instead - if (distance < 25) { - return [scale[8], getTextColor(scale[8])] - } - - return [accentBaseColor, getTextColor(accentBaseColor)] -} - -function getButtonHoverColor(source: Color, scales: ArrayOf12[]) { - const [L, C, H] = source.coords - const newL = L > 0.4 ? L - 0.03 / (L + 0.1) : L + 0.03 / (L + 0.1) - const newC = L > 0.4 && !isNaN(H) ? C * 0.93 + 0 : C - const buttonHoverColor = new Color('oklch', [newL, newC, H]) - - // Find closest in-scale color to donate the chroma and hue. - // Especially useful when the source color is pure white or black, - // but the gray scale is tinted. - let closestColor = buttonHoverColor - let minDistance = Infinity - - scales.forEach((scale) => { - for (const color of scale) { - const distance = buttonHoverColor.deltaEOK(color) - if (distance < minDistance) { - minDistance = distance - closestColor = color - } - } - }) - - buttonHoverColor.coords[1] = closestColor.coords[1] - buttonHoverColor.coords[2] = closestColor.coords[2] - return buttonHoverColor -} - -function getScaleFromColor( - source: Color, - scales: Record>, - backgroundColor: Color -) { - let allColors: { scale: string; color: Color; distance: number }[] = [] - - Object.entries(scales).forEach(([name, scale]) => { - for (const color of scale) { - const distance = source.deltaEOK(color) - allColors.push({ scale: name, distance, color }) - } - }) - - allColors.sort((a, b) => a.distance - b.distance) - - // Remove non-unique scales - let closestColors = allColors.filter( - (color, i, arr) => - i === arr.findIndex((value) => value.scale === color.scale) - ) - - // If the next two closest colors are both grays, remove the second one until it’s not a gray anymore. - // This is because up next we will be comparing how close the two closest colors are to the source color, - // and since the grays are all extremely close to each other, we won’t get any useful data from the second - // closest color if it’s also a gray. - const grayScaleNamesStr = grayScaleNames as readonly string[] - const allAreGrays = closestColors.every((color) => - grayScaleNamesStr.includes(color.scale) - ) - if (!allAreGrays && grayScaleNamesStr.includes(closestColors[0].scale)) { - while (grayScaleNamesStr.includes(closestColors[1].scale)) { - closestColors.splice(1, 1) - } - } - - let colorA = closestColors[0] - let colorB = closestColors[1] - - // Light trigonometry ahead. - // - // We want to determine the color that is the closest to the source color. Sometimes it makes sense - // to proportionally mix the two closest colors together, but sometimes it is not useful at all. - // Color coords are spatial in 3D, however we can treat the data we have as a 2D projection that is good enough. - // - // Case 1: - // If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form - // a triangle where NEITHER angle A nor B are larger than 90 degrees, then we want to mix the 1st and the 2nd - // closest colors in the same proportion as distances AD and BD are to each other. Mixing the two would result - // in a color that would be closer to the source color than either of the two original closest colors. - // Example: source color is a desaturated blue, which is between "indigo" and "slate" scales. - // - // C ← Source color - // /|⟍ - // / | ⟍ - // b / | ⟍ a - // / | ⟍ - // / | ⟍ - // A --- D -------- B - // ↑ - // The color we want to use as the base, which is a mix of A and B. - // - // Case 2: - // If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form - // a triangle where EITHER angle A or B are larger than 90 degrees, then we don’t care about point B because it’s - // directionally the same as A, as mixing A and B can’t provide us with a color that is any closer to the source. - // Example: source color is a saturated blue, with "blue" being the closest scale, and "indigo" just being further. - // - // C ← Source color - // \⟍ - // \ ⟍ - // \ ⟍ a - // b \ ⟍ - // \ ⟍ - // A ------- B - // ↑ - // The color we want to use as the base, which is not influenced by B. - - // We’ll need all the lengths of the triangle sides, named after the angles they look at: - const a = colorB.distance - const b = colorA.distance - const c = colorA.color.deltaEOK(colorB.color) - - // We can get the ratios of AD to BD lengths with trigonometry using tangents, - // as the ratio of the tangents of the opposite angles will match. - const cosA = (b ** 2 + c ** 2 - a ** 2) / (2 * b * c) - const radA = Math.acos(cosA) - const sinA = Math.sin(radA) - - const cosB = (a ** 2 + c ** 2 - b ** 2) / (2 * a * c) - const radB = Math.acos(cosB) - const sinB = Math.sin(radB) - - // Tangent of angle C in the ACD triangle - const tanC1 = cosA / sinA - - // Tangent of angle C in the BCD triangle - const tanC2 = cosB / sinB - - // The ratio of the tangents corresponds to the ratio of the distances AD to BD - // In the end, it means how much of scale B we want to mix into scale A. - // If it’s "0" or less, this is an obtuse triangle from case 2, and we use just scale A. - const ratio = Math.max(0, tanC1 / tanC2) * 0.5 - - // The base scale is going to be a mix of the two closest scales, with the mix ratio we determined before - const scaleA = scales[colorA.scale] - const scaleB = scales[colorB.scale] - const scale = arrayOf12.map((i) => - new Color(Color.mix(scaleA[i], scaleB[i], ratio)).to('oklch') - ) as ArrayOf12 - - // Get the closest color from the pre-mixed scale we created - const baseColor = scale - .slice() - .sort((a, b) => source.deltaEOK(a) - source.deltaEOK(b))[0] - - // Note the chroma difference between the source color and the base color - const ratioC = source.coords[1] / baseColor.coords[1] - - // Modify hue and chroma of the scale to match the source color - scale.forEach((color) => { - color.coords[1] = Math.min(source.coords[1] * 1.5, color.coords[1] * ratioC) - color.coords[2] = source.coords[2] - }) - - // Light mode - if (scale[0].coords[0] > 0.5) { - const lightnessScale = scale.map(({ coords }) => coords[0]) - const backgroundL = Math.max(0, Math.min(1, backgroundColor.coords[0])) - const newLightnessScale = transposeProgressionStart( - backgroundL, - // Add white as the first "step" of the light scale - [1, ...lightnessScale], - lightModeEasing - ) - - // Remove the step we added - newLightnessScale.shift() - - newLightnessScale.forEach((lightness, i) => { - scale[i].coords[0] = lightness - }) - - return scale - } - - // Dark mode - let ease: typeof darkModeEasing = [...darkModeEasing] - const referenceBackgroundColorL = scale[0].coords[0] - const backgroundColorL = Math.max(0, Math.min(1, backgroundColor.coords[0])) - - // If background is lighter than step 0, we want to gradually change the easing to linear - const ratioL = backgroundColorL / referenceBackgroundColorL - - if (ratioL > 1) { - const maxRatio = 1.5 - - for (let i = 0; i < ease.length; i++) { - const metaRatio = (ratioL - 1) * (maxRatio / (maxRatio - 1)) - ease[i] = ratioL > maxRatio ? 0 : Math.max(0, ease[i] * (1 - metaRatio)) - } - } - - const lightnessScale = scale.map(({ coords }) => coords[0]) - const backgroundL = backgroundColor.coords[0] - const newLightnessScale = transposeProgressionStart( - backgroundL, - lightnessScale, - ease - ) - - newLightnessScale.forEach((lightness, i) => { - scale[i].coords[0] = lightness - }) - - return scale -} - -function getTextColor(background: Color) { - const white = new Color('oklch', [1, 0, 0]) - - if (Math.abs(white.contrastAPCA(background)) < 40) { - const [C, H] = background.coords - return new Color('oklch', [0.25, Math.max(0.08 * C, 0.04), H]) - } - - return white -} - -// target = background * (1 - alpha) + foreground * alpha -// alpha = (target - background) / (foreground - background) -// Expects 0-1 numbers for the RGB channels -function getAlphaColor( - targetRgb: number[], - backgroundRgb: number[], - rgbPrecision: number, - alphaPrecision: number, - targetAlpha?: number -) { - const [tr, tg, tb] = targetRgb.map((c) => Math.round(c * rgbPrecision)) - const [br, bg, bb] = backgroundRgb.map((c) => Math.round(c * rgbPrecision)) - - if ( - tr === undefined || - tg === undefined || - tb === undefined || - br === undefined || - bg === undefined || - bb === undefined - ) { - throw Error('Color is undefined') - } - - // Is the background color lighter, RGB-wise, than target color? - // Decide whether we want to add as little color or as much color as possible, - // darkening or lightening the background respectively. - // If at least one of the bits of the target RGB value - // is lighter than the background, we want to lighten it. - let desiredRgb = 0 - if (tr > br) { - desiredRgb = rgbPrecision - } else if (tg > bg) { - desiredRgb = rgbPrecision - } else if (tb > bb) { - desiredRgb = rgbPrecision - } - - const alphaR = (tr - br) / (desiredRgb - br) - const alphaG = (tg - bg) / (desiredRgb - bg) - const alphaB = (tb - bb) / (desiredRgb - bb) - - const isPureGray = [alphaR, alphaG, alphaB].every((alpha) => alpha === alphaR) - - // No need for precision gymnastics with pure grays, and we can get cleaner output - if (!targetAlpha && isPureGray) { - // Convert back to 0-1 values - const V = desiredRgb / rgbPrecision - return [V, V, V, alphaR] as const - } - - const clampRgb = (n: number) => - isNaN(n) ? 0 : Math.min(rgbPrecision, Math.max(0, n)) - const clampA = (n: number) => - isNaN(n) ? 0 : Math.min(alphaPrecision, Math.max(0, n)) - const maxAlpha = targetAlpha ?? Math.max(alphaR, alphaG, alphaB) - - const A = clampA(Math.ceil(maxAlpha * alphaPrecision)) / alphaPrecision - let R = clampRgb(((br * (1 - A) - tr) / A) * -1) - let G = clampRgb(((bg * (1 - A) - tg) / A) * -1) - let B = clampRgb(((bb * (1 - A) - tb) / A) * -1) - - R = Math.ceil(R) - G = Math.ceil(G) - B = Math.ceil(B) - - const blendedR = blendAlpha(R, A, br) - const blendedG = blendAlpha(G, A, bg) - const blendedB = blendAlpha(B, A, bb) - - // Correct for rounding errors in light mode - if (desiredRgb === 0) { - if (tr <= br && tr !== blendedR) { - R = tr > blendedR ? R + 1 : R - 1 - } - - if (tg <= bg && tg !== blendedG) { - G = tg > blendedG ? G + 1 : G - 1 - } - - if (tb <= bb && tb !== blendedB) { - B = tb > blendedB ? B + 1 : B - 1 - } - } - - // Correct for rounding errors in dark mode - if (desiredRgb === rgbPrecision) { - if (tr >= br && tr !== blendedR) { - R = tr > blendedR ? R + 1 : R - 1 - } - - if (tg >= bg && tg !== blendedG) { - G = tg > blendedG ? G + 1 : G - 1 - } - - if (tb >= bb && tb !== blendedB) { - B = tb > blendedB ? B + 1 : B - 1 - } - } - - // Convert back to 0-1 values - R = R / rgbPrecision - G = G / rgbPrecision - B = B / rgbPrecision - - return [R, G, B, A] as const -} - -// Important – I empirically discovered that this rounding is how the browser actually overlays -// transparent RGB bits over each other. It does NOT round the whole result altogether. -function blendAlpha( - foreground: number, - alpha: number, - background: number, - round = true -) { - if (round) { - return Math.round(background * (1 - alpha)) + Math.round(foreground * alpha) - } - - return background * (1 - alpha) + foreground * alpha -} - -function getAlphaColorSrgb( - targetColor: string, - backgroundColor: string, - targetAlpha?: number -) { - const [r, g, b, a] = getAlphaColor( - new Color(targetColor).to('srgb').coords, - new Color(backgroundColor).to('srgb').coords, - 255, - 255, - targetAlpha - ) - - return formatHex(new Color('srgb', [r, g, b], a).toString({ format: 'hex' })) -} - -function getAlphaColorP3( - targetColor: string, - backgroundColor: string, - targetAlpha?: number -) { - const [r, g, b, a] = getAlphaColor( - new Color(targetColor).to('p3').coords, - new Color(backgroundColor).to('p3').coords, - // Not sure why, but the resulting P3 alpha colors are blended in the browser most precisely when - // rounded to 255 integers too. Is the browser using 0-255 rather than 0-1 under the hood for P3 too? - 255, - 1000, - targetAlpha - ) - - return ( - new Color('p3', [r, g, b], a) - .toString({ precision: 4 }) - // Important: in non-browser environments colorjs.io outputs a different format for some reason - .replace('color(p3 ', 'color(display-p3 ') - ) -} - -// Format shortform hex to longform -function formatHex(str: string) { - if (!str.startsWith('#')) { - return str - } - - if (str.length === 4) { - const hash = str.charAt(0) - const r = str.charAt(1) - const g = str.charAt(2) - const b = str.charAt(3) - return hash + r + r + g + g + b + b - } - - if (str.length === 5) { - const hash = str.charAt(0) - const r = str.charAt(1) - const g = str.charAt(2) - const b = str.charAt(3) - const a = str.charAt(4) - return hash + r + r + g + g + b + b + a + a - } - - return str -} - -const darkModeEasing = [1, 0, 1, 0] as [number, number, number, number] -const lightModeEasing = [0, 2, 0, 2] as [number, number, number, number] - -export function transposeProgressionStart( - to: number, - arr: number[], - curve: [number, number, number, number] -) { - return arr.map((n, i, arr) => { - const lastIndex = arr.length - 1 - const diff = arr[0] - to - const fn = BezierEasing(...curve) - return n - diff * fn(1 - i / lastIndex) - }) -} - -export function transposeProgressionEnd( - to: number, - arr: number[], - curve: [number, number, number, number] -) { - return arr.map((n, i, arr) => { - const lastIndex = arr.length - 1 - const diff = arr[lastIndex] - to - const fn = BezierEasing(...curve) - return n - diff * fn(i / lastIndex) - }) -} - -// Convert to OKLCH string with percentage for the lightness channel -// https://github.com/radix-ui/themes/issues/420 -function toOklchString(color: Color) { - const L = +(color.coords[0] * 100).toFixed(1) - return color - .to('oklch') - .toString({ precision: 4 }) - .replace(/(\S+)(.+)/, `oklch(${L}%$2`) -} diff --git a/src/integration/index.ts b/src/integration/index.ts index d6e3de993..dfef10e5a 100644 --- a/src/integration/index.ts +++ b/src/integration/index.ts @@ -1,156 +1,182 @@ +import mdx from '@astrojs/mdx' +import sitemap from '@astrojs/sitemap' import type { AstroIntegration } from 'astro' -import merge from 'deepmerge' +import favicons from 'astro-favicons' +import liveCode from 'astro-live-code' +import robotsTxt from 'astro-robots-txt' +import { envField } from 'astro/config' +import fs from 'fs' +import yaml from 'js-yaml' +import path from 'path' +import { assign } from 'radash' +import tailwindcss from 'tailwindcss' +import tailwindcssNesting from 'tailwindcss/nesting' +import { loadEnv } from 'vite' import virtual from 'vite-plugin-virtual' -import { generateRadixColors } from './generate-colors' - -type Color = { - background: Parameters[0]['background'] - base: Parameters[0]['gray'] - brand: Parameters[0]['accent'] -} +import tailwindConfig from '../../tailwind.config.ts' interface Config { + favicon?: string + company?: string css?: string injectRoutes?: boolean - colors: { - theme: 'light' | 'dark' - light?: Color - dark?: Color + cloudcannon?: boolean + cart?: boolean + overrides?: { + [k: string]: string } } -const defaultConfig: Config = { - colors: { - theme: 'light', - light: { - background: '#fff', - base: '#000', - brand: '#000', - }, - }, -} export default function fulldevIntegration( - userConfig?: Partial + config: Partial | undefined ): AstroIntegration { - const config = merge(defaultConfig ?? {}, userConfig ?? {}) - return { name: '/integration', hooks: { 'astro:config:setup': async ({ - config: astroConfig, updateConfig, - injectScript, injectRoute, + injectScript, }) => { // ---------------------- - // Inject css + // Update config // ---------------------- - config?.css && injectScript('page-ssr', `import "${config?.css}";`) - - const generateCss = ( - defaultTheme: 'light' | 'dark', - theme: 'light' | 'dark', - color: Color - ) => { - const { background, base, brand } = color - const generated = generateRadixColors({ - background, - appearance: theme, - gray: base, - accent: brand, - }) - - const scaleToString = ( - scale: any, - palette: 'base' | 'brand', - alpha?: boolean - ) => - scale - .map( - (color: any, i: any) => - `--${palette}-${alpha ? 'a' : ''}${i + 1}: ${color};` - ) - .join('\n') - - const baseString = scaleToString(generated.grayScale, 'base', false) - const baseAlphaString = scaleToString( - generated.grayScaleAlpha, - 'base', - true - ) - const brandString = scaleToString( - generated.accentScale, - 'brand', - false - ) - const brandAlphaString = scaleToString( - generated.accentScaleAlpha, - 'brand', - true - ) - const brandContrastString = `--brand-contrast: ${generated.accentContrast};` - const baseContrastString = `--base-contrast: ${generated.accentContrast};` - const baseBackgroundString = `--base-background: ${generated.background};` - const brandBackgroundString = `--brand-background: ${generated.background};` - const colorSchemeString = `--color-scheme: ${theme};` - - const css = `${defaultTheme == theme ? ':root, ' : ''} .theme-${theme} { - ${baseString} - ${baseAlphaString} - ${baseContrastString} - ${baseBackgroundString} - ${brandString} - ${brandAlphaString} - ${brandContrastString} - ${brandBackgroundString} - ${colorSchemeString} - }` - return css - } - - const lightCss = - (config.colors.light && - generateCss(config.colors.theme, 'light', config.colors.light)) || - '' - const darkCss = - (config.colors.dark && - generateCss(config.colors.theme, 'dark', config.colors.dark)) || - '' - - const css = lightCss + '\n' + darkCss - updateConfig({ + site: loadEnv(process.env.NODE_ENV as any, process.cwd(), '').URL, + experimental: { + contentLayer: true, + env: { + schema: { + URL: envField.string({ + context: 'client', + access: 'public', + }), + STRIPE_RESTRICTED_KEY: envField.string({ + context: 'client', + access: 'public', + optional: true, + }), + STRIPE_SECRET_KEY: envField.string({ + context: 'server', + access: 'secret', + optional: true, + }), + }, + validateSecrets: true, + }, + }, + integrations: [ + mdx(), + sitemap(), + robotsTxt(), + liveCode({ + layout: '/src/structures/Code.astro', + }), + ], vite: { + resolve: { + alias: { + ...config?.overrides, + }, + }, plugins: [ virtual({ - 'virtual:astro/config': `export default ${JSON.stringify(astroConfig)}`, - 'virtual:fulldev-ui/config': `export default ${JSON.stringify(config)}`, - 'virtual:colors.css': css, + 'virtual:fulldev-ui/config': config ?? {}, }), ], css: { - preprocessorOptions: { - scss: { - api: 'modern', - }, + postcss: { + plugins: [tailwindcss(tailwindConfig), tailwindcssNesting], }, }, }, }) - injectScript('page-ssr', `import "virtual:colors.css";`) + // ---------------------- + // Inject Favicon + // ---------------------- + config?.favicon && + config?.company && + updateConfig({ + integrations: [ + favicons({ + path: 'favicon', + masterPicture: config.favicon, + appName: config.company, + appShortName: config.company, + appDescription: config.company, + }), + ], + }) // ---------------------- // Inject routes // ---------------------- - if (config.injectRoutes) { - const pages = import.meta.glob('/src/pages/**/*.astro') - !pages['/src/pages/[...page].astro'] && - injectRoute({ - pattern: '/[...page]', - entrypoint: 'fulldev-ui/[...page].astro', - }) + if (config?.injectRoutes) { + injectRoute({ + pattern: '/[...page]', + entrypoint: 'fulldev-ui/pages/[...page].astro', + }) + } + + // ---------------------- + // Inject css + // ---------------------- + config?.css && injectScript('page-ssr', `import "${config?.css}";`) + + // ---------------------- + // merge Cloudcannon configs + // ---------------------- + + // ---------------------- + // 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) + // } + // } + }, + 'astro:build:done': async () => { + if (config?.cloudcannon) { + const __dirname = path.dirname(new URL(import.meta.url).pathname) + const libDir = path.join(__dirname, '../../cloudcannon.config.yml') + const userDir = path.join(process.cwd(), 'cloudcannon.config.yml') + + const libConfig = yaml.load( + fs.readFileSync(path.resolve(libDir), 'utf8') + ) + + const userConfig = yaml.load( + fs.readFileSync(path.resolve(userDir), 'utf8') + ) + + const mergedConfig = assign(libConfig || {}, userConfig || {}) + const yamlContent = yaml.dump(mergedConfig) + + await fs.promises.writeFile(userDir, yamlContent, 'utf8') } }, }, diff --git a/src/integration/tailwind-plugin.ts b/src/integration/tailwind-plugin.ts deleted file mode 100644 index 2c3ff6115..000000000 --- a/src/integration/tailwind-plugin.ts +++ /dev/null @@ -1,80 +0,0 @@ -import plugin from 'tailwindcss/plugin' - -export default plugin(() => {}, { - theme: { - spacing: { - 'space-1': 'var(--space-1)', - 'space-2': 'var(--space-2)', - 'space-3': 'var(--space-3)', - 'space-4': 'var(--space-4)', - 'space-5': 'var(--space-5)', - 'space-6': 'var(--space-6)', - 'space-7': 'var(--space-7)', - }, - borderRadius: { - 1: 'var(--radius-1)', - 2: 'var(--radius-2)', - 3: 'var(--radius-3)', - }, - fontSize: { - 1: 'var(--text-1)', - 2: 'var(--text-2)', - 3: 'var(--text-3)', - 4: 'var(--text-4)', - 5: 'var(--text-5)', - 6: 'var(--text-6)', - 7: 'var(--text-7)', - 8: 'var(--text-8)', - }, - colors: { - color: { - 1: 'var(--color-1)', - 2: 'var(--color-2)', - 3: 'var(--color-3)', - 4: 'var(--color-4)', - 5: 'var(--color-5)', - 6: 'var(--color-6)', - 7: 'var(--color-7)', - 8: 'var(--color-8)', - 9: 'var(--color-9)', - 10: 'var(--color-10)', - 11: 'var(--color-11)', - 12: 'var(--color-12)', - contrast: 'var(--color-contrast)', - background: 'var(--color-background)', - }, - base: { - 1: 'var(--color-base-1)', - 2: 'var(--color-base-2)', - 3: 'var(--color-base-3)', - 4: 'var(--color-base-4)', - 5: 'var(--color-base-5)', - 6: 'var(--color-base-6)', - 7: 'var(--color-base-7)', - 8: 'var(--color-base-8)', - 9: 'var(--color-base-9)', - 10: 'var(--color-base-10)', - 11: 'var(--color-base-11)', - 12: 'var(--color-base-12)', - contrast: 'var(--color-base-contrast)', - background: 'var(--color-base-background)', - }, - brand: { - 1: 'var(--color-brand-1)', - 2: 'var(--color-brand-2)', - 3: 'var(--color-brand-3)', - 4: 'var(--color-brand-4)', - 5: 'var(--color-brand-5)', - 6: 'var(--color-brand-6)', - 7: 'var(--color-brand-7)', - 8: 'var(--color-brand-8)', - 9: 'var(--color-brand-9)', - 10: 'var(--color-brand-10)', - 11: 'var(--color-brand-11)', - 12: 'var(--color-brand-12)', - contrast: 'var(--color-brand-contrast)', - background: 'var(--color-brand-background)', - }, - }, - }, -}) diff --git a/src/integration/unocss-preset.ts b/src/integration/unocss-preset.ts deleted file mode 100644 index 170ce7c3c..000000000 --- a/src/integration/unocss-preset.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { definePreset, presetUno } from 'unocss' - -export default definePreset(() => { - return { - name: 'fullUI', - presets: [presetUno()], - theme: { - spacing: { - 'space-1': 'var(--space-1)', - 'space-2': 'var(--space-2)', - 'space-3': 'var(--space-3)', - 'space-4': 'var(--space-4)', - 'space-5': 'var(--space-5)', - 'space-6': 'var(--space-6)', - 'space-7': 'var(--space-7)', - }, - borderRadius: { - 1: 'var(--radius-1)', - 2: 'var(--radius-2)', - 3: 'var(--radius-3)', - }, - fontSize: { - 1: 'var(--text-1)', - 2: 'var(--text-2)', - 3: 'var(--text-3)', - 4: 'var(--text-4)', - 5: 'var(--text-5)', - 6: 'var(--text-6)', - 7: 'var(--text-7)', - 8: 'var(--text-8)', - }, - colors: { - color: { - 1: 'var(--color-1)', - 2: 'var(--color-2)', - 3: 'var(--color-3)', - 4: 'var(--color-4)', - 5: 'var(--color-5)', - 6: 'var(--color-6)', - 7: 'var(--color-7)', - 8: 'var(--color-8)', - 9: 'var(--color-9)', - 10: 'var(--color-10)', - 11: 'var(--color-11)', - 12: 'var(--color-12)', - contrast: 'var(--color-contrast)', - background: 'var(--color-background)', - }, - base: { - 1: 'var(--color-base-1)', - 2: 'var(--color-base-2)', - 3: 'var(--color-base-3)', - 4: 'var(--color-base-4)', - 5: 'var(--color-base-5)', - 6: 'var(--color-base-6)', - 7: 'var(--color-base-7)', - 8: 'var(--color-base-8)', - 9: 'var(--color-base-9)', - 10: 'var(--color-base-10)', - 11: 'var(--color-base-11)', - 12: 'var(--color-base-12)', - contrast: 'var(--color-base-contrast)', - background: 'var(--color-base-background)', - }, - brand: { - 1: 'var(--color-brand-1)', - 2: 'var(--color-brand-2)', - 3: 'var(--color-brand-3)', - 4: 'var(--color-brand-4)', - 5: 'var(--color-brand-5)', - 6: 'var(--color-brand-6)', - 7: 'var(--color-brand-7)', - 8: 'var(--color-brand-8)', - 9: 'var(--color-brand-9)', - 10: 'var(--color-brand-10)', - 11: 'var(--color-brand-11)', - 12: 'var(--color-brand-12)', - contrast: 'var(--color-brand-contrast)', - background: 'var(--color-brand-background)', - }, - }, - }, - } -}) diff --git a/src/layouts/BlockLayout.astro b/src/layouts/BlockLayout.astro deleted file mode 100644 index 525bca33b..000000000 --- a/src/layouts/BlockLayout.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Intro from 'fulldev-ui/blocks/Intro.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { Content } = await render() ---- - - - - - - diff --git a/src/layouts/BlockOverviewLayout.astro b/src/layouts/BlockOverviewLayout.astro deleted file mode 100644 index 06654cca8..000000000 --- a/src/layouts/BlockOverviewLayout.astro +++ /dev/null @@ -1,39 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Hero from 'fulldev-ui/blocks/Hero.astro' -import Block from 'fulldev-ui/components/Block.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data } = Astro.props ---- - - - - - - - diff --git a/src/layouts/ComponentLayout.astro b/src/layouts/ComponentLayout.astro deleted file mode 100644 index b202d94bb..000000000 --- a/src/layouts/ComponentLayout.astro +++ /dev/null @@ -1,23 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { render } = Astro.props -const { Content } = await render() ---- - - - - - - - - - diff --git a/src/layouts/JobsLayout.astro b/src/layouts/JobsLayout.astro deleted file mode 100644 index 1b8e9c260..000000000 --- a/src/layouts/JobsLayout.astro +++ /dev/null @@ -1,40 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import { getCollection } from 'astro:content' -import JobDeck from 'fulldev-ui/blocks/Jobs.astro' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, slug, ...rest } = Astro.props - -const childPages = ( - await getCollection('pages', (page: any) => page.slug.startsWith(slug)) -).map((page: any) => ({ href: `/${page.slug}/`, ...page.data })) ---- - - - - - - - - - - - - diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro deleted file mode 100644 index d8cf36e77..000000000 --- a/src/layouts/Layout.astro +++ /dev/null @@ -1,169 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Button from 'fulldev-ui/components/Button.astro' -import Head from 'fulldev-ui/components/Head.astro' -import Header from 'fulldev-ui/components/Header.astro' -import Sidebar from 'fulldev-ui/components/Sidebar.astro' -import Toc from 'fulldev-ui/components/Toc.astro' -import NavigationButtons from '../components/docs/NavigationButtons.astro' - -type Props = Partial> & { - class?: string - theme?: 'light' | 'dark' -} - -const { slug, data, theme, class: classes, render } = Astro.props -const { logo, header, footer, footers, channels, sidebar, toc } = data || {} - -const { headings } = render ? await render() : { headings: [] } - -const h2Headings = headings.filter((heading: any) => heading.depth === 2) ---- - - - - - - - - - - - - - - - - - - { - channels?.whatsapp && ( - - ) - } - - - - - - - diff --git a/src/layouts/OverviewLayout.astro b/src/layouts/OverviewLayout.astro deleted file mode 100644 index eda484f57..000000000 --- a/src/layouts/OverviewLayout.astro +++ /dev/null @@ -1,45 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { sections, blocks, children, references } = data -const { Content } = await render() ---- - - - - - - - - - - - - - - diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro new file mode 100644 index 000000000..f67525f24 --- /dev/null +++ b/src/layouts/Page.astro @@ -0,0 +1,63 @@ +--- +import type { ComponentProps } from 'astro/types' +import type { CollectionEntry } from 'astro:content' +import Block from 'fulldev-ui/components/Block.astro' +import Element from 'fulldev-ui/components/Element.astro' +import type { PageSchema } from 'fulldev-ui/schemas/page.ts' +import Layout from 'fulldev-ui/structures/Layout.astro' + +type Props = ComponentProps & + PageSchema & { + render: CollectionEntry<'pages'>['render'] + } + +const { + _block, + title, + heading, + description, + paragraph, + banner, + sidebar, + header, + sections, + footer, + render, + navigation, + ...rest +} = Astro.props + +const { Content, headings } = await render() +--- + + + + + + + + + {sections?.map((section) => )} + + + diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro deleted file mode 100644 index ed8111443..000000000 --- a/src/layouts/PageLayout.astro +++ /dev/null @@ -1,32 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { hero, section, sections, block, blocks } = data -const { Content } = await render() ---- - - - - - - - - - - - - - - diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro deleted file mode 100644 index ec8ae413b..000000000 --- a/src/layouts/PostLayout.astro +++ /dev/null @@ -1,32 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Intro from 'fulldev-ui/blocks/Intro.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { section, sections, blocks } = data -const { Content } = await render() ---- - - - - - - - - - - - - diff --git a/src/layouts/ProductLayout.astro b/src/layouts/ProductLayout.astro deleted file mode 100644 index 686a69635..000000000 --- a/src/layouts/ProductLayout.astro +++ /dev/null @@ -1,31 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content' -import Block from 'fulldev-ui/components/Block.astro' -import Blocks from 'fulldev-ui/components/Blocks.astro' -import Prose from 'fulldev-ui/components/experimental/Prose.astro' -import Section from 'fulldev-ui/components/Section.astro' -import Layout from 'fulldev-ui/layouts/Layout.astro' - -type Props = CollectionEntry<'pages'> - -const { data, render } = Astro.props -const { section, sections, block, blocks } = data -const { Content } = await render() ---- - - - - - - - - - - - - - - diff --git a/src/layouts/_Product.astro b/src/layouts/_Product.astro new file mode 100644 index 000000000..a2490deb1 --- /dev/null +++ b/src/layouts/_Product.astro @@ -0,0 +1,115 @@ + diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro index 2f3605c27..79c77add6 100644 --- a/src/pages/[...page].astro +++ b/src/pages/[...page].astro @@ -1,40 +1,49 @@ --- -import { getCollection } from 'astro:content' -import PageLayout from 'fulldev-ui/layouts/PageLayout.astro' -import { mapKeys } from 'radash' -import { mergeEntries } from '../utils/mergeEntries' +import { getCollection, getEntry } from 'astro:content' +import { getHref } from 'fulldev-ui/utils/getHref.ts' +import { dash, pascal } from 'radash' +import { mergeDeep } from 'remeda' export async function getStaticPaths() { - const pages = await getCollection('pages') - return pages.map((page) => ({ + const collection = await getCollection('pages') + return collection.map((entry) => ({ params: { - page: page.slug === 'index' ? undefined : page.slug, + page: getHref(entry.slug), }, - props: page, + props: entry, })) } -const { data, slug, ...rest } = Astro.props +const layoutName = Astro.props.data._layout ?? 'Page' +const layoutComponentName = pascal(layoutName) -const merged = (await mergeEntries({ data, slug })) as any +const layoutsComponents = { + ...import.meta.glob('/src/layouts/**/*.astro'), + ...import.meta.glob('../layouts/**/*.astro'), +} -const packageLayouts = import.meta.glob('../layouts/**/*.astro') -const userLayouts = import.meta.glob('/src/layouts/**/*.astro') +const layoutComponentPath = Object.keys(layoutsComponents).find( + (path) => path.split('/').pop()?.split('.')[0] === layoutComponentName +) -const mapBlockKeys = (blocks: any) => - mapKeys(blocks, (key: any) => key.split('/').pop().split('.').shift()) +const LayoutComponent = + layoutComponentPath && + (await (layoutsComponents[layoutComponentPath] as any)()).default -const components = { - ...mapBlockKeys(packageLayouts), - ...mapBlockKeys(userLayouts), -} +const layoutEntryName = dash(layoutName) +const layoutEntry = await getEntry('layouts', layoutEntryName) +const baseLayout = await getEntry('layouts', 'base') +const mergedLayouts = mergeDeep(baseLayout || {}, layoutEntry || {}) +const merged = mergeDeep(mergedLayouts, Astro.props) -const found = components[(merged.data._layout ?? 'PageLayout') as string] as any -const functioncomp = found && (await found()) -const Layout = functioncomp?.default ?? PageLayout +const { data, ...rest } = merged --- - +{ + LayoutComponent && ( + + ) +} diff --git a/src/pages/test.astro b/src/pages/test.astro new file mode 100644 index 000000000..d4f92294f --- /dev/null +++ b/src/pages/test.astro @@ -0,0 +1,16 @@ + + + + Sign up + diff --git a/src/schemas/base.ts b/src/schemas/base.ts deleted file mode 100644 index 937d9a780..000000000 --- a/src/schemas/base.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { z } from 'astro:content' - -export const button = z - .object({ - text: z.string(), - href: z.string(), - icon: z.string(), - }) - .partial() - .passthrough() - -export const link = z - .object({ - text: z.string(), - href: z.string(), - }) - .partial() - .passthrough() - -export const base = z - .object({ - tagline: z.string(), - icon: z.string(), - badge: z.string().or( - z.object({ - text: z.string(), - href: z.string(), - }) - ), - heading: z.string(), - text: z.string(), - html: z.string(), - image: z.string(), - images: z.string().array(), - rating: z.number().or( - z - .object({ - value: z.number(), - label: z.string(), - avatars: z.string().array(), - avatar: z.string(), - }) - .partial() - ), - button: button, - buttons: button.array(), - link: link, - links: link.array(), - list: z.string().array(), - avatar: z.string(), - price: z.number(), - input: z - .object({ - placeholder: z.string(), - submit: z.string(), - }) - .partial() - .passthrough(), - logos: z.string().array(), - logo: z.string(), - channels: z - .object({ - phone: z.string(), - email: z.string(), - address: z.string(), - }) - .partial() - .passthrough(), - socials: z - .object({ - facebook: z.string(), - instagram: z.string(), - }) - .partial() - .passthrough(), - hours: z - .object({ - monday: z.string(), - tuesday: z.string(), - wednesday: z.string(), - thursday: z.string(), - friday: z.string(), - saturday: z.string(), - sunday: z.string(), - }) - .partial() - .passthrough(), - }) - .partial() - .passthrough() diff --git a/src/schemas/block.ts b/src/schemas/block.ts index 6e70c3ec7..fef54f512 100644 --- a/src/schemas/block.ts +++ b/src/schemas/block.ts @@ -1,15 +1,32 @@ import { z } from 'astro:content' -import { base } from './base' -import { card } from './card' -import { pathSchema } from './utils' +import { cardSchema } from 'fulldev-ui/schemas/card.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' +import { pathSchema } from 'fulldev-ui/schemas/path.ts' -export const block = base +export const blockSchema = cardSchema .extend({ - columns: card.array(), - cards: z.array(card), - source: z.enum(['children', 'references']), - pages: pathSchema('pages').array(), - records: pathSchema('records').array(), + _block: z.string().optional(), + depth: z.union([z.literal(1), z.literal(2), z.literal(3)]).optional(), + themer: z.boolean().optional(), + search: z.boolean().optional(), + cart: z.boolean().optional(), + cards: cardSchema.array().optional(), + pages: pathSchema('pages').array().optional(), + records: pathSchema('records').array().optional(), + soldout: z.boolean().optional(), + variants: z.record(z.string(), z.string().array()).optional(), + categories: pathSchema('pages').array().optional(), + menus: menuSchema.array().optional(), + headings: z + .array( + z.object({ + depth: z.number(), + slug: z.string(), + text: z.string(), + }) + ) + .optional(), }) - .partial() - .passthrough() + .strict() + +export type BlockSchema = z.infer diff --git a/src/schemas/button.ts b/src/schemas/button.ts new file mode 100644 index 000000000..c0bb5c615 --- /dev/null +++ b/src/schemas/button.ts @@ -0,0 +1,17 @@ +import { z } from 'astro:content' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' + +export const buttonSchema = z + .object({ + icon: z.string().optional(), + image: imageSchema.optional(), + text: z.string().optional(), + href: z.string().optional(), + target: z.literal('_blank').optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + reverse: z.boolean().optional(), + variant: z.enum(['primary', 'secondary', 'outline', 'ghost']).optional(), + }) + .strict() + +export type ButtonSchema = z.infer diff --git a/src/schemas/card.ts b/src/schemas/card.ts index d41315cbf..af5c8d4a9 100644 --- a/src/schemas/card.ts +++ b/src/schemas/card.ts @@ -1,3 +1,43 @@ -import { base } from './base' +import { z } from 'astro:content' +import { buttonSchema } from 'fulldev-ui/schemas/button.ts' +import { channelSchema } from 'fulldev-ui/schemas/channel.ts' +import { chipSchema } from 'fulldev-ui/schemas/chip.ts' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' +import { linkSchema } from 'fulldev-ui/schemas/link.ts' +import { logoSchema } from 'fulldev-ui/schemas/logo.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' +import { proofSchema } from 'fulldev-ui/schemas/proof.ts' -export const card = base +export const cardSchema = z + .object({ + target: z.string().optional(), + href: z.string().optional(), + order: z.number().optional(), + dark: z.boolean().optional(), + text: z.string().optional(), + content: z.string().optional(), + tagline: z.string().optional(), + heading: z.string().optional(), + paragraph: z.string().optional(), + list: z.string().array().optional(), + socials: z.string().array().optional(), + logo: logoSchema.optional(), + link: linkSchema.optional(), + links: linkSchema.array().optional(), + menus: menuSchema.array().optional(), + chip: chipSchema.optional(), + badges: z.string().array().optional(), + button: buttonSchema.optional(), + buttons: buttonSchema.array().optional(), + image: imageSchema.optional(), + images: imageSchema.array().optional(), + channels: channelSchema.array().optional(), + proof: proofSchema.optional(), + price: z.number().optional(), + icon: z.string().optional(), + rating: z.number().optional(), + avatar: imageSchema.optional(), + avatars: imageSchema.array().optional(), + soldout: z.boolean().optional(), + }) + .strict() diff --git a/src/schemas/channel.ts b/src/schemas/channel.ts new file mode 100644 index 000000000..7fd62d6ae --- /dev/null +++ b/src/schemas/channel.ts @@ -0,0 +1,14 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Channel from 'fulldev-ui/components/Channel.astro' + +export const channelSchema = z + .object({ + icon: z.string().optional(), + heading: z.string().optional(), + text: z.string().optional(), + href: z.string().optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + variant: z.enum(['secondary', 'outline']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/checkbox.ts b/src/schemas/checkbox.ts new file mode 100644 index 000000000..b5aa7b835 --- /dev/null +++ b/src/schemas/checkbox.ts @@ -0,0 +1,13 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Checkbox from 'fulldev-ui/components/Checkbox.astro' + +export const checkboxSchema = z + .object({ + name: z.string().optional(), + label: z.string().optional(), + id: z.string().optional(), + value: z.string().optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/chip.ts b/src/schemas/chip.ts new file mode 100644 index 000000000..047ebd140 --- /dev/null +++ b/src/schemas/chip.ts @@ -0,0 +1,14 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Chip from 'fulldev-ui/components/Chip.astro' + +export const chipSchema = z + .object({ + icon: z.string().optional(), + text: z.string().optional(), + href: z.string().optional(), + target: z.literal('_blank').optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + variant: z.enum(['primary', 'secondary', 'outline']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/footer.ts b/src/schemas/footer.ts new file mode 100644 index 000000000..4d9a8d800 --- /dev/null +++ b/src/schemas/footer.ts @@ -0,0 +1,17 @@ +import { z } from 'astro:content' +import { channelSchema } from 'fulldev-ui/schemas/channel.ts' +import { logoSchema } from 'fulldev-ui/schemas/logo.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' + +export const footerSchema = z + .object({ + logo: logoSchema.optional(), + heading: z.string().optional(), + paragraph: z.string().optional(), + socials: z.string().url().array().optional(), + channels: channelSchema.array().optional(), + menus: menuSchema.array().optional(), + }) + .strict() + +export type FooterSchema = z.infer diff --git a/src/schemas/head.ts b/src/schemas/head.ts new file mode 100644 index 000000000..4d4bd67dc --- /dev/null +++ b/src/schemas/head.ts @@ -0,0 +1,17 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Head from 'fulldev-ui/components/Head.astro' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' + +export const headSchema = z + .object({ + title: z.string().optional(), + description: z.string().optional(), + image: imageSchema.optional(), + theme: z.enum(['light', 'dark', 'system']).optional(), + favicon: z.string().optional(), + company: z.string().optional(), + scripts: z.string().array().optional(), + code: z.string().optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/header.ts b/src/schemas/header.ts new file mode 100644 index 000000000..28f2387a8 --- /dev/null +++ b/src/schemas/header.ts @@ -0,0 +1,21 @@ +import { z } from 'astro:content' +import { buttonSchema } from 'fulldev-ui/schemas/button.ts' +import { linkSchema } from 'fulldev-ui/schemas/link.ts' +import { logoSchema } from 'fulldev-ui/schemas/logo.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' + +export const headerSchema = z + .object({ + logo: logoSchema.optional(), + heading: z.string().optional(), + links: linkSchema.array().optional(), + socials: z.string().array().optional(), + buttons: buttonSchema.array().optional(), + menus: menuSchema.array().optional(), + themer: z.boolean().optional(), + cart: z.boolean().optional(), + search: z.boolean().optional(), + }) + .strict() + +export type HeaderSchema = z.infer diff --git a/src/schemas/image.ts b/src/schemas/image.ts new file mode 100644 index 000000000..17b1b61ed --- /dev/null +++ b/src/schemas/image.ts @@ -0,0 +1,53 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Image from 'fulldev-ui/components/Image.astro' + +// const imagePath = z.preprocess((data: unknown) => { +// if (typeof data === 'string') { +// return data.split('/').pop() +// } +// return data +// }, reference('images')) + +// export const imageSchema = z +// .union([imagePath, z.object({}).passthrough()]) +// .pipe( +// z +// .object({ +// id: z +// .string() +// .refine(async (data) => await reference('images').parseAsync(data)), +// src: z.string(), +// alt: z.string(), +// width: z.number(), +// height: z.number(), +// }) +// .partial() +// .passthrough() +// ) +// .optional() + +// export const imageSchema = z +// .object({ +// src: z.string().optional(), +// alt: z.string().optional(), +// width: z.number().optional(), +// height: z.number().optional(), +// }) +// .strict() satisfies z.ZodType> + +const image = z + .object({ + src: z.string().optional(), + alt: z.string().optional(), + width: z.number().optional(), + height: z.number().optional(), + }) + .strict() satisfies z.ZodType> + +export const imageSchema = z + .preprocess( + (data: unknown) => (typeof data === 'string' ? { src: data } : data), + image + ) + .optional() as z.ZodType> diff --git a/src/schemas/input.ts b/src/schemas/input.ts new file mode 100644 index 000000000..11b9156ef --- /dev/null +++ b/src/schemas/input.ts @@ -0,0 +1,13 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Input from 'fulldev-ui/components/Input.astro' + +export const inputSchema = z + .object({ + icon: z.string().optional(), + label: z.string().optional(), + placeholder: z.string().optional(), + value: z.string().optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/link.ts b/src/schemas/link.ts new file mode 100644 index 000000000..bb91689df --- /dev/null +++ b/src/schemas/link.ts @@ -0,0 +1,14 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Link from 'fulldev-ui/components/Link.astro' + +export const linkSchema = z + .object({ + text: z.string().optional(), + href: z.string().optional(), + icon: z.string().optional(), + target: z.literal('_blank').optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + variant: z.enum(['primary', 'underline', 'muted']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/logo.ts b/src/schemas/logo.ts new file mode 100644 index 000000000..faf75915b --- /dev/null +++ b/src/schemas/logo.ts @@ -0,0 +1,13 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Logo from 'fulldev-ui/components/Logo.astro' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' + +export const logoSchema = z + .object({ + image: imageSchema.optional(), + text: z.string().optional(), + href: z.string().optional(), + size: z.enum(['sm', 'md', 'lg']).optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/menu.ts b/src/schemas/menu.ts new file mode 100644 index 000000000..a825cceef --- /dev/null +++ b/src/schemas/menu.ts @@ -0,0 +1,11 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import Menu from 'fulldev-ui/components/Menu.astro' +import { linkSchema } from 'fulldev-ui/schemas/link.ts' + +export const menuSchema = z + .object({ + heading: z.string().optional(), + links: linkSchema.array().optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/page.ts b/src/schemas/page.ts index ced52e1a9..a7a586110 100644 --- a/src/schemas/page.ts +++ b/src/schemas/page.ts @@ -1,43 +1,23 @@ import { z } from 'astro:content' -import { base } from './base' -import { block } from './block' -import { pathSchema } from './utils' +import { blockSchema } from 'fulldev-ui/schemas/block.ts' +import { headSchema } from 'fulldev-ui/schemas/head.ts' +import { menuSchema } from 'fulldev-ui/schemas/menu.ts' -export const page = base +export const pageSchema = blockSchema .extend({ - i18n: pathSchema('pages'), - settings: pathSchema('settings'), - seo: z - .object({ - title: z.string(), - description: z.string(), - image: z.string(), - }) - .partial() - .passthrough(), - code: z - .object({ - head: z.string(), - body: z.string(), - }) - .partial() - .passthrough(), - pages: pathSchema('pages').array(), - records: pathSchema('records').array(), - title: z.string(), - description: z.string(), - header: block.or(z.literal(false)), - headers: block.array().or(z.literal(false)), - hero: block.or(z.literal(false)), - block: block.or(z.literal(false)), - section: block.or(z.literal(false)), - blocks: block.array().or(z.object({}).catchall(block)), - sections: block.array().or(z.object({}).catchall(block)), - cta: block.or(z.literal(false)), - footer: block.or(z.literal(false)), - footers: block.array().or(z.literal(false)), + _layout: z.string().optional(), + _schema: z.string().optional(), + title: z.string().optional(), + description: z.string().optional(), + head: headSchema.optional(), + banner: blockSchema.optional(), + navigation: blockSchema.optional(), + header: blockSchema.optional(), + sections: blockSchema.array().optional(), + subheader: blockSchema.array().optional(), + sidebar: menuSchema.array().optional(), + footer: blockSchema.optional(), }) - .partial() - .passthrough() + .strict() -export type Page = z.infer +export type PageSchema = z.infer diff --git a/src/schemas/utils.ts b/src/schemas/path.ts similarity index 61% rename from src/schemas/utils.ts rename to src/schemas/path.ts index a749ac209..e5513828c 100644 --- a/src/schemas/utils.ts +++ b/src/schemas/path.ts @@ -1,19 +1,10 @@ import { reference, z, type AnyEntryMap } from 'astro:content' -// export const pagesPath = z -// .string() -// .transform((value) => { -// const fullpath = value?.split(`pages/`).pop() -// const slug = fullpath?.split('.').shift() -// return slug -// }) -// .pipe(reference('pages')) - +// TODO: preprocess instead export const pathSchema = (collection: C) => z .string() .transform((value) => { - // @ts-ignore const fullpath = value?.split(`${collection}/`).pop() const slug = fullpath?.split('.').shift() const noIndexEnding = slug?.replace('/index', '') diff --git a/src/schemas/proof.ts b/src/schemas/proof.ts new file mode 100644 index 000000000..686231ab8 --- /dev/null +++ b/src/schemas/proof.ts @@ -0,0 +1,12 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Proof from 'fulldev-ui/components/Proof.astro' +import { imageSchema } from 'fulldev-ui/schemas/image.ts' + +export const proofSchema = z + .object({ + rating: z.number().optional(), + avatars: imageSchema.array().optional(), + text: z.string().optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/schemas/textarea.ts b/src/schemas/textarea.ts new file mode 100644 index 000000000..b54687c98 --- /dev/null +++ b/src/schemas/textarea.ts @@ -0,0 +1,11 @@ +import type { ComponentProps } from 'astro/types' +import { z } from 'astro:content' +import type Textarea from 'fulldev-ui/components/Textarea.astro' + +export const textareaSchema = z + .object({ + label: z.string().optional(), + placeholder: z.string().optional(), + value: z.string().optional(), + }) + .strict() satisfies z.ZodType> diff --git a/src/stores/cart.svelte.ts b/src/stores/cart.svelte.ts new file mode 100644 index 000000000..5da624751 --- /dev/null +++ b/src/stores/cart.svelte.ts @@ -0,0 +1,78 @@ +import { derived, writable } from 'svelte/store' + +export type CartItem = { + uid: string + quantity: number + slug: string + title: string + price?: number | undefined + image?: string | undefined + variants?: + | { + [k: string]: string | undefined + } + | undefined +} + +export type Cart = CartItem[] + +const isServer = import.meta.env.SSR +const storageJson = !isServer && localStorage.getItem('cart') +const storageData = storageJson ? JSON.parse(storageJson) : [] + +export const cart = writable(storageData) + +cart.subscribe((newCart) => { + if (isServer) return + const json = JSON.stringify(newCart) + localStorage.setItem('cart', json) +}) + +export const getUid = ( + slug: CartItem['slug'], + variants?: CartItem['variants'] +) => (variants ? `${slug}-${Object.values(variants)?.join('-')}` : slug) + +export const getItemIndex = (currentCart: Cart, uid: CartItem['uid']) => { + const index = currentCart.findIndex((i) => i.uid === uid) + if (index === -1) throw new Error(`Item with uid ${uid} not found`) + return index +} + +export const addItem = (item: CartItem) => + cart.update((currentCart) => [...currentCart, item]) + +export const removeItem = (uid: CartItem['uid']) => + cart.update((currentCart) => { + const index = getItemIndex(currentCart, uid) + currentCart.splice(index, 1) + return [...currentCart] + }) + +export const updateQuantity = ( + uid: CartItem['uid'], + quantity: CartItem['quantity'] +) => + cart.update((currentCart) => { + const index = getItemIndex(currentCart, uid) + if (currentCart[index]) currentCart[index].quantity = quantity + return [...currentCart] + }) + +export const openCart = () => { + const cartDialog = document.querySelector('dialog#cart') + if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal() +} + +export const closeCart = () => { + const cartDialog = document.querySelector('dialog#cart') + if (cartDialog instanceof HTMLDialogElement) cartDialog.close() +} + +export const totalPrice = derived(cart, ($cart) => { + return $cart.length + // return $cart.reduce( + // (acc, item) => acc + (item.price || 0) * (item.quantity || 0), + // 0 + // ) +}) diff --git a/src/stores/cart.ts b/src/stores/cart.ts new file mode 100644 index 000000000..0bb77204b --- /dev/null +++ b/src/stores/cart.ts @@ -0,0 +1,76 @@ +import { persistentAtom } from '@nanostores/persistent' +import { computed } from 'nanostores' + +type Item = { + slug: string + title: string + price: number + image: string + quantity: number + variants: string[] +} + +type Cart = Item[] | [] + +export const $cart = persistentAtom('cart', [], { + encode: JSON.stringify, + decode: JSON.parse, +}) + +// for svelte files +export const cart = $cart + +export const getCart = () => $cart.get() + +export const setCart = (cart: Cart) => $cart.set(cart) + +export const removeItem = (slug: string) => { + const currentCart = getCart() + const newCart = [...currentCart] + const index = currentCart.findIndex((item) => item.slug === slug) + newCart.splice(index, 1) + $cart.set(newCart) +} + +export const addItem = (item: Item) => { + const currentCart = getCart() + const newCart = [...currentCart] + const index = currentCart.findIndex( + (i) => i.slug === item.slug && i.variants.join() === item.variants.join() + ) + if (index === -1) newCart.push(item) + else { + let newItem = { ...newCart[index] } as Item + newItem.quantity += item.quantity + newCart[index] = newItem + } + setCart(newCart) +} + +export const updateQuantity = (slug: string, quantity: number) => { + const currentCart = getCart() + const newCart = [...currentCart] + const index = currentCart.findIndex((item) => item.slug === slug) + let newItem = { ...newCart[index] } as Item + newItem.quantity = quantity + newCart[index] = newItem + setCart(newCart) +} + +export const $totalPrice = computed($cart, ($cart) => + $cart.reduce((a, b) => +a + b.price * b.quantity, 0) +) + +export const openCart = () => { + const cartDialog = document.querySelector('dialog#cart') + if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal() +} + +export const closeCart = () => { + const cartDialog = document.querySelector('dialog#cart') + if (cartDialog instanceof HTMLDialogElement) cartDialog.close() +} + +// export const totalQuantity = computed(cart, ($cart) => +// $cart.reduce((a, b) => +a + b.quantity, 0) +// ) diff --git a/src/structures/Card.astro b/src/structures/Card.astro new file mode 100644 index 000000000..68e0c36e7 --- /dev/null +++ b/src/structures/Card.astro @@ -0,0 +1,35 @@ +--- +import type { HTMLAttributes, HTMLTag } from 'astro/types' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> { + as?: HTMLTag +} + +const { href, as = href ? 'a' : 'div', ...rest } = Astro.props +--- + + + + + + diff --git a/src/structures/Carousel.astro b/src/structures/Carousel.astro new file mode 100644 index 000000000..1fa2e1c34 --- /dev/null +++ b/src/structures/Carousel.astro @@ -0,0 +1,106 @@ +--- +import Button from 'fulldev-ui/components/Button.astro' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props {} +--- + + + + + + + + + + + + diff --git a/src/structures/Code.astro b/src/structures/Code.astro new file mode 100644 index 000000000..a3c5d8c8a --- /dev/null +++ b/src/structures/Code.astro @@ -0,0 +1,53 @@ +--- +import type { ComponentProps } from 'astro/types' +import { Code as AstroCode } from 'astro:components' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends ComponentProps {} + +const { lang = 'astro', code, ...rest } = Astro.props +--- + + + + + + + + { + code && ( + + ) + } + + + diff --git a/src/structures/Container.astro b/src/structures/Container.astro new file mode 100644 index 000000000..5840700af --- /dev/null +++ b/src/structures/Container.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 +--- + + + + + + diff --git a/src/structures/Drawer.astro b/src/structures/Drawer.astro new file mode 100644 index 000000000..7bd771632 --- /dev/null +++ b/src/structures/Drawer.astro @@ -0,0 +1,80 @@ +--- +import type { ComponentProps, HTMLAttributes } from 'astro/types' +import Button from 'fulldev-ui/components/Button.astro' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props + extends HTMLAttributes<'aside'>, + Pick, 'variant' | 'size' | 'text' | 'icon'> { + id: string + icon: string +} + +const { id, variant = 'ghost', size = 'md', icon, text, ...rest } = Astro.props + +const slot = await Astro.slots.render('default') +const render = slot?.trim().length > 0 +--- + +{ + render && ( + + + + + + + + + + + ) +} + + diff --git a/src/structures/Group.astro b/src/structures/Group.astro new file mode 100644 index 000000000..f722dd9a0 --- /dev/null +++ b/src/structures/Group.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 +--- + + + + + + diff --git a/src/structures/Layout.astro b/src/structures/Layout.astro new file mode 100644 index 000000000..1d3f58054 --- /dev/null +++ b/src/structures/Layout.astro @@ -0,0 +1,34 @@ +--- +import type { ComponentProps, HTMLAttributes } from 'astro/types' +import Head from 'fulldev-ui/components/Head.astro' + +type Props = Omit, 'title'> & { + head?: ComponentProps +} + +const { head, ...rest } = Astro.props +--- + + + + + + + + + diff --git a/src/structures/Masonry.astro b/src/structures/Masonry.astro new file mode 100644 index 000000000..cf19ccc0f --- /dev/null +++ b/src/structures/Masonry.astro @@ -0,0 +1,42 @@ +--- +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 +--- + + + + + + diff --git a/src/structures/Matrix.astro b/src/structures/Matrix.astro new file mode 100644 index 000000000..5098252b5 --- /dev/null +++ b/src/structures/Matrix.astro @@ -0,0 +1,39 @@ +--- +import type { HTMLAttributes, HTMLTag } from 'astro/types' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends HTMLAttributes<'div'> { + as?: HTMLTag + size?: 'sm' | 'md' | 'lg' | undefined +} + +const { size = 'md', ...rest } = Astro.props +--- + + + + + + diff --git a/src/structures/Panel.astro b/src/structures/Panel.astro new file mode 100644 index 000000000..ce0b15d2a --- /dev/null +++ b/src/structures/Panel.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 +--- + + + + + + diff --git a/src/structures/Prose.astro b/src/structures/Prose.astro new file mode 100644 index 000000000..ac90de9f9 --- /dev/null +++ b/src/structures/Prose.astro @@ -0,0 +1,88 @@ +--- +import type { HTMLAttributes, HTMLTag } from 'astro/types' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends HTMLAttributes<'div'> { + as?: HTMLTag + align?: 'center' | 'middle' | 'columns' +} + +const { ...rest } = Astro.props +--- + + + + + + diff --git a/src/structures/Section.astro b/src/structures/Section.astro new file mode 100644 index 000000000..8bb0391ac --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/structures/Sidebar.astro b/src/structures/Sidebar.astro new file mode 100644 index 000000000..de72b863e --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/structures/Split.astro b/src/structures/Split.astro new file mode 100644 index 000000000..b9fc5abf8 --- /dev/null +++ b/src/structures/Split.astro @@ -0,0 +1,38 @@ +--- +import type { HTMLAttributes, HTMLTag } from 'astro/types' +import Element from 'fulldev-ui/components/Element.astro' + +interface Props extends HTMLAttributes<'div'> { + as?: HTMLTag + align?: 'start' | 'center' | 'sticky' +} + +const { ...rest } = Astro.props +--- + + + + + + diff --git a/src/structures/Stack.astro b/src/structures/Stack.astro new file mode 100644 index 000000000..429aacbcf --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/structures/Writeup.astro b/src/structures/Writeup.astro new file mode 100644 index 000000000..40fec3e63 --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/structures/_Bento.astro b/src/structures/_Bento.astro new file mode 100644 index 000000000..a1c5e809c --- /dev/null +++ b/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 +--- + + + + + + diff --git a/src/utils/_archive/Childmorphic.ts b/src/utils/_archive/Childmorphic.ts deleted file mode 100644 index 0409b50a5..000000000 --- a/src/utils/_archive/Childmorphic.ts +++ /dev/null @@ -1,8 +0,0 @@ -// import type { AstroGlobal } from 'astro' - -// export type Childmorphic = { -// [Key in keyof C & string as -// | Lowercase -// | Capitalize -// | `${string}${Capitalize}`]?: C[Key] -// } diff --git a/src/utils/_archive/getAllCollections.ts b/src/utils/_archive/getAllCollections.ts deleted file mode 100644 index f5547ac7d..000000000 --- a/src/utils/_archive/getAllCollections.ts +++ /dev/null @@ -1,10 +0,0 @@ -// import type { CollectionKey } from 'astro:content' -// import { getCollection } from 'astro:content' - -// export const getAllCollections = async (names: CollectionKey[]) => { -// const promises = names.map((name) => getCollection(name)) -// const resolved = await Promise.all(promises) -// const flattened = resolved.flat() -// const filtered = flattened.filter(Boolean) -// return filtered -// } diff --git a/src/utils/_archive/getCollectionCascade.ts b/src/utils/_archive/getCollectionCascade.ts deleted file mode 100644 index aba39bab2..000000000 --- a/src/utils/_archive/getCollectionCascade.ts +++ /dev/null @@ -1,33 +0,0 @@ -// import { -// getCollection, -// type CollectionEntry, -// type CollectionKey, -// type ContentCollectionKey, -// type DataCollectionKey, -// } from 'astro:content' -// import { unflatten } from 'flat' -// import { objectify } from 'radash' -// import { mapValues } from 'remeda' - -// export type CollectionCascade = { -// [Key in ContentCollectionKey]: { -// [Key in CollectionEntry['slug']]: any -// } -// } & { -// [Key in DataCollectionKey]: { -// [Key in CollectionEntry['id']]: any -// } -// } - -// export const getCollectionCascade = async (collectionKeys: CollectionKey[]) => { -// const promises = collectionKeys.map((key) => getCollection(key)) -// const resolved = await Promise.all(promises) -// const flattened = resolved.flat() -// const object = objectify( -// flattened, -// ({ collection, slug, id }) => `${collection}.${slug || id}` -// ) -// const mapped = mapValues(object, (value) => value.data) -// const unflattened = unflatten(mapped) -// return unflattened as CollectionCascade -// } diff --git a/src/utils/_archive/getPathname.ts b/src/utils/_archive/getPathname.ts deleted file mode 100644 index e0503f5c9..000000000 --- a/src/utils/_archive/getPathname.ts +++ /dev/null @@ -1,18 +0,0 @@ -// import type { AstroGlobal } from 'astro' -// import type { CollectionEntry, ContentCollectionKey } from 'astro:content' - -// export const getPathname = ({ -// slug, -// collection, -// data, -// }: CollectionEntry): -// | AstroGlobal['url']['pathname'] -// | undefined => { -// if (!slug) return -// if (data.draft) return -// if (data.output === false) return -// if (collection === 'pages' && slug === 'index') return '/' -// if (collection === 'pages') return `/${slug}` -// if (slug === 'index') return `/${collection}` -// return `/${collection}/${slug}` -// } diff --git a/src/utils/_archive/staticPageSchema.ts b/src/utils/_archive/staticPageSchema.ts deleted file mode 100644 index b53084964..000000000 --- a/src/utils/_archive/staticPageSchema.ts +++ /dev/null @@ -1,124 +0,0 @@ -// import { -// getCollection, -// getEntry, -// z, -// type CollectionEntry, -// type CollectionKey, -// } from 'astro:content' -// import { flatten, unflatten } from 'flat' -// import { all, camel, construct, get, isString, mapValues } from 'radash' -// import { mapKeys, merge } from 'remeda' - -// interface Options { -// casing: boolean -// layouts: boolean -// references: boolean -// selfs: boolean -// } - -// const defaults: Options = { -// casing: true, -// layouts: true, -// references: true, -// selfs: true, -// } - -// const transformReferences = async (data: object) => -// await all( -// mapValues(flatten(data) as any, async (value) => { -// if (!isString(value)) return value -// const parts = (value as string).split(' ') -// const results = await all( -// parts.map(async (valuePart) => { -// if (!valuePart.startsWith('$')) return valuePart -// if (valuePart.startsWith('$self')) return valuePart - -// const reference = valuePart.split('.')[0].replace('$', '') -// const collection = reference.split('/')[0] -// const slug = reference.split('/').slice(1).join('/') -// const path = valuePart.split('.').slice(1).join('.') - -// if (collection && slug) { -// let response = await getEntry(collection as CollectionKey, slug) -// const result = get(response?.data, path) -// return result -// } else if (collection) { -// const response = await getCollection(collection as CollectionKey) -// const result = response?.map((entry: any) => get(entry?.data, path)) -// return result -// } - -// return valuePart -// }) -// ) -// if (results.length == 1) return results[0] -// return results.join(' ') -// }) -// ) - -// const transformLayouts = (data: object) => { -// const flat: any = flatten(data) -// let store: any = {} -// let i: number = 0 - -// const merged = mapKeys(flat, (key) => { -// if (!isString(key)) return key -// const parts = key.split('.') -// const result = parts.map((part) => { -// return part.replace(/^_+/, '') -// }) -// const filtered = result.filter(Boolean) -// const joined = filtered.join('.') -// return joined -// }) -// const nested = construct(merged) -// return nested -// } - -// const transformSelfs = (data: object) => { -// const flat = flatten(data) as any -// const mapped = mapValues(flat, (value) => { -// if (!isString(value)) return value -// const parts = (value as string).split(' ') -// const result = parts.map((part) => { -// if (!part.startsWith('$self')) return part -// const pathParts = part.split('.').slice(1) -// const camelCased = pathParts.map((part) => camel(part)) -// const path = camelCased.join('.') -// const result = get(data, path) -// return result ? result : part -// }) -// return result.join(' ') -// }) -// return unflatten(mapped) -// } - -// const transformCasing = (object: object) => { -// const flat = flatten(object) -// const mapped = mapKeys(flat, (key) => { -// if (!isString(key)) return key -// const parts = (key as string).split('.') -// const result = parts.map((part) => camel(part)) -// return result.join('.') -// }) -// return unflatten(mapped) -// } - -// export const pageSchema = (options: Partial = {}) => -// z.any().transform(async (data: CollectionEntry['data']) => { -// const { layouts, casing, references, selfs } = merge(defaults, options) - -// if (references) data = await transformReferences(data) -// // console.log('references', JSON.stringify(data, null, 2)) - -// if (layouts) data = transformLayouts(data) -// // console.log('layouts', data) - -// if (casing) data = transformCasing(data) -// // console.log('casing', data) - -// if (selfs) data = transformSelfs(data) -// // console.log('selfs', data) - -// return data -// }) diff --git a/src/utils/_archive/transform/transform.ts b/src/utils/_archive/transform/transform.ts deleted file mode 100644 index 16aa65be5..000000000 --- a/src/utils/_archive/transform/transform.ts +++ /dev/null @@ -1,25 +0,0 @@ -// import type { CollectionEntry, CollectionKey } from 'astro:content' -// import { transformCasing } from './transformCasing' -// import { transformReferences } from './transformReferences' -// import { transformSelfs } from './transformSelfs' -// import { transformUnderscores } from './transformUnderscores' - -// export const transform = async ( -// entry: CollectionEntry -// ): Promise => { -// // console.log('entry', entry.data) - -// entry = await transformReferences(entry) -// // console.log('references', entry) - -// entry = transformUnderscores(entry) -// // console.log('underscores', entry) - -// entry = transformCasing(entry) -// // console.log('casing', entry) - -// entry = transformSelfs(entry) -// // console.log('selfs', entry) - -// return entry -// } diff --git a/src/utils/_archive/transform/transformCasing.ts b/src/utils/_archive/transform/transformCasing.ts deleted file mode 100644 index c934a9477..000000000 --- a/src/utils/_archive/transform/transformCasing.ts +++ /dev/null @@ -1,24 +0,0 @@ -// import { flatten, unflatten } from 'flat' -// import { camel, isObject } from 'radash' -// import { isArray, isString, mapKeys } from 'remeda' - -// export const transformCasing = (data: any) => { -// if (!isObject(data) && !isArray(data)) return data - -// const flat: any = flatten(data) -// const transformedData = mapKeys(flat, (key) => { -// if (!isString(key)) return key -// const parts = (key as string).split('.') -// const result = parts.map((part) => { -// const leadingUnderscores = part.match(/^_+/) || [''] -// const withoutLeadingUnderscores = part.replace(/^_+/, '') -// const camelCased = camel(withoutLeadingUnderscores) -// const result = leadingUnderscores + camelCased -// return result -// }) -// return result.join('.') -// }) - -// const nested = unflatten(transformedData) -// return nested -// } diff --git a/src/utils/_archive/transform/transformReferences.ts b/src/utils/_archive/transform/transformReferences.ts deleted file mode 100644 index 830cf492c..000000000 --- a/src/utils/_archive/transform/transformReferences.ts +++ /dev/null @@ -1,54 +0,0 @@ -// import { getCollection, getEntry, type CollectionKey } from 'astro:content' -// import { flatten, unflatten } from 'flat' -// import { all, get, isString, mapValues } from 'radash' -// import { getPathname } from '../getPathname' -// import { transform } from './transform' - -// export const transformReferences = async (data: object): Promise => { -// const flat = flatten(data) -// const mappedValues = await all( -// mapValues(flat as any, async (value) => { -// if (!isString(value)) return value -// const parts = (value as string).split(' ') -// const mappedParts = await all( -// parts.map(async (valuePart) => { -// if (!valuePart.startsWith('$/')) return valuePart - -// const reference = valuePart.split('.')[0].replace('$/', '') -// const collection = reference.split('/')[0] -// const slug = reference.split('/').slice(1).join('/') -// const path = valuePart.split('.').slice(1).join('.') - -// if (collection && slug) { -// let response = await getEntry(collection as CollectionKey, slug) -// if (!response) -// throw new Error(`Entry not found: ${collection}/${slug}`) -// const transformed = await transform(response as any) -// const result = get(transformed?.data, path) -// if (!path) -// return { -// ...transformed?.data, -// pathname: getPathname(transformed), -// } -// return result ? result : valuePart -// } else if (collection) { -// const response = await getCollection(collection as CollectionKey) -// if (!response) -// throw new Error(`Entry not found: ${collection}/${slug}`) -// const mapped = response?.map(async (entry: any) => { -// const transformed = await transform(entry?.data) -// return get(transformed, path) -// }) -// const result = await all(mapped) -// return result ? result : valuePart -// } - -// return valuePart -// }) -// ) -// if (mappedParts.length == 1) return mappedParts[0] -// else return mappedParts.join(' ') -// }) -// ) -// return unflatten(mappedValues) -// } diff --git a/src/utils/_archive/transform/transformSelfs.ts b/src/utils/_archive/transform/transformSelfs.ts deleted file mode 100644 index cd5705e65..000000000 --- a/src/utils/_archive/transform/transformSelfs.ts +++ /dev/null @@ -1,20 +0,0 @@ -// import { flatten, unflatten } from 'flat' -// import { camel, get, isString, mapValues } from 'radash' - -// export const transformSelfs = (data: any): any => { -// const flat = flatten(data) as any -// const mapped = mapValues(flat, (value) => { -// if (!isString(value)) return value -// const parts = (value as string).split(' ') -// const result = parts.map((part) => { -// if (!part.startsWith('$.')) return part -// const pathParts = part.replace('$.', '').split('.') -// const camelCased = pathParts.map((part) => camel(part)) -// const path = 'data.' + camelCased.join('.') -// const result = get(data, path) -// return result ? result : part -// }) -// return result.join(' ') -// }) -// return unflatten(mapped) -// } diff --git a/src/utils/_archive/transform/transformUnderscores.ts b/src/utils/_archive/transform/transformUnderscores.ts deleted file mode 100644 index ce2bcc31a..000000000 --- a/src/utils/_archive/transform/transformUnderscores.ts +++ /dev/null @@ -1,19 +0,0 @@ -// import { flatten, unflatten } from 'flat' -// import { isString } from 'radash' -// import { mapKeys } from 'remeda' - -// export const transformUnderscores = (data: any): any => { -// const flat: any = flatten(data) -// const merged = mapKeys(flat, (key) => { -// if (!isString(key)) return key -// const parts = key.split('.') -// const result = parts.map((part) => { -// return part.replace(/^_+/, '') -// }) -// const filtered = result.filter(Boolean) -// const joined = filtered.join('.') -// return joined -// }) -// const nested = unflatten(merged) -// return nested -// } diff --git a/src/utils/cart.ts b/src/utils/cart.ts new file mode 100644 index 000000000..81863ece8 --- /dev/null +++ b/src/utils/cart.ts @@ -0,0 +1,27 @@ +import { slugify } from './slugify.ts' + +export const generateProductId = ( + slug: string, + variants?: string[] | undefined +): string => { + const slugified = slugify(slug) + + if (variants && variants.length > 0) + return `${slugified}--${variants.map((variant) => slugify(variant)).join('--')}` + + return slugified +} + +export const generateProductName = ( + title: string, + variants?: string[] | undefined +): string => { + if (variants && variants.length > 0) + return `${title} / ${variants.join(' / ')}` + + return title +} + +export const formatPrice = (price: number): string => { + return `€${price?.toFixed(2).replace('.', ',')}` +} diff --git a/src/utils/getHref.ts b/src/utils/getHref.ts new file mode 100644 index 000000000..7cc1ecb9b --- /dev/null +++ b/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}/` +} diff --git a/src/utils/mergeEntries.ts b/src/utils/mergeEntries.ts deleted file mode 100644 index cef69be2d..000000000 --- a/src/utils/mergeEntries.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { getEntry } from 'astro:content' -import { assign } from 'radash' - -export const mergeEntries = async (entry: any) => { - if (!entry) return entry - const { data, slug } = entry - const baseSettings = await getEntry('settings', 'base') - const enSettings = await getEntry('settings', 'en') - const deSettings = await getEntry('settings', 'de') - const frSettings = await getEntry('settings', 'fr') - const pageSettings = data.settings && (await getEntry(data.settings)) - const i18nSettings = data.i18n && (await getEntry(data.i18n)) - - let merged = {} - merged = assign(merged, baseSettings?.data ?? {}) - slug?.startsWith('en') && (merged = assign(merged, enSettings?.data ?? {})) - slug?.startsWith('de') && (merged = assign(merged, deSettings?.data ?? {})) - slug?.startsWith('fr') && (merged = assign(merged, frSettings?.data ?? {})) - merged = assign(merged, i18nSettings?.data ?? {}) - merged = assign(merged, pageSettings?.data ?? {}) - merged = assign(merged, data) - - const newEntry = { - ...entry, - data: merged, - } - return newEntry -} diff --git a/src/utils/slugify.ts b/src/utils/slugify.ts new file mode 100644 index 000000000..e1fda3dbc --- /dev/null +++ b/src/utils/slugify.ts @@ -0,0 +1,6 @@ +export const slugify = (input: string): string => { + return input + .toLowerCase() + .replace(/[^a-z0-9]+/g, '-') + .replace(/^-+|-+$/g, '') +} diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 000000000..522c1ef6a --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,5 @@ +import { vitePreprocess } from '@astrojs/svelte'; + +export default { + preprocess: vitePreprocess(), +} diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 000000000..630dab39d --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,72 @@ +import tailwindcssScrollbar from 'tailwind-scrollbar' +import type { Config } from 'tailwindcss' +import tailwindcssAnimate from 'tailwindcss-animate' + +export default { + darkMode: ['class'], + content: [ + './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', + 'node_modules/fulldev-ui/src/**/*.astro', + ], + theme: { + container: { + screens: ['1536px'], + }, + extend: { + spacing: { + 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))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + // hover: 'hsl(var(--primary) / 85%)', + hover: 'hsl(var(--primary) / 75%)', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + hover: 'hsl(var(--secondary) / 75%)', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + hover: 'hsl(var(--muted) / 75%)', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + hover: 'hsl(var(--accent) / 75%)', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + hover: 'hsl(var(--card) / 75%)', + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', + }, + }, + borderRadius: { + lg: `var(--radius)`, + md: `calc(var(--radius) - 2px)`, + sm: 'calc(var(--radius) - 4px)', + }, + borderColor: { + DEFAULT: 'hsl(var(--border))', + }, + }, + }, + plugins: [tailwindcssAnimate, tailwindcssScrollbar({ nocompatible: true })], +} satisfies Config diff --git a/tsconfig.json b/tsconfig.json index 7c119d37d..27a4e2617 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,15 +1,12 @@ { - "extends": "astro/tsconfigs/strict", + "extends": "astro/tsconfigs/strictest", + "include": ["src", "astro.config.ts", "virtual.d.ts"], "compilerOptions": { - "jsx": "preserve", + "module": "NodeNext", + "moduleResolution": "NodeNext", "baseUrl": ".", "paths": { - "fulldev-ui/*": [ - "src/*" - ] + "fulldev-ui/*": ["src/*"], } }, - "exclude": [ - "dist" - ] } \ No newline at end of file diff --git a/virtual.d.ts b/virtual.d.ts new file mode 100644 index 000000000..8c009ed84 --- /dev/null +++ b/virtual.d.ts @@ -0,0 +1,5 @@ +declare module 'virtual:fulldev-ui/config' { + import type { Config } from 'fulldev-ui/integration' + const content: Config + export default content +}
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia + odio vitae vestibulum vestibulum. +
+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. +