fulldev-ui 0.5.0-beta.1 → 0.5.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/.env.example +3 -0
  2. package/CONTRIBUTING.md +10 -4
  3. package/astro.config.ts +2 -13
  4. package/package.json +8 -4
  5. package/pnpm-lock.yaml +82 -130
  6. package/src/blocks/Article.astro +31 -12
  7. package/src/blocks/Banner.astro +2 -1
  8. package/src/blocks/Contact.astro +7 -30
  9. package/src/blocks/Excerpt.astro +14 -0
  10. package/src/blocks/Intro.astro +3 -1
  11. package/src/blocks/Product.astro +55 -22
  12. package/src/components/Card.astro +11 -5
  13. package/src/components/Cart.astro +38 -0
  14. package/src/components/CartForm.astro +121 -0
  15. package/src/components/CartList.astro +134 -0
  16. package/src/components/CartSummary.astro +147 -0
  17. package/src/components/Drawer.astro +128 -52
  18. package/src/components/Footer.astro +6 -3
  19. package/src/components/Form.astro +49 -0
  20. package/src/components/Header.astro +19 -14
  21. package/src/components/Image.astro +0 -1
  22. package/src/components/Input.astro +6 -0
  23. package/src/components/Menu.astro +56 -0
  24. package/src/components/Price.astro +7 -11
  25. package/src/components/Search.astro +1 -4
  26. package/src/components/Section.astro +2 -1
  27. package/src/components/Sidebar.astro +61 -111
  28. package/src/components/Social.astro +7 -0
  29. package/src/components/ThemeSelect.astro +3 -0
  30. package/src/components/Toc.astro +33 -94
  31. package/src/components/docs/PropsTable.astro +1 -1
  32. package/src/components/experimental/Form.astro +31 -5
  33. package/src/components/experimental/Gallery.astro +50 -126
  34. package/src/components/experimental/Prose.astro +32 -0
  35. package/src/content/pages/base/select.mdx +0 -8
  36. package/src/content/pages/base/textarea.mdx +0 -5
  37. package/src/content/pages/blocks/_product.mdx +73 -2
  38. package/src/content/pages/index.mdx +0 -3
  39. package/src/content/pages/layouts/_layout.mdx +14 -0
  40. package/src/content/pages/layouts/docslayout.mdx +10 -1
  41. package/src/content/pages/overview/components.mdx +5 -0
  42. package/src/content/pages/overview/content-collections.mdx +139 -0
  43. package/src/content/pages/overview/installation.mdx +25 -26
  44. package/src/content/pages/overview/introduction.mdx +16 -10
  45. package/src/content/pages/overview/theming.mdx +69 -0
  46. package/src/content/pages/schemas/page.mdx +6 -0
  47. package/src/content/presets/base.yml +56 -43
  48. package/src/content/presets/blocks.yml +0 -3
  49. package/src/content/presets/docs.yml +3 -62
  50. package/src/env.d.ts +1 -1
  51. package/src/integration/index.ts +63 -34
  52. package/src/layouts/DocsLayout.astro +23 -35
  53. package/src/layouts/Layout.astro +37 -21
  54. package/src/layouts/OverviewLayout.astro +17 -10
  55. package/src/layouts/PostLayout.astro +7 -7
  56. package/src/layouts/ProductLayout.astro +5 -2
  57. package/src/schemas/components/footer.ts +1 -0
  58. package/src/schemas/components/header.ts +1 -0
  59. package/src/schemas/components/menu.ts +13 -0
  60. package/src/schemas/components/sidebar.ts +15 -0
  61. package/src/schemas/components/toc.ts +3 -0
  62. package/src/schemas/pageSchema.ts +72 -34
  63. package/src/schemas/presetSchema.ts +2 -28
  64. package/src/schemas/utils/navigation.ts +6 -51
  65. package/src/stores/cart.ts +23 -0
  66. package/src/utils/cart.ts +32 -0
  67. package/src/utils/{getChildPages.ts → getFolderChildren.ts} +3 -1
  68. package/src/utils/{getCategoryPages.ts → getReferenceChildren.ts} +6 -3
  69. package/tsconfig.json +1 -3
  70. package/src/components/experimental/GalleryVertical.astro +0 -161
  71. package/src/content/pages/layouts/layout.mdx +0 -21
  72. package/src/content/pages/layouts/pagelayout.mdx +0 -21
  73. package/src/content/pages/overview/content-layer.mdx +0 -128
  74. package/src/content/pages/overview/customization.mdx +0 -83
  75. package/src/layouts/ContentLayout.astro +0 -16
  76. package/src/layouts/PageLayout.astro +0 -15
  77. /package/src/schemas/utils/{categories.ts → parents.ts} +0 -0
  78. /package/src/types/{global-props.d.ts → global-props.ts} +0 -0
