mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-20 11:33:40 +02:00
feat(shared): add DevBuildBadge component and getBuildDefines() helper
- shared-vite-config: getBuildDefines() injects __BUILD_HASH__ and __BUILD_TIME__ as compile-time constants via Vite define - shared-ui: DevBuildBadge component shows git hash + build timestamp in a small fixed badge at bottom-right (click to expand) - Integrated into mukke-web for deployment verification Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
511b51e372
commit
822e75368a
6 changed files with 105 additions and 2 deletions
77
packages/shared-ui/src/components/DevBuildBadge.svelte
Normal file
77
packages/shared-ui/src/components/DevBuildBadge.svelte
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
commitHash?: string;
|
||||
buildTime?: string;
|
||||
}
|
||||
|
||||
let { commitHash = 'unknown', buildTime = '' }: Props = $props();
|
||||
|
||||
let formattedTime = $derived.by(() => {
|
||||
if (!buildTime) return '';
|
||||
try {
|
||||
const d = new Date(buildTime);
|
||||
return d.toLocaleString('de-DE', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
} catch {
|
||||
return buildTime;
|
||||
}
|
||||
});
|
||||
|
||||
let expanded = $state(false);
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="dev-badge"
|
||||
class:expanded
|
||||
onclick={() => (expanded = !expanded)}
|
||||
title="Build: {commitHash} | {buildTime}"
|
||||
>
|
||||
{#if expanded}
|
||||
<span class="dev-badge-detail">{commitHash} · {formattedTime}</span>
|
||||
{:else}
|
||||
<span class="dev-badge-hash">{commitHash}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.dev-badge {
|
||||
position: fixed;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
z-index: 9999;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
opacity: 0.5;
|
||||
transition: opacity 150ms ease;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.dev-badge:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dev-badge.expanded {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.dev-badge-hash {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.dev-badge-detail {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue