Skip to content

Commit 98aca9a

Browse files
shairezshairez
authored
Merge pull request #290 from shairez/pr-general-docs
2 parents fc80f2b + 678f9c5 commit 98aca9a

File tree

18 files changed

+688
-322
lines changed

18 files changed

+688
-322
lines changed

‎apps/website/src/components/footer/footer.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { GitHubIcon } from '../icons/GitHubIcon';
3+
import { DiscordIcon } from '../icons/discord';
4+
5+
export const Footer = component$(() => {
6+
return (
7+
<footer class="bg-gray-300 dark:bg-gray-900">
8+
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
9+
<nav
10+
class="-mx-5 -my-2 flex flex-wrap justify-center"
11+
aria-label="Footer"
12+
>
13+
<div class="px-5 py-2">
14+
<a
15+
href="/about"
16+
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
17+
>
18+
About
19+
</a>
20+
</div>
21+
<div class="px-5 py-2">
22+
<a
23+
href="/docs/tailwind"
24+
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
25+
>
26+
Documentation
27+
</a>
28+
</div>
29+
30+
<div class="px-5 py-2">
31+
<a
32+
href="https://discord.gg/PVWUUejrez"
33+
target="_blank"
34+
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
35+
>
36+
Community
37+
</a>
38+
</div>
39+
40+
<div class="px-5 py-2">
41+
<a
42+
href="https://www.w3.org/standards/webdesign/accessibility"
43+
target="_blank"
44+
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
45+
>
46+
Accessibility
47+
</a>
48+
</div>
49+
<div class="px-5 py-2">
50+
<a
51+
href="https://qwik.builder.io/docs"
52+
target="_blank"
53+
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
54+
>
55+
Qwik Documentation
56+
</a>
57+
</div>
58+
</nav>
59+
<div class="mt-8 flex items-center justify-center space-x-6">
60+
<a
61+
target="_blank"
62+
href="https://github.com/qwikifiers/qwik-ui"
63+
aria-label="Qwik-UI GitHub repository"
64+
class="text-gray-400 hover:text-gray-500"
65+
>
66+
<GitHubIcon />
67+
</a>
68+
<a
69+
target="_blank"
70+
href="https://discord.gg/PVWUUejrez"
71+
aria-label="Qwik-UI Discord server"
72+
class="text-gray-400 hover:text-gray-500"
73+
>
74+
<DiscordIcon />
75+
</a>
76+
</div>
77+
<p class="mt-8 text-center text-base dark:text-gray-400 text-gray-600">
78+
&copy; 2023 Qwik UI. All rights reserved.
79+
</p>
80+
</div>
81+
</footer>
82+
);
83+
});

‎apps/website/src/components/header/header.tsx

Lines changed: 107 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,120 @@
1-
import { $, component$, useContext, useSignal } from '@builder.io/qwik';
2-
import { useLocation } from '@builder.io/qwik-city';
3-
import { version } from '../../../../../package.json';
1+
import {
2+
$,
3+
component$,
4+
useComputed$,
5+
useContext,
6+
useSignal,
7+
} from '@builder.io/qwik';
8+
import { Link, useLocation } from '@builder.io/qwik-city';
9+
// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
10+
import { version as headlessVersion } from '../../../../../packages/kit-headless/package.json';
11+
// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
12+
import { version as tailwindVersion } from '../../../../../packages/kit-tailwind/package.json';
413
import { CloseIcon } from '../icons/CloseIcon';
514
import { GitHubIcon } from '../icons/GitHubIcon';
615
import { MenuIcon } from '../icons/MenuIcon';
716
import { MoonIcon } from '../icons/MoonIcon';
817
import { SunIcon } from '../icons/SunIcon';
918
import { Menu } from '../menu/menu';
10-
import { SelectTheme } from '../selectTheme/selectTheme';
1119
import { APP_STATE_CONTEXT_ID } from '../../_state/app-state-context-id';
12-
import { useCSSTheme } from '../../_state/use-css-theme';
1320

