and i still need you. and i still miss you.

Author: petracoding

content/_data/changelog.json

@@ -1,5 +1,6 @@
 [
   { "date": "2026-01-XX", "text": "TEMPLATE", "link": "" },
+  { "date": "2026-01-08", "text": "Improvements to clique list", "link": "/coding/cliques" },
   { "date": "2026-01-03", "text": "Indie Web Contest winners announced!", "link": "/contest" },
   { "date": "2026-01-02", "text": "Made some 88x31 buttons :) Feel free to use!", "link": "/about/blinkies" },
 

content/_includes/coding.njk

@@ -28,8 +28,8 @@ testingOnLocalhost: false
     </script>
     {% endif %}
 
-    <!-- Font Awesome -->
-    <script src="https://kit.fontawesome.com/0328336a9e.js" crossorigin="anonymous"></script>
+    <!-- Font Awesome 
+    <script src="https://kit.fontawesome.com/0328336a9e.js" crossorigin="anonymous"></script>-->
 
     {% if not noSEO and not testingOnLocalhost %}
 

content/_includes/petrapixel.njk

@@ -310,7 +310,7 @@ testingOnLocalhost: false
             <li aria-label="watching:">
               <img src="{{ nesting }}assets/img/layout/icon-tv.png" alt="" title="watching:" aria-hidden="true" />
               <a href="https://app.tvtime.com/user/33116783" target="_blank"
-                >Stranger Things (s5)
+                >-
                 <!--<span style="font-family: sans-serif; font-size: 0.9em">↺</span
                 >--></a
               >
@@ -330,7 +330,7 @@ testingOnLocalhost: false
             <li aria-label="obsessed with:">
               <img src="{{ nesting }}assets/img/layout/icon-heart.png" alt="" title="obsessed with:" aria-hidden="true" />
               <span
-                >Manifestation<!-- <span style="font-family: sans-serif; font-size: 0.9em">♡</span
+                >My cat, Holly<!-- <span style="font-family: sans-serif; font-size: 0.9em">♡</span
                 >--></span
               >
             </li>
@@ -383,40 +383,20 @@ testingOnLocalhost: false
         <div class="aside-stuff aside-poll" aria-hidden="true">
           <div class="aside-stuff__heading" aria-hidden="true">Poll<img src="{{ nesting }}assets/img/layout/icon-stats.png" alt="" aria-hidden="true" /></div>
 
-          <form method="post" action="https://poll.pollcode.com/46914348">
+          <form method="post" action="https://poll.pollcode.com/19689655">
             <div style="background-color: #eeeeee; padding: 2px; width: 175px; font-family: Arial; font-size: small; color: #000000">
-              <div style="padding: 2px 0px 4px 2px"><strong>how should i change my hair? (currently split-dyed brown and blonde)</strong></div>
-              <input type="radio" name="answer" value="1" id="answer469143481" style="float: left" /><label for="answer469143481" style="float: left; width: 150px"
-                >split-dyed, but a fun color instead of blonde</label
-              >
-              <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="2" id="answer469143482" style="float: left" /><label for="answer469143482" style="float: left; width: 150px"
-                >split-dyed, but black instead of brown</label
-              >
-              <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="3" id="answer469143483" style="float: left" /><label for="answer469143483" style="float: left; width: 150px"
-                >split-dyed, but add brown horizontal stripes (racoon tails) to blonde side</label
-              >
+              <div style="padding: 2px 0px 4px 2px"><strong>what's the best revenge?</strong></div>
+              <input type="radio" name="answer" value="1" id="answer196896551" style="float: left" /><label for="answer196896551" style="float: left; width: 150px">violence</label>
               <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="4" id="answer469143484" style="float: left" /><label for="answer469143484" style="float: left; width: 150px"
-                >brown fading into blonde ends</label
-              >
-              <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="5" id="answer469143485" style="float: left" /><label for="answer469143485" style="float: left; width: 150px">brown with blonde highlights</label>
-              <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="6" id="answer469143486" style="float: left" /><label for="answer469143486" style="float: left; width: 150px">brown with blonde streaks</label>
-              <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="7" id="answer469143487" style="float: left" /><label for="answer469143487" style="float: left; width: 150px"
-                >brown with blonde front pieces</label
-              >
+              <input type="radio" name="answer" value="2" id="answer196896552" style="float: left" /><label for="answer196896552" style="float: left; width: 150px">getting hotter</label>
               <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="8" id="answer469143488" style="float: left" /><label for="answer469143488" style="float: left; width: 150px">brown with blonde underneath</label>
+              <input type="radio" name="answer" value="3" id="answer196896553" style="float: left" /><label for="answer196896553" style="float: left; width: 150px">making money</label>
               <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="9" id="answer469143489" style="float: left" /><label for="answer469143489" style="float: left; width: 150px">blonde with brown underneath</label>
+              <input type="radio" name="answer" value="4" id="answer196896554" style="float: left" /><label for="answer196896554" style="float: left; width: 150px">calling them out</label>
               <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="10" id="answer4691434810" style="float: left" /><label for="answer4691434810" style="float: left; width: 150px">all blonde</label>
+              <input type="radio" name="answer" value="5" id="answer196896555" style="float: left" /><label for="answer196896555" style="float: left; width: 150px">unsolicited forgiveness</label>
               <div style="clear: both; height: 2px"></div>
-              <input type="radio" name="answer" value="11" id="answer4691434811" style="float: left" /><label for="answer4691434811" style="float: left; width: 150px">all brown</label>
+              <input type="radio" name="answer" value="6" id="answer196896556" style="float: left" /><label for="answer196896556" style="float: left; width: 150px">not caring about revenge</label>
               <div style="clear: both; height: 2px"></div>
               <div align="center" style="padding: 3px"><input type="submit" value=" Vote " />&nbsp;<input type="submit" name="view" value=" View " /></div>
               <div align="right" style="font-size: 10px">pollcode.com <a href="https://pollcode.com/">free polls</a></div>

content/about/about-the-site.html

@@ -194,30 +194,33 @@ <h2>To Do List</h2>
 <section>
   <h2>Milestones</h2>
   <ul>
+    <li>2026-01-03: <strong>2200</strong> followers reached</li>
+    <li>2025-12-20: <strong>2100</strong> followers reached</li>
+    <li>2025-12-19: 600 guestbook messages</li>
     <li>2025-12-06: <strong>2000</strong> followers reached! 🎉</li>
     <li>2025-11-19: <strong>1900</strong> followers reached</li>
-    <li>2025-11-04: 500 guestbook messages reached</li>
+    <li>2025-11-04: 500 guestbook messages</li>
     <li>2025-10-31: <strong>1800</strong> followers reached</li>
     <li>2025-10-13: <strong>1700</strong> followers reached</li>
     <li>2025-09-25: <strong>1600</strong> followers reached</li>
     <li>2025-09-13: <strong>1500</strong> followers reached</li>
-    <li>2025-08-26: 400 guestbook messages reached</li>
+    <li>2025-08-26: 400 guestbook messages</li>
     <li>2025-08-26: <strong>1400</strong> followers reached</li>
     <li>2025-08-15: <strong>1300</strong> followers reached</li>
     <li>2025-07-29: <strong>1200</strong> followers reached</li>
     <li>2025-07-21: 3000 claps</li>
     <li>2025-07-15: <strong>1100</strong> followers reached</li>
-    <li>2025-07-11: 300 guestbook messages reached</li>
+    <li>2025-07-11: 300 guestbook messages</li>
     <li>2025-06-24: <strong>1000</strong> followers reached! 🎉</li>
     <li>2025-05-22: <strong>900</strong> followers</li>
     <li>2025-04-23: <strong>800</strong> followers, 2000 claps</li>
-    <li>2025-04-08: 200 guestbook messages reached</li>
+    <li>2025-04-08: 200 guestbook messages</li>
     <li>2025-03-16: <strong>700</strong> followers</li>
     <li>2025-03-04: 1500 claps</li>
     <li>2025-02-25: <strong>600</strong> followers</li>
     <li>2025-02-08: <strong>500</strong> followers</li>
     <li>2025-01-21: <strong>400</strong> followers, 1000 claps</li>
-    <li>2025-01-17: 100 guestbook messages reached</li>
+    <li>2025-01-17: 100 guestbook messages</li>
     <li>2024-12-19: <strong>300</strong> followers</li>
     <li>2024-10-03: <strong>200</strong> followers</li>
     <li>2024-??-?? : <strong>100</strong> followers</li>

content/about/credits.html

@@ -4,9 +4,6 @@
 nesting: "../"
 ---
 
-<!-- Font Awesome -->
-<script src="https://kit.fontawesome.com/0328336a9e.js" crossorigin="anonymous"></script>
-
 <section>
   <h1>Credits</h1>
   <p>

content/coding/layout-generator.html

@@ -19,7 +19,7 @@ <h1>Layout Generator</h1>
   </p>
 
   <center class="layout-generator-go" style="font-size: 2.5em">
-    <img alt="" aria-hidden="true" src="../assets/img/inline/stars.gif" /> <a href="/layout-generator" aria-label="Go to layout generator">Start generating!</a>
+    <img alt="" aria-hidden="true" src="../assets/img/inline/stars.gif" /> <a href="https://ko-fi.com/s/3bd2992191" target="_blank" title="Go to layout generator">Start generating!</a>
     <img alt="" aria-hidden="true" src="../assets/img/inline/stars.gif" />
   </center>
   <p><strong>Features:</strong></p>

content/coding/widgets.html

@@ -129,6 +129,7 @@ <h2>Last.Fm Currently Listening / Last Song</h2>
     <li><code>underline</code>: set to 0 to remove the link underline</li>
     <li><code>center</code>: set to 1 to center</li>
     <li><code>marquee</code>: set to 1 to make it move horizontally</li>
+    <li><code>showAlbumCover</code>: set to any number to output the albumCover as an image of that size (px)</li>
   </ul>
 
   <div class="widget-previews">
@@ -160,11 +161,11 @@ <h2>Last.Fm Currently Listening / Last Song</h2>
       <strong>Example 3</strong>
       <p>Code:</p>
       <textarea class="code-textarea" name="" id="" rows="10" aria-label="Code for Example 3">
-<iframe src="https://petrapixel.neocities.org/widgets/lastfm?center=1&font-family=Garamond&font-size=13px&color=#3b3b3b&username=Petra1999&swapPositions=1&delimiter=:&underline=0" frameborder="0" title="Last.Fm Status"></iframe></textarea
+<iframe src="https://petrapixel.neocities.org/widgets/lastfm?center=1&font-family=Garamond&font-size=13px&color=#3b3b3b&username=Petra1999&swapPositions=1&delimiter=:&underline=0&showAlbumCover=50" frameborder="0" title="Last.Fm Status"></iframe></textarea
       >
       <p>Preview:</p>
       <iframe
-        src="/widgets/lastfm?center=1&marquee=0&font-family=Garamond&font-size=13px&color=#3b3b3b&username=Petra1999&swapPositions=1&delimiter=:&underline=0"
+        src="/widgets/lastfm?center=1&marquee=0&font-family=Garamond&font-size=13px&color=#3b3b3b&username=Petra1999&swapPositions=1&delimiter=:&underline=0&showAlbumCover=50"
         frameborder="0"
         title="Last.Fm Status"></iframe>
     </div>

content/index.html

@@ -143,8 +143,12 @@ <h2>The Site's Neighborhood <img aria-hidden="true" alt="" src="assets/img/inlin
           <a href="https://oodlecat.neocities.org/"><img src="assets/img/links/cliques/nds.png" title="the touch generation :: DS & DSi" /></a>
           {{ ' ' }}<a href="http://deathbusters.org/kirby" target="_blank"><img src="assets/img/links/cliques/kirby.png" title="Petra's Dreamland!" alt="" /></a>
           <br />
+          <a href="https://angel.valentinely.cc/"
+            ><img src="assets/img/links/cliques/777.png" title="angel numbers: 777 (luck)" style="vertical-align: top; padding-top: 10px; padding-right: 5px"
+          /></a>
           <a href="https://lovesick.cafe/grrrl" aria-label="Made by a girl"><img src="assets/img/links/cliques/madebyagirl.png" alt="Made by a girl" title="Made by a girl" /></a>
           <br />
+
           <a href="https://cliques.shadow-lord.com/cats/buttons.php" target="_blank"><img src="assets/img/links/cliques/cat.png" title="I have a cat soul" alt="" /></a>
           <a href="https://cliques.shadow-lord.com/hogwarts/codes.php" title="This Slytherin says 'Trans rights!'"
             ><img src="assets/img/links/cliques/slytherin.png" alt="" style="image-rendering: pixelated; width: 50px; vertical-align: top"

content/webring.html

@@ -117,6 +117,12 @@
       buttonUrl: "https://birdrobot.party/img/button.png",
       description: "layouts, graphics",
     },
