How to support both rendering a page from a file but also keeping the raw file

[johanbrook]

Let's say I have a bunch of .cook files in a recipes folder. I'd like to render these as HTML with a layout, but also serve these raw .cook files in the built site.

It's the same scenario as wanting to keep the source .md files in a blog and serve alongside built .html files, or keep raw .json files and serve as a JSON API.

I have a hard time finding my way around the docs to find an elegant solution for this.

What I landed on now:

// _config.ts
import { copy, expandGlob } from 'std/fs/mod.ts';

const SRC =  'src';
const DEST = 'build';

const site = lume({
    src: SRC,
    dest: DEST,
});

site
    .data('layout', 'layouts/reci.njk', '/recipes')
     // Makes src/recipes/*.cook → build/recipes/*/index.html
    .loadPages(['.cook'], async (path) => {
        const text = await Deno.readTextFile(path);
        return parseToRecipe(text); // irrelevant
    })
    // Makes src/recipes/*.cook → build/recipes/*.cook
    .addEventListener('afterBuild', async () => {
        // Fiddly, since we don't want to overwrite the existing build/recipes directory from above
        for await (const entry of expandGlob(`./src/recipes/*.cook`)) {
            await copy(entry.path, `./${DEST}/recipes/${entry.name}`);
        }
    })

I've tried various combinations of:

• Site.copy(): this would overwrite the built build/recipes dir.
• Site.loadAssets().
• Site.loadData().

I've read https://lume.land/docs/core/loaders top to bottom. The key paragraph for my issue is:

Note: you can't use the same extension to generate pages and assets, so a way to have support for both is adding a sub-extension (like .page) for pages

---

Is my solution above the best one so far?

Related as input to:

• Merge site.copy and site.loadAssets? #571
• Cannot copy one file to multiple destinations #428

[johanbrook]

Update: alternate version for (re-)generating the raw source files:

site
    // Load .cook files
    .loadPages(['.cook'], async (path) => {
        const raw = await Deno.readTextFile(path);
        const recipe = parseToRecipe(raw);
        return {
           ...recipe,
           raw, // squirrel away the raw text to generate as new .cook file below
         };
    })
    // (Re-)generate raw .cook files
    .preprocess(['.cook'], (filtered, all) => {
        for (const page of filtered) {
            const cookFile = Page.create({
                basename: page.src.entry?.name,
                url: page.src.path + page.src.ext,
                content: page.data.raw,
            });
 
            // For linking to the .cook file from the resulting .html file
            page.data.rawUrl = cookFile.data.url;

            all.push(cookFile);
        }
    });

[oscarotero]

I think it's better an approach like markdown files: They are loaded as text files and the template engine parses the content and generate the HTML code. In this way the file is loaded only once, and you can include a front matter in the .cook files to configure things like the layout, url, draft mode, etc.

import textLoader from "lume/core/loaders/text.ts";

export default class CookEngine implements Lume.Engine {
  render(content, data) {
    return renderRecipe(content, data);
  }

  renderComponent() {}
  addHelper() {}
  deleteCache() {}
}

site.loadPages([".cook"], {
  loader: textLoader,
  engine: new CookEngine(),
});

To generate the extra .cook files, you can do something like this:

import { Page } from "lume/core/file.ts";

site.process([".cook"], (cookPages, allPages) => {
  for (const page of cookPages) {
    const rawContent = page.data.content;

    allPages.push(Page.create({
      url: page.outputPath.replace("/index.html", ".cook"),
      content: rawContent
    });
  }
});

[johanbrook]

Thanks for replying! Your suggestion is similar to what I came up with after a second pass: #593 (comment)

So there's currently not a more declarative way to "move over" the source .cook files instead of regenerating them again based on the rendered pages?

[oscarotero]

Currently, a file can be loaded or copied but not both things at the same time, so I guess there's not way to do it in a more declarative way.

This issue is tangentially related with #571 . I'd like to come up with a better solution to configure how Lume should treat file extensions, that should be clearer and more flexible. Any ideas to improve the syntax or behavior are very appreciated :)