initial-logo 0.0.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 saitogo555
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# initial-logo.js
+
+[🇺🇸 English](README.md) | [🇯🇵 日本語](docs/README.ja.md)
+
+Generate JavaScript/TypeScript style logos (2 characters inside a square) easily.
+
+## Features
+
+- 🎨 **Customizable**: Change colors, size, fonts, and more.
+- 🌈 **Gradients**: Support for gradient backgrounds and text.
+- 🔤 **Custom Fonts**: Easily load fonts from Google Fonts or other sources.
+- ⚡ **Lightweight**: Zero dependencies for the core logic.
+
+## Installation
+
+```bash
+bun add initial-logo
+# or
+npm install initial-logo
+```
+
+## Usage
+
+```typescript
+import { generateLogo } from 'initial-logo';
+
+const logo = generateLogo({
+  text: 'TS',
+  size: 100,
+  textColor: '#ffffff',
+  backgroundColor: '#3178c6',
+});
+
+document.body.appendChild(logo);
+```
+
+### Gradient Example
+
+```typescript
+const gradientLogo = generateLogo({
+  text: 'GR',
+  textColor: ['#ff0000', '#0000ff'], // Gradient text
+  backgroundColor: ['#222222', '#444444'], // Gradient background
+});
+```
+
+## API
+
+### `generateLogo(options: LogoOptions): HTMLDivElement`
+
+Generates a logo element.
+
+#### `LogoOptions`
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `text` | `string` | (Required) | The 2 characters to display. |
+| `size` | `number` | `100` | Size of the square in pixels. |
+| `textColor` | `string \| string[]` | `'#ffffff'` | Text color. Pass an array for gradient. |
+| `backgroundColor` | `string \| string[]` | `'#000000'` | Background color. Pass an array for gradient. |
+| `fontSource` | `string` | Google Fonts URL | URL to load the font from. |
+| `fontFamily` | `string` | `'Inconsolata, monospace'` | CSS font-family. |
+| `fontSize` | `number` | `Math.round(size * 0.65)` | Font size in pixels. |
+| `fontWeight` | `string \| number` | `'bold'` | CSS font-weight. |
+| `lineHeight` | `string \| number` | `0.8` | CSS line-height. |
+
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Start playground
+bun run playground
+
+# Build
+bun run build
+```
+
+## Disclaimer
+
+This tool is an unofficial project and is not affiliated with, endorsed by, or connected to Oracle, Microsoft, or the OpenJS Foundation. Users are solely responsible for the trademark and copyright compliance of any logos generated using this tool.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  generateLogo: () => generateLogo
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/core.ts
+var DEFAULT_SIZE = 100;
+var DEFAULT_TEXT_COLOR = "#ffffff";
+var DEFAULT_FONT_SOURCE = "https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap";
+var DEFAULT_FONT_FAMILY = "Inconsolata, monospace";
+var DEFAULT_FONT_WEIGHT = "bold";
+var DEFAULT_LINE_HEIGHT = 0.8;
+var DEFAULT_BG_COLOR = "#000000";
+function validateOptions(options) {
+  if (options.text.length !== 2) {
+    throw new Error("Text must be exactly 2 characters.");
+  }
+}
+function getGradientStyle(colors) {
+  return `linear-gradient(90deg, ${colors.join(", ")})`;
+}
+function getContainerStyle(options) {
+  const size = options.size ?? DEFAULT_SIZE;
+  const backgroundColor = options.backgroundColor ?? DEFAULT_BG_COLOR;
+  const style = {
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "flex-end",
+    width: `${size}px`,
+    height: `${size}px`
+  };
+  if (Array.isArray(backgroundColor)) {
+    style.backgroundImage = getGradientStyle(backgroundColor);
+  } else {
+    style.backgroundColor = backgroundColor;
+  }
+  return style;
+}
+function loadFont(source) {
+  if (typeof document === "undefined") return;
+  const existingLink = document.querySelector(`link[href="${source}"]`);
+  if (existingLink) return;
+  const link = document.createElement("link");
+  link.href = source;
+  link.rel = "stylesheet";
+  document.head.appendChild(link);
+}
+function getTextStyle(options) {
+  const size = options.size ?? DEFAULT_SIZE;
+  const textColor = options.textColor ?? DEFAULT_TEXT_COLOR;
+  const fontFamily = options.fontFamily ?? DEFAULT_FONT_FAMILY;
+  const fontSize = options.fontSize ?? Math.round(size * 0.65);
+  const fontWeight = options.fontWeight ?? DEFAULT_FONT_WEIGHT;
+  const lineHeight = options.lineHeight ?? DEFAULT_LINE_HEIGHT;
+  const style = {
+    fontFamily,
+    fontSize: `${fontSize}px`,
+    fontWeight: fontWeight.toString(),
+    lineHeight: lineHeight.toString()
+  };
+  if (Array.isArray(textColor)) {
+    style.backgroundImage = getGradientStyle(textColor);
+    style.backgroundClip = "text";
+    style.color = "transparent";
+  } else {
+    style.color = textColor;
+  }
+  return style;
+}
+function generateLogo(options) {
+  validateOptions(options);
+  loadFont(options.fontSource ?? DEFAULT_FONT_SOURCE);
+  const containerElement = document.createElement("div");
+  const textElement = document.createElement("span");
+  const containerStyles = getContainerStyle(options);
+  const textStyles = getTextStyle(options);
+  Object.assign(containerElement.style, containerStyles);
+  Object.assign(textElement.style, textStyles);
+  textElement.textContent = options.text;
+  containerElement.appendChild(textElement);
+  return containerElement;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateLogo
+});

package/dist/index.d.cts

@@ -0,0 +1,15 @@
+interface LogoOptions {
+    size?: number;
+    text: string;
+    textColor?: string | string[];
+    fontSource?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: string | number;
+    lineHeight?: string | number;
+    backgroundColor?: string | string[];
+}
+
+declare function generateLogo(options: LogoOptions): HTMLDivElement;
+
+export { type LogoOptions, generateLogo };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+interface LogoOptions {
+    size?: number;
+    text: string;
+    textColor?: string | string[];
+    fontSource?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: string | number;
+    lineHeight?: string | number;
+    backgroundColor?: string | string[];
+}
+
+declare function generateLogo(options: LogoOptions): HTMLDivElement;
+
+export { type LogoOptions, generateLogo };

package/dist/index.js

@@ -0,0 +1,80 @@
+// src/core.ts
+var DEFAULT_SIZE = 100;
+var DEFAULT_TEXT_COLOR = "#ffffff";
+var DEFAULT_FONT_SOURCE = "https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap";
+var DEFAULT_FONT_FAMILY = "Inconsolata, monospace";
+var DEFAULT_FONT_WEIGHT = "bold";
+var DEFAULT_LINE_HEIGHT = 0.8;
+var DEFAULT_BG_COLOR = "#000000";
+function validateOptions(options) {
+  if (options.text.length !== 2) {
+    throw new Error("Text must be exactly 2 characters.");
+  }
+}
+function getGradientStyle(colors) {
+  return `linear-gradient(90deg, ${colors.join(", ")})`;
+}
+function getContainerStyle(options) {
+  const size = options.size ?? DEFAULT_SIZE;
+  const backgroundColor = options.backgroundColor ?? DEFAULT_BG_COLOR;
+  const style = {
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "flex-end",
+    width: `${size}px`,
+    height: `${size}px`
+  };
+  if (Array.isArray(backgroundColor)) {
+    style.backgroundImage = getGradientStyle(backgroundColor);
+  } else {
+    style.backgroundColor = backgroundColor;
+  }
+  return style;
+}
+function loadFont(source) {
+  if (typeof document === "undefined") return;
+  const existingLink = document.querySelector(`link[href="${source}"]`);
+  if (existingLink) return;
+  const link = document.createElement("link");
+  link.href = source;
+  link.rel = "stylesheet";
+  document.head.appendChild(link);
+}
+function getTextStyle(options) {
+  const size = options.size ?? DEFAULT_SIZE;
+  const textColor = options.textColor ?? DEFAULT_TEXT_COLOR;
+  const fontFamily = options.fontFamily ?? DEFAULT_FONT_FAMILY;
+  const fontSize = options.fontSize ?? Math.round(size * 0.65);
+  const fontWeight = options.fontWeight ?? DEFAULT_FONT_WEIGHT;
+  const lineHeight = options.lineHeight ?? DEFAULT_LINE_HEIGHT;
+  const style = {
+    fontFamily,
+    fontSize: `${fontSize}px`,
+    fontWeight: fontWeight.toString(),
+    lineHeight: lineHeight.toString()
+  };
+  if (Array.isArray(textColor)) {
+    style.backgroundImage = getGradientStyle(textColor);
+    style.backgroundClip = "text";
+    style.color = "transparent";
+  } else {
+    style.color = textColor;
+  }
+  return style;
+}
+function generateLogo(options) {
+  validateOptions(options);
+  loadFont(options.fontSource ?? DEFAULT_FONT_SOURCE);
+  const containerElement = document.createElement("div");
+  const textElement = document.createElement("span");
+  const containerStyles = getContainerStyle(options);
+  const textStyles = getTextStyle(options);
+  Object.assign(containerElement.style, containerStyles);
+  Object.assign(textElement.style, textStyles);
+  textElement.textContent = options.text;
+  containerElement.appendChild(textElement);
+  return containerElement;
+}
+export {
+  generateLogo
+};

package/package.json

@@ -1,11 +1,51 @@
 {
   "name": "initial-logo",
-  "version": "0.0.0",
-  "main": "index.js",
+  "version": "0.1.0",
+  "description": "Generate JavaScript/TypeScript style logo",
+  "keywords": [
+    "logo",
+    "generator",
+    "typescript",
+    "javascript",
+    "initials",
+    "browser"
+  ],
+  "author": "saitogo555",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/saitogo555/initial-logo.js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/saitogo555/initial-logo.js/issues"
+  },
+  "homepage": "https://github.com/saitogo555/initial-logo.js#readme",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "playground": "vite playground",
+    "prepublishOnly": "bun run build"
   },
-  "author": "",
-  "license": "ISC",
-  "description": ""
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
+  }
 }