feat: add node version to server-info component, update template usage, and bump jsda-kit dependency

Author: foxeyes

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jsda-template",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "JSDA-Kit project template",
   "keywords": [
     "jsda",
@@ -29,7 +29,7 @@
     "build": "npx jsda build && npm run copy-robots"
   },
   "dependencies": {
-    "jsda-kit": "^1.5.0"
+    "jsda-kit": "^1.5.1"
   },
   "devDependencies": {
     "@types/node": "^24.5.2",

package.json

@@ -3,5 +3,5 @@ import IMPORTMAP from 'jsda-kit/node/importmap.js';
 export default {
   IMPORTMAP,
   HEADING: 'No Route Example',
-  BODY: 'This is a page that is not served through a route.',
+  BODY: 'This is a page that is not served through a pre-defined route.',
 };

src/dynamic-pages/no-route-example/pageData.js

@@ -13,6 +13,7 @@
     <h1>{[HEADING]}</h1>
     <p>{[BODY]}</p>
     <client-counter></client-counter>
+    <server-info></server-info>
   </main>
 </body>
 </html>

src/dynamic-pages/no-route-example/template.html

@@ -3,8 +3,10 @@ import styles from './styles.js';
 import template from './template.js';
 
 class ServerInfo extends Symbiote {
-  isoMode = true;
   serverTime = new Date().toISOString();
+  
+  // Node.js only code:
+  nodeVersion = globalThis.process.version;
 }
 
 ServerInfo.template = template;

src/ui-components/server-only/server-info/logic.js

@@ -3,21 +3,10 @@ import { css } from '@symbiotejs/symbiote';
 export default css`
 server-info {
   display: flex;
+  flex-direction: column;
   gap: 0.5em;
-  align-items: center;
   padding: 0.75em 1em;
-  font-family: system-ui, sans-serif;
-  background: var(--surface, #f5f5f5);
+  background: #f5f5f5;
   border-radius: 6px;
-
-  .label {
-    font-weight: 600;
-    color: var(--primary, #007acc);
-  }
-
-  time {
-    font-variant-numeric: tabular-nums;
-    opacity: 0.8;
-  }
 }
 `;

src/ui-components/server-only/server-info/styles.js

@@ -1,6 +1,6 @@
 import { html } from '@symbiotejs/symbiote';
 
 export default html`
-  <span class="label">Server Time:</span>
-  <time>{{serverTime}}</time>
+  <div>Server Time: {{serverTime}}</div>
+  <div>Node Version: {{nodeVersion}}</div>
 `;