hydra-nodegl 2.1.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "hydra-nodegl",
+  "version": "2.1.0",
+  "description": "It'll be convenience for hydra used by Node.js.",
+  "main": "./index.cjs",
+  "bin": {
+    "nodegl": "./index.cjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Uchida16104/NodeGL.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Uchida16104/NodeGL/issues"
+  },
+  "homepage": "https://uchida16104.github.io/NodeGL",
+  "author": "Hirotoshi Uchida",
+  "license": "MIT",
+  "type": "commonjs",
+  "scripts": {
+    "start": "node ./index.cjs && rm -f package.json && refresh",
+    "test": "echo 'Running NodeGL...'"
+  },
+  "keywords": [
+    "extension"
+  ]
+}

package/script.cjs

@@ -0,0 +1,93 @@
+let hydra, hydraCanvas;
+hydraCanvas = document.createElement("canvas");
+hydraCanvas.width = 512;
+hydraCanvas.height = 512;
+hydraCanvas.id = "hydraCanvas";
+
+hydra = new Hydra({
+  canvas: hydraCanvas,
+  detectAudio: false,
+  enableStreamCapture: false,
+  width: 512,
+  height: 512,
+});
+
+const codeblocks = document.getElementsByClassName("codeblock");
+
+for (const cb of codeblocks) {
+  const cd = cb.querySelector("div");
+  cd.style.width = "512px";
+  cd.style.height = "512px";
+  cd.style.left = "50%";
+  cd.style.position = "relative";
+  cd.style.transform = "translate(-50%, 0%)";
+
+  var observer = new IntersectionObserver(function (entries) {
+    if (entries[0].isIntersecting === true) {
+      hush();
+      solid(0,0,0,0).out(o0);
+      solid(0,0,0,0).out(o1);
+      solid(0,0,0,0).out(o2);
+      solid(0,0,0,0).out(o3);
+      render(o0);
+      setTimeout(() => {
+        eval(cb.querySelector("code").textContent);
+      }, 60);
+      cd.appendChild(hydraCanvas);
+    }
+  }, { threshold: [0.7] });
+
+  observer.observe(cb);
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  const readyEls = Array.from(document.getElementsByClassName('ready'));
+  const codeEls = Array.from(document.getElementsByClassName('codeblock'));
+  const allEls = readyEls.concat(codeEls);
+
+  allEls.forEach(el => {
+    let codeText;
+    const codeChild = el.querySelector('code');
+    if (codeChild) {
+      codeText = codeChild.textContent;
+    } else {
+      codeText = el.textContent;
+    }
+
+    const snippet = document.createElement('div');
+    snippet.className = 'qiita-snippet';
+
+    const pre = document.createElement('pre');
+    const codeNode = document.createElement('code');
+    codeNode.textContent = codeText.trim();
+    pre.appendChild(codeNode);
+    snippet.appendChild(pre);
+
+    const btn = document.createElement('button');
+    btn.className = 'copy-button';
+    btn.textContent = 'Copy';
+    btn.addEventListener('click', () => {
+      navigator.clipboard.writeText(codeNode.textContent)
+        .then(() => {
+          btn.textContent = 'Copied';
+          setTimeout(() => btn.textContent = 'Copy', 2000);
+        })
+        .catch(err => console.error('Copy failed', err));
+    });
+    snippet.appendChild(btn);
+
+    if (codeChild) {
+      el.replaceChild(snippet, codeChild);
+    } else {
+      el.innerHTML = '';
+      el.appendChild(snippet);
+    }
+  });
+
+  const accordionHeader = document.querySelector('.accordion-header');
+  const accordionContent = document.querySelector('.accordion-content');
+  accordionHeader.addEventListener('click', function() {
+    const isVisible = accordionContent.style.display === 'block';
+    accordionContent.style.display = isVisible ? 'none' : 'block';
+  });
+});

package/style.css

@@ -0,0 +1,82 @@
+* {
+  scroll-behavior: smooth;
+  background: black;
+  color: cyan;
+}
+
+body, code {
+  font-family: 'Monaspace Krypton', monospace;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 200px;
+  background-color: #f1f1f1;
+  padding: 10px;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+  font-size: 10px;
+  color: #0b0b0b;
+  overflow-y: auto;
+}
+
+.sidebar:hover {
+  background-color: #0b0b0b;
+  font-size: 20px;
+  color: #f4f4f4;
+}
+
+.accordion {
+  width: 100%;
+}
+
+.accordion-header {
+  background-color: #007bff;
+  color: white;
+  padding: 15px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.accordion-content {
+  display: none;
+  padding: 5px;
+  background-color: white;
+}
+
+.accordion-content ul {
+  display: block;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.accordion-content li {
+  margin-bottom: 10px;
+}
+
+.accordion-content ul > li:hover {
+  background-color: #0b0b0b;
+  font-size: 20px;
+  color: #f4f4f4;
+}
+
+.accordion-content a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.accordion-content a:hover {
+  text-decoration: underline;
+}
+
+.content {
+  margin-left: 220px;
+  padding: 20px;
+}