squash and nuke dev

src/components/marquee/MarqueeContent.astro

@@ -0,0 +1,66 @@
+---
+const videos = [
+  {
+    author: '<a href="https://github.com/soramanew">soramane</a>',
+    source: "https://github.com/caelestia-dots/shell",
+    path: "/assets/showcase/soramane.mp4",
+    installable: true,
+  },
+  {
+    author: '<a href="https://github.com/end-4">end_4</a>',
+    source: "https://github.com/end-4/dots-hyprland",
+    path: "/assets/showcase/end4.mp4",
+    installable: true,
+  },
+  {
+    author: '<a href="https://outfoxxed.me">outfoxxed</a>',
+    source:
+      "https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
+    path: "/assets/showcase/outfoxxed.mp4",
+  },
+  {
+    author:
+      '<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
+    path: "/assets/showcase/pfaj-bdeblase.mp4",
+  },
+  {
+    author: '<a href="https://github.com/flickowoa">flicko</a>',
+    source: "https://github.com/flickowoa/zephyr",
+    path: "/assets/showcase/flicko.mp4",
+  },
+  {
+    author: '<a href="https://vaxry.net">vaxry</a>',
+    path: "/assets/showcase/vaxry.mp4",
+  },
+];
+---
+
+<div
+  id="marquee-content"
+  class="marquee-content"
+  data-scroll="0"
+  data-media-index="0"
+>
+  {videos.map(({ author, source, installable, path }, index) => {
+    return (
+      <div class=`marquee-item`>
+        <video
+          data-media-index={index}
+          data-media-author={author}
+          id="showcase-video"
+          class="marquee-item-spacing marquee-item-content"
+          muted
+          controls
+          playsinline
+          preload="metadata"
+        >
+        <source src={path} type="video/mp4"/>
+      </video>
+      <p>
+        Configuration by <Fragment set:html={author}/>
+        {source && !installable && <>(<a href={source}>source code</a>)</>}
+        {source && installable && <>(<a href={source}>install</a>)</>}
+      </p>
+      </div>
+      )})}
+</div>