Local Markdown images

[stevermeister]

🧩 Feature request

Description

I suddenly found that current markdown parser tries to parse all the files in the folder, not only .md (could be also taken as a bug)
I want to keep images together with .md files like:

Describe the solution you'd like

Ideally, it will get the image and put it to the assets folder in a build stage(keeping the correct link).

I would love to help with PR, just give me a hint where it is.

[stevermeister]

I found there is an option to create my own fileHandler plugins, so at least I can skip the error:

const {registerPlugin} = require('@scullyio/scully');

function imageFilePlugin(raw) {
  return Promise.resolve('file');
}
// DO NOT FORGET TO REGISTER THE PLUGIN
registerPlugin('fileHandler', 'png', imageFilePlugin);
registerPlugin('fileHandler', 'jpg', imageFilePlugin);
module.exports.imageFilePlugin = imageFilePlugin;

but still, I'm getting the only rawContent, without a file path. and it will be stored as HTML file. Can I keep the extension somehow?

[SanderElias]

@stevermeister I like that idea, but have currently no bandwidth to work on this. Currently the assumption is that all handed things are HTML.
IIRC currently files that have no extension configured should be skipped by default. Will double-check this.

[stevermeister]

I found that there is a second parameter for fileHandler provided - route, that's great! So at least I can do such workaround:

const { registerPlugin } = require("@scullyio/scully");
const fs = require("fs");

function imageFilePlugin(raw, route) {
  console.log(route);
  return new Promise((resolve) => {
    const src = route.templateFile;
    const dest = "./dist/static" + route.route + '.' + route.templateFile.split(".").pop();
    fs.copyFile(src, dest, (err) => {
        if (err) console.log(err);
        console.log(`${route.templateFile} was copied to ${dest}`);
        resolve('text');
      }
    );
  });
}
registerPlugin("fileHandler", "png", imageFilePlugin);
registerPlugin("fileHandler", "jpg", imageFilePlugin);
module.exports.imageFilePlugin = imageFilePlugin;

but still, in this case, I need to sync the image path with generated HTML, so ideally to have it out of the box.

[SanderElias]

@stevermeister What you need is some form of assets management. This is also on our radar.
There are many ways to sync with the HTML.
With your plugin you keep it in the same folder structure as the HTML (markdown).
You can then reference them using the ./imageName.png in your markdown.
I don't think that is a bad solution and will take this idea with me until I do have some bandwidth

[stevermeister]

You can then reference them using the ./imageName.png in your markdown.

Yes, true. But ideally, I would like to have valid md-file in editor mode (where all the images are shown)

now, I'm thinking that in addition to my imageFilePlugin I can create one more portRender plugin that will update the links in HTML. (writing this line and praying that you would have time to fix it in core :) )

[SanderElias]

@stevermeister relative links are permitted in MD, and if the file is in the same folder, it should show in the editor you are using. VScode preview does this perfectly.

[stevermeister]

@SanderElias I was also thinking about relative links, but the challenge here is the Scully puts compiled md-file into own folder, so new structure is now:

and we are also dependent on baseHref...

[stevermeister]

for now, I decided to copy all the image in one root folder that will unblock me before "local images" are supported by Scully:

const { registerPlugin } = require("@scullyio/scully");
const fs = require("fs");

function imageFilePlugin(raw, route) {
  return new Promise((resolve) => {
    const src = route.templateFile;
    const dest = "./dist/static/images/" + route.data.sourceFile;
    fs.copyFile(src, dest, (err) => {
        if (err) console.log(err);
        console.log(`${route.templateFile} was copied to ${dest}`);
        resolve('');
      }
    );
  });
}

registerPlugin("fileHandler", "png", imageFilePlugin);
registerPlugin("fileHandler", "jpg", imageFilePlugin);
module.exports.imageFilePlugin = imageFilePlugin;

[stevermeister]

we definitely need a core solution here, just found that Scully puts these images converted into MD-files to this.scully.available$

a bit more hardcode:

  getArticles(): Observable<Article[]> {
    return this.scully.available$
      .pipe(map((articles: Article[]) => articles.filter((article: Article) =>
        article.sourceFile?.split('.').pop() === 'md'
      )));
  }

[SanderElias]

I will make sure non-recognized files will not get processed.