1
1
# ♡ serve-placeholder
2
2
3
- > Smart placeholder for missing assets
3
+ <!-- automd:badges color=yellow -->
4
4
5
- [ ![ npm version] [ npm-version-src ]] [ npm-version-href ]
6
- [ ![ npm downloads] [ npm-downloads-src ]] [ npm-downloads-href ]
7
- [ ![ Github Actions] [ github-actions-src ]] [ github-actions-href ]
8
- [ ![ Codecov] [ codecov-src ]] [ codecov-href ]
5
+ [ ![ npm version] ( https://img.shields.io/npm/v/serve-placeholder?color=yellow )] ( https://npmjs.com/package/serve-placeholder )
6
+ [ ![ npm downloads] ( https://img.shields.io/npm/dm/serve-placeholder?color=yellow )] ( https://npmjs.com/package/serve-placeholder )
7
+
8
+ <!-- /automd -->
9
+
10
+ Smart placeholder for missing assets
9
11
10
12
## Why?
11
13
@@ -25,25 +27,35 @@ Instead of indexing invalid URLs with HTML pages, we properly send 404 and the r
25
27
26
28
Install package:
27
29
30
+ <!-- automd:pm-install -->
31
+
28
32
``` sh
33
+ # ✨ Auto-detect
34
+ npx nypm install serve-placeholder
35
+
29
36
# npm
30
37
npm install serve-placeholder
31
38
32
39
# yarn
33
- yarn install serve-placeholder
40
+ yarn add serve-placeholder
34
41
35
42
# pnpm
36
43
pnpm install serve-placeholder
44
+
45
+ # bun
46
+ bun install serve-placeholder
37
47
```
38
48
49
+ <!-- /automd -->
50
+
39
51
Import:
40
52
41
53
``` js
42
54
// ESM
43
- import { servePlaceholder } from ' serve-placeholder'
55
+ import { servePlaceholder } from " serve-placeholder" ;
44
56
45
57
// CommonJS
46
- const { servePlaceholder } = require (' serve-placeholder' )
58
+ const { servePlaceholder } = require (" serve-placeholder" );
47
59
```
48
60
49
61
Create and add server middleware between serve-static and router middleware:
@@ -67,7 +79,7 @@ app.use('/', router)
67
79
68
80
### ` handlers `
69
81
70
- A mapping from file extensions to the handler. Extensions should start with * dot * like ` .js ` .
82
+ A mapping from file extensions to the handler. Extensions should start with _ dot _ like ` .js ` .
71
83
72
84
You can disable any of the handlers by setting the value to ` null `
73
85
@@ -108,11 +120,11 @@ Set headers to prevent accidentally caching 404 resources.
108
120
When enabled, these headers will be sent:
109
121
110
122
``` js
111
- {
112
- ' cache-control' : ' no-cache, no-store, must-revalidate' ,
113
- ' expires' : ' 0 ' ,
114
- ' pragma' : ' no-cache'
115
- }
123
+ const headers = {
124
+ " cache-control" : " no-cache, no-store, must-revalidate" ,
125
+ expires: " 0 " ,
126
+ pragma: " no-cache" ,
127
+ };
116
128
```
117
129
118
130
### ` placeholderHeader `
@@ -125,39 +137,48 @@ Sets an `X-Placeholder` header with value of handler name.
125
137
126
138
These are [ default handlers] ( ./src/defaults.ts ) . You can override every of them using provided options.
127
139
128
- Handler | Extensions | Mime type | Placeholder
129
- -----------|------------------------|--------------------------|-------------------
130
- ` default ` | any unknown extension | - | -
131
- ` css ` | ` .css ` | ` text/css ` | ` /* style not found */ `
132
- ` html ` | ` .html ` , ` .htm ` | ` text/html ` | ` <!-- page not found --> `
133
- ` js ` | ` .js ` | ` application/javascript ` | ` /* script not found */ `
134
- ` json ` | ` .json ` | ` application/json ` | ` {} `
135
- ` map ` | ` .map ` | ` application/json ` | [ empty sourcemap v3 json]
136
- ` plain ` | ` .txt ` , ` .text ` , ` .md ` | ` text/plain ` | [ empty]
137
- ` image ` | ` .png ` , ` .jpg ` , ` .jpeg ` , ` .gif ` , ` .svg ` , ` .webp ` , ` .bmp ` , ` .ico ` | ` image/gif ` | [ transparent 1x1 image]
140
+ | Handler | Extensions | Mime type | Placeholder |
141
+ | --------- | ---------------------------------------------------------------- | ------------------------ | ------------------------- |
142
+ | ` default ` | any unknown extension | - | - |
143
+ | ` css ` | ` .css ` | ` text/css ` | ` /* style not found */ ` |
144
+ | ` html ` | ` .html ` , ` .htm ` | ` text/html ` | ` <!-- page not found --> ` |
145
+ | ` js ` | ` .js ` | ` application/javascript ` | ` /* script not found */ ` |
146
+ | ` json ` | ` .json ` | ` application/json ` | ` {} ` |
147
+ | ` map ` | ` .map ` | ` application/json ` | [ empty sourcemap v3 json] |
148
+ | ` plain ` | ` .txt ` , ` .text ` , ` .md ` | ` text/plain ` | [ empty] |
149
+ | ` image ` | ` .png ` , ` .jpg ` , ` .jpeg ` , ` .gif ` , ` .svg ` , ` .webp ` , ` .bmp ` , ` .ico ` | ` image/gif ` | [ transparent 1x1 image] |
150
+
151
+ ## Development
152
+
153
+ <details >
138
154
139
- ## 💻 Development
155
+ < summary >local development</ summary >
140
156
141
157
- Clone this repository
142
- - Enable [ Corepack] ( https://github.com/nodejs/corepack ) using ` corepack enable ` (use ` npm i -g corepack ` for Node.js < 16.10)
158
+ - Install latest LTS version of [ Node.js] ( https://nodejs.org/en/ )
159
+ - Enable [ Corepack] ( https://github.com/nodejs/corepack ) using ` corepack enable `
143
160
- Install dependencies using ` pnpm install `
144
161
- Run interactive tests using ` pnpm dev `
145
162
163
+ </details >
164
+
146
165
## License
147
166
148
- Made with 💛
167
+ <!-- automd:contributors author=pi0 license=MIT -->
168
+
169
+ Published under the [ MIT] ( https://github.com/unjs/serve-placeholder/blob/main/LICENSE ) license.
170
+ Made by [ @pi0 ] ( https://github.com/pi0 ) and [ community] ( https://github.com/unjs/serve-placeholder/graphs/contributors ) 💛
171
+ <br ><br >
172
+ <a href =" https://github.com/unjs/serve-placeholder/graphs/contributors " >
173
+ <img src =" https://contrib.rocks/image?repo=unjs/serve-placeholder " />
174
+ </a >
149
175
150
- Published under [ MIT License ] ( ./LICENSE ) .
176
+ <!-- /automd -->
151
177
152
- <!-- Badges -->
153
- [ npm-version-src ] : https://img.shields.io/npm/v/serve-placeholder?style=flat-square
154
- [ npm-version-href ] : https://npmjs.com/package/serve-placeholder
178
+ <!-- automd:with-automd -->
155
179
156
- [ npm-downloads-src ] : https://img.shields.io/npm/dm/serve-placeholder?style=flat-square
157
- [ npm-downloads-href ] : https://npmjs.com/package/serve-placeholder
180
+ ---
158
181
159
- [ github-actions-src ] : https://img.shields.io/github/actions/workflow/status/unjs/serve-placeholder/ci.yml?style=flat-square&branch=main
160
- [ github-actions-href ] : https://github.com/unjs/serve-placeholder/actions?query=workflow%3Aci
182
+ _ 🤖 auto updated with [ automd] ( https://automd.unjs.io ) _
161
183
162
- [ codecov-src ] : https://img.shields.io/codecov/c/gh/unjs/serve-placeholder/main?style=flat-square
163
- [ codecov-href ] : https://codecov.io/gh/unjs/serve-placeholder
184
+ <!-- /automd -->
0 commit comments