mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 21:01:08 +02:00

History

Till JS 230dfd5dad chore: extract arcade into standalone repo Arcade lives as its own pnpm workspace at ~/Documents/Code/arcade now, with no @mana/* coupling. This drops every reference and the games/ directory from the monorepo. Removes: - games/ directory (89 files: web + server + 22 HTML games + screenshots) - @arcade/web, @arcade/server pnpm workspace entries (games/* globs) - arcade scripts in root package.json (4 scripts) - arcade.mana.how from mana-auth trusted origins + CORS_ORIGINS - arcade entries in mana-apps registry, app-icons, URL overrides - arcade.mana.how from cloudflared tunnel + prometheus blackbox probes - arcade-web service block in docker-compose.macmini.yml - generate-env.mjs entries for arcade server + web - BRANDING_ONLY 'arcade' entry in registry consistency spec - dead arcade translation keys in GuestWelcomeModal (DE+EN) - arcade mention in CLAUDE.md, authentication guideline, MODULE_REGISTRY Verified: - services/mana-auth/src/auth/sso-config.spec.ts: 8/8 pass - pnpm install regenerates lockfile cleanly (-536 lines) - no remaining 'arcade' refs outside historical snapshot docs Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>		2026-04-28 22:40:01 +02:00
..
src	chore: extract arcade into standalone repo	2026-04-28 22:40:01 +02:00
package.json	feat(spaces): validate space metadata on Better Auth organization hooks	2026-04-20 16:05:38 +02:00
README.md	chore: complete ManaCore → Mana rename (docs, go modules, plists, images)	2026-04-07 12:26:10 +02:00
tsconfig.json	fix(broadcast): track route paths + shared-branding tsconfig	2026-04-21 18:30:47 +02: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

AppLogo

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;
}