Skip to content

Commit 678f9c5

Browse files
shairezshairez
committed
docs: added missing pages
1 parent 5bb391a commit 678f9c5

File tree

8 files changed

+177
-156
lines changed

8 files changed

+177
-156
lines changed

‎apps/website/src/routes/docs/headless/(getting-started)/contributing/index.tsx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,41 @@ import type { DocumentHead } from '@builder.io/qwik-city';
33

44
export default component$(() => {
55
return (
6-
<div>
7-
<h1 class="text-xl">Getting Started</h1>
8-
<div class="mt-4">
9-
<p>How to use page</p>
10-
</div>
11-
</div>
6+
<article class="max-w-prose">
7+
<h1 class="text-xl">Contributing </h1>
8+
<p class="text-lg mb-6">
9+
We welcome and appreciate contributions from the community! Whether
10+
you're looking to submit bug fixes, improve documentation, or add new
11+
features, your efforts can make a significant impact on the project. By
12+
contributing, you'll also be joining our vibrant and supportive
13+
community of developers.
14+
</p>
15+
16+
<p class="text-lg mb-6">
17+
Our team will review your pull request and, if approved, merge it into
18+
the main repository.
19+
</p>
20+
21+
<section class="flex flex-col">
22+
<a
23+
href="https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md"
24+
target="_blank"
25+
>
26+
<h3 class="underline text-2xl font-semibold mb-4 inline-block">
27+
Read our contributing guidelines
28+
</h3>
29+
</a>
30+
31+
<a href="https://discord.gg/PVWUUejrez" target="_blank">
32+
<h3 class="underline text-2xl font-semibold mb-4 inline-block">
33+
Join Our Discord Community
34+
</h3>
35+
</a>
36+
</section>
37+
</article>
1238
);
1339
});
1440

1541
export const head: DocumentHead = {
16-
title: 'QwikUI Usage',
42+
title: 'QwikUI - Contributing',
1743
};

‎apps/website/src/routes/docs/headless/(getting-started)/install/index.tsx

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,32 @@ import type { DocumentHead } from '@builder.io/qwik-city';
33

44
export default component$(() => {
55
return (
6-
<div>
6+
<article class="max-w-prose">
77
<h1 class="text-xl">Installation</h1>
8+
<p class="text-lg mb-6">
9+
To get started with the Headless Kit for Qwik UI, run the following
10+
command to install the Headless Kit via npm:
11+
</p>
12+
813
<div class="mt-4">
9-
<p>Installation of the headless components package</p>
10-
<pre>npm install -D @qwik-ui/headless</pre>
14+
<pre class="bg-black max-w-prose p-8 border-white border text-white">
15+
npm install -D @qwik-ui/headless
16+
</pre>
1117
</div>
12-
</div>
18+
19+
<p class="text-lg mt-6 mb-6">
20+
That's it! The Headless Kit is now installed and ready for use in your
21+
Qwik project.
22+
</p>
23+
24+
<p class="text-lg mb-6">
25+
Now you can start building your custom-designed, accessible Qwik web
26+
applications using the Qwik UIHeadless Kit.
27+
</p>
28+
</article>
1329
);
1430
});
1531

1632
export const head: DocumentHead = {
17-
title: 'QwikUI Installation',
33+
title: 'Qwik UI | Headless Kit - Installation',
1834
};

‎apps/website/src/routes/docs/headless/(getting-started)/introduction/index.tsx

