@danilosimonatto/ionicons-minimal-weather-widget 0.1.0 → 0.1.2
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 +21 -0
- package/astro/WeatherWidget.astro +31 -0
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -29,6 +29,27 @@ You can then use the custom element in your HTML:
|
|
|
29
29
|
></weather-widget>
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
+
## Astro
|
|
33
|
+
|
|
34
|
+
Astro frontmatter runs on the server/build step, but this package registers a **browser custom element** (it uses `window`, `HTMLElement`, and `customElements`). That means the widget must still be loaded **client-side**.
|
|
35
|
+
|
|
36
|
+
To make this easy, the package ships an Astro wrapper component that includes the needed module import for you:
|
|
37
|
+
|
|
38
|
+
```astro
|
|
39
|
+
---
|
|
40
|
+
import WeatherWidget from "@danilosimonatto/ionicons-minimal-weather-widget/astro";
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
<WeatherWidget city="Milan" apiKey={import.meta.env.PUBLIC_OPENWEATHER_API_KEY} />
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Props:
|
|
47
|
+
|
|
48
|
+
- `city` (string, required)
|
|
49
|
+
- `apiKey` (string, required)
|
|
50
|
+
- `scale` ("C" | "F", optional, default "C")
|
|
51
|
+
- `iconStyle` ("filled" | "outline" | "sharp", optional, default "filled")
|
|
52
|
+
|
|
32
53
|
## Options
|
|
33
54
|
|
|
34
55
|
| Attribute | Type | Description | Example |
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
---
|
|
2
|
+
type Props = {
|
|
3
|
+
city: string;
|
|
4
|
+
scale?: "C" | "F";
|
|
5
|
+
iconStyle?: "filled" | "outline" | "sharp";
|
|
6
|
+
apiKey: string;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const {
|
|
10
|
+
city,
|
|
11
|
+
scale = "C",
|
|
12
|
+
iconStyle = "filled",
|
|
13
|
+
apiKey,
|
|
14
|
+
} = Astro.props as Props;
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
<weather-widget
|
|
18
|
+
city={city}
|
|
19
|
+
scale={scale}
|
|
20
|
+
icon-style={iconStyle}
|
|
21
|
+
api-key={apiKey}
|
|
22
|
+
></weather-widget>
|
|
23
|
+
|
|
24
|
+
<!--
|
|
25
|
+
This package defines a browser custom element, so it must be loaded client-side.
|
|
26
|
+
By placing this import in an inline module script, Astro/Vite will bundle it and
|
|
27
|
+
run it in the browser without the user needing a separate script file.
|
|
28
|
+
-->
|
|
29
|
+
<script type="module">
|
|
30
|
+
import "../weather-widget.js";
|
|
31
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danilosimonatto/ionicons-minimal-weather-widget",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Danilo Simonatto",
|
|
7
7
|
"files": [
|
|
8
8
|
"weather-widget.js",
|
|
9
9
|
"weather-widget.d.ts",
|
|
10
|
+
"astro",
|
|
10
11
|
"README.md",
|
|
11
12
|
"LICENSE"
|
|
12
13
|
],
|
|
@@ -14,9 +15,10 @@
|
|
|
14
15
|
".": {
|
|
15
16
|
"types": "./weather-widget.d.ts",
|
|
16
17
|
"default": "./weather-widget.js"
|
|
17
|
-
}
|
|
18
|
+
},
|
|
19
|
+
"./astro": "./astro/WeatherWidget.astro"
|
|
18
20
|
},
|
|
19
21
|
"dependencies": {
|
|
20
22
|
"ionicons": "^8.0.13"
|
|
21
23
|
}
|
|
22
|
-
}
|
|
24
|
+
}
|