use sans-serif and fix saving in vs code

mikebarkmin · mikebarkmin · commit f9860658e481 · 2025-11-18T22:21:01.000+01:00
diff --git a/.changeset/twenty-hairs-occur.md b/.changeset/twenty-hairs-occur.md
@@ -0,0 +1,8 @@
+---
+"@learningmap/learningmap": minor
+"learningmap-studio": minor
+"web": minor
+"@learningmap/web-component": minor
+---
+
+Use sans-serif instead of an unreadable custom font
diff --git a/packages/learningmap/src/index.css b/packages/learningmap/src/index.css
@@ -22,38 +22,15 @@
   --learningmap-color-white: #ffffff;
 }
 
-/* latin-ext */
-@font-face {
-  font-family: 'Concert One';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./fonts/concert_one_latin_ext.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Concert One';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(./fonts/concert_one_latin.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
 /* Container */
 .hyperbook-learningmap-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
+  color: #000;
   overflow: hidden;
-  font-family: "Concert One", sans-serif;
-
-  button {
-    font-family: "Concert One", sans-serif;
-  }
+  font-family: sans-serif;
 }
 
 /* Toolbar */
@@ -234,12 +211,9 @@ header.drawer-header {
   padding: 24px;
 }
 
-.drawer-resources ul {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
+.drawer-resources ul {}
 
 .drawer-description {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   line-height: 1.6;
 }
 
diff --git a/platforms/vscode/package.json b/platforms/vscode/package.json
@@ -36,7 +36,12 @@
         "displayName": "Learningmap Editor",
         "selector": [
           {
-            "filenamePattern": "*.learningmap"
+            "filenamePattern": "*.learningmap",
+            "scheme": "file"
+          },
+          {
+            "filenamePattern": "*.learningmap",
+            "scheme": "untitled"
           }
         ],
         "priority": "default"
diff --git a/platforms/vscode/src/LearningmapEditorProvider.ts b/platforms/vscode/src/LearningmapEditorProvider.ts
@@ -104,6 +104,16 @@ export class LearningmapEditorProvider implements vscode.CustomTextEditorProvide
     // Listen for messages from the webview
     webviewPanel.webview.onDidReceiveMessage(async e => {
       switch (e.type) {
+        case 'change':
+          // Content changed in the webview - update the document to mark it as dirty
+          // Set flag to prevent circular updates
+          isUpdatingFromDocument = true;
+          await this.saveDocument(document, e.content);
+          // Reset flag after a delay
+          setTimeout(() => {
+            isUpdatingFromDocument = false;
+          }, 200);
+          return;
         case 'save':
           if (!isUpdatingFromDocument) {
             await this.saveDocument(document, e.content);
diff --git a/platforms/vscode/src/webview.tsx b/platforms/vscode/src/webview.tsx
@@ -27,10 +27,40 @@ interface VSCodeMessage {
 function WebviewEditor() {
   const [isReady, setIsReady] = useState(false);
   const isLoadingFromFile = useRef(false);
+  const changeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   
   // Get store methods
   const getRoadmapData = useEditorStore(state => state.getRoadmapData);
   const loadRoadmapData = useEditorStore(state => state.loadRoadmapData);
+  
+  // Subscribe to store changes to notify VS Code of unsaved changes (debounced)
+  useEffect(() => {
+    const unsubscribe = useEditorStore.subscribe(() => {
+      // Don't notify during initial load
+      if (!isLoadingFromFile.current && isReady) {
+        // Clear previous timeout
+        if (changeTimeoutRef.current) {
+          clearTimeout(changeTimeoutRef.current);
+        }
+        
+        // Debounce change notifications to avoid rapid updates during dragging
+        changeTimeoutRef.current = setTimeout(() => {
+          const data = getRoadmapData();
+          vscode.postMessage({
+            type: 'change',
+            content: data,
+          });
+        }, 500); // Wait 500ms after last change before notifying
+      }
+    });
+    
+    return () => {
+      unsubscribe();
+      if (changeTimeoutRef.current) {
+        clearTimeout(changeTimeoutRef.current);
+      }
+    };
+  }, [getRoadmapData, isReady]);
 
   // Handle explicit save command
   const handleSave = () => {
diff --git a/platforms/web/public/concert_one_latin.woff2 b/platforms/web/public/concert_one_latin.woff2
diff --git a/platforms/web/src/Landing.css b/platforms/web/src/Landing.css
@@ -1,21 +1,13 @@
-/* Import Concert One font */
-@font-face {
-  font-family: 'Concert One';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/concert_one_latin.woff2) format('woff2');
-}
-
 body {
-  font-family: "Concert One", sans-serif;
+  font-family: sans-serif;
 }
 
 .landing-container {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
+  font-family: sans-serif;
 }
 
 /* Header */
diff --git a/platforms/web/src/Learn.css b/platforms/web/src/Learn.css
@@ -3,7 +3,7 @@
   height: 100vh;
   display: flex;
   flex-direction: column;
-  font-family: "Concert One", sans-serif;
+  font-family: sans-serif;
 }
 
 /* Toolbar matching EditorToolbar design */
@@ -55,7 +55,6 @@
   align-items: center;
   gap: 6px;
   transition: all 0.2s;
-  font-family: "Concert One", sans-serif;
 }
 
 .toolbar-button:hover {
@@ -71,7 +70,6 @@
   justify-content: center;
   height: 100vh;
   gap: 1rem;
-  font-family: "Concert One", sans-serif;
 }
 
 .learn-spinner {
@@ -106,7 +104,6 @@
   border-radius: 4px;
   cursor: pointer;
   font-size: 1rem;
-  font-family: "Concert One", sans-serif;
 }
 
 .learn-error button:hover {
@@ -119,7 +116,6 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  font-family: "Concert One", sans-serif;
 }
 
 .learn-list-content {
@@ -156,7 +152,6 @@
   border: 1px solid #dee2e6;
   border-radius: 4px;
   font-size: 1rem;
-  font-family: "Concert One", sans-serif;
 }
 
 .add-map-form button {
@@ -169,7 +164,6 @@
   font-size: 1rem;
   font-weight: 400;
   transition: background 0.2s;
-  font-family: "Concert One", sans-serif;
 }
 
 .add-map-form button:hover {
@@ -217,7 +211,6 @@
   font-size: 1rem;
   font-weight: 400;
   transition: all 0.2s;
-  font-family: "Concert One", sans-serif;
   display: inline-block;
 }
 
@@ -293,7 +286,6 @@
   justify-content: center;
   border-radius: 4px;
   transition: all 0.2s;
-  font-family: "Concert One", sans-serif;
 }
 
 .remove-button:hover {
@@ -351,7 +343,6 @@
   font-size: 1rem;
   font-weight: 400;
   transition: background 0.2s;
-  font-family: "Concert One", sans-serif;
 }
 
 .continue-button:hover {
diff --git a/platforms/web/vite.config.ts b/platforms/web/vite.config.ts
@@ -1,61 +1,62 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { VitePWA } from 'vite-plugin-pwa'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     VitePWA({
-      registerType: 'prompt',
-      includeAssets: ['logo.svg', 'concert_one_latin.woff2'],
+      registerType: "prompt",
+      includeAssets: ["logo.svg"],
       manifest: {
-        name: 'Learningmap - Interactive Visual Maps for Teaching and Learning',
-        short_name: 'Learningmap',
-        description: 'Create, share, and explore interactive visual learning maps. Perfect for teachers and students. All data stored locally in your browser for privacy and offline access.',
-        theme_color: '#ffffff',
-        background_color: '#ffffff',
-        display: 'standalone',
-        scope: '/',
-        start_url: '/',
+        name: "Learningmap - Interactive Visual Maps for Teaching and Learning",
+        short_name: "Learningmap",
+        description:
+          "Create, share, and explore interactive visual learning maps. Perfect for teachers and students. All data stored locally in your browser for privacy and offline access.",
+        theme_color: "#ffffff",
+        background_color: "#ffffff",
+        display: "standalone",
+        scope: "/",
+        start_url: "/",
         icons: [
           {
-            src: 'pwa-192x192.png',
-            sizes: '192x192',
-            type: 'image/png'
+            src: "pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
           },
           {
-            src: 'pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png'
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
           },
           {
-            src: 'pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'any maskable'
-          }
-        ]
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+        ],
       },
       workbox: {
-        globPatterns: ['**/*.{js,css,html,svg,png,woff2,json}'],
+        globPatterns: ["**/*.{js,css,html,svg,png,woff2,json}"],
         runtimeCaching: [
           {
             urlPattern: /^https:\/\/json\.openpatch\.org\/.*/i,
-            handler: 'NetworkFirst',
+            handler: "NetworkFirst",
             options: {
-              cacheName: 'json-api-cache',
+              cacheName: "json-api-cache",
               expiration: {
                 maxEntries: 50,
-                maxAgeSeconds: 60 * 60 * 24 * 7 // 1 week
+                maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
               },
               cacheableResponse: {
-                statuses: [0, 200]
-              }
-            }
-          }
-        ]
-      }
-    })
+                statuses: [0, 200],
+              },
+            },
+          },
+        ],
+      },
+    }),
   ],
-})
+});

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,12 @@`
`36`	`36`	`"displayName": "Learningmap Editor",`
`37`	`37`	`"selector": [`
`38`	`38`	`{`
`39`		`- "filenamePattern": "*.learningmap"`
	`39`	`+ "filenamePattern": "*.learningmap",`
	`40`	`+ "scheme": "file"`
	`41`	`+ },`
	`42`	`+ {`
	`43`	`+ "filenamePattern": "*.learningmap",`
	`44`	`+ "scheme": "untitled"`
`40`	`45`	`}`
`41`	`46`	`],`
`42`	`47`	`"priority": "default"`