image regeneration and more path fixes

docs/chapters/control/content.en-GB.md

@@ -23,7 +23,7 @@ If we want to change the curve, we need to change the weights of each point, eff
                 \underset{weight}{\underbrace{w_i}}
 \]
 
-That looks complicated, but as it so happens, the "weights" are actually just the coordinate values we want our curve to have: for an <i>n<sup>th</sup></i> order curve, w<sub>0</sub> is our start coordinate, w<sub>n</sub> is our last coordinate, and everything in between is a controlling coordinate. Say we want a cubic curve that starts at (120,160), is controlled by (35,200) and (220,260) and ends at (220,40), we use this Bézier curve:
+That looks complicated, but as it so happens, the "weights" are actually just the coordinate values we want our curve to have: for an <i>n<sup>th</sup></i> order curve, w<sub>0</sub> is our start coordinate, w<sub>n</sub> is our last coordinate, and everything in between is a controlling coordinate. Say we want a cubic curve that starts at (110,150), is controlled by (25,190) and (210,250) and ends at (210,30), we use this Bézier curve:
 
 \[
 \left \{ \begin{matrix}

docs/index.html

@@ -987,8 +987,8 @@ function Bezier(3,t):
             an <i>n<sup>th</sup></i> order curve, w<sub>0</sub> is our start
             coordinate, w<sub>n</sub> is our last coordinate, and everything in
             between is a controlling coordinate. Say we want a cubic curve that
-            starts at (120,160), is controlled by (35,200) and (220,260) and
-            ends at (220,40), we use this Bézier curve:
+            starts at (110,150), is controlled by (25,190) and (210,250) and
+            ends at (210,30), we use this Bézier curve:
           </p>
           <img
             class="LaTeX SVG"

src/build/create-index-page.js

@@ -75,7 +75,7 @@ async function createIndexPages(locale, localeStrings, chapters) {
     fs.writeFileSync(path.join(paths.public, `index.html`), data, `utf8`);
   } else {
     let localeDir = path.join(paths.public, locale);
-    fs.ensureDir(localeDir);
+    fs.ensureDirSync(localeDir);
     fs.writeFileSync(path.join(localeDir, `index.html`), data, `utf8`);
   }
 }

src/build/latex/latex-to-svg.js

@@ -23,7 +23,7 @@ export default async function latexToSVG(latex, chapter, localeStrings, block) {
 
   const TeXfilename = path.join(paths.temp, `${hash}.tex`);
   const chapterDir = path.join(paths.images, `chapters`, chapter);
-  fs.ensureDir(chapterDir);
+  fs.ensureDirSync(chapterDir);
 
   const SVGfilename = path.join(chapterDir, `${hash}.svg`);
   const srcURL = `./images/chapters/${chapter}/${hash}.svg`;

src/build/markdown/generate-fallback-image.js

@@ -34,8 +34,8 @@ async function generateFallbackImage(chapter, localeStrings, src, w, h) {
 
   if (locale !== localeStrings.getDefaultLocale()) return hash;
 
-  const destPath = path.join(paths.images, src);
-  fs.ensureDir(destPath);
+  const destPath = path.dirname(path.join(paths.images, src));
+  fs.ensureDirSync(destPath);
 
   const filePath = path.join(destPath, `${hash}.png`);
   if (fs.existsSync(filePath)) return hash;

src/build/markdown/generate-graphics-module.js

@@ -7,6 +7,7 @@ import performCodeSurgery from "../../../docs/js/custom-element/lib/perform-code
 // Note that this location is relative to the temp dir, from which sketch modules get loaded.
 const thisModuleURL = new URL(import.meta.url);
 const thisModuleDir = path.dirname(thisModuleURL.href.replace(`file:///`, ``));
+
 const GRAPHICS_API_LOCATION = path
   .join(
     path.relative(thisModuleDir, paths.public),
@@ -18,13 +19,18 @@ const GRAPHICS_API_LOCATION = path
   .split(path.sep)
   .join(path.posix.sep);
 
+const RELATIVE_IMPORT_LOCATION = path
+  .relative(thisModuleDir, paths.chapters)
+  .split(path.sep)
+  .join(path.posix.sep);
+
 /**
  * ...docs go here...
  */
 function generateGraphicsModule(chapter, code, width, height) {
   // step 1: fix the imports
   code = code.replace(/(import .+? from) "([^"]+)"/g, (_, main, group) => {
-    return `${main} "../../../chapters/${chapter}/${group}"`;
+    return `${main} "${RELATIVE_IMPORT_LOCATION}/${chapter}/${group}"`;
   });
 
   // step 2: split up the code into "global" vs. "class" code

src/project-paths.js

@@ -28,6 +28,6 @@ const paths = {
   temp,
 };
 
-Object.values(paths).forEach((loc) => fs.ensureDir(loc));
+Object.values(paths).forEach((loc) => fs.ensureDirSync(loc));
 
 export default paths;