+    {
+      url: "https://wsm.neocities.org/",
+      title: "Emily's Garden",
+      buttonUrl: "https://wsm.neocities.org/WebGarden/buttons/Mylogo.png",
+      description: "layout builder, tools, bookmarks",
+    },
   ];
 </script>
 <script src="{{ nesting }}assets/js/webringu.js{{ nocache }}"></script>
@@ -190,7 +196,7 @@ <h3>Rules</h3>
 
 <section>
   <p>
-    Part of RingLink:
+    <b>NOT YET </b>Part of RingLink:
     <a href="https://evehibi.nekoweb.org/ringlink/info.html" target="_blank">
       <img src="https://evehibi.nekoweb.org/ringlink/button.gif" alt="ringlink - advertise your webring!" />
     </a>

content/widgets/widgets.js

@@ -16,6 +16,7 @@ const knownParams = [
   "ignorePollcodeStyling",
   "viewButtonAsLink",
   "spacing",
+  "showAlbumCover",
 ];
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -224,8 +225,8 @@ function initLastFm(params) {
     if (params.get("swapPositions") == "1") swapPositions = true;
   }
 
-  let url = "https://lastfm-last-played.biancarosa.com.br/" + username + "/latest-song";
-  let song = document.querySelector("#song");
+  const url = "https://lastfm-last-played.biancarosa.com.br/" + username + "/latest-song";
+  const song = document.querySelector("#song");
   fetch(url)
     .then(function (response) {
       return response.json();
@@ -235,16 +236,27 @@ function initLastFm(params) {
 
       let artist = json["track"]["artist"]["#text"];
       let songTitle = json["track"]["name"];
+      let albumCoverUrl = json["track"]["image"] ? json["track"]["image"][2]["#text"] : null; // 0=small, 1=medium, 2=large, 3=extralarge
 
       if (username == "Petra1999") {
+        // Preview data
         artist = "Taylor Swift";
         songTitle = "Love Story";
+        albumCoverUrl = "https://lastfm.freetls.fastly.net/i/u/300x300/acdd1489ea27beb10b07c58ffdb99a83.jpg";
+      }
+
+      let albumCoverHTML = "";
+      if (params.get("showAlbumCover") && albumCoverUrl) {
+        if (params.get("showAlbumCover") != "0") {
+          const size = params.get("showAlbumCover") < 10 ? 10 : params.get("showAlbumCover");
+          albumCoverHTML = `<img src="${albumCoverUrl}" height="${size}" width="${size}" />`;
+        }
       }
 
       if (swapPositions) {
-        song.innerHTML = `<span class="artist">${artist}</span>${delimiter}<span class="name">${songTitle}</span>`;
+        song.innerHTML = `<span class="artist">${artist}</span>${delimiter}<span class="name">${songTitle}</span>` + albumCoverHTML;
       } else {
-        song.innerHTML = `<span span class="name" > ${songTitle}</span>${delimiter}<span class="artist">${artist}</span>`;
+        song.innerHTML = `<span class="name" > ${songTitle}</span>${delimiter}<span class="artist">${artist}</span>` + albumCoverHTML;
       }
     });
 }