backup everything

quantuminformation · Jan 13, 2024 · fe17438 · fe17438
1 parent bd48e06
commit fe17438
Show file tree

Hide file tree

Showing 29 changed files with 266 additions and 80 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,4 @@
 **/node_modules
 *.d.ts
-backend/drizzle
+backends/drizzle
 examples
diff --git a/backend/.eslintrc.cjs → backends/.eslintrc.cjs b/backend/.eslintrc.cjs → backends/.eslintrc.cjs
diff --git a/backend/README.md → backends/README.md b/backend/README.md → backends/README.md
diff --git a/backends/WebSocketsVideoBroadcast/package.json b/backends/WebSocketsVideoBroadcast/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "websocketsvideobroadcast",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.2",
+    "socket.io": "^4.7.4"
+  }
+}
diff --git a/backends/WebSocketsVideoBroadcast/public/broadcast.html b/backends/WebSocketsVideoBroadcast/public/broadcast.html
diff --git a/backends/WebSocketsVideoBroadcast/public/styles.css b/backends/WebSocketsVideoBroadcast/public/styles.css
diff --git a/backends/WebSocketsVideoBroadcast/public/watch.js b/backends/WebSocketsVideoBroadcast/public/watch.js
diff --git a/backends/WebSocketsVideoBroadcast/server.js b/backends/WebSocketsVideoBroadcast/server.js
@@ -0,0 +1,28 @@
+const express = require('express');
+const app = express();
+
+const port = 4000;
+
+const http = require('http');
+const server = http.createServer(app);
+
+const io = require('socket.io')(server);
+app.use(express.static(__dirname + '/public'));
+
+io.sockets.on('error', (e) => console.log(e));
+server.listen(port, () => console.log(`Server is running on port ${port}`));
+
+let broadcaster;
+
+io.sockets.on('connection', (socket) => {
+  socket.on('broadcaster', () => {
+    broadcaster = socket.id;
+    socket.broadcast.emit('broadcaster');
+  });
+  socket.on('watcher', () => {
+    socket.to(broadcaster).emit('watcher', socket.id);
+  });
+  socket.on('disconnect', () => {
+    socket.to(broadcaster).emit('disconnectPeer', socket.id);
+  });
+});
diff --git a/backend/bun.lockb → backends/bun.lockb b/backend/bun.lockb → backends/bun.lockb
diff --git a/backend/db/index.ts → backends/db/index.ts b/backend/db/index.ts → backends/db/index.ts
diff --git a/backend/db/migrate.ts → backends/db/migrate.ts b/backend/db/migrate.ts → backends/db/migrate.ts
diff --git a/backend/db/schema.ts → backends/db/schema.ts b/backend/db/schema.ts → backends/db/schema.ts
diff --git a/backend/db/seed.ts → backends/db/seed.ts b/backend/db/seed.ts → backends/db/seed.ts
diff --git a/backend/drizzle.config.ts → backends/drizzle.config.ts b/backend/drizzle.config.ts → backends/drizzle.config.ts
diff --git a/backend/drizzle/0000_careful_jubilee.sql → backends/drizzle/0000_careful_jubilee.sql b/backend/drizzle/0000_careful_jubilee.sql → backends/drizzle/0000_careful_jubilee.sql
diff --git a/backend/drizzle/meta/0000_snapshot.json → backends/drizzle/meta/0000_snapshot.json b/backend/drizzle/meta/0000_snapshot.json → backends/drizzle/meta/0000_snapshot.json
diff --git a/backend/drizzle/meta/_journal.json → backends/drizzle/meta/_journal.json b/backend/drizzle/meta/_journal.json → backends/drizzle/meta/_journal.json
diff --git a/backend/package.json → backends/package.json b/backend/package.json → backends/package.json
@@ -19,7 +19,8 @@
     "@trpc/client": "^10.37.1",
     "@trpc/server": "^10.37.1",
     "bcryptjs": "^2.4.3",
-    "drizzle-orm": "^0.28.6"
+    "drizzle-orm": "^0.28.6",
+    "nf": "^0.0.3"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.3",

diff --git a/backend/server.ts → backends/server.ts b/backend/server.ts → backends/server.ts
diff --git a/backends/sqlite.db b/backends/sqlite.db
diff --git a/backend/tsconfig.json → backends/tsconfig.json b/backend/tsconfig.json → backends/tsconfig.json
diff --git a/backends/webrtc/signalling-server.ts b/backends/webrtc/signalling-server.ts
diff --git a/css/button-badge.css b/css/button-badge.css
@@ -29,7 +29,7 @@ button,
     color: var(--default-text);
     border: 1px solid var(--default-text);
     &:hover {
-      background-color: var(--secondary-color);
+      background-color: var(--minor-text);
     }
   }
   &.destructive {

diff --git a/css/common.css b/css/common.css
@@ -29,6 +29,14 @@ body {
     transform: translateX(0);
   }
 }
