The issues with Dynamic Routing in Abell

[saurabhdaware]

Currently, there is a lot of abstraction in dynamic routing. We loop over content directory, read the names of the folders inside and pass it in Abell.meta.$path in theme/[path]/index.abell. You can check it out in https://github.com/abelljs/abell-starter-minima

However, this is too much of abstraction and something that we want to avoid in Abell going forward.

Problems with Current Dynamic Routing

• Explaining how this whole thing works is complicated.
• Things are bound to certain directory names ([path], content). In some cases it is fine but ideally, we should give helper functions to the user and the user should be one to decide how he wants to loop over a certain directory or what data they want to read.)
• What if I have two pages as a layout that want to loop over two different sets of contents? this is just not possible right now.

This is one major issue that stops us from releasing v1.0.0 as the changes are going to affect the important part of Abell.

Goals

• Running dev-server by having just one .abell file should still work!
• Provide better APIs that explain how Abell is building site

Additional Information

• This twitter thread with discussion on the right abstraction level is very helpful in making the decisions - https://twitter.com/saurabhcodes/status/1376919547819696134?s=20

How different Static-Site-Generators handle this-

Eleventy

Eleventy allows you to define layout in frontmatter of the content and then drops a content variable in that particular layout with the content of the markdown.
https://www.11ty.dev/docs/layouts/

---

This issue needs some brainstorming about the possible ways to move forward with dynamic routing.

[saurabhdaware]

Solution 1

A generator.js file with something like

const fs = require("fs");
const createPage = require("abell/createPage");

const generator = {
  "./index.html": createPage("./index.abell"),
  "./[path]/index.html": () => {
    fs.readdirSync("./content");
  }
};

module.exports = generator;

Note: Example not complete. Not sure how to handle fs.readdirSync part

CodeSandbox - https://codesandbox.io/s/dynamic-pages-brainstorm-n1kcv?file=/generator.js

[saurabhdaware]

Solution 2

Similar to solution 1. generator.js file but with different syntax and maybe call this entry.js instead?

const abell = require('abell');

abell.createPage({
  template: './theme/index.abell', 
  out: './dist/index.html'
})

for (const contentName of ['hello-world', 'second-blog']) {
  abell.createPage({
    template: './theme/[path]/index.abell',
    context: {
      contentPath: `./content/${contentName}/index.md`
    },
    out: `./dist/${contentName}/index.html`
  })
}

[saurabhdaware]

Solution 3

Similar idea as above, different syntax -

const fs = require('fs');
const abell = require('abell');


abell.generate([
  {
    template: './src/index.abell',
    out: './dist/index.html'
  },
  ...fs.readdirSync('./content/').map((contentDirectory) => ({ 
    template: './src/[path]/index.abell',
    context: {
      contentDirectory: contentDirectory // 'hello-world'
    },
    out: `./dist/${contentDirectory}/index.html`
  }))
])

In [path]/index.abell, we can access context value with Abell.contentDirectory and read markdown content depending on that path.

[saurabhdaware]

Or this but inside abell.config.js

module.exports = {
  themePath: 'src',
  outputPath: 'dist',
  contentPath: 'content',
  generate: (programInfo) => {
    return abell.generateSite([
      {
        template: `${programInfo.themePath}/index.abell`,
        out: `${programInfo.outputPath}/index.html`
      },
      ...fs.readdirSync(programInfo.contentPath).map((contentDirectory) => ({ 
        template: `${programInfo.themePath}/[path]/index.abell`,
        context: {
          contentDirectory: contentDirectory // 'hello-world'
        },
        out: `${programInfo.outputPath}/${contentDirectory}/index.html`
      }))
    ])
  }
}

[saurabhdaware]

Resolved it in v1. Draft - https://github.com/abelljs/abell/releases/tag/abell-v1.0.0-alpha.37

[saurabhdaware]

Resolved in v1 using makeRoutes API 🎉