silexlabs / eleventy-plugin-directus Goto Github PK

I was wondering the best way of downloading directus' assets and storing them locally instead of hotlinking to my directus instance using directus_asseturl

internet2000.net already seems to do this (e.g. https://internet2000.net/optimized/8a7c9b06-0d80-4b3b-9624-ebcb359e8ea3-235.webp and https://internet2000.net/uploads/93c3b71f-16fc-4a88-b883-b7be02a1e919.svg).

After a few hours of tinkering (JS is not my strong suit), I came up with a hacky solution using Eleventy-Fetch that seems to work, although it could be greatly improved:

filters/directus_asset.js

const fs = require('fs');
const EleventyFetch = require("@11ty/eleventy-fetch");


module.exports = async function (img) {
    const directus_c = this.ctx.directus // from https://github.com/11ty/eleventy/issues/813

    let url = `${directus_c.url}/assets/${img.filename_disk}?download&access_token=${directus_c.token}`;

    let imageBuffer = await EleventyFetch(url, {
        duration: "1d",
        type: "buffer"
    });

    let folder_path = `./public/img/${img.folder.name}/`
    let path = `${folder_path}${img.filename_download}`
    fs.mkdirSync(folder_path, { recursive: true })
    fs.writeFile(path, imageBuffer, "binary", (err) => err && console.error(err))

    let final_path = `/img/${img.folder.name}/${img.filename_download}`
    return final_path;
};

.eleventy.js

...
  eleventyConfig.addAsyncFilter('directus_asset', require('./filters/directus_download.js'));
...

template.njk

{% for cliente in directus.collections.Clientes %}
      <div><img src="{{ cliente.Logo | directus_asset }}" alt="{{ cliente.Nome }}"></div>
{% endfor %}

I'm not sure if this is the best way of doing this, but I was wondering if it would be possible to share how Internet2000 does it or implement a native function for doing this within the plugin.

Here is what I am working on:

• better way to fetch related data: fetch all collections without the related data and provide filter to get related data (Here is a discussion about why and how difficult it is)
• provide a filter to get related data: {% assign page = item | directus_relation: 'link' %}
• provide a filter to get translation: {% assign translated = item | directus_translate: 'fr' %}
• provide a filter to get assets URL and optionally download it from directus to eleventy's asset folder: <img src="{{ item.image | directus_asseturl: true }}"> #3
• use eleventy fetch plugin to fetch directus data
• doc to use with 11ty image plugin #3

cc @eitchtee