bavix · rez1dent3 · Jul 27, 2024 · Jul 27, 2024 · Jul 27, 2024
diff --git a/main.go b/main.go
@@ -13,25 +13,42 @@ import (
 //go:embed public
 var staticFiles embed.FS
 
+// main is the entry point of the program.
+// It serves the HTML content from the "public" directory.
+// It listens on the address specified by the environment variables HOST and PORT,
+// defaulting to "127.0.0.1:8080" if the variables are not set.
 func main() {
+	// Load the embedded file system and get the "public" directory.
 	htmlContent, err := fs.Sub(staticFiles, "public")
 	if err != nil {
-		log.Fatal(err)
+		log.Fatal("Failed to load embedded file system:", err) // Exit if the embedded file system cannot be loaded
 	}
 
-	http.Handle("/", http.FileServer(http.FS(htmlContent)))
+	// Create a file server to serve the HTML content.
+	fileServer := http.FileServer(http.FS(htmlContent))
 
-	host, _ := os.LookupEnv("HOST")
-	port, ok := os.LookupEnv("PORT")
+	// Set the handler for the root path ("/") to the file server.
+	http.Handle("/", fileServer)
+
+	// Get the host and port from the environment variables.
+	host, _ := os.LookupEnv("HOST")  // Get the host from the environment variable, defaulting to "" if not set
+	port, ok := os.LookupEnv("PORT") // Get the port from the environment variable, defaulting to "" if not set
 	if !ok {
-		port = "8080"
+		port = "8080" // Default port is 8080
 	}
 
-	addr := net.JoinHostPort(host, port)
+	// Create the address to listen on.
+	addr := net.JoinHostPort(host, port) // Join the host and port with a colon separator
+
+	// Log the address we are listening on.
 	log.Printf("Listening on %s...\n", addr)
 
+	// Start the server.
+	// The server will listen indefinitely until it is stopped.
+	// If an error occurs that is not due to the server being closed,
+	// the error will be logged and the program will exit.
 	err = http.ListenAndServe(addr, nil)
 	if err != nil && !errors.Is(err, http.ErrServerClosed) {
-		log.Fatal(err)
+		log.Fatal("Server error:", err) // Exit if there is an error other than the server being closed
 	}
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,13 +31,15 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@theme-toggles/react": "^4.1.0",
     "babel-preset-minify": "^0.5.2",
     "bulma": "^1.0.2",
     "notiflix": "^3.2.7",
     "preact": "^10.23.1",
+    "react-helmet-async": "^2.0.5",
     "rollup": "^4.19.0",
-    "rollup-copy-transform-css": "^1.2.5",
-    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-import-css": "^3.5.0",
     "test": "^3.3.0",
     "uuid": "^10.0.0"
   }

diff --git a/public/app.css b/public/app.css
diff --git a/public/app.css.map b/public/app.css.map
diff --git a/public/bulma-tooltip.css b/public/bulma-tooltip.css
diff --git a/public/bulma-tooltip.css.map b/public/bulma-tooltip.css.map
diff --git a/public/bulma.css b/public/bulma.css
diff --git a/public/bulma.css.map b/public/bulma.css.map
diff --git a/public/index.html b/public/index.html
@@ -10,32 +10,10 @@
     <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
     <link rel="manifest" href="./site.webmanifest">
-
-    <link rel="stylesheet" href="./bulma.css">
-    <link rel="stylesheet" href="./bulma-tooltip.css">
     <link rel="stylesheet" href="./app.css">
 </head>
 <body>
-<div class="uuid-ui--wrapper">
-    <nav class="navbar is-light" role="navigation" aria-label="main navigation">
-        <div class="container">
-        <div class="navbar-brand">
-            <a class="navbar-item" href="./">
-                <img src="./android-chrome-192x192.png" >
-            </a>
-        </div>
-        <div class="navbar-menu">
-            <div class="navbar-start">
-                <a class="navbar-item" href="./">
-                    UUIDConv UI
-                </a>
-            </div>
-        </div>
-        </div>
-    </nav>
-
-    <div class="container margin-top" id="app"></div>
-</div>
+<div id="app"></div>
 
 <footer class="footer margin-top">
     <div class="content has-text-centered">

diff --git a/public/index.js b/public/index.js
diff --git a/public/index.js.map b/public/index.js.map
diff --git a/rollup.config.js b/rollup.config.js
@@ -5,38 +5,28 @@ import alias from '@rollup/plugin-alias';
 import commonjs from '@rollup/plugin-commonjs';
 import json from "@rollup/plugin-json";
 import resolve from '@rollup/plugin-node-resolve';
-import copy from 'rollup-plugin-copy';
-import { createTransform } from 'rollup-copy-transform-css';
+import terser from '@rollup/plugin-terser';
+import css from "rollup-plugin-import-css";
 
 export default {
     input: 'src/index.jsx',
     output: {
         dir: 'public/',
-        format: 'iife', // 'cjs' if building Node app, 'umd' for both
+        format: 'esm',
         sourcemap: true,
+        plugins: [terser()],
     },
     plugins: [
-        copy({
-            targets: [{
-                src: [
-                    './src/app.css',
-                    './node_modules/bulma/css/bulma.css',
-                    './node_modules/@creativebulma/bulma-tooltip/dist/bulma-tooltip.css',
-                ],
-                dest: 'public',
-                transform: createTransform({
-                    inline: true,
-                    minify: true,
-                    map: {inline: false, dir: 'public'},
-                }),
-            }]
+        css({
+            output: 'app.css',
+            minify: true,
         }),
         resolve({
             browser: true
         }),
         commonjs({
             include: /node_modules/,
-            requireReturnsDefault: 'auto', // <---- this solves default issue
+            requireReturnsDefault: 'auto',
         }),
         json(),
         nodeResolve({

diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,152 @@
-body {display: flex;min-height: 100vh;flex-direction: column;}
-.uuid-ui--wrapper {flex: 1}
-.margin-top {margin-top: 1rem}
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.uuid-ui--wrapper {
+  flex: 1;
+}
+
+.margin-top {
+  margin-top: 1rem;
+}
+
+.b-radio.radio {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.b-radio.radio {
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.b-radio.radio:not(.button) {
+  margin-right: 0.5em;
+}
+
+.b-radio.radio:not(.button) + .radio:last-child {
+  margin-right: 0;
+}
+
+.b-radio.radio + .radio {
+  margin-left: 0;
+}
+
+.b-radio.radio input[type=radio] {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  outline: none;
+  z-index: -1;
+}
+
+.b-radio.radio input[type=radio] + .check {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+  width: 1.25em;
+  height: 1.25em;
+  transition: background 150ms ease-out;
+  border-radius: 50%;
+  border: 2px solid #7a7a7a;
+}
+
+.b-radio.radio input[type=radio] + .check:before {
+  content: "";
+  display: flex;
+  position: absolute;
+  left: 50%;
+  margin-left: calc(-1.25em * 0.5);
+  bottom: 50%;
+  margin-bottom: calc(-1.25em * 0.5);
+  width: 1.25em;
+  height: 1.25em;
+  transition: transform 150ms ease-out;
+  border-radius: 50%;
+  transform: scale(0);
+  background-color: #00d1b2;
+}
+
+.b-radio.radio input[type=radio] + .check.is-link:before {
+  background: #485fc7;
+}
+
+.b-radio.radio input[type=radio] + .check.is-info:before {
+  background: #3e8ed0;
+}
+
+.b-radio.radio input[type=radio]:checked + .check {
+  border-color: #00d1b2;
+}
+
+.b-radio.radio input[type=radio]:checked + .check.is-link {
+  border-color: #485fc7;
+}
+
+.b-radio.radio input[type=radio]:checked + .check.is-info {
+  border-color: #3e8ed0;
+}
+
+.b-radio.radio input[type=radio]:checked + .check:before {
+  transform: scale(0.5);
+}
+
+.b-radio.radio input[type=radio]:focus + .check {
+  box-shadow: 0 0 0.5em rgba(122, 122, 122, 0.8);
+}
+
+.b-radio.radio input[type=radio]:focus:checked + .check {
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.8);
+}
+
+.b-radio.radio input[type=radio]:focus:checked + .check.is-link {
+  box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.8);
+}
+
+.b-radio.radio input[type=radio]:focus:checked + .check.is-info {
+  box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.8);
+}
+
+.b-radio.radio .control-label {
+  padding-left: calc(0.75em - 1px);
+}
+
+.b-radio.radio.button {
+  display: flex;
+}
+
+.b-radio.radio.button.is-selected {
+  z-index: 1;
+}
+
+.b-radio.radio[disabled] {
+  opacity: 0.5;
+}
+
+.b-radio.radio:hover input[type=radio]:not(:disabled) + .check.is-link {
+  border-color: #485fc7;
+}
+
+.b-radio.radio:hover input[type=radio]:not(:disabled) + .check.is-info {
+  border-color: #3e8ed0;
+}
+
+.b-radio.radio.is-small {
+  border-radius: 2px;
+  font-size: 0.75rem;
+}
+
+.b-radio.radio.is-medium {
+  font-size: 1.25rem;
+}
+
+.b-radio.radio.is-large {
+  font-size: 1.5rem;
+}
diff --git a/src/app.jsx b/src/app.jsx
@@ -1,24 +1,70 @@
 import React from 'react'
 import InputComponent from "./input.jsx"
 import HistoryComponent from "./history.jsx"
+import NavComponent from './nav.jsx'
+import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.css'
+import 'bulma/css/bulma.css'
+import './app.css'
 
 export default class AppComponent extends React.Component {
+    /**
+     * The state of the AppComponent.
+     * It contains an array of items, which represents the history of conversions.
+     * @type {Object}
+     */
     state = {
+        /**
+         * The array of items representing the history of conversions.
+         * @type {Array}
+         */
         items: [],
     }
 
+    /**
+     * Constructor for the AppComponent.
+     * It calls the constructor of the parent class.
+     * @param {Object} props - The properties passed to the component.
+     */
     constructor(props) {
         super(props);
     }
 
-    render({ }, { items }) {
+    /**
+     * Render method for the AppComponent.
+     *
+     * This method returns a div containing two columns: the input and history components.
+     * The input component is contained in a column with class 'is-three-fifths' and id 'input-cp'.
+     * The history component is contained in a column with class 'is-two-fifths is-narrow' and id 'history-cp'.
+     *
+     * @returns {JSX.Element} The rendered AppComponent.
+     */
+    render() {
+        // Get the items from the component's state
+        const { items } = this.state;
+
         return (
-            <div className="columns is-centered">
-                <div className="column is-three-fifths" id="input-cp">
-                    <InputComponent items={items} setItems={(items) => this.setState({items})} />
-                </div>
-                <div className="column is-two-fifths is-narrow" id="history-cp">
-                    <HistoryComponent items={items} />
+            // Wrapper div for the AppComponent
+            <div className="uuid-ui--wrapper">
+                {/* Navigation component */}
+                <NavComponent />
+                {/* Container div with a margin-top class */}
+                <div className="container margin-top">
+                    {/* Columns div with a centered layout */}
+                    <div className="columns is-centered">
+                        {/* Input column */}
+                        <div className="column is-three-fifths" id="input-cp">
+                            {/* Input component with items and setItems props */}
+                            <InputComponent 
+                                items={items} 
+                                setItems={(items) => this.setState({items})} 
+                            />
+                        </div>
+                        {/* History column */}
+                        <div className="column is-two-fifths is-narrow" id="history-cp">
+                            {/* History component with items prop */}
+                            <HistoryComponent items={items} />
+                        </div>
+                    </div>
                 </div>
             </div>
         );