+@keyframes slideInFromTop {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
 [data-component='router'] {
   flex-grow: 1;
   flex-basis: 200px;

diff --git a/css/dark.css b/css/dark.css
@@ -7,6 +7,7 @@
   --form-control-bg: #333;
 
   --bg-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));
+  --bg-outline-hover: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%));
   --primary-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 70%));
   --primary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 80%));
 

diff --git a/index.html b/index.html
@@ -22,11 +22,14 @@
     <script src="./js/componentLoader.js" defer type="module"></script>
   </head>
   <body class="flex flex-col">
-    <a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank" class="-z-10">
-      <img src="img/strip-fork-me-on-github.png" class="absolute" style="top: 0; right: 0; height: 6em" />
+    <a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank" >
+      <img src="img/strip-fork-me-on-github.png" class="absolute" style="bottom: 0; left: 0; height: 6em" />
     </a>
     <div class="flex">
       <nav data-component="nav" data-header-bar="true" data-burger-px="600"></nav>
+<!--
+      <nav data-component="nav" ></nav>
+-->
       <main data-component="router" data-use-hash class="p-md">
         <!--components in /pages that will be fetched by router when user clicks on a data-nav -->
       </main>

diff --git a/js/components/nav.js b/js/components/nav.js
@@ -18,16 +18,19 @@ export default (hostComponent) => {
       throw new Error("you do not need burgerPx when headerBar isn't true");
     }
 
-    if (headerBar === 'true') {
-      hostComponent.style.display = 'none';
-    }
-
     // CSS styles for the navigation component
 
     // language=CSS
     const navStyles = `
       nav {
-  animation: 0.5s ease-in-out 0s 1 slideInFromLeft;
+          
+          
+  ${
+    burgerPx
+      ? 'animation: 0.5s ease-in-out 0s 1 slideInFromTop;'
+      : 'animation: 0.5s ease-in-out 0s 1 slideInFromLeft;'
+  }
+          
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -36,7 +39,20 @@ export default (hostComponent) => {
   min-width: 140px;
   flex-wrap: wrap;
 
+${
+  !headerBar
+    ? `
 
+          @media (max-width: 600px) {
+    & .text {
+      display: none;
+    }
+    min-width: auto;
+  }
+        `
+    : ''
+}
+        
   & button {
     width: 100%;
   }
@@ -52,97 +68,108 @@ export default (hostComponent) => {
       burgerPx
         ? `
         @media (max-width: ${burgerPx}px) {
+        
+        display: none; 
+        
     align-items: center;
 
         flex-direction: column;
         position: absolute;
         background-color: var(--nav-background-color);
         
-          top: 0;
-          right: 0;
+          top: 40px;
+          left: 0;
 /*
           border: 1px solid var(--minor-text);
 */
           border-radius: 1rem;
+          &.burger-open {
+            display: flex;
+          }
         `
-        : `
-          @media (max-width: 600px) {
-    & .text {
-      display: none;
+        : ``
     }
-    min-width: auto;
   }
-        `
-    }
-    
-    
-    
-    
-    
-  }
-          
-         
-        
-          
 }`;
-    // Update the count display and button markup together
-    hostComponent.innerHTML = `
-        <style>${navStyles}</style>
-        <a data-nav href="/" title="Home">
-          <span class="icon">&#x1F3E0;</span>
-          <!-- Unicode for a house, similar to a home icon -->
-          <span class="text">Home</span>
-        </a>
-        <a data-nav href="/button-badge" title="Button + Badges Design System">
-          <span class="icon">&#x1F518;</span>
-          <!-- Unicode for a pencil, similar to an edit or form icon -->
-          <span class="text">Button + Badges</span>
-        </a>
-        <a data-nav href="/form" title="Form Design System">
-          <span class="icon">&#x270F;</span>
-          <!-- Unicode for a pencil, similar to an edit or form icon -->
-          <span class="text">Form</span>
-        </a>
-        <a data-nav href="/maps" title="Map example">
-          <span class="icon">&#x1F5FA;</span>
-          <!-- Unicode for a pencil, similar to an edit or form icon -->
-          <span class="text">Maps</span>
-        </a>
-
-        <a data-nav href="/users" title="DB retrival example (requires the deno backend to run - see readme (Optional Backend))">
-          <span class="icon">👥</span>
-          <span class="text">DB users</span>
-        </a>
-        <a data-nav href="/calendar" title="Calendar Example">
-          <span class="icon"> 📆 </span>
-          <span class="text"> Calendar</span>
-        </a>
-        <a data-nav href="/multiple-instances" title="Multiple instances of vanilla.js comoonets in action with shared state">
-          <span class="icon">🧬</span>
-          <span class="text">Multiple instances</span>
-        </a>
-        <a data-nav href="/cookies" title="Elementary cookie popup permissions thing">
-          <span class="icon">🍪</span>
-          <span class="text">Cookie popup</span>
-        </a>`;
 
-    //add classes button secondary squarify to all nav links
-    hostComponent.querySelectorAll('a').forEach((navLink) => {
-      navLink.classList.add('button', 'secondary', 'squarify');
-    });
     if (hostComponent.dataset.headerBar === 'true') {
       hostComponent.classList.add('header-bar-mode');
-      // todo find a better way to do this
       hostComponent.parentElement.style.flexDirection = 'column';
+    }
 
-      //remove the icons to save horizontal space only if the flex container starts to run out of space
+    // Update the count display and button markup together
+    hostComponent.innerHTML = /* html */ `
+        <style>
+        ${navStyles}
+      </style>
+      <a data-nav href="/" title="Home">
+        <span class="icon">&#x1F3E0;</span>
+        <!-- Unicode for a house, similar to a home icon -->
+        <span class="text">Home</span>
+      </a>
+      <a data-nav href="/button-badge" title="Button + Badges Design System">
+        <span class="icon">&#x1F518;</span>
+        <!-- Unicode for a pencil, similar to an edit or form icon -->
+        <span class="text">Button + Badges</span>
+      </a>
+      <a data-nav href="/form" title="Form Design System">
+        <span class="icon">&#x270F;</span>
+        <!-- Unicode for a pencil, similar to an edit or form icon -->
+        <span class="text">Form</span>
+      </a>
+      <a data-nav href="/maps" title="Map example">
+        <span class="icon">&#x1F5FA;</span>
+        <!-- Unicode for a pencil, similar to an edit or form icon -->
+        <span class="text">Maps</span>
+      </a>
 
-      hostComponent.querySelectorAll('.icon').forEach((icon) => {
-        //  icon.style.display = 'none';
+      <a
+        data-nav
+        href="/users"
+        title="DB retrival example (requires the deno backend to run - see readme (Optional Backend))">
+        <span class="icon">👥</span>
+        <span class="text">DB users</span>
+      </a>
+      <a data-nav href="/calendar" title="Calendar Example">
+        <span class="icon"> 📆 </span>
+        <span class="text"> Calendar</span>
+      </a>
+      <a
+        data-nav
+        href="/multiple-instances"
+        title="Multiple instances of vanilla.js comoonets in action with shared state">
+        <span class="icon">🧬</span>
+        <span class="text">Multiple instances</span>
+      </a>
+      <a data-nav href="/cookies" title="Elementary cookie popup permissions thing">
+        <span class="icon">🍪</span>
+        <span class="text">Cookie popup</span>
+      </a>
+      <a data-nav href="/webrtc-communicator" title="Demo of WebRTC locally with local signalling server">
+        <span class="icon">🪄</span>
+        <span class="text">WebRTC</span>
+      </a>`;
+    hostComponent.querySelectorAll('a').forEach((navLink) => {
+      navLink.classList.add('button', 'secondary', 'squarify');
+    });
+    //add burger button to the parent if we are in header bar mode, use inline svg for icon
+    if (headerBar === 'true' && burgerPx) {
+      hostComponent.parentElement.insertAdjacentHTML(
+        'afterbegin',
+        `
+        <button class="burger-button squarify  outline" >
+        <svg class="icon" viewBox="0 0 100 80" width="20" height="20" fill="currentColor" >
+          <rect width="100" height="20"></rect>
+          <rect y="30" width="100" height="20"></rect>
+          <rect y="60" width="100" height="20"></rect>
+        </svg>
+        </button>
+        `,
+      );
+      hostComponent.parentElement.querySelector('.burger-button').addEventListener('click', () => {
+        hostComponent.classList.toggle('burger-open');
       });
     }
-    // the only thing not in css to make visible after we change the parent
-    hostComponent.style.display = 'flex';
   };
 
   // Display the initial count