@@ -1,128 +0,0 @@
1
- ---
2
- presets: [docs]
3
- title: Content Layer
4
- ---
5
-
6
- import Link from 'fulldev-ui/components/Link.astro'
7
-
8
- # Content Layer
9
-
10
- We utilize <Link href="https://docs.astro.build/docs/guides/content-collections/">Astro's Content Layer</Link> to create entire websites using just content files and our components.
11
-
12
- ## Starter Template
13
-
14
- This is the recommended way to get started with our content layer integration. We've created a <Link href="https://github.com/fulldotdev/starter/tree/main">starter template</Link> with examples of everything you need to get started.
15
-
16
- ## Manual Setup
17
-
18
- To get started with the manual setup, you need to install the <Link href="/overview/installation/">integration</Link> and add `injectRoutes: true` to your `astro.config.ts` file, see <Link href="#folder-structure">file structure</Link> below for more information on how this generates a site using content files.
19
-
20
- ```ts
21
- import { defineConfig } from 'astro/config'
22
- import fulldev from 'fulldev-ui/integration'
23
-
24
- // https://astro.build/config
25
- export default defineConfig({
26
- integrations: [
27
- fulldev({
28
- // other options
29
- injectRoutes: true,
30
- }),
31
- ],
32
- })
33
- ```
34
-
35
- ## Folder Structure
36
-
37
- ```
38
- .
39
- ├── src/
40
- │ ├── blocks/
41
- │ │ └── ...
42
- │ ├── components/
43
- │ │ └── ...
44
- │ ├── layouts/
45
- │ │ └── ...
46
- │ ├── assets/
47
- │ │ └── ...
48
- │ ├── content/
49
- │ │ ├── pages/
50
- │ │ │ └── ...
51
- │ │ ├── records/
52
- │ │ │ └── ...
53
- │ │ │ └── ...
54
- │ │ ├── presets/
55
- │ │ │ ├── base.yml
56
- │ │ │ └── ...
57
- │ │ └── ...
58
- │ ├── css/
59
- │ │ ├── custom.css
60
- │ │ └── ...
61
- ├── public/
62
- │ └── ...
63
- └──
64
- ```
65
-
66
- - **/src/**: The main source directory containing all the core files of the project.
67
- - **/blocks/**: Contains reusable block components that can be composed to build pages (Custom or overwrites existing fulldev-ui blocks)
68
- - **/components/**: Houses individual UI components used throughout the project (Custom or overwrites existing fulldev-ui components)
69
- - **/layouts/**: Contains layout components used to structure pages (Custom or overwrites existing fulldev-ui layouts)
70
- - **/assets/**: Contains assets like images, fonts, etc.
71
- - **/content/**: Stores content-related files:
72
- - **pages/**: Contains markdown or MDX files for individual pages.
73
- - **records/**: Contains markdown or MDX files for content collections. Nested in directories by collection name.
74
- - **/presets/**: Includes configuration files for various settings like the sidebar.
75
- - **/css/**: Contains global CSS files and styles.
76
-
77
- ### File Structure
78
-
79
- Each file has a few frontmatter objects that are important to know about. Seo has priority over title and description, however title and description is used in multiple places like a card.
80
-
81
- ```md
82
- ---
83
- seo:
84
- title: Page Title
85
- description: This is my page description
86
- image: /image.jpg # Open Graph Image
87
-
88
- title: Page Title
89
- description: This is my page description
90
- ---
91
- ```
92
-
93
- For all objects avaliable in the Content Layer, see the <Link href="/schemas/page/">schemas</Link>.
94
-
95
- ### Image Alt collection
96
-
97
- To create yml records for images, you can simply add `generateImageEntries: true` to the integration setup. This will generate a yml file in the **src/assets/** directory with the image alt text pre set to the unslugged filename which can be customized. If turned on the Image component will automatically use these records for the alt text of local images.
98
-
99
- ```ts
100
- import { defineConfig } from 'astro/config'
101
- import fulldev from 'fulldev-ui/integration'
102
-
103
- // https://astro.build/config
104
- export default defineConfig({
105
- integrations: [
106
- fulldev({
107
- // other options
108
- generateImageEntries: true,
109
- }),
110
- ],
111
- })
112
- ```
113
-
114
- ## i18n
115
-
116
- Getting started with i18n is easy, you can easily add additional languages by creating a new folder in the **content/pages** directory and adding your content files in the new language.
117
-
118
- ```
119
- .
120
- ├── src/
121
- │ ├── content/
122
- │ │ ├── pages/
123
- │ │ │ ├── index.md
124
- │ │ │ ├── nl/
125
- │ │ │ │ └── index.md
126
- │ │ │ └── de/
127
- │ │ │ │ └── index.md
128
- ```
@@ -1,83 +0,0 @@
1
- ---
2
- presets: [docs]
3
- title: Customization
4
- ---
5
-
6
- import Link from 'fulldev-ui/components/Link.astro'
7
-
8
- # Customization
9
-
10
- ## Colors
11
-
12
- The color theme is inspired by and compatible with <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
13
-
14
- ### Automatic setup
15
-
16
- With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the <Link href="/overview/installation/">installation page</Link> to get started with the integration.
17
-
18
- ### Manual setup
19
-
20
- 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 explanation see <Link href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">this page</Link>.
21
-
22
- ```css
23
- :root,
24
- .theme-light {
25
- --base-1: ;
26
- --base-2: ;
27
- --base-3: ;
28
- --base-4: ;
29
- --base-5: ;
30
- --base-6: ;
31
- --base-7: ;
32
- --base-8: ;
33
- --base-9: ;
34
- --base-10: ;
35
- --base-11: ;
36
- --base-12: ;
37
- --base-contrast: ;
38
-
39
- --brand-1: ;
40
- --brand-2: ;
41
- --brand-3: ;
42
- --brand-4: ;
43
- --brand-5: ;
44
- --brand-6: ;
45
- --brand-7: ;
46
- --brand-8: ;
47
- --brand-9: ;
48
- --brand-10: ;
49
- --brand-11: ;
50
- --brand-12: ;
51
- --brand-contrast: ;
52
- }
53
- ```
54
-
55
- ### Dark theme
56
-
57
- Dark mode is set via a simple `.theme-dark` class.
58
-
59
- 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.
60
-
61
- Components in Fulldev UI that support theme switching have the `theme` prop available, which adds either the `theme-dark` or `theme-light` class
62
-
63
- ```css
64
- .theme-dark {
65
- /* Same variables here as above */
66
- }
67
- ```
68
-
69
- ## Radius
70
-
71
- The `--border-radius` variable is a multiplier applied to all radius values. The default value is `1`.
72
-
73
- ```css
74
- :root {
75
- --border-radius: 1;
76
- }
77
- ```
78
-
79
- ## Other
80
-
81
- Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS.
82
-
83
- We plan to add more customization via variables later.
@@ -1,16 +0,0 @@
1
- ---
2
- import type { ComponentProps } from 'astro/types'
3
- import Article from 'fulldev-ui/blocks/Article.astro'
4
- import Layout from 'fulldev-ui/layouts/Layout.astro'
5
-
6
- type Props = ComponentProps<typeof Layout>
7
-
8
- const { sections, ...rest } = Astro.props
9
- ---
10
-
11
- <Layout
12
- class:list="content-layout"
13
- {...rest}
14
- >
15
- <Article />
16
- </Layout>
@@ -1,15 +0,0 @@
1
- ---
2
- import type { ComponentProps } from 'astro/types'
3
- import Layout from 'fulldev-ui/layouts/Layout.astro'
4
-
5
- type Props = ComponentProps<typeof Layout>
6
-
7
- const { ...rest } = Astro.props
8
- ---
9
-
10
- <Layout
11
- class:list="page-layout"
12
- {...rest}
13
- >
14
- <slot />
15
- </Layout>
File without changes