Lines changed: 37 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -4,76 +4,48 @@ import type { DocumentHead } from '@builder.io/qwik-city';
44
export default component$(() => {
55
return (
66
<>
7-
<h1 class="text-6xl font-bold mx-auto w-fit">Welcome to Qwik UI! 🤩</h1>
7+
<h1 class="text-6xl font-bold mx-auto w-fit">Headless Kit</h1>
88
<p class="text-3xl font-medium mb-6 mx-auto w-fit">
9-
It's a new cozy component library! 🤗🚀
9+
Accessible, Unstyled Qwik UI Components
10+
</p>
11+
12+
<p class="mt-8 leading-relaxed mb-10">
13+
Welcome to the Headless Kit, a collection of accessible, unstyled
14+
components by Qwik UI. The Headless Kit is perfect for developers who
15+
want to build their web applications with custom styles while
16+
maintaining a strong focus on accessibility.
17+
</p>
18+
19+
<h3 class="text-2xl font-semibold mb-4">Why Choose the Headless Kit?</h3>
20+
<p class="text-lg mb-6">
21+
The Headless Kit allows you to apply your own CSS, making it easy to
22+
achieve the look and feel you desire for your Qwik web applications. And
23+
you're getting all of the logic and behavior out of the box!
24+
</p>
25+
26+
<h3 class="text-2xl font-semibold mb-4">Accessibility at its Core</h3>
27+
<p class="text-lg mb-6">
28+
Accessibility is at the heart of the Headless Kit. Each component in the
29+
library has been meticulously crafted to meet the highest accessibility
30+
standards, ensuring that your web applications are inclusive and cater
31+
to users of all abilities. By choosing the Headless Kit, you're taking
32+
an important step towards creating a more accessible web.
33+
</p>
34+
35+
<h3 class="text-2xl font-semibold mb-4">
36+
Seamless Integration with Qwik
37+
</h3>
38+
<p class="text-lg mb-6">
39+
The Headless Kit is designed to work hand-in-hand with the Qwik
40+
framework. This means that, as a developer, you can enjoy the
41+
performance benefits and SEO advantages of Qwik while having complete
42+
control over the appearance of your web application. It's the best of
43+
both worlds!
1044
</p>
11-
<article class="max-w-prose mx-auto">
12-
<div>
13-
<p class="mt-8 leading-relaxed">
14-
A web developer was hired by a company to create a website for their
15-
new product. He spent weeks designing and coding the website, making
16-
sure it was responsive, user-friendly, and SEO-optimized. He tested
17-
it on various browsers and devices, and fixed any bugs he found. He
18-
was proud of his work and confident that it would impress the
19-
client.
20-
</p>
21-
<p class="mt-8 leading-relaxed">
22-
He sent the website link to the client and waited for their
23-
feedback. A few hours later, he received an email from the client
24-
that read:
25-
</p>
26-
<p class="mt-8 leading-relaxed">
27-
"Hi,
28-
<br />
29-
Thank you for your hard work on the website. It looks great, but we
30-
have one small issue. When we open the website on our computer, it
31-
says 'Hello World' in big letters on the screen. Is this some kind
32-
of joke? We don't understand what it means. Please remove it as soon
33-
as possible and replace it with something more appropriate.
34-
<br />
35-
Sincerely,
36-
<br />
37-
The Client"
38-
</p>
39-
<p class="mt-8 leading-relaxed">
40-
The web developer was confused and shocked. He opened the website on
41-
his own computer and saw nothing wrong. He checked the code and
42-
found no trace of 'Hello World'. He tried different browsers and
43-
devices, but still couldn't reproduce the issue. He wondered if the
44-
client was playing a prank on him or if they had some kind of virus
45-
on their computer.
46-
</p>
47-
<p class="mt-8 leading-relaxed">He replied to the client:</p>
48-
<p class="mt-8 leading-relaxed">
49-
"Hi,
50-
<br />
51-
I'm glad you like the website, but I'm sorry to hear about the
52-
'Hello World' problem. I have checked the website on my end and I
53-
don't see anything like that. Can you please send me a screenshot of
54-
what you see? Also, can you tell me what browser and operating
55-
system you are using?
56-
<br />
57-
Thank you,
58-
<br />
59-
The Web Developer"
60-
</p>
61-
<p class="mt-8 leading-relaxed">
62-
He waited for the client's response, hoping to solve the mystery. A
63-
few minutes later, he received another email from the client with an
64-
attachment. He opened it and saw a screenshot of the website with
65-
'Hello World' in big letters on the screen. He also noticed
66-
something else that made him facepalm.
67-
</p>
68-
<p class="mt-8 leading-relaxed">
69-
The client was using Internet Explorer 6.
70-
</p>
71-
</div>
72-
</article>
7345
</>
7446
);
7547
});
7648

