slice things up in partials for modularity

This commit is contained in:
sakrecoer 2026-07-31 09:46:08 +02:00
parent c9a800d5fa
commit b702ce6cda
6 changed files with 135 additions and 127 deletions

View file

@ -0,0 +1,60 @@
<!-- BLOG SECTION - Longform -->
<section id="blog" class="section">
<h2>Now Log</h2>
<div class="blog-grid">
{{ $blogPosts := slice }}
{{ range $path, $entries := hugo.Data.longform }}
{{ range $entries }}
{{ $blogPosts = $blogPosts | append . }}
{{ end }}
{{ end }}
{{ $sortedPosts := sort $blogPosts "created_at" "desc" }}
{{ range first 2 $sortedPosts }}
{{ $title := "" }}
{{ $summary := "" }}
{{ $image := "" }}
{{ $tags := slice }}
{{ $d := "" }}
{{ $createdAt := int .created_at }}
{{ range .tags }}
{{ if eq (index . 0) "title" }}
{{ $title = index . 1 }}
{{ else if eq (index . 0) "summary" }}
{{ $summary = index . 1 }}
{{ else if eq (index . 0) "image" }}
{{ $image = index . 1 }}
{{ else if eq (index . 0) "t" }}
{{ $tags = $tags | append (index . 1) }}
{{ else if eq (index . 0) "d" }}
{{ $d = index . 1 }}
{{ end }}
{{ end }}
<div class="blog-card">
{{ if $image }}
<img src="{{ $image }}" alt="{{ $title }}" class="blog-header-image" loading="lazy">
{{ end }}
<div class="blog-content">
<h3>{{ $title }}</h3>
<p class="blog-meta">
{{ dateFormat "January 2, 2006" (time (int .created_at)) }}
</p>
{{ if $summary }}
<p class="blog-description">{{ $summary }}</p>
{{ end }}
<div class="blog-tags">
{{ range $tags }}
<span class="tag"><span>{{ . }}</span></span>
{{ end }}
</div>
<button class="read-more-toggle">Read More</button>
<div class="blog-full-content" style="display: none;">
{{ .content | markdownify }}
</div>
</div>
</div>
{{ end }}
</div>
</section>

View file

@ -1,3 +1,5 @@
<!-- Footer -->
<footer class="site-footer">
<!-- Glow effect -->
<div class="footer-glow"></div>

View file

@ -0,0 +1,22 @@
<!-- MUSIC SECTION -->
<section id="music" class="section">
<h2>Music Traxxx</h2>
<div style="text-align: right; margin-bottom: 1rem;">
<button onclick="refreshMusic()" class="refresh-button">
<span>🎲 Randomize</span>
</button>
</div>
<div class="music-grid" id="musicGrid">
{{ $allMusic := slice }}
{{ range $path, $entries := hugo.Data.music }}
{{ range $entries }}
{{ $allMusic = $allMusic | append . }}
{{ end }}
{{ end }}
{{ $musicData := jsonify $allMusic }}
<script>
window.allMusicData = {{ $musicData | safeJS }};
</script>
</div>
</section>

View file

@ -0,0 +1,23 @@
<!-- PICTURES SECTION -->
<section id="pictures" class="section">
<h2>Pix & Doodles</h2>
<div style="text-align: right; margin-bottom: 1rem;">
<button onclick="refreshPictures()" class="refresh-button">
<span>🎲 Randomize</span>
</button>
</div>
<div class="photo-grid" id="photoGrid">
{{ $allPictures := slice }}
{{ range $path, $entries := hugo.Data.pictures }}
{{ range $entries }}
{{ $allPictures = $allPictures | append . }}
{{ end }}
{{ end }}
<!-- Store all pictures data in a JSON array -->
{{ $picturesData := jsonify $allPictures }}
<script>
window.allPicturesData = {{ $picturesData | safeJS }};
</script>
</div>
</section>

View file

@ -0,0 +1,24 @@
<!-- VIDEO SECTION -->
<section id="videos" class="section">
<h2>Vidz</h2>
<div style="text-align: right; margin-bottom: 1rem;">
<button onclick="refreshVideos()" class="refresh-button">
<span>🎲 Randomize</span>
</button>
</div>
<div class="video-grid" id="videoGrid">
{{ $allVideos := slice }}
{{ range $path, $entries := hugo.Data.videos }}
{{ range $entries }}
{{ $allVideos = $allVideos | append . }}
{{ end }}
{{ end }}
<!-- Store all videos data in a JSON array -->
{{ $videosData := jsonify $allVideos }}
<script>
window.allVideosData = {{ $videosData | safeJS }};
</script>
</div>
</section>
</main>