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

Commit 5db6e92

Browse files
kocakoca
committed
feat(docs): add page container footer and refactor layout
1 parent 25bbbfb commit 5db6e92

File tree

12 files changed

+163
-40
lines changed

12 files changed

+163
-40
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const siteConfig = {
1919
url: 'https://discord.gg/dQHfcWF',
2020
},
2121
youtube: 'https://www.youtube.com/channel/UC4TmDovH46TB4S0SM0Y4CIg',
22+
twitter: 'https://twitter.com/chakraui_vue',
2223
seo: {
2324
title: 'Chakra UI',
2425
titleTemplate: '%s - Chakra UI',

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="tsx">
2+
import { defineComponent } from 'vue'
3+
import siteConfig from '@/config/site-config'
4+
5+
type FooterLinkProps = {
6+
icon?: string
7+
href?: string
8+
label?: string
9+
}
10+
11+
const FooterLink = ({ icon, href, label }: FooterLinkProps) => (
12+
<c-link display="inline-block" href={href} aria-label={label} isExternal>
13+
<c-icon name={icon} fontSize="xl" color="gray.400" />
14+
</c-link>
15+
)
16+
17+
const links = [
18+
{
19+
icon: 'twitter',
20+
label: 'Twitter',
21+
href: siteConfig.twitter,
22+
},
23+
24+
{
25+
icon: 'github',
26+
label: 'GitHub',
27+
href: siteConfig.repo.url,
28+
},
29+
30+
{
31+
icon: 'youtube',
32+
label: 'YouTube',
33+
href: siteConfig.youtube,
34+
},
35+
]
36+
37+
export default defineComponent({
38+
setup() {
39+
return () => {
40+
return (
41+
<c-box as="footer" mt="12" textAlign="center">
42+
<c-text fontSize="sm">
43+
<span> &copy; Chakra UI made </span>
44+
<span>by contributors</span>
45+
</c-text>
46+
<c-stack mt="4" direction="row" spacing="12px" justify="center">
47+
{links.map((link) => (
48+
<FooterLink key={link.href} {...link} />
49+
))}
50+
</c-stack>
51+
</c-box>
52+
)
53+
}
54+
},
55+
})
56+
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
right="0"
1111
width="full"
1212
>
13-
<chakra.div height="4.5rem" mx="auto" maxW="1200px">
13+
<chakra.div height="4.5rem" mx="auto" maxW="8xl">
1414
<!-- content -->
1515

1616
<CFlex w="100%" h="100%" px="6" align="center" justify="space-between">

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<c-link :href="props.href" isExternal>
3+
<c-stack
4+
display="inline-flex"
5+
direction="row"
6+
spacing="1"
7+
align="center"
8+
opacity="0.7"
9+
>
10+
<c-icon name="edit" mr="1" />
11+
<chakra.span>Edit this page</chakra.span>
12+
</c-stack>
13+
</c-link>
14+
</template>
15+
<script setup lang="ts">
16+
import { defineProps } from 'vue-demi'
17+
18+
const props = defineProps<{ href?: string }>()
19+
</script>

‎website/src/docs-theme/layout/LayoutBlog.vue

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎website/src/docs-theme/layout/LayoutDefault.vue

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎website/src/docs-theme/layout/LayoutDocs.vue

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎website/src/docs-theme/layout/LayoutMdx.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<page-container :frontmatter="frontmatter" :headings="headings">
3+
<slot />
4+
<template #sidebar>hello sidebar</template>
5+
</page-container>
6+
</template>
7+
8+
<script lang="ts" setup>
9+
const props = defineProps<{ frontmatter: { title: string } }>()
10+
const headings = []
11+
</script>

‎website/src/docs-theme/layout/MdxLayoutWrapper.vue

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,9 @@
55
:bg="bg"
66
:color="color"
77
>
8-
<app-header :frontmatter="frontmatter" />
9-
<layout-docs v-if="isDocs">
8+
<layout-mdx :frontmatter="frontmatter">
109
<slot />
11-
</layout-docs>
12-
<layout-blog v-else-if="isBlog">
13-
<slot />
14-
</layout-blog>
15-
<layout-default v-else class="default">
16-
<slot />
17-
</layout-default>
10+
</layout-mdx>
1811
</chakra.div>
1912
</template>
2013

@@ -32,6 +25,14 @@ const isBlog = computed(() => path.startsWith(blogPath))
3225
const isDocs = computed(() => path.startsWith(docsPath))
3326
const props = defineProps<{ frontmatter: { title: string } }>()
3427
28+
const layoutMap = {
29+
blog: 'layout-mdx',
30+
guides: 'layout-mdx',
31+
docs: 'layout-mdx',
32+
changelog: 'layout-mdx',
33+
default: 'page-container',
34+
}
35+
3536
const bg = useColorModeValue('white', 'gray.800')
3637
const color = useColorModeValue('gray.700', 'whiteAlpha.900')
3738
useHead({

‎website/src/docs-theme/layout/PageContainer.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<!-- todo: skip-nav-link -->
3+
<!-- todo: ad-banner -->
4+
<app-header></app-header>
5+
<c-box as="main" class="main-content" w="full" maxW="8xl" mx="auto">
6+
<c-box :display="{ md: 'flex' }">
7+
<slot name="sidebar"></slot>
8+
<c-box flex="1" minW="0">
9+
<!-- todo: skin-nav-content -->
10+
<c-box id="content" px="5" mx="auto" minH="76vh">
11+
<c-flex>
12+
<c-box minW="0" flex="auto" :px="{ base: '4', sm: '6', xl: '8' }">
13+
<chakra.h1> {{ frontmatter.title }}</chakra.h1>
14+
<c-badge
15+
v-if="frontmatter.version"
16+
color-scheme="teal"
17+
letter-spacing="wider"
18+
>v{{ frontmatter.version }}</c-badge
19+
>
20+
<slot> Default Slots </slot>
21+
<c-box mt="40px">
22+
<c-box
23+
><edit-page-link :href="frontmatter.editUrl"></edit-page-link
24+
></c-box>
25+
<slot name="pagination"></slot>
26+
</c-box>
27+
<c-box pb="20">
28+
<app-footer />
29+
</c-box>
30+
</c-box>
31+
<c-box>table of contents</c-box>
32+
</c-flex>
33+
</c-box>
34+
</c-box>
35+
</c-box>
36+
</c-box>
37+
</template>
38+
<script setup lang="ts">
39+
import { defineProps } from 'vue-demi'
40+
41+
const props = defineProps<{
42+
frontmatter: {
43+
slug?: string
44+
title: string
45+
description?: string
46+
editUrl?: string
47+
version?: string
48+
}
49+
headings: any[]
50+
}>()
51+
</script>

0 commit comments

Comments
 (0)