till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:21:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
managarten/packages/shared-branding
History
Till JS e00e6f5a08 refactor(shared-branding): derive APP_URLS from APP_ICONS 
The hand-maintained APP_URLS map kept silently drifting from the
AppIconId union — most recently the new 'who' entry was missing,
which crashed getPillAppItems at runtime with "Cannot read properties
of undefined (reading 'prod')". Drift was already flagged by the type
system but the error was lost in the existing svelte-check noise.

APP_URLS is now generated at module load by walking Object.keys of
APP_ICONS (the source of AppIconId), so every id is guaranteed a URL.
A small APP_URL_OVERRIDES map carries the handful of apps that don't
follow the unified mana.how/{id} pattern (root path for the unified
shell, subdomains for standalone apps like arcade).

Adds two integrity tests as defense-in-depth: one asserts every
MANA_APPS id has a matching APP_ICONS icon, the other asserts every
AppIconId resolves to a non-empty dev+prod URL. Both would have caught
the 'who' regression on its own without needing svelte-check.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 15:14:52 +02:00
..
src refactor(shared-branding): derive APP_URLS from APP_ICONS 2026-04-09 15:14:52 +02:00
package.json feat: rename ManaCore to Mana across entire codebase 2026-04-05 20:00:13 +02:00
README.md chore: complete ManaCore → Mana rename (docs, go modules, plists, images) 2026-04-07 12:26:10 +02:00
tsconfig.json style: auto-format codebase with Prettier 2025-11-27 18:33:16 +01:00

README.md

@mana/shared-branding

Shared branding components and configuration for the Mana ecosystem.

Features

  • AppLogo: SVG logo component for any Mana app
  • AppLogoWithName: Logo with app name combination
  • ManaIcon: Universal Mana drop icon for credits display
  • Branding Config: Centralized colors, names, and taglines

Installation

pnpm add @mana/shared-branding

Usage

Display an app's logo:

<script lang="ts">
	import { AppLogo } from '@mana/shared-branding';
</script>

<AppLogo app="memoro" size={32} />
<AppLogo app="mana" size={32} />
<AppLogo app="cards" size={32} />
<AppLogo app="maerchenzauber" size={32} />

AppLogoWithName

Display logo with app name (perfect for headers):

<script lang="ts">
	import { AppLogoWithName } from '@mana/shared-branding';
</script>

<AppLogoWithName app="memoro" size={28} />
<AppLogoWithName app="mana" showName={false} />

ManaIcon

Universal Mana drop icon:

<script lang="ts">
	import { ManaIcon } from '@mana/shared-branding';
</script>

<ManaIcon size={24} color="#4287f5" />

Branding Configuration

Access branding config programmatically:

import { getAppBranding, APP_BRANDING } from '@mana/shared-branding';

const memoro = getAppBranding('memoro');
console.log(memoro.name); // "Memoro"
console.log(memoro.tagline); // "AI Voice Memos"
console.log(memoro.primaryColor); // "#f8d62b"

App Branding

App Name Primary Color Tagline
memoro Memoro #f8d62b (Gold) AI Voice Memos
mana Mana #6366f1 (Indigo) Central Hub
cards Cards #8b5cf6 (Purple) AI Flashcards
maerchenzauber Märchenzauber #ec4899 (Pink) AI Story Creator

Props

AppLogo

Prop Type Default Description
app AppId required App identifier
size number 32 Size in pixels
color string App primary color Override color
class string '' Additional CSS classes

AppLogoWithName

Prop Type Default Description
app AppId required App identifier
size number 28 Logo size in pixels
color string App primary color Override color
showName boolean true Show app name
nameFontSize string '1.25rem' Name font size
gap string '0.5rem' Gap between logo and name
class string '' Additional CSS classes

ManaIcon

Prop Type Default Description
size number 24 Size in pixels
color string '#4287f5' Icon color
class string '' Additional CSS classes

Types

type AppId = 'memoro' | 'mana' | 'cards' | 'maerchenzauber';

interface AppBranding {
	id: AppId;
	name: string;
	tagline: string;
	primaryColor: string;
	secondaryColor?: string;
	logoPath: string;
	logoViewBox?: string;
	logoStroke?: boolean;
	logoStrokeWidth?: number;
}