Add homepage link to VS Code README and create LLM prompt page for Chartifact creation

README.md

@@ -11,7 +11,7 @@ C H A R T I F A C T
 
 Chartifact is a low-code document format for creating interactive, data-driven pages such as reports, dashboards, and presentations. It travels like a document and works like a mini app. Designed for use with your LLM to produce a shareable artifact of your analytic conversations.
 
-• [Examples](https://microsoft.github.io/chartifact/examples) • [Try with Copilot in VsCode](https://marketplace.visualstudio.com/items?itemName=msrvida.chartifact)
+• [Examples](https://microsoft.github.io/chartifact/examples) • [Try now with your LLM](https://microsoft.github.io/chartifact/prompt) • [Try with Copilot in VsCode](https://marketplace.visualstudio.com/items?itemName=msrvida.chartifact)
 
 ## Ecosystem
 

docs/assets/examples/examples.json.folder.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "../../schema/folder_v1.json",
+  "title": "Interactive documents",
+  "docs": [
+    {
+      "title": "Why Chartifact",
+      "description": "Discover the capabilities and benefits of Chartifact for creating interactive data documents.",
+      "href": "json/why-chartifact.idoc.json"
+    },
+    {
+      "title": "Sales Dashboard",
+      "description": "A comprehensive sales dashboard with interactive charts and data visualization.",
+      "href": "json/sales-dashboard.idoc.json"
+    },
+    {
+      "title": "Sales Report",
+      "description": "A detailed sales report with tabular data and analysis.",
+      "href": "json/sales-report.idoc.json"
+    },
+    {
+      "title": "Grocery List",
+      "description": "An interactive grocery list demonstrating form controls and data management.",
+      "href": "json/grocery-list.idoc.json"
+    },
+    {
+      "title": "Mermaid Org Chart",
+      "description": "An organizational chart created using Mermaid diagrams with dynamic data.",
+      "href": "json/mermaid-org-chart.idoc.json"
+    },
+    {
+      "title": "Habit Tracker",
+      "description": "A minimal habit tracker with editable data and heatmap visualization.",
+      "href": "json/habit-tracker.idoc.json"
+    }
+  ]
+}

docs/assets/examples/features.json.folder.json

@@ -0,0 +1,58 @@
+{
+    "$schema": "../../schema/folder_v1.json",
+    "title": "Core capabilities",
+    "docs": [
+        {
+            "title": "Primer",
+            "href": "./json/features/1.primer.idoc.json"
+        },
+        {
+            "title": "Data Source: Inline JSON Data",
+            "href": "json/features/2.1.inline-json-data.idoc.json"
+        },
+        {
+            "title": "Data Source: CSV from URL", 
+            "href": "json/features/2.2.csv-from-url.idoc.json"
+        },
+        {
+            "title": "Data Source: Dynamic URL Variables",
+            "href": "json/features/2.3.dynamic-url-variables.idoc.json"
+        },
+        {
+            "title": "Data Source: Inline CSV Data",
+            "href": "json/features/2.4.inline-csv-data.idoc.json"
+        },
+        {
+            "title": "Chart",
+            "href": "json/features/3.chart.idoc.json"
+        },
+        {
+            "title": "Table",
+            "href": "json/features/4.table.idoc.json"
+        },
+        {
+            "title": "Styling",
+            "href": "json/features/5.styling.idoc.json"
+        },
+        {
+            "title": "Data Transformations",
+            "href": "json/features/6.data-transformations.idoc.json"
+        },
+        {
+            "title": "Dynamic Dropdown",
+            "href": "json/features/7.dropdown.idoc.json"
+        },
+        {
+            "title": "Presets",
+            "href": "json/features/8.presets.idoc.json"
+        },
+        {
+            "title": "Mermaid",
+            "href": "json/features/9.mermaid.idoc.json"
+        },
+        {
+            "title": "Images",
+            "href": "json/features/10.images.idoc.json"
+        }
+    ]
+}

docs/dist/v1/chartifact-toolbar.css

@@ -57,6 +57,11 @@
   margin-top: 0;
 }
 
