Simplify page data

[oscarotero]

Hi. I just discover this repository (searching for sites built with Lume) and found this code in the _config file:

https://github.com/anurag-roy/poke-api/blob/45c4cb5d31bc69a94dc32511b432421f8b4343d2/_config.ts#L30-L45

There are better ways to assign data to pages without using front matter. For example, preprocessing the pages:

site.preprocess([".md"], (page) => {
    page.data.layout = "layout.tsx";
    page.data.title = "Poké API";
    page.data.url = "/";
});

This not only assign the layout and title data properties but also the url, so the README.md file is output to /. No need to create a temporary index.md file.

I hope this helps.

[anurag-roy]

Hey @oscarotero, first of all, sorry! I have no idea how I have missed this issue for the last 5 months! Secondly, I really appreciate you taking the time to post this.

If I remember correctly, I had tried the approach that you have mentioned before landing on my hacky way. But I wasn't able to generate the root index.html file from README.md, basically I couldn't make page.data.url = "/" work.

I tried it again now, here is my full code:

import lume from 'https://deno.land/x/lume@v1.7.2/mod.ts';
import codeHighlight from 'https://deno.land/x/lume@v1.7.2/plugins/code_highlight.ts';
import jsx from 'https://deno.land/x/lume@v1.7.2/plugins/jsx.ts';

const site = lume(
  {},
  {
    markdown: {
      options: {
        html: true,
        breaks: true,
        linkify: true,
        typographer: true,
      },
    },
  },
);

site.preprocess([".md"], (page) => {
  page.data.layout = "layout.tsx";
  page.data.title = "Poké API";
  page.data.url = "/";
});

site
  .copy('/assets/css/style.css')
  .copy('/assets/css/hljs.css')
  .copy('/assets/logo/favicon.ico')
  .copy('/assets/logo/logo.webp');

site.use(codeHighlight()).use(jsx());

export default site;

When I build with Lume, this is what I get:

Also, verifying the actual output:

Can you tell me what I am doing wrong?

[oscarotero]

Hey @anurag-roy, no worries.

Ok, my bad. Preprocessor are executed after the url is calculated. This should work fine:

site.preprocess([".md"], (page) => {
  page.data.layout = "layout.tsx";
  page.data.title = "Poké API";
  page.updatDest({
    path: "index",
    ext: ".html"
  });
});

[anurag-roy]

Awesome! The code looks much simpler now. Thanks again for stopping by @oscarotero