fixes

.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.14.3","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"server\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":true,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\",\"entrypoint\":\"astro/assets/endpoint/dev\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false},\"legacy\":{\"collections\":false},\"session\":{\"driver\":\"fs-lite\",\"options\":{\"base\":\"/home/fc/Projects/glance/node_modules/.astro/sessions\"}}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.14.3","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"server\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":true,\"port\":4322,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\",\"entrypoint\":\"astro/assets/endpoint/dev\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false},\"legacy\":{\"collections\":false},\"session\":{\"driver\":\"fs-lite\",\"options\":{\"base\":\"/home/fc/Projects/glance/node_modules/.astro/sessions\"}}}"]

.astro/settings.json

@@ -1,8 +0,0 @@
-{
-	"_variables": {
-		"lastUpdateCheck": 1767394490388
-	},
-	"devToolbar": {
-		"enabled": false
-	}
-}

.astro/types.d.ts

@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

.nvmrc

@@ -0,0 +1 @@
+20

astro.config.mjs

@@ -4,6 +4,17 @@ import node from "@astrojs/node";
 
 export default defineConfig({
   integrations: [solidJs()],
+  server: {
+    port: 4322,
+    strictPort: true,
+  },
+  vite: {
+    // Avoid "Outdated Optimize Dep" 504s in dev when Vite's prebundle cache
+    // gets out of sync. These deps are used by Solid islands.
+    optimizeDeps: {
+      include: ["html2canvas", "@neodrag/solid"],
+    },
+  },
   output: "server",
   adapter: node({
     mode: "standalone",

package.json

@@ -2,6 +2,9 @@
   "name": "eink-dashboard",
   "type": "module",
   "version": "0.0.1",
+  "engines": {
+    "node": ">=20 <23"
+  },
   "scripts": {
     "dev": "npx astro dev --host",
     "build": "npx astro build",

src/components/Dashboard.tsx

@@ -27,6 +27,9 @@ export const Dashboard: Component = () => {
   const [hoveredCellId, setHoveredCellId] = createSignal<string | null>(null);
   const [isDraggingAny, setIsDraggingAny] = createSignal(false);
 
+  const isSmallScreen = () =>
+    typeof window !== "undefined" && window.matchMedia("(max-width: 968px)").matches;
+
   const previewScale = createMemo(() => {
     const grid = gridConfig().templateId
       ? getGrid(gridConfig().templateId!)
@@ -36,7 +39,9 @@ export const Dashboard: Component = () => {
     const gridWidth = grid.template.width || 800;
     const gridHeight = grid.template.height || 600;
 
-    const containerWidth = window.innerWidth - 450 - 140;
+    const containerWidth = isSmallScreen()
+      ? window.innerWidth - 40
+      : window.innerWidth - 450 - 140;
     const containerHeight = window.innerHeight * 0.85 - 80;
 
     const scaleX = containerWidth / gridWidth;
@@ -210,6 +215,19 @@ export const Dashboard: Component = () => {
       } catch (err) {
         console.error("Error loading saved config", err);
       }
+    } else {
+      // First run: start with a clock widget.
+      const initial: WidgetConfig[] = [
+        {
+          id: "clock-1",
+          type: "clock",
+          position: { x: 10, y: 10 },
+          size: { width: 200, height: 100 },
+          settings: {},
+        },
+      ];
+      setWidgets(initial);
+      saveToLocalStorage(initial);
     }
 
     const savedGrid = localStorage.getItem("dashboard-grid-config");
@@ -224,6 +242,13 @@ export const Dashboard: Component = () => {
 
   return (
     <div>
+      <style>{`
+        @media (max-width: 968px) {
+          .dashboard-panels {
+            grid-template-columns: 1fr !important;
+          }
+        }
+      `}</style>
       <header
         style={{
           "margin-bottom": "2rem",
@@ -280,6 +305,7 @@ export const Dashboard: Component = () => {
             gap: "1.5rem",
             "min-height": "85vh",
           }}
+          class="dashboard-panels"
         >
           {/* Interactive Editor Panel */}
           <div

src/pages/app/index.astro

@@ -3,6 +3,6 @@ import Layout from "../../layouts/Layout.astro";
 import { Dashboard } from "../../components/Dashboard";
 ---
 
-<Layout title="eInk Dashboard Builder">
+<Layout title="Dashboard Builder">
     <Dashboard client:load />
 </Layout>

src/pages/index.astro

@@ -2,7 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="dashMaker - Own Your Tech">
+<Layout title="dashMaker - Your Dashboard">
     <main>
         <div class="hero">
             <div class="hero-content">
@@ -12,35 +12,20 @@ import Layout from "../layouts/Layout.astro";
                 </h1>
 
                 <p class="subheadline">
-                    A modular e-ink display for what matters to you.<br />
-                    Open source tools. <span class="tasteful"
-                        >Build it yourself or get it ready-made.</span
-                    >
+                    A modular dashboard for what matters to you.<br />
+                    Open source tools. <span class="tasteful">Run it on your existing device.</span>
                 </p>
 
                 <p class="manifesto">
-                    When did "open" stop meaning open source? Every line of code
-                    on this hardware is truly open.<br />
-                    <span class="king"
-                        >As <span id="tech-leader">Linus Torvalds</span> intended.</span
-                    >
+                    <span class="king">Open source, as intended.</span>
                 </p>
 
                 <div class="cta-group">
-                    <a href="#preorder" class="cta-button primary">
-                        <span class="button-text">ORDER YOURS</span>
-                        <span class="arrow">→</span>
-                    </a>
-                    <a href="/app" class="cta-button secondary">
-                        <span class="button-text">BUILD IT YOURSELF</span>
+                    <a href="/app" class="cta-button primary">
+                        <span class="button-text">OPEN THE APP</span>
                         <span class="arrow">→</span>
                     </a>
                 </div>
-
-                <a href="/app" class="software-link">
-                    <span class="link-icon">→</span>
-                    <span>Try the dashboard builder (free & open source)</span>
-                </a>
             </div>
 
             <div class="canvas-container">