Link to other pages

[Bernardstanislas]

Problem statement

Sorry for the noob question but I can't figure out how to correctly model my use case.

I am creating a food blog, with some recipes. Each recipe has the same structure, let's say a title, a picture and an array of steps.
Each step has a picture, and a content.

Next to my recipes, I also have one page per technical task. A technical task is rendered on its own.

My problem: in the content of a step included in a recipe, I would like to create put link to a technical task page, when needed. I cannot figure out how to dynamically transform a text inside the content property into a dynamically crafter link to another page.

Example

Let's say I have a macarons recipe:

// _data/recipes.js
module.exports = [
  {
    title: 'Macarons',
    picture: 'macarons.jpg',
    steps: [
      {
        picture: 'step1.jpg',
        content: 'Take the eggs and [scramble]({{ technical_tasks.egg_scrambling}}) them.'
      },
// [...]

In the content of my first step, I do not know how I can create a link.

Any thoughts on that?

Thanks a lot!

[pdehaan]

@Bernardstanislas Would a hardcoded link work?

content: 'Take the eggs and <a href="/technical/scramble/">scramble</a> them.'

To be honest I'm not sure if the markdown+liquid/nunjucks template syntax would work within a global data file.

I'm not sure what technical_tasks is, or where that comes from, but if it's another global data file of links, you might need to include that file in your ./_data/recipes.js file.

[pdehaan]

I'm not familiar w/ computePermalinkFor, so you'd be in uncharted waters.

But you should be able to require Eleventy's built-in slug filter if you needed it (although not convinced you do, and that you want slug vs url here; you're already hardcoding URLs in ./_data/technical_tasks.js, why bother re-slugging or using other filters to tweak the URL).

// _data/recipes.js
const slugFn = require("@11ty/eleventy/src/Filters/Slug");

const technical_tasks = require("./technical_tasks");

module.exports = [
  {
    title: 'Macarons',
    picture: 'macarons.jpg',
    steps: [
      {
        picture: 'step1.jpg',
        content: `Take the eggs and [scramble](${ slugFn(technical_tasks.egg_scrambling) }) them.`
      },
    ]
  }
];

But now by using slugFn(), it converts the hardcoded URL from "/technical/scramble-eggs/" to [scramble](technicalscramble-eggs) because now it thinks its a slug instead of a URL. So you might actually want the following:

const urlFn = require("@11ty/eleventy/src/Filters/Url");

I don't think that global data files have access to the eleventyConfig object like in the .eleventy.js config file, otherwise you could have used eleventyConfig.getFilter("slug"), if I recall correctly.

[pdehaan]

But I’d love to see your computeTechnicalTaskPermalink solution when you’ve got it all working.

[Bernardstanislas]

I think I landed something cool here: https://github.com/Bernardstanislas/salutchef.fr/tree/permalinks/src

Using your technique with a permalink computation function works very well, thank you!

[pdehaan]

Looks good! I think only thing that mildly concerned me was was that if you pass an id which isn't valid (typo or something changes), the .find() will probably fail and return undefined and then you're trying to access the .permalink on an undefined object.

const getSkillPermalink = (id) => skills.find((skill) => skill.id === id).permalink;

It might not be an issue though, because if you mistype "macaron" it might break the 11ty build (trying to access .permalink on an undefined object), which might be a good workflow since it'd warn you early that there was an issue.

[Bernardstanislas]

Yes that's what I had in mind, if any typo occurs the build fails so I'll see it right away.

Moreover I plan on using typescript in the future to catch those typos.