jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix iframe recursion and remove all localStorage/cookies site-wide

Browse Source 
- Add target="_top" to all ← SPACE / back-to-root links so navigating
  back to index.html breaks out of the content iframe instead of loading
  it recursively inside itself (Images, Music, Watchlists hubs)
- Remove all localStorage usage: visited-star tracking in index.html
  (resets each visit, no persistence without storage), and lightbox
  "show once" guards in all section pages (lightboxes now show on every
  load — Videos, Watchlists, Music). build.py templates updated so
  future generated pages stay clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
JL Kruger
2026-03-28 16:03:17 +02:00
parent 1e776bee83
commit c1a7098ebe
17 changed files with 17 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Images/images.html
View File

@@ -203,7 +203,7 @@
<body> <body>
<header> <header>
<h1>Images</h1> <h1>Images</h1>
<a href="../index.html" class="nav-back">← Back to Space</a> <a href="../index.html" class="nav-back" target="_top">← Back to Space</a>
</header> </header>
<main> <main>

3
Music/build.py
View File

@@ -99,10 +99,7 @@ def build_lightbox_html(text: str, slug: str) -> tuple[str, str]:
js = f""" js = f"""
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('music-{slug}-seen')) {{
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('music-{slug}-seen', '1');
}}
const closeLightbox = () => {{ lightbox.style.display = 'none'; }}; const closeLightbox = () => {{ lightbox.style.display = 'none'; }};
lightbox.addEventListener('click', (e) => {{ lightbox.addEventListener('click', (e) => {{
if (e.target === lightbox) closeLightbox(); if (e.target === lightbox) closeLightbox();

2
Music/music-hub.html
View File

@@ -143,7 +143,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="../index.html" class="back-link">← SPACE</a> <a href="../index.html" class="back-link" target="_top">← SPACE</a>
<h1>MUSIC</h1> <h1>MUSIC</h1>
<!-- SUBTITLE-START --><span class="subtitle">1 COLLECTION · PERSONAL ARCHIVE · 14 TRACKS</span><!-- SUBTITLE-END --> <!-- SUBTITLE-START --><span class="subtitle">1 COLLECTION · PERSONAL ARCHIVE · 14 TRACKS</span><!-- SUBTITLE-END -->
</header> </header>

3
Music/music-template.html
View File

@@ -535,10 +535,7 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// --- Lightbox --- // --- Lightbox ---
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('music-oldmusicandmvs-seen')) {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('music-oldmusicandmvs-seen', '1');
}
const closeLightbox = () => { lightbox.style.display = 'none'; }; const closeLightbox = () => { lightbox.style.display = 'none'; };

3
Music/oldmusicandmvs.html
View File

@@ -555,10 +555,7 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('music-oldmusicandmvs-seen')) {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('music-oldmusicandmvs-seen', '1');
}
const closeLightbox = () => { lightbox.style.display = 'none'; }; const closeLightbox = () => { lightbox.style.display = 'none'; };
lightbox.addEventListener('click', (e) => { lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) closeLightbox(); if (e.target === lightbox) closeLightbox();

3
Videos/cringe-pit.html
View File

@@ -342,13 +342,10 @@
function closeGate() { function closeGate() {
const gate = document.getElementById('welcome-gate'); const gate = document.getElementById('welcome-gate');
gate.classList.remove('active'); gate.classList.remove('active');
localStorage.setItem('cringe_pit_visited', 'true');
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
if (!localStorage.getItem('cringe_pit_visited')) {
document.getElementById('welcome-gate').classList.add('active'); document.getElementById('welcome-gate').classList.add('active');
}
}); });
</script> </script>
</body> </body>

3
Videos/nomad-soul.html
View File

@@ -403,13 +403,10 @@
function closeGate() { function closeGate() {
const gate = document.getElementById('welcome-gate'); const gate = document.getElementById('welcome-gate');
gate.classList.remove('active'); gate.classList.remove('active');
localStorage.setItem('nomad_visited', 'true');
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
if (!localStorage.getItem('nomad_visited')) {
document.getElementById('welcome-gate').classList.add('active'); document.getElementById('welcome-gate').classList.add('active');
}
}); });
</script> </script>
</body> </body>

3
Videos/renegade-storyteller.html
View File

@@ -397,13 +397,10 @@
function closeGate() { function closeGate() {
const gate = document.getElementById('welcome-gate'); const gate = document.getElementById('welcome-gate');
gate.classList.remove('active'); gate.classList.remove('active');
localStorage.setItem('renegade_visited', 'true');
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
if (!localStorage.getItem('renegade_visited')) {
document.getElementById('welcome-gate').classList.add('active'); document.getElementById('welcome-gate').classList.add('active');
}
}); });
</script> </script>
</body> </body>

3
Watchlists/analogfrontier.html
View File

