Compare commits
No commits in common. "88fefad2fde2b1716711990aaaf7074da139ab65" and "be4dfe8058626554fe31418b57ec13590ad37392" have entirely different histories.
88fefad2fd
...
be4dfe8058
5 changed files with 3 additions and 183 deletions
20
README.md
20
README.md
|
|
@ -6,27 +6,9 @@ This guide covers deploying your Hugo site that fetches content from Nostr relay
|
||||||
Architecture
|
Architecture
|
||||||
|
|
||||||
```
|
```
|
||||||
Nostr Relays → nak → jq → JSON files → Hugo → Static HTML → Web Server
|
Nostr Relays → nak → JSON files → Hugo → Static HTML → Web Server
|
||||||
```
|
```
|
||||||
|
|
||||||
✨ Features:
|
|
||||||
- Fullscreen header with Nostr profile data KINDS[0]
|
|
||||||
- Blog posts with read more KINDS[30023]
|
|
||||||
- Music player with playlist and lightbox (with lyrics!) KINDS[36787]
|
|
||||||
- Photo gallery with lightbox KINDS[20]
|
|
||||||
- Video gallery with poster images KINDS[22]
|
|
||||||
- Randomize buttons for all sections
|
|
||||||
- Sticky navigation
|
|
||||||
- Dark/light mode toggle
|
|
||||||
- Responsive design
|
|
||||||
- Automated deployment
|
|
||||||
|
|
||||||
🚀 Tech Stack:
|
|
||||||
- Hugo static site generator
|
|
||||||
- Nostr for content
|
|
||||||
- Custom theme
|
|
||||||
- Automated deployment with cron
|
|
||||||
|
|
||||||
## 📦 Prerequisites
|
## 📦 Prerequisites
|
||||||
|
|
||||||
### 1. Install Hugo
|
### 1. Install Hugo
|
||||||
|
|
|
||||||
|
|
@ -813,86 +813,6 @@ button {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0.2rem 0;
|
margin: 0.2rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Share button row - between controls and lyrics */
|
|
||||||
.music-lightbox-share-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 2rem 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Clean share button - smaller, no circle mask */
|
|
||||||
.music-lightbox-share-btn {
|
|
||||||
background: none;
|
|
||||||
border: 1.5px solid var(--accent-grey);
|
|
||||||
color: white;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
padding: 0.25rem 0.8rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0.6;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.music-lightbox-share-btn:hover {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1.05);
|
|
||||||
border-color: var(--accent-yellow);
|
|
||||||
background: rgba(255, 215, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.music-lightbox-share-btn .share-icon {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.music-lightbox-share-btn .share-label {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
letter-spacing: 1.5px;
|
|
||||||
opacity: 0.8;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pop-out feedback for "✓ Copied!" */
|
|
||||||
.share-feedback {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(20px);
|
|
||||||
background: rgba(0, 0, 0, 0.9);
|
|
||||||
color: var(--accent-yellow);
|
|
||||||
padding: 0.6rem 1.5rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
border: 1px solid var(--accent-yellow);
|
|
||||||
box-shadow: 0 4px 30px rgba(255, 215, 0, 0.2);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
z-index: 99999;
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-feedback.visible {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(-50%) translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-feedback .checkmark {
|
|
||||||
color: #4caf50;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Photo Grid - KEEP SKEW ON CARDS */
|
/* Photo Grid - KEEP SKEW ON CARDS */
|
||||||
.photo-grid {
|
.photo-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -180,9 +180,6 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
|
||||||
window.musicPlaylist = [];
|
window.musicPlaylist = [];
|
||||||
filteredTracks.forEach(track => {
|
filteredTracks.forEach(track => {
|
||||||
let title = '', url = '', image = '', artist = '', album = '', duration = '';
|
let title = '', url = '', image = '', artist = '', album = '', duration = '';
|
||||||
// ADD THIS: Store the track ID
|
|
||||||
const trackId = track.id || '';
|
|
||||||
|
|
||||||
if (track.tags) {
|
if (track.tags) {
|
||||||
track.tags.forEach(tag => {
|
track.tags.forEach(tag => {
|
||||||
const key = tag[0];
|
const key = tag[0];
|
||||||
|
|
@ -197,7 +194,6 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
|
||||||
}
|
}
|
||||||
if (url) {
|
if (url) {
|
||||||
window.musicPlaylist.push({
|
window.musicPlaylist.push({
|
||||||
id: trackId, // ADD THIS LINE
|
|
||||||
title: title || 'Untitled',
|
title: title || 'Untitled',
|
||||||
url: url,
|
url: url,
|
||||||
image: image || '',
|
image: image || '',
|
||||||
|
|
@ -568,8 +564,6 @@ let musicPlayer = null;
|
||||||
|
|
||||||
// Open music lightbox
|
// Open music lightbox
|
||||||
function openMusicLightbox(index) {
|
function openMusicLightbox(index) {
|
||||||
|
|
||||||
|
|
||||||
if (!window.musicPlaylist || window.musicPlaylist.length === 0) return;
|
if (!window.musicPlaylist || window.musicPlaylist.length === 0) return;
|
||||||
|
|
||||||
// Stop any existing playback
|
// Stop any existing playback
|
||||||
|
|
@ -601,74 +595,6 @@ function openMusicLightbox(index) {
|
||||||
// Get the lyrics element
|
// Get the lyrics element
|
||||||
const lyricsDisplay = document.getElementById('musicLightboxLyrics');
|
const lyricsDisplay = document.getElementById('musicLightboxLyrics');
|
||||||
|
|
||||||
// Share button - in its own row
|
|
||||||
const shareBtn = document.getElementById('musicShareBtn');
|
|
||||||
|
|
||||||
// Create feedback element if it doesn't exist
|
|
||||||
let feedbackEl = document.getElementById('shareFeedbackPopout');
|
|
||||||
if (!feedbackEl) {
|
|
||||||
feedbackEl = document.createElement('div');
|
|
||||||
feedbackEl.id = 'shareFeedbackPopout';
|
|
||||||
feedbackEl.className = 'share-feedback';
|
|
||||||
feedbackEl.innerHTML = '<span class="checkmark">✓</span> Copied!';
|
|
||||||
document.body.appendChild(feedbackEl);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shareBtn) {
|
|
||||||
shareBtn.onclick = function() {
|
|
||||||
if (!track.id) {
|
|
||||||
feedbackEl.textContent = '⚠️ No ID';
|
|
||||||
feedbackEl.classList.add('visible');
|
|
||||||
setTimeout(() => {
|
|
||||||
feedbackEl.classList.remove('visible');
|
|
||||||
}, 2000);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const shareUrl = `https://nostr.basspistol.org/notes/${track.id}`;
|
|
||||||
|
|
||||||
if (navigator.share) {
|
|
||||||
navigator.share({
|
|
||||||
title: track.title || 'Music Track',
|
|
||||||
text: `Check out "${track.title}" by ${track.artist || 'Unknown Artist'}`,
|
|
||||||
url: shareUrl
|
|
||||||
}).catch(err => {
|
|
||||||
console.log('Share cancelled or failed:', err);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
navigator.clipboard.writeText(shareUrl).then(() => {
|
|
||||||
feedbackEl.innerHTML = '<span class="checkmark">✓</span> Copied!';
|
|
||||||
feedbackEl.classList.add('visible');
|
|
||||||
setTimeout(() => {
|
|
||||||
feedbackEl.classList.remove('visible');
|
|
||||||
}, 2000);
|
|
||||||
}).catch(err => {
|
|
||||||
console.error('Could not copy text: ', err);
|
|
||||||
const textArea = document.createElement('textarea');
|
|
||||||
textArea.value = shareUrl;
|
|
||||||
document.body.appendChild(textArea);
|
|
||||||
textArea.select();
|
|
||||||
try {
|
|
||||||
document.execCommand('copy');
|
|
||||||
feedbackEl.innerHTML = '<span class="checkmark">✓</span> Copied!';
|
|
||||||
feedbackEl.classList.add('visible');
|
|
||||||
setTimeout(() => {
|
|
||||||
feedbackEl.classList.remove('visible');
|
|
||||||
}, 2000);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Fallback copy failed:', err);
|
|
||||||
feedbackEl.textContent = '⚠️ Copy failed';
|
|
||||||
feedbackEl.classList.add('visible');
|
|
||||||
setTimeout(() => {
|
|
||||||
feedbackEl.classList.remove('visible');
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
document.body.removeChild(textArea);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set album art
|
// Set album art
|
||||||
const artUrl = track.image || '/images/default-album.jpg';
|
const artUrl = track.image || '/images/default-album.jpg';
|
||||||
img.src = artUrl;
|
img.src = artUrl;
|
||||||
|
|
|
||||||
|
|
@ -82,15 +82,7 @@
|
||||||
<button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
|
<button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SHARE BUTTON - NEW ROW BETWEEN CONTROLS AND LYRICS -->
|
<!-- Lyrics moved here - below the controls -->
|
||||||
<div class="music-lightbox-share-row">
|
|
||||||
<button id="musicShareBtn" class="music-lightbox-share-btn" title="Share or interact with this track">
|
|
||||||
<span class="share-icon">🔗</span>
|
|
||||||
<span class="share-label">Share</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Lyrics -->
|
|
||||||
<div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
|
<div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
<div class="footer-right">
|
<div class="footer-right">
|
||||||
<div class="footer-meta-item">
|
<div class="footer-meta-item">
|
||||||
<span class="icon">🕒</span>
|
<span class="icon">🕒</span>
|
||||||
<span class="label">Last Built</span>
|
<span class="label">Updated</span>
|
||||||
<span class="value">{{ now.Format "Jan 2, 2006 · 15:04" }}</span>
|
<span class="value">{{ now.Format "Jan 2, 2006 · 15:04" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-meta-item">
|
<div class="footer-meta-item">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue