Initial commit
This commit is contained in:
138
layouts/_default/baseof.html
Executable file
138
layouts/_default/baseof.html
Executable file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode | default "en" }}" class="dark">
|
||||
<head>
|
||||
{{- partial "head/meta.html" . -}}
|
||||
{{- partial "head/opengraph.html" . -}}
|
||||
{{- partial "head/twitter.html" . -}}
|
||||
{{- partial "head/json-ld.html" . -}}
|
||||
{{- partial "head/preload.html" . -}}
|
||||
{{- partial "head/favicon.html" . -}}
|
||||
|
||||
{{/* CSS - built by Tailwind CLI to static folder */}}
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
</head>
|
||||
<body
|
||||
x-data
|
||||
hx-boost="true"
|
||||
hx-target="#main-content"
|
||||
hx-select="#main-content"
|
||||
hx-swap="innerHTML show:top"
|
||||
hx-push-url="true"
|
||||
class="text-text-primary min-h-screen flex flex-col"
|
||||
>
|
||||
{{/* WebGL Background Canvas (preserved across navigation) */}}
|
||||
<canvas
|
||||
id="webgl-bg"
|
||||
hx-preserve="true"
|
||||
class="fixed inset-0 -z-10 pointer-events-none"
|
||||
aria-hidden="true"
|
||||
></canvas>
|
||||
|
||||
{{- partial "header.html" . -}}
|
||||
|
||||
<main id="main-content" class="flex-1">
|
||||
{{- block "main" . }}{{- end -}}
|
||||
</main>
|
||||
|
||||
{{- partial "footer.html" . -}}
|
||||
|
||||
{{/* Persistent Audio Player (preserved across navigation) */}}
|
||||
<div id="audio-player-container" hx-preserve="true" class="fixed bottom-0 left-0 right-0 z-player">
|
||||
{{- partial "player.html" . -}}
|
||||
</div>
|
||||
|
||||
{{/* WebGL Visualizer Canvas (preserved) */}}
|
||||
<canvas
|
||||
id="visualizer"
|
||||
hx-preserve="true"
|
||||
class="fixed inset-0 pointer-events-none z-visualizer"
|
||||
aria-hidden="true"
|
||||
></canvas>
|
||||
|
||||
{{/* Alpine.js - data and stores defined before CDN loads */}}
|
||||
<script>
|
||||
// Define Alpine stores and components BEFORE Alpine loads
|
||||
document.addEventListener('alpine:init', () => {
|
||||
// Global audio store
|
||||
Alpine.store('audio', {
|
||||
currentTrack: null,
|
||||
isPlaying: false,
|
||||
progress: 0,
|
||||
duration: 0,
|
||||
volume: 0.8
|
||||
});
|
||||
|
||||
// Player UI component
|
||||
Alpine.data('playerUI', () => ({
|
||||
togglePlay() {
|
||||
window.__pivoine?.audioManager?.toggle();
|
||||
},
|
||||
seek(time) {
|
||||
window.__pivoine?.audioManager?.seek(parseFloat(time));
|
||||
},
|
||||
setVolume(v) {
|
||||
const volume = parseFloat(v);
|
||||
Alpine.store('audio').volume = volume;
|
||||
window.__pivoine?.audioManager?.setVolume(volume);
|
||||
localStorage.setItem('pivoine-volume', volume);
|
||||
},
|
||||
toggleMute() {
|
||||
const store = Alpine.store('audio');
|
||||
if (store.volume > 0) {
|
||||
this._previousVolume = store.volume;
|
||||
this.setVolume(0);
|
||||
} else {
|
||||
this.setVolume(this._previousVolume || 0.8);
|
||||
}
|
||||
},
|
||||
formatTime(seconds) {
|
||||
if (!seconds || isNaN(seconds)) return '0:00';
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
},
|
||||
_previousVolume: 0.8
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
{{/* htmx */}}
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
|
||||
{{/* Alpine.js */}}
|
||||
<script defer src="https://unpkg.com/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
||||
|
||||
{{/* Main JS - audio manager and visualizer */}}
|
||||
{{- $js := resources.Get "js/main.js" -}}
|
||||
{{- if $js -}}
|
||||
{{- $jsOpts := dict "format" "esm" -}}
|
||||
{{- if hugo.IsProduction -}}
|
||||
{{- $jsOpts = merge $jsOpts (dict "minify" true) -}}
|
||||
{{- end -}}
|
||||
{{- $js = $js | js.Build $jsOpts -}}
|
||||
{{- if hugo.IsProduction -}}
|
||||
{{- $js = $js | fingerprint -}}
|
||||
{{- end -}}
|
||||
<script type="module" src="{{ $js.RelPermalink }}"></script>
|
||||
{{- end -}}
|
||||
|
||||
{{/* Analytics */}}
|
||||
{{- if and .Site.Params.umami.enabled hugo.IsProduction -}}
|
||||
{{- partial "analytics.html" . -}}
|
||||
{{- end -}}
|
||||
|
||||
<script>
|
||||
// htmx config
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof htmx !== 'undefined') {
|
||||
htmx.config.globalViewTransitions = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Re-init components after htmx swap
|
||||
document.body.addEventListener('htmx:afterSwap', function() {
|
||||
window.dispatchEvent(new CustomEvent('page:loaded'));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
113
layouts/_default/home.html
Executable file
113
layouts/_default/home.html
Executable file
@@ -0,0 +1,113 @@
|
||||
{{ define "main" }} {{/* Hero Section */}}
|
||||
<section
|
||||
class="min-h-[calc(100vh-4rem)] flex items-center justify-center relative overflow-hidden"
|
||||
>
|
||||
{{/* Animated background pattern */}}
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent via-surface-1/50 to-surface-0"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 text-center px-6">
|
||||
<h1 class="text-5xl md:text-7xl font-medium tracking-tighter mb-4">
|
||||
VALKNAR'S
|
||||
</h1>
|
||||
<p class="text-text-secondary text-lg md:text-xl tracking-wide">
|
||||
Pivoine.Art
|
||||
</p>
|
||||
|
||||
{{/* Scroll indicator */}}
|
||||
<button
|
||||
onclick="document.getElementById('latest-tracks').scrollIntoView({ behavior: 'smooth' })"
|
||||
class="mt-16 animate-bounce cursor-pointer hover:text-text-primary transition-colors"
|
||||
aria-label="Scroll to content"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 mx-auto text-text-muted"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 14l-7 7m0 0l-7-7m7 7V3"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{/* Latest Tracks */}}
|
||||
<section id="latest-tracks" class="py-24">
|
||||
<div class="container-wide">
|
||||
<header class="mb-12">
|
||||
<h2 class="text-2xl font-medium tracking-tight">Latest Tracks</h2>
|
||||
<p class="text-text-secondary mt-2">Recent audio</p>
|
||||
</header>
|
||||
|
||||
{{- $tracks := where .Site.RegularPages "Section" "tracks" -}} {{- if
|
||||
$tracks }}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{{- range first 3 $tracks }} {{ partial "track-card.html" . }} {{- end }}
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<a
|
||||
href="/tracks/"
|
||||
class="group inline-flex items-center gap-2 px-6 py-3 border border-border hover:border-accent hover:bg-accent hover:text-surface-0 transition-all duration-300"
|
||||
>
|
||||
View all tracks
|
||||
<svg
|
||||
class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{{- else }}
|
||||
<p class="text-text-muted">No tracks yet. Check back soon.</p>
|
||||
{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{/* About Preview */}}
|
||||
<section class="py-24">
|
||||
<div class="container-narrow text-center">
|
||||
<h2 class="text-2xl font-medium tracking-tight mb-6">About</h2>
|
||||
<p class="text-text-secondary text-lg leading-relaxed mb-8">
|
||||
Technology and sound, creating massive beats to push the boundaries of
|
||||
audio perception.
|
||||
</p>
|
||||
<a
|
||||
href="/about/"
|
||||
class="group inline-flex items-center gap-2 text-text-primary relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-0 after:bg-accent hover:after:w-full after:transition-all after:duration-300"
|
||||
>
|
||||
Read more
|
||||
<svg
|
||||
class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
26
layouts/_default/list.html
Executable file
26
layouts/_default/list.html
Executable file
@@ -0,0 +1,26 @@
|
||||
{{ define "main" }}
|
||||
<section class="py-16">
|
||||
<div class="container-wide">
|
||||
<header class="mb-12">
|
||||
<h1 class="text-4xl font-medium tracking-tight">{{ .Title }}</h1>
|
||||
{{- with .Description }}
|
||||
<p class="text-text-secondary mt-2">{{ . }}</p>
|
||||
{{- end }}
|
||||
</header>
|
||||
|
||||
{{- if .Content }}
|
||||
<div class="prose prose-invert max-w-none mb-12">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if .Pages }}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{{- range .Pages }}
|
||||
{{ partial "track-card.html" . }}
|
||||
{{- end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
18
layouts/_default/single.html
Executable file
18
layouts/_default/single.html
Executable file
@@ -0,0 +1,18 @@
|
||||
{{ define "main" }}
|
||||
<article class="py-16">
|
||||
<div class="container-narrow">
|
||||
<header class="mb-12">
|
||||
<h1 class="text-4xl font-medium tracking-tight">{{ .Title }}</h1>
|
||||
{{- if not .Date.IsZero }}
|
||||
<time class="text-text-muted text-sm mt-2 block">
|
||||
{{ .Date.Format "January 2, 2006" }}
|
||||
</time>
|
||||
{{- end }}
|
||||
</header>
|
||||
|
||||
<div class="prose prose-invert prose-lg max-w-none">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user