Add comprehensive localization to learningmap web components with language settings

Author: Copilot

.changeset/lemon-geckos-run.md

@@ -0,0 +1,10 @@
+---
+"@hyperbook/web-component-learningmap": minor
+"@hyperbook/markdown": minor
+"@hyperbook/types": minor
+"@hyperbook/fs": minor
+"hyperbook": minor
+"hyperbook-studio": minor
+---
+
+Vastly improved learningmap element

packages/fs/src/hyperbook.ts

@@ -177,6 +177,7 @@ export const getPagesAndSections = async (
       }
       const page: HyperbookPage = {
         ...data,
+        path: file.path,
       };
       const repo = makeRepoLink(hyperbook.repo, file);
       if (repo) {

packages/fs/tests/__snapshots__/hyperbook.test.ts.snap

@@ -5,16 +5,37 @@ exports[`hyperbook > should get navigation 1`] = `
   "current": {
     "href": "/paradigms",
     "name": "Paradigms",
+    "path": {
+      "absolute": "single-hyperbook/book/paradigms.md",
+      "directory": "",
+      "href": "/paradigms",
+      "permalink": null,
+      "relative": "paradigms.md",
+    },
     "repo": "https://github.com/openpatch/hyperbook/edit/main/website/en/book/paradigms.md",
   },
   "next": {
     "href": "/hyperbook-test",
     "name": "hyperbook-test",
+    "path": {
+      "absolute": "single-hyperbook/book/hyperbook-test.md",
+      "directory": "",
+      "href": "/hyperbook-test",
+      "permalink": null,
+      "relative": "hyperbook-test.md",
+    },
     "repo": "https://github.com/openpatch/hyperbook/edit/main/website/en/book/hyperbook-test.md",
   },
   "previous": {
     "href": "/",
     "name": "Home",
+    "path": {
+      "absolute": "single-hyperbook/book/index.md",
+      "directory": "",
+      "href": "/",
+      "permalink": null,
+      "relative": "index.md",
+    },
     "repo": "https://github.com/openpatch/hyperbook/edit/main/website/en/book/index.md",
   },
 }

packages/fs/tests/hyperbook.test.ts

@@ -1,8 +1,17 @@
 import path from "path";
 import { describe, it, expect } from "vitest";
 import { hyperbook, vfile } from "../src";
+import { HyperbookPage } from "@hyperbook/types/dist";
 
 describe("hyperbook", () => {
+  const relative = (s: string) =>
+    path.relative(path.join(__dirname, "fixtures"), s);
+  const makeFileRelative = (p: HyperbookPage) => {
+    return {
+      ...p,
+      path: { ...p.path, absolute: relative(p.path?.absolute || "") },
+    } as HyperbookPage;
+  };
   it("should get navigation", async () => {
     let hyperbookPath = path.join(__dirname, "fixtures", "single-hyperbook");
     let files = await vfile.list(hyperbookPath);
@@ -17,7 +26,10 @@ describe("hyperbook", () => {
       pagesAndSections.sections,
       pagesAndSections.pages,
     );
-    const navigation = await hyperbook.getNavigationForFile(pageList, current);
+    const navigation = await hyperbook.getNavigationForFile(
+      pageList.map(makeFileRelative),
+      current,
+    );
     expect(navigation).toMatchSnapshot();
   });
 });

packages/markdown/assets/directive-learningmap/client.js

@@ -6,29 +6,14 @@ hyperbook.learningmap = (function () {
       const map = elem.getElementsByTagName("hyperbook-learningmap")[0];
       if (map) {
         const result = await store.learningmap.get(elem.id);
-        if (result && result.nodeState) {
-          map.nodeState = result.nodeState;
-          map.x = result.x || 0;
-          map.y = result.y || 0;
-          map.zoom = result.zoom || 1;
+        if (result) {
+          map.initialState = result;
         }
         map.addEventListener("change", function (event) {
           store.learningmap
             .update(elem.id, {
-              nodeState: event.detail,
-            })
-            .then((updated) => {
-              if (updated == 0) {
-                store.learningmap.put({
-                  id: elem.id,
-                  nodeState: event.detail,
-                });
-              }
-            });
-        });
-        map.addEventListener("viewport-change", function (event) {
-          store.learningmap
-            .update(elem.id, {
+              id: elem.id,
+              nodes: event.detail.nodes,
               x: event.detail.x,
               y: event.detail.y,
               zoom: event.detail.zoom,
@@ -37,6 +22,7 @@ hyperbook.learningmap = (function () {
               if (updated == 0) {
                 store.learningmap.put({
                   id: elem.id,
+                  nodes: event.detail.nodes,
                   x: event.detail.x,
                   y: event.detail.y,
                   zoom: event.detail.zoom,

packages/markdown/assets/store.js

@@ -26,7 +26,7 @@ store.version(1).stores({
   webide: `id,html,css,js`,
   h5p: `id,userData`,
   geogebra: `id,state`,
-  learningmap: `id,nodeState,x,y,zoom`,
+  learningmap: `id,nodes,x,y,zoom`,
 });
 var sqlIdeDB = new Dexie("SQL-IDE");
 sqlIdeDB.version(0.1).stores({

packages/markdown/src/helper.ts

@@ -0,0 +1,25 @@
+import { HyperbookContext } from "@hyperbook/types";
+import path from "path";
+import fs from "fs";
+
+export const readFile = (src: string, ctx: HyperbookContext) => {
+  let srcFile = null;
+  try {
+    srcFile = fs.readFileSync(path.join(ctx.root, "public", src), "utf-8");
+  } catch (e) {
+    try {
+      srcFile = fs.readFileSync(path.join(ctx.root, "book", src), "utf-8");
+    } catch (e) {
+      srcFile = fs.readFileSync(
+        path.join(
+          ctx.root,
+          "book",
+          ctx.navigation.current?.path?.directory || "",
+          src,
+        ),
+        "utf-8",
+      );
+    }
+  }
+  return srcFile;
+};

packages/markdown/src/rehypeDirectiveP5.ts

@@ -3,7 +3,6 @@
 //
 import { HyperbookContext } from "@hyperbook/types";
 import { Root } from "mdast";
-import fs from "fs";
 import path from "path";
 import { visit } from "unist-util-visit";
 import { VFile } from "vfile";
@@ -16,6 +15,7 @@ import {
 import { toText } from "./mdastUtilToText";
 import hash from "./objectHash";
 import { i18n } from "./i18n";
+import { readFile } from "./helper";
 
 interface CodeBundle {
   js?: string;
@@ -94,10 +94,7 @@ ${(code.scripts ? [cdnLibraryUrl, ...code.scripts] : []).map((src) => `<script t
         let srcFile = "";
 
         if (src) {
-          srcFile = fs.readFileSync(
-            path.join(ctx.root, "public", String(src)),
-            "utf8",
-          );
+          srcFile = readFile(src, ctx);
         } else if (node.children?.length > 0) {
           srcFile = toText(node.children);
         }

packages/markdown/src/remarkDirectiveLearningmap.ts

@@ -10,9 +10,8 @@ import {
   isDirective,
   registerDirective,
 } from "./remarkHelper";
-import { toText } from "./mdastUtilToText";
 import hash from "./objectHash";
-import * as yaml from "js-yaml";
+import { readFile } from "./helper";
 
 export default (ctx: HyperbookContext) => () => {
   const name = "learningmap";
@@ -32,52 +31,27 @@ export default (ctx: HyperbookContext) => () => {
           [],
         );
 
-        const { height = "calc(100vh - 80px)", id = hash(node) } =
-          node.attributes || {};
+        const {
+          height = "calc(100vh - 80px)",
+          id = hash(node),
+          src = "",
+        } = node.attributes || {};
 
-        const roadmapData = toText(
-          node.children.find(
-            (c) =>
-              c.type === "code" && (c.lang === "yaml" || c.lang === "json"),
-          ),
-        );
-
-        let parsedRoadmapData: {
-          background?: {
-            image?: { src: string };
-          };
-          nodes?: {
-            video?: string;
-            resources: { url: string }[];
-          }[];
-        };
-
-        try {
-          parsedRoadmapData = JSON.parse(roadmapData) as any;
-        } catch {
-          try {
-            parsedRoadmapData = yaml.load(roadmapData) as any;
-          } catch (err) {
-            console.error("Failed to parse roadmap data:", err);
-            return SKIP;
-          }
-        }
+        if (!src) return SKIP;
 
-        if (parsedRoadmapData.background?.image?.src) {
-          const url = ctx.makeUrl(
-            parsedRoadmapData.background.image.src,
-            "public",
-            ctx.navigation.current || undefined,
-          );
-          parsedRoadmapData.background.image.src = url;
+        let srcFile = readFile(src, ctx);
+        if (!srcFile) {
+          file.message(`File not found: ${src}`, node);
+          return SKIP;
         }
 
-        parsedRoadmapData.nodes?.forEach((node) => {
+        let parsedRoadmapData = JSON.parse(srcFile) as any;
+        parsedRoadmapData.nodes?.forEach((node: any) => {
           if (node.video) {
             node.video = ctx.makeUrl(node.video, "public");
           }
           if (node.resources) {
-            node.resources = node.resources.map((res) => ({
+            node.resources = node.resources.map((res: any) => ({
               ...res,
               url: ctx.makeUrl(res.url, "public"),
             }));

packages/markdown/src/remarkDirectivePyide.ts

@@ -3,8 +3,6 @@
 //
 import { HyperbookContext } from "@hyperbook/types";
 import { Code, Root } from "mdast";
-import fs from "fs";
-import path from "path";
 import { visit } from "unist-util-visit";
 import { VFile } from "vfile";
 import {
@@ -18,6 +16,7 @@ import { toText } from "./mdastUtilToText";
 import hash from "./objectHash";
 import { ElementContent } from "hast";
 import { i18n } from "./i18n";
+import { readFile } from "./helper";
 
 function htmlEntities(str: string) {
   return String(str)
@@ -53,10 +52,7 @@ export default (ctx: HyperbookContext) => () => {
         let input = "";
 
         if (src) {
-          srcFile = fs.readFileSync(
-            path.join(ctx.root, "public", String(src)),
-            "utf8",
-          );
+          srcFile = readFile(src, ctx);
         } else if (node.children?.length > 0) {
           tests = node.children
             .filter((c) => c.type === "code")