Skip to content

Commit 332db33

Browse files
thejacksheltonthejackshelton
committed
feat(docs): major docs redesign
1 parent bdc9e95 commit 332db33

File tree

24 files changed

+296
-261
lines changed

24 files changed

+296
-261
lines changed

‎apps/website/src/global.css

Lines changed: 16 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,6 @@
22
@tailwind base;
33
@tailwind utilities;
44

5-
@font-face {
6-
font-family: 'Poppins';
7-
font-style: normal;
8-
font-weight: 400;
9-
font-display: fallback;
10-
src: url('/fonts/poppins-400.woff2') format('woff2');
11-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
12-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
13-
}
14-
15-
@font-face {
16-
font-family: 'Poppins';
17-
font-style: normal;
18-
font-weight: 500;
19-
font-display: fallback;
20-
src: url('/fonts/poppins-500.woff2') format('woff2');
21-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
22-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
23-
}
24-
25-
@font-face {
26-
font-family: 'Poppins';
27-
font-style: normal;
28-
font-weight: 700;
29-
font-display: fallback;
30-
src: url('/fonts/poppins-700.woff2') format('woff2');
31-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
32-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
33-
}
34-
355
:root {
366
--qwik-dark-blue: #006ce9;
377
--qwik-light-blue: #18b6f6;
@@ -146,6 +116,22 @@ body {
146116
min-height: 100%;
147117
}
148118

119+
h1,
120+
h2,
121+
h3,
122+
h4,
123+
h5,
124+
h6 {
125+
overflow-wrap: break-word;
126+
line-height: 1.2;
127+
}
128+
129+
p,
130+
ul,
131+
ol {
132+
line-height: 1.45;
133+
}
134+
149135
.layout {
150136
grid-template-columns: 25% 70%;
151137
grid-template-areas: 'sidebar content';
@@ -162,9 +148,4 @@ body {
162148
.accordion-animation-1[data-state='closed'] {
163149
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
164150
}
165-
166-
.bg-wallpaper {
167-
background-color: #020617;
168-
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23475569' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
169-
}
170151
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { $, component$, useComputed$ } from '@builder.io/qwik';
2-
import { useLocation } from '@builder.io/qwik-city';
32
// eslint-disable-next-line @nx/enforce-module-boundaries
43
import { version as headlessVersion } from '../../../../../../packages/kit-headless/package.json';
54
// eslint-disable-next-line @nx/enforce-module-boundaries
@@ -22,7 +21,6 @@ export interface HeaderProps {
2221
export default component$(
2322
({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
2423
const rootStore = useRootStore();
25-
const location = useLocation();
2624
const selectedKitSig = useSelectedKit();
2725

2826
const kitSignal = useComputed$(() => {
@@ -44,11 +42,12 @@ export default component$(
4442
rootStore.mode = rootStore.mode === 'light' ? 'dark' : 'light';
4543
});
4644

45+
// we can add back the header animation if you'd like. Maybe something springy with motion?
4746
return (
4847
<header
4948
class={[
5049
`fixed top-0 w-full h-20 md:h-20 z-20 md:bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
51-
`ease-in-out duration-300 shadow-light-medium dark:shadow-dark-medium`,
50+
`shadow-light-medium dark:shadow-dark-medium`,
5251
rootStore.isSidebarOpened
5352
? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
5453
: 'bg-[var(--color-bg)]',

‎apps/website/src/routes/docs.css

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,8 @@
1313
@apply mb-4;
1414
}
1515

16-
h1,
17-
h2,
18-
h3,
19-
h4,
20-
h5,
21-
h6 {
22-
overflow-wrap: break-word;
23-
}
24-
2516
h1 {
26-
@apply text-5xl font-bold mb-12;
17+
@apply text-3xl md:text-5xl md:mb-12 font-[800] tracking-wide;
2718
}
2819

2920
h2 {
@@ -43,7 +34,7 @@
4334
}
4435

4536
blockquote {
46-
@apply bg-[#BFDBFE] dark:bg-[#312E81] p-4 lg:p-6 dark:border-[#F3F3F3] border-[#333333] rounded-xl my-4;
37+
@apply bg-qwikui-blue-800 text-white shadow-light-medium dark:shadow-dark-medium dark:bg-qwikui-purple-800 p-4 lg:p-6 dark:border-[#F3F3F3] border-[#333333] rounded-xl my-4;
4738
}
4839

4940
ul {
@@ -56,15 +47,11 @@
5647
}
5748

5849
a {
59-
@apply border-b-[1.25px] border-[#00B9FC] font-bold transition-[border-radius] duration-500 ease-in;
60-
}
61-
62-
a:hover {
63-
@apply border-b-2;
50+
@apply border-b-[1.5px] border-qwikui-blue-500 dark:border-qwikui-purple-400 transition transition-colors duration-300 ease-step hover:border-qwikui-blue-600 font-bold;
6451
}
6552

6653
p code {
67-
@apply bg-transparent px-2 mx-1 rounded-md dark:bg-transparent border-[1px] dark:border-white w-max border-[#333333];
54+
@apply bg-white text-gray-950 shadow-dark-low dark:shadow-dark-low px-2 py-[2px] mx-1 rounded-md font-[600] border-[1px] dark:border-white w-max border-[#333333];
6855
}
6956

7057
/* adds sufficient padding to the table items / API Component */
@@ -77,6 +64,6 @@
7764
}
7865

7966
blockquote a {
80-
@apply border-[#333] dark:border-[#F3F3F3];
67+
@apply border-qwikui-blue-200 hover:border-qwikui-blue-100 dark:border-qwikui-purple-100 dark:hover:border-qwikui-purple-200;
8168
}
8269
}

‎apps/website/src/routes/docs/_components/api-table/api-table.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ type APITableProps = {
1212
export const APITable = component$(({ propDescriptors }: APITableProps) => {
1313
return (
1414
<div class="overflow-auto">
15-
<table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full mb-6">
16-
<tbody class="divide-y divide-gray-700">
15+
<table class="w-full min-w-[540px] border-b border-slate-700 text-left sm:min-w-full mb-6">
16+
<tbody class="divide-y divide-slate-700">
1717
<tr class="w-1/4 dark:text-white ">
1818
<td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
1919
Prop
@@ -25,19 +25,19 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
2525
return (
2626
<tr key={propDescriptor.name}>
2727
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
28-
<code class="bg-indigo-200 dark:bg-indigo-900 rounded-md mr-6">
28+
<code class="bg-qwikui-blue-100 dark:bg-qwikui-purple-800 rounded-md mr-6">
2929
{propDescriptor.name}
3030
</code>
3131
</td>
32-
<td class="prose prose-sm py-3 align-baseline">
32+
<td class="py-3 align-baseline">
3333
<span class="flex items-center">
34-
<code class="bg-gray-300 dark:bg-gray-700">
34+
<code class="bg-slate-300 dark:bg-slate-700 rounded-md px-2">
3535
{propDescriptor.type}
3636
</code>
3737
{propDescriptor.info && (
3838
<Popover placement="top">
3939
<PopoverContent>
40-
<div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2 rounded-md sm:w-max">
40+
<div class="shadow-light-medium bg-qwikui-blue-100 text-slate-950 dark:text-white dark:bg-qwikui-purple-800 dark:shadow-dark-medium max-w-xs mb-2 text-md px-4 py-2 rounded-md sm:w-max">
4141
{propDescriptor?.info}
4242
</div>
4343
</PopoverContent>

‎apps/website/src/routes/docs/_components/component-status-badge/component-status-badge.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ export function getClassByStatus(status: ComponentStatus) {
1212
case ComponentStatus.Ready:
1313
return 'text-green-900 bg-green-300 tracking-wide';
1414
case ComponentStatus.Beta:
15-
return 'dark:text-slate-100 dark:bg-qwikui-purple-500 bg-qwikui-blue-500 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-light-low dark:shadow-dark-low';
15+
return 'dark:text-slate-100 dark:bg-qwikui-purple-500 bg-qwikui-blue-500 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-dark-low dark:shadow-dark-low';
1616
case ComponentStatus.Draft:
17-
return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] dark:border-slate-400 shadow-light-low tracking-wide dark:shadow-dark-low';
17+
return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] border-slate-400 shadow-dark-low tracking-wide dark:shadow-dark-low';
1818
case ComponentStatus.Planned:
19-
return 'text-slate-900 bg-slate-300 border-[1px] dark:border-slate-400 tracking-wide shadow-light-low dark:shadow-dark-low';
19+
return 'text-slate-900 bg-slate-300 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low';
2020
default:
2121
return null;
2222
}

‎apps/website/src/routes/docs/_components/keyboard-interaction-table/keyboard-interaction-table.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,13 @@ export const KeyboardInteractionTable = component$(
1515
<table class="mb-6">
1616
<thead>
1717
<tr class="border-b-2">
18-
<th class="text-left font-thin text-md text-slate-400">Key</th>
18+
<th class="text-left font-400 text-md text-slate-800 dark:text-slate-400">
19+
Key
20+
</th>
1921
<th class="text-left">
20-
<p class="ml-6 font-thin text-md text-slate-400">Description</p>
22+
<p class="ml-6 font-400 text-md text-slate-800 dark:text-slate-400">
23+
Description
24+
</p>
2125
</th>
2226
</tr>
2327
</thead>

‎apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { KitName } from 'apps/website/src/_state/kit-name.type';
44
import { useRootStore } from 'apps/website/src/_state/use-root-store';
55
import { useSelectedKit } from '../../use-selected-kit';
66
import { StatusBadge } from '../component-status-badge/component-status-badge';
7+
import { useLocation } from '@builder.io/qwik-city';
78

89
export interface LinkGroup {
910
name: string;
@@ -22,6 +23,7 @@ export interface DocsNavigationProps {
2223
}
2324

2425
export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps) => {
26+
const location = useLocation();
2527
const rootStore = useRootStore();
2628
const selectedKitSig = useSelectedKit();
2729
const linkStyles = `px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center
@@ -58,16 +60,19 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
5860
return (
5961
<>
6062
<div class="px-6 pt-6">
61-
<h2 class="mb-4 font-bold text-white text-3xl lg:text-lg bg-qwikui-blue-400 px-4 py-1 rounded-lg dark:bg-qwikui-purple-500">
63+
<h2 class="mb-4 font-bold text-white text-3xl lg:text-lg bg-qwikui-blue-400 px-4 py-1 rounded-lg dark:bg-qwikui-purple-500 shadow-dark-low dark:shadow-dark-high border-qwikui-blue-100 dark:border-qwikui-purple-100 border-2">
6264
{group.name}
6365
</h2>
6466
<ul class="flex flex-col gap-2">
6567
{group.children?.map((link) => {
68+
const isLinkActive = location.url.pathname === link.href;
6669
return (
6770
<li key={link.name + link.href}>
6871
<a
6972
class={`px-4 py-2 text-xl lg:text-sm flex items-center
70-
rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800`}
73+
rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 ${
74+
isLinkActive ? 'font-bold' : ''
75+
}`}
7176
href={link.href}
7277
>
7378
<div class="flex flex-row gap-2 w-full">

‎apps/website/src/routes/docs/_components/preview-code-example/preview-code-example.tsx

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,34 @@ import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
44
export const PreviewCodeExample = component$(() => {
55
useStyles$(`
66
.dark .previewCodeExampleSelectedTab{
7-
background-color: #423dff;
7+
background-color: var(--qwikui-purple-600);
8+
font-weight: 600;
89
}
10+
911
.previewCodeExampleSelectedTab{
10-
background-color: #6daeff;
12+
background-color: var(--qwikui-blue-500);
13+
font-weight: 600;
1114
}
1215
`);
1316
return (
14-
<Tabs class="mb-12" selectedClassName="previewCodeExampleSelectedTab">
15-
<TabList class="flex rounded-t-xl bg-blue-200 dark:bg-indigo-900">
16-
<Tab class="px-4 py-2 rounded-tl-xl hover:bg-[#6daeff] dark:hover:bg-[#423dff]">
17+
<Tabs
18+
class="mb-12 shadow-light-medium dark:shadow-dark-medium rounded-xl"
19+
selectedClassName="previewCodeExampleSelectedTab"
20+
>
21+
<TabList class="text-white flex rounded-t-xl bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-slate-600 dark:border-slate-400 border-[1.5px] border-b-0 shadow-light-medium dark:shadow-dark-medium">
22+
<Tab class="px-4 py-2 rounded-tl-[.625rem] hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600">
1723
Preview
1824
</Tab>
19-
<Tab class="px-4 py-2 hover:bg-[#6daeff] dark:hover:bg-[#423dff]">Code</Tab>
25+
<Tab class="px-4 py-2 hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600">
26+
Code
27+
</Tab>
2028
</TabList>
21-
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-200 dark:bg-slate-900">
29+
<TabPanel class="rounded-b-xl shadow-light-medium bg-slate-800 dark:shadow-dark-medium border-slate-600 border-[1.5px] p-4 dark:border-slate-400 md:p-12 bg-slate-200 dark:bg-slate-950">
2230
<section class="flex flex-col items-center">
2331
<Slot name="actualComponent" />
2432
</section>
2533
</TabPanel>
26-
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-900">
34+
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-900 border-[1.5px] border-slate-600 dark:border-slate-400">
2735
<section class="overflow-auto">
2836
<Slot name="codeExample" />
2937
</section>

‎apps/website/src/routes/docs/_components/status-banner/status-banner.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ function getBackgroundByStatus(status?: ComponentStatus) {
7171
case ComponentStatus.Beta:
7272
return 'bg-qwikui-blue-800 dark:bg-qwikui-purple-800';
7373
case ComponentStatus.Draft:
74-
return 'bg-red-300 dark:bg-orange-800';
74+
return 'bg-orange-700 dark:bg-red-800';
7575
case ComponentStatus.Planned:
7676
default:
77-
return 'bg-[#fef1c7] dark:bg-[#92730e]';
77+
return 'bg-orange-700 dark:bg-red-800';
7878
}
7979
}
8080

0 commit comments

Comments
 (0)