@makashif/brand

@makashif/brand

One identity, every surface. An interactive DevTools console signature, a live on-page brand card, and an ANSI terminal banner — from a single config.

npm i @makashif/brand

That is the whole setup. A postinstall hook detects your framework and wires itself in — it prints exactly what it did, and never touches anything twice.

Not automatic enough, or you skipped install scripts? Same thing, on demand:

npx @makashif/brand init

How the automatic wiring stays safe

Writing to someone's project during an install deserves real caution, so this is deliberately narrow:

• It only ever creates a new file, prepends one import, or edits a config whose result still parses. Config edits are verified with node --check and rolled back if they don't. A TypeScript config is never machine-edited — node --check can't validate TS, and an unverifiable rewrite of a build config isn't worth the risk, so you get the two lines to paste instead.
• It never overwrites. An existing file is reported and left alone; running it again is a no-op.
• It never fails your install. Every path exits 0 — a cosmetic feature must not break npm install.
• It skips CI, so no surprise diffs in a pipeline.
• It skips transitive installs. If another package depends on this one, your project is not touched.
• It tells you how to undo it on every run.

Opt out any of three ways:

MAKASHIF_BRAND_SKIP=1 npm i @makashif/brand
npm i @makashif/brand --ignore-scripts

{ "makashifBrand": { "autowire": false } }

One honest limitation: postinstall runs in your terminal, not a browser. It can't print to a visitor's console directly — what it does is write the file that makes your app load the branding on every page. And --ignore-scripts, which many teams set globally, skips it entirely; npx @makashif/brand init is the fallback.

Or wire it by hand

One side-effect import, anywhere in your entry:

import '@makashif/brand/auto';

Or drive it explicitly:

import { brand } from '@makashif/brand';

brand();

In a browser that prints the console signature; in Node it prints the terminal banner. Same call — the package routes itself through the node export condition.

What you get

Automatic, per stack

Each of these is the whole integration — no component to render, no layout to edit. npx @makashif/brand init sets it up for you.

// astro.config.mjs
import brand from '@makashif/brand/astro-integration';
export default defineConfig({ integrations: [brand()] });

// vite.config.ts
import brand from '@makashif/brand/vite';
export default defineConfig({ plugins: [brand()] });

Explicit, per stack

When you want the card in a specific place, or control over where the signature prints.

// The adapter carries its own 'use client' boundary — a Server Component can
// import it directly, no wrapper file needed.
import { ConsoleBrand, BrandCard } from '@makashif/brand/react';

export default function Layout({ children }) {
  return (
    <body>
      <ConsoleBrand />          {/* renders no DOM */}
      {children}
      <BrandCard variant="badge" scheme="auto" />
    </body>
  );
}

export async function register() {
  const { brand } = await import('@makashif/brand');
  brand();
}

---
import Brand from '@makashif/brand/astro';
---
<Brand variant="badge" scheme="auto" />

<script setup>
  import { ConsoleBrand, BrandCard } from '@makashif/brand/vue';
</script>

<template>
  <ConsoleBrand />
  <BrandCard variant="badge" />
</template>

// plugins/brand.client.ts
import BrandPlugin from '@makashif/brand/vue';
export default defineNuxtPlugin((nuxt) => nuxt.vueApp.use(BrandPlugin));

<script>
  import { brandCard, consoleBrand } from '@makashif/brand/svelte';
  consoleBrand();
</script>

<div use:brandCard={{ variant: 'badge' }}></div>

import express from 'express';
import { brandMiddleware } from '@makashif/brand/express';

const app = express();
app.use(brandMiddleware());   // banner on first request + X-Designed-By header

import { brand, brandBanner } from '@makashif/brand/node';

brand();                            // print it
const text = brandBanner({ color: false });   // or capture it for a logger

<script type="module">import '@makashif/brand/element';</script>
<brand-card variant="badge"></brand-card>

<div data-brand></div>
<script src="https://unpkg.com/@makashif/brand"></script>

Make it yours

Every field is optional and overridable — the defaults are just one identity.

brand({
  name: 'Your Name',
  tagline: 'Designer · Developer',
  monogram: 'Y',
  links: { portfolio: 'https://example.com', github: '…', email: 'you@example.com' },
  chips: ['Svelte', 'Rust', 'WebGPU'],
  capabilities: [{ discipline: 'Systems', focus: 'Rust · WASM', level: 'Expert' }],
  theme: { brand: '#f43f5e', info: '#f59e0b' },
  api: 'me',            // → window.me instead of window.makashif
});

The console namespace

Every member is a getter, so no parentheses are needed — and because DevTools shows accessors as click-to-invoke, merely expanding the object never fires a side effect.

Click to run

The banner (and makashif.help) logs a command object you can drive with the mouse:

makashif commands {visit: (…), code: (…), hire: (…), copy: (…), help: (…)}

Expand it and click any (…) — DevTools evaluates the accessor, which runs the command. No typing.

This is the only real click-to-execute mechanism a console has: styled %c text cannot carry a click handler, and no API exists to give it one. Accessor evaluation is the genuine article, and each entry delegates to the same getter on the namespace, so a click and a typed makashif.visit run one code path rather than two that can drift apart.

makashif.help      makashif.runtime    makashif.hire
makashif.whoami    makashif.banner     makashif.visit
makashif.stack     makashif.card       makashif.code
makashif.skills    makashif.config     makashif.copy

Options

Built for production

• Never breaks the host app. Every console call is failure-isolated; a styling bug costs a missing line, not a white screen.
• Free at TTI. Printing waits for load, then browser idle. Paint metrics are populated by then, so telemetry reads real numbers.
• Degrades honestly. Chromium gets gradients, padded badges and the monogram; Firefox/Safari get colour only; anything else gets clean plaintext.
• Readable in both console themes. %c styles accept no media queries, so a fixed palette means invisible text for half your users. The scheme is resolved at print time and the whole palette swapped — hues included, since #06b6d4 cyan on white is about 2:1 contrast. Every line clears WCAG AA in both: measured 4.76:1 minimum on light, 3.5:1 on dark.
• No style collisions. The card lives in a shadow root, so your CSS reset and its styles cannot reach each other.
• Quiet for robots. Silent when navigator.webdriver is set, so Lighthouse audits stay clean.
• Battery-aware. The card's FPS loop only runs while the card is actually on screen and the tab is visible.
• SSR-safe. Without a DOM every browser entry no-ops instead of throwing.
• Idempotent. Immune to React StrictMode double-mounts and Fast Refresh.

CLI

npx @makashif/brand              # print the terminal banner
npx @makashif/brand init         # wire it up automatically — no app-code edits
npx @makashif/brand add          # scaffold a component (framework auto-detected)
npx @makashif/brand snippet      # print it, write nothing
npx @makashif/brand info         # resolved paths, versions, exports

init never overwrites an existing file — run it as many times as you like.

License

MIT © Muhammad Makashif