@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/', '/')
})