feat: improve boilerplates

glzr-io · Sep 11, 2024 · 0ef38ac · 0ef38ac
1 parent aa80402
commit 0ef38ac
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 46 deletions.
diff --git a/examples/boilerplates/react-buildless/index.html b/examples/boilerplates/react-buildless/index.html
@@ -1,7 +1,11 @@
-<html>
-  <body>
-    <div id="root"></div>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="stylesheet" type="text/css" href="../../normalize.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
     <script type="importmap">
@@ -13,6 +17,9 @@
         }
       }
     </script>
+  </head>
+  <body>
+    <div id="root"></div>
 
     <script type="text/babel" data-type="module">
       import React, { useState, useEffect } from 'react';
@@ -39,19 +46,32 @@
         });
 
         useEffect(() => {
-          cpu.onOutput(cpu => setOutputs({ ...outputs, cpu }));
-          battery.onOutput(battery => setOutputs({ ...outputs, battery }));
-          memory.onOutput(memory => setOutputs({ ...outputs, memory }));
-          weather.onOutput(weather => setOutputs({ ...outputs, weather }));
+          cpu.onOutput(cpu =>
+            setOutputs(outputs => ({ ...outputs, cpu })),
+          );
+          battery.onOutput(battery =>
+            setOutputs(outputs => ({ ...outputs, battery })),
+          );
+          memory.onOutput(memory =>
+            setOutputs(outputs => ({ ...outputs, memory })),
+          );
+          weather.onOutput(weather =>
+            setOutputs(outputs => ({ ...outputs, weather })),
+          );
         }, []);
 
         return (
-          <div>
-            cpu: {outputs.cpu.usage}
-            battery: {outputs.battery?.chargePercent}
-            memory: {outputs.memory.usage}
-            weather temp: {outputs.weather.celsiusTemp}
-            weather status: {outputs.weather.status}
+          <div className="app">
+            <div className="chip">CPU usage: {outputs.cpu.usage}</div>
+            <div className="chip">
+              Battery charge: {outputs.battery?.chargePercent}
+            </div>
+            <div className="chip">
+              Memory usage: {outputs.memory.usage}
+            </div>
+            <div className="chip">
+              Weather temp: {outputs.weather?.celsiusTemp}
+            </div>
           </div>
         );
       }

diff --git a/examples/boilerplates/react-buildless/my-window.zebar.json b/examples/boilerplates/react-buildless/my-window.zebar.json
@@ -13,7 +13,7 @@
         "offsetX": "0px",
         "offsetY": "0px",
         "width": "100%",
-        "height": "50px",
+        "height": "40px",
         "monitorSelection": {
           "type": "all"
         }

diff --git a/examples/boilerplates/react-buildless/styles.css b/examples/boilerplates/react-buildless/styles.css
@@ -0,0 +1,23 @@
+body {
+  color: rgb(255 255 255 / 90%);
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.app {
+  text-align: center;
+}
+
+.chip {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: rgb(84, 66, 220);
+  margin-right: 4px;
+}
diff --git a/examples/boilerplates/solid-ts/README.md b/examples/boilerplates/solid-ts/README.md
@@ -1,9 +1,5 @@
 ## Usage
 
-Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
-
-This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
-
 ```bash
 $ npm install # or pnpm install or yarn install
 ```
@@ -14,23 +10,13 @@ $ npm install # or pnpm install or yarn install
 
 In the project directory, you can run:
 
-### `npm run dev` or `npm start`
-
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+### `npm run dev`
 
-The page will reload if you make edits.<br>
+Runs the app in the development mode.
 
 ### `npm run build`
 
 Builds the app for production to the `dist` folder.<br>
-It correctly bundles Solid in production mode and optimizes the build for the best performance.
+It bundles Solid in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
-
-## Deployment
-
-You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
-
-## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
diff --git a/examples/boilerplates/solid-ts/index.html b/examples/boilerplates/solid-ts/index.html
@@ -5,10 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <title>Zebar</title>
+    <link rel="stylesheet" type="text/css" href="../../normalize.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script src="/src/index.tsx" type="module"></script>
+    <script src="./src/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/examples/boilerplates/solid-ts/my-window.zebar.json b/examples/boilerplates/solid-ts/my-window.zebar.json
@@ -10,10 +10,10 @@
     "placements": [
       {
         "anchor": "top_left",
-        "offsetX": "20px",
-        "offsetY": "20px",
+        "offsetX": "0px",
+        "offsetY": "0px",
         "width": "100%",
-        "height": "30px",
+        "height": "40px",
         "monitorSelection": {
           "type": "all"
         }

diff --git a/examples/boilerplates/solid-ts/src/index.css b/examples/boilerplates/solid-ts/src/index.css
@@ -1,3 +1,23 @@
+body {
+  color: rgb(255 255 255 / 90%);
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
 .app {
   text-align: center;
 }
+
+.chip {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: rgb(84, 66, 220);
+  margin-right: 4px;
+}
diff --git a/examples/boilerplates/solid-ts/src/index.tsx b/examples/boilerplates/solid-ts/src/index.tsx
@@ -5,6 +5,7 @@ import { createStore } from 'solid-js/store';
 import { init } from 'zebar';
 
 const zebarCtx = await init();
+
 const [cpu, battery, memory, weather] = await Promise.all([
   zebarCtx.createProvider({ type: 'cpu' }),
   zebarCtx.createProvider({ type: 'battery' }),
@@ -15,25 +16,26 @@ const [cpu, battery, memory, weather] = await Promise.all([
 render(() => <App />, document.getElementById('root')!);
 
 function App() {
-  const [store, setStore] = createStore({
+  const [outputs, setOutputs] = createStore({
     cpu: cpu.output,
     battery: battery.output,
     memory: memory.output,
     weather: weather.output,
   });
 
-  cpu.onOutput(cpu => setStore({ cpu }));
-  battery.onOutput(battery => setStore({ battery }));
-  memory.onOutput(memory => setStore({ memory }));
-  weather.onOutput(weather => setStore({ weather }));
+  cpu.onOutput(cpu => setOutputs({ cpu }));
+  battery.onOutput(battery => setOutputs({ battery }));
+  memory.onOutput(memory => setOutputs({ memory }));
+  weather.onOutput(weather => setOutputs({ weather }));
 
   return (
-    <div>
-      cpu: {store.cpu.usage}
-      battery: {store.battery?.chargePercent}
-      memory: {store.memory.usage}
-      weather temp: {store.weather.celsiusTemp}
-      weather status: {store.weather.status}
+    <div class="app">
+      <div class="chip">CPU usage: {outputs.cpu.usage}</div>
+      <div class="chip">
+        Battery charge: {outputs.battery?.chargePercent}
+      </div>
+      <div class="chip">Memory usage: {outputs.memory.usage}</div>
+      <div class="chip">Weather temp: {outputs.weather?.celsiusTemp}</div>
     </div>
   );
 }