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

Commit 556000e

Browse files
carwackcarwack
committed
feat(docs): add the navbar to home layout
1 parent 7adc584 commit 556000e

File tree

8 files changed

+341
-3
lines changed

8 files changed

+341
-3
lines changed

‎website-new/assets/custom-theme.ts

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import { extendTheme } from "@chakra-ui/vue-next"
2+
import { mode } from "@chakra-ui/vue-theme-tools"
3+
4+
export default extendTheme({
5+
colors: {
6+
emerald: {
7+
DEFAULT: "#30855F",
8+
default: "#30855F",
9+
"50": "#B6E5D0",
10+
"100": "#A3DEC4",
11+
"200": "#7ED0AB",
12+
"300": "#58C393",
13+
"400": "#3EAA7A",
14+
"500": "#30855F",
15+
"600": "#226044",
16+
"700": "#153A29",
17+
"800": "#07150F",
18+
"900": "#000000",
19+
},
20+
discord: {
21+
primary: "#7289DA",
22+
accessible: "#5570D2",
23+
},
24+
},
25+
fonts: {
26+
heading: `Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
27+
body: `Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
28+
},
29+
shadows: {
30+
outline: `0 0 0 4px rgba(47, 133, 90, 0.62)`,
31+
search:
32+
"0 0 0 1px rgba(16,22,26,.1), 0 4px 8px rgba(16,22,26,.2), 0 18px 46px 6px rgba(16,22,26,.2)",
33+
},
34+
styles: {
35+
global: (props: any) => ({
36+
body: {
37+
color: mode("gray.700", "whiteAlpha.900")(props),
38+
".deleted": {
39+
color: "#ff8383 !important",
40+
fontStyle: "normal !important",
41+
},
42+
".inserted": {
43+
color: "#b5f4a5 !important",
44+
fontStyle: "normal !important",
45+
},
46+
},
47+
}),
48+
},
49+
textStyles: {
50+
heading: {
51+
fontFamily: "heading",
52+
textAlign: "center",
53+
fontWeight: "bold",
54+
letterSpacing: "-0.015em",
55+
lineHeight: "1.24",
56+
fontSize: { base: "2rem", md: "3.5rem" },
57+
},
58+
"heading-2": {
59+
fontFamily: "heading",
60+
textAlign: "center",
61+
fontWeight: "bold",
62+
letterSpacing: "-0.015em",
63+
lineHeight: "1.24",
64+
fontSize: { base: "1.75rem", md: "2.75rem" },
65+
},
66+
caps: {
67+
textTransform: "uppercase",
68+
fontSize: "sm",
69+
letterSpacing: "widest",
70+
fontWeight: "bold",
71+
},
72+
},
73+
mdx: {
74+
h1: {
75+
mt: "2rem",
76+
mb: ".25rem",
77+
lineHeight: 1.2,
78+
fontWeight: "bold",
79+
fontSize: "1.875rem",
80+
letterSpacing: "-.025em",
81+
},
82+
h2: {
83+
mt: "4rem",
84+
mb: "0.5rem",
85+
lineHeight: 1.3,
86+
fontWeight: "semibold",
87+
fontSize: "1.5rem",
88+
letterSpacing: "-.025em",
89+
"& + h3": {
90+
mt: "1.5rem",
91+
},
92+
},
93+
h3: {
94+
mt: "3rem",
95+
// mb: "0.5rem",
96+
lineHeight: 1.25,
97+
fontWeight: "semibold",
98+
fontSize: "1.25rem",
99+
letterSpacing: "-.025em",
100+
},
101+
h4: {
102+
mt: "3rem",
103+
lineHeight: 1.375,
104+
fontWeight: "semibold",
105+
fontSize: "1.125rem",
106+
},
107+
a: {
108+
color: "emerald.500",
109+
fontWeight: "semibold",
110+
transition: "color 0.15s",
111+
transitionTimingFunction: "ease-out",
112+
_hover: {
113+
color: "emerald.600",
114+
},
115+
},
116+
p: {
117+
mt: "1.25rem",
118+
lineHeight: 1.7,
119+
"blockquote &": {
120+
mt: 0,
121+
},
122+
},
123+
hr: {
124+
my: "4rem",
125+
},
126+
blockquote: {
127+
bg: "orange.100",
128+
borderWidth: "1px",
129+
borderColor: "orange.200",
130+
rounded: "lg",
131+
px: "1.25rem",
132+
py: "1rem",
133+
my: "1.5rem",
134+
},
135+
ul: {
136+
mt: "1.5rem",
137+
ml: "1.25rem",
138+
"blockquote &": { mt: 0 },
139+
"& > * + *": {
140+
mt: "0.25rem",
141+
},
142+
},
143+
code: {
144+
rounded: "sm",
145+
px: "1",
146+
fontSize: "0.875em",
147+
py: "2px",
148+
whiteSpace: "nowrap",
149+
lineHeight: "normal",
150+
},
151+
},
152+
})

