Skip to content

Commit 35c1360

Browse files
elcharitaselcharitas
authored
chore: Setup docs v2 (#28)
* fix: color mode types * chore: add color stores * feat: add poppins support fonts * feat: create ActionButton * feat: create button group * chore: update layout with new structure
1 parent e382353 commit 35c1360

File tree

12 files changed

+168
-48
lines changed

12 files changed

+168
-48
lines changed

‎src/app.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,18 @@
66
<link rel="icon" href="%sveltekit.assets%/logo-square.svg" sizes="any" type="image/svg+xml" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<title>Chakra UI Svelte</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"
13+
rel="stylesheet"
14+
/>
915
%sveltekit.head%
16+
<style>
17+
* {
18+
font-family: Poppins, sans-serif;
19+
}
20+
</style>
1021
</head>
1122
<body>
1223
<div>%sveltekit.body%</div>

‎src/docs/components/ActionButton.svelte‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script>
2+
import { current_component } from 'svelte/internal';
3+
import { Button, Icon, Link, VisuallyHidden } from '$lib/components';
4+
import { eventsForward } from '$lib/core';
5+
6+
import { hoverBg, color } from '../../stores';
7+
8+
export let icon = '';
9+
export let label = '';
10+
export let href = '';
11+
export let target = '_blank';
12+
export let rel = 'button';
13+
const SocialIcon = icon || 'span';
14+
const events = eventsForward(current_component);
15+
</script>
16+
17+
<Link {href} {target} {rel}>
18+
<Button
19+
sx={{
20+
bg: 'transparent',
21+
'&:hover': {
22+
bg: $hoverBg
23+
}
24+
}}
25+
size="xs"
26+
display="flex"
27+
justifyContent="center"
28+
alignItems="center"
29+
title={label}
30+
{events}
31+
>
32+
<VisuallyHidden>{label}</VisuallyHidden>
33+
<Icon as={SocialIcon} wrap="div" w="4" h="4" color={$color} />
34+
<slot />
35+
</Button>
36+
</Link>

‎src/docs/components/SocialButton.svelte‎

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

‎src/docs/layout/Footer.svelte‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
11
<script>
2-
import { Box, Stack, Text } from '$lib/components';
3-
import { colorModeValue } from '$lib/stores';
4-
5-
import SocialButton from '../components/SocialButton.svelte';
2+
import { Box, Stack, Text, Link } from '$lib/components';
63
import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
74
import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
5+
import FaLinkedin from 'svelte-icons/fa/FaLinkedin.svelte';
6+
import FaEmail from 'svelte-icons/fa/FaEnvelope.svelte';
87
9-
const bg = colorModeValue('gray.50', 'gray.900');
10-
const color = colorModeValue('gray.700', 'gray.200');
8+
import { bg, color } from '../../stores';
9+
import ActionButton from '../components/ActionButton.svelte';
1110
</script>
1211

1312
<Box bg={$bg} color={$color}>
1413
<Stack
1514
py={4}
16-
orientation="horizontal"
1715
spacing={4}
18-
justifyContent={{ base: 'center', md: 'space-between' }}
19-
alignItems={{ base: 'center', md: 'center' }}
16+
flexDirection="column"
17+
justifyContent="center"
18+
alignItems="center"
19+
fontSize="sm"
2020
>
21-
<Text>© 2022 Chakra UI. All rights reserved</Text>
22-
<Stack
23-
orientation="horizontal"
24-
spacing={6}
25-
justifyContent={{ base: 'center', md: 'space-between' }}
26-
sx={{ fontSize: 'sm' }}
27-
>
28-
<SocialButton label="Twitter" icon={FaTwitter} href="#" />
29-
<SocialButton label="YouTube" icon={FaGithub} href="#" />
21+
<Text>
22+
Proudly developed by
23+
<Link href="https://elcharitas.dev" target="_blank">Jonathan Irhodia</Link>
24+
</Text>
25+
<Stack>
26+
<ActionButton label="Follow on Github" icon={FaGithub} href="https://github.com" />
27+
<ActionButton label="Follow on Twitter" icon={FaTwitter} />
28+
<ActionButton label="Connect on Linkedin" icon={FaLinkedin} />
29+
<ActionButton
30+
label="Send me an Email"
31+
icon={FaEmail}
32+
href="mailto:[email protected]"
33+
/>
3034
</Stack>
3135
</Stack>
3236
</Box>

‎src/docs/layout/Navbar.svelte‎

Lines changed: 65 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,71 @@
11
<script>
2-
import { Box, Flex, Stack, Text, Button, IconButton, Logo } from '$lib/components';
3-
import { colorModeValue } from '$lib/stores';
2+
import { Box, Flex, Stack, ButtonGroup, Input, Logo } from '$lib/components';
3+
import { colorMode } from '$lib/stores';
4+
5+
import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
6+
import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
7+
import FaSun from 'svelte-icons/fa/FaSun.svelte';
8+
import FaMoon from 'svelte-icons/fa/FaMoon.svelte';
9+
10+
import { bg, inputBg, color } from '../../stores';
11+
import ActionButton from '../components/ActionButton.svelte';
412
</script>
513

6-
<Box>
7-
<Stack flex={{ base: 1, md: 0 }} justify={'flex-end'} direction={'row'} spacing={6}>
14+
<Box
15+
as="nav"
16+
h="16"
17+
bg={$bg}
18+
shadow="md"
19+
display="flex"
20+
alignItems="center"
21+
justifyContent="space-around"
22+
>
23+
<Stack direction="row" spacing={6}>
824
<Logo />
9-
<Button fontSize={'sm'} fontWeight={400} bgColor="green.500">Sign In</Button>
10-
<Button fontSize={'sm'} fontWeight={400}>Sign In</Button>
1125
</Stack>
26+
27+
<Flex justify="center" justifyContent="center" display={{ base: 'none', md: 'flex' }} />
28+
29+
<Flex justify="right" justifyContent="end">
30+
<Input
31+
placeholder="Search the docs."
32+
sx={{
33+
bg: $inputBg,
34+
color: $color,
35+
width: '300px',
36+
fontWeight: 400,
37+
fontSize: 'sm',
38+
_hover: {
39+
bg: $inputBg
40+
},
41+
_placeholder: {
42+
color: 'gray.400'
43+
}
44+
}}
45+
mr="8"
46+
display={{ base: 'none', md: 'inline' }}
47+
/>
48+
<ButtonGroup alignItems="center" justifyContent="space-between">
49+
<ActionButton
50+
label="Star the Github Repo"
51+
icon={FaGithub}
52+
href="https://github.com"
53+
display={{ base: 'none', md: 'inline' }}
54+
/>
55+
<ActionButton label="Twitter" icon={FaTwitter} display={{ base: 'none', md: 'inline' }} />
56+
{#if $colorMode === 'dark'}
57+
<ActionButton
58+
icon={FaSun}
59+
label="Switch to light Mode"
60+
on:click={() => colorMode.set('light')}
61+
/>
62+
{:else}
63+
<ActionButton
64+
icon={FaMoon}
65+
label="Switch to dark Mode"
66+
on:click={() => colorMode.set('dark')}
67+
/>
68+
{/if}
69+
</ButtonGroup>
70+
</Flex>
1271
</Box>

‎src/lib/components/buttons/ButtonGroup.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
import { current_component } from 'svelte/internal';
3+
import { eventsForward } from '$lib/core';
4+
import Stack from '../stacks/Stack.svelte';
5+
6+
const events = eventsForward(current_component);
7+
</script>
8+
9+
<Stack {events} {...$$props}>
10+
<slot />
11+
</Stack>

‎src/lib/components/buttons/IconButton.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
import Button from './Button.svelte';
55
import Icon from '$lib/components/basic/Icon.svelte';
66
7-
export let icon;
8-
export let wrap = "div";
7+
export let icon: string;
8+
export let wrap = 'div';
99
const events = eventsForward(current_component);
1010
</script>
1111

‎src/lib/components/buttons/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
export { default as Button } from './Button.svelte';
22
export { default as IconButton } from './IconButton.svelte';
3+
export { default as ButtonGroup } from './ButtonGroup.svelte';
4+
export { default as RippleButton } from './RippleButton.svelte';

‎src/lib/stores/colormode.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const isDarkMode = derived(colorMode, (colorMode) => colorMode === 'dark'
3636
* @param dark
3737
* @returns
3838
*/
39-
export const colorModeValue = (light: unknown, dark: unknown) => {
39+
export const colorModeValue = <T extends unknown>(light: T, dark: T) => {
4040
const store = createStore(() => light);
4141
colorMode.subscribe((val) => {
4242
store.set(val === 'light' ? light : dark);

‎src/lib/utils/store.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function createStore<T>(
1919

2020
return {
2121
initial,
22-
get: get.bind({}, store),
22+
get: get.bind({}, store) as T,
2323
...store
2424
};
2525
}

0 commit comments

Comments
 (0)