Docker for local jekyll

.gitignore

@@ -140,3 +140,4 @@ dist
 # jekyll cache and generated files
 .jekyll-cache
 _site
+docs/Gemfile.lock

dev.md

@@ -0,0 +1,34 @@
+# Jekyll Local Development with Docker
+
+This repository includes Docker setup for running Jekyll locally to preview the GitHub Pages site.
+
+## Quick Start
+
+### Start Jekyll
+```bash
+cd docker-jekyll-local
+docker-compose up
+```
+
+### View your site
+Open http://localhost:4000/chartifact/ in your browser
+
+### Stop Jekyll
+Type ctrl-C in the terminal running `docker-compose up`
+
+## Other useful commands
+
+### Rebuild after changes
+```bash
+cd docker-jekyll-local
+docker-compose build
+```
+
+## Files
+
+- `docker-jekyll-local/Dockerfile` - Jekyll container setup for local development
+- `docker-jekyll-local/docker-compose.yml` - Container orchestration for local development
+- `docs/Gemfile` - Jekyll dependencies (same as GitHub Pages)
+- `docs/_config.yml` - Jekyll configuration
+
+The setup uses the same `github-pages` gem as GitHub Pages to ensure compatibility.

docker-jekyll-local/Dockerfile

@@ -0,0 +1,13 @@
+FROM jekyll/jekyll:4.2.2
+
+WORKDIR /srv/jekyll
+
+# Copy the docs directory
+COPY docs/ ./
+
+# Install dependencies
+RUN bundle install
+
+EXPOSE 4000
+
+CMD ["bundle", "exec", "jekyll", "serve", "--host", "0.0.0.0", "--port", "4000"]

docker-jekyll-local/docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  jekyll:
+    build:
+      context: ..
+      dockerfile: docker-jekyll-local/Dockerfile
+    ports:
+      - "4000:4000"
+    volumes:
+      - ../docs:/srv/jekyll
+    command: bundle exec jekyll serve --host 0.0.0.0 --port 4000 --force_polling

docs/Gemfile

@@ -0,0 +1,4 @@
+source "https://rubygems.org"
+
+gem "github-pages", group: :jekyll_plugins
+gem "webrick", "~> 1.7"

docs/_config.yml

@@ -1 +1,7 @@
 baseurl: /chartifact
+repository: microsoft/chartifact
+
+# Development settings (local only - not used by GitHub Pages)
+webrick:
+  headers:
+    Access-Control-Allow-Origin: "*"  # CORS for sandbox/iframe development

docs/_layouts/default.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
     <meta name="description" content="{{ page.description | default: site.description }}">
-    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}" />
+    <link rel="stylesheet" href="{{ '/assets/css/page.css' | relative_url }}" />
     <link rel="stylesheet" href="{{ '/assets/css/footer.css' | relative_url }}" />
     <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
     <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>

docs/dist/v1/chartifact.editor.umd.js

@@ -2142,17 +2142,17 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     getDependencies() {
       const { hostname, origin } = window.location;
-      const url = hostname === "localhost" ? origin : "https://microsoft.github.io/chartifact";
+      const url = hostname === "localhost" ? origin : "https://microsoft.github.io";
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
-<link href="${url}/dist/v1/chartifact-reset.css" rel="stylesheet" />
+<link href="${url}/chartifact/dist/v1/chartifact-reset.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"><\/script>
 <script src="https://unpkg.com/css-tree/dist/csstree.js"><\/script>
 <script src="https://unpkg.com/js-yaml/dist/js-yaml.min.js"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"><\/script>
 <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"><\/script>
-<script src="${url}/dist/v1/chartifact.markdown.umd.js"><\/script>
+<script src="${url}/chartifact/dist/v1/chartifact.markdown.umd.js"><\/script>
 `;
     }
   }

docs/dist/v1/chartifact.host.umd.js

@@ -2142,17 +2142,17 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     getDependencies() {
       const { hostname, origin } = window.location;
-      const url = hostname === "localhost" ? origin : "https://microsoft.github.io/chartifact";
+      const url = hostname === "localhost" ? origin : "https://microsoft.github.io";
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
-<link href="${url}/dist/v1/chartifact-reset.css" rel="stylesheet" />
+<link href="${url}/chartifact/dist/v1/chartifact-reset.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"><\/script>
 <script src="https://unpkg.com/css-tree/dist/csstree.js"><\/script>
 <script src="https://unpkg.com/js-yaml/dist/js-yaml.min.js"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"><\/script>
 <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"><\/script>
-<script src="${url}/dist/v1/chartifact.markdown.umd.js"><\/script>
+<script src="${url}/chartifact/dist/v1/chartifact.markdown.umd.js"><\/script>
 `;
     }
   }
@@ -3119,10 +3119,10 @@ ${htmlJsonJs}
       if (!this.toolbarElement) {
         throw new Error("Toolbar element not found");
       }
-      const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/chartifact", target: "_blank" };
+      const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
       const html = `
 <div>
-    <a href="${home}" target="${target}">Chartifact</a> viewer
+    <a href="${home}chartifact/" target="${target}">Chartifact</a> viewer
 </div>
 <div id="folderSpan" style="display: none;"></div>
 <div>

docs/dist/v1/chartifact.sandbox.umd.js

@@ -303,17 +303,17 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     getDependencies() {
       const { hostname, origin } = window.location;
-      const url = hostname === "localhost" ? origin : "https://microsoft.github.io/chartifact";
+      const url = hostname === "localhost" ? origin : "https://microsoft.github.io";
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
-<link href="${url}/dist/v1/chartifact-reset.css" rel="stylesheet" />
+<link href="${url}/chartifact/dist/v1/chartifact-reset.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"><\/script>
 <script src="https://unpkg.com/css-tree/dist/csstree.js"><\/script>
 <script src="https://unpkg.com/js-yaml/dist/js-yaml.min.js"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"><\/script>
 <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"><\/script>
-<script src="${url}/dist/v1/chartifact.markdown.umd.js"><\/script>
+<script src="${url}/chartifact/dist/v1/chartifact.markdown.umd.js"><\/script>
 `;
     }
   }

docs/dist/v1/chartifact.toolbar.umd.js

@@ -188,10 +188,10 @@ ${htmlJsonJs}
       if (!this.toolbarElement) {
         throw new Error("Toolbar element not found");
       }
-      const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/chartifact", target: "_blank" };
+      const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
       const html = `
 <div>
-    <a href="${home}" target="${target}">Chartifact</a> viewer
+    <a href="${home}chartifact/" target="${target}">Chartifact</a> viewer
 </div>
 <div id="folderSpan" style="display: none;"></div>
 <div>

packages/sandbox/src/sandbox.ts

@@ -107,17 +107,17 @@ export class Sandbox {
         const { hostname, origin } = window.location;
         const url = (hostname === 'localhost')
             ? origin
-            : 'https://microsoft.github.io/chartifact';
+            : 'https://microsoft.github.io';
         return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
-<link href="${url}/dist/v1/chartifact-reset.css" rel="stylesheet" />
+<link href="${url}/chartifact/dist/v1/chartifact-reset.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
 <script src="https://unpkg.com/css-tree/dist/csstree.js"></script>
 <script src="https://unpkg.com/js-yaml/dist/js-yaml.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"></script>
 <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
-<script src="${url}/dist/v1/chartifact.markdown.umd.js"></script>
+<script src="${url}/chartifact/dist/v1/chartifact.markdown.umd.js"></script>
 `;
     }
 }

packages/toolbar/src/toolbar.ts

@@ -35,11 +35,11 @@ export class Toolbar {
 
         const { home, target } = (window.location.hostname === 'localhost')
             ? { home: '/', target: '_self' }
-            : { home: 'https://microsoft.github.io/chartifact', target: '_blank' };
+            : { home: 'https://microsoft.github.io/', target: '_blank' };
 
         const html = `
 <div>
-    <a href="${home}" target="${target}">Chartifact</a> viewer
+    <a href="${home}chartifact/" target="${target}">Chartifact</a> viewer
 </div>
 <div id="folderSpan" style="display: none;"></div>
 <div>