temp: move kinode.css to respective UIs for easy edits

kinode/packages/app_store/ui/kinode.css

@@ -0,0 +1,182 @@
+/* CSS Reset and Base Styles */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+    font-family: var(--font-family-main);
+}
+
+/* Variables */
+:root {
+    color-scheme: light dark;
+    --orange: #FF4F00;
+    --dark-orange: #cc4100;
+    --blue: #2B88D9;
+    --off-white: #fdfdfd;
+    --white: #ffffff;
+    --off-black: #0C090A;
+    --black: #000000;
+    --tan: #fdf6e3;
+    --ansi-red: #dc322f;
+    --maroon: #4f0000;
+    --gray: #657b83;
+    --tasteful-dark: #1f1f1f;
+
+    --font-family-main: 'Kode Mono', monospace;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+label,
+li,
+span {
+    font-family: var(--font-family-main);
+    color: light-dark(var(--off-black), var(--off-white));
+}
+
+p,
+li {
+    font-size: 0.8em;
+}
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+h3 {
+    font-size: 1.3em;
+}
+
+h4 {
+    font-size: 1.2em;
+}
+
+h5 {
+    font-size: 1.1em;
+}
+
+h6 {
+    font-size: 1em;
+}
+
+a {
+    font-family: var(--font-family-main);
+    color: light-dark(var(--blue), var(--orange));
+    text-decoration: none;
+}
+
+a:hover {
+    color: light-dark(var(--orange), var(--dark-orange));
+    text-decoration: underline wavy;
+}
+
+/* Layout */
+body {
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    background-color: light-dark(var(--tan), var(--tasteful-dark));
+    background-image: radial-gradient(circle at -1% -47%, #4700002b 7%, transparent 58.05%), radial-gradient(circle at 81% 210%, #d6430550 17%, transparent 77.05%);
+    min-width: 100vw;
+    min-height: 100vh;
+}
+
+/* Sections */
+section {
+    background-color: light-dark(var(--white), var(--maroon));
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+    margin-bottom: 2rem;
+    transition: transform 0.3s ease;
+}
+
+section:hover {
+    transform: translateY(-5px);
+}
+
+/* Forms */
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+form label {
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+}
+
+form input {
+    padding: 0.75rem;
+    border: 2px solid var(--orange);
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+form input:focus {
+    outline: none;
+    border-color: var(--dark-orange);
+    box-shadow: 0 0 0 3px rgba(255, 79, 0, 0.2);
+}
+
+/* Button styles */
+button {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    background-color: var(--orange);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: var(--dark-orange);
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+button.secondary {
+    background-color: light-dark(var(--off-white), var(--off-black));
+    color: var(--orange);
+    border: 2px solid var(--orange);
+}
+
+button.secondary:hover {
+    background-color: var(--orange);
+    color: white;
+}

kinode/packages/app_store/ui/package-lock.json

@@ -3749,8 +3749,6 @@
     },
     "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/napi-wasm/-/napi-wasm-1.1.0.tgz",
-      "integrity": "sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==",
       "inBundle": true,
       "license": "MIT"
     },

kinode/packages/app_store/ui/vite.config.ts

@@ -47,16 +47,16 @@ export default defineConfig({
           return '/our.js';
         },
       },
-      [`^${BASE_URL}/kinode.css`]: {
+      // [`^${BASE_URL}/kinode.css`]: {
-        target: PROXY_URL,
+      //   target: PROXY_URL,
-        changeOrigin: true,
+      //   changeOrigin: true,
-        rewrite: (path) => {
+      //   rewrite: (path) => {
-          console.log('Proxying  csrequest:', path);
+      //     console.log('Proxying  csrequest:', path);
-          return '/kinode.css';
+      //     return '/kinode.css';
-        },
+      //   },
-      },
+      // },
       // This route will match all other HTTP requests to the backend
-      [`^${BASE_URL}/(?!(@vite/client|src/.*|node_modules/.*|@react-refresh|$))`]: {
+      [`^${BASE_URL}/(?!(@vite/client|src/.*|kinode.css|node_modules/.*|@react-refresh|$))`]: {
         target: PROXY_URL,
         changeOrigin: true,
       },

kinode/packages/homepage/ui/kinode.css

@@ -0,0 +1,182 @@
+/* CSS Reset and Base Styles */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+    font-family: var(--font-family-main);
+}
+
+/* Variables */
+:root {
+    color-scheme: light dark;
+    --orange: #FF4F00;
+    --dark-orange: #cc4100;
+    --blue: #2B88D9;
+    --off-white: #fdfdfd;
+    --white: #ffffff;
+    --off-black: #0C090A;
+    --black: #000000;
+    --tan: #fdf6e3;
+    --ansi-red: #dc322f;
+    --maroon: #4f0000;
+    --gray: #657b83;
+    --tasteful-dark: #1f1f1f;
+
+    --font-family-main: 'Kode Mono', monospace;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+label,
+li,
+span {
+    font-family: var(--font-family-main);
+    color: light-dark(var(--off-black), var(--off-white));
+}
+
+p,
+li {
+    font-size: 0.8em;
+}
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+h3 {
+    font-size: 1.3em;
+}
+
+h4 {
+    font-size: 1.2em;
+}
+
+h5 {
+    font-size: 1.1em;
+}
+
+h6 {
+    font-size: 1em;
+}
+
+a {
+    font-family: var(--font-family-main);
+    color: light-dark(var(--blue), var(--orange));
+    text-decoration: none;
+}
+
+a:hover {
+    color: light-dark(var(--orange), var(--dark-orange));
+    text-decoration: underline wavy;
+}
+
+/* Layout */
+body {
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    background-color: light-dark(var(--tan), var(--tasteful-dark));
+    background-image: radial-gradient(circle at -1% -47%, #4700002b 7%, transparent 58.05%), radial-gradient(circle at 81% 210%, #d6430550 17%, transparent 77.05%);
+    min-width: 100vw;
+    min-height: 100vh;
+}
+
+/* Sections */
+section {
+    background-color: light-dark(var(--white), var(--maroon));
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+    margin-bottom: 2rem;
+    transition: transform 0.3s ease;
+}
+
+section:hover {
+    transform: translateY(-5px);
+}
+
+/* Forms */
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+form label {
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+}
+
+form input {
+    padding: 0.75rem;
+    border: 2px solid var(--orange);
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+form input:focus {
+    outline: none;
+    border-color: var(--dark-orange);
+    box-shadow: 0 0 0 3px rgba(255, 79, 0, 0.2);
+}
+
+/* Button styles */
+button {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    background-color: var(--orange);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: var(--dark-orange);
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+button.secondary {
+    background-color: light-dark(var(--off-white), var(--off-black));
+    color: var(--orange);
+    border: 2px solid var(--orange);
+}
+
+button.secondary:hover {
+    background-color: var(--orange);
+    color: white;
+}

kinode/packages/homepage/ui/package-lock.json

@@ -19,6 +19,7 @@
         "zustand": "^4.5.2"
       },
       "devDependencies": {
+        "@types/node": "^20.10.4",
         "@types/react": "^18.2.66",
         "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.2.22",
@@ -1508,6 +1509,15 @@
         "hoist-non-react-statics": "^3.3.0"
       }
     },
+    "node_modules/@types/node": {
+      "version": "20.16.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.1.tgz",
+      "integrity": "sha512-zJDo7wEadFtSyNz5QITDfRcrhqDvQI1xQNQ0VoizPjM/dVAODqqIUWbJPkvsxmTI0MYRGRikcdjMPhOssnPejQ==",
+      "devOptional": true,
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -4225,6 +4235,12 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "devOptional": true
+    },
     "node_modules/unocss": {
       "version": "0.59.4",
       "resolved": "https://registry.npmjs.org/unocss/-/unocss-0.59.4.tgz",
@@ -5371,6 +5387,15 @@
         "hoist-non-react-statics": "^3.3.0"
       }
     },
+    "@types/node": {
+      "version": "20.16.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.1.tgz",
+      "integrity": "sha512-zJDo7wEadFtSyNz5QITDfRcrhqDvQI1xQNQ0VoizPjM/dVAODqqIUWbJPkvsxmTI0MYRGRikcdjMPhOssnPejQ==",
+      "devOptional": true,
+      "requires": {
+        "undici-types": "~6.19.2"
+      }
+    },
     "@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -7295,6 +7320,12 @@
         "jiti": "^1.21.0"
       }
     },
+    "undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "devOptional": true
+    },
     "unocss": {
       "version": "0.59.4",
       "resolved": "https://registry.npmjs.org/unocss/-/unocss-0.59.4.tgz",

kinode/packages/homepage/ui/package.json

@@ -22,6 +22,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@types/node": "^20.10.4",
     "@types/react": "^18.2.66",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.2.22",
@@ -34,4 +35,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }
-}
+}

kinode/packages/homepage/ui/vite.config.ts

@@ -16,7 +16,7 @@ The format is "/" + "process_name:package_name:publisher_node"
 const BASE_URL = `/`;
 
 // This is the proxy URL, it must match the node you are developing against
-const PROXY_URL = ('http://127.0.0.1:8080').replace('localhost', '127.0.0.1');
+const PROXY_URL = (process.env.VITE_NODE_URL || 'http://127.0.0.1:8080').replace('localhost', '127.0.0.1');
 
 export default defineConfig({
   plugins: [
@@ -38,13 +38,13 @@ export default defineConfig({
           return '/our.js';
         },
       },
-      '^/kinode\\.css': {
+      // '^/kinode\\.css': {
-        target: PROXY_URL,
+      //   target: PROXY_URL,
-        changeOrigin: true,
+      //   changeOrigin: true,
-        rewrite: (path) => {
+      //   rewrite: (path) => {
-          return '/kinode.css';
+      //     return '/kinode.css';
-        },
+      //   },
-      },
+      // },
       '^/version': {
         target: PROXY_URL,
         changeOrigin: true,