test build shortcodes for youtubers page

.eleventy.js

@@ -23,7 +23,7 @@ module.exports = function (eleventyConfig) {
     </div>`
   });
 
-  eleventyConfig.addShortcode("infinitenightmare", function (title, link, image, video, description) {
+  eleventyConfig.addShortcode("infinitenightmare", function (title, link, image, video, iframelink, description) {
     if (!title || title == "") {
       return '';
     };
@@ -31,6 +31,7 @@ module.exports = function (eleventyConfig) {
     var imageString = "";
     var linkString = "";
     var videoString = "";
+    var iframeString = "";
     
     var slug = slugify(title);
 
@@ -58,13 +59,19 @@ module.exports = function (eleventyConfig) {
           <img src="${video.poster}"></img>  
           </video><br>`
     }
+
+    if (iframelink) {
+      console.log(iframelink)
+      iframeString = `
+      <iframe src="${iframelink}" width="560" height="315" seamless allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe><br>`;
+    }
     
-    return `<hr>
-    <p>
-      <strong>${title}</strong><br>
+    return `<p>
+      <h3>${title}</h3>
       ${linkString}
       ${imageString}
       ${videoString}
+      ${iframeString}
       ${description}
     </p>`
   });

src/_data/infinite_nightmare.json

@@ -48,7 +48,7 @@
             "https://64.media.tumblr.com/9845d0279d6faa46f32c367a83eaa20b/f8780d92a1b9a33f-78/s1280x1920/a6471dabc0a371019d3f7912e12d40070113e633.png",
             "/_assets/img/infinite_nightmare/kms2605.jpg"
         ],
-        "description": "quite ironically, the first thing i gravitated towards with digital art was just re-representing the traditional stuff i already did on paper, as you can probably see with <a href='/art/my-art-2023/#img_13'>this piece</a>, which was heavily driven by these two artists. kip's style is an obvious inspiration, and the sketchy rendering style is something that kms does with all their work, even when it is coloured."
+        "description": "quite ironically, the first thing i gravitated towards with digital art was just re-representing the traditional stuff i already did on paper, as you can probably see with <a href='/art/my-art-2023/#img_10'>this piece</a>, which was heavily driven by these two artists. kip's style is an obvious inspiration, and the sketchy rendering style is something that kms does with all their work, even when it is coloured."
     },
     {
         "title": "hoho_chip",

src/_includes/styles.css

@@ -8,16 +8,18 @@
 
   --bg: #6a826a;
   --container: #fffbef;
-  --accent-bg: #b99b6c;
+  --accent-bg: #6a826a;
   --text: #6a826a;
-  --header-text: #b99b6c;
-  /* --text-light: #585858; */
+  --header-text: #6a826a;
   --border: #6a826a;
   --accent: #aa5757;
+
   --content-column-width: 750px;
   /* this width was 200 but i stretched it out to fit the gif */
   --sidebar-column-width: 287px;
   --line-padding: 8px;
+
+  font-size: 11pt;
 }
 
 html {
@@ -270,43 +272,6 @@ footer {
   justify-self: flex-end;
 }
 
-.bouncy {
-  animation: bounce 1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
-}
-
-@keyframes bounce {
-
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-5px);
-  }
-
-  75% {
-    transform: translateY(0);
-  }
-
-  100% {
-    transform: translateY(0);
-    animation-delay: 3s;
-    /* add a 3 second delay before restarting the animation */
-  }
-}
-
-.updates-field {
-  border: 2px solid var(--bg);
-  padding: 5px;
-  margin-top: var(--line-padding);
-  margin-bottom: var(--line-padding);
-}
-
-.updates-field p {
-  margin: 0;
-}
-
 .gallery {
   width: 100%;
   display: grid;
@@ -410,4 +375,21 @@ footer {
   width: 100%;
   aspect-ratio: 1;
   display: none;
+}
+
+.list-formatting p{
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+
+.list-formatting h3,
+.list-formatting hr{
+  margin-bottom: 0;
+  margin-top: 32px;
+}
+
+.list-formatting img,
+.list-formatting video,
+.list-formatting iframe {
+  border: 1px solid var(--border);
 }

src/infinite_nightmare.md

@@ -6,7 +6,7 @@ pagination:
   size: 1000
   alias: postslist
 ---
-<div class="infinite-nightmare">
+<div class="infinite-nightmare list-formatting">
 
 ### 🔞 warning! some of this stuff will be nsfw or include art that is nsfw 🔞
 thats just art baby! people are naked a _lot_ as it turns out
@@ -19,6 +19,7 @@ welcome to the infinite nightmare list aka a big dumpster for me to put art rela
     post.link,
     post.image,
     post.video,
+    post.iframelink,
     post.description
   %}
 {% endfor %}

src/lists/youtubers.md

@@ -3,11 +3,19 @@ title: "my favourite youtube creators"
 date: 2023-10-17
 ---
 
-### dalub
-[www.youtube.com/@StellariteDalub](https://www.youtube.com/@StellariteDalub)  
-<iframe width="560" height="315" style="padding: 0;" src="https://www.youtube-nocookie.com/embed/NbTLpZLmfI4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<div class="list-formatting">
 
-this is an extremely indulgent move but dalub provides the most wonderfully genuine splatoon montages with just a bunch of people messing about; everything else on youtube is trying to put out regular weekly content instead of just having fun
+{% infinitenightmare
+    "dalub",
+    [{
+        "title": "www.youtube.com/@StellariteDalub",
+        "link": "https://www.youtube.com/@StellariteDalub"
+    }],
+    null,
+    null,
+    "https://www.youtube-nocookie.com/embed/NbTLpZLmfI4",
+    "this is an extremely indulgent move but dalub provides the most wonderfully genuine splatoon montages with just a bunch of people messing about; everything else on youtube is trying to put out regular weekly content instead of just having fun"
+%}
 
 ### hhhazel  
 [youtube.com/@hhhazel](https://www.youtube.com/@hhhazel)  
@@ -25,4 +33,6 @@ whitestone jazz is a mathematician who splits time between describing mathematic
 [youtube.com/@JennyNicholson](https://www.youtube.com/@JennyNicholson)  
 <iframe width="560" height="315" style="padding: 0;" src="https://www.youtube-nocookie.com/embed/p4AdFD3E2ok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>  
 
-jenny nicholson fits squarely in the camp of people who are delightful to listen to because they're simply extremely passionate. her videos span a bunch of different topics but there is a lot of movie and tv stuff, with some absolute out-there left-field type topics in between
+jenny nicholson fits squarely in the camp of people who are delightful to listen to because they're simply extremely passionate. her videos span a bunch of different topics but there is a lot of movie and tv stuff, with some absolute out-there left-field type topics in between
+
+</div>