Skip to content

Commit 03e2451

Browse files
committed
docs: fixup
1 parent 4d4edb6 commit 03e2451

File tree

14 files changed

+135
-1402
lines changed

14 files changed

+135
-1402
lines changed

apps/docs/components/content/AppSidebarBottom.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const links = computed<NavItem[]>(() => {
1515
_id: 'all-components',
1616
sidebarNesting: 'inline',
1717
},
18-
...components.map((component: string) => ({
18+
...components['qwik'].map((component: string) => ({
1919
title: component.replace('Sf', ''),
2020
_path: `/qwik/components/${component
2121
.replace('Sf', '')
@@ -35,7 +35,7 @@ const links = computed<NavItem[]>(() => {
3535
_id: 'all-blocks',
3636
sidebarNesting: 'inline',
3737
},
38-
...blocks.map((block: string) => ({
38+
...blocks['qwik'].map((block: string) => ({
3939
title: block.replace('Sf', ''),
4040
_path: `/qwik/blocks/${block.toLowerCase()}`,
4141
_id: block,
Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,78 @@
11
---
22
title: Installation
33
---
4-
# File exists for redirection purposes
4+
5+
# Installation
6+
7+
Since Storefront UI is designed to fit seamlessly into your Tailwind CSS workflow, there will be different installation steps depending on your environment.
8+
9+
### Create Your Next Project
10+
11+
If you don't already have a Qwik application, you can use the `create qwik@latest` command.<br />
12+
Here is the Qwik official [docs](https://qwik.builder.io/docs/getting-started/#create-an-app-using-the-cli).
13+
14+
```bash
15+
# npm
16+
npx create qwik@latest
17+
18+
# yarn
19+
yarn create qwik@latest
20+
21+
# pnpm
22+
pnpm create qwik@latest
23+
```
24+
25+
### Install Tailwind and Storefront UI Dependencies
26+
27+
Next, you'll need to install Tailwind CSS and PostCSS, as well as the Storefront UI's Qwik library and Tailwind preset.
28+
29+
> Run these commands form your project folder.
30+
31+
```bash
32+
# npm
33+
npm qwik add tailwind
34+
npm i -D @storefront-ui/tailwind-config
35+
npm i qwik-storefront-ui
36+
37+
# yarn
38+
yarn qwik add tailwind
39+
yarn add -D @storefront-ui/tailwind-config
40+
yarn add qwik-storefront-ui
41+
42+
# pnpm
43+
pnpm qwik add tailwind
44+
pnpm add -D @storefront-ui/tailwind-config
45+
pnpm add qwik-storefront-ui
46+
```
47+
48+
### Modify Your Tailwind Configuration File
49+
50+
Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your `tailwind.config.js` file.
51+
52+
::tip Add a path to your installed package
53+
54+
In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your `node_modules` folder is located to the `content` property. In the example below, we're using the default location for `node_modules`, but this may change if you're working in a monorepo.
55+
::
56+
57+
```js
58+
// tailwind.config.js
59+
const { tailwindConfig } = require('@storefront-ui/tailwind-config');
60+
61+
/** @type {import('tailwindcss').Config} */
62+
module.exports = {
63+
presets: [tailwindConfig],
64+
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/qwik-storefront-ui/**/*.{cjs,mjs}'],
65+
theme: {
66+
extend: {},
67+
},
68+
plugins: [],
69+
};
70+
```
71+
72+
### You're Ready to Go!
73+
74+
Now, you can import Storefront UI components in your app from the `qwik-storefront-ui` in your project.
75+
76+
<<<../../../website/src/routes/showcases/Button/ButtonSizes/index.tsx
77+
78+
<Showcase showcase-name="Button/ButtonBlock" :show-source="false"/>

apps/docs/content/2.getting-started/2.browser-support.md

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

apps/docs/content/2.getting-started/qwik.md

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

0 commit comments

Comments
 (0)