@adaptive-sm/astro-ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -12
- package/package.json +18 -4
package/README.md
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
A library of reusable UI components for Astro projects. Built with TypeScript, Tailwind CSS, and Astro in static output mode. Components are designed to be accessible, customizable, and easy to integrate.
|
|
4
4
|
|
|
5
|
+
Quick link
|
|
6
|
+
- code - https://github.com/adaptive-shield-matrix/astro-ui
|
|
7
|
+
- npm - https://www.npmjs.com/package/@adaptive-sm/astro-ui
|
|
8
|
+
- component demo - https://adaptive-astro-ui.pages.dev/
|
|
9
|
+
|
|
5
10
|
## Installation
|
|
6
11
|
|
|
7
12
|
Install the package using Bun:
|
|
@@ -10,7 +15,17 @@ Install the package using Bun:
|
|
|
10
15
|
bun add @adaptive-sm/astro-ui
|
|
11
16
|
```
|
|
12
17
|
|
|
13
|
-
##
|
|
18
|
+
## Tailwind CSS Configuration
|
|
19
|
+
|
|
20
|
+
To ensure Tailwind scans the library's source files for classes (since components are published as source without a build step), add the following `@source` directive to your project's `src/layouts/global.css` (or equivalent global stylesheet):
|
|
21
|
+
|
|
22
|
+
```css
|
|
23
|
+
@source '/node_modules/@adaptive-sm/astro-ui/lib/**/*.{astro,html,md,mdx,ts,tsx}';
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
This tells Tailwind to include classes from the library's `.astro`, `.ts`, and other relevant files in the purge process, preventing unused classes from being purged during the build. Without it, Tailwind might not detect classes used in imported components, leading to missing styles.
|
|
27
|
+
|
|
28
|
+
## Option configuration: import alias
|
|
14
29
|
|
|
15
30
|
In your `astro.config.mjs`, set up the `~` alias to point to the library:
|
|
16
31
|
|
|
@@ -28,19 +43,9 @@ export default defineConfig({
|
|
|
28
43
|
});
|
|
29
44
|
```
|
|
30
45
|
|
|
31
|
-
## Tailwind CSS Configuration
|
|
32
|
-
|
|
33
|
-
To ensure Tailwind scans the library's source files for classes (since components are published as source without a build step), add the following `@source` directive to your project's `src/layouts/global.css` (or equivalent global stylesheet):
|
|
34
|
-
|
|
35
|
-
```css
|
|
36
|
-
@source '/node_modules/@adaptive-sm/astro-ui/lib/**/*.{astro,html,md,mdx,ts,tsx}';
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
This tells Tailwind to include classes from the library's `.astro`, `.ts`, and other relevant files in the purge process, preventing unused classes from being purged during the build. Without it, Tailwind might not detect classes used in imported components, leading to missing styles.
|
|
40
|
-
|
|
41
46
|
## Usage
|
|
42
47
|
|
|
43
|
-
|
|
48
|
+
### No Build Step Required
|
|
44
49
|
|
|
45
50
|
This library ships source `.astro` and `.ts` files directly—no pre-build needed. Benefits include:
|
|
46
51
|
|
|
@@ -105,13 +110,28 @@ Refer to individual component documentation in the source code for props and var
|
|
|
105
110
|
### Icons
|
|
106
111
|
- [Icon1.astro](lib/icon/Icon1.astro) (replaces SVG icons)
|
|
107
112
|
|
|
113
|
+
usage:
|
|
114
|
+
|
|
115
|
+
- Choose from over 7000 icons: https://pictogrammers.com/library/mdi/
|
|
116
|
+
- Import name from "@mdi/js" library
|
|
117
|
+
- Passed on as `path` prop
|
|
118
|
+
|
|
108
119
|
### Images
|
|
109
120
|
- [Img.astro](lib/img/Img.astro)
|
|
121
|
+
|
|
122
|
+
A small wrapper setting loading lazy and decoding to async.
|
|
123
|
+
|
|
110
124
|
- [TypedImg.astro](lib/img/TypedImg.astro)
|
|
111
125
|
|
|
126
|
+
An image with given width and height to prevent layout shifts.
|
|
127
|
+
|
|
128
|
+
Generate types using `lib/generate_image_list/generateImageList.ts`
|
|
129
|
+
|
|
112
130
|
### Layouts
|
|
113
131
|
- [MinimalLayout.astro](lib/layouts/MinimalLayout.astro)
|
|
114
132
|
- [MarkdownWrapper.astro](lib/layouts/MarkdownWrapper.astro)
|
|
133
|
+
|
|
134
|
+
### Navigation bar
|
|
115
135
|
- [ThemeToggle.astro](lib/layouts/parts/ThemeToggle.astro)
|
|
116
136
|
|
|
117
137
|
### Links
|
package/package.json
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adaptive-sm/astro-ui",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"type": "module",
|
|
5
|
-
"private": false,
|
|
3
|
+
"version": "0.1.1",
|
|
6
4
|
"scripts": {
|
|
7
5
|
"astro": "astro",
|
|
8
6
|
"dev": "nice -5 astro dev",
|
|
@@ -52,5 +50,21 @@
|
|
|
52
50
|
],
|
|
53
51
|
"exports": {
|
|
54
52
|
"./*": "./lib/*"
|
|
55
|
-
}
|
|
53
|
+
},
|
|
54
|
+
"type": "module",
|
|
55
|
+
"private": false,
|
|
56
|
+
"license": "MIT",
|
|
57
|
+
"homepage": "https://github.com/adaptive-shield-matrix/astro-ui",
|
|
58
|
+
"description": "A library of reusable UI components for Astro projects. Built with TypeScript, Tailwind CSS, and Astro in static output mode. Components are designed to be accessible, customizable, and easy to integrate.",
|
|
59
|
+
"keywords": [
|
|
60
|
+
"astro",
|
|
61
|
+
"astro-ui",
|
|
62
|
+
"tailwind",
|
|
63
|
+
"tailwindcss",
|
|
64
|
+
"components",
|
|
65
|
+
"ui-components",
|
|
66
|
+
"web-development",
|
|
67
|
+
"frontend",
|
|
68
|
+
"typescript"
|
|
69
|
+
]
|
|
56
70
|
}
|