Skip to content

Commit bcd1627

Browse files
shairezshairez
authored
Merge pull request #366 from qwikifiers/pr-fix-docs
2 parents 690e856 + 7f9cc2d commit bcd1627

File tree

17 files changed

+148
-285
lines changed

17 files changed

+148
-285
lines changed

‎apps/website/src/_state/app-state.type.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export interface AppState {
22
mode: 'light' | 'dark';
3+
isSidebarOpened: boolean;
34
featureFlags?: {
45
showTailwind?: boolean;
56
};

‎apps/website/src/_state/kit-name.type.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum KitName {
2+
HEADLESS = 'healdess',
3+
TAILWIND = 'tailwind',
4+
NO_KIT = 'no-kit',
5+
}

‎apps/website/src/global.css‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,33 @@
66
font-family: 'Poppins';
77
font-style: normal;
88
font-weight: 400;
9-
font-display: swap;
9+
font-display: fallback;
1010
src: url('/fonts/poppins-400.woff2') format('woff2');
1111
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
12-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
13-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
12+
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
13+
U+FEFF, U+FFFD;
1414
}
1515

1616
@font-face {
1717
font-family: 'Poppins';
1818
font-style: normal;
1919
font-weight: 500;
20-
font-display: swap;
20+
font-display: fallback;
2121
src: url('/fonts/poppins-500.woff2') format('woff2');
2222
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
23-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
24-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
23+
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
24+
U+FEFF, U+FFFD;
2525
}
2626

2727
@font-face {
2828
font-family: 'Poppins';
2929
font-style: normal;
3030
font-weight: 700;
31-
font-display: swap;
31+
font-display: fallback;
3232
src: url('/fonts/poppins-700.woff2') format('woff2');
3333
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
34-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
35-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
34+
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
35+
U+FEFF, U+FFFD;
3636
}
3737

3838
:root {
@@ -100,7 +100,10 @@ html {
100100
background-color: var(--color-bg) !important;
101101
color: var(--color-text) !important;
102102

103-
font-family: 'Poppins', sans-serif;
103+
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system,
104+
BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
105+
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol,
106+
'Noto Color Emoji';
104107
}
105108

106109
body {

‎apps/website/src/root.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,28 @@ export default component$(() => {
2828
*/
2929
useStyles$(globalStyles);
3030

31-
const appState = useStore<AppState>({
31+
const rootStore = useStore<AppState>({
3232
mode: 'light',
33+
isSidebarOpened: false,
3334
featureFlags: {
3435
showTailwind: import.meta.env.DEV,
3536
},
3637
});
3738

38-
useContextProvider(ROOT_STORE_CONTEXT_ID, appState);
39+
useContextProvider(ROOT_STORE_CONTEXT_ID, rootStore);
3940

4041
useVisibleTask$(() => {
41-
appState.mode =
42+
rootStore.mode =
4243
localStorage.getItem(THEME_STORAGE_KEY) === 'dark' ? 'dark' : 'light';
4344
});
4445

4546
// TODO: remove this old state once refactored
4647
const state = useStore<OldAppState>({
4748
darkMode: false,
48-
theme: 'NOT_DEFINED',
4949
});
5050
useContextProvider(OLD_APP_STATE_CONTEXT_ID, state);
5151

52-
useCSSTheme(appState);
52+
useCSSTheme(rootStore);
5353

5454
return (
5555
<QwikCityProvider>
@@ -58,7 +58,12 @@ export default component$(() => {
5858
<link rel="manifest" href="/manifest.json" />
5959
<RouterHead />
6060
</head>
61-
<body lang="en">
61+
<body
62+
lang="en"
63+
class={{
64+
'overflow-y-hidden': rootStore.isSidebarOpened,
65+
}}
66+
>
6267
<RouterOutlet />
6368
<ServiceWorkerRegister />
6469
</body>

‎apps/website/src/routes/(main)/about/[email protected]‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { component$ } from '@builder.io/qwik';
2-
import { DocumentHead, Link } from '@builder.io/qwik-city';
2+
import { DocumentHead } from '@builder.io/qwik-city';
33

44
export default component$(() => {
55
return (
@@ -76,11 +76,11 @@ export default component$(() => {
7676
SEO advantages, and accessibility.
7777
</p>
7878

79-
<Link href="/docs/tailwind">
79+
<a href="/docs/headless/introduction">
8080
<h2 class="text-center underline hover:no-underline">
8181
Get started with Qwik UI today!
8282
</h2>
83-
</Link>
83+
</a>
8484
</div>
8585
</>
8686
);

‎apps/website/src/routes/_components/footer/footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ export const Footer = component$(() => {
2020
</div>
2121
<div class="px-5 py-2">
2222
<a
23-
href="/docs/tailwind"
23+
href="/docs/headless/introduction"
2424
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
2525
>
26-
Documentation
26+
Headless Kit
2727
</a>
2828
</div>
2929

‎apps/website/src/routes/_components/header/header.tsx‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import { $, component$, useComputed$, useSignal } from '@builder.io/qwik';
1+
import { $, component$, useComputed$ } from '@builder.io/qwik';
22
import { useLocation } from '@builder.io/qwik-city';
33
// eslint-disable-next-line @nx/enforce-module-boundaries
44
import { version as headlessVersion } from '../../../../../../packages/kit-headless/package.json';
55
// eslint-disable-next-line @nx/enforce-module-boundaries
6+
import { KitName } from 'apps/website/src/_state/kit-name.type';
67
import { useRootStore } from 'apps/website/src/_state/use-root-store';
78
import { version as tailwindVersion } from '../../../../../../packages/kit-tailwind/package.json';
9+
import { useSelectedKit } from '../../docs/use-selected-kit';
810
import { CloseIcon } from '../icons/CloseIcon';
911
import { GitHubIcon } from '../icons/GitHubIcon';
1012
import { MenuIcon } from '../icons/MenuIcon';
1113
import { MoonIcon } from '../icons/MoonIcon';
1214
import { SunIcon } from '../icons/SunIcon';
13-
import { Menu } from '../menu/menu';
1415
import { Logo } from '../icons/logo';
1516

1617
export interface HeaderProps {
@@ -22,28 +23,23 @@ export default component$(
2223
({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
2324
const rootStore = useRootStore();
2425
const location = useLocation();
25-
26-
const menuOpenSignal = useSignal(false);
26+
const selectedKitSig = useSelectedKit();
2727

2828
const kitSignal = useComputed$(() => {
29-
if (location.url.pathname.indexOf('headless') !== -1) {
29+
if (selectedKitSig.value === KitName.HEADLESS) {
3030
return {
3131
name: 'Headless',
3232
version: headlessVersion,
3333
};
3434
}
35-
if (location.url.pathname.indexOf('tailwind') !== -1) {
35+
if (selectedKitSig.value === KitName.TAILWIND) {
3636
return {
3737
name: 'Tailwind',
3838
version: tailwindVersion,
3939
};
4040
}
4141
});
4242

43-
const toggleMenu$ = $(() => {
44-
menuOpenSignal.value = !menuOpenSignal.value;
45-
});
46-
4743
const toggleDarkMode = $(() => {
4844
rootStore.mode = rootStore.mode === 'light' ? 'dark' : 'light';
4945
});
@@ -57,18 +53,6 @@ export default component$(
5753
: ``,
5854
]}
5955
>
60-
{menuOpenSignal.value && (
61-
<aside class="fixed top-20 left-0 lg:hidden">
62-
<div
63-
onClick$={toggleMenu$}
64-
class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"
65-
></div>
66-
<div class="fixed h-screen w-screen sm:w-80 overflow-y-scroll bg-white dark:bg-[var(--color-bg)]">
67-
<Menu onClose$={toggleMenu$} />
68-
</div>
69-
</aside>
70-
)}
71-
7256
<a href="/" class="lg:ml-8">
7357
<Logo />
7458
</a>
@@ -82,7 +66,7 @@ export default component$(
8266
)}
8367
</div>
8468

85-
<nav class="hidden sm:flex gap-4">
69+
<nav class="hidden lg:flex gap-4">
8670
<a href="/about">About</a>
8771
<a href="/docs/headless/introduction">Headless Kit</a>
8872
{rootStore.featureFlags?.showTailwind && (
@@ -112,10 +96,12 @@ export default component$(
11296
<button
11397
type="button"
11498
aria-label="Toggle navigation"
115-
onClick$={toggleMenu$}
99+
onClick$={() => {
100+
rootStore.isSidebarOpened = !rootStore.isSidebarOpened;
101+
}}
116102
class="block lg:hidden"
117103
>
118-
{menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
104+
{rootStore.isSidebarOpened ? <CloseIcon /> : <MenuIcon />}
119105
</button>
120106
</header>
121107
);

‎apps/website/src/routes/_components/icons/CloseIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const CloseIcon = () => (
44
fill="none"
55
strokeLinecap="round"
66
aria-hidden="true"
7-
class="w-6 h-6 p-1 rounded-xl stroke-black dark:stroke-white hover:bg-gray-100 dark:hover:bg-slate-600"
7+
class="w-8 h-8 p-1 rounded-xl stroke-black dark:stroke-white hover:bg-gray-100 dark:hover:bg-slate-600"
88
>
99
<path d="m1.5 1 7 7M8.5 1l-7 7" />
1010
</svg>

0 commit comments

Comments
 (0)