Allow local files for Altair plots

.vitepress/theme/Altair.vue

@@ -32,34 +32,45 @@ export default {
         // Parse and load the chart from the URL
         async loadChart(url) {
             try {
-
-                // Get the path to check the file format
-                const urlObj = new URL(url);
-                const path = urlObj.pathname;
-
-                // Get the response from the URL
-                const response = await fetch(url);
                 let spec;
-
-                // Check if URL ends with '.html'
-                if (path.endsWith('.html')) {
-                    const htmlContent = await response.text();
+                // Determine if the URL is local or remote
+                if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                    const htmlContent = await this.fetchLocalFile(url);
                     spec = await parseVegaSpecFromHTML(htmlContent);
-                }
-                // Check if URL ends with '.json'
-                else if (path.endsWith('.json')) {
-                    spec = await response.json();
-                }
-                else {
-                    console.error('Unsupported file format');
-                    return;
-                }
+                } else {
+
+                    // Get the path to check the file format
+                    const urlObj = new URL(url);
+                    const path = urlObj.pathname;
+                    // Get the response from the URL
+                    const response = await fetch(url);
 
+                    // Check if URL ends with '.html'
+                    if (path.endsWith('.html')) {
+                        const htmlContent = await response.text();
+                        spec = await parseVegaSpecFromHTML(htmlContent);
+                    }
+                    // Check if URL ends with '.json'
+                    else if (path.endsWith('.json')) {
+                        spec = await response.json();
+                    }
+                    else {
+                        console.error('Unsupported file format');
+                        return;
+                    }
+                }
                 this.renderChart(spec);
             } catch (error) {
                 console.error('Error loading Vega spec:', error);
             }
         },
+        // Fetch the text from local files
+        async fetchLocalFile(filePath) {
+            const response = await fetch(filePath);
+            if (!response.ok) throw new Error('Failed to fetch local file');
+            console.log('response.text()', response);
+            return await response.text();
+        },
         // Render the chart using VegaEmbed
         renderChart(spec) {
             vegaEmbed(this.$refs.vegaContainer, spec, {

contributing.md

@@ -265,7 +265,15 @@ To add you're `Altair` plot simply use the following syntax:
 
 Where the `:spec-url` points to either a `JSON` or `HTML` file exported from `Altair`. It's **key** that this file comes from GitHub, and that the URL points to the **raw** data (i.e. the URL starts with `https://raw.githubusercontent`).
 
-You can also toggle whether you want to show ha shadow around your plot by setting `:showShadow` to false (i.e. `:showShadow="false"`).
+:::tip Note
+You can provide a path to a local file as well. Place the HTML file in a subdirectory of `public/` (i.e. `public/htmls/`). **Don't** include `public` in the path. Also, make sure to have a leading `/` in the path. For example: 
+```bash
+/htmls/path-to-my-altair-plot.html
+```
+:::
+
+
+You can also toggle whether you want to show a shadow around your plot by setting `:showShadow` to false (i.e. `:showShadow="false"`).
 
 The result will look something like this: