visionary-url v1.1.0

.github/workflows/ci-cd-workflow.yml

@@ -0,0 +1,15 @@
+name: Visionary URL CI/CD
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm run build
+      - run: npm test

.gitignore

@@ -0,0 +1,19 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+node_modules
+dist
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.nvmrc

@@ -0,0 +1 @@
+v18.18.2

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "printWidth": 108
+}

README.md

@@ -0,0 +1,76 @@
+**Visionary URL** is a lightweight library for generating image URLs with embedded placeholder data (image dimensions, background color, blurhash).
+
+
+## Getting started
+
+Install `visionary-url` via npm. Both ES modules and CommonJS modules are supported.
+
+```bash
+npm install --save visionary-url
+```
+
+### Generating a Visionary URL
+
+```javascript
+import { generateVisionaryUrl } from 'visionary-url';
+
+const url = generateVisionaryUrl({
+  blurhash: "LCDJYN9FxG_M_N%L%M%M4o~ptRIA", // blurhash string
+  blurhashX: 4, // blurhash x components
+  blurhashY: 4, // blurhash y components
+  bcc: "#baccae", // background color code
+  fileId: "image:101", // image ID or URL
+  sourceHeight: 1200, // image height
+  sourceWidth: 1600, // image width
+});
+```
+
+
+
+## How it works
+
+A Visionary URL is formatted using 3 or 4 URL segments:
+|  | base path | | visionary code | | options (optional) | | filename |
+| -- | -- | -- | -- | -- | -- | -- | -- |
+| `/` | `image` | `/` | `<visionary code, base64url>` | `/` |`<option tokens>` | `/` | `image.jpg` |
+
+### Example URLs
+
+```
+https://examplecdn.cloud/image/aW1hZ2U6MTAwMDEhODAwITYwMA/image.jpg
+https://examplecdn.cloud/image/aW1hZ2U6MTAwMDEhODAwITYwMA/4k/image.jpg
+```
+
+### Visionary code
+
+The **Visionary code** is a base64url'd, exclamation-point separated list of image placeholder data, detailed as the following:
+
+
+| Attribute | Description |
+| -- | -- |
+| Image ID | Image URL or internal image ID (required) |
+| Image width | Used to compute aspect ratio of image placeholder (required) |
+| Image height | Used to compute aspect ratio of image placeholder (required) |
+| Background color code | Base layer background color code (e.g. `#BACCAE`) |
+| Blurhash code | Blurhash string of the image |
+| Blurhash x components | Number of x components the blurhash code represents |
+| Blurhash y components | Number of y components the blurhash code represents |
+
+
+### Image options
+
+Image options are optional and are provided as comma separated tokens.
+
+
+#### Size token
+
+One of the following tokens may be included in the options string to specify an image size: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `4k`, `5k`
+
+#### Download token
+
+| token | description |
+| --  |   --- |
+| `download`  | Indication for server to return `content-disposition: attachment;` in response headers  |
+
+
+

lib/constants.ts

@@ -0,0 +1 @@
+export * from "../src/constants";

lib/visionary-url.ts

@@ -0,0 +1,8 @@
+export { generateVisionaryCode, parseVisionaryCode } from "../src/visionary-code";
+export { generateVisionaryUrl, parseVisionaryUrl } from "../src/visionary-url";
+
+export * from "../src/enum";
+export { parseOptionsString } from "../src/image-options";
+export * from "../src/token";
+export { formatToContentType, isBase64UrlFormatted } from "../src/util";
+export * from "../src/types/visionary.types";