7749
export const head: DocumentHead = {
78-
title: 'Qwik UI',
50+
title: 'Qwik UI | Headless Kit - Introduction',
7951
};

‎apps/website/src/routes/docs/headless/menu.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
- [Introduction](/docs/headless/introduction)
66
- [Installation](/docs/headless/install)
7-
- [Usage](/docs/headless/usage)
87
- [Contributing](/docs/headless/contributing)
98

109
## Components

‎apps/website/src/routes/docs/tailwind/(getting-started)/contributing/index.tsx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,41 @@ import type { DocumentHead } from '@builder.io/qwik-city';
33

44
export default component$(() => {
55
return (
6-
<div>
7-
<h1 class="text-xl">Getting Started</h1>
8-
<div class="mt-4">
9-
<p>How to use page</p>
10-
</div>
11-
</div>
6+
<article class="max-w-prose">
7+
<h1 class="text-xl">Contributing </h1>
8+
<p class="text-lg mb-6">
9+
We welcome and appreciate contributions from the community! Whether
10+
you're looking to submit bug fixes, improve documentation, or add new
11+
features, your efforts can make a significant impact on the project. By
12+
contributing, you'll also be joining our vibrant and supportive
13+
community of developers.
14+
</p>
15+
16+
<p class="text-lg mb-6">
17+
Our team will review your pull request and, if approved, merge it into
18+
the main repository.
19+
</p>
20+
21+
<section class="flex flex-col">
22+
<a
23+
href="https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md"
24+
target="_blank"
25+
>
26+
<h3 class="underline text-2xl font-semibold mb-4 inline-block">
27+
Read our contributing guidelines
28+
</h3>
29+
</a>
30+
31+
<a href="https://discord.gg/PVWUUejrez" target="_blank">
32+
<h3 class="underline text-2xl font-semibold mb-4 inline-block">
33+
Join Our Discord Community
34+
</h3>
35+
</a>
36+
</section>
37+
</article>
1238
);
1339
});
1440

1541
export const head: DocumentHead = {
16-
title: 'QwikUI Usage',
42+
title: 'QwikUI - Contributing',
1743
};

‎apps/website/src/routes/docs/tailwind/(getting-started)/install/index.tsx

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,32 @@ import type { DocumentHead } from '@builder.io/qwik-city';
33

44
export default component$(() => {
55
return (
6-
<div>
6+
<article class="max-w-prose">
77
<h1 class="text-xl">Installation</h1>
8+
<p class="text-lg mb-6">
9+
To get started with the Tailwind Kit for Qwik UI, run the following
10+
command to install the Tailwind Kit via npm:
11+
</p>
12+
813
<div class="mt-4">
9-
<p>Installation of the headless components package</p>
10-
<pre>npm install -D @qwik-ui/headless</pre>
14+
<pre class="bg-black max-w-prose p-8 border-white border text-white">
15+
npm install -D @qwik-ui/tailwind
16+
</pre>
1117
</div>
12-
</div>
18+
19+
<p class="text-lg mt-6 mb-6">
20+
That's it! The Tailwind Kit is now installed and ready for use in your
21+
Qwik project.
22+
</p>
23+
24+
<p class="text-lg mb-6">
25+
Now you can start building your fully designed, accessible Qwik web
26+
applications using the Qwik UI Tailwind Kit.
27+
</p>
28+
</article>
1329
);
1430
});
1531

1632
export const head: DocumentHead = {
17-
title: 'QwikUI Installation',
33+
title: 'Qwik UI | Tailwind Kit - Installation',
1834
};

0 commit comments

Comments
 (0)