Skip to content

Commit 9a05e6b

Browse files
UpperCodUpperCod
committed
update
1 parent b142ec4 commit 9a05e6b

File tree

11 files changed

+462
-260
lines changed

11 files changed

+462
-260
lines changed

‎README.md

Lines changed: 7 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,11 @@
1-
## Atomico Starter Skit
1+
# Example of Atomico + Tailwind
22

3-
Hi, thanks for starting with Atomico js web components in this starter-kit you will find what you need to start with Atomico and if you have questions about Atomico I will gladly solve them through an [Issue](https://github.com/atomicojs/atomico/issues/new/choose), [Discord](https://discord.gg/7z3rNhmkNE) or [Twitter](https://twitter.com/atomicojs).
3+
This simple example using [Atomico](https://atomicojs.dev/) webcomponents + Vite + [Tailwindcss](https://tailwindcss.com/) with no limitations:
44

5-
[![twitter](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/twitter.svg)](https://twitter.com/atomicojs)
6-
[![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/discord.svg)](https://discord.gg/7z3rNhmkNE)
7-
[![documentation](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc-1.svg)](https://atomico.gitbook.io/doc/)
5+
1. ✅ Purge css
6+
2. ✅ Tailwind Jit mode
7+
3. ✅ Cumulative CSS in a CSS StyleSheet for shadowDOM.
88

9-
Now what you have installed is a quick start kit based on Vite, which you can scale for your project, now to continue you must execute the following commands:
9+
You can use this example as an Atomico + TailwindCSS starter kit
1010

11-
1. `npm install`
12-
2. `npm start` : Initialize the development server
13-
3. `npm build` : Optional, Generate a build of your project from the html file [index.html](index.html).
14-
15-
## Workspace
16-
17-
### Recommended structure
18-
19-
```bash
20-
src
21-
|- my-component
22-
| |- my-component.{js,jsx,ts,tsx}
23-
| |- my-component.test.js
24-
| |- README.md
25-
|- components.js # import all components
26-
```
27-
28-
> The `npm run create:component` command, will create a webcomponent with the recommended structure.
29-
30-
## Scripts
31-
32-
### npm run create:component
33-
34-
Create a new webcomponent inside src, according to the recommended structure.
35-
36-
### npm run start
37-
38-
initialize Vite server
39-
40-
### npm run build
41-
42-
package the app using de Vite
43-
44-
### npm run test
45-
46-
Run a test environment in watch mode, as configured in `vite.config.js`.
47-
48-
### npm run coverage
49-
50-
Run a test environment with coverage, as configured in `vite.config.js`.
51-
52-
### npm run exports
53-
54-
Allows you to export your project to npm, this command executes changes in package.json before exporting and the changes will be reverted once exported.
55-
56-
temporary changes are:
57-
58-
1. generation of the packages.json#exports
59-
2. generation of the pages.json#typesVersions
60-
3. Compilation of the files and generation of the types if the --types flag is used.
61-
62-
## frequent questions
63-
64-
### How to add postcss?
65-
66-
`@atomico/vite`, allows to preprocess the css template string through postcss, to use this feature add in vite.config.js the following options:
67-
68-
```js
69-
import atomico from "@atomico/vite";
70-
import { defineConfig } from "vite";
71-
72-
export default defineConfig({
73-
...
74-
plugins: [
75-
atomico({
76-
cssLiterals: { postcss: true }, // 👈 CONFIGURATION TO ADD
77-
}),
78-
],
79-
});
80-
```
81-
82-
To use postcss at least 1 plugin is required.
83-
84-
```json
85-
"postcss": {
86-
"plugins": {
87-
"postcss-import": {}
88-
}
89-
}
90-
```
91-
92-
### How to publish on github page?
93-
94-
Add to `package.json#scripts.build`:
95-
96-
```bash
97-
--outDir docs # modify the destination directory
98-
--base my-repo # github page folder
99-
```
11+
The exposed interface is the work of [Flowbite.com](https://flowbite.com/), Flowbite uses Tailwind to create beautiful interfaces

‎index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
<script async type="module" src="./src/components.ts"></script>
1414
</head>
1515
<body>
16-
<t-button></t-button>
16+
<example-header></example-header>
17+
<example-hero></example-hero>
18+
<example-footer></example-footer>
1719
</body>
1820
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"private": true,
1515
"type": "module",
1616
"scripts": {
17-
"start": "vite --force",
17+
"start": "vite",
1818
"build": "vite build",
1919
"test": "vitest",
2020
"coverage": "vitest run --coverage",

‎src/components.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
export * from "./t-button/t-button";
1+
export * from "./example-header/example-header";
2+
export * from "./example-hero/example-hero";
3+
export * from "./example-footer/example-footer";

‎src/t-button/README.md renamed to ‎src/example-footer/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## t-button
1+
## example-footer
22

33
### Properties
44

@@ -15,5 +15,5 @@
1515
### Example
1616

1717
```html
18-
<t-button my-prop="my value"></t-button>
18+
<example-footer my-prop="my value"></example-footer>
1919
```

‎src/example-footer/example-footer.tsx

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
import { Props, c, css } from "atomico";
2+
import { tailwindcss } from "../tailwindcss";
3+
4+
function exampleFooter({ myProp }: Props<typeof exampleFooter>) {
5+
return (
6+
<host shadowDom>
7+
<footer class="p-4 bg-white md:p-8 lg:p-10 dark:bg-gray-800">
8+
<div class="mx-auto max-w-screen-xl text-center">
9+
<a
10+
href="#"
11+
class="flex justify-center items-center text-2xl font-semibold text-gray-900 dark:text-white"
12+
>
13+
<svg
14+
class="mr-2 h-8"
15+
viewBox="0 0 33 33"
16+
width="33"
17+
height="33"
18+
fill="none"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<path
22+
d="M25.2696 13.126C25.1955 13.6364 24.8589 14.3299 24.4728 14.9328C23.9856 15.6936 23.2125 16.2264 22.3276 16.4114L18.43 17.2265C17.8035 17.3575 17.2355 17.6853 16.8089 18.1621L14.2533 21.0188C13.773 21.5556 13.4373 21.4276 13.4373 20.7075C13.4315 20.7342 12.1689 23.9903 15.5149 25.9202C16.8005 26.6618 18.6511 26.3953 19.9367 25.6538L26.7486 21.7247C29.2961 20.2553 31.0948 17.7695 31.6926 14.892C31.7163 14.7781 31.7345 14.6639 31.7542 14.5498L25.2696 13.126Z"
23+
fill="url(#paint0_linear_11430_22515)"
24+
/>
25+
<path
26+
d="M23.5028 9.20133C24.7884 9.94288 25.3137 11.0469 25.3137 12.53C25.3137 12.7313 25.2979 12.9302 25.2694 13.1261L28.0141 14.3051L31.754 14.5499C32.2329 11.7784 31.2944 8.92561 29.612 6.65804C28.3459 4.9516 26.7167 3.47073 24.7581 2.34097C23.167 1.42325 21.5136 0.818599 19.8525 0.486816L17.9861 2.90382L17.3965 5.67918L23.5028 9.20133Z"
27+
fill="url(#paint1_linear_11430_22515)"
28+
/>
29+
<path
30+
d="M1.5336 11.2352C1.5329 11.2373 1.53483 11.238 1.53556 11.2358C1.67958 10.8038 1.86018 10.3219 2.08564 9.80704C3.26334 7.11765 5.53286 5.32397 8.32492 4.40943C11.117 3.49491 14.1655 3.81547 16.7101 5.28323L17.3965 5.67913L19.8525 0.486761C12.041 -1.07341 4.05728 3.51588 1.54353 11.2051C1.54233 11.2087 1.53796 11.2216 1.5336 11.2352Z"
31+
fill="url(#paint2_linear_11430_22515)"
32+
/>
33+
<path
34+
d="M19.6699 25.6538C18.3843 26.3953 16.8003 26.3953 15.5147 25.6538C15.3402 25.5531 15.1757 25.4399 15.0201 25.3174L12.7591 26.8719L10.8103 30.0209C12.9733 31.821 15.7821 32.3997 18.589 32.0779C20.7013 31.8357 22.7995 31.1665 24.7582 30.0368C26.3492 29.1191 27.7 27.9909 28.8182 26.7195L27.6563 23.8962L25.7762 22.1316L19.6699 25.6538Z"
35+
fill="url(#paint3_linear_11430_22515)"
36+
/>
37+
<path
38+
d="M15.0201 25.3175C14.0296 24.5373 13.4371 23.3406 13.4371 22.0588V21.931V11.2558C13.4371 10.6521 13.615 10.5494 14.1384 10.8513C13.3323 10.3864 11.4703 8.79036 9.17118 10.1165C7.88557 10.858 6.8269 12.4949 6.8269 13.978V21.8362C6.8269 24.775 8.34906 27.8406 10.5445 29.7966C10.6313 29.874 10.7212 29.9469 10.8103 30.0211L15.0201 25.3175Z"
39+
fill="url(#paint4_linear_11430_22515)"
40+
/>
41+
<path
42+
d="M28.6604 5.49565C28.6589 5.49395 28.6573 5.49532 28.6589 5.49703C28.9613 5.83763 29.2888 6.23485 29.6223 6.68734C31.3648 9.05099 32.0158 12.0447 31.4126 14.9176C30.8093 17.7906 29.0071 20.2679 26.4625 21.7357L25.7761 22.1316L28.8181 26.7195C34.0764 20.741 34.09 11.5388 28.6815 5.51929C28.6789 5.51641 28.67 5.50622 28.6604 5.49565Z"
43+
fill="url(#paint5_linear_11430_22515)"
44+
/>
45+
<path
46+
d="M7.09355 13.978C7.09354 12.4949 7.88551 11.1244 9.17113 10.3829C9.34564 10.2822 9.52601 10.1965 9.71002 10.1231L9.49304 7.38962L7.96861 4.26221C5.32671 5.23364 3.1897 7.24125 2.06528 9.83067C1.2191 11.7793 0.75001 13.9294 0.75 16.1888C0.75 18.0243 1.05255 19.7571 1.59553 21.3603L4.62391 21.7666L7.09355 21.0223V13.978Z"
47+
fill="url(#paint6_linear_11430_22515)"
48+
/>
49+
<path
50+
d="M9.71016 10.1231C10.8817 9.65623 12.2153 9.74199 13.3264 10.3829L13.4372 10.4468L22.3326 15.5777C22.9566 15.9376 22.8999 16.2918 22.1946 16.4392L22.7078 16.332C23.383 16.1908 23.9999 15.8457 24.4717 15.3428C25.2828 14.4782 25.5806 13.4351 25.5806 12.5299C25.5806 11.0468 24.7886 9.67634 23.503 8.93479L16.6911 5.00568C14.1436 3.53627 11.0895 3.22294 8.29622 4.14442C8.18572 4.18087 8.07756 4.2222 7.96875 4.26221L9.71016 10.1231Z"
51+
fill="url(#paint7_linear_11430_22515)"
52+
/>
53+
<path
54+
d="M20.0721 31.8357C20.0744 31.8352 20.0739 31.8332 20.0717 31.8337C19.6252 31.925 19.1172 32.0097 18.5581 32.0721C15.638 32.3978 12.7174 31.4643 10.5286 29.5059C8.33986 27.5474 7.09347 24.7495 7.09348 21.814L7.09347 21.0222L1.59546 21.3602C4.1488 28.8989 12.1189 33.5118 20.0411 31.8421C20.0449 31.8413 20.0582 31.8387 20.0721 31.8357Z"
55+
fill="url(#paint8_linear_11430_22515)"
56+
/>
57+
<defs>
58+
<linearGradient
59+
id="paint0_linear_11430_22515"
60+
x1="20.8102"
61+
y1="23.9532"
62+
x2="23.9577"
63+
y2="12.9901"
64+
gradientUnits="userSpaceOnUse"
65+
>
66+
<stop stop-color="#1724C9" />
67+
<stop offset="1" stop-color="#1C64F2" />
68+
</linearGradient>
69+
<linearGradient
70+
id="paint1_linear_11430_22515"
71+
x1="28.0593"
72+
y1="10.5837"
73+
x2="19.7797"
74+
y2="2.33321"
75+
gradientUnits="userSpaceOnUse"
76+
>
77+
<stop stop-color="#1C64F2" />
78+
<stop offset="1" stop-color="#0092FF" />
79+
</linearGradient>
80+
<linearGradient
81+
id="paint2_linear_11430_22515"
82+
x1="16.9145"
83+
y1="5.2045"
84+
x2="4.42432"
85+
y2="5.99375"
86+
gradientUnits="userSpaceOnUse"
87+
>
88+
<stop stop-color="#0092FF" />
89+
<stop offset="1" stop-color="#45B2FF" />
90+
</linearGradient>
91+
<linearGradient
92+
id="paint3_linear_11430_22515"
93+
x1="16.0698"
94+
y1="28.846"
95+
x2="27.2866"
96+
y2="25.8192"
97+
gradientUnits="userSpaceOnUse"
98+
>
99+
<stop stop-color="#1C64F2" />
100+
<stop offset="1" stop-color="#0092FF" />
101+
</linearGradient>
102+
<linearGradient
103+
id="paint4_linear_11430_22515"
104+
x1="8.01881"
105+
y1="15.8661"
106+
x2="15.9825"
107+
y2="24.1181"
108+
gradientUnits="userSpaceOnUse"
109+
>
110+
<stop stop-color="#1724C9" />
111+
<stop offset="1" stop-color="#1C64F2" />
112+
</linearGradient>
113+
<linearGradient
114+
id="paint5_linear_11430_22515"
115+
x1="26.2004"
116+
y1="21.8189"
117+
x2="31.7569"
118+
y2="10.6178"
119+
gradientUnits="userSpaceOnUse"
120+
>
121+
<stop stop-color="#0092FF" />
122+
<stop offset="1" stop-color="#45B2FF" />
123+
</linearGradient>
124+
<linearGradient
125+
id="paint6_linear_11430_22515"
126+
x1="6.11387"
127+
y1="9.31427"
128+
x2="3.14054"
129+
y2="20.4898"
130+
gradientUnits="userSpaceOnUse"
131+
>
132+
<stop stop-color="#1C64F2" />
133+
<stop offset="1" stop-color="#0092FF" />
134+
</linearGradient>
135+
<linearGradient
136+
id="paint7_linear_11430_22515"
137+
x1="21.2932"
138+
y1="8.78271"
139+
x2="10.4278"
140+
y2="11.488"
141+
gradientUnits="userSpaceOnUse"
142+
>
143+
<stop stop-color="#1724C9" />
144+
<stop offset="1" stop-color="#1C64F2" />
145+
</linearGradient>
146+
<linearGradient
147+
id="paint8_linear_11430_22515"
148+
x1="7.15667"
149+
y1="21.5399"
150+
x2="14.0824"
151+
y2="31.9579"
152+
gradientUnits="userSpaceOnUse"
153+
>
154+
<stop stop-color="#0092FF" />
155+
<stop offset="1" stop-color="#45B2FF" />
156+
</linearGradient>
157+
</defs>
158+
</svg>
159+
Flowbite
160+
</a>
161+
<p class="my-6 text-gray-500 dark:text-gray-400">
162+
Open-source library of over 400+ web components and interactive
163+
elements built for better web.
164+
</p>
165+
<ul class="flex flex-wrap justify-center items-center mb-6 text-gray-900 dark:text-white">
166+
<li>
167+
<a href="#" class="mr-4 hover:underline md:mr-6 ">
168+
About
169+
</a>
170+
</li>
171+
<li>
172+
<a href="#" class="mr-4 hover:underline md:mr-6">
173+
Premium
174+
</a>
175+
</li>
176+
<li>
177+
<a href="#" class="mr-4 hover:underline md:mr-6 ">
178+
Campaigns
179+
</a>
180+
</li>
181+
<li>
182+
<a href="#" class="mr-4 hover:underline md:mr-6">
183+
Blog
184+
</a>
185+
</li>
186+
<li>
187+
<a href="#" class="mr-4 hover:underline md:mr-6">
188+
Affiliate Program
189+
</a>
190+
</li>
191+
<li>
192+
<a href="#" class="mr-4 hover:underline md:mr-6">
193+
FAQs
194+
</a>
195+
</li>
196+
<li>
197+
<a href="#" class="mr-4 hover:underline md:mr-6">
198+
Contact
199+
</a>
200+
</li>
201+
</ul>
202+
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">
203+
© 2021-2022{" "}
204+
<a href="#" class="hover:underline">
205+
Flowbite™
206+
</a>
207+
. All Rights Reserved.
208+
</span>
209+
</div>
210+
</footer>
211+
</host>
212+
);
213+
}
214+
215+
exampleFooter.props = {
216+
myProp: String,
217+
};
218+
219+
exampleFooter.styles = [
220+
tailwindcss,
221+
css`
222+
:host {
223+
display: block;
224+
}
225+
`,
226+
];
227+
228+
export const ExampleFooter = c(exampleFooter);
229+
230+
customElements.define("example-footer", ExampleFooter);

0 commit comments

Comments
 (0)