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

Commit 4eca603

Browse files
kocakoca
committed
feat(docs): add ComponentLinks to mdx components and update docs
1 parent 2bd093e commit 4eca603

File tree

8 files changed

+190
-13
lines changed

8 files changed

+190
-13
lines changed

‎website/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"vite-plugin-components": "^0.8.3",
3737
"vite-plugin-icons": "^0.3.3",
3838
"vite-plugin-md": "^0.6.0",
39-
"vite-plugin-mdx-vue": "^1.2.0",
39+
"vite-plugin-mdx-vue": "^1.3.0",
4040
"vite-plugin-pages": "^0.9.2",
4141
"vite-ssg": "^0.9.2"
4242
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const baseUrl = 'https://github.com/chakra-ui/chakra-ui'
1+
const baseUrl = 'https://github.com/chakra-ui/chakra-ui-vue-next'
22

33
const siteUrl = 'https://vue.chakra-ui.com'
44
const description =

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script lang="tsx">
2+
import { LinkProps } from '@chakra-ui/vue-layout'
3+
import { defineComponent, PropType } from 'vue'
4+
import { useColorModeValue } from '@chakra-ui/c-color-mode'
5+
6+
type ComponentLinkProps = LinkProps & {
7+
icon: string
8+
url: string
9+
iconSize?: string
10+
iconColor?: string
11+
}
12+
13+
export default defineComponent({
14+
props: {
15+
icon: String as PropType<ComponentLinkProps['icon']>,
16+
url: String as PropType<ComponentLinkProps['url']>,
17+
iconSize: String as PropType<ComponentLinkProps['iconSize']>,
18+
iconColor: String as PropType<ComponentLinkProps['iconColor']>,
19+
},
20+
setup(props, { slots }) {
21+
return () => {
22+
return (
23+
<c-link
24+
href={props.url}
25+
isExternal
26+
px="12px"
27+
display="flex"
28+
alignItems="center"
29+
minH="32px"
30+
borderWidth="1px"
31+
borderRadius="md"
32+
color={useColorModeValue('gray.600', 'whiteAlpha.700')}
33+
_hover={{
34+
color: useColorModeValue('gray.700', 'whiteAlpha.900'),
35+
boxShadow: 'sm',
36+
transform: 'translateY(-1px)',
37+
}}
38+
>
39+
<c-h-stack>
40+
<c-icon
41+
fontSize={props.iconSize}
42+
name={props.icon}
43+
color={props.iconColor}
44+
/>
45+
<c-text fontSize="sm" lineHeight="short">
46+
{slots}
47+
</c-text>
48+
</c-h-stack>
49+
</c-link>
50+
)
51+
}
52+
},
53+
})
54+
</script>

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script lang="tsx">
2+
import { defineComponent, PropType } from 'vue'
3+
import { useColorModeValue } from '@chakra-ui/c-color-mode'
4+
import siteConfig from '../../config/site-config'
5+
import { clippingParents } from '@popperjs/core'
6+
7+
export type ComponentLinksProps = {
8+
theme?: { componentName: string }
9+
// eslint-disable-next-line prettier/prettier
10+
github?: { url?: string, package?: string }
11+
npm?: { package: string }
12+
storybook?: { url: string }
13+
}
14+
15+
export default defineComponent({
16+
props: {
17+
theme: [Object] as PropType<ComponentLinksProps['theme']>,
18+
github: [Object] as PropType<ComponentLinksProps['github']>,
19+
npm: [Object] as PropType<ComponentLinksProps['npm']>,
20+
storybook: [Object] as PropType<ComponentLinksProps['storybook']>,
21+
},
22+
setup(props) {
23+
const githubRepoUrl = siteConfig.repo.url
24+
25+
const githubLink = (props.github?.url || props.github?.package) && (
26+
<c-wrap-item>
27+
<component-link
28+
url={
29+
props.github.url ||
30+
`${githubRepoUrl}/tree/main/packages/${props.github.package}`
31+
}
32+
icon="github"
33+
iconColor={useColorModeValue('gray.600', 'inherit').value}
34+
iconSize="1rem"
35+
>
36+
View source
37+
</component-link>
38+
</c-wrap-item>
39+
)
40+
41+
const npmLink = props.npm?.package && (
42+
<c-wrap-item>
43+
<component-link
44+
url={`https://www.npmjs.com/package/${props.npm.package}`}
45+
icon="npm"
46+
iconSize="2rem"
47+
iconColor="red.500"
48+
>
49+
{props.npm.package}
50+
</component-link>
51+
</c-wrap-item>
52+
)
53+
54+
const storybookLink = props.storybook?.url && (
55+
<c-wrap-item>
56+
<component-link
57+
url={props.storybook.url}
58+
icon="storybook"
59+
iconSize="1.25reme"
60+
iconColor="pink.500"
61+
>
62+
View storybook
63+
</component-link>
64+
</c-wrap-item>
65+
)
66+
const themeComponentLink = props.theme && (
67+
<c-wrap-item>
68+
<component-link
69+
url={`${githubRepoUrl}/tree/main/packages/theme/src/components/${props.theme.componentName}.ts`}
70+
icon="github"
71+
iconColor={useColorModeValue('gray.600', 'inherit').value}
72+
iconSize="1rem"
73+
>
74+
View theme source
75+
</component-link>
76+
</c-wrap-item>
77+
)
78+
79+
return () => {
80+
return (
81+
<c-wrap className="component-links" mt="2rem" spacing="4">
82+
{githubLink}
83+
{themeComponentLink}
84+
{npmLink}
85+
{storybookLink}
86+
</c-wrap>
87+
)
88+
}
89+
},
90+
})
91+
</script>

