uuupah/11ty_neocities
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use shortcodes for album page

Browse Source
This commit is contained in:
jonathan
2023-10-06 18:09:58 +10:30
parent c47459eb58
commit f77889b97f
3 changed files with 195 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.eleventy.js
View File

@ -11,6 +11,29 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("./src/_assets/fonts"); eleventyConfig.addPassthroughCopy("./src/_assets/fonts");
eleventyConfig.addPassthroughCopy("./src/_assets/js"); eleventyConfig.addPassthroughCopy("./src/_assets/js");
eleventyConfig.addShortcode("albumtile", function (title, embedLink, coverImage) {
// hugely overcomplicated universal slug method
var slug = title
.toLowerCase()
.trim()
// remove accents
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
// replace invalid characters with spaces
.replace(/[^a-z0-9\s-]/g, ' ')
.trim()
// replace multiple spaces or hyphens with a hyphen
.replace(/[\s-]+/g, '-');
return `<div>
<a class="hide" href="${embedLink}" target="${slug}">
<img class="album-tile-cover-image" src="${coverImage}">
</a>
<iframe class="album-tile-iframe" name="${slug}" src="about:blank" seamless></iframe>
<b>${title}</b>
</div>`
});
// make a list of all tags besides "post" and add them to the collection // make a list of all tags besides "post" and add them to the collection
eleventyConfig.addCollection("tagsList", function (collectionApi) { eleventyConfig.addCollection("tagsList", function (collectionApi) {
const tagsList = new Set(); const tagsList = new Set();

51
src/_includes/styles.css
View File

@ -49,7 +49,8 @@ h3 {
margin-bottom: var(--line-padding); margin-bottom: var(--line-padding);
} }
h4, h5 { h4,
h5 {
margin-top: var(--line-padding); margin-top: var(--line-padding);
margin-bottom: var(--line-padding); margin-bottom: var(--line-padding);
} }
@ -274,18 +275,24 @@ footer {
} }
@keyframes bounce { @keyframes bounce {
0%, 100% {
0%,
100% {
transform: translateY(0); transform: translateY(0);
} }
50% { 50% {
transform: translateY(-5px); transform: translateY(-5px);
} }
75% { 75% {
transform: translateY(0); transform: translateY(0);
} }
100% { 100% {
transform: translateY(0); transform: translateY(0);
animation-delay: 3s; /* add a 3 second delay before restarting the animation */ animation-delay: 3s;
/* add a 3 second delay before restarting the animation */
} }
} }
@ -313,7 +320,7 @@ footer {
} }
.gallery>a>img { .gallery>a>img {
box-sizing:border-box; box-sizing: border-box;
background-color: var(--accent-bg); background-color: var(--accent-bg);
border: 2px solid var(--border); border: 2px solid var(--border);
} }
@ -327,7 +334,7 @@ footer {
margin-bottom: 15px; margin-bottom: 15px;
} }
.two-columns *{ .two-columns * {
width: 100%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
object-fit: cover; object-fit: cover;
@ -342,25 +349,24 @@ footer {
/* simple lightbox pulled from https://codepen.io/nebo/pen/ONXejO */ /* simple lightbox pulled from https://codepen.io/nebo/pen/ONXejO */
.trans .trans {
{
transition: all 0.25s ease; transition: all 0.25s ease;
} }
.lightbox
{ .lightbox {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
top: 0; top: 0;
left: 0; left: 0;
background-color: rgba(0,0,0,0.75); background-color: rgba(0, 0, 0, 0.75);
z-index: 999; z-index: 999;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.lightbox img
{ .lightbox img {
max-width: 90%; max-width: 90%;
max-height: 80%; max-height: 80%;
position: relative; position: relative;
@ -368,16 +374,16 @@ footer {
/* Transition */ /* Transition */
transition: all 0.5 ease; transition: all 0.5 ease;
} }
.lightbox:target
{ .lightbox:target {
outline: none; outline: none;
top: 0; top: 0;
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.lightbox:target img
{ .lightbox:target img {
top: 0; top: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@ -386,3 +392,16 @@ footer {
.paragraph-deparagrapher p { .paragraph-deparagrapher p {
margin: 0; margin: 0;
} }
.album-tile-cover-image {
border: 0;
width: 100%;
aspect-ratio: 1;
}
.album-tile-iframe {
border: 0;
width: 100%;
aspect-ratio: 1;
display: none;
}

247
src/lists/albums.md
View File

@ -7,147 +7,124 @@ date: 2023-07-31
<h1>albums</h1> <h1>albums</h1>
<!-- dev uuupah! be sure to overwrite the iframe style with style="border: 0; width: 100%; aspect-ratio: 1;" when adding new albums -->
<div class="album-tiles-grid"> <div class="album-tiles-grid">
<div> {% albumtile
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=1662540416/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="exo"> "exo - tineidae",
<img src="/_assets/img/albums/exo.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "https://bandcamp.com/EmbeddedPlayer/album=1662540416/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
</a> "/_assets/img/albums/exo.jpg"
<iframe name="exo" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://cryochamber.bandcamp.com/album/exo">Exo by Tineidae</a></iframe> -%}
<b>exo - tineidae</b>
</div> {% albumtile
<div> "exile - sabrepulse",
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=2135258317/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="exile"> "https://bandcamp.com/EmbeddedPlayer/album=2135258317/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
<img src="/_assets/img/albums/exile.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "/_assets/img/albums/exile.jpg"
</a> -%}
<iframe name="exile" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://sabrepulse.bandcamp.com/album/exile-2">Exile by Sabrepulse</a></iframe>
<b>exile - sabrepulse</b> {% albumtile
</div> "delancey st. station - pinc louds",
<div> "https://bandcamp.com/EmbeddedPlayer/album=3174957532/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=3174957532/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="delanceyststation"> "/_assets/img/albums/delanceyststation.jpg"
<img src="/_assets/img/albums/delanceyststation.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> -%}
</a>
<iframe name="delanceyststation" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://pinclouds.bandcamp.com/album/delancey-st-station">Delancey St. Station by Pinc Louds</a></iframe> {% albumtile
<b>delancey st. station - pinc louds</b> "hyper dimensional expansion beam - the comet is coming",
</div> "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_kYZZBgXZRayWvaZrwpA3tOb5C6o_9qoio",
<div> "/_assets/img/albums/hyperdimensionalexpansionbeam.jpg"
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_kYZZBgXZRayWvaZrwpA3tOb5C6o_9qoio" target="hyperdimensionalexpansionbeam"> -%}
<img src="/_assets/img/albums/hyperdimensionalexpansionbeam.jpg" style="border: 0; width: 100%; aspect-ratio: 1;">
</a> {% albumtile
<iframe name="hyperdimensionalexpansionbeam" style="border: 0; width: 100%; aspect-ratio: 1; display: none; margin-bottom: 7px;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> "twine - taylor deupree & marcus fischer",
<b>hyper dimensional expansion beam - the comet is coming</b> "https://bandcamp.com/EmbeddedPlayer/album=1344380888/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
</div> "/_assets/img/albums/twine.jpg"
<div> -%}
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=1344380888/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="twine">
<img src="/_assets/img/albums/twine.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> {% albumtile
</a> "troupeau bleu - cortex",
<iframe name="twine" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://12kmusic.bandcamp.com/album/twine">Twine by Taylor Deupree &amp; Marcus Fischer</a></iframe> "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_kAvEij43J5GYQaLVdL4hzUKsWSEDHgYdc",
<b>twine - taylor deupree & marcus fischer</b> "/_assets/img/albums/troupeaubleu.jpg"
</div> -%}
<div>
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_kAvEij43J5GYQaLVdL4hzUKsWSEDHgYdc" target="troupeaubleu"> {% albumtile
<img src="/_assets/img/albums/troupeaubleu.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "gemini - machine girl",
</a> "https://bandcamp.com/EmbeddedPlayer/album=1401193641/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
<iframe name="troupeaubleu" style="border: 0; width: 100%; aspect-ratio: 1; display: none; margin-bottom: 7px;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> "/_assets/img/albums/gemini.jpg"
<b>troupeau bleu - cortex</b> -%}
</div>
<div> {% albumtile
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=1401193641/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="gemini"> "a letter from slowboat - ryo fukui",
<img src="/_assets/img/albums/gemini.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_nKQ0aamXCuH4pX1DBmYj4tIgvB3Bex0iQ",
</a> "/_assets/img/albums/aletterfromslowboat.jpg"
<iframe name="gemini" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://machinegirl.bandcamp.com/album/gemini">Gemini by Machine Girl</a></iframe> -%}
<b>gemini - machine girl</b>
</div> {% albumtile
<div> "music tranquilizer - kaoru ono",
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_nKQ0aamXCuH4pX1DBmYj4tIgvB3Bex0iQ" target="aletterfromslowboat"> "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_l13KkpcJNof8bT38IDALP1zpZilzIvQP4",
<img src="/_assets/img/albums/aletterfromslowboat.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "/_assets/img/albums/musictranquilizer.jpg"
</a> -%}
<iframe name="aletterfromslowboat" style="border: 0; width: 100%; aspect-ratio: 1; display: none; margin-bottom: 7px;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<b>a letter from slowboat - ryo fukui</b> {% albumtile
</div> "piano - felix rösch",
<div> "https://bandcamp.com/EmbeddedPlayer/album=1734574665/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_l13KkpcJNof8bT38IDALP1zpZilzIvQP4" target="musictranquilizer"> "/_assets/img/albums/piano.jpg"
<img src="/_assets/img/albums/musictranquilizer.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> -%}
</a>
<iframe name="musictranquilizer" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> {% albumtile
<b>music tranquilizer - kaoru ono</b> "zapper - nanoray",
</div> "https://bandcamp.com/EmbeddedPlayer/album=2586530263/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
<div> "/_assets/img/albums/zapper.jpg"
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=1734574665/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="piano"> -%}
<img src="/_assets/img/albums/piano.jpg" style="border: 0; width: 100%; aspect-ratio: 1;">
</a>
<iframe name="piano" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://felixrosch.bandcamp.com/album/piano-2">Piano by Felix Rösch</a></iframe>
<b>piano - felix rösch</b>
</div>
<div>
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=2586530263/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="zapper">
<img src="/_assets/img/albums/zapper.jpg" style="border: 0; width: 100%; aspect-ratio: 1;">
</a>
<iframe name="zapper" style="border: 0; width: 100%; aspect-ratio: 1; display: none; " src="about:blank" seamless><a href="https://nanoray.bandcamp.com/album/zapper">ZAPPER by NANORAY</a></iframe>
<b>zapper - nanoray</b>
</div>
</div> </div>
# soundtracks # soundtracks
<div class="album-tiles-grid"> <div class="album-tiles-grid">
<div> {% albumtile
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mbQxWvaWie-adhtXtm6b2X0qM-2zoRJio" target="skyrim"> "the elder scrolls v: skyrim - jeremy soule",
<img src="/_assets/img/albums/skyrim.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mbQxWvaWie-adhtXtm6b2X0qM-2zoRJio",
</a> "/_assets/img/albums/skyrim.jpg"
<iframe name="skyrim" style="border: 0; width: 100%; aspect-ratio: 1; display: none; margin-bottom: 7px;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> -%}
<b>the elder scrolls v: skyrim - jeremy soule</b>
</div> {% albumtile
<div> "persona 5 - shoji meguro",
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?list=PLZuZrScKjWOMAEEBEGTmAGtmmlg6QY7bC" target="persona5"> "https://www.youtube-nocookie.com/embed/videoseries?list=PLZuZrScKjWOMAEEBEGTmAGtmmlg6QY7bC",
<img src="/_assets/img/albums/persona5.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "/_assets/img/albums/persona5.jpg"
</a> -%}
<iframe name="persona5" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<b>persona 5 - shoji meguro</b> {% albumtile
</div> "night in the woods - alec holowka",
<div> "https://bandcamp.com/EmbeddedPlayer/album=816099561/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=816099561/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="nightinthewoods"> "/_assets/img/albums/nightinthewoods.jpg"
<img src="/_assets/img/albums/nightinthewoods.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> -%}
</a>
<iframe name="nightinthewoods" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://infiniteammo.bandcamp.com/album/night-in-the-woods-vol-1-at-the-end-of-everything">Night in the Woods Vol. 1: At The End Of Everything by Alec Holowka</a></iframe> {% albumtile
<b>night in the woods - alec holowka</b> "mirror's edge catalyst - solar fields",
</div> "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mYoJDBgR0t-BCy-Y-K4u3ro0sDVYRoIF0",
<div> "/_assets/img/albums/mirrorsedgecatalyst.jpg"
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mYoJDBgR0t-BCy-Y-K4u3ro0sDVYRoIF0" target="mirrorsedgecatalyst"> -%}
<img src="/_assets/img/albums/mirrorsedgecatalyst.jpg" style="border: 0; width: 100%; aspect-ratio: 1;">
</a> {% albumtile
<iframe name="mirrorsedgecatalyst" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> "a hat in time - pascal michael stiefel",
<b>mirror's edge catalyst - solar fields</b> "https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mJQUNw78Oc2RO3imwBugUq9rchF53rkj4",
</div> "/_assets/img/albums/ahatintime.jpg"
<div> -%}
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?list=OLAK5uy_mJQUNw78Oc2RO3imwBugUq9rchF53rkj4" target="ahatintime">
<img src="/_assets/img/albums/ahatintime.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> {% albumtile
</a> "lisa - widdly 2 diddly",
<iframe name="ahatintime" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> "https://bandcamp.com/EmbeddedPlayer/album=3091311371/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
<b>a hat in time - pascal michael stiefel</b> "/_assets/img/albums/lisa.jpg"
</div> -%}
<div>
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=3091311371/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="lisa"> {% albumtile
<img src="/_assets/img/albums/lisa.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "final fantasy xiii - masashi hamauzu",
</a> "https://www.youtube-nocookie.com/embed/videoseries?controls=0&amp;list=OLAK5uy_mVPS-4XM_sVgQroZkZsFYvTzEuFqwHEIs",
<iframe name="lisa" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://widdly2diddly.bandcamp.com/album/lisa-soundtrack">LISA Soundtrack by Widdly 2 Diddly</a></iframe> "/_assets/img/albums/finalfantasyxiii.jpg"
<b>lisa - widdly 2 diddly</b> -%}
</div>
<div> {% albumtile
<a class="hide" href="https://www.youtube-nocookie.com/embed/videoseries?controls=0&amp;list=OLAK5uy_mVPS-4XM_sVgQroZkZsFYvTzEuFqwHEIs" target="finalfantasyxiii"> "chicory: a colorful tale - lena raine",
<img src="/_assets/img/albums/finalfantasyxiii.jpg" style="border: 0; width: 100%; aspect-ratio: 1;"> "https://bandcamp.com/EmbeddedPlayer/album=709270856/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/",
</a> "/_assets/img/albums/chicory.jpg"
<iframe name="finalfantasyxiii" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> -%}
<b>final fantasy xiii - masashi hamauzu</b>
</div>
<div>
<a class="hide" href="https://bandcamp.com/EmbeddedPlayer/album=709270856/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/" target="chicory">
<img src="/_assets/img/albums/chicory.jpg" style="border: 0; width: 100%; aspect-ratio: 1;">
</a>
<iframe name="chicory" style="border: 0; width: 100%; aspect-ratio: 1; display: none;" src="about:blank" seamless><a href="https://radicaldreamland.bandcamp.com/album/chicory-a-colorful-tale-original-soundtrack">Chicory: A Colorful Tale (Original Soundtrack) by Lena Raine</a></iframe>
<b>chicory: a colorful tale - lena raine</b>
</div>
</div> </div>
<!-- # artists --> <!-- # artists -->