‎website-new/components/TheNavbar.vue

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<chakra.nav
3+
h="60px"
4+
w="100%"
5+
:px="[4, 10, 12]"
6+
d="flex"
7+
position="fixed"
8+
align-items="center"
9+
shadow="sm"
10+
bg="white"
11+
z-index="10"
12+
border-top="6px solid"
13+
border-color="emerald.500"
14+
>
15+
<CFlex align-items="center" justify-content="flex-start" flex="1">
16+
<chakra.a
17+
aria-current="page"
18+
aria-label="Chakra UI Vue, Back to homepage"
19+
href="/"
20+
h="auto"
21+
d="flex"
22+
flex-direction="row"
23+
align-items="center"
24+
>
25+
<CBox w="30px" mr="2"><ChakraUILogoIcon /></CBox>
26+
<chakra.h1
27+
font-size="xl"
28+
font-family="heading"
29+
line-height="1.2"
30+
letter-spacing="tighter"
31+
:d="{ base: 'none', md: 'block' }"
32+
>
33+
chakra-ui/vue-next
34+
<CBadge
35+
font-family="mono"
36+
font-size="0.5em"
37+
text-transform="lowercase"
38+
>{{ pkg.version }}</CBadge
39+
>
40+
</chakra.h1>
41+
</chakra.a>
42+
</CFlex>
43+
<CFlex flex="1" justify-content="center">
44+
<CIcon name="search" mt="8px" />
45+
</CFlex>
46+
<CBox
47+
as="ul"
48+
d="flex"
49+
flex="1"
50+
align-items="center"
51+
list-style-type="none"
52+
pt="8px"
53+
justify-content="flex-end"
54+
>
55+
<CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
56+
<CIconButton
57+
as="a"
58+
variant-color="gray"
59+
aria-label="View GitHub"
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
href="https://github.com/chakra-ui/chakra-ui-vue-next"
63+
icon="github"
64+
/>
65+
</CBox>
66+
<CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
67+
<CIconButton
68+
as="router-link"
69+
variant-color="gray"
70+
aria-label="View the documentation"
71+
to="#"
72+
icon="book"
73+
/>
74+
</CBox>
75+
<CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
76+
<CIconButton
77+
as="a"
78+
variant-color="gray"
79+
aria-label="Join Discord channel"
80+
target="_blank"
81+
rel="noopener noreferrer"
82+
href="https://discord.gg/sq2Kp6x"
83+
icon="discord"
84+
/>
85+
</CBox>
86+
<CBox as="li">
87+
<CIconButton
88+
as="a"
89+
variant-color="gray"
90+
aria-label="Open menu"
91+
target="_blank"
92+
rel="noopener noreferrer"
93+
href="https://discord.gg/sq2Kp6x"
94+
icon="menu"
95+
/>
96+
</CBox>
97+
</CBox>
98+
</chakra.nav>
99+
</template>
100+
101+
<script setup lang="ts">
102+
import {
103+
chakra,
104+
CBadge,
105+
CBox,
106+
CFlex,
107+
CIcon,
108+
CIconButton,
109+
} from "@chakra-ui/vue-next"
110+
import ChakraUILogoIcon from "./ChakraLogoIcon.vue"
111+
import pkg from "../../packages/core/package.json"
112+
</script>

‎website-new/layouts/home.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
<template>
2-
Home
32
<slot />
43
</template>

‎website-new/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@chakra-ui/vue-system": "0.1.0-alpha.10",
2626
"@emotion/css": "^11.9.0",
2727
"@emotion/server": "^11.4.0",
28+
"feather-icons-paths": "^1.1.1",
2829
"prismjs": "^1.29.0",
2930
"vue": "^3.2.36",
3031
"vue-live": "^2.1.0",

‎website-new/pages/index.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<!-- <Navbar /> -->
2+
<TheNavbar />
33
<chakra.main :min-h="['auto', 'auto', '100vh']" w="100%" pt="60px" bg="white">
44
<!-- <Hero /> -->
55
<!-- <PilersHero /> -->
@@ -11,6 +11,7 @@
1111

1212
<script lang="ts" setup>
1313
import { chakra } from "@chakra-ui/vue-next"
14+
import TheNavbar from "../components/TheNavbar.vue"
1415
1516
definePageMeta({
1617
layout: "home",

‎website-new/plugins/chakra-ui-vue.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import ChakraUIVuePlugin, { chakra, chakraOptions } from "@chakra-ui/vue-next"
22
import { domElements } from "@chakra-ui/vue-system"
33

4+
import customTheme from "../assets/custom-theme"
5+
6+
import * as iconSet from "../utils/icons"
7+
8+
const { extendedIcons: extend, ...library } = iconSet
9+
410
export default defineNuxtPlugin((nuxtApp) => {
511
nuxtApp.vueApp.use(
612
ChakraUIVuePlugin,
@@ -9,6 +15,11 @@ export default defineNuxtPlugin((nuxtApp) => {
915
emotionCacheOptions: {
1016
key: "chakra",
1117
},
18+
extendTheme: customTheme,
19+
icons: {
20+
library,
21+
extend,
22+
},
1223
})
1324
)
1425

‎website-new/utils/icons.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
export {
2+
feBook,
3+
feMenu,
4+
feMessageCircle,
5+
fePackage,
6+
feSearch,
7+
feStar,
8+
feCompass,
9+
feExternalLink,
10+
feSun,
11+
feMoon,
12+
feGithub,
13+
} from "feather-icons-paths"
14+
15+
export const extendedIcons = {
16+
// https://icones.js.org/collection/simple-icons
17+
discord: {
18+
path: '<path fill="currentColor" d="M107.75 125.001s-4.5-5.375-8.25-10.125c16.375-4.625 22.625-14.875 22.625-14.875-5.125 3.375-10 5.75-14.375 7.375-6.25 2.625-12.25 4.375-18.125 5.375-12 2.25-23 1.625-32.375-.125-7.125-1.375-13.25-3.375-18.375-5.375-2.875-1.125-6-2.5-9.125-4.25-.375-.25-.75-.375-1.125-.625-.25-.125-.375-.25-.5-.375-2.25-1.25-3.5-2.125-3.5-2.125s6 10 21.875 14.75c-3.75 4.75-8.375 10.375-8.375 10.375-27.625-.875-38.125-19-38.125-19 0-40.25 18-72.875 18-72.875 18-13.5 35.125-13.125 35.125-13.125l1.25 1.5c-22.5 6.5-32.875 16.375-32.875 16.375s2.75-1.5 7.375-3.625c13.375-5.875 24-7.5 28.375-7.875.75-.125 1.375-.25 2.125-.25 7.625-1 16.25-1.25 25.25-.25 11.875 1.375 24.625 4.875 37.625 12 0 0-9.875-9.375-31.125-15.875l1.75-2S110 19.626 128 33.126c0 0 18 32.625 18 72.875 0 0-10.625 18.125-38.25 19zM49.625 66.626c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875.125-7.625-5.625-13.875-12.75-13.875zm45.625 0c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875s-5.625-13.875-12.75-13.875z" fillRule="nonzero" />',
19+
viewBox: "0 0 146 146",
20+
},
21+
// github: {
22+
// path: `<path fill="currentColor" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" />`,
23+
// viewBox: "0 0 20 20",
24+
// },
25+
youtube: {
26+
path: `<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" fill="currentColor"></path>`,
27+
viewbox: "0 0 24 24",
28+
},
29+
twitter: {
30+
path: `<path d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23z" fill="currentColor"></path>`,
31+
viewBox: "0 0 24 24",
32+
},
33+
// fa
34+
heart: {
35+
path: '<path d="M896 1536q-26 0-44-18L228 916q-10-8-27.5-26T145 824.5T77 727T23.5 606T0 468q0-220 127-344T478 0q62 0 126.5 21.5t120 58T820 148t76 68q36-36 76-68t95.5-68.5t120-58T1314 0q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z" fill="currentColor"></path>',
36+
viewBox: "0 0 1792 1536",
37+
},
38+
npm: {
39+
path: '<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">',
40+
viewBox: "0 0 512 165",
41+
},
42+
storybook: {
43+
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>`,
44+
viewBox: "0 0 256 319",
45+
},
46+
edit: {
47+
path: `<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83l3.75 3.75l1.83-1.83z" fill="currentColor"></path>`,
48+
viewBox: "0 0 24 24",
49+
},
50+
menu: {
51+
path: `<path fill="currentColor" d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path>`,
52+
viewBox: "0 0 1024 1024",
53+
},
54+
chevronLeft: {
55+
path: `<path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>`,
56+
viewBox: "0 0 24 24",
57+
},
58+
chevronRight: {
59+
path: `<path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>`,
60+
viewBox: "0 0 24 24",
61+
},
62+
}

‎yarn.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10198,7 +10198,7 @@ fd-slicer@~1.1.0:
1019810198
dependencies:
1019910199
pend "~1.2.0"
1020010200

10201-
feather-icons-paths@^1.0.8:
10201+
feather-icons-paths@^1.0.8, feather-icons-paths@^1.1.1:
1020210202
version "1.1.1"
1020310203
resolved "https://registry.yarnpkg.com/feather-icons-paths/-/feather-icons-paths-1.1.1.tgz#fa6161e5d459639992847f5fd968705b553d9a97"
1020410204
integrity sha512-/tJRkJiRD3U3ZxxAFahlAnFYyYf6FyupwHbWZCi4W+5DAmNeJVvmSXFeDvWY0VT+RTcqqpCdNtT3YnDUfZyTKw==

0 commit comments

Comments
 (0)