misc
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import { metaData, ENVIRONMENT, WHITELABELS } from "../config";
|
||||
import { metaData, ENVIRONMENT, WHITELABELS, MAJOR_VERSION, RELEASE_FLAG } from "../config";
|
||||
import RandomMsg from "../components/RandomMsg";
|
||||
import { buildTime, buildNumber } from '../utils/buildTime.js';
|
||||
|
||||
@@ -12,17 +12,106 @@ import { getSubsiteByPath } from '../utils/subsites.js';
|
||||
const detected = getSubsiteByHost(host) ?? getSubsiteByPath(Astro.url.pathname) ?? null;
|
||||
const isReq = detected?.short === 'req';
|
||||
const whitelabel = WHITELABELS[host] ?? (isReq ? WHITELABELS[detected.host] : null);
|
||||
|
||||
const versionDisplay = `v${MAJOR_VERSION}${RELEASE_FLAG ? `-${RELEASE_FLAG}` : ''}`;
|
||||
const envBadge = ENVIRONMENT === 'Dev' ? 'DEV' : null;
|
||||
---
|
||||
|
||||
<div class="footer">
|
||||
<div class:list={['footer', whitelabel && 'footer--subsite']}>
|
||||
{!whitelabel && <RandomMsg client:only="react" />}
|
||||
<div style="margin-top: 15px; bottom: 0%">
|
||||
<small>Build# {buildNumber}
|
||||
<br>
|
||||
Built: {buildTime} UTC</small>
|
||||
<div class="footer-version" data-build-time={buildTime} title={`Built: ${buildTime}`}>
|
||||
<span class="version-pill">
|
||||
{envBadge && <span class="env-dot" title="Development build"></span>}
|
||||
{!envBadge && <span class="version-dot"></span>}
|
||||
{versionDisplay}:{buildNumber}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function updateBuildTooltip() {
|
||||
const el = document.querySelector('.footer-version[data-build-time]');
|
||||
if (el) {
|
||||
const iso = el.getAttribute('data-build-time');
|
||||
if (iso) {
|
||||
const local = new Date(iso).toLocaleString(undefined, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
});
|
||||
el.setAttribute('title', `Built: ${local}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
updateBuildTooltip();
|
||||
document.addEventListener('astro:page-load', updateBuildTooltip);
|
||||
</script>
|
||||
|
||||
<style is:global>
|
||||
.footer-version {
|
||||
margin-top: 1.25rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer--subsite .footer-version {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.version-pill {
|
||||
font-family: 'SF Mono', 'Fira Code', 'Geist Mono', ui-monospace, monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
color: #3f3f46;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(244,244,245,0.8));
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
padding: 0.4rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
cursor: help;
|
||||
letter-spacing: 0.04em;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.version-pill:hover {
|
||||
background: linear-gradient(135deg, rgba(255,255,255,1), rgba(250,250,250,0.95));
|
||||
color: #18181b;
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .version-pill {
|
||||
color: #71717a;
|
||||
background: #1a1a1c;
|
||||
border-color: #2a2a2e;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .version-pill:hover {
|
||||
background: #252528;
|
||||
color: #a1a1aa;
|
||||
border-color: #3a3a3e;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.version-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
|
||||
.env-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #f59e0b;
|
||||
box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
article {
|
||||
padding-top: 2rem;
|
||||
|
||||
@@ -334,7 +334,7 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
|
||||
|
||||
const duration = ((Date.now() - startTime) / 1000).toFixed(1);
|
||||
setTextSize("normal");
|
||||
setLyricsResult({ artist: data.artist, song: data.song, lyrics: data.lyrics });
|
||||
setLyricsResult({ artist: data.artist, song: data.song, lyrics: data.lyrics, src: data.src });
|
||||
setHighlightedVerse(null);
|
||||
setIsLyricsVisible(false);
|
||||
// Trigger fade-in animation
|
||||
@@ -491,10 +491,28 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
|
||||
{lyricsResult && (
|
||||
<div className={`lyrics-card lyrics-card-${theme} mt-6 p-5 rounded-xl shadow-lg lyrics-card-animate ${isLyricsVisible ? 'lyrics-card-visible' : ''}`}>
|
||||
<div className="lyrics-toolbar">
|
||||
<div className="lyrics-title">
|
||||
<div className="lyrics-title" title={`${lyricsResult.artist} - ${lyricsResult.song}`}>
|
||||
{lyricsResult.artist} - {lyricsResult.song}
|
||||
</div>
|
||||
<div className="lyrics-actions">
|
||||
{lyricsResult.src && (() => {
|
||||
let sourceLabel, sourceClass;
|
||||
const src = lyricsResult.src.toLowerCase();
|
||||
if (src.includes('redis cache')) {
|
||||
sourceLabel = 'Cache';
|
||||
sourceClass = 'source-pill--cache';
|
||||
} else if (src.includes('genius')) {
|
||||
sourceLabel = 'Genius';
|
||||
sourceClass = 'source-pill--genius';
|
||||
} else if (src.includes('lrclib')) {
|
||||
sourceLabel = 'LRCLib';
|
||||
sourceClass = 'source-pill--lrclib';
|
||||
} else {
|
||||
sourceLabel = lyricsResult.src.split(' ')[0];
|
||||
sourceClass = 'source-pill--other';
|
||||
}
|
||||
return <span className={`source-pill ${sourceClass}`}>{sourceLabel}</span>;
|
||||
})()}
|
||||
<div className="text-size-buttons" aria-label="Lyric text size">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -28,70 +28,63 @@ export default function RandomMsg() {
|
||||
|
||||
return (
|
||||
<div className="random-msg-container">
|
||||
<div className="random-msg" style={{ position: "relative", display: "inline-block" }}>
|
||||
{randomMsg && (
|
||||
<>
|
||||
<small
|
||||
style={{ cursor: responseTime !== null ? "pointer" : "default" }}
|
||||
onClick={() => {
|
||||
if (responseTime !== null) setShowResponseTime((v) => !v);
|
||||
}}
|
||||
tabIndex={0}
|
||||
onBlur={() => setShowResponseTime(false)}
|
||||
>
|
||||
<i>{randomMsg}</i>
|
||||
</small>
|
||||
{showResponseTime && responseTime !== null && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
top: "100%",
|
||||
transform: "translateX(-50%)",
|
||||
marginTop: 4,
|
||||
background: "#222",
|
||||
color: "#fff",
|
||||
fontSize: "0.75em",
|
||||
padding: "2px 8px",
|
||||
borderRadius: 6,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
|
||||
zIndex: 10,
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
API response: {responseTime} ms
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{randomMsg && (
|
||||
<button
|
||||
aria-label="New footer message"
|
||||
type="button"
|
||||
className="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-opacity new-msg-button"
|
||||
onClick={getRandomMsg}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
className="inline-block"
|
||||
<div className="random-msg" style={{ position: "relative", display: "inline" }}>
|
||||
<small
|
||||
style={{ cursor: responseTime !== null ? "pointer" : "default" }}
|
||||
onClick={() => {
|
||||
if (responseTime !== null) setShowResponseTime((v) => !v);
|
||||
}}
|
||||
tabIndex={0}
|
||||
onBlur={() => setShowResponseTime(false)}
|
||||
>
|
||||
<path
|
||||
d="M17.65 6.35a7.95 7.95 0 0 0-5.65-2.35 8 8 0 1 0 7.75 9.94h-2.08a6 6 0 1 1-5.67-7.94 5.94 5.94 0 0 1 4.22 1.78L13 11h7V4z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<i>{randomMsg}</i>
|
||||
</small>
|
||||
<button
|
||||
aria-label="New footer message"
|
||||
type="button"
|
||||
className="random-msg-reload"
|
||||
onClick={getRandomMsg}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="12"
|
||||
height="12"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M17.65 6.35a7.95 7.95 0 0 0-5.65-2.35 8 8 0 1 0 7.75 9.94h-2.08a6 6 0 1 1-5.67-7.94 5.94 5.94 0 0 1 4.22 1.78L13 11h7V4z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{showResponseTime && responseTime !== null && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
top: "100%",
|
||||
transform: "translateX(-50%)",
|
||||
marginTop: 4,
|
||||
background: "#222",
|
||||
color: "#fff",
|
||||
fontSize: "0.75em",
|
||||
padding: "2px 8px",
|
||||
borderRadius: 6,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
|
||||
zIndex: 10,
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
API response: {responseTime} ms
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user