@xlibz/site-start-kit v0.0.28
site-start-kit
A set of tools for automating routine tasks
Getting Started
npm i -D @xlibz/site-start-kit
Then, in package.json, create the following script:
{
"scripts": {
...
"prepare": "npx tsx ./prepare/index.ts"
...
}
}
Examples
For the examples below, the following project structure is used:
src
public
head
images
optimized
prepare
assets
images
icons
index.ts
All code is written in index.ts.
FaviconGenerator
import { FaviconGenerator } from '@xlibz/site-start-kit'
await new FaviconGenerator({
// Path to the original icon
src: 'prepare/assets/icon.png',
// Folder where all generated content will be uploaded
dest: 'public/head',
// Generates HTML head tags
head: 'src/components/head',
// See https://www.npmjs.com/package/favicons
options: {
path: './head',
},
}).generate()
ImageOptimizer
! Only works for PNG and JPG files
import { ImageOptimizer } from '@xlibz/site-start-kit'
await new ImageOptimizer({
// Folder with images (can be nested deeply)
src: 'prepare/assets/images',
// Folder where all generated images will be uploaded
dest: 'public/images/optimized',
// A WebP version will be generated for each image
webp: true,
// Low-quality image placeholders will be generated for each image
placeholders: true,
}).optimize()
SVGSpriteGenerator
All icons will be given the same ID as their file name + spriteName
import { SVGSpriteGenerator } from '@xlibz/site-start-kit'
new SVGSpriteGenerator({
// Folder with SVG files
src: 'prepare/assets/icons',
// Folder where the sprite will be loaded
dest: 'public',
// Remove fill and stroke from all SVG child elements
removeFill: true,
removeStroke: true,
// SVG sprite ID
name: 'my-sprite',
}).generate()
ImageSequenceGenerator
It's just a dumb wrapper around this library with only one fps
parameter.
Make sure ffmpeg is installed on your machine.
import { ImageSequenceGenerator } from '@xlibz/site-start-kit'
await new ImageSequenceGenerator({
// path to video file
src: 'prepare/assets/video.mp4',
// path to the folder where the frames will be uploaded
dest: 'public/images/frames',
// base name of each frame
name: 'frame',
extension: 'png',
fps: 60,
}).generate()
UnionTypeGenerator
Generates a union type based on filenames
import { UnionTypeGenerator } from '@xlibz/site-start-kit'
import { sep } from 'path'
new UnionTypeGenerator({
src: 'prepare/assets/icons',
dest: 'src/types/sprites',
name: 'SpriteSymbols',
}).generate((fileName) => {
return `sprite:${fileName.split('.').slice(0, -1).join()}`
})
new UnionTypeGenerator({
src: 'public/images/optimized',
dest: 'src/types/sprites',
name: 'ImagesLinks',
}).generate((_, pathName) => {
return pathName.replaceAll(sep, '/').replace('public/', '/')
})
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago