New build structure

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "NODE_ENV=development snowpack dev",
     "build": "snowpack build",
-    "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest build build/output && tar -cvf build/output/build.tar -C ./build/output/ $(ls ./build/output)",
+    "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest build build/output && tar -cvf build/build.tar -C ./build/output/static/ $(ls ./build/output/static)",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "lint": "eslint 'src/**/*.{ts,tsx}'"
   },
@@ -14,18 +14,18 @@
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
     "@meshtastic/meshtasticjs": "^0.6.17",
-    "@reduxjs/toolkit": "^1.6.1",
+    "@reduxjs/toolkit": "^1.6.2",
-    "apexcharts": "^3.28.1",
+    "apexcharts": "^3.28.3",
     "boring-avatars": "^1.5.8",
-    "i18next": "^20.6.0",
+    "i18next": "^21.2.4",
     "i18next-browser-languagedetector": "^6.1.2",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
     "react-dom": "^17.0.2",
     "react-flags-select": "^2.1.2",
-    "react-hook-form": "^7.15.0",
+    "react-hook-form": "^7.17.2",
-    "react-i18next": "^11.11.4",
+    "react-i18next": "^11.12.0",
     "react-redux": "^7.2.5",
     "type-route": "^0.6.0",
     "use-breakpoint": "^2.0.2"
@@ -35,28 +35,28 @@
     "@snowpack/plugin-postcss": "^1.4.3",
     "@snowpack/plugin-react-refresh": "^2.5.0",
     "@snowpack/plugin-typescript": "^1.2.1",
-    "@types/react": "^17.0.20",
+    "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
-    "@types/react-redux": "^7.1.18",
+    "@types/react-redux": "^7.1.19",
     "@types/snowpack-env": "^2.3.4",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.31.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "@verypossible/eslint-config": "^1.6.1",
-    "autoprefixer": "^10.3.4",
+    "autoprefixer": "^10.3.7",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-babel-module": "^5.3.1",
-    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "gzipper": "^5.0.0",
+    "gzipper": "^5.0.1",
-    "postcss": "^8.3.6",
+    "postcss": "^8.3.9",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "snowpack": "^3.8.8",
-    "tailwindcss": "^2.2.11",
+    "tailwindcss": "^2.2.16",
     "tar": "^6.1.11",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.3"
   }
 }

public/index.html

@@ -2,12 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="favicon.ico" />
+    <link rel="shortcut icon" href="/static/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
+    <link
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+      rel="apple-touch-icon"
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+      sizes="180x180"
-    <link rel="manifest" href="site.webmanifest" />
+      href="/static/touch-icon.png"
-    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#67ea94" />
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/static/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/static/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/static/site.webmanifest" />
+    <link rel="mask-icon" href="/static/safari-tab.svg" color="#67ea94" />
     <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
 
     <link href="https://fonts.gstatic.com" rel="preconnect" />

public/site.webmanifest

@@ -5,12 +5,12 @@
   "description": "Meshtastic web app",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "/static/android-192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "/static/android-512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

snowpack.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import("snowpack").SnowpackUserConfig } */
 export default {
   mount: {
-    public: { url: '/', static: true },
+    public: { url: '/static' },
     src: { url: '/static' },
   },
   plugins: [
@@ -24,7 +24,6 @@ export default {
     '@pages': './src/pages',
     '@components': './src/components',
     '@core': './src/core',
-    '@static': './src/static',
   },
   routes: [
     /* Enable an SPA Fallback in development: */

src/components/menu/Logo.tsx

@@ -6,12 +6,12 @@ export const Logo = (): JSX.Element => {
       <img
         title="Logo"
         className="w-16 dark:hidden"
-        src="Mesh_Logo_Black.svg"
+        src="/static/Logo_Black.svg"
       />
       <img
         title="Logo"
         className="hidden w-16 dark:flex"
-        src="Mesh_Logo_White.svg"
+        src="/static/Logo_White.svg"
       />
     </>
   );

src/pages/settings/Connection.tsx

@@ -6,11 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Input } from '@app/components/generic/Input';
 import { Tabs } from '@app/components/generic/Tabs';
 import { Toggle } from '@app/components/generic/Toggle';
-import {
+import { bleConnection, serialConnection } from '@app/core/connection';
-  bleConnection,
-  connection,
-  serialConnection,
-} from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
@@ -34,7 +30,7 @@ export const Connection = ({
   });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setOwner(data);
+    // void connection.setOwner(data);
   });
 
   return (
@@ -63,9 +59,9 @@ export const Connection = ({
       }
     >
       <div className="w-full max-w-3xl md:max-w-xl">
-        <div className="mb-2 flex w-full border dark:border-gray-600 rounded-3xl p-2">
+        <div className="flex w-full p-2 mb-2 border dark:border-gray-600 rounded-3xl">
           Current connection method:
-          <div className="ml-2 rounded-full bg-gray-400 dark:bg-primaryDark text-sm px-1 my-auto">
+          <div className="px-1 my-auto ml-2 text-sm bg-gray-400 rounded-full dark:bg-primaryDark">
             BLE
           </div>
         </div>
@@ -94,13 +90,13 @@ export const Connection = ({
                     >
                       Get Devices
                     </Button>
-                    <div className="flex justify-between rounded-3xl border dark:border-600 p-2">
+                    <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
                       Device Name
-                      <LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-300" />
+                      <LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
                     </div>
-                    <div className="flex justify-between rounded-3xl border dark:border-600 p-2">
+                    <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
                       Device Name
-                      <LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-600" />
+                      <LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
                     </div>
                   </div>
                 ),
@@ -117,13 +113,13 @@ export const Connection = ({
                     >
                       Get Devices
                     </Button>
-                    <div className="flex justify-between rounded-3xl border dark:border-600 p-2">
+                    <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
                       Device Name
-                      <LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-300" />
+                      <LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
                     </div>
-                    <div className="flex justify-between rounded-3xl border dark:border-600 p-2">
+                    <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
                       Device Name
-                      <LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-600" />
+                      <LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
                     </div>
                   </div>
                 ),

tsconfig.json

@@ -15,8 +15,7 @@
       "@app/*": ["./src/*"],
       "@pages/*": ["./src/pages/*"],
       "@components/*": ["./src/components/*"],
-      "@core/*": ["./src/core/*"],
+      "@core/*": ["./src/core/*"]
-      "@static/*": ["./src/static/*"]
     },
     /* noEmit - Snowpack builds (emits) files, not tsc. */
     "noEmit": true,