Blog posts in folders (with assets)/nested shortcodes

[Brixy]

Hi all!

After playing with Lume I am blown away by its flexibility. Excellent work, guys!

I would like to migrate a number of rather large scale Hugo and Eleventy projects to Lume and I have a few questions:

• Is it/how is it possible to use a Hugo-like folder structure for a blog?
• Is it possible to copy assets (and process images with Imagick) from within these folders?

## In

blog/
├─ 2022-05-01_first-post/
│  ├─ index.md
│  ├─ an-image.png
│  └─ a-pdf-file.pdf
├─ 2022-05-02_second-post.md
└─ 2022-05-03_third-post/
   ├─ index.md
   └─ another-image.png

## Out

blog/
├─ first-post/
│  ├─ index.html
│  └─ an-image.png
├─ second-post.html
└─ third-post/
   ├─ index.html
   └─ another-image.png

• Is there an equivalent of Eleventy’s paired shortcodes. This is an easy example of what I would like to do:

site.addHelper('blockquote', blockquote, { body: 'true' });

{% blockquote author="XY", link="https…" %}
This is a quote formatted with **Markdown**.

Another line of text.
{% endblockquote %}

Thank you very much!

[oscarotero]

Hi, @Brixy

Is it/how is it possible to use a Hugo-like folder structure for a blog?

The url generation in Lume doesn't work exactly like Hugo: The date from the path is extracted only if it's in the filename but not in the folder name. In your example, /blog/2022-05-01_first-post/index.md outputs to /blog/2022-05-01_first-post/index.html, but blog/2022-05-02_second-post.md outputs to blog/second-post/ (because the date is defined in the filename, not in the folder). I think this could be implemented easily but it's not available right now.

Fortunately, you can use javascript functions to customize the final url of the pages See this. You can create a blog/_data.js file and export the url function that will be used to generate the url of the post as you like:

export function url(page) {
    const path = page.src.path; // The path name without extension (ex: /blog/2022-05-01_first-post/index)
    const url = generateMyOwnUrl(path); // This returns something like /blog/first-post/
    return url;
}

Another way is by creating a preprocessor, that can change the url before rendering the page:

// Preprocess all html pages
site.preprocess([".html"], (page) => {
    const path = page.src.path; // The path name without extension (ex: /blog/2022-05-01_first-post/index)
    const url = generateMyOwnUrl(path); // This returns something like /blog/first-post/
    page.url = url; // Assign the new url to the page
});

Is it possible to copy assets (and process images with Imagick) from within these folders?

Yes. If you are going to use imagick plugin, just import it in your config file and that's all. By default the extensions .jpg, .jpeg and .png are loaded but you can change it.

import lume from "lume/mod.ts";
import imagick from "lume/plugins/imagick.ts";

export default lume()
    .use(imagick({
        extensions: [".jpg"], //If you only want to load jpg files
    ));

Is there an equivalent of Eleventy’s paired shortcodes.

Yes, you have to define the helper as type: "tag" (See this). In your example:

site.addHelper('blockquote', blockquote, { body: true, type: "tag" });

[Brixy]

Gosh! It seems that all my wishes I have had for Eleventy and Hugo for years have come true with Lume.

Thank you very much @oscarotero for your time and your excellent explanation!

Currently, my solution is rather primitive, but it works just fine:

export function url(page) {
  url =
    page.src.path
      .replace('/posts', '')
      .replace(/[0-9]{4}-[0-9]{2}-[0-9]{2}_/, '') +
    page.src.ext.replace('.md', '.html');
  return url;
}

Being new to Deno I have one last questions (only if ok!):

As I have to use a _data.js file is it possible to add Imagick settings in the .js file, e.g. like this:

export const imagick = {
  format: 'webp'
}

Thank you very much. Really appreciate your work.

[oscarotero]

Great!
In your url function, I think you don't need to replace the extension (is always .md) so I'd change to something like this:

export function url(page) {
  return page.src.path
      .replace('/posts', '')
      .replace(/[0-9]{4}-[0-9]{2}-[0-9]{2}_/, '') + ".html";
}

And about the _data.js, yes you can export the imagick settings here.

[Brixy]

Thanks!

I changed the extension because the .jpg files were changed into .html files, too.

Moreover, I noticed that images seem to be treated like markdown files if they live in a folder structure like posted above. Their source is replaced by my base.njk’s HTML code – even if I don’t manipulate the pages’ paths at all.

So, I need to play a bit more ;-)

[oscarotero]

yes, in Lume all files are "pages", not only text files like markdown or nunjucks, but also images, etc, so any info that you place inside a _data.* file (like the url or imagick settings) is shared to all pages inside this directory. This affects also to configurations like layout.

As a workaround, you can remove the layout value of the images with this preprocessor:

site.preprocess([".jpg"], (page) => page.data.layout = undefined);

[Brixy]

Excellent! Thank you very much again.

Everything seems to be working now.

It seems I still have to use

…
page.src.ext.replace('.md', '.html');
…

.replace(/[0-9]{4}-[0-9]{2}-[0-9]{2}_/, '') + '.html'

also renames image files.

Thank for your excellent SSG and your top support!

[oscarotero]

I've created an issue to support dates in directories: #198

But I have some questions?:

