all existing boards can now be loaded into the editor

Author: splitbrain

.gitignore

@@ -3,3 +3,4 @@ node_modules
 
 public/dist
 public/pinouts/*.svg
+public/index.json

public/index.html

@@ -16,52 +16,12 @@
     <div class="panel panel-editor">
         <div id="editor"></div>
         <p>
-            <label for="example-select">Load an Example:</label>
+            <label for="example-select">Load an existing definition:</label>
             <select name="examples" id="example-select">
-                <option value="">--Please choose an example--</option>
+                <option value="">pick a board</option>
             </select>
         </p>
-        <script>
-            document.addEventListener('DOMContentLoaded', () => {
-                const selectElement = document.getElementById('example-select');
 
-                fetch('index.json')
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error(`HTTP error! status: ${response.status}`);
-                        }
-                        return response.json();
-                    })
-                    .then(data => {
-                        // Sort examples alphabetically by title
-                        const sortedExamples = Object.entries(data).sort(([, titleA], [, titleB]) =>
-                            titleA.localeCompare(titleB)
-                        );
-
-                        sortedExamples.forEach(([path, title]) => {
-                            const option = document.createElement('option');
-                            option.value = path;
-                            option.textContent = title;
-                            selectElement.appendChild(option);
-                        });
-                    })
-                    .catch(error => {
-                        console.error('Error loading or parsing index.json:', error);
-                        // Optionally disable the select or show an error message
-                        selectElement.disabled = true;
-                        const errorOption = document.createElement('option');
-                        errorOption.textContent = 'Error loading examples';
-                        selectElement.appendChild(errorOption);
-                    });
-
-                selectElement.addEventListener('change', (event) => {
-                    const selectedPath = event.target.value;
-                    if (selectedPath) {
-                        window.location.search = `?load=${encodeURIComponent(selectedPath)}`;
-                    }
-                });
-            });
-        </script>
 
         <p>
             <b>Learn more</b> about the tool and available config options in the
@@ -82,5 +42,49 @@
 <p>
     <small>A tool made by <a href="https://www.splitbrain.org">splitbrain</a></small>
 </p>
+
+
+<script>
+    // load existing definitions
+    document.addEventListener('DOMContentLoaded', () => {
+        const selectElement = document.getElementById('example-select');
+
+        fetch('index.json')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Sort examples alphabetically by title
+                const sortedExamples = Object.entries(data).sort(([, titleA], [, titleB]) =>
+                    titleA.localeCompare(titleB)
+                );
+
+                sortedExamples.forEach(([path, title]) => {
+                    const option = document.createElement('option');
+                    option.value = path;
+                    option.textContent = title;
+                    selectElement.appendChild(option);
+                });
+            })
+            .catch(error => {
+                console.error('Error loading or parsing index.json:', error);
+                // Optionally disable the select or show an error message
+                selectElement.disabled = true;
+                const errorOption = document.createElement('option');
+                errorOption.textContent = 'Error loading examples';
+                selectElement.appendChild(errorOption);
+            });
+
+        selectElement.addEventListener('change', (event) => {
+            const selectedPath = event.target.value;
+            if (selectedPath) {
+                window.location.search = `?load=${encodeURIComponent(selectedPath)}`;
+            }
+        });
+    });
+</script>
 </body>
 </html>

src/Editor.js

@@ -94,7 +94,7 @@ export class Editor {
             if (savedYaml) {
                 this.ace.setValue(savedYaml, -1);
             } else {
-                this.ace.setValue("# Hi!\n# New here? Load an example from below!", -1);
+                this.ace.setValue("# Hi!\n# New here? Load an existing definition from below!", -1);
             }
         }
     }