codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

misc

Browse Source
This commit is contained in:
codey
2025-12-19 07:46:41 -05:00
parent 2327e330de
commit d5d2923dc5
6 changed files with 303 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/assets/styles/global.css
View File

@@ -217,6 +217,11 @@ Custom
border-top: 1px solid rgba(0, 0, 0, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.06);
} }
.footer--subsite {
padding-top: 1rem;
margin-top: 0;
}
[data-theme="dark"] .footer { [data-theme="dark"] .footer {
border-top-color: rgba(255, 255, 255, 0.06); border-top-color: rgba(255, 255, 255, 0.06);
} }
@@ -350,6 +355,63 @@ Custom
color: #f87171; color: #f87171;
} }
/* Source pill in lyrics result */
.source-pill {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
border: 1px solid;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.source-pill--genius {
border-color: rgba(255, 204, 0, 0.5);
background: rgba(255, 204, 0, 0.1);
color: #b38f00;
}
[data-theme="dark"] .source-pill--genius {
border-color: rgba(255, 204, 0, 0.4);
background: rgba(255, 204, 0, 0.15);
color: #ffd633;
}
.source-pill--lrclib {
border-color: rgba(59, 130, 246, 0.5);
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
[data-theme="dark"] .source-pill--lrclib {
border-color: rgba(96, 165, 250, 0.4);
background: rgba(96, 165, 250, 0.15);
color: #60a5fa;
}
.source-pill--cache {
border-color: rgba(34, 197, 94, 0.5);
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
[data-theme="dark"] .source-pill--cache {
border-color: rgba(74, 222, 128, 0.4);
background: rgba(74, 222, 128, 0.15);
color: #4ade80;
}
.source-pill--other {
border-color: rgba(156, 163, 175, 0.5);
background: rgba(156, 163, 175, 0.1);
color: #6b7280;
}
[data-theme="dark"] .source-pill--other {
border-color: rgba(156, 163, 175, 0.4);
background: rgba(156, 163, 175, 0.15);
color: #9ca3af;
}
#lyric-search-input { #lyric-search-input {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -421,11 +483,11 @@ Custom
.lyrics-card { .lyrics-card {
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
padding: 1.5rem; padding: 1.75rem 2rem;
transition: background 0.3s, box-shadow 0.3s; transition: background 0.3s, box-shadow 0.3s;
background: white; background: white;
border: 1px solid rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.05);
} }
[data-theme="dark"] .lyrics-card { [data-theme="dark"] .lyrics-card {
@@ -451,9 +513,9 @@ Custom
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
margin-bottom: 1.25rem; margin-bottom: 1.5rem;
padding-bottom: 1rem; padding-bottom: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.05);
} }
[data-theme="dark"] .lyrics-toolbar { [data-theme="dark"] .lyrics-toolbar {
@@ -472,8 +534,20 @@ Custom
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.lyrics-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.lyrics-title { .lyrics-title {
font-size: 0.95rem; font-size: 0.95rem;
width: 100%;
}
.lyrics-actions {
width: 100%;
justify-content: flex-start;
} }
} }
@@ -520,15 +594,21 @@ Custom
} }
.lyrics-content { .lyrics-content {
line-height: 2.0; line-height: 1.85;
font-family: 'IBM Plex Sans', 'Inter', sans-serif; font-family: 'IBM Plex Sans', 'Inter', sans-serif;
font-size: 1rem; font-size: 1rem;
white-space: pre-wrap; white-space: pre-wrap;
color: #374151;
letter-spacing: 0.01em;
}
[data-theme="dark"] .lyrics-content {
color: #d1d5db;
} }
.lyrics-content-large { .lyrics-content-large {
font-size: 1.08rem; font-size: 1.25rem;
line-height: 1.85; line-height: 2.0;
} }
.lyrics-verse { .lyrics-verse {
@@ -581,13 +661,42 @@ Custom
} }
.random-msg { .random-msg {
padding-top: 10px;
max-width: 100%; max-width: 100%;
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
color: 'inherit'; color: 'inherit';
} }
.random-msg-container {
text-align: center;
}
.random-msg-reload {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0.2rem;
margin-left: 0.35rem;
border-radius: 4px;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
vertical-align: middle;
color: inherit;
}
.random-msg-container:hover .random-msg-reload,
.random-msg-reload:focus {
opacity: 0.4;
}
.random-msg-reload:hover {
opacity: 0.7;
background: rgba(128, 128, 128, 0.15);
}
.lyrics-card-copyButton { .lyrics-card-copyButton {
float: right; float: right;
padding-bottom: 3%; padding-bottom: 3%;

103
src/components/Footer.astro
View File

@@ -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 RandomMsg from "../components/RandomMsg";
import { buildTime, buildNumber } from '../utils/buildTime.js'; 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 detected = getSubsiteByHost(host) ?? getSubsiteByPath(Astro.url.pathname) ?? null;
const isReq = detected?.short === 'req'; const isReq = detected?.short === 'req';
const whitelabel = WHITELABELS[host] ?? (isReq ? WHITELABELS[detected.host] : null); 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" />} {!whitelabel && <RandomMsg client:only="react" />}
<div style="margin-top: 15px; bottom: 0%"> <div class="footer-version" data-build-time={buildTime} title={`Built: ${buildTime}`}>
<small>Build# {buildNumber} <span class="version-pill">
<br> {envBadge && <span class="env-dot" title="Development build"></span>}
Built: {buildTime} UTC</small> {!envBadge && <span class="version-dot"></span>}
{versionDisplay}:{buildNumber}
</span>
</div> </div>
</div> </div>
<style>
<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) { @media screen and (max-width: 480px) {
article { article {
padding-top: 2rem; padding-top: 2rem;

22
src/components/LyricSearch.jsx
View File

@@ -334,7 +334,7 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
const duration = ((Date.now() - startTime) / 1000).toFixed(1); const duration = ((Date.now() - startTime) / 1000).toFixed(1);
setTextSize("normal"); 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); setHighlightedVerse(null);
setIsLyricsVisible(false); setIsLyricsVisible(false);
// Trigger fade-in animation // Trigger fade-in animation
@@ -491,10 +491,28 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
{lyricsResult && ( {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-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-toolbar">
<div className="lyrics-title"> <div className="lyrics-title" title={`${lyricsResult.artist} - ${lyricsResult.song}`}>
{lyricsResult.artist} - {lyricsResult.song} {lyricsResult.artist} - {lyricsResult.song}
</div> </div>
<div className="lyrics-actions"> <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"> <div className="text-size-buttons" aria-label="Lyric text size">
<button <button
type="button" type="button"

49
src/components/RandomMsg.jsx
View File

@@ -28,9 +28,8 @@ export default function RandomMsg() {
return ( return (
<div className="random-msg-container"> <div className="random-msg-container">
<div className="random-msg" style={{ position: "relative", display: "inline-block" }}>
{randomMsg && ( {randomMsg && (
<> <div className="random-msg" style={{ position: "relative", display: "inline" }}>
<small <small
style={{ cursor: responseTime !== null ? "pointer" : "default" }} style={{ cursor: responseTime !== null ? "pointer" : "default" }}
onClick={() => { onClick={() => {
@@ -41,6 +40,26 @@ export default function RandomMsg() {
> >
<i>{randomMsg}</i> <i>{randomMsg}</i>
</small> </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 && ( {showResponseTime && responseTime !== null && (
<div <div
style={{ style={{
@@ -64,34 +83,8 @@ export default function RandomMsg() {
API response: {responseTime} ms API response: {responseTime} ms
</div> </div>
)} )}
</>
)}
</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"
>
<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>
)} )}
</div> </div>
); );
} }

2
src/pages/TRip/index.astro
View File

@@ -8,7 +8,7 @@ const user = Astro.locals.user as any;
--- ---
<Base> <Base>
<section class="page-section trip-section" transition:animate="none"> <section class="page-section trip-section" transition:animate="none">
<Root child="qs2.MediaRequestForm" client:only="react" transition:persist /> <Root child="qs2.MediaRequestForm" client:only="react" />
</section> </section>
</Base> </Base>

20
src/utils/buildTime.js
View File

@@ -1,10 +1,16 @@
import { generate } from "build-number-generator";
import { MAJOR_VERSION, RELEASE_FLAG } from "../config"; import { MAJOR_VERSION, RELEASE_FLAG } from "../config";
export const buildTime = new Date().toLocaleString(undefined, {
timeZone: "UTC", const buildDate = new Date();
export const buildTime = buildDate.toISOString();
export const buildTimeUTC = buildDate.toLocaleString('en-US', {
timeZone: 'UTC',
dateStyle: 'medium',
timeStyle: 'short',
}); });
export var buildNumber = generate(MAJOR_VERSION); // Generate a short hex build ID from timestamp
if (RELEASE_FLAG && RELEASE_FLAG.length) { const now = Date.now();
buildNumber = `${buildNumber} (${RELEASE_FLAG})`; export const buildNumber = now.toString(16).slice(-6);
} export const fullBuildNumber = RELEASE_FLAG && RELEASE_FLAG.length
? `${MAJOR_VERSION}.${buildNumber} (${RELEASE_FLAG})`
: `${MAJOR_VERSION}.${buildNumber}`;