wakeb-clients

Centralized client logos & brand assets for Wakeb projects. Ships 44 clients with dark/light SVG variants in large & small sizes.

Installation

npm install wakeb-clients

Usage

Same API in Vue, Nuxt, React, Next.js and other frameworks

Prepare the images before development and production builds:

npx wakeb-clients sync --dest ./public/wakeb-clients --client fikra

Then use the same call on the server and in the browser:

import { getClientBranding } from "wakeb-clients";

const { assets, labels, primary } = getClientBranding("fikra");
// assets.website_logo_large -> /wakeb-clients/assets/fikra/logo.svg
// labels.ar / labels.en, primary

Existing functions also support public URLs:

getClientAssets("fikra", { baseURL: "/wakeb-clients/assets" });

Omit --client to copy all clients. Use static/ instead of public/ for SvelteKit. For deployments under a subpath, pass baseURL to include that path. See framework examples and setup, including build hooks, Nuxt, Next.js, themes and SSR. The legacy examples below remain supported; their one-argument asset API does not produce portable SSR URLs.

Legacy bundler / Node usage

import {
  getClientAssets,
  getAvailableClients,
  getClientName,
  applyClientPrimaryTheme,
} from "wakeb-clients";

// Get logo paths for a client
const logos = getClientAssets("wakeb");
// {
//   website_dark_logo_large:  "/.../assets/wakeb/dark.svg",
//   website_logo_large:       "/.../assets/wakeb/light.svg",
//   website_dark_logo_small:  "/.../assets/wakeb/sm_dark.svg",
//   website_logo_small:       "/.../assets/wakeb/sm_light.svg"
// }

// List all clients
const clients = getAvailableClients();
// ["aldrees", "alfanar", "aramco", ...]

// Get client display name in Arabic or English
getClientName("aramco", "ar"); // "أرامكو"
getClientName("aramco", "en"); // "Aramco"

// Apply client primary color to Vuetify theme + CSS variable
const finalPrimary = applyClientPrimaryTheme({
  clientName: "aramco",
  themeConfig: theme,
});
// finalPrimary -> client primary if available, otherwise theme primary fallback

CommonJS

const { getClientAssets } = require("wakeb-clients");

Adding a Client at Runtime

import { addClient } from "wakeb-clients";

addClient("my-client", {
  website_dark_logo_large: "./logos/dark.svg",
  website_logo_large: "./logos/light.svg",
  website_dark_logo_small: "./logos/sm_dark.svg",
  website_logo_small: "./logos/sm_light.svg",
});
// → { created: true, path: "/.../assets/my-client" }
// Already exists → { created: false, path: "..." }

API

getClientAssets(clientName) → { website_dark_logo_large, website_logo_large, website_dark_logo_small, website_logo_small }

Returns absolute paths for each logo variant (null if not available). Throws if the client folder doesn't exist.

getClientName(clientName, lang) → string

Returns the client display name in the given language ("ar" or "en"). Throws if the client or language is invalid.

getAvailableClients() → string[]

Returns all client folder names under assets/.

applyClientPrimaryTheme(options) → string | null

Resolves and applies the primary color in this order:

1. client primary color from package registry.
2. fallbackPrimary from options.
3. themeConfig.defaultTheme primary.
4. themeConfig.themes.light primary.

Also updates themeConfig.themes.light.colors.primary and themeConfig.themes.dark.colors.primary (when available), and sets --v-theme-primary as RGB for Vuetify rgba(var(--v-theme-primary), 1) usage.

addClient(clientName, logos) → { created, path }

Copies logo files into the package assets. Skips if the client already exists.

File Naming Convention

| Key | File | Fallback | | ------------------------- | -------------- | ------------- | | website_dark_logo_large | dark.svg | logo.svg | | website_logo_large | light.svg | logo.svg | | website_dark_logo_small | sm_dark.svg | sm_logo.svg | | website_logo_small | sm_light.svg | sm_logo.svg |

Docs

wakeb-clients.surge.sh

License

MIT

AI Agent Skill

This package ships with an Agent Skill at docs/SKILL.md. The skill teaches supported AI coding agents the intended API, workflows, constraints, and verification steps for this package.

Install the package

npm install wakeb-clients

Install the skill for your AI agent

npx skills add ./node_modules/wakeb-clients/docs

The skills CLI can install the skill into supported agents such as Claude Code, Codex, Cursor, OpenCode, and many others. Run the command from your project root after installing the npm package.

To install globally instead of only for the current project:

npx skills add ./node_modules/wakeb-clients/docs -g

You can also target a specific supported agent with --agent, for example:

npx skills add ./node_modules/wakeb-clients/docs --agent codex

After installation, the agent can discover and follow the package skill automatically according to that agent's supported skill location.