14-
export default component$(() => {
15-
const location = useLocation();
16-
const appState = useContext(APP_STATE_CONTEXT_ID);
17-
const menuOpenSignal = useSignal(false);
21+
export interface HeaderProps {
22+
showVersion?: boolean;
23+
showBottomBorder?: boolean;
24+
}
1825

19-
const toggleMenu$ = $(() => {
20-
menuOpenSignal.value = !menuOpenSignal.value;
21-
});
26+
export default component$(
27+
({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
28+
const location = useLocation();
29+
const appState = useContext(APP_STATE_CONTEXT_ID);
30+
const menuOpenSignal = useSignal(false);
2231

23-
const toggleDarkMode = $(() => {
24-
appState.mode = appState.mode === 'light' ? 'dark' : 'light';
25-
});
32+
const kitSignal = useComputed$(() => {
33+
if (location.url.pathname.indexOf('headless') !== -1) {
34+
return {
35+
name: 'Headless',
36+
version: headlessVersion,
37+
};
38+
}
39+
if (location.url.pathname.indexOf('tailwind') !== -1) {
40+
return {
41+
name: 'Tailwind',
42+
version: tailwindVersion,
43+
};
44+
}
45+
});
2646

27-
const isDocsRoute = location.url.pathname.indexOf('/docs/') !== -1;
47+
const toggleMenu$ = $(() => {
48+
menuOpenSignal.value = !menuOpenSignal.value;
49+
});
2850

29-
return (
30-
<header class="fixed w-full h-20 z-10 flex gap-8 p-4 items-center">
31-
<button
32-
type="button"
33-
aria-label="Toggle navigation"
34-
onClick$={toggleMenu$}
35-
class="block lg:hidden"
36-
>
37-
{menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
38-
</button>
39-
{menuOpenSignal.value && (
40-
<aside class="fixed top-0 left-0">
41-
<div class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"></div>
42-
<div class="fixed h-screen w-80 overflow-y-scroll bg-white">
43-
<Menu onClose$={toggleMenu$} />
44-
</div>
45-
</aside>
46-
)}
47-
<a href="/" class="lg:ml-8">
48-
<img src="/qwik-ui.png" class="h-12 w-auto object-contain" />
49-
</a>
50-
<div data-tip="Qwik-UI Version" class="mr-auto">
51-
v.{version}
52-
</div>
53-
<nav class="hidden sm:flex gap-4">
54-
<a href="/docs">Docs</a>
55-
<a href="/contact">Contact</a>
56-
</nav>
57-
{isDocsRoute && <SelectTheme />}
58-
<button
59-
type="button"
60-
aria-label="Toggle dark mode"
61-
onClick$={toggleDarkMode}
62-
>
63-
{appState.mode === 'dark' ? <MoonIcon /> : <SunIcon />}
64-
</button>
65-
<a
66-
target="_blank"
67-
href="https://github.com/qwikifiers/qwik-ui"
68-
aria-label="Qwik-UI GitHub repository"
69-
class="sm:mr-8"
51+
const toggleDarkMode = $(() => {
52+
appState.mode = appState.mode === 'light' ? 'dark' : 'light';
53+
});
54+
55+
return (
56+
<header
57+
class={[
58+
`fixed top-0 w-full h-20 z-20 bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
59+
showBottomBorder
60+
? `border-b-[1px] border-slate-300 dark:border-slate-600`
61+
: ``,
62+
]}
7063
>
71-
<GitHubIcon />
72-
</a>
73-
</header>
74-
);
75-
});
64+
<button
65+
type="button"
66+
aria-label="Toggle navigation"
67+
onClick$={toggleMenu$}
68+
class="block lg:hidden"
69+
>
70+
{menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
71+
</button>
72+
{menuOpenSignal.value && (
73+
<aside class="fixed top-0 left-0">
74+
<div class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"></div>
75+
<div class="fixed h-screen w-80 overflow-y-scroll bg-white">
76+
<Menu onClose$={toggleMenu$} />
77+
</div>
78+
</aside>
79+
)}
80+
<a href="/" class="lg:ml-8">
81+
<img src="/qwik-ui.png" class="h-12 w-auto object-contain" />
82+
</a>
83+
<div data-tip="Qwik-UI Version" class="mr-auto">
84+
{showVersion && (
85+
<div class="flex flex-col">
86+
<span> {kitSignal.value?.name} Kit </span>
87+
<span> v.{kitSignal.value?.version} </span>
88+
</div>
89+
)}
90+
</div>
91+
92+
<nav class="hidden sm:flex gap-4">
93+
<a href="/about">About</a>
94+
<a href="/docs/headless/introduction">Headless Kit</a>
95+
<a href="/docs/tailwind/introduction">Tailwind Kit</a>
96+
<a href="https://discord.gg/PVWUUejrez" target="_blank">
97+
Community
98+
</a>
99+
{/* <a href="/contact">Contact</a> */}
100+
</nav>
101+
102+
<button
103+
type="button"
104+
aria-label="Toggle dark mode"
105+
onClick$={toggleDarkMode}
106+
>
107+
{appState.mode === 'dark' ? <MoonIcon /> : <SunIcon />}
108+
</button>
109+
<a
110+
target="_blank"
111+
href="https://github.com/qwikifiers/qwik-ui"
112+
aria-label="Qwik-UI GitHub repository"
113+
class="sm:mr-8"
114+
>
115+
<GitHubIcon />
116+
</a>
117+
</header>
118+
);
119+
}
120+
);

‎apps/website/src/components/icons/discord.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const DiscordIcon = () => (
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 512 512"
5+
role="img"
6+
fill="currentColor"
7+
aria-label="Discord Logo"
8+
width="22"
9+
height="22"
10+
q:key="yB_0"
11+
>
12+
<path d="M464 66.52A50 50 0 00414.12 17L97.64 16A49.65 49.65 0 0048 65.52V392c0 27.3 22.28 48 49.64 48H368l-13-44 109 100zM324.65 329.81s-8.72-10.39-16-19.32C340.39 301.55 352.5 282 352.5 282a139 139 0 01-27.85 14.25 173.31 173.31 0 01-35.11 10.39 170.05 170.05 0 01-62.72-.24 184.45 184.45 0 01-35.59-10.4 141.46 141.46 0 01-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62 19.09 42.38 28.26c-7.27 9.18-16.23 19.81-16.23 19.81-53.51-1.69-73.85-36.47-73.85-36.47 0-77.06 34.87-139.62 34.87-139.62 34.87-25.85 67.8-25.12 67.8-25.12l2.42 2.9c-43.59 12.32-63.44 31.4-63.44 31.4s5.32-2.9 14.28-6.77c25.91-11.35 46.5-14.25 55-15.21a24 24 0 014.12-.49 205.62 205.62 0 0148.91-.48 201.62 201.62 0 0172.89 22.95s-19.13-18.15-60.3-30.45l3.39-3.86s33.17-.73 67.81 25.16c0 0 34.87 62.56 34.87 139.62 0-.28-20.35 34.5-73.86 36.19z"></path>
13+
<path d="M212.05 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.8 0 24.7-11.83 24.7-26.57.25-14.76-10.9-26.57-24.7-26.57zM300.43 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.81 0 24.7-11.83 24.7-26.57S314 218 300.43 218z"></path>
14+
</svg>
15+
);

‎apps/website/src/components/kit-selection-cta/kit-selection-cta.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,16 @@ export default component$(({ kit }: Kit) => {
77
return (
88
<a
99
href={`/docs/${kit}/introduction`}
10-
class="rounded-3xl border-2 overflow-hidden hover:-outline-offset-4 hover:outline-4 hover:outline hover:outline-[var(--qwik-light-blue)] hover:scale-[1.025] focus:-outline-offset-4 focus:outline-4 focus:outline focus:outline-[var(--qwik-light-blue)] focus:scale-[1.025] duration-150"
10+
class="rounded-3xl border-2 overflow-hidden
11+
hover:-outline-offset-4 hover:outline-4 hover:outline hover:outline-[var(--qwik-light-blue)] hover:scale-[1.025]
12+
focus:-outline-offset-4 focus:outline-4 focus:outline focus:outline-[var(--qwik-light-blue)] focus:scale-[1.025] duration-150"
1113
>
1214
<Card class={`max-w-md`}>
1315
<CardImage
1416
src={`/images/kit-cta-${kit}.png`}
1517
alt={`${kit} kit`}
16-
class="bg-gradient-to-r from-[var(--qwik-light-blue)] to-[var(--qwik-light-purple)] h-64 w-full object-cover"
18+
class="bg-gradient-to-r from-[var(--qwik-light-blue)]
19+
to-[var(--qwik-light-purple)] h-64 w-full object-cover"
1720
/>
1821
<CardBody class={`px-8 py-6`}>
1922
<CardTitle class="text-xl font-bold">

‎apps/website/src/root.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import globalStyles from './global.css?inline';
1616
import { APP_STATE_CONTEXT_ID } from './_state/app-state-context-id';
1717
import { AppState } from './_state/app-state.type';
1818
import { THEME_STORAGE_KEY, useCSSTheme } from './_state/use-css-theme';
19+
import { OldAppState } from './types';
20+
import { OLD_APP_STATE_CONTEXT_ID } from './constants';
1921

2022
export default component$(() => {
2123
/**
@@ -33,12 +35,19 @@ export default component$(() => {
3335
{ deep: true }
3436
);
3537

38+
useContextProvider(APP_STATE_CONTEXT_ID, appState);
39+
3640
useVisibleTask$(() => {
3741
appState.mode =
3842
localStorage.getItem(THEME_STORAGE_KEY) === 'dark' ? 'dark' : 'light';
3943
});
4044

41-
useContextProvider(APP_STATE_CONTEXT_ID, appState);
45+
// TODO: remove this old state once refactored
46+
const state = useStore<OldAppState>({
47+
darkMode: false,
48+
theme: 'NOT_DEFINED',
49+
});
50+
useContextProvider(OLD_APP_STATE_CONTEXT_ID, state);
4251

4352
useCSSTheme(appState);
4453

0 commit comments

Comments
 (0)