diff --git a/src/constants.ts b/src/constants.ts index cd767ee..e8f3e07 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,12 +1,3 @@ -import type { ImagePlaceholderParams } from './types' - -export const DEFAULT_PREFIX = 'image/placeholder' - -export const DEFAULT_PARAMS: ImagePlaceholderParams = { - width: 300, - type: 'png', -} - export const imageMimeType = { jpg: 'image/jpg', jpeg: 'image/jpeg', diff --git a/src/pathRules.ts b/src/pathRules.ts index 93d9aa5..278db8a 100644 --- a/src/pathRules.ts +++ b/src/pathRules.ts @@ -2,14 +2,34 @@ import { pathToRegexp } from 'path-to-regexp' export type FindPathRule = (pathname: string) => string | undefined +const pattern = + /([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8}|(?:rgba?)?\(?\d{1,3},\s*\d{1,3},\s*\d{1,3}(?:,\s*(?:\d?\.?\d))?\)?)/ + .source + +const background = `/(bg|background)/:background${pattern}` +const text = '/(text|t)/:text' +const textColor = `/(textColor|color|c)/:textColor${pattern}` +const last = '/:width(\\d+)?/:height(\\d+)?{.:type}?' + export function generatePathRules(prefix: string) { return [ - '/bg/:background/text/:text/:width?/:height?{.:type}?', - '/text/:text/bg/:background/:width?/:height?{.:type}?', - '/text/:text/:width?/:height?{.:type}?', - '/bg/:background/:width?/:height?{.:type}?', - '/:width?/:height?{.:type}?', - ].map((_) => `${prefix}${_}`) + `${background}${text}${textColor}`, + `${background}${textColor}${text}`, + `${text}${background}${textColor}`, + `${text}${textColor}${background}`, + `${textColor}${background}${text}`, + `${textColor}${text}${background}`, + `${background}${text}`, + `${text}${background}`, + `${background}${textColor}`, + `${textColor}${background}`, + `${text}${textColor}`, + `${textColor}${text}`, + background, + text, + textColor, + '', + ].map((_) => `${prefix}${_}${last}`) } export function createPathRuleMatch(prefix: string): FindPathRule { diff --git a/src/pathToImage.ts b/src/pathToImage.ts index 4fde068..a836232 100644 --- a/src/pathToImage.ts +++ b/src/pathToImage.ts @@ -3,7 +3,6 @@ import { match } from 'path-to-regexp' import type { Create, CreateText } from 'sharp' import sharp from 'sharp' import { bufferCache } from './cache' -import { DEFAULT_PARAMS } from './constants' import type { FindPathRule } from './pathRules' import type { ImageCacheItem, @@ -41,7 +40,7 @@ export async function pathToImage( const params = urlMatch.params as ImagePlaceholderParams const query = urlQuery as ImagePlaceholderQuery - const imgType = params.type || DEFAULT_PARAMS.type! + const imgType = params.type || options.type const width = Number(params.width) || 300 const height = Number(params.height) || Math.ceil(width * options.ratio) @@ -74,7 +73,7 @@ export async function pathToImage( text: textOptions, quality: options.quality, compressionLevel: options.compressionLevel, - textColor: formatColor(query.textColor, true) || options.textColor, + textColor: formatColor(params.textColor, true) || options.textColor, }) const result: ImageCacheItem = { type: imgType, diff --git a/src/plugin.ts b/src/plugin.ts index c6903da..9ebb5b5 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -2,7 +2,6 @@ import MagicString from 'magic-string' import type { Plugin, ResolvedConfig } from 'vite' import { isCSSRequest } from 'vite' import { contentCache } from './cache' -import { DEFAULT_PREFIX } from './constants' import type { FindPathRule } from './pathRules' import { createPathRuleMatch } from './pathRules' import { pathToImage } from './pathToImage' @@ -15,7 +14,7 @@ export const parseOptions = ( ): Required => { options = Object.assign( { - prefix: DEFAULT_PREFIX, + prefix: 'image/placeholder', background: '#ccc', textColor: '#333', width: 300, @@ -78,6 +77,7 @@ function placeholderServerPlugin( res.setHeader('Accept-Ranges', 'bytes') res.setHeader('Content-Type', getMimeType(image.type)) + res.setHeader('Cache-Control', 'max-age=300') res.end(image.buffer) }) }, diff --git a/src/types.ts b/src/types.ts index 2ede3b9..3457776 100644 --- a/src/types.ts +++ b/src/types.ts @@ -117,6 +117,7 @@ export interface ImagePlaceholderParams { width?: number height?: number text?: string + textColor?: string background?: string type?: ImageType } @@ -125,7 +126,6 @@ export interface ImagePlaceholderQuery { noise?: 0 | 1 noiseMean?: number noiseSigma?: number - textColor?: string } export interface ImageCacheItem {