Reading eleventyConfig in *.js Global Data Files

[michrome]

Hi

How do I read the eleventyConfig while in a *.js Global Data File? I'm trying to find the value of the Output Directory (i.e. the config that is '_site' by default).

Perhaps a more important question is "I am doing it right?"! I have images stored in Contentful that I want to copy into the output directory. My thinking is that I can have a _data/photos.js file that will:

• Return an array of those images (and their metadata) for use in my templates
• Download the images to the output folder

Is this the correct approach or should I be downloading the images at a different point in the build lifecycle?

Thank you!

[pdehaan]

I usually just hardcode paths since I almost never change that, but you could maybe do one of the following:

• export the directories separately in your .eleventy.js config file:

  // .eleventy.js
  const dir = {
    input: 'src',
    output: 'www'
  }
  
  module.exports = eleventyConfig => {
    return {
      dir
    };
  };
  
  module.exports.dir = dir;

  Now, in your src/_data/photos.js file, you can just import the dir export directly:

  // src/_data/photos.js
  const dir = require("../../.eleventy").dir;
  
  // output dir is: "www"
  console.log(`output dir is: "${dir.output}"`);
  
  module.exports = [
    {source: "https://example.com/photo/1.jpg", caption: "neat photo"}
  ];

• define the paths in your package.json file and import that in your data files and .eleventy.js config file:

  // Somewhere in your package.json file
  "eleventyConfig": {
  "dir": {
    "input": "src",
    "output": "www"
  }
  }

  // .eleventy.js
  const cfg = require("./package.json").eleventyConfig;
  
  module.exports = eleventyConfig => {
  return {
    dir: cfg.dir
  };
  };

  // src/_data/photos.js
  const dir = require("../../package.json").eleventyConfig.dir;
  
  console.log(`output dir is: "${dir.output}"`);
  
  module.exports = [
  {source: "https://example.com/photo/1.jpg", caption: "neat photo"}
  ];

  Plus, since package.json gets copied into the various scopes, you can access the dir variables in your Nunjucks or Liquid or whatever templates:

  <!-- src/pages/about.njk -->
  <pre>{{ pkg.eleventyConfig.dir | dump(2) | safe }}</pre>
  <!--
  <pre>
  {
  "input": "src",
  "output": "www"
  }
  </pre>
  -->

[pdehaan]

As for the question of how and when to download external assets, that is a lot trickier to answer. A lot of times I'll just have some other npm script that I run manually to sync the data so I'm not constantly refetching data that hasn't changed or possibly hitting quota issues with external APIs (ie: GitHub).

[michrome]

Hey, @pdehaan thank you so much for taking the time to write your detailed reply.

My understanding then is that we can't reliably read the value of the Output Directory using JavaScript in Global Data Files. For example, if the Output Directory was set via the command line --output flag.

I was hoping there was a way of getting a reference to the Eleventy instance (so I could read its outputDir) or the configuration instance so I could read its dir.output.

---

Point taken on API limits: I planned to check if I already had the assets cached locally in the output directory before re-downloading them. Sounds like doing that from the Global Data File is reasonable as the images are data in my use case.