Show schematics as frameless SVGs and align Gmsh boundary keys

- Show the tutorial schematics as SVGs without a frame, larger, and
  inverted in dark mode (new .schematic CSS class).
- Draw the two Gmsh meshes as SVGs from their .msh files, with boundary
  names and keys, replacing the mesh screenshots.
- Tag the Gmsh physical groups bottom, left, top, right in rect.geo and
  rhom.geo, regenerate rect_quad.msh and rhom_quad.msh, and swap the
  left/right boundary conditions in the two Gmsh tutorials, so all fin
  tutorials use the same boundary keys.
- Add rect_with_hole.msh (the homepage mesh, previously on a Gist) with
  the physical groups renumbered bottom, left, top, right, hole, renumber
  rect_with_hole_quad.msh the same way, and fetch the homepage mesh from feascript.com.

Author: nikoscham

assets/cantilever-beam-1d.svg

@@ -1806,6 +1806,16 @@ html[data-theme="dark"] .theme-toggle .icon-moon {
   background: #fff;
 }
 
+/* Tutorial schematics: line art without a frame, inverted in dark mode */
+.doc .center-image img.schematic {
+  border: none;
+  background: none;
+}
+
+html[data-theme="dark"] .doc .center-image img.schematic {
+  filter: invert(0.88);
+}
+
 .doc .image-caption {
   margin: 0.5rem auto 0;
   font-size: 0.8125rem;

assets/gmsh_rect_quad.svg

@@ -447,25 +447,21 @@ <h2 data-reveal>Run a simulation with <span class="accent">a few lines.</span></
   } from "https://core.feascript.com/dist/feascript.esm.js";
 
   window.addEventListener("DOMContentLoaded", async () => {
-    // Fetch mesh from GitHub Gist (swap the URL for any other hosted .msh file)
-    const response = await fetch(
-      "https://gist.githubusercontent.com/nikoscham/0c5a78922a16111ceef42de54fc631ea/raw/aeadcd2808f5531fd0ca1ca16d198f7d1e7f8e96/rect_with_hole.msh"
-    );
+    // Fetch the Gmsh mesh from feascript.com (swap the URL for any other hosted .msh file)
+    const response = await fetch("https://feascript.com/tutorials/rect_with_hole.msh");
     const meshFile = new File([await response.text()], "rect_with_hole.msh");
 
     // Create and configure model
     const model = new FEAScriptModel();
     model.setModelConfig("heatConductionScript");
-    model.setMeshConfig({
-      parsedMesh: await importGmshMesh(meshFile),
-    });
+    model.setMeshConfig({ parsedMesh: await importGmshMesh(meshFile) });
 
     // Apply boundary conditions (Gmsh physical group tag - 1)
     model.addBoundaryCondition("0", ["constantTemperature", 200]); // Bottom
-    model.addBoundaryCondition("1", ["constantTemperature", 200]); // Right
-    model.addBoundaryCondition("2", ["convection", 1, 20]); // Top
-    model.addBoundaryCondition("3", ["symmetry"]);          // Left
-    model.addBoundaryCondition("4", ["convection", 1, 20]); // Hole surface
+    model.addBoundaryCondition("1", ["symmetry"]);                 // Left
+    model.addBoundaryCondition("2", ["convection", 1, 20]);        // Top
+    model.addBoundaryCondition("3", ["constantTemperature", 200]); // Right
+    model.addBoundaryCondition("4", ["convection", 1, 20]);        // Hole surface
 
     // Solve
     model.setSolverMethod("lusolve");

assets/gmsh_rhom_quad.svg

@@ -219,7 +219,7 @@ <h1>Cantilever Beam Under <span class="accent">a Tip Load Tutorial</span></h1>
             </p>
 
             <div class="center-image">
-              <img src="../assets/cantilever-beam-1d.png" alt="Cantilever beam schematic" width="460" />
+              <img class="schematic" src="../assets/cantilever-beam-1d.svg" alt="Cantilever beam schematic" width="600" />
               <p class="image-caption">
                 Schematic of the cantilever beam: clamped support at x=0 (w=0, &theta;=0) and a downward tip
                 point load P at x=L