Initial experiments with single page navigation

effekt-lang · Sep 27, 2024 · c32c0c6 · c32c0c6
1 parent 23b8e96
commit c32c0c6
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 20 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -53,7 +53,9 @@
 <body>
 {% endif %}
 
+<main id="content">
 {{ content }}
+</main>
 
 
 <script src="{{site.url}}{{site.baseurl}}/highlight/highlight.pack.js"></script>

diff --git a/src/ide.ts b/src/ide.ts
@@ -7,23 +7,28 @@ import * as effekt from "./effekt-language";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import type { Diagnostic, DiagnosticSeverity, Position } from "vscode-languageserver-types"
 
-// initialize:
-// load all code[module=...] elements and write them to the IDE
-document.querySelectorAll("code[module]").forEach( (code: HTMLElement) => {
-  let module = code.getAttribute("module")
-  let filename = module + ".effekt"
-  let content = code.getAttribute("prelude") + code.getAttribute("content") + code.getAttribute("postlude")
-  effekt.write(filename, content)
-})
-
 export interface IViewModel extends monaco.editor.ITextModel {
   getFullText(): string
   modelPosition(pos: Position): Position
   viewPosition(pos: Position): Position
 }
 
+// initialize:
+// load all code[module=...] elements and write them to the IDE
+export function loadModules() {
+  document.querySelectorAll("code[module]").forEach( (code: HTMLElement) => {
+    let module = code.getAttribute("module")
+    let filename = module + ".effekt"
+    let content = code.getAttribute("prelude") + code.getAttribute("content") + code.getAttribute("postlude")
+    effekt.write(filename, content)
+  })
+}
+
 export function createModel(filename: string, contents: string, hiddenPrelude: string, hiddenPostlude: string): IViewModel {
-  let model = monaco.editor.createModel(contents.trim(), "effekt", monaco.Uri.file(filename))
+  let model = monaco.editor.getModel(monaco.Uri.file(filename));
+  if (model) model.setValue(contents.trim())
+  else model = monaco.editor.createModel(contents.trim(), "effekt", monaco.Uri.file(filename))
+
   let pre = hiddenPrelude || ""
   let post = hiddenPostlude || ""
   let lineOffset = (hiddenPrelude.match(/\n/g) || '').length

diff --git a/src/index.ts b/src/index.ts
@@ -8,6 +8,7 @@ async function enableEditing(code: HTMLElement, run: HTMLElement, coreOut: HTMLE
 
     let IDE = await import(/* webpackMode: "lazy", webpackChunkName: "ide" */ "./ide")
     let editor = await import(/* webpackMode: "lazy", webpackChunkName: "editor" */ "./editor")
+    IDE.loadModules();
 
     parent.classList.remove("editor-loading")
     parent.classList.add("editor")
@@ -264,26 +265,53 @@ function parseOptions(str: string): CodeOptions {
   }
 }
 
-
-
-
-window.addEventListener("DOMContentLoaded", () => {
-
+function initDOM() {
   processCode()
 
   // let codes = document.querySelectorAll("code")
   // monacoEditor(codes[codes.length - 1])
   hljs.configure({
-      languages: ['effekt', 'bash']
+    languages: ['effekt', 'bash']
   });
-
+  
   // highlight inline code
   document.querySelectorAll("code").forEach(code => {
     // it is a block code
     if (code.parentElement.tagName == "pre") return;
-
+  
     hljs.highlightBlock(code)
   })
-
+  
   docs.init()
-})
+}
+
+function addLinkListeners() {
+  const links = document.querySelectorAll(".sidebar-nav a");
+
+  const loadPage = (url) => {
+  fetch(url)
+    .then(response => response.text())
+    .then(html => {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, "text/html");
+      const newContent = doc.querySelector("main#content");
+      document.querySelector("main#content").innerHTML = newContent.innerHTML;
+      initDOM();
+      addLinkListeners();
+
+      window.history.pushState(null, '', url);
+    })
+    .catch(err => console.error("Failed to load page", err));
+  }
+
+  links.forEach((link) => {
+    link.addEventListener("click", (e) => {
+    e.preventDefault();
+    loadPage(link.getAttribute("href"));
+    });
+  });
+
+  initDOM();
+}
+
+window.addEventListener("DOMContentLoaded", () => addLinkListeners());