Installation Guide

Choose a simple browser script or local ESM files for a bundled project. The helper has no runtime dependency.

Public CDNHelper v1.0.0No API key

Choose an installation method

The helper is intentionally dependency-light. Choose the browser script for static sites, or local ESM files for a bundled application. Both expose the same URL-generation API.

Browser CDN scriptOne script tag. Best for plain HTML and prototypes.

Local ESM filesBest for Vite, TypeScript and framework projects.

Option A — Browser script

<script
  defer
  src="https://softhoursdiary-emojis.pages.dev/soft-hours-diary.js"
></script>

The global API is window.SoftHoursDiary. The browser build also registers the custom elements when supported.

Option B — Local ESM import

Download soft-hours-diary.js and soft-hours-diary.esm.mjs from the repository and keep them together, for example in src/lib/shd/.

import SoftHoursDiary, {
  emojiUrl,
  flagUrl,
  flagIconUrl
} from "./soft-hours-diary.esm.mjs";

export { emojiUrl, flagUrl, flagIconUrl };
export default SoftHoursDiary;

The ESM entry imports the sibling UMD implementation as a side effect, then exports named methods. Keep both files side by side.

npm package status

Not published yet. Package metadata is prepared as soft-hours-diary-cdn, with TypeScript declarations, README and MIT license in the repository. The package is not currently available from npm.

npm install soft-hours-diary-cdn

Run this command only after publication. Until then, use the browser script or local ESM files; the unpublished name will not resolve from the registry.

Verify the helper

const SHD = window.SoftHoursDiary;

if (!SHD) {
  throw new Error("Soft Hours Diary helper has not loaded.");
}

console.log("Version:", SHD.version);
console.log(
  SHD.getUrl({ type: "emoji", quality: "svg", id: "1f632" })
);

A successful call returns an absolute URL. It does not request the image; the browser loads the file after you assign the URL to an image element.

Framework selection

Plain HTML: browser script and custom elements.
Vite / React: browser global or local ESM imports.
Next.js: local ESM helpers in Server Components; next/script for browser custom elements.
TypeScript: local ESM imports plus the repository's index.d.ts.

Download AI context (.md)Interactive playground ↗API reference