@@ -420,10 +420,7 @@
// Lightbox: show on first load // Lightbox: show on first load
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('watchlist-analogfrontier-seen')) {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('watchlist-analogfrontier-seen', '1');
}
function closeLightbox() { lightbox.style.display = 'none'; } function closeLightbox() { lightbox.style.display = 'none'; }

4
Watchlists/build.py
View File

@@ -84,12 +84,8 @@ def build_lightbox_html(text: str, slug: str) -> tuple[str, str]:
</div>""" </div>"""
js = f""" js = f"""
// Lightbox: show on first load
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('watchlist-{slug}-seen')) {{
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('watchlist-{slug}-seen', '1');
}}
function closeLightbox() {{ lightbox.style.display = 'none'; }} function closeLightbox() {{ lightbox.style.display = 'none'; }}

3
Watchlists/contentaddictionarchive.html
View File

@@ -438,10 +438,7 @@
// Lightbox: show on first load // Lightbox: show on first load
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('watchlist-contentaddictionarchive-seen')) {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('watchlist-contentaddictionarchive-seen', '1');
}
function closeLightbox() { lightbox.style.display = 'none'; } function closeLightbox() { lightbox.style.display = 'none'; }

3
Watchlists/culturaldecay.html
View File

@@ -420,10 +420,7 @@
// Lightbox: show on first load // Lightbox: show on first load
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('watchlist-culturaldecay-seen')) {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('watchlist-culturaldecay-seen', '1');
}
function closeLightbox() { lightbox.style.display = 'none'; } function closeLightbox() { lightbox.style.display = 'none'; }

3
Watchlists/lastcinema.html
View File

@@ -402,10 +402,7 @@
// Lightbox: show on first load // Lightbox: show on first load
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('watchlist-lastcinema-seen')) {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('watchlist-lastcinema-seen', '1');
}
function closeLightbox() { lightbox.style.display = 'none'; } function closeLightbox() { lightbox.style.display = 'none'; }

3
Watchlists/soundscapeanomalies.html
View File

@@ -438,10 +438,7 @@
// Lightbox: show on first load // Lightbox: show on first load
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('watchlist-soundscapeanomalies-seen')) {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('watchlist-soundscapeanomalies-seen', '1');
}
function closeLightbox() { lightbox.style.display = 'none'; } function closeLightbox() { lightbox.style.display = 'none'; }

3
Watchlists/watchlist-template.html
View File

@@ -447,10 +447,7 @@
// Lightbox: show on first load // Lightbox: show on first load
const lightbox = document.getElementById('lightbox'); const lightbox = document.getElementById('lightbox');
if (!localStorage.getItem('watchlist-caa-seen')) {
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
localStorage.setItem('watchlist-caa-seen', '1');
}
function closeLightbox() { function closeLightbox() {
lightbox.style.display = 'none'; lightbox.style.display = 'none';

2
Watchlists/watchlists-hub.html
View File

@@ -192,7 +192,7 @@
<body> <body>
<header> <header>
<a href="../index.html" class="back-link">← SPACE</a> <a href="../index.html" class="back-link" target="_top">← SPACE</a>
<h1>WATCHLISTS</h1> <h1>WATCHLISTS</h1>
<!-- SUBTITLE-START --><div class="subtitle">5 COLLECTIONS · CURATED VIDEO ARCHIVES · 36 PLAYLISTS</div><!-- SUBTITLE-END --> <!-- SUBTITLE-START --><div class="subtitle">5 COLLECTIONS · CURATED VIDEO ARCHIVES · 36 PLAYLISTS</div><!-- SUBTITLE-END -->
</header> </header>

4
index.html
View File

@@ -762,7 +762,7 @@ body::after {
var writingsLightboxShown = false; var writingsLightboxShown = false;
var currentWritingIndex = 0; var currentWritingIndex = 0;
var writingElements = []; var writingElements = [];
var visited = JSON.parse(localStorage.getItem('sp-visited') || '{}'); var visited = {};
var starElements = []; var starElements = [];
var srAnnounce = document.getElementById('sr-announce'); var srAnnounce = document.getElementById('sr-announce');
var backBtn = document.getElementById('back-btn'); var backBtn = document.getElementById('back-btn');
@@ -1154,14 +1154,12 @@ body::after {
// Writings star activates the writings sub-map instead of rising a frame // Writings star activates the writings sub-map instead of rising a frame
if (star.id === 'writings') { if (star.id === 'writings') {
visited[star.id] = true; visited[star.id] = true;
localStorage.setItem('sp-visited', JSON.stringify(visited));
starElements[index].classList.add('visited'); starElements[index].classList.add('visited');
selectWritingsSection(); selectWritingsSection();
return; return;
} }
visited[star.id] = true; visited[star.id] = true;
localStorage.setItem('sp-visited', JSON.stringify(visited));
starElements[index].classList.add('visited'); starElements[index].classList.add('visited');
starElements.forEach(function (el) { el.classList.remove('current'); }); starElements.forEach(function (el) { el.classList.remove('current'); });
starElements[index].classList.add('current'); starElements[index].classList.add('current');