search

victornpb / eleventy-plugin-page-assets

MIT License
21 stars 16 forks source link

Assets not routing to _site (?) #1

Closed arrowtype closed 3 years ago

arrowtype commented 3 years ago

UPDATE: I made a small error in my config, and there is a small error in this plugin, fixed by https://github.com/victornpb/eleventy-plugin-page-assets/pull/2. I’m leaving this issue here in case it helps others, but closing it because the problem has been found, along with a (hopefully temporary) workaround.

@victornpb This seems like exactly what I am looking for in a basic image plugin for 11ty. I came across it in this issue comment. Thanks so much for taking the time to make it and share it!

Unfortunately, I’m having difficulties getting it to work so far. I’m using a setup (based on the 11ty-starter-blog) which I think should be working well, which so far really only has the customization of using permalinks.

Here is a public repo version of my WIP 11ty blog: https://github.com/arrowtype/blog--public_src

My input:

📁 src/posts/
  📁 2020-12-15--some-title/
    📄 index.md
    📁 assets/
      🖼 cover.png
      🖼 image.jpg
  📁 2020-06-18--good-title/
    📄 index.md 
    📁 assets/
      🖼 cover.png

My expected output is something like this (but I mostly just want it to work with controlled permalinks, and I’m not too worried about the specific asset folder structure):

📁 _site/posts/
  📁 some-title/
    📄 index.md
    📁 assets/
      🖼 cover.png
      🖼 image.jpg
  📁 good-title/
    📄 index.md 
    📁 assets/
      🖼 cover.png

So, if you visit one of the posts, you will see that the image is not yet getting copied in.

My .eleventy.js includes the following, as recommended in your readme with a couple of the options set:

const pageAssetsPlugin = require('eleventy-plugin-page-assets');

eleventyConfig.addPlugin(pageAssetsPlugin, {
      mode: "directory",
      postsMatching: "src/posts/*/*.md",
      recursive: true,
  });

However, the images just aren’t getting moved along with the posts.

I have my permalinks already working, following the default 11ty recommendations for using a permalink in my frontmatter. Potentially, might this process be tripping up the plugin? Or, am I missing a step?

Thank you for any thoughts or advice!

tusamni commented 3 years ago

Are you getting any issues when building the site? I have a similar structure and am getting issues when building the site.

arrowtype commented 3 years ago

Nope, my build looks like this:

▶ npm run serve

> eleventy-base-blog@5.0.2 serve /Users/stephennixon/code/blog
> eleventy --serve

Writing _site/sitemap.xml from ./sitemap.xml.njk.
Writing _site/feed/feed.xml from ./feed/feed.njk.
Writing _site/feed/.htaccess from ./feed/htaccess.njk.
Writing _site/feed/feed.json from ./feed/json.njk.
Writing _site/404.html from ./404.md.
Writing _site/index.html from ./index.njk.
Writing _site/page-list/index.html from ./page-list.njk.
Writing _site/tags/index.html from ./tags-list.njk.
Writing _site/tags/tips/index.html from ./tags.njk.
Writing _site/posts/getting-started/index.html from ./posts/2020-05-01--getting-started-in-type/index.md.
Writing _site/posts/better-zips/index.html from ./posts/2020-08-25--making-better-zips/index.md.
Writing _site/posts/drawbot-vscode/index.html from ./posts/2020-06-15--drawbot-in-vscode/index.md.
Writing _site/posts/intro-to-fonttools/index.html from ./posts/2020-06-16--intro-to-fonttools/index.md.
Writing _site/posts/font-design-on-a-chromebook/index.html from ./posts/2020-11-01--font-design-on-a-chromebook/index.md.
Writing _site/posts/exploring-HOI/index.html from ./posts/2020-11-08--nonlinear-interpolation/index.md.
Writing _site/posts/robofont-tips/index.html from ./posts/2020-12-11--robofont-tips/index.md.
Writing _site/posts/name-sans-v04/index.html from ./posts/2020-12-15--name-sans-v04/index.md.
Writing _site/tags/tools/index.html from ./tags.njk.
Writing _site/tags/command line/index.html from ./tags.njk.
Writing _site/tags/font engineering/index.html from ./tags.njk.
Writing _site/tags/open source/index.html from ./tags.njk.
Writing _site/tags/drawbot/index.html from ./tags.njk.
Writing _site/tags/variable fonts/index.html from ./tags.njk.
Writing _site/tags/robofont/index.html from ./tags.njk.
Writing _site/tags/name sans/index.html from ./tags.njk.
Copied 4 files / Wrote 25 files in 0.27 seconds (10.8ms each, v0.11.1)
Watching…
[Browsersync] Access URLs:
 ---------------------------------
    Local: http://localhost:8080
 External: http://192.168.1.5:8080
 ---------------------------------
[Browsersync] Serving files from: _site
arrowtype commented 3 years ago

I should add that this also fails for me with the default config recommendation from the README:

eleventyConfig.addPlugin(pageAssetsPlugin, {
      mode: "parse",
      postsMatching: "src/posts/*/*.md",
  });
arrowtype commented 3 years ago

Oh; I did find one silly error on my part: I’m starting my project from https://github.com/11ty/eleventy-base-blog, and the posts are not in a src, but rather at the top level. So, my postsMatching was wrong, and should have been:

eleventyConfig.addPlugin(pageAssetsPlugin, {
      mode: "parse",
      postsMatching: "posts/*/*.md",
  });

So, now I am getting build errors:

Writing _site/tags/name sans/index.html from ./tags.njk.
Error writing templates: (more in DEBUG output)
> Having trouble writing template: _site/posts/drawbot-vscode/index.html

`TemplateWriterWriteError` was thrown
> Assignment to constant variable.

`TypeError` was thrown:
    TypeError: Assignment to constant variable.
        at Template.transformDirectoryWalker (/Users/stephennixon/code/blog-11ty/node_modules/eleventy-plugin-page-assets/src/plugin.js:110:16)
        at async Template.runTransforms (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Template.js:369:13)
        at async Template.renderPageEntry (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Template.js:609:15)
        at async Template.writeMapEntry (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Template.js:616:21)
        at async Promise.all (index 11)
        at async Eleventy.write (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Eleventy.js:743:13)
        at async Eleventy.watch (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Eleventy.js:650:5)
Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble writing template: _site/posts/drawbot-vscode/index.html

`TemplateWriterWriteError` was thrown
> Assignment to constant variable.

`TypeError` was thrown:
    TypeError: Assignment to constant variable.
        at Template.transformDirectoryWalker (/Users/stephennixon/code/blog-11ty/node_modules/eleventy-plugin-page-assets/src/plugin.js:110:16)
        at async Template.runTransforms (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Template.js:369:13)
        at async Template.renderPageEntry (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Template.js:609:15)
        at async Template.writeMapEntry (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Template.js:616:21)
        at async Promise.all (index 11)
        at async Eleventy.write (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Eleventy.js:743:13)
        at async Eleventy.watch (/Users/stephennixon/code/blog-11ty/node_modules/@11ty/eleventy/src/Eleventy.js:650:5)
Copied 4 files / Wrote 0 files in 0.35 seconds (v0.11.1)
Watching…
[Browsersync] Access URLs:
 ----------------------------------
    Local: http://localhost:8080
 External: http://192.168.1.14:8080
 ----------------------------------
[Browsersync] Serving files from: _site
arrowtype commented 3 years ago

At eleventy-plugin-page-assets/src/plugin.js:110:16, assets is set up as a const and a blank array. Then, the else block tries to redefine it. I think this is an error, as const should be immutable:

    const assets = [];
    if (pluginOptions.recursive) {
    for await (const file of walk(templateDir)) {
        assets.push(file);
    }
    } else {
    assets = await fs.promises.readdir(templateDir);
    assets = assets.map((f) => path.join(templateDir, f));
    }

And indeed – if I change that to let, it starts to work for me, bringing my images into the expected paths! I am going to test this a bit further, and I might make a PR if it seems to be a working solution...