• It's required the file name to be "index.md" (posts/2022-05-01_first-post/index.md) or it works with any filename? (like posts/2022-05-01_first-post/first-post.md)
• Does it works if the date is in a parent directory? (like posts/2022-05-01_first-post/first-post/index.md)

This week I'd like to release a new Lume version and want to include this.
Thanks!

[Brixy]

Thanks once more!

I don’t exactly know how everything works together.

Here is what I get:

Without any url(page) replacement and without secondary copy argument

Everything just works! This is probably the most common use case.

Socondary argument for site.copy

site
.copy('static', '.')
.copy(['.docx', '.mp3', '.mp4', '.pdf'], (path) => path.replace("/posts", ""));

Assets are copied to the correct place (/_site/post-1/).

Posts and images are in /_site/posts/…/ as expected.

With url replacement

With this in /src/posts/_data.js:

export function url(page) {
  return (
    page.src.path
    .replace('/posts', '')
    .replace(/[0-9]{4}-[0-9]{2}-[0-9]{2}_/, '') + '.html' // this seems to be necessary even with the new get date from folders functionality
  );
}

the behaviour seems a bit strange to me:

• index.html and assets are located in the correct folders, e.g. /_site/post-1/,
• some images (generated with imagick) are located in /_site/post-1/, others in /_site/posts/post-1/.

(I deleted the /_site/ each time.)

[oscarotero]

The purpose of these changes is that you don't need to set a url function for that, so you can remove it.
Regarding to the url function itself, the page.src property contain info about the source file of the page (file name, extension, etc). There's the page.dest property with info about the output destination, so this function could be simply:

export function url(page) {
  return page.dest.path.replace("/posts", "") + ".html";
}

[Brixy]

Yes, page.dest.path is the solution.

Date and assets handling is incredibly easy now – hopefully for all people switching to Lume from Hugo et al.

THANK YOU VERY, VERY MUCH for your help and patience!

[oscarotero]

Thank you for give a try to Lume. If you create something interesting with it, please let me know so I can add it to the showcase section: https://lume.land/showcase/

[Brixy]

Yes, will certainly do ;-)

[Brixy]

The combination of removing the /posts folder from path + using generating posts from folders and markdown files (/src/posts/post-1/ and /src/post-2.md) + using imagick with all images and assets living in the posts’ folders seems a bit tricky.

So for reference, this is what I have come up with – in case anyone might need it.

There are probably more elegant solutions; but this works ;-)

# _config.ts

site
  .copy('static', '.')
  .copy(
    ['.docx', '.mp3', '.mp4', '.pdf'],
    (path) => path.replace('/posts', ''),
  );

site.preprocess(['.jpg', '.png', '.gif'], function (page) {
  page.data.layout = undefined;
});

site.process(['.jpg', '.png', '.gif'], function (page) {
  page.dest.path = page.dest.path.replace('/posts', '');
});


# /src/posts/_data.yml

export function url(page) {
  let path = page.dest.path.replace('/posts', '');
  if (!path.includes('/index') && page.src.ext == '.md') {
    path = path + '/index';
  }
  return path + page.src.ext.replace('.md', '.html');
}

export const imagick = [
  {
    resize: [200, 200],
    suffix: '-small',
  },
  {
    resize: [200, 200],
    suffix: '-small',
    format: 'webp',
  },
  {
    resize: [600, 600],
  },
  {
    resize: [600, 600],
    format: 'webp',
  },
];

[Brixy]

Last tiny addition ;-)

Without

site.process(['.jpg', '.png', '.gif'], function (page) {
  page.dest.path = page.dest.path.replace('/posts', '');
});

some of the images generated by imagick are placed in /posts/post-1/ etc.

[oscarotero]

some of the images generated by imagick are placed in /posts/post-1/ etc.

Mmm, this may be a bug. I'll take a look

[oscarotero]

I can't reproduce this issue. Do you know when this happens?

[Brixy]

Thanks for checking this!

Although it’s probably not a Lume issue I just pushed a minimal example, and this is the folder structure Lume produces:

🔥 / /index.md
🔥 /post-3/ /posts/2022-01-03_post-3.md
🔥 /post-2/ /posts/2022-01-02_post-2/index.md
🔥 /post-1/ /posts/2022-01-01_post-1/index.md
🔥 /posts/post-1/test-small.jpg /posts/2022-01-01_post-1/test[0].jpg
🔥 /posts/post-1/test-small.webp /posts/2022-01-01_post-1/test[1].jpg
🔥 /post-1/test.webp /posts/2022-01-01_post-1/test.jpg
🔥 /posts/post-1/test.jpg /posts/2022-01-01_post-1/test[2].jpg

If the site.process code in _config.ts is activated the folder structure looks like this:

🔥 / /index.md
🔥 /post-3/ /posts/2022-01-03_post-3.md
🔥 /post-2/ /posts/2022-01-02_post-2/index.md
🔥 /post-1/test.webp /posts/2022-01-01_post-1/test.jpg
🔥 /post-1/ /posts/2022-01-01_post-1/index.md
🔥 /post-1/test-small.jpg /posts/2022-01-01_post-1/test[0].jpg
🔥 /post-1/test-small.webp /posts/2022-01-01_post-1/test[1].jpg
🔥 /post-1/test.jpg /posts/2022-01-01_post-1/test[2].jpg

[oscarotero]

Nice. Found the bug. It will be fixed in v1.9.1
Thanks!