‎website/src/docs-theme/components/MdxComponents.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { h, renderSlot, resolveComponent, SetupContext } from 'vue'
1+
import { h, renderSlot, SetupContext } from 'vue'
22
/**
33
* MDX Components
44
*
@@ -36,7 +36,12 @@ const MdxChakra = (
3636
)
3737

3838
export const MdxComponents = {
39-
h1: LinkedHeading('h1', 'mdx.h1'),
39+
h1: (props: any, context: SetupContext) =>
40+
h(
41+
'chakra.h1',
42+
{ apply: 'mdx.h1', ...props },
43+
renderSlot(context.slots, 'default')
44+
),
4045
h2: LinkedHeading('h2', 'mdx.h2'),
4146
h3: LinkedHeading('h3', 'mdx.h3'),
4247
h4: LinkedHeading('h4', 'mdx.h4'),
@@ -83,4 +88,5 @@ export const MdxComponents = {
8388
li: MdxChakra({ as: 'li', customProps: { pb: '4px' } }),
8489
blockquote: 'MdxBlockquote',
8590
CarbonAd: 'CarbonAd',
91+
ComponentLinks: 'ComponentLinks',
8692
}

‎website/src/main.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,15 @@ export const createApp = ViteSSG(App, { routes }, ({ app, isClient }) => {
7171
'<path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96s96-43.1 96-96s-43.1-96-96-96zm246.4 80.5l-94.7-47.3l33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5l-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4l-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3l-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5l47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7l100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4l94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0c-49.9-49.9-49.9-131.1 0-181c49.9-49.9 131.1-49.9 181 0c49.9 49.9 49.9 131.1 0 181z" fill="currentColor"></path><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96s96-43.1 96-96s-43.1-96-96-96zm246.4 80.5l-94.7-47.3l33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5l-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4l-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3l-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5l47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7l100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4l94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0c-49.9-49.9-49.9-131.1 0-181c49.9-49.9 131.1-49.9 181 0c49.9 49.9 49.9 131.1 0 181z" fill="currentColor"></path>',
7272
viewBox: '0 0 512 512',
7373
},
74+
npm: {
75+
path:
76+
'<path d="M157.538 164.103h65.641v-32.82h65.642V0H157.538v164.103zM223.18 32.82H256v65.64h-32.82v-65.64zM315.077 0v131.282h65.64V32.821h32.821v98.461h32.821V32.821h32.82v98.461H512V0H315.077zM0 131.282h65.641V32.821h32.82v98.461h32.821V0H0v131.282z" fill="currentColor">',
77+
viewBox: '0 0 512 165',
78+
},
79+
storybook: {
80+
path: `<path d="M9.872 293.324L.012 30.574C-.315 21.895 6.338 14.54 15.005 14L238.494.032c8.822-.552 16.42 6.153 16.972 14.975c.02.332.031.665.031.998v286.314c0 8.839-7.165 16.004-16.004 16.004c-.24 0-.48-.005-.718-.016l-213.627-9.595c-8.32-.373-14.963-7.065-15.276-15.388z" id="IconifyId-179377ab348-8608e7-6"></path></defs><mask id="IconifyId-179377ab348-8608e7-7" fill="#fff"><use xlink:href="#IconifyId-179377ab348-8608e7-6"></use></mask><use fill="#FF4785" xlink:href="#IconifyId-179377ab348-8608e7-6"></use><path d="M188.665 39.127l1.527-36.716L220.884 0l1.322 37.863a2.387 2.387 0 0 1-3.864 1.96l-11.835-9.325l-14.013 10.63a2.387 2.387 0 0 1-3.829-2.001zm-39.251 80.853c0 6.227 41.942 3.243 47.572-1.131c0-42.402-22.752-64.684-64.415-64.684c-41.662 0-65.005 22.628-65.005 56.57c0 59.117 79.78 60.249 79.78 92.494c0 9.052-4.433 14.426-14.184 14.426c-12.705 0-17.729-6.49-17.138-28.552c0-4.786-48.458-6.278-49.936 0c-3.762 53.466 29.548 68.887 67.665 68.887c36.935 0 65.892-19.687 65.892-55.326c0-63.36-80.961-61.663-80.961-93.06c0-12.728 9.455-14.425 15.07-14.425c5.909 0 16.546 1.042 15.66 24.801z" fill="#FFF" mask="url(#IconifyId-179377ab348-8608e7-7)"></path>`,
81+
viewBox: '0 0 256 319',
82+
},
7483
},
7584
},
7685
})

‎website/src/pages/docs/index.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,23 @@
22

33
---
44

5+
### Video Player
6+
7+
todo
8+
9+
<c-box mt={3}>
10+
<c-aspect-ratio ratio={16 / 8.84}>
11+
<iframe width="560" height="315" src="https://www.youtube.com/embed/wI2vqXsjsIo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
12+
</c-aspect-ratio>
13+
</c-box>
14+
15+
### Component links
16+
17+
<br />
18+
19+
<ComponentLinks theme={{ componentName: "close-button" }} github={{ package: "close-button" }} npm={{ package: "@chakra-ui/close-button" }} storybook={{ url: 'url' }} />
20+
---
21+
522
### Carbon Ad
623

724
<carbon-ad />

‎yarn.lock

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13939,13 +13939,13 @@ vite-plugin-md@^0.6.0:
1393913939
gray-matter "^4.0.2"
1394013940
markdown-it "^12.0.4"
1394113941

13942-
vite-plugin-mdx-vue@^1.2.0:
13943-
version "1.2.0"
13944-
resolved "https://registry.yarnpkg.com/vite-plugin-mdx-vue/-/vite-plugin-mdx-vue-1.2.0.tgz#c5af215312f71a6132347a37a5bb2429a86bc658"
13945-
integrity sha512-Hz7hvdRKsJBAdyzuOK8idzsK4JGsp6YP4HPt6OJBSWiCUm03CpYeZpZMznkB9Y8JNieRU/lBpj5DPK0FH3gD4Q==
13942+
vite-plugin-mdx-vue@^1.3.0:
13943+
version "1.3.0"
13944+
resolved "https://registry.yarnpkg.com/vite-plugin-mdx-vue/-/vite-plugin-mdx-vue-1.3.0.tgz#dd75cc0375c47797679110b26d0666877bf118c7"
13945+
integrity sha512-cHdi/UH+xIqZaoLmYMtNBrKuEHUMXKa7qtLuEZ8XD4ExBoJ79ZGGovJuWwjBr5Babm/CYHr4RRFgMnL5YZxaww==
1394613946
dependencies:
1394713947
"@vue/server-renderer" "^3.0.9"
13948-
vue-mdx-bundler "1.2.0"
13948+
vue-mdx-bundler "1.3.0"
1394913949
xdm "^1.5.1"
1395013950

1395113951
vite-plugin-pages@^0.9.2:
@@ -14063,10 +14063,10 @@ vue-jest@^5.0.0-alpha.7:
1406314063
extract-from-css "^0.4.4"
1406414064
tsconfig "^7.0.0"
1406514065

14066-
vue-mdx-bundler@1.2.0:
14067-
version "1.2.0"
14068-
resolved "https://registry.yarnpkg.com/vue-mdx-bundler/-/vue-mdx-bundler-1.2.0.tgz#f99804e65cc7b89d8b135d721822b2e5c924e6f1"
14069-
integrity sha512-tPKMjB9Kyb6A4xUubIpCyaBbAW3kmUiOadfYo4vXQTg5s17NmCXPZiQU2Dpt1LT2JrpqdNE/3lnPXdampdYBjw==
14066+
vue-mdx-bundler@1.3.0:
14067+
version "1.3.0"
14068+
resolved "https://registry.yarnpkg.com/vue-mdx-bundler/-/vue-mdx-bundler-1.3.0.tgz#c08e0cbe3fc21a314d3d1b72d7bfb2377540dcba"
14069+
integrity sha512-pIteIYX5ez2FmI0dol5p1XgiEzHacAPSFyAOdRmj+HNI/ZeyEKbN50OXCNqgCal/ACA/ZCaRBX0lZ7+arCn9Aw==
1407014070
dependencies:
1407114071
"@babel/core" "^7.13.16"
1407214072
"@babel/runtime" "^7.13.17"

0 commit comments

Comments
 (0)