Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 4c953ca

Browse files
kocakoca
committed
feat(docs): add mdx components
1 parent 3858718 commit 4c953ca

26 files changed

+1114
-108
lines changed

‎packages/layout/examples/base-aspect-ratio.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,3 @@
1515
</chakra.div>
1616
</chakra.div>
1717
</template>
18-
<script setup></script>

‎website/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,19 @@
2424
"@emotion/server": "^11.0.0",
2525
"@iconify/json": "^1.1.312",
2626
"@vitejs/plugin-vue": "^1.2.1",
27+
"@vitejs/plugin-vue-jsx": "^1.1.3",
2728
"@vue/compiler-sfc": "^3.0.11",
2829
"@vue/server-renderer": "^3.0.11",
2930
"@vueuse/head": "^0.5.1",
3031
"markdown-it-prism": "^2.1.6",
3132
"prismjs": "^1.23.0",
33+
"remark-gfm": "^1.0.0",
3234
"typescript": "^4.1.3",
3335
"vite": "2.1.5",
3436
"vite-plugin-components": "^0.8.3",
3537
"vite-plugin-icons": "^0.3.3",
3638
"vite-plugin-md": "^0.6.0",
37-
"vite-plugin-mdx-vue": "^1.1.3",
39+
"vite-plugin-mdx-vue": "^1.2.0",
3840
"vite-plugin-pages": "^0.9.2",
3941
"vite-ssg": "^0.9.2"
4042
}

‎website/src/App.vue

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,21 @@
33
<router-view />
44
</template>
55

6-
<script lang="ts">
7-
import { defineComponent, reactive, computed } from 'vue'
8-
import { CReset } from '@chakra-ui/vue-next'
6+
<script setup lang="ts">
97
import { useHead } from '@vueuse/head'
108
11-
export default defineComponent({
12-
name: 'App',
13-
components: {
14-
CReset,
15-
},
16-
setup() {
17-
const siteData = reactive({
18-
title: 'Chakra UI Vue Next + Vite',
19-
description: 'Chakra UI Vue Next + Vite test',
20-
})
9+
const siteData = {
10+
title: 'Chakra UI Vue Next + Vite',
11+
description: 'Chakra UI Vue Next + Vite test',
12+
}
2113
22-
useHead({
23-
title: computed(() => siteData.title),
24-
meta: [
25-
{
26-
name: `description`,
27-
content: computed(() => siteData.description),
28-
},
29-
],
30-
})
31-
},
14+
useHead({
15+
title: siteData.title,
16+
meta: [
17+
{
18+
name: `description`,
19+
content: siteData.description,
20+
},
21+
],
3222
})
3323
</script>

‎website/src/config/site-config.ts

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const baseUrl = 'https://github.com/chakra-ui/chakra-ui'
2+
3+
const siteUrl = 'https://vue.chakra-ui.com'
4+
const description =
5+
'Simple, Modular and Accessible UI Components for your Vue Applications.'
6+
const siteName =
7+
'Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.'
8+
9+
const siteConfig = {
10+
repo: {
11+
url: baseUrl,
12+
editUrl: `${baseUrl}/edit/main/website`,
13+
blobUrl: `${baseUrl}/blob/main`,
14+
},
15+
openCollective: {
16+
url: 'https://opencollective.com/chakra-ui',
17+
},
18+
discord: {
19+
url: 'https://discord.gg/dQHfcWF',
20+
},
21+
youtube: 'https://www.youtube.com/channel/UC4TmDovH46TB4S0SM0Y4CIg',
22+
seo: {
23+
title: 'Chakra UI',
24+
titleTemplate: '%s - Chakra UI',
25+
description,
26+
siteUrl,
27+
twitter: {
28+
handle: '@chakra-ui',
29+
site: '@chakra-ui',
30+
cardType: 'summary_large_image',
31+
},
32+
openGraph: {
33+
type: 'website',
34+
locale: 'en_US',
35+
url: siteUrl,
36+
title: 'Chakra UI',
37+
description,
38+
site_name: siteName,
39+
images: [
40+
{
41+
url: 'https://chakra-ui.com/og-image.png',
42+
width: 1240,
43+
height: 480,
44+
alt: siteName,
45+
},
46+
{
47+
url: 'https://chakra-ui.com/twitter-og-image.png',
48+
width: 1012,
49+
height: 506,
50+
alt: siteName,
51+
},
52+
],
53+
},
54+
},
55+
}
56+
57+
export default siteConfig

‎website/src/docs-theme/components/AppHeader.vue

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
pos="sticky"
77
top="0"
88
zIndex="3"
9-
:bg="bg"
109
left="0"
1110
right="0"
1211
width="full"
@@ -34,15 +33,9 @@
3433
align="center"
3534
color="gray.400"
3635
>
37-
<chakra.div>Search</chakra.div>
38-
<chakra.div>Switcher</chakra.div>
39-
<CFlex
40-
todo="HStack"
41-
spacing="5"
42-
:display="{ base: 'none', md: 'flex' }"
43-
>
36+
<CHStack spacing="5" :display="{ base: 'none', md: 'flex' }">
4437
<CLink
45-
is-external
38+
isExternal
4639
aria-label="Go to Chakra UI GitHub page"
4740
href="{siteConfig.repo.url}"
4841
>
@@ -52,45 +45,74 @@
5245
w="5"
5346
h="5"
5447
:_hover="{ color: 'gray.600' }"
55-
icon="github"
48+
name="github"
5649
/>
5750
</CLink>
58-
<CLink aria-label="Go to Chakra UI Discord page" href="/discord">
51+
<CLink
52+
isExternal
53+
aria-label="Go to Chakra UI Discord page"
54+
href="/discord"
55+
>
5956
<CIcon
6057
display="block"
6158
transition="color 0.2s"
6259
w="5"
6360
h="5"
6461
:_hover="{ color: 'gray.600' }"
65-
icon="discord"
62+
name="discord"
6663
/>
6764
</CLink>
68-
</CFlex>
65+
<CLink
66+
isExternal
67+
aria-label="Go to Chakra UI YouTube channel"
68+
:href="siteConfig.youtube"
69+
>
70+
<CIcon
71+
display="block"
72+
transition="color 0.2s"
73+
w="5"
74+
h="5"
75+
:_hover="{ color: 'gray.600' }"
76+
name="youtube"
77+
/>
78+
</CLink>
79+
</CHStack>
80+
<CIconButton
81+
size="md"
82+
fontSize="lg"
83+
:aria-label="`Switch to ${text} mode`"
84+
:title="`Switch to ${text} mode`"
85+
variant="ghost"
86+
color="current"
87+
:ml="{ base: '0', md: '3' }"
88+
@click="toggleColorMode"
89+
:icon="switchIcon"
90+
/>
91+
<sponsor-button ml="5" />
6992
</CFlex>
7093
</CFlex>
7194
</chakra.div>
7295
</chakra.header>
7396
</template>
7497

7598
<script setup lang="ts">
76-
import { useColorModeValue } from '@chakra-ui/c-color-mode'
99+
import { useColorMode, useColorModeValue } from '@chakra-ui/c-color-mode'
77100
import { useWindowScroll } from '@vueuse/core'
78-
import { onMounted, ref, watchEffect } from 'vue'
101+
import { onMounted, ref } from 'vue'
102+
import siteConfig from '@/config/site-config.ts'
79103
80-
const headerRef = ref<{ $el: HTMLDivElement }>()
104+
const { toggleColorMode } = useColorMode()
105+
const text = useColorModeValue('dark', 'light')
106+
const switchIcon = useColorModeValue('moon', 'sun')
107+
108+
const headerRef = ref<{ $el: HTMLDivElement } | undefined>(undefined)
81109
82-
const bg = useColorModeValue('white', 'gray.800')
83110
const { y } = useWindowScroll()
84111
85112
const height = ref(0)
86113
onMounted(() => {
87114
height.value = headerRef.value?.$el.getBoundingClientRect().height ?? 0
88115
})
89-
90-
watchEffect(() => {
91-
console.log({ y: y.value })
92-
console.log({ height: height.value })
93-
})
94116
</script>
95117

96118
<style></style>

‎website/src/docs-theme/components/CarbonAd.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<CFlex
3+
p="4"
4+
:bg="bg"
5+
as="a"
6+
href="https://pro.chakra-ui.com/components?utm_source=chakra-ui.com&utm_medium=docs-ad"
7+
rel="noopener sponsored"
8+
target="_blank"
9+
maxW="xl"
10+
my="8"
11+
rounded="md"
12+
>
13+
<CBox w="xs" h="100px" bg="gray.300" mr="4">
14+
<chakra.img />
15+
</CBox>
16+
<CFlex direction="column">
17+
<CBox flex="1" fontSize="sm">
18+
<b>Chakra UI Pro:</b> Start your application or marketing site with a
19+
growing collection of beautiful and responsive UI components.
20+
</CBox>
21+
<CBox fontWeight="medium" fontSize="xs" opacity="{0.7}">
22+
Ads via Chakra UI
23+
</CBox>
24+
</CFlex>
25+
</CFlex>
26+
</template>
27+
<script setup lang="ts">
28+
import { useColorModeValue } from '@chakra-ui/c-color-mode'
29+
const bg = useColorModeValue('gray.50', 'rgba(36, 70, 93, 0.32)')
30+
</script>

‎website/src/docs-theme/components/Editor/CodeEditor.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<pre contentEditable="true"><slot /></pre>
3+
</template>

‎website/src/docs-theme/components/Logo.vue

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<!-- eslint-disable -->
33
<chakra.svg
4-
bg="red.500"
54
height="8"
65
width="auto"
76
viewBox="0 0 998 257"
@@ -12,7 +11,7 @@
1211
<!-- eslint-enable -->
1312
<path
1413
d="M388.5 115.302c17.612 0 25.466 11.424 28.084 21.658l24.752-9.044c-4.76-18.564-21.896-38.08-53.074-38.08-33.32 0-59.262 25.704-59.262 61.404 0 35.224 25.942 61.642 59.976 61.642 30.464 0 47.838-19.754 53.312-37.842l-24.276-8.806c-2.618 8.806-10.948 21.42-29.036 21.42-17.374 0-32.368-13.09-32.368-36.414s14.994-35.938 31.892-35.938zM484.894 141.244c.476-14.756 8.806-26.18 24.038-26.18 17.374 0 23.8 11.424 23.8 25.704v68.544h27.608v-73.304c0-25.466-13.804-45.934-42.364-45.934-12.138 0-25.228 4.284-33.082 14.518V37h-27.608v172.312h27.608v-68.068zM577.29 177.896c0 18.326 14.994 34.986 39.27 34.986 18.802 0 30.226-9.52 35.7-18.326 0 9.282.952 14.042 1.19 14.756h25.704c-.238-1.19-1.428-8.092-1.428-18.564v-57.596c0-23.086-13.566-43.316-49.266-43.316-28.56 0-46.648 17.85-48.79 37.842l25.228 5.712c1.19-11.662 9.282-20.944 23.8-20.944 15.232 0 21.896 7.854 21.896 17.612 0 4.046-1.904 7.378-8.568 8.33l-29.75 4.522c-19.754 2.856-34.986 14.28-34.986 34.986zm44.506 13.328c-10.948 0-16.898-7.14-16.898-14.994 0-9.52 6.902-14.28 15.47-15.708L650.594 156v5.236c0 22.61-13.328 29.988-28.798 29.988zM810.108 93.406h-36.652l-44.506 46.886V37h-27.37v172.312h27.37v-32.368l14.28-14.994 34.034 47.362h33.796l-48.552-66.878 47.6-49.028zM889.349 92.692c-1.19-.238-4.046-.714-7.378-.714-15.232 0-28.084 7.378-33.558 19.992V93.406h-26.894v115.906h27.608v-55.216c0-21.658 9.758-34.034 31.178-34.034 2.856 0 5.95.238 9.044.714V92.692zM895.968 177.896c0 18.326 14.994 34.986 39.27 34.986 18.802 0 30.226-9.52 35.7-18.326 0 9.282.952 14.042 1.19 14.756h25.704c-.238-1.19-1.428-8.092-1.428-18.564v-57.596c0-23.086-13.566-43.316-49.266-43.316-28.56 0-46.648 17.85-48.79 37.842l25.228 5.712c1.19-11.662 9.282-20.944 23.8-20.944 15.232 0 21.896 7.854 21.896 17.612 0 4.046-1.904 7.378-8.568 8.33l-29.75 4.522c-19.754 2.856-34.986 14.28-34.986 34.986zm44.506 13.328c-10.948 0-16.898-7.14-16.898-14.994 0-9.52 6.902-14.28 15.47-15.708L969.272 156v5.236c0 22.61-13.328 29.988-28.798 29.988z"
15-
fill="fill"
14+
:fill="fill"
1615
/>
1716
<rect width="257" height="257" rx="128.5" fill="url(#logo)" />
1817
<path
@@ -25,10 +24,10 @@
2524
x1="128.5"
2625
x2="128.5"
2726
y2="257"
28-
gradientUnits="userSpaceOnUse"
27+
gradient-units="userSpaceOnUse"
2928
>
30-
<stop stopColor="#7BCBD4" />
31-
<stop offset="1" stopColor="#29C6B7" />
29+
<stop stop-color="#7BCBD4" />
30+
<stop offset="1" stop-color="#29C6B7" />
3231
</linearGradient>
3332
</defs>
3433
</chakra.svg>

‎website/src/docs-theme/components/LogoIcon.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
width="auto"
66
viewBox="0 0 257 257"
77
fill="none"
8-
xmlns="http://www.w3.org/2000/svg"
98
>
109
<!-- eslint-enable -->
1110
<rect width="257" height="257" rx="128.5" fill="url(#mark)" />

‎website/src/docs-theme/components/MDXComponents/MdxBlockquote.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<c-alert
3+
mt="4"
4+
role="none"
5+
status="warning"
6+
variant="left-accent"
7+
as="blockquote"
8+
rounded="4px"
9+
my="1.5rem"
10+
>
11+
<slot />
12+
</c-alert>
13+
</template>

0 commit comments

Comments
 (0)