Skip to content

Commit 59f7a7a

Browse files
committed
chore: add readme and license
1 parent b755471 commit 59f7a7a

File tree

2 files changed

+122
-30
lines changed

2 files changed

+122
-30
lines changed

LICENSE

Lines changed: 21 additions & 0 deletions
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

Lines changed: 101 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,104 @@
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+
The module includes support for the following HTTP Client hints:
20+
- [Device Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints)
21+
- [Device-Memory](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Device-Memory)
22+
- [Network Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints)
23+
- [Save-Data](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data)
24+
- [Downlink](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Downlink)
25+
- [ECT](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ECT)
26+
- [RTT](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/RTT)
27+
- [User Agent Hints](https://github.com/WICG/ua-client-hints)
28+
- [Sec-CH](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH)
29+
- [Sec-CH-UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA)
30+
- [Sec-CH-UA-Mobile](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Mobile)
31+
- [Sec-CH-UA-Platform](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Platform)
32+
- [Sec-CH-UA-Arch](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Arch)
33+
- [Sec-CH-UA-Model](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Model)
34+
- [Sec-CH-UA-Platform-Version](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Platform-Version)
35+
- [Sec-CH-UA-Bitness](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Bitness)
36+
- [Critical Client Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints#critical_client_hints)
37+
- [Sec-CH-Width](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Width)
38+
- [Sec-CH-DPR](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-DPR)
39+
- [Sec-CH-Viewport-Width](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Viewport-Width)
40+
- [Sec-CH-Viewport-Height](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Viewport-Height)
41+
- [Sec-CH-Prefers-Color-Scheme](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme)
42+
- [Sec-CH-Prefers-Reduced-Motion](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion)
43+
- [Sec-CH-Prefers-Reduced-Transparency](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Transparency)
44+
45+
[![WARNING]]
46+
> The [HTTP Client hints headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) listed above are still in draft, and only Chromium based browsers support them: Chrome, Edge, Chromium and Opera.
2047
2148
## Quick Setup
2249

2350
Install the module to your Nuxt application with one command:
2451

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

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

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

32103
## Contribution
33104

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

37108
```bash
38109
# Install dependencies
39-
npm install
110+
pnpm install
40111

41112
# Generate type stubs
42-
npm run dev:prepare
113+
pnpm run dev:prepare
43114

44115
# Develop with the playground
45-
npm run dev
116+
pnpm run dev
46117

47118
# Build the playground
48-
npm run dev:build
119+
pnpm run dev:build
49120

50121
# Run ESLint
51-
npm run lint
122+
pnpm run lint
52123

53124
# Run Vitest
54-
npm run test
55-
npm run test:watch
56-
57-
# Release new version
58-
npm run release
125+
pnpm run test
126+
pnpm run test:watch
59127
```
60128

61129
</details>
62130

63131

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
132+
## License
67133

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
134+
[MIT](./LICENSE) License © 2024-PRESENT [Joaquín Sánchez](https://github.com/userquin)
135+
136+
<!-- Badges -->
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+
[npm-version-src]: https://img.shields.io/npm/v/nuxt-http-client-hints?style=flat&colorA=18181B&colorB=F0DB4F
139+
[npm-version-href]: https://npmjs.com/package/nuxt-http-client-hints
140+
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-http-client-hints?style=flat&colorA=18181B&colorB=F0DB4F
141+
[npm-downloads-href]: https://npmjs.com/package/nuxt-http-client-hints
142+
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=18181B&colorB=F0DB4F
143+
[jsdocs-href]: https://www.jsdocs.io/package/nuxt-http-client-hints
144+
[license-src]: https://img.shields.io/github/license/userquin/nuxt-http-client-hints.svg?style=flat&colorA=18181B&colorB=F0DB4F
145+
[license-href]: https://github.com/userquin/nuxt-http-client-hints/blob/main/LICENSE
73146

74-
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
75-
[nuxt-href]: https://nuxt.com

0 commit comments

Comments
 (0)