feat(ui): add git version info display in header
- Display current branch/tag and commit hash in navbar center - Show dirty working directory indicator with yellow badge - Add automatic build info generation in Task workflow - Include build timestamp and user information - Style with responsive design (hidden on mobile) - Add .gitignore entries for generated build artifacts
This commit is contained in:
parent
69457ec964
commit
1d79ce85a5
8 changed files with 196 additions and 0 deletions
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -13,6 +13,12 @@ tmp/
|
|||
# devbox
|
||||
.devbox/
|
||||
|
||||
# Task cache
|
||||
.task/
|
||||
|
||||
# Generated build data
|
||||
data/
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
|
|
|
|||
14
Taskfile.yml
14
Taskfile.yml
|
|
@ -15,6 +15,7 @@ tasks:
|
|||
desc: Build Hugo site
|
||||
deps:
|
||||
- deps:ensure-npm
|
||||
- build:generate-info
|
||||
cmds:
|
||||
- "{{.HUGO_CMD}} --gc --minify"
|
||||
|
||||
|
|
@ -22,13 +23,25 @@ tasks:
|
|||
desc: Build Hugo site for development
|
||||
deps:
|
||||
- deps:ensure-npm
|
||||
- build:generate-info
|
||||
cmds:
|
||||
- "{{.HUGO_CMD}}"
|
||||
|
||||
build:generate-info:
|
||||
desc: Generate build information (git commit, version, etc.)
|
||||
sources:
|
||||
- .git/HEAD
|
||||
- .git/refs/**/*
|
||||
generates:
|
||||
- data/build_info.json
|
||||
cmds:
|
||||
- ./scripts/generate-build-info.sh
|
||||
|
||||
serve:
|
||||
desc: Start Hugo dev server
|
||||
deps:
|
||||
- deps:ensure-npm
|
||||
- build:generate-info
|
||||
cmds:
|
||||
- "{{.HUGO_CMD}} server"
|
||||
|
||||
|
|
@ -56,6 +69,7 @@ tasks:
|
|||
desc: Test Hugo build
|
||||
deps:
|
||||
- deps:ensure-npm
|
||||
- build:generate-info
|
||||
cmds:
|
||||
- "{{.HUGO_CMD}} --gc --minify --logLevel info"
|
||||
|
||||
|
|
|
|||
|
|
@ -3,3 +3,7 @@
|
|||
<link rel="stylesheet" href="{{ "css/likec4-styles.css" | relURL }}">
|
||||
<script src="{{ "js/likec4-loader.js" | relURL }}"></script>
|
||||
{{ end }}
|
||||
|
||||
<!-- Version Info Styles & Script -->
|
||||
<link rel="stylesheet" href="{{ "css/version-info.css" | relURL }}">
|
||||
{{ partial "version-info-script.html" . }}
|
||||
|
|
|
|||
17
layouts/partials/navbar-version.html
Normal file
17
layouts/partials/navbar-version.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{{/* Header version info - compact display in navbar */}}
|
||||
{{ $buildInfo := .Site.Data.build_info }}
|
||||
{{ if $buildInfo }}
|
||||
<div class="navbar-version-info d-none d-md-flex align-items-center">
|
||||
<small class="text-light opacity-75">
|
||||
{{ if $buildInfo.git_tag }}
|
||||
<span class="fw-bold">{{ $buildInfo.git_tag }}</span>
|
||||
{{ else }}
|
||||
<span class="fw-bold">{{ $buildInfo.git_branch }}</span>
|
||||
{{ end }}
|
||||
<span class="mx-1">@</span><code class="text-light">{{ $buildInfo.git_commit_short }}</code>
|
||||
{{ if $buildInfo.git_dirty }}
|
||||
<span class="badge bg-warning text-dark ms-1 px-1" style="font-size: 0.6rem;">*</span>
|
||||
{{ end }}
|
||||
</small>
|
||||
</div>
|
||||
{{ end }}
|
||||
35
layouts/partials/version-info-script.html
Normal file
35
layouts/partials/version-info-script.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{{/* Inline JavaScript to add version info to navbar */}}
|
||||
{{ $buildInfo := .Site.Data.build_info }}
|
||||
{{ if $buildInfo }}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Find the navbar container
|
||||
const navbarContainer = document.querySelector('.td-navbar .container-fluid');
|
||||
if (!navbarContainer) return;
|
||||
|
||||
// Create version info element
|
||||
const versionDiv = document.createElement('div');
|
||||
versionDiv.className = 'navbar-version-info d-none d-md-flex align-items-center mx-3';
|
||||
versionDiv.style.flex = '1';
|
||||
versionDiv.style.justifyContent = 'center';
|
||||
|
||||
const versionText = {{ if $buildInfo.git_tag }}"{{ $buildInfo.git_tag }}"{{ else }}"{{ $buildInfo.git_branch }}"{{ end }};
|
||||
const commitHash = "{{ $buildInfo.git_commit_short }}";
|
||||
const isDirty = {{ $buildInfo.git_dirty }};
|
||||
|
||||
versionDiv.innerHTML = `
|
||||
<small class="text-light opacity-75">
|
||||
<span class="fw-bold">${versionText}</span>
|
||||
<span class="mx-1">@</span><code class="text-light bg-transparent border-0 p-0" style="font-size: 0.8rem;">${commitHash}</code>
|
||||
${isDirty ? '<span class="badge bg-warning text-dark ms-1 px-1" style="font-size: 0.6rem;">*</span>' : ''}
|
||||
</small>
|
||||
`;
|
||||
|
||||
// Insert version info between brand and nav items
|
||||
const navScroll = navbarContainer.querySelector('.td-navbar-nav-scroll');
|
||||
if (navScroll) {
|
||||
navbarContainer.insertBefore(versionDiv, navScroll);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
36
layouts/partials/version-info.html
Normal file
36
layouts/partials/version-info.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{{/* Version info banner - displays git commit info and build time */}}
|
||||
{{ $buildInfo := .Site.Data.build_info }}
|
||||
{{ if $buildInfo }}
|
||||
<div class="version-info-banner">
|
||||
<div class="container-fluid">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<small class="text-muted">
|
||||
<i class="fab fa-git-alt me-1"></i>
|
||||
{{ if $buildInfo.git_tag }}
|
||||
<strong>{{ $buildInfo.git_tag }}</strong>
|
||||
{{ if ne $buildInfo.git_tag $buildInfo.git_commit }}
|
||||
<span class="text-muted">(@{{ $buildInfo.git_commit_short }})</span>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<strong>{{ $buildInfo.git_branch }}</strong>
|
||||
<span class="text-muted">@{{ $buildInfo.git_commit_short }}</span>
|
||||
{{ end }}
|
||||
{{ if $buildInfo.git_dirty }}
|
||||
<span class="badge badge-warning ms-1">dirty</span>
|
||||
{{ end }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end">
|
||||
<small class="text-muted">
|
||||
<i class="far fa-clock me-1"></i>
|
||||
Built {{ $buildInfo.build_time_human }}
|
||||
{{ if $buildInfo.build_user }}
|
||||
by {{ $buildInfo.build_user }}
|
||||
{{ end }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
48
scripts/generate-build-info.sh
Executable file
48
scripts/generate-build-info.sh
Executable file
|
|
@ -0,0 +1,48 @@
|
|||
#!/bin/bash
|
||||
|
||||
# Generate build information for Hugo
|
||||
# This script collects git information and build metadata
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# Create data directory if it doesn't exist
|
||||
mkdir -p data
|
||||
|
||||
# Get git information
|
||||
GIT_COMMIT=$(git rev-parse HEAD 2>/dev/null || echo "unknown")
|
||||
GIT_COMMIT_SHORT=$(git rev-parse --short HEAD 2>/dev/null || echo "unknown")
|
||||
GIT_BRANCH=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo "unknown")
|
||||
GIT_TAG=$(git describe --tags --exact-match 2>/dev/null || echo "")
|
||||
GIT_DIRTY=""
|
||||
|
||||
# Check if working directory is dirty
|
||||
if git diff-index --quiet HEAD -- 2>/dev/null; then
|
||||
GIT_DIRTY="false"
|
||||
else
|
||||
GIT_DIRTY="true"
|
||||
fi
|
||||
|
||||
# Get build information
|
||||
BUILD_TIME=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
|
||||
BUILD_TIME_HUMAN=$(date -u +"%Y-%m-%d %H:%M UTC")
|
||||
BUILD_USER=$(whoami 2>/dev/null || echo "unknown")
|
||||
BUILD_HOST=$(hostname 2>/dev/null || echo "unknown")
|
||||
|
||||
# Create JSON file for Hugo
|
||||
cat > data/build_info.json << EOF
|
||||
{
|
||||
"git_commit": "${GIT_COMMIT}",
|
||||
"git_commit_short": "${GIT_COMMIT_SHORT}",
|
||||
"git_branch": "${GIT_BRANCH}",
|
||||
"git_tag": "${GIT_TAG}",
|
||||
"git_dirty": ${GIT_DIRTY},
|
||||
"build_time": "${BUILD_TIME}",
|
||||
"build_time_human": "${BUILD_TIME_HUMAN}",
|
||||
"build_user": "${BUILD_USER}",
|
||||
"build_host": "${BUILD_HOST}"
|
||||
}
|
||||
EOF
|
||||
|
||||
echo "✓ Build info generated: data/build_info.json"
|
||||
echo " Git: ${GIT_BRANCH}@${GIT_COMMIT_SHORT}${GIT_TAG:+ (${GIT_TAG})}"
|
||||
echo " Built: ${BUILD_TIME_HUMAN} by ${BUILD_USER}"
|
||||
36
static/css/version-info.css
Normal file
36
static/css/version-info.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/* Navbar version info styles */
|
||||
.navbar-version-info {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.navbar-version-info code {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.navbar-version-info .badge {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
|
||||
/* Hide on small screens */
|
||||
@media (max-width: 767px) {
|
||||
.navbar-version-info {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional responsive tweaks */
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.navbar-version-info {
|
||||
flex: 0.5;
|
||||
}
|
||||
|
||||
.navbar-version-info small {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue