Initial NextJS project creation with basic structure

author: Yuval Adam <_@yuv.al> 2024-09-21 13:15:44 +0200
committer: Yuval Adam <_@yuv.al> 2024-09-21 15:13:25 +0200
commit: 65e7041a3c88a5b2d1ae76e7023807537775cb1b (patch)
tree: c21fe6cc3f137e2f0c13c0c184f9f59581a6639a /old
parent: 6ed566ac4f30e1aa8b7a817c22912c50ee136f86 (diff)
3 files changed, 408 insertions, 0 deletions
diff --git a/old/src/index.html b/old/src/index.html
new file mode 100644
index 0000000..ae027a6
--- /dev/null
+++ b/old/src/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+
+    <title>CIDR.xyz</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="all">
+    <meta name="keywords" content="cidr, ip address, range, netmask, visualizer">
+    <meta name="description" content="Interactive IP address and CIDR range visualizer">
+    <meta name="author" content="Yuval Adam">
+
+    <link rel="canonical" href="https://cidr.xyz">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-31LHNP2G97"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+        gtag('config', 'G-31LHNP2G97');
+    </script>
+</head>
+
+<body>
+    <header>
+        <h1>CIDR.xyz<small>An interactive IP address and CIDR range visualizer</small></h1>
+        <p><a href="https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing">CIDR</a> is a notation for describing
+            blocks of IP addresses and is used heavily in various networking configurations. IP addresses contain 4
+            octets, each consisting of 8 bits giving values between 0 and 255. The decimal value that comes after the
+            slash is the number of bits consisting of the routing prefix. This in turn can be translated into a netmask,
+            and also designates how many available addresses are in the block.</p>
+    </header>
+    <section id="app"></section>
+    <footer>
+
+    </footer>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/old/src/index.js b/old/src/index.js
new file mode 100644
index 0000000..c7017aa
--- /dev/null
+++ b/old/src/index.js
@@ -0,0 +1,201 @@
+import './style.scss';
+
+import { Netmask } from 'netmask';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+class IPAddress extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      octets: [10, 88, 135, 144],
+      cidr: 28
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handlePaste = this.handlePaste.bind(this);
+    this.handleWheel = this.handleWheel.bind(this);
+  }
+
+  handleChange(event) {
+    var octets = this.state.octets;
+    var val = +event.target.value.replace(/[^0-9]/g, '');
+    var octet = event.target.attributes['data-octet'].value;
+    if (octet == 'cidr') {
+      if (val <= 32) {
+        this.setState({
+          cidr: val
+        });
+      }
+    } else {
+      if (val <= 255) {
+        octets[+octet] = val;
+        this.setState({
+          octets: octets
+        });
+      }
+    }
+  }
+
+  handleKeyDown(event) {
+    var lowerOctetValue = 0;
+    var higherOctetValue = event.target.dataset.octet === 'cidr' ? 32 : 255;
+    if (event.key === 'ArrowDown' && event.target.value > lowerOctetValue) {
+      event.target.value = +event.target.value - 1;
+      this.handleChange(event);
+    }
+    if (event.key === 'ArrowUp' && event.target.value < higherOctetValue) {
+      event.target.value = +event.target.value + 1;
+      this.handleChange(event);
+    }
+    if (event.key === '.') {
+      event.preventDefault()
+      var octet_input = event.target.parentNode.nextSibling.firstChild
+      if (octet_input instanceof HTMLInputElement) {
+        octet_input.select()
+        octet_input.focus()
+      }
+    }
+    if (event.key === '/') {
+      event.preventDefault()
+      var mask_input = event.target.parentNode.nextSibling
+      if (mask_input instanceof HTMLInputElement) {
+        mask_input.select()
+        mask_input.focus()
+      }
+    }
+  }
+
+  handlePaste(event) {
+    const pasteText = event.clipboardData.getData('Text');
+    var details = new Netmask(pasteText);
+    const cidrParts = details.toString().split('/');
+    var octets = this.state.octets;
+    const octetParts = cidrParts[0].split('.');
+    octetParts.map((octet, i) => {
+      octets[i] = octet;
+    })
+    this.setState({
+      octets: octets
+    });
+
+    if (+cidrParts[1] <= 32) {
+      this.setState({
+        cidr: +cidrParts[1]
+      });
+    }
+  }
+
+  handleWheel(event) {
+    var lowerOctetValue = 0;
+    var higherOctetValue = event.target.dataset.octet === 'cidr' ? 32 : 255;
+    if (event.deltaY > 0 && event.target.value > lowerOctetValue) {
+      event.target.value = +event.target.value - 1;
+      this.handleChange(event);
+    }
+    if (event.deltaY < 0 && event.target.value < higherOctetValue) {
+      event.target.value = +event.target.value + 1;
+      this.handleChange(event);
+    }
+  }
+
+  getPretty() {
+    return this.state.octets.join('.') + '/' + this.state.cidr;
+  }
+
+  render() {
+    var details = new Netmask(this.getPretty());
+
+    return (
+      <div className="ip-address">
+        <div className="address">
+          {[...Array(4)].map((x, octet) => (
+            <span className="octet">
+              <input
+                className="octet"
+                type="text"
+                data-octet={octet}
+                aria-label={"octet "+ octet}
+                onChange={this.handleChange}
+                onKeyDown={this.handleKeyDown}
+                onPaste={this.handlePaste}
+                onWheel={this.handleWheel}
+                value={this.state.octets[octet]}
+              />
+              <span className="dot">{octet == '3' ? '/' : '.'}</span>
+            </span>
+          ))}
+          <input
+            className="cidr"
+            type="text"
+            data-octet="cidr"
+            aria-label="cidr mask"
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+            onPaste={this.handlePaste}
+            onWheel={this.handleWheel}
+            value={this.state.cidr}
+          />
+        </div>
+
+        <div className="bits">
+          <ol>
+            {[...Array(4)].map((x, octet) => (
+              <li className="octet">
+                <ol>
+                  {[...Array(8)].map((x, bit) => (
+                    <li
+                      className={
+                        octet * 8 + bit > this.state.cidr - 1
+                          ? 'bit masked'
+                          : 'bit unmasked'
+                      }
+                    >
+                      {(this.state.octets[octet] & (1 << (7 - bit))) >>
+                        (7 - bit)}
+                    </li>
+                  ))}
+                </ol>
+              </li>
+            ))}
+          </ol>
+        </div>
+
+        <div className="details">
+          <span className="netmask">
+            <span className="value">{details.mask}</span>
+            <span className="label">Netmask</span>
+          </span>
+          <span className="base">
+            <span className="value">{details.base}</span>
+            <span className="label">CIDR Base IP</span>
+          </span>
+          <span className="broadcast">
+            <span className="value">{details.broadcast}</span>
+            <span className="label">Broadcast IP</span>
+          </span>
+          <span className="count">
+            <span className="value">{details.size.toLocaleString()}</span>
+            <span className="label">Count</span>
+          </span>
+        </div>
+
+        <div className="break">
+        </div>
+
+        <div className="usable">
+          <span className="first">
+            <span className="value">{details.first}</span>
+            <span className="label">First Usable IP</span>
+          </span>
+          <span className="last">
+            <span className="value">{details.last}</span>
+            <span className="label">Last Usable IP</span>
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<IPAddress />, document.getElementById('app'));
diff --git a/old/src/style.scss b/old/src/style.scss
new file mode 100644
index 0000000..0476a3e
--- /dev/null
+++ b/old/src/style.scss
@@ -0,0 +1,167 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono');
+
+$xl: 87.5em; // 4k and hi-res desktop
+$lg: 60em; // 1080 and hi-res laptops
+$med: 40em; // hi-res tablets and low-res laptops
+$sm: 28em; // mobile and low-res tablets
+$xs: 20em; // mobile only
+
+$color_a: #a101a6;
+$color_b: #d9005b;
+$color_c: #84e900;
+$color_d: #cff700;
+$color_e: #aaa;
+$octet_lighten: 15%;
+
+body {
+  background: #eee;
+  font-family: 'Ubuntu', sans-serif;
+  header {
+    margin-bottom: 30px;
+    margin-left: 40px;
+    h1 {
+      small {
+        text-transform: uppercase;
+        color: #669;
+        display: block;
+      }
+    }
+    p {
+      margin-right: 30px;
+      @media ( min-width: $med ) {
+        margin-right: 60px;
+      }
+    }
+  }
+
+  div.ip-address {
+    text-align: center;
+    font-family: 'Ubuntu Mono', monospace;
+    div {
+      margin-top: 65px;
+    }
+    div.address {
+      input {
+        width: 2.5em;
+        font-size: 2.7em;
+        @media (max-width: $xl) {
+          font-size: calc(1em + 1.9vw);
+        }
+        text-align: center;
+        border: 0px;
+        border-radius: 3px;
+      }
+      span.octet {
+        span.dot {
+          text-align: center;
+          padding: 0.1em 0.13em;
+          font-size: 2.7em;
+          @media (max-width: $xl) {
+            font-size: calc(1em + 1.7vw);
+          }
+        }
+        &:nth-child(1) input.octet {
+          background-color: $color_a;
+        }
+        &:nth-child(2) input.octet {
+          background-color: $color_b;
+        }
+        &:nth-child(3) input.octet {
+          background-color: $color_c;
+        }
+        &:nth-child(4) input.octet {
+          background-color: $color_d;
+        }
+      }
+      input.cidr {
+        background-color: $color_e;
+      }
+    }
+    div.bits {
+      ol {
+        display: inline;
+        padding-left: 0px;
+        padding-right: 15px;
+        li.octet {
+          display: inline;
+          ol {
+            li.bit {
+              display: inline;
+              padding: 0.6em;
+              @media (max-width: $xl) {
+                padding: calc(-0.1em + 0.7vw);
+              }
+              margin-left: -1px;
+              border: 1px black solid;
+            }
+          }
+          &:nth-child(1) ol li.bit.unmasked {
+            background-color: lighten($color_a, $octet_lighten);
+          }
+          &:nth-child(2) ol li.bit.unmasked {
+            background-color: lighten($color_b, $octet_lighten);
+          }
+          &:nth-child(3) ol li.bit.unmasked {
+            background-color: lighten($color_c, $octet_lighten);
+          }
+          &:nth-child(4) ol li.bit.unmasked {
+            background-color: lighten($color_d, $octet_lighten);
+          }
+          ol li.bit.masked {
+            background-color: lighten($color_e, $octet_lighten);
+          }
+        }
+      }
+    }
+    div.details {
+      display: inline-flex;
+      justify-content: space-around;
+      width: 100%;
+      @media (min-width: 640px) {
+        width: 640px;
+      }
+      span {
+        display: block;
+      }
+    }
+    div.break {
+      width: 100%;
+      height: 0px;
+      margin: 0px;
+    }
+    div.usable {
+      display: inline-flex;
+      justify-content: space-around;
+      margin-top: 30px;
+      width: 100%;
+      @media (min-width: 640px) {
+        width: 640px;
+      }
+      span {
+        display: block;
+      }
+    }
+    span.value {
+      font-size: 1.22em;
+      @media (max-width: $xl) {
+        font-size: calc(0.7em + 0.6vw);
+      }
+    }
+    span.label {
+      display: block;
+      font-family: 'Ubuntu', sans-serif;
+      text-transform: uppercase;
+      font-size: 1.22em;
+      @media (max-width: $xl) {
+        font-size: calc(0.7em + 0.6vw);
+      }
+      font-weight: bold;
+      color: #656582;
+    }
+  }
+
+  footer {
+    margin-top: 30px;
+    text-align: center;
+  }
+}
author	Yuval Adam <_@yuv.al>	2024-09-21 13:15:44 +0200
committer	Yuval Adam <_@yuv.al>	2024-09-21 15:13:25 +0200
commit	65e7041a3c88a5b2d1ae76e7023807537775cb1b (patch)
tree	c21fe6cc3f137e2f0c13c0c184f9f59581a6639a /old
parent	6ed566ac4f30e1aa8b7a817c22912c50ee136f86 (diff)