+.chartifact-toolbar .toolbar-mode {
+  font-size: smaller;
+  opacity: 0.8;
+}
+
 /* Default: stack toolbar sections vertically */
 .chartifact-toolbar .toolbar-item {
   margin: 6px 0;

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

@@ -2576,6 +2576,8 @@ ${guardedJs}
       if (setHash) {
         setHashParam("page", docIndex + 1);
       }
+      const mode = folder.docs[docIndex].href.endsWith(".idoc.md") ? "markdown" : "json";
+      host.toolbar.mode = mode;
       host.toolbar.addChildren(/* @__PURE__ */ createElement(FolderDisplay, { ...{ ...props, docIndex } }));
       const pageSelect = document.querySelector("#pageSelect");
       if (pageSelect) {
@@ -3283,9 +3285,15 @@ ${htmlJsonJs}
       createElement(
         "div",
         { className: "toolbar-item" },
-        createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"),
-        createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"),
-        createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")
+        createElement(
+          "span",
+          { className: "toolbar-mode" },
+          displayMode,
+          " mode "
+        ),
+        createElement("button", { type: "button", style: { display: restartDisplay }, onClick: restartClick }, "start over"),
+        createElement("button", { type: "button", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"),
+        createElement("button", { type: "button", style: { display: downloadDisplay }, onClick: downloadClick, id: "download" }, "download")
       ),
       createElement(
         "div",
@@ -3338,7 +3346,7 @@ ${htmlJsonJs}
         throw new Error("Toolbar element not found");
       }
       this.props = {
-        mode: this.mode,
+        mode: null,
         restartClick: () => window.location.reload(),
         tweakClick: () => {
           this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
@@ -3405,7 +3413,7 @@ ${htmlJsonJs}
       this.render();
     }
     render() {
-      mount(ToolbarElement(this.props), this.toolbarElement);
+      mount(ToolbarElement({ ...this.props, mode: this.mode }), this.toolbarElement);
       this.downloadButton = this.toolbarElement.querySelector("#download");
       this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
     }

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

@@ -313,7 +313,7 @@ ${htmlJsonJs}
     const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml, children } = props;
     const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
     const displayMode = mode === "json" ? "json" : "markdown";
-    return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
+    return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("span", { className: "toolbar-mode" }, displayMode, " mode "), /* @__PURE__ */ createElement("button", { type: "button", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", style: { display: downloadDisplay }, onClick: downloadClick, id: "download" }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
       position: "absolute",
       display: "none",
       padding: "12px 16px",
@@ -338,7 +338,7 @@ ${htmlJsonJs}
         throw new Error("Toolbar element not found");
       }
       this.props = {
-        mode: this.mode,
+        mode: null,
         restartClick: () => window.location.reload(),
         tweakClick: () => {
           this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
@@ -403,7 +403,7 @@ ${htmlJsonJs}
       this.render();
     }
     render() {
-      mount(ToolbarElement(this.props), this.toolbarElement);
+      mount(ToolbarElement({ ...this.props, mode: this.mode }), this.toolbarElement);
       this.downloadButton = this.toolbarElement.querySelector("#download");
       this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
     }

docs/examples-json.html

@@ -0,0 +1,49 @@
+---
+layout: default
+title: Chartifact Examples
+---
+<a href="/chartifact/">Chartifact home</a>
+<a id="github-repo" href="https://github.com/microsoft/chartifact">GitHub Repository</a>
+
+<h1>Chartifact Examples (json format)</h1>
+
+<p>Explore these interactive documents to see what's possible with Chartifact. <a href="./prompt">Want to create your own? Use AI to get started!</a></p>
+
+<h2>Interactive documents</h2>
+<a href="/chartifact/view?load=../assets/examples/examples.json.folder.json">view all</a>
+<ul>
+<li><a href="/chartifact/view/?load=../assets/examples/json/why-chartifact.idoc.json">Why Chartifact</a>: Discover the capabilities and benefits of Chartifact for creating interactive data documents.</li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/sales-dashboard.idoc.json">Sales Dashboard</a>: A comprehensive sales dashboard with interactive charts and data visualization.</li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/sales-report.idoc.json">Sales Report</a>: A detailed sales report with tabular data and analysis.</li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/grocery-list.idoc.json">Grocery List</a>: An interactive grocery list demonstrating form controls and data management.</li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/mermaid-org-chart.idoc.json">Mermaid Org Chart</a>: An organizational chart created using Mermaid diagrams with dynamic data.</li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/habit-tracker.idoc.json">Habit Tracker</a>: A minimal habit tracker with editable data and heatmap visualization.</li>
+</ul>
+<h2>Core capabilities</h2>
+<a href="/chartifact/view?load=../assets/examples/features.json.folder.json">view all</a>
+<ul>
+<li><a href="/chartifact/view/?load=../assets/examples/./json/features/1.primer.idoc.json">Primer</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/2.1.inline-json-data.idoc.json">Data Source: Inline JSON Data</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/2.2.csv-from-url.idoc.json">Data Source: CSV from URL</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/2.3.dynamic-url-variables.idoc.json">Data Source: Dynamic URL Variables</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/2.4.inline-csv-data.idoc.json">Data Source: Inline CSV Data</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/3.chart.idoc.json">Chart</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/4.table.idoc.json">Table</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/5.styling.idoc.json">Styling</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/6.data-transformations.idoc.json">Data Transformations</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/7.dropdown.idoc.json">Dynamic Dropdown</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/8.presets.idoc.json">Presets</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/9.mermaid.idoc.json">Mermaid</a></li>
+<li><a href="/chartifact/view/?load=../assets/examples/json/features/10.images.idoc.json">Images</a></li>
+</ul>
+
+<h2>Downloads</h2>
+<ul>
+  <li><a href="/chartifact/assets/chartifact-examples.zip" download>Download All Examples (ZIP)</a></li>
+  <li><a href="/chartifact/assets/chartifact-markdown-examples.zip" download>Download Markdown Only (ZIP)</a></li>
+  <li><a href="/chartifact/assets/chartifact-json-examples.zip" download>Download JSON + Schema (ZIP)</a></li>
+</ul>
+
+<p>Want to see Markdown examples? <a href="/chartifact/examples.html">Click here for Markdown format examples</a></p>
+
+</body>

docs/examples.html

@@ -5,9 +5,9 @@
 <a href="/chartifact/">Chartifact home</a>
 <a id="github-repo" href="https://github.com/microsoft/chartifact">GitHub Repository</a>
 
-<h1>Chartifact Examples</h1>
+<h1>Chartifact Examples (markdown format)</h1>
 
-<a href="/chartifact/assets/chartifact-examples.zip" download>Download All Examples (ZIP)</a>
+<p>Explore these interactive documents to see what's possible with Chartifact. <a href="./prompt">Want to create your own? Use AI to get started!</a></p>
 
 <h2>Interactive documents</h2>
 <a href="/chartifact/view?load=../assets/examples/examples.markdown.folder.json">view all</a>
@@ -36,4 +36,14 @@ <h2>Core capabilities</h2>
 <li><a href="/chartifact/view/?load=../assets/examples/markdown/features/9.mermaid.idoc.md">Mermaid</a></li>
 <li><a href="/chartifact/view/?load=../assets/examples/markdown/features/10.images.idoc.md">Images</a></li>
 </ul>
+
+<h2>Downloads</h2>
+<ul>
+  <li><a href="/chartifact/assets/chartifact-examples.zip" download>Download All Examples (ZIP)</a></li>
+  <li><a href="/chartifact/assets/chartifact-markdown-examples.zip" download>Download Markdown Only (ZIP)</a></li>
+  <li><a href="/chartifact/assets/chartifact-json-examples.zip" download>Download JSON + Schema (ZIP)</a></li>
+</ul>
+
+<p>Want to see JSON examples? <a href="/chartifact/examples-json.html">Click here for JSON format examples</a></p>
+
 </body>

docs/index.html

@@ -13,7 +13,7 @@
 <h1>Chartifact</h1>
 <p><strong>Declarative, interactive data documents</strong></p>
 <p>Chartifact is a low-code document format for creating interactive, data-driven pages such as reports, dashboards, and presentations. It travels like a document and works like a mini app. Designed for use with your LLM to produce a shareable artifact of your analytic conversations.</p>
-<p>• <a href="./examples">Examples</a> • <a href="https://marketplace.visualstudio.com/items?itemName=msrvida.chartifact">Try with Copilot in VsCode</a></p>
+<p>• <a href="./examples">Examples</a> • <a href="./prompt">Try now with your LLM</a> • <a href="https://marketplace.visualstudio.com/items?itemName=msrvida.chartifact">Try with Copilot in VsCode</a></p>
 <h2>Ecosystem</h2>
 <p>The Chartifact GitHub repo has source code for these interoperating modules:</p>
 <ul>