import eleventyPluginNavigation from '@11ty/eleventy-navigation';
import eleventyPluginWebc from '@11ty/eleventy-plugin-webc';
import { eleventyImagePlugin } from '@11ty/eleventy-img';

const IMAGE_TRANSFORM_OPTS = {
  // Set global default options
  formats: ['avif', 'webp', 'auto'],
  sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
  sharpPngOptions: { compressionLevel: 9 },
  urlPath: '/img/',
  // Notably `outputDir` is resolved automatically
  // to the project output directory
  defaultAttributes: {
    loading: 'lazy',
    decoding: 'async',
    sizes: '(min-width: 64em) 500px, (min-width: 50em) 420px, 375px'
  }
};

export default async function (eleventyConfig) {
  eleventyConfig.addWatchTarget('./src/css/');
  eleventyConfig.addPassthroughCopy('./src/fonts/');

  eleventyConfig.addCollection('sebin', (collection) =>
    collection.getFilteredByGlob('./src/sebin/*.md')
  );
  eleventyConfig.addCollection('viktor', (collection) =>
    collection.getFilteredByGlob('./src/viktor/*.md')
  );
  eleventyConfig.addCollection('jarek', (collection) =>
    collection.getFilteredByGlob('./src/jarek/*.md')
  );

  eleventyConfig.addPlugin(eleventyPluginWebc, {
    components: ['src/components/*.webc', 'npm:@11ty/eleventy-img/*.webc']
  });
  eleventyConfig.addPlugin(eleventyPluginNavigation);
  eleventyConfig.addPlugin(eleventyImagePlugin, IMAGE_TRANSFORM_OPTS);
}

export const config = {
  dir: {
    input: 'src',
    output: 'public',
    layouts: 'layouts',
    includes: 'includes'
  },
  markdownTemplateEngine: 'webc'
};