Giters

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.

Home Page:https://www.11ty.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Markdown template error with code block (1.x beta)

athomasoriginal opened this issue · comments

commented

Describe the bug
Updating this blog from 0.12.1 to 1.0.0-beta.5 throws error while parsing a Markdown file. (be sure to reference the repo around this commit 6403047bea3f345f7e3ba4c2ad1614f548e4f200 because I applied a "fix" to the problem)

Problem writing Eleventy templates:
[11ty] > Having trouble rendering liquid template ./src/posts/010-rich-comments.md

`TemplateContentRenderError` was thrown
[11ty] > unexpected token at ":a 11 :b 1  :...", file:./src/posts/010-rich-comments.md, line:129, col:12

The above error is throwing at this clojure code fence:

(comment

  (def xs #{{:a 11 :b 1  :c 1 :d 4}
            {:a 2  :b 12 :c 2 :d 6}
            {:a 3  :b 3  :c 3 :d 8 :f 42}})

  (def ys #{{:a 11 :b 11 :c 11 :e 5}
            {:a 12 :b 11 :c 12 :e 3}
            {:a 3  :b 3  :c 3  :e 7}})

  (join xs ys))

To Reproduce
Steps to reproduce the behavior:

  1. yarn install yarn install --dev @11ty/eleventy@beta
  2. run yarn dev
  3. See error

Expected behavior
Should compile without throwing TemplateContentRenderError

Environment:

  • OS and Version: Mac Monterey 12.0.1
  • Eleventy Version: 1.0.0-beta.5

Additional context

  • Works when we downgrade to 0.12.1 of eleventy
  • Removing the code block resolves the issue
  • A theory: liquid thinks they are partials/filters and gets confused.
  • There are other code blocks in the file and everything works as expected.
  • Attempted to change the default liquid settings: 
    eleventyConfig.setLiquidOptions({
  dynamicPartials: true,
  strictFilters: false,
});

Temporary Solution

  • I wrapped the code fence in {% raw %} {% endraw %}
commented

Curious indeed.

I'm not seeing build errors locally on Big Sur 11.6.1: Nevermind, I can repro the error now, I missed that you already fixed w/ {% raw %} block in the .md file.

node --version # v14.18.1
npm --version # 6.14.15
npm run build -- --version # 1.0.0-beta.5


npm run dev

> between-two-parens@0.0.0 dev /private/tmp/betweentwoparens.com
> eleventy --serve --port 8080 --output=dist

[11ty] Writing dist/404.html from ./src/404.md (liquid)
[11ty] Writing dist/feed.xml from ./src/feed.njk
[11ty] Writing dist/robots.txt from ./src/robots.njk
[11ty] Writing dist/sitemap.xml from ./src/sitemap.njk
[11ty] Writing dist/index.html from ./src/index.njk
[11ty] Writing dist/subscribe/index.html from ./src/subscribe.njk
[11ty] Writing dist/blog/deploy-clojurescript-to-github-pages/index.html from ./src/posts/000-deploy-clojureScript-to-github-pages.md (liquid)
[11ty] Writing dist/blog/start-a-clojurescript-app-from-scratch/index.html from ./src/posts/001-creating-a-clojurescript-project-from-scratch.md (liquid)
[11ty] Writing dist/blog/clojurescript-test-setup/index.html from ./src/posts/003-testing-clojurescript.md (liquid)
[11ty] Writing dist/blog/what-the-reagent-component/index.html from ./src/posts/002-what-the-reagent-component.md (liquid)
[11ty] Writing dist/blog/students-of-the-game-reloadable-code/index.html from ./src/posts/004-reloadable-code.md (liquid)
[11ty] Writing dist/blog/deploy-clojurescript-on-nginx/index.html from ./src/posts/005-deploy-clojurescript-on-nginx.md (liquid)
[11ty] Writing dist/blog/clojure-text-editors/index.html from ./src/posts/006-clojure-text-editors.md (liquid)
[11ty] Writing dist/blog/reagent-and-hiccup/index.html from ./src/posts/007-reagent-and-hiccup.md (liquid)
[11ty] Writing dist/blog/what-are-the-clojure-tools/index.html from ./src/posts/009-what-are-the-clojure-tools.md (liquid)
[11ty] Writing dist/blog/jenv/index.html from ./src/posts/008-manage-your-java-jdks.md (liquid)
[11ty] Writing dist/blog/rich-comment-blocks/index.html from ./src/posts/010-rich-comments.md (liquid)
[11ty] Benchmark (Configuration): "toc" Nunjucks Filter took 246ms (27.2%, called 22×, 11.2ms each)
[11ty] Copied 16 files / Wrote 17 files in 0.71 seconds (41.8ms each, v1.0.0-beta.5)
[11ty] Watching…
[Browsersync] Access URLs:
 ----------------------------------
    Local: http://localhost:8080
 External: http://192.168.7.21:8080
 ----------------------------------
[Browsersync] Serving files from: dist

I'm wondering if it's a change in LiquidJS (which is the default .md engine).
But interesting that it would have worked in v0.12.1, as I'm guessing LiquidJS is trying to parse the {{ in the Clojure and failing.

Another option (if wrapping in {% raw %}..{% endraw %} isn't ideal, might be seeing if you can change the markdownTemplateEngine to "njk" in your .eleventy.js config file (since I see you're already using Nunjucks anyways). Can't guarantee that it'd fix anything, but also not sure why I'm not seeing the error locally either.

AAAHHHH!!! OK, I see now that you already added the {% raw %} blocks in the repo. Yeah, I can reproduce, and confirm that switching to "njk" for the template engine doesn't solve it, just gives you different errors re: comments.

I also downgraded and confirmed that it does build w/ eleventy@0.12.1. OR DOES IT! /ominous
The built code block (with the {% raw %} removed in 0.12.1 looks like this to me locally:

(comment
(refer 'set)
(def xs #)

(def ys #)

(join xs ys)
; ...
)

Whereas your original content was:

(comment
(refer 'set)
(def xs #{{:a 11 :b 1 :c 1 :d 4}
         {:a 2 :b 12 :c 2 :d 6}
         {:a 3 :b 3 :c 3 :d 8 :f 42}})

(def ys #{{:a 11 :b 11 :c 11 :e 5}
         {:a 12 :b 11 :c 12 :e 3}
         {:a 3 :b 3 :c 3 :e 7 }})

(join xs ys)
; ...
)

So LiquidJS was just assuming everything in the {{ ... }} was a variable, and swallowing it quietly. I'm guessing there was a change between the old version of liquidjs@6.4.3 in Eleventy v0.12.1 and the liquidjs@9.x in Eleventy 1 beta 5 changed some default behaviors on undefined variables which just makes it more obvious now.

TLDR: I suspect this didn't work in earlier versions of Eleventy either but now it's just throwing harder and {% raw %} is the best/correct solution.

Thanks for coming to my TED Talk.

commented

Thanks for coming to my TED Talk.

😆

I'm guessing there was a change between the old version of liquidjs@6.4.3 in Eleventy v0.12.1 and the liquidjs@9.x

Indeed! However, this doesn't seem like desirable behaviour? 🤔 It also seems like a liquids thing. Should I bring it up in their repo or is the tag you left enough?

Thanks for taking the time to look at this! Love eleventy and apologies for not noting that I resolved the issue in master making it harder to repro this 😦

commented

Indeed! However, this doesn't seem like desirable behaviour? 🤔 It also seems like a liquids thing. Should I bring it up in their repo or is the tag you left enough?

I think you're possibly seeing https://liquidjs.com/tutorials/options.html#Strict (specifically strictVariables).

You could file it in the liquidjs repo, but I'm not sure its a bug (and you'd have to check the default behavior or liquidjs and maybe see if Eleventy is overriding the default value for strictVariables somewhere). Your clojure has liquidjs/nunjucks style {{ variable }} syntax in it, so it's being processed as a variable. So the correct solution is using {% raw %} to ignore that clojure code.

commented

OK, had a few minutes to poke at this today w/ RunKit.

Given the following Clojure code snippet in your markdown:

(comment
(refer 'set)
(def xs #{{:a 11 :b 1 :c 1 :d 4}
         {:a 2 :b 12 :c 2 :d 6}
         {:a 3 :b 3 :c 3 :d 8 :f 42}})

(def ys #{{:a 11 :b 11 :c 11 :e 5}
         {:a 12 :b 11 :c 12 :e 3}
         {:a 3 :b 3 :c 3 :e 7 }})

(join xs ys)
; ...
)

Note that the liquid@6 version (used by @11ty/eleventy@0.12.1) outputs the following (essentially swallowing/ignoring everything between {{ and }} in your def statements):

(comment
(refer 'set)
(def xs #)

(def ys #)

(join xs ys)
; ...
)

Whereas the liquidjs@9 version (used by @11ty/eleventy@beta) gives us a hard template error because it wasn't expecting a : for a liquid variable name:

unexpected token at ":a 11 :b 1 :c...", line:3, col:10

So it might be worth filing in the https://github.com/harttle/liquidjs/ repo and @harttle or somebody can explain it far better than I can and be aware of the change between major versions (and probably reiterate that {% raw %} is the solution for having the templating engine ignore a block of code/template that you don't want processed since Clojure and Liquid/Nunjucks seem to have some overlapping syntax).

commented

Thanks @pdehaan ! We used to take everything between {{}} as a variable name (there'd be bugs regarding filter syntax), but it changed to an iterative approach in the parser since v9.

That's faster but requires a definition for each syntax. So we'll need to parse a variable name correctly before Knowing it's an variable output.

Since 11ty provides an markdownTemplateEngine, it intentionally allows markdown to use template syntax. If this is the case, you will have to escape with an raw tag for non template part. Or set markdownTemplateEngine to something like "plain text".

commented

Also note that markdownTemplateEngine can be false, which might be what you want: https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files

If you get a harttle/liquidjs issue opened, please cross post it here too!

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!

commented

Hey. I get same bug behavior after update form 0.11.0 to 1.0.1. I could not set markdownTemplateEngine to false, because I should use some template engine.

I fixed it with follow steps (thx @pdehaan for the comments above):

  • Install patch-package and liquidjs@6.4.3 to project
  • Patch node_modules/@11ty/eleventy/package.json:
diff --git a/node_modules/@11ty/eleventy/src/Engines/Liquid.js b/node_modules/@11ty/eleventy/src/Engines/Liquid.js
index cc26c25..9ba5b8b 100644
--- a/node_modules/@11ty/eleventy/src/Engines/Liquid.js
+++ b/node_modules/@11ty/eleventy/src/Engines/Liquid.js
@@ -1,5 +1,6 @@
 const moo = require("moo");
-const liquidLib = require("liquidjs");
+// Force patch version to liquidjs@6.4.3
+const LiquidLib = require("../../../../liquidjs");
 const { TemplatePath } = require("@11ty/eleventy-utils");
 
 const TemplateEngine = require("./TemplateEngine");
@@ -27,7 +28,7 @@ class Liquid extends TemplateEngine {
 
   setLibrary(override) {
     // warning, the include syntax supported here does not exactly match what Jekyll uses.
-    this.liquidLib = override || new liquidLib.Liquid(this.getLiquidOptions());
+    this.liquidLib = override || LiquidLib(this.getLiquidOptions());
     this.setEngineLib(this.liquidLib);
 
     this.addFilters(this.config.liquidFilters);