eleventy-plugin-uncharted 1.0.0-beta.2 → 1.0.0-beta.3

package/eleventy.config.js

@@ -30,7 +30,8 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
  * @param {boolean|string} [options.downloadData] - Enable download links globally (individual charts can override)
  * @param {Object} [options.image] - Image generation options
  * @param {boolean} [options.image.enabled=false] - Enable PNG image generation
- * @param {string} [options.image.outputDir='/images/charts/'] - Output directory for images
+ * @param {string} [options.image.outputDir='/images/charts/'] - Output directory for images (URL path)
+ * @param {string} [options.image.cacheDir] - Source directory for cached images (enables caching when set)
  * @param {number} [options.image.width=800] - Default image width in pixels
  * @param {number} [options.image.height=400] - Default image height in pixels
  * @param {number} [options.image.scale=2] - Device scale factor (2 for retina)
@@ -69,7 +70,8 @@ export default function(eleventyConfig, options = {}) {
 
   // Image generation options
   const imageOptions = normalizeImageOptions(options.image);
-  const skipImageGeneration = shouldSkipInDevMode(imageOptions);
+  const skipImageGeneration = shouldSkipInDevMode(imageOptions) ||
+    process.argv.includes('--skip-images');
 
   // Clear image URLs at start of each build
   clearImageUrls();
@@ -123,6 +125,15 @@ export default function(eleventyConfig, options = {}) {
     });
   }
 
+  // Image cache passthrough - copies cached images to output
+  if (imageOptions.cacheDir) {
+    const cacheDirClean = imageOptions.cacheDir.replace(/^\/|\/$/g, '');
+    const outputDirClean = imageOptions.outputDir.replace(/^\/|\/$/g, '');
+    eleventyConfig.addPassthroughCopy({
+      [cacheDirClean]: outputDirClean
+    });
+  }
+
   eleventyConfig.addShortcode('chart', function(chartId) {
     // Get resolved data directory (from Eleventy config or plugin options)
     const resolvedDataDir = getDataDir();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-plugin-uncharted",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "An Eleventy plugin that renders CSS-based charts from CSV data using shortcodes",
   "main": "eleventy.config.js",
   "type": "module",

package/src/image/index.js

@@ -15,6 +15,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
  * @typedef {Object} ImageOptions
  * @property {boolean} [enabled=false] - Enable image generation
  * @property {string} [outputDir='/images/charts/'] - Output directory for images (URL path)
+ * @property {string} [cacheDir=null] - Source directory for cached images (enables caching when set)
  * @property {number} [width=800] - Default image width
  * @property {number} [height=400] - Default image height
  * @property {number} [scale=2] - Device scale factor (2 for retina)
@@ -33,6 +34,7 @@ const imageUrls = new Map();
 const defaultOptions = {
   enabled: false,
   outputDir: '/images/charts/',
+  cacheDir: null,
   width: 800,
   height: 400,
   scale: 2,
@@ -83,6 +85,23 @@ export function getImageUrl(chartId, chartConfig, globalOptions) {
   return `${dir}${filename}.png`;
 }
 
+/**
+ * Get the cache file path for a chart image.
+ * @param {string} chartId - Chart identifier
+ * @param {Object} chartConfig - Chart configuration
+ * @param {ImageOptions} globalOptions - Global image options
+ * @returns {string|null} Absolute cache path, or null if caching disabled
+ */
+export function getCachePath(chartId, chartConfig, globalOptions) {
+  if (!globalOptions.cacheDir) return null;
+
+  const imageConfig = chartConfig.image || {};
+  const filename = imageConfig.filename || chartId;
+  const cacheDir = globalOptions.cacheDir.replace(/\/$/, '');
+
+  return path.resolve(process.cwd(), cacheDir, `${filename}.png`);
+}
+
 /**
  * Store the image URL for a chart (for shortcode lookup).
  * @param {string} chartId
@@ -143,6 +162,7 @@ export function queueChartForImage(chartId, chartHtml, chartConfig, globalOption
 
   const outputPath = getImageOutputPath(chartId, chartConfig, globalOptions, outputDir);
   const url = getImageUrl(chartId, chartConfig, globalOptions);
+  const cachePath = getCachePath(chartId, chartConfig, globalOptions);
 
   // Store URL for shortcode lookup
   storeImageUrl(chartId, url);
@@ -152,7 +172,8 @@ export function queueChartForImage(chartId, chartHtml, chartConfig, globalOption
     id: chartId,
     html: chartHtml,
     config,
-    outputPath
+    outputPath,
+    cachePath
   });
 }
 
@@ -171,7 +192,10 @@ export async function processQueue(options) {
   if (!available) {
     const count = getQueueSize();
     clearQueue();
-    console.warn(`[uncharted] Puppeteer not installed. Skipped ${count} chart image(s).`);
+    // Suppress warning if cacheDir is set (cached images will be used via passthrough)
+    if (!options.cacheDir) {
+      console.warn(`[uncharted] Puppeteer not installed. Skipped ${count} chart image(s).`);
+    }
     return { success: [], failed: [], skipped: true };
   }
 

package/src/image/renderer.js

@@ -170,7 +170,8 @@ ${stylesheetLinks}
  * @param {Object} chart - Chart data
  * @param {string} chart.html - Chart HTML
  * @param {Object} chart.config - Image configuration
- * @param {string} chart.outputPath - Output file path
+ * @param {string} chart.outputPath - Output file path (_site)
+ * @param {string} [chart.cachePath] - Cache file path (source directory, if caching enabled)
  * @param {string} css - Chart CSS content
  * @param {Object} defaults - Default image options
  * @returns {Promise<void>}
@@ -183,6 +184,9 @@ async function renderChart(page, chart, css, defaults) {
   const background = config.background || '#ffffff';
   const stylesheets = config.stylesheets || defaults.stylesheets || [];
 
+  // Use cache path if provided, otherwise write directly to output
+  const writePath = chart.cachePath || chart.outputPath;
+
   // Set viewport
   await page.setViewport({
     width,
@@ -206,14 +210,14 @@ async function renderChart(page, chart, css, defaults) {
     }
 
     // Ensure output directory exists
-    const outputDir = path.dirname(chart.outputPath);
+    const outputDir = path.dirname(writePath);
     if (!fs.existsSync(outputDir)) {
       fs.mkdirSync(outputDir, { recursive: true });
     }
 
     // Take screenshot
     await page.screenshot({
-      path: chart.outputPath,
+      path: writePath,
       type: 'png',
       omitBackground: background === 'transparent'
     });