Skip to content

Commit 3668f42

Browse files
userquinuserquin
authored
chore: add readme and license (#4)
* chore: add readme and license * chore: fix warning * chore: add nuxt refs back * chore: fix warning * chore: move warning
1 parent b755471 commit 3668f42

File tree

2 files changed

+124
-28
lines changed

2 files changed

+124
-28
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024-PRESENT Joaquín Sánchez <https://github.com/userquin>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+103-28
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,106 @@
1-
# Nuxt HTTP Client Hints
1+
# Nuxt HTTP Client Hints Module
22

33
[![npm version][npm-version-src]][npm-version-href]
44
[![npm downloads][npm-downloads-src]][npm-downloads-href]
55
[![License][license-src]][license-href]
66
[![Nuxt][nuxt-src]][nuxt-href]
77

8-
My new Nuxt module for doing amazing things.
9-
10-
- [✨ &nbsp;Release Notes](/CHANGELOG.md)
11-
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
12-
<!-- - [📖 &nbsp;Documentation](https://example.com) -->
8+
Access and use HTTP Client Hints in your Nuxt application. Detect the client browser and the operating system on your server.
139

1410
## Features
1511

16-
<!-- Highlight some of the features your module provide here -->
17-
- ⛰ &nbsp;Foo
18-
- 🚠 &nbsp;Bar
19-
- 🌲 &nbsp;Baz
12+
- 🚀 Browser and Operating System detection: check [detect-browser-es](https://www.npmjs.com/package/detect-browser-es) for more information.
13+
- 💥 [Device Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints) detection
14+
- ⚡ [Network Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints) detection
15+
- ✨ [Critical Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints#critical_client_hints) detection
16+
17+
## HTTP Client hints
18+
19+
> [!WARNING]
20+
> The [HTTP Client hints headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) listed below are still in draft and only Chromium based browsers support them: Chrome, Edge, Chromium and Opera.
21+
22+
23+
The module includes support for the following HTTP Client hints:
24+
- [Device Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints)
25+
- [Device-Memory](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Device-Memory)
26+
- [Network Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints)
27+
- [Save-Data](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data)
28+
- [Downlink](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Downlink)
29+
- [ECT](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ECT)
30+
- [RTT](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/RTT)
31+
- [User Agent Hints](https://github.com/WICG/ua-client-hints)
32+
- [Sec-CH](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH)
33+
- [Sec-CH-UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA)
34+
- [Sec-CH-UA-Mobile](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Mobile)
35+
- [Sec-CH-UA-Platform](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Platform)
36+
- [Sec-CH-UA-Arch](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Arch)
37+
- [Sec-CH-UA-Model](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Model)
38+
- [Sec-CH-UA-Platform-Version](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Platform-Version)
39+
- [Sec-CH-UA-Bitness](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Bitness)
40+
- [Critical Client Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints#critical_client_hints)
41+
- [Sec-CH-Width](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Width)
42+
- [Sec-CH-DPR](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-DPR)
43+
- [Sec-CH-Viewport-Width](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Viewport-Width)
44+
- [Sec-CH-Viewport-Height](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Viewport-Height)
45+
- [Sec-CH-Prefers-Color-Scheme](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme)
46+
- [Sec-CH-Prefers-Reduced-Motion](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion)
47+
- [Sec-CH-Prefers-Reduced-Transparency](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Transparency)
48+
2049

2150
## Quick Setup
2251

2352
Install the module to your Nuxt application with one command:
2453

2554
```bash
26-
npx nuxi module add my-module
55+
npx nuxi module add nuxt-http-client-hints
56+
```
57+
58+
Add your configuration to your Nuxt config file:
59+
60+
```js
61+
httpClientHints: {
62+
// Your configuration here
63+
}
64+
```
65+
66+
Add your client and server plugins to your Nuxt application and register the corresponding hooks with your configuration:
67+
68+
```js
69+
// my-plugin.client.js
70+
export default defineNuxtPlugin((nuxtApp) => {
71+
nuxtApp.hook('http-client-hints:client-hints', (httpClientHints) => {
72+
// Your client logic here
73+
})
74+
})
75+
```
76+
77+
```js
78+
// my-plugin.server.js
79+
export default defineNuxtPlugin((nuxtApp) => {
80+
nuxtApp.hook('http-client-hints:ssr-client-hints', (httpClientHints) => {
81+
// Your server logic here
82+
})
83+
})
84+
```
85+
86+
You use the httpClientHints object in your application to access the configuration:
87+
88+
```html
89+
<!-- SomeComponent.vue -->
90+
<template>
91+
<pre>{{ $httpClientHints }}"</pre>
92+
</template>
93+
```
94+
95+
or in your modules:
96+
```js
97+
// my-module.js
98+
const clientHints = useNuxtApp().$httpClientHints
2799
```
28100

29101
That's it! You can now use HTTP Client Hints in your Nuxt app ✨
30102

103+
You can check the source code or the [JSDocs](https://www.jsdocs.io/package/nuxt-http-client-hints) for more information.
31104

32105
## Contribution
33106

@@ -36,40 +109,42 @@ That's it! You can now use HTTP Client Hints in your Nuxt app ✨
36109

37110
```bash
38111
# Install dependencies
39-
npm install
112+
pnpm install
40113

41114
# Generate type stubs
42-
npm run dev:prepare
115+
pnpm run dev:prepare
43116

44117
# Develop with the playground
45-
npm run dev
118+
pnpm run dev
46119

47120
# Build the playground
48-
npm run dev:build
121+
pnpm run dev:build
49122

50123
# Run ESLint
51-
npm run lint
124+
pnpm run lint
52125

53126
# Run Vitest
54-
npm run test
55-
npm run test:watch
56-
57-
# Release new version
58-
npm run release
127+
pnpm run test
128+
pnpm run test:watch
59129
```
60130

61131
</details>
62132

63133

64-
<!-- Badges -->
65-
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
66-
[npm-version-href]: https://npmjs.com/package/my-module
134+
## License
67135

68-
[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
69-
[npm-downloads-href]: https://npmjs.com/package/my-module
136+
[MIT](./LICENSE) License © 2024-PRESENT [Joaquín Sánchez](https://github.com/userquin)
70137

71-
[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
72-
[license-href]: https://npmjs.com/package/my-module
138+
<!-- Badges -->
73139

140+
[npm-version-src]: https://img.shields.io/npm/v/nuxt-http-client-hints?style=flat&colorA=18181B&colorB=F0DB4F
141+
[npm-version-href]: https://npmjs.com/package/nuxt-http-client-hints
142+
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-http-client-hints?style=flat&colorA=18181B&colorB=F0DB4F
143+
[npm-downloads-href]: https://npmjs.com/package/nuxt-http-client-hints
144+
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=18181B&colorB=F0DB4F
145+
[jsdocs-href]: https://www.jsdocs.io/package/nuxt-http-client-hints
146+
[license-src]: https://img.shields.io/github/license/userquin/nuxt-http-client-hints.svg?style=flat&colorA=18181B&colorB=F0DB4F
147+
[license-href]: https://github.com/userquin/nuxt-http-client-hints/blob/main/LICENSE
74148
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
75149
[nuxt-href]: https://nuxt.com
150+

0 commit comments

Comments
 (0)