test ci staging env pr

2024-BLINKnd-ears/BLINKnd-ears-v1.md

@@ -1,130 +0,0 @@
-# BLINKnd Ears - Version 1
-
-![01-nd-gpn22.jpg](.attachments.20628352/01-nd-gpn22.jpg)
-
-Some people started distributing 3d printed cat ears on a large scale a while ago. At the last congress, people started adding LEDs to them. But so far all variants I've seen only had a static color. Well, I wanted something blinking and useable for dancing and it should react to the beat.
-
-So of course I built just that.
-
-![02-ears-controller-on-stand.jpg](.attachments.20628352/02-ears-controller-on-stand.jpg)
-
-I wore them for the first time at gpn22 and tested them during the party there. Worked well, looked great and quite some people asked me how to built them. So here are instructions on how to build your own.
-
-![06-case-closed.jpg](.attachments.20628352/06-case-closed.jpg)
-
-I opted to use prefabricated modules instead of creating my own PCB to get faster results and lower the entry barrier for clones. Using a custom PCB would probably result in a smaller size.
-
-## How Does it Work?
-
-I carry an ESP32 running the [WLED MoonModules Project](https://mm.kno.wled.ge/) fork of [WLED](https://kno.wled.ge/). Connected to it is an I2S module. The sound input is used to run a [FFT](https://en.wikipedia.org/wiki/Fast_Fourier_transform) and beat detection on the ESP. Those are then used in light effects. As lights I use a ws2812 stripe glued to 3d printed cat ears. A cable is running from the ears behind my back under my shirt to the bum bag. All together is powered via an USB power bank.
-
-## Partlist
-
-- ESP32\[-S3\] (I used an [ESP32-S3 Mini](https://www.waveshare.com/esp32-s3-zero.htm). There are cheaper alternatives on Aliexpress. Do not use the single core variantes. Size matters)
-- I2S microphone (I used an INMP441 module)
-- A Case (You could 3d print this, I used some [cheap junction box from obi](https://www.obi.de/p/1820240/abzweigdose-ip54-75-mm-x-37-mm-x-40-mm-10-stueck))
-- USBC socket (for example [this one](https://www.amazon.de/dp/B0CPLS1X29))
-- WS2812 COB LED Strip (200 LEDs /m in my case, resulting in 60 LEDs on a 31cm stripe)
-- Capacitors. \~1000uf in total. Used to stabilize the power supply.
-- USB Power bank
-- 3d printed cat ears (I used [this model provided by c3cat](https://wiki.hamburg.ccc.de/club:c3cat:start)). I'd recommend not to use PLA because of it's melting point. 
-- transparent glue
-- black paint
-- transparent plastic string
-- some cables
-- shrink tubing
-- connectors
-- small bolts and  nuts (I used m2)
-
-## Buildsteps
-
-### Electronics and Case
-
-![07-pcb-closeup.jpg](.attachments.20628352/07-pcb-closeup.jpg)
-
-Connect the Microphone to the ESP.  See [here](https://mm.kno.wled.ge/WLEDSR/Digital-Microphone-Hookup/) for the pinout. For my INMP441 I've used the following pins :
-
-```
-I2S SD: 3
-I2S WS: 2
-I2S SCK: 1
-I2S MCLK: N/A
-```
-
-But you can pick any supported microphone and are quite flexible in choosing those pins.
-
-The ws2812 data pin from the stripe on the ears is connected to `GPIO 4`. See [here](https://mm.kno.wled.ge/basics/getting-started/#quick-start-guide) on general info on howto connect those LEDs. I've picked a 100 Ohm resistor and skipped the level shifter.
-
-My board has another ws2812 LED on `GPIO 21` connected. I use this one as status LED. It's visible evenfrom outside the case.
-
-For power I've connected an USB C socket. It's secured with a cable tie. I picked this option over using the port on the devboard because the traces do not like the \~3A peak current I'd like to draw. It's recommended to add some random amount of capacitors as well. Considering I plan to support a 15W LED strob mode as it's probably not a bad idea. WLED recommends 1000uF.
-
-I've used m2 screws to connect board and case. To protect against stress I'd recommend to secure all external cables and sockets to the case and not only to the PCB.
-
-### Ears
-
-![03-ears-powered-off.jpg](.attachments.20628352/03-ears-powered-off.jpg)
-
-Get 3d printed cat ears. You should be able to find them in most hackspaces and chaos events. Or print your own with this [model from c3cat](https://wiki.hamburg.ccc.de/club:c3cat:start). I'd recommend HIPS or ABS as printing material since the LEDs get hot enought to bend PLA. Don't worry if you only have PLA ones, you just might have to heat and bend them back sometimes. I painted them black to keep moisture out permanently and have a smooth surface.
-
-You need a thin LED stripe for this build. I picked up a 4mm wide one from Aliexpress which came in a silicone tube. I'd recommend a high pixel density, like 200/m, for maximum blink. For the linked 3d model this results in the need for 31cm or 60 LEDs of 200 LEDs/m stripe. I'd recommend to power on the stripe, turn on 60 LEDs, mark them, turn the stripe off and then cut it to length.
-
-![04-ears-powered-on-side.jpg](.attachments.20628352/04-ears-powered-on-side.jpg)
-
-At areas of high stress (narrow bends) I've reinforced the stripe with transparent string and glue. This keeps the stripe and ears from seperating.
-
-![05-ears-reinforcement-closeup.jpg](.attachments.20628352/05-ears-reinforcement-closeup.jpg)
-
-On the lower half the string was painted black so it's not as visible.
-
-Use shrink tubing to fix the cable to the ears. You can substitute it for tape, but you have to build some kind of stress relive if you want your ears to last. Solder the cable to the backside of the stripe.
-
-**WARNING**: using the wrong polarity will result in a fried ESP. You should use a reverse secure connector unlike me. Ask me how I know...
-
-**WARNING 2**: I learned not all cables are  skin-friendly. Random ones from Aliexpress especially might not be... maybe add a silicone tube or use less shitty cables.
-
-## Software and Configuration
-
-See [here](https://mm.kno.wled.ge/basics/install-binary/) how to flash the wled fork. The web installer didn't work for me so I went a different way:
-
-- flash tasmota via the [web installer](https://tasmota.github.io/install/)
-- connect to the wifi and go to the tasmota web terminal -> console -> [SetOption78 on](https://tasmota.github.io/docs/Commands/#setoption78)
-- install wled via the tasmota ota update function
-
-It's probably easier to flash via CLI directly but I only had a phone with me at that moment. Yes we are in a future where you can flash a microcontroller via your phones browser.  I love it!
-
-Now you should be able to connect to the WLED AP via wifi and it's standard password ( `wled1234` ).
-
-Configure your GPIOs via the webinterface. To get nicer effects, configure segments for parts like the ears and sides separately. Setup presets for effects and colors.
-
-Most importantly: experiment! Find out what looks you like. Try out what effects to use to what kind of music. [Script your own effects](https://mm.kno.wled.ge/moonmodules/arti-fx/). The documentation of WLED is quite a good help with that.
-
-## Observed Problems and Ideas
-
-### PLA melts
-
-Yes realy. \~3A at 5V is generates enough heat to soften PLA. My next version is made using [HIPS](https://en.wikipedia.org/wiki/Graft_polymer#High_impact_polystyrene). ABS would work as well.
-
-### Connector reversing kills the ESP
-
-Use a different connector as I did
-
-### No USB power delivery support
-
-The USB C breakout I used doesn't support USB PD. Use a different module or USB A -> C cables.
-
-### Too much bass (lol)
-
-If it gets too loud the microphone clips out even on minimal gain settings. Either use a line in or add sound isolation. A different microphone could help as well. Or ignore the problem, it still blinks good enough.
-
-### More Documentation
-
-I took way too few pictures of the ears in action. I'd realy love to have more pictures of them and some other wearables I plan to build. Hopefully fixable on the next event.
-
-### Hardware Controlls and Buttons
-
-Looking at a phone screen is annoying. I'd love a button to cycle presets.
-
-### Sync
-
-WLED has the option to sync multiple devices via wifi... I've some plans.

3d-printables.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="assets/css/style.css" />
-    <link rel="me" href="https://chaos.social/@c3cat" />
-    <title>c3cat</title>
-
-    <style>
-      @layer per-site {
-        .resources-container {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          row-gap: 1rem;
-
-          &>li {
-            display: block;
-            &>a {
-              display: inline flex;
-              flex-direction: column;
-              align-items: center;
-              row-gap: 4px;
-              &>img {
-                aspect-ratio: 1/1;
-                width: 250px;
-              }
-            }
-          }
-        }
-      }
-    </style>
-  </head>
-  <body class="container">
-    <main>
-      <h1 class="title">3D Printables</h1>
-      <a href="./">
-        <picture>
-          <source srcset="assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp" media="(prefers-color-scheme: dark)"/>
-          <img src="assets/img/c3cat-c3sign-cccamp23-transparent.webp" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"/>
-        </picture>
-      </a>
-
-      <ul class="resources-container">
-        <li>
-          <a href="https://www.printables.com/de/model/35076-cat-ears" rel="external">
-            <img alt="A picture of a catear 3D model" src="assets/img/3d-printables/catears-printables.webp">
-            <span>The original catear model from <i>printables.com</i></span>
-          </a>
-        </li>
-      </ul>
-
-    </main>
-    <footer>
-      <p>
-        Don't feel pressured to wear cat ears &ndash; you're perfectly fine without them.<br>
-        And remember: Trans rights are human rights.
-      </p>
-      <p>
-        Find us in the fediverse at <a href="https://chaos.social/@c3cat">c3cat@chaos.social</a>.
-      </p>
-    </footer>
-  </body>
-</html>

Readme.md

@@ -1,5 +1,7 @@
 # c3cat Website
 
+CI TEST
+
 This repo contains a landing page for c3cat.
 
 ## Usage

assets/css/style.css

@@ -1,111 +1,62 @@
-@layer base, per-site;
+:root {
+  /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
+  --accent-color-light: #DC049B;
+  /* A modified version of accent-color-light, which works nicely as a link color
+   * and with the dark theme */
+  --accent-color-dark: #dc49b0;
+}
 
-@layer base {
-  :root {
-    /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
-    --accent-color-light: #DC049B;
-    /* A modified version of accent-color-light, which works nicely as a link color
-     * and with the dark theme */
-    --accent-color-dark: #dc49b0;
-  }
+body {
+  font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
 
-  body {
-    font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
+  text-align: left;
 
-    text-align: left;
-    line-height: 1.4;
+  /* Use dark grey instead of black to be lighter on the eyes. But also a grey
+   * which still works with the link color nicely. */
+  background-color: #ffffff;
+  color: #2B2B2B;
 
-    /* Use dark grey instead of black to be lighter on the eyes. But also a grey
-     * which still works with the link color nicely. */
-    --bg-color: #ffffff;
-    --fg-color: #2b2b2b;
-    --accent-color: var(--accent-color-light);
-    background-color: var(--bg-color);
-    color: var(--fg-color);
-
-    @media (prefers-color-scheme: dark) {
-      /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
-      /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
-      --bg-color: #1b1b1b;
-      --fg-color: #ebebeb;
-      --accent-color: var(--accent-color-dark);
-    }
-  }
-
-  .container {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 0 5px;
-  }
-
-  footer {
-    margin-top: 4rem;
-  }
-
-  img {
-    width: 100%;
-  }
-
-  a:link, a:visited {
-    color: var(--accent-color);
-    padding-inline: 0.1ch;
-    &:hover:not(:has(img)) {
-      background-color: var(--accent-color);
-      color: white;
-      text-decoration: none;
-    }
-  }
-
-  u {
-    text-decoration-color: var(--accent-color);
-  }
-
-  ul li::marker {
-    color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
-    font-size: larger;
-  }
-
-  .title {
-    text-align: center;
-  }
-
-  .hero-img {
-    max-width: 500px;
-    display: block;
-    margin: 0 auto;
-  }
-
-  p.bigger {
-    font-size: 1.2rem;
-  }
-
-  section {
-    margin-top: 3rem;
-  }
-
-  details {
-    border: 1px solid var(--accent-color);
-    border-radius: 8px;
-    background-color: color-mix(in hsl, var(--accent-color) 20%, var(--bg-color) 80%);
-
-    & > * {
-      padding: 0.5rem 1ch;
-    }
-
-    & > summary {
-      cursor: pointer;
-      user-select: none;
-    }
-
-    &[open] > summary {
-      border-bottom: 1px solid var(--accent-color);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  pre {
-    overflow-x: scroll;
+  @media (prefers-color-scheme: dark) {
+    /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
+    /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
+    background-color: #1b1b1b;
+    color: #ebebeb;
   }
 }
 
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0 5px;
+}
+
+footer {
+  margin-top: 4rem;
+}
+
+img {
+  width: 100%;
+}
+
+
+a:link, a:visited {
+  color: var(--accent-color-light);
+  @media (prefers-color-scheme: dark) {
+    color: var(--accent-color-dark);
+  }
+}
+
+
+.title {
+  text-align: center;
+}
+
+.hero-img {
+  max-width: 500px;
+  display: block;
+  margin: 0 auto;
+}
+
+p.bigger {
+  font-size: 1.2rem;
+}