Initial commit

layouts/partials/analytics.html

@@ -0,0 +1,8 @@
+{{- if and .Site.Params.umami.enabled .Site.Params.umami.websiteID .Site.Params.umami.src }}
+<script
+  defer
+  src="{{ .Site.Params.umami.src }}"
+  data-website-id="{{ .Site.Params.umami.websiteID }}"
+  data-domains="pivoine.art"
+></script>
+{{- end }}

layouts/partials/footer.html

@@ -0,0 +1,34 @@
+<footer class="border-t border-border mt-auto pb-24">
+  <div class="container-wide py-12">
+    <div class="flex flex-col md:flex-row items-center justify-between gap-6">
+      {{/* Copyright */}}
+      <p class="text-sm text-text-muted">
+        &copy; {{ now.Year }} {{ .Site.Params.author }}. All rights reserved.
+      </p>
+
+      {{/* Links */}}
+      <nav class="flex items-center gap-6">
+        <a
+          href="/imprint/"
+          class="text-sm text-text-muted hover:text-text-secondary transition-colors"
+        >
+          Imprint
+        </a>
+        <a
+          href="/index.xml"
+          class="text-sm text-text-muted hover:text-text-secondary transition-colors"
+          aria-label="RSS Feed"
+          target="_blank"
+        >
+          RSS
+        </a>
+        <a
+          href="mailto:{{ .Site.Params.email }}"
+          class="text-sm text-text-muted hover:text-text-secondary transition-colors"
+        >
+          Contact
+        </a>
+      </nav>
+    </div>
+  </div>
+</footer>

layouts/partials/head/favicon.html

@@ -0,0 +1,15 @@
+<link
+  rel="icon"
+  type="image/png"
+  href="/favicon/favicon-96x96.png"
+  sizes="96x96"
+/>
+<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+<link rel="shortcut icon" href="/favicon/favicon.ico" />
+<link
+  rel="apple-touch-icon"
+  sizes="180x180"
+  href="/favicon/apple-touch-icon.png"
+/>
+<meta name="apple-mobile-web-app-title" content="Valknar's" />
+<link rel="manifest" href="/favicon/site.webmanifest" />

layouts/partials/head/json-ld.html

@@ -0,0 +1,47 @@
+{{/* Website schema for homepage */}}
+{{- if .IsHome }}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "{{ .Site.Title }}",
+  "url": "{{ .Site.BaseURL }}",
+  "description": "{{ .Site.Params.description }}",
+  "author": {
+    "@type": "Person",
+    "name": "{{ .Site.Params.author }}",
+    "email": "{{ .Site.Params.email }}"
+  }
+}
+</script>
+{{- end }}
+
+{{/* MusicRecording schema for track pages */}}
+{{- if and .IsPage (eq .Section "tracks") }}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "MusicRecording",
+  "name": "{{ .Title }}",
+  "description": "{{ .Description | default .Summary | plainify }}",
+  "url": "{{ .Permalink }}",
+  "datePublished": "{{ .Date.Format "2006-01-02" }}",
+  "byArtist": {
+    "@type": "Person",
+    "name": "{{ .Params.artist | default .Site.Params.author }}"
+  }
+  {{- if .Params.audio }},
+  "audio": {
+    "@type": "AudioObject",
+    "contentUrl": "{{ .Params.audio }}"
+  }
+  {{- end }}
+  {{- if .Params.genre }},
+  "genre": "{{ .Params.genre }}"
+  {{- end }}
+  {{- with .Resources.GetMatch "cover.*" }},
+  "image": "{{ .Permalink }}"
+  {{- end }}
+}
+</script>
+{{- end }}

layouts/partials/head/meta.html

@@ -0,0 +1,29 @@
+{{- $title := cond .IsHome .Site.Title (printf "%s | %s" .Title .Site.Title) -}}
+{{- $desc := .Description | default .Summary | default .Site.Params.description | plainify | truncate 160 -}}
+
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+<title>{{ $title }}</title>
+<meta name="description" content="{{ $desc }}">
+<meta name="author" content="{{ .Site.Params.author }}">
+
+<link rel="canonical" href="{{ .Permalink }}">
+
+{{/* Theme */}}
+<meta name="theme-color" content="#0a0a0a">
+<meta name="color-scheme" content="dark">
+
+{{/* Favicon */}}
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+
+{{/* RSS */}}
+<link rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" href="{{ "index.xml" | absURL }}">
+
+{{/* Robots */}}
+{{- $robots := "index, follow" -}}
+{{- if .Params.noindex -}}
+  {{- $robots = "noindex, nofollow" -}}
+{{- end -}}
+<meta name="robots" content="{{ $robots }}">

layouts/partials/head/opengraph.html

@@ -0,0 +1,30 @@
+{{- $title := .Title | default .Site.Title -}}
+{{- $desc := .Description | default .Summary | default .Site.Params.description | plainify | truncate 200 -}}
+{{- $image := .Params.image | default "/images/og-default.png" -}}
+{{- if not (strings.HasPrefix $image "http") -}}
+  {{- $image = $image | absURL -}}
+{{- end -}}
+
+<meta property="og:title" content="{{ $title }}">
+<meta property="og:description" content="{{ $desc }}">
+<meta property="og:type" content="{{ cond (eq .Section "tracks") "music.song" "website" }}">
+<meta property="og:url" content="{{ .Permalink }}">
+<meta property="og:site_name" content="{{ .Site.Title }}">
+<meta property="og:locale" content="en_US">
+
+{{- if $image }}
+<meta property="og:image" content="{{ $image }}">
+<meta property="og:image:alt" content="{{ $title }}">
+{{- end }}
+
+{{/* Audio-specific OpenGraph tags */}}
+{{- if and (eq .Section "tracks") .Params.audio }}
+<meta property="og:audio" content="{{ .Params.audio }}">
+<meta property="og:audio:type" content="audio/mpeg">
+  {{- if .Params.duration }}
+<meta property="music:duration" content="{{ .Params.duration }}">
+  {{- end }}
+  {{- if .Params.artist }}
+<meta property="music:musician" content="{{ .Params.artist }}">
+  {{- end }}
+{{- end }}

layouts/partials/head/preload.html

@@ -0,0 +1,16 @@
+{{/* Preconnect to external domains */}}
+<link rel="preconnect" href="https://jellyfin.media.pivoine.art" crossorigin>
+
+{{/* DNS prefetch */}}
+<link rel="dns-prefetch" href="https://unpkg.com">
+
+{{/* Preload fonts if we add custom fonts later */}}
+{{/* <link rel="preload" href="/fonts/JetBrainsMono-Regular.woff2" as="font" type="font/woff2" crossorigin> */}}
+
+{{/* Preload cover image on track pages */}}
+{{- if and .IsPage (eq .Section "tracks") }}
+  {{- with .Resources.GetMatch "cover.*" }}
+    {{- $webp := .Resize "800x webp q85" }}
+<link rel="preload" href="{{ $webp.RelPermalink }}" as="image" type="image/webp">
+  {{- end }}
+{{- end }}

layouts/partials/head/twitter.html

@@ -0,0 +1,21 @@
+{{- $title := .Title | default .Site.Title -}}
+{{- $desc := .Description | default .Summary | default .Site.Params.description | plainify | truncate 200 -}}
+{{- $image := .Params.image | default "/images/og-default.png" -}}
+{{- if not (strings.HasPrefix $image "http") -}}
+  {{- $image = $image | absURL -}}
+{{- end -}}
+
+{{/* Determine card type */}}
+{{- $cardType := "summary" -}}
+{{- if $image -}}
+  {{- $cardType = "summary_large_image" -}}
+{{- end -}}
+
+<meta name="twitter:card" content="{{ $cardType }}">
+<meta name="twitter:title" content="{{ $title }}">
+<meta name="twitter:description" content="{{ $desc }}">
+
+{{- if $image }}
+<meta name="twitter:image" content="{{ $image }}">
+<meta name="twitter:image:alt" content="{{ $title }}">
+{{- end }}

layouts/partials/header.html

@@ -0,0 +1,44 @@
+<header class="fixed top-0 left-0 right-0 z-sticky bg-surface-0/80 backdrop-blur-md border-b border-border">
+  <nav class="container-wide flex items-center justify-between h-16">
+    {{/* Logo */}}
+    <a
+      href="{{ "/" | relURL }}"
+      class="flex items-center gap-3 group"
+      aria-label="{{ .Site.Title }} - Home"
+    >
+      <canvas
+        id="logo-canvas"
+        hx-preserve="true"
+        class="w-8 h-8"
+        width="32"
+        height="32"
+        aria-hidden="true"
+      ></canvas>
+      <span class="text-lg font-medium tracking-tight group-hover:text-accent transition-colors">
+        VALKNAR'S
+      </span>
+    </a>
+
+    {{/* Navigation */}}
+    <ul
+      class="flex items-center gap-4 md:gap-8"
+      x-data="{ path: window.location.pathname }"
+      @htmx:after-settle.window="path = window.location.pathname"
+    >
+      {{- range .Site.Menus.main }}
+      <li>
+        <a
+          href="{{ .URL }}"
+          class="text-sm transition-colors"
+          :class="path.startsWith('{{ .URL }}') ? 'text-text-primary border-b border-text-primary' : 'text-text-secondary hover:text-text-primary link-hover'"
+        >
+          {{ .Name }}
+        </a>
+      </li>
+      {{- end }}
+    </ul>
+  </nav>
+</header>
+
+{{/* Spacer for fixed header */}}
+<div class="h-16" aria-hidden="true"></div>

layouts/partials/player.html

@@ -0,0 +1,122 @@
+{{/* Persistent Audio Player */}}
+<div
+  x-data="playerUI()"
+  x-show="$store.audio.currentTrack"
+  x-cloak
+  class="audio-player p-4"
+  role="region"
+  aria-label="Audio player"
+>
+  <div class="container-wide flex items-center gap-4">
+    {{/* Track Info */}}
+    <div class="flex items-center gap-3 min-w-0 flex-1">
+      {{/* Cover */}}
+      <div
+        class="w-12 h-12 bg-surface-2 rounded overflow-hidden flex-shrink-0"
+        x-show="$store.audio.currentTrack?.image"
+      >
+        <img
+          :src="$store.audio.currentTrack?.image"
+          :alt="$store.audio.currentTrack?.title"
+          class="w-full h-full object-cover"
+        >
+      </div>
+
+      {{/* Title */}}
+      <div class="min-w-0">
+        <p
+          class="text-sm font-medium truncate"
+          x-text="$store.audio.currentTrack?.title || 'No track'"
+        ></p>
+        <p class="text-xs text-text-muted">Valknar</p>
+      </div>
+    </div>
+
+    {{/* Controls */}}
+    <div class="flex items-center gap-4">
+      {{/* Play/Pause */}}
+      <button
+        @click="togglePlay()"
+        class="w-10 h-10 flex items-center justify-center rounded-full bg-accent text-surface-0 hover:scale-105 transition-transform"
+        :aria-label="$store.audio.isPlaying ? 'Pause' : 'Play'"
+      >
+        <svg
+          x-show="!$store.audio.isPlaying"
+          class="w-5 h-5 ml-0.5"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+        <svg
+          x-show="$store.audio.isPlaying"
+          x-cloak
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+        </svg>
+      </button>
+    </div>
+
+    {{/* Progress */}}
+    <div class="flex-1 max-w-md hidden sm:flex items-center gap-3">
+      <span class="text-xs text-text-muted tabular-nums" x-text="formatTime($store.audio.progress)">0:00</span>
+      <input
+        type="range"
+        min="0"
+        :max="$store.audio.duration || 100"
+        :value="$store.audio.progress"
+        @input="seek($event.target.value)"
+        class="audio-player__progress flex-1"
+        aria-label="Seek"
+      >
+      <span class="text-xs text-text-muted tabular-nums" x-text="formatTime($store.audio.duration)">0:00</span>
+    </div>
+
+    {{/* Volume */}}
+    <div class="hidden md:flex items-center gap-2">
+      <button
+        @click="toggleMute()"
+        class="p-2 text-text-secondary hover:text-text-primary transition-colors"
+        :aria-label="$store.audio.volume === 0 ? 'Unmute' : 'Mute'"
+      >
+        <svg
+          x-show="$store.audio.volume > 0"
+          class="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M17.5 6.5a8 8 0 010 11M11 5L6 9H2v6h4l5 4V5z"/>
+        </svg>
+        <svg
+          x-show="$store.audio.volume === 0"
+          x-cloak
+          class="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"/>
+        </svg>
+      </button>
+      <input
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        :value="$store.audio.volume"
+        @input="setVolume($event.target.value)"
+        class="w-20 audio-player__progress"
+        aria-label="Volume"
+      >
+    </div>
+  </div>
+</div>
+
+<style>
+  [x-cloak] { display: none !important; }
+</style>

layouts/partials/track-card.html

@@ -0,0 +1,70 @@
+{{/* Track Card Component */}}
+<article class="track-card rounded-lg overflow-hidden group grayscale hover:grayscale-0">
+  {{/* Cover Image/Video */}}
+  <a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
+    {{- with .Resources.GetMatch "cover.*" }}
+      {{- $img := .Resize "600x webp q85" }}
+      <img
+        src="{{ $img.RelPermalink }}"
+        alt="{{ $.Title }}"
+        class="track-card__cover w-full h-full"
+        loading="lazy"
+        decoding="async"
+      >
+    {{- else }}
+      <div class="w-full h-full bg-surface-2 flex items-center justify-center">
+        <svg class="w-12 h-12 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+        </svg>
+      </div>
+    {{- end }}
+
+    {{/* Video preview on hover */}}
+    {{- with .Resources.GetMatch "preview.*" }}
+    <video
+      src="{{ .RelPermalink }}"
+      class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+      muted
+      loop
+      playsinline
+      onmouseenter="this.play()"
+      onmouseleave="this.pause(); this.currentTime=0;"
+    ></video>
+    {{- end }}
+
+    {{/* Play overlay - hide if video exists */}}
+    {{- if not (.Resources.GetMatch "preview.*") }}
+    <div class="absolute inset-0 bg-surface-0/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+      <div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform">
+        <svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      </div>
+    </div>
+    {{- end }}
+  </a>
+
+  {{/* Info */}}
+  <div class="p-4">
+    <a href="{{ .Permalink }}" class="block">
+      <h3 class="font-medium truncate group-hover:text-accent transition-colors">
+        {{ .Title }}
+      </h3>
+    </a>
+
+    <div class="flex items-center justify-between mt-2 text-sm text-text-muted">
+      <time datetime="{{ .Date.Format "2006-01-02" }}">
+        {{ .Date.Format "2006.01.02" }}
+      </time>
+      {{- with .Params.duration }}
+      <span class="tabular-nums">{{ . }}</span>
+      {{- end }}
+    </div>
+
+    {{- with .Params.genre }}
+    <span class="inline-block mt-3 px-2 py-1 text-xs bg-surface-2 text-text-secondary rounded">
+      {{ . }}
+    </span>
+    {{- end }}
+  </div>
+</article>