@substrate-system/blur-hash 0.0.0 → 0.0.1

package/README.md

@@ -3,7 +3,6 @@
 [![types](https://img.shields.io/npm/types/@substrate-system/icons?style=flat-square)](README.md)
 [![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
-[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
 [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
 
 This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/), with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
@@ -13,6 +12,23 @@ This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-
 > [!TIP]
 > Throttle the internet speed with the dev tools.
 
+<!-- toc -->
+
+- [install](#install)
+- [API](#api)
+  * [ESM](#esm)
+  * [Common JS](#common-js)
+  * [attributes](#attributes)
+- [CSS](#css)
+  * [Import CSS](#import-css)
+- [use](#use)
+  * [Bundler](#bundler)
+  * [pre-built JS](#pre-built-js)
+- [Create the string](#create-the-string)
+  * [Print to system clipboard](#print-to-system-clipboard)
+
+<!-- tocstop -->
+
 ## install
 
 ```sh
@@ -33,6 +49,20 @@ import '@substrate-system/blur-hash'
 require('@substrate-system/blur-hash')
 ```
 
+### attributes
+Takes the following attributes
+
+#### time
+The time for css transitions and animation. This is set as a CSS variable.
+
+#### placeholder
+The string created by the blurhash algorithm. See [node example](#create-the-string).
+
+#### width & height
+The dimensions of the image
+
+
+
 ## CSS
 
 ### Import CSS
@@ -50,12 +80,14 @@ import '@substrate-system/blur-hash/css/min'
 This calls the global function `customElements.define`. Just import, then use
 the tag in your HTML.
 
-### JS
+### Bundler
+
+#### JS
 ```js
 import '@substrate-system/blur-hash'
 ```
 
-### HTML
+#### HTML
 ```html
 <div>
     <blur-hash
@@ -69,28 +101,16 @@ import '@substrate-system/blur-hash'
 </div>
 ```
 
-### attributes
-Takes the following attributes
-
-#### time
-The time for css transitions and animation. This is set as a CSS variable.
-
-#### placeholder
-The string created by the blurhash algorithm. See [node example](#create-the-string).
-
-#### width & height
-The dimensions of the image
-
-## pre-built JS
+### pre-built JS
 This package exposes minified JS files too. Copy them to a location that is
 accessible to your web server, then link to them in HTML.
 
-### copy
+#### copy
 ```sh
 cp ./node_modules/@substrate-system/blur-hash/dist/blur-hash.min.js ./public
 ```
 
-### HTML
+#### HTML
 ```html
 <script type="module" src="./blur-hash.min.js"></script>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/blur-hash",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "A blurry placeholder image web component",
   "type": "module",
   "main": "dist/index.js",
@@ -27,7 +27,7 @@
     "build-bin": "mkdir -p dist/bin && esbuild ./bin/index.ts > ./dist/bin/index.js",
     "start": "vite",
     "preversion": "npm run lint",
-    "version": "auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md",
+    "version": "markdown-toc --maxdepth 3 -i README.md && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
     "postversion": "git push --follow-tags && npm publish",
     "prepublishOnly": "npm run build"
   },
@@ -48,6 +48,7 @@
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "inkjet": "^3.0.0",
+    "markdown-toc": "^1.2.0",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-nesting": "^12.1.5",

package/README.example.md

@@ -1,84 +0,0 @@
-# package name here
-![tests](https://github.com/substrate-system/icons/actions/workflows/nodejs.yml/badge.svg)
-[![types](https://img.shields.io/npm/types/@substrate-system/icons?style=flat-square)](README.md)
-[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
-[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
-[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
-[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
-
-`<package description goes here>`
-
-[See a live demo](https://namespace.github.io/package-name/)
-
-## install
-
-Installation instructions
-
-```sh
-npm i -S @namespace/package
-```
-
-## API
-
-This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
-
-### ESM
-```js
-import '@namespace/package/module'
-```
-
-### Common JS
-```js
-require('@namespace/package/module')
-```
-
-## CSS
-
-### Import CSS
-
-```js
-import '@namespace/package-name/css'
-```
-
-Or minified:
-```js
-import '@namespace/package-name/css/min'
-```
-
-### Customize CSS via some variables
-
-```css
-component-name {
-    --example: pink;
-}
-```
-
-## use
-This calls the global function `customElements.define`. Just import, then use
-the tag in your HTML.
-
-### JS
-```js
-import '@namespace/package/module'
-```
-
-### HTML
-```html
-<div>
-    <example-component></example-component>
-</div>
-```
-
-### pre-built JS
-This package exposes minified JS files too. Copy them to a location that is
-accessible to your web server, then link to them in HTML.
-
-#### copy
-```sh
-cp ./node_modules/@namespace/package/dist/module.min.js ./public
-```
-
-#### HTML
-```html
-<script type="module" src="./module.min.js"></script>
-```