fulldev-ui 0.5.0-beta.3 → 0.5.0-beta.5
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.
- package/package.json +1 -1
- package/src/blocks/Contact.astro +7 -30
- package/src/blocks/Excerpt.astro +14 -0
- package/src/blocks/Intro.astro +3 -1
- package/src/blocks/Product.astro +42 -3
- package/src/components/Card.astro +10 -4
- package/src/components/Drawer.astro +97 -54
- package/src/components/Footer.astro +6 -2
- package/src/components/Header.astro +20 -12
- package/src/components/Menu.astro +56 -0
- package/src/components/Section.astro +2 -0
- package/src/components/Sidebar.astro +61 -111
- package/src/components/Social.astro +7 -0
- package/src/components/ThemeSelect.astro +3 -0
- package/src/components/Toc.astro +36 -94
- package/src/components/experimental/Form.astro +2 -0
- package/src/components/experimental/Gallery.astro +50 -126
- package/src/components/experimental/Prose.astro +32 -0
- package/src/content/config.ts +1 -2
- package/src/content/pages/blocks/_product.mdx +73 -2
- package/src/content/pages/index.mdx +0 -2
- package/src/content/pages/layouts/_layout.mdx +8 -15
- package/src/content/pages/layouts/docslayout.mdx +10 -1
- package/src/content/pages/overview/components.mdx +5 -0
- package/src/content/pages/overview/content-collections.mdx +139 -0
- package/src/content/pages/overview/installation.mdx +25 -26
- package/src/content/pages/overview/introduction.mdx +16 -10
- package/src/content/pages/overview/theming.mdx +69 -0
- package/src/content/pages/schemas/page.mdx +6 -0
- package/src/content/presets/base.yml +57 -43
- package/src/content/presets/blocks.yml +0 -3
- package/src/content/presets/docs.yml +2 -60
- package/src/layouts/Layout.astro +26 -9
- package/src/layouts/OverviewLayout.astro +2 -0
- package/src/layouts/PostLayout.astro +24 -0
- package/src/layouts/ProductLayout.astro +5 -2
- package/src/schemas/components/footer.ts +1 -0
- package/src/schemas/components/header.ts +1 -0
- package/src/schemas/components/menu.ts +13 -0
- package/src/schemas/components/sidebar.ts +15 -0
- package/src/schemas/components/toc.ts +3 -0
- package/src/schemas/pageSchema.ts +8 -6
- package/src/schemas/utils/navigation.ts +3 -52
- package/src/utils/getReferenceChildren.ts +4 -1
- package/src/components/experimental/GalleryVertical.astro +0 -161
- package/src/content/pages/overview/content-layer.mdx +0 -128
- package/src/content/pages/overview/customization.mdx +0 -83
- package/src/schemas/presetSchema.ts +0 -29
package/src/layouts/Layout.astro
CHANGED
|
@@ -57,22 +57,27 @@ const {
|
|
|
57
57
|
<!doctype html>
|
|
58
58
|
<html {...rest}>
|
|
59
59
|
<Head {...Astro.props} />
|
|
60
|
-
<Element
|
|
60
|
+
<Element
|
|
61
|
+
as="body"
|
|
62
|
+
{theme}
|
|
63
|
+
>
|
|
61
64
|
<slot name="banner">
|
|
62
65
|
<Banner text={banner} />
|
|
63
66
|
</slot>
|
|
64
67
|
<slot name="header">
|
|
65
68
|
<Header
|
|
66
|
-
|
|
69
|
+
class:list={{
|
|
70
|
+
'for-sidebar': sidebar,
|
|
71
|
+
}}
|
|
72
|
+
if={navigation || header}
|
|
67
73
|
{...navigation}
|
|
68
|
-
{themeselect}
|
|
69
74
|
{...header}
|
|
70
75
|
/>
|
|
71
76
|
</slot>
|
|
72
77
|
<div class="core">
|
|
73
78
|
<slot name="sidebar">
|
|
74
79
|
<Sidebar
|
|
75
|
-
|
|
80
|
+
if={sidebar}
|
|
76
81
|
{...navigation}
|
|
77
82
|
{...sidebar}
|
|
78
83
|
/>
|
|
@@ -85,8 +90,8 @@ const {
|
|
|
85
90
|
</main>
|
|
86
91
|
<slot name="toc">
|
|
87
92
|
<Toc
|
|
93
|
+
heading={toc}
|
|
88
94
|
{render}
|
|
89
|
-
{...toc}
|
|
90
95
|
/>
|
|
91
96
|
</slot>
|
|
92
97
|
</div>
|
|
@@ -108,25 +113,37 @@ const {
|
|
|
108
113
|
|
|
109
114
|
body {
|
|
110
115
|
--screen: 100vw;
|
|
111
|
-
|
|
112
|
-
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: column;
|
|
118
|
+
background-color: var(--base-background);
|
|
113
119
|
width: 100%;
|
|
120
|
+
min-height: 100vh;
|
|
114
121
|
color: var(--base-11);
|
|
115
122
|
|
|
123
|
+
.for-sidebar {
|
|
124
|
+
@media (min-width: 1024px) {
|
|
125
|
+
display: none;
|
|
126
|
+
|
|
127
|
+
~ * {
|
|
128
|
+
--header-height: 0px;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
116
133
|
.core {
|
|
117
134
|
display: flex;
|
|
118
135
|
position: relative;
|
|
136
|
+
flex-grow: 1;
|
|
137
|
+
height: 100%;
|
|
119
138
|
|
|
120
139
|
main {
|
|
121
140
|
--screen: 1280px;
|
|
122
|
-
|
|
123
141
|
display: flex;
|
|
124
142
|
flex: 1;
|
|
125
143
|
flex-direction: column;
|
|
126
144
|
background-color: var(--color-background);
|
|
127
145
|
width: 100%;
|
|
128
146
|
max-width: 100vw;
|
|
129
|
-
min-height: 100vh;
|
|
130
147
|
overflow-x: hidden;
|
|
131
148
|
}
|
|
132
149
|
}
|
|
@@ -23,11 +23,13 @@ const referenceChildren = await getReferenceChildren(slug)
|
|
|
23
23
|
text={description}
|
|
24
24
|
/>
|
|
25
25
|
<Categories
|
|
26
|
+
component="Categories"
|
|
26
27
|
cards={folderChildren}
|
|
27
28
|
structure="grid"
|
|
28
29
|
panel
|
|
29
30
|
/>
|
|
30
31
|
<Products
|
|
32
|
+
component="Products"
|
|
31
33
|
cards={referenceChildren}
|
|
32
34
|
structure="grid"
|
|
33
35
|
/>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { ComponentProps } from 'astro/types'
|
|
3
|
+
import Article from 'fulldev-ui/blocks/Article.astro'
|
|
4
|
+
import Sections from 'fulldev-ui/components/sections.astro'
|
|
5
|
+
import Layout from 'fulldev-ui/layouts/Layout.astro'
|
|
6
|
+
import Excerpt from '../blocks/Excerpt.astro'
|
|
7
|
+
|
|
8
|
+
type Props = ComponentProps<typeof Layout>
|
|
9
|
+
|
|
10
|
+
const { sections, title, description, ...rest } = Astro.props
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
<Layout {...Astro.props}>
|
|
14
|
+
<Excerpt
|
|
15
|
+
heading={title}
|
|
16
|
+
align="start"
|
|
17
|
+
text={description}
|
|
18
|
+
style={{ '--screen': '768px' }}
|
|
19
|
+
{...rest}
|
|
20
|
+
/>
|
|
21
|
+
<Article />
|
|
22
|
+
<Sections {sections} />
|
|
23
|
+
<slot />
|
|
24
|
+
</Layout>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { ComponentProps } from 'astro/types'
|
|
3
3
|
import Article from 'fulldev-ui/blocks/Article.astro'
|
|
4
|
-
import
|
|
4
|
+
import Section from 'fulldev-ui/components/Section.astro'
|
|
5
5
|
import Sections from 'fulldev-ui/components/sections.astro'
|
|
6
6
|
import Layout from 'fulldev-ui/layouts/Layout.astro'
|
|
7
7
|
|
|
@@ -11,7 +11,10 @@ const { render, sections, ...rest } = Astro.props
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
13
|
<Layout {...Astro.props}>
|
|
14
|
-
<
|
|
14
|
+
<Section
|
|
15
|
+
component="Product"
|
|
16
|
+
{...rest as any}
|
|
17
|
+
/>
|
|
15
18
|
<Article />
|
|
16
19
|
<Sections {sections} />
|
|
17
20
|
<slot />
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { z } from 'astro:content'
|
|
2
|
+
import logo from '../components/logo'
|
|
3
|
+
import menu from '../components/menu'
|
|
4
|
+
import heading from './heading'
|
|
5
|
+
import toc from './toc'
|
|
6
|
+
|
|
7
|
+
export default z
|
|
8
|
+
.object({
|
|
9
|
+
logo,
|
|
10
|
+
heading,
|
|
11
|
+
menu,
|
|
12
|
+
toc,
|
|
13
|
+
})
|
|
14
|
+
.partial()
|
|
15
|
+
.passthrough()
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { getEntries, getEntry, z } from 'astro:content'
|
|
2
2
|
import { assign } from 'radash'
|
|
3
3
|
import fulldevConfig from 'virtual:fulldev-ui/config'
|
|
4
|
+
import footer from './components/footer'
|
|
5
|
+
import header from './components/header'
|
|
4
6
|
import image from './components/image'
|
|
5
|
-
import images from './components/images'
|
|
6
7
|
import sections from './components/sections'
|
|
8
|
+
import sidebar from './components/sidebar'
|
|
9
|
+
import toc from './components/toc'
|
|
7
10
|
import component from './utils/component'
|
|
8
11
|
import navigation from './utils/navigation'
|
|
9
12
|
import parents from './utils/parents'
|
|
@@ -61,13 +64,12 @@ export default i18n.pipe(presets).pipe(
|
|
|
61
64
|
title: z.string(),
|
|
62
65
|
description: z.string().optional(),
|
|
63
66
|
image,
|
|
64
|
-
images,
|
|
65
67
|
sections,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
+
footer,
|
|
69
|
+
header: z.boolean().or(header),
|
|
70
|
+
sidebar: z.boolean().or(sidebar),
|
|
68
71
|
navigation,
|
|
69
|
-
toc
|
|
70
|
-
sidebar: z.any(),
|
|
72
|
+
toc,
|
|
71
73
|
})
|
|
72
74
|
.partial()
|
|
73
75
|
.passthrough()
|
|
@@ -1,53 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
// import buttons from '../components/buttons'
|
|
4
|
-
// import heading from '../components/heading'
|
|
5
|
-
// import logo from '../components/logo'
|
|
1
|
+
import header from '../components/header'
|
|
2
|
+
import sidebar from '../components/sidebar'
|
|
6
3
|
|
|
7
|
-
|
|
8
|
-
// logo,
|
|
9
|
-
// buttons: z.array(
|
|
10
|
-
// button.or(
|
|
11
|
-
// z.object({
|
|
12
|
-
// heading,
|
|
13
|
-
// buttons,
|
|
14
|
-
// })
|
|
15
|
-
// )
|
|
16
|
-
// ),
|
|
17
|
-
// })
|
|
18
|
-
|
|
19
|
-
import { z } from 'astro:content'
|
|
20
|
-
import pathSchema from '../utils/pathSchema'
|
|
21
|
-
|
|
22
|
-
const button = pathSchema('pages').or(
|
|
23
|
-
z
|
|
24
|
-
.object({
|
|
25
|
-
text: z.string(),
|
|
26
|
-
href: z.string(),
|
|
27
|
-
heading: z.never(),
|
|
28
|
-
buttons: z.never(),
|
|
29
|
-
})
|
|
30
|
-
.partial()
|
|
31
|
-
.passthrough()
|
|
32
|
-
)
|
|
33
|
-
|
|
34
|
-
const group = z
|
|
35
|
-
.object({
|
|
36
|
-
heading: z.string(),
|
|
37
|
-
buttons: z.array(button),
|
|
38
|
-
text: z.never(),
|
|
39
|
-
href: z.never(),
|
|
40
|
-
})
|
|
41
|
-
.partial()
|
|
42
|
-
.passthrough()
|
|
43
|
-
|
|
44
|
-
export default z
|
|
45
|
-
.object({
|
|
46
|
-
logo: z.string(),
|
|
47
|
-
search: z.boolean(),
|
|
48
|
-
sidebar: z.boolean(),
|
|
49
|
-
toc: z.boolean(),
|
|
50
|
-
buttons: z.array(button.or(group)),
|
|
51
|
-
})
|
|
52
|
-
.partial()
|
|
53
|
-
.passthrough()
|
|
4
|
+
export default sidebar.merge(header)
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import Icon from 'fulldev-ui/components/Icon.astro'
|
|
3
|
-
import Image from 'fulldev-ui/components/Image.astro'
|
|
4
|
-
|
|
5
|
-
const { images, direction } = Astro.props
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
<script>
|
|
9
|
-
const carousel = document.querySelector('.gallery .large-carousel')
|
|
10
|
-
const icon = document.querySelector('.gallery .icon')
|
|
11
|
-
const smallImages = document.querySelectorAll('.gallery .small-image')
|
|
12
|
-
|
|
13
|
-
carousel &&
|
|
14
|
-
icon?.addEventListener('click', () => {
|
|
15
|
-
const carouselWidth = (carousel as HTMLElement).offsetWidth
|
|
16
|
-
const currentScroll = carousel.scrollLeft
|
|
17
|
-
const maxScroll = carousel.scrollWidth - carouselWidth
|
|
18
|
-
|
|
19
|
-
let scrollAmount = currentScroll + carouselWidth
|
|
20
|
-
if (scrollAmount > maxScroll) {
|
|
21
|
-
scrollAmount = 0 // Reset to beginning if we're at the end
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
carousel.scrollTo({
|
|
25
|
-
left: scrollAmount,
|
|
26
|
-
behavior: 'smooth',
|
|
27
|
-
})
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
carousel &&
|
|
31
|
-
smallImages.forEach((image, i) => {
|
|
32
|
-
image.addEventListener('click', () => {
|
|
33
|
-
const imageWidth = (carousel as HTMLElement).offsetWidth
|
|
34
|
-
carousel.scrollTo({
|
|
35
|
-
left: i * imageWidth,
|
|
36
|
-
behavior: 'smooth',
|
|
37
|
-
})
|
|
38
|
-
})
|
|
39
|
-
})
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
<div
|
|
43
|
-
class:list={[
|
|
44
|
-
'full',
|
|
45
|
-
'gallery',
|
|
46
|
-
{
|
|
47
|
-
[`direction-${direction}`]: direction,
|
|
48
|
-
},
|
|
49
|
-
]}
|
|
50
|
-
>
|
|
51
|
-
<div class="large-container">
|
|
52
|
-
<div class="large-carousel">
|
|
53
|
-
{
|
|
54
|
-
images?.map((image: any) => (
|
|
55
|
-
<Image
|
|
56
|
-
class="large-image"
|
|
57
|
-
src={image}
|
|
58
|
-
/>
|
|
59
|
-
))
|
|
60
|
-
}
|
|
61
|
-
</div>
|
|
62
|
-
{
|
|
63
|
-
images?.length > 1 && (
|
|
64
|
-
<Icon
|
|
65
|
-
class="icon"
|
|
66
|
-
name="swipe-left"
|
|
67
|
-
/>
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
</div>
|
|
71
|
-
<div class="small-carousel">
|
|
72
|
-
{
|
|
73
|
-
images?.length > 1 &&
|
|
74
|
-
images.map((image: any) => (
|
|
75
|
-
<Image
|
|
76
|
-
class="small-image"
|
|
77
|
-
src={image}
|
|
78
|
-
/>
|
|
79
|
-
))
|
|
80
|
-
}
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
|
|
84
|
-
<style is:global lang="scss">
|
|
85
|
-
.gallery {
|
|
86
|
-
display: flex;
|
|
87
|
-
position: relative;
|
|
88
|
-
flex-direction: column;
|
|
89
|
-
gap: var(--space-1);
|
|
90
|
-
|
|
91
|
-
.large-container {
|
|
92
|
-
display: flex;
|
|
93
|
-
justify-content: space-between;
|
|
94
|
-
align-items: center;
|
|
95
|
-
|
|
96
|
-
&:hover .icon {
|
|
97
|
-
opacity: 1;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.icon {
|
|
101
|
-
position: absolute;
|
|
102
|
-
right: var(--space-3);
|
|
103
|
-
opacity: 0.5;
|
|
104
|
-
animation: swipe-icon 1.6s ease-in-out infinite;
|
|
105
|
-
transition: opacity 0.2s ease-in-out;
|
|
106
|
-
font-size: calc(var(--text-2) * 1.7);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
@keyframes swipe-icon {
|
|
110
|
-
0%,
|
|
111
|
-
100% {
|
|
112
|
-
right: var(--space-3);
|
|
113
|
-
}
|
|
114
|
-
50% {
|
|
115
|
-
right: calc(var(--space-3) * 2);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.small-carousel,
|
|
121
|
-
.large-carousel {
|
|
122
|
-
--column-width: 100%;
|
|
123
|
-
display: flex;
|
|
124
|
-
position: relative;
|
|
125
|
-
flex-direction: row;
|
|
126
|
-
align-items: flex-start;
|
|
127
|
-
gap: var(--space-4);
|
|
128
|
-
|
|
129
|
-
box-sizing: border-box;
|
|
130
|
-
padding-bottom: var(--space-4);
|
|
131
|
-
width: 100%;
|
|
132
|
-
overflow-x: auto;
|
|
133
|
-
scroll-behavior: smooth;
|
|
134
|
-
scroll-snap-type: x mandatory;
|
|
135
|
-
|
|
136
|
-
> .root {
|
|
137
|
-
flex-grow: 0;
|
|
138
|
-
flex-shrink: 0;
|
|
139
|
-
width: var(--column-width);
|
|
140
|
-
scroll-snap-align: center;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
&.position-inset {
|
|
144
|
-
margin-right: calc(var(--inner-x) * -1);
|
|
145
|
-
margin-left: calc(var(--inner-x) * -1);
|
|
146
|
-
padding-right: var(--inner-x);
|
|
147
|
-
padding-left: var(--inner-x);
|
|
148
|
-
width: calc(100% + var(--inner-x) * 2);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.small-carousel {
|
|
153
|
-
--column-width: var(--space-7);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.small-image:hover {
|
|
157
|
-
opacity: 0.8;
|
|
158
|
-
cursor: pointer;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
</style>
|
|
@@ -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,29 +0,0 @@
|
|
|
1
|
-
import { z } from 'astro:content'
|
|
2
|
-
import image from './components/image'
|
|
3
|
-
import sections from './components/sections'
|
|
4
|
-
import component from './utils/component'
|
|
5
|
-
import parents from './utils/parents'
|
|
6
|
-
|
|
7
|
-
export default z
|
|
8
|
-
.object({
|
|
9
|
-
component,
|
|
10
|
-
parents,
|
|
11
|
-
theme: z.enum(['light', 'dark']),
|
|
12
|
-
lang: z.string(),
|
|
13
|
-
seo: z
|
|
14
|
-
.object({
|
|
15
|
-
title: z.string().optional(),
|
|
16
|
-
description: z.string().optional(),
|
|
17
|
-
})
|
|
18
|
-
.optional(),
|
|
19
|
-
title: z.string(),
|
|
20
|
-
description: z.string().optional(),
|
|
21
|
-
image,
|
|
22
|
-
sections,
|
|
23
|
-
header: z.any(),
|
|
24
|
-
footer: z.any(),
|
|
25
|
-
navigation: z.any(),
|
|
26
|
-
toc: z.any(),
|
|
27
|
-
sidebar: z.any(),
|
|
28
|
-
})
|
|
29
|
-
.partial()
|