Permalink not generated from front matter in pug template

[svillegascreative]

I'm relatively new to Pug, so I may be missing something, but haven't been able to find an answer to this.

I've got a pretty bare-bones project so far, and wrote up a couple of posts using Pug. They've been working fine, until I tried resetting permalinks in the front matter; other front matter values seem to work fine (e.g. layout).

// my-sample-post.pug
---
title: My Sample Post
layout: default
permalink: link
---

p This is some text

Running eleventy in the terminal, I get:

Writing site/<link/> from ./src/my-sample-post.pug

I tried changing the permalink to permalink: link.html, but I get:

Writing site/<link class="html" /> from .src/my-sample-post.pug

So it looks like the permalink is being processed as Pug, not YAML. Am I missing something?

[svillegascreative]

Also, FWIW, the debugger reports this file the same as all others, except it is omitted where all others say:

Eleventy:Template site/this-page-works-fine/index.html written. +0ms

Additionally, this problem messes up the --watch flag on eleventy (which I guess is because it never gets to the Processed 8 files in 0.47 seconds part)

[zachleat]

Oh! Hmm. Yes, I can confirm that permalink is sent through the template’s rendering engine to process internal variables. Filing as a bug.

[zachleat]

As a short-term workaround, can you test the Piped Text approach here?

https://pugjs.org/language/plain-text.html#recommended-solutions

Maybe something like: permalink: | link

[svillegascreative]

Thanks for the idea. I tried a few different variations of pipes, dots, etc, but then I get YAML exceptions 🤷‍♀️

[svillegascreative]

Thought I was clever when I remembered that the front matter can be in JSON, too, so I tried that just now, but no dice. 😞 Still seems to just be the permalink, as the title is still working...

[jevets]

This bug has been messing with me, too. I hadn't reported it yet, since I didn't dig deep into testing it.

Glad to hear it wasn't just me :)

[jevets]

In my case, I couldn't use pug to generate pages via permalinks (and pagination) like this in the docs. I ended up using a separate markdown file (or nunjucks or another type), kept permalink mapping in it, then assigned it a pug layout.

[svillegascreative]

Hmm, seems rather clunky, but maybe I'll give something like that a try for now. Thanks, @jevets.

[jevets]

I actually managed to get the pipe approach to work.

The trick is to surround the whole value in quotes. The pipe character is already used in YAML, so surrounding in quotes tells YAML to ignore parsing it. Then pug parses it like it normally would.

// my-sample-post.pug
---
title: My Sample Post
layout: default
permalink: " | link/index.html"
---

p This is some text

---

The trouble I was facing in the past was in using pagination to map an array of global data objects to individual pages. product-x.pug should generate a single page for every product in the site.

---
pagination:
  data: products // these come from _data/products.js which calls a third-party api
  size: 1
  alias: product
permalink: "| products/#{ product.slug }/index.html"
---
extends /layouts/main.pug

block title
  | #{ product.title }

block main
  h1= product.title
  p= product.description
  p Your Price: $#{ product.price }

(edit)

Results in a page for each product, i.e.

/products/some-tee-shirt/index.html
/products/nifty-acme-sticker/index.html
/products/alphabet-soup/index.html

[jevets]

I can also confirm it still works when moving the frontmatter to a .json file instead.

This works for me:

// product-x.json

{
  "pagination": {
    "data": "products",
    "size": 1,
    "alias": "product"
  },
  "permalink": "| products/#{ product.slug }/index.html"
}

[jevets]

For YAML frontmatter, this works, too:

permalink: | 
  | products/#{ product.slug }/index.html

[svillegascreative]

Aha! Thanks for your help @jevets! Look forward to giving that a try.

[jevets]

@zachleat I think this is closable... @svillegascreative?