Too much indentation breaks things?

[NullVoxPopuli]

I'm working on making an Ember cheatsheet for folks learning ember, and I've written this "markdown" so far:

# {{t 'layout.application.title'}}


<p>{{t 'layout.application.description-1' htmlSafe=true}}</p>
<p>{{t 'layout.application.description-2' htmlSafe=true}}</p>


<GuideSection @id='generating-files' as |Section|>
  <Section @id='generating-component'>
    <:example>

      ```bash
      # -gc stands for glimmer component
      ember generate component my-component -gc

      # See the full set of options with:
      ember generate component --help
      ```

    <:/example>
  </Section>

  <Section @id='file-structure'>
  </Section>
</GuideSection>

But, I get the error:

Template Compiler Error (TemplateCompiler) in ember-octane-vs-classic-cheat-sheet/templates/docs.hbs

Closing tag </Section> did not match last open tag <:example> (on line 6): 

|
|  </Section>
|

(error occurred in 'ember-octane-vs-classic-cheat-sheet/templates/docs.hbs' @ line 17 : column 2)

and running with DEBUG=@docfy/*, I get the following log:

log file

=================================================================================

ENV Summary:

  TIME: Sat Sep 18 2021 11:15:21 GMT-0400 (Eastern Daylight Time)
  TITLE: ember
  ARGV:
  - 🏠/.volta/tools/image/node/14.17.6/bin/node
  - /✂️/ember-cheat-sheet/node_modules/.bin/ember
  - serve
  EXEC_PATH: 🏠/.volta/tools/image/node/14.17.6/bin/node
  TMPDIR: /tmp
  SHELL: /bin/bash
  PATH:
  - /tmp/yarn--1631978109995-0.8884726619933956
  - /✂️/ember-cheat-sheet/node_modules/.bin
  - 🏠/.config/yarn/link/node_modules/.bin
  - 🏠/.yarn/bin
  - 🏠/.volta/tools/image/node/14.17.6/libexec/lib/node_modules/npm/bin/node-gyp-bin
  - 🏠/.volta/tools/image/node/14.17.6/lib/node_modules/npm/bin/node-gyp-bin
  - 🏠/.volta/tools/image/node/14.17.6/bin/node_modules/npm/bin/node-gyp-bin
  - 🏠/.volta/tools/image/yarn/1.22.11/bin
  - 🏠/.volta/tools/image/node/14.17.6/bin
  - 🏠/.volta/bin
  - 🏠/.pythons/Python-3.6.3/bin
  - 🏠/.cargo/bin
  - 🏠/Applications
  - 🏠/apps/phantomjs/bin
  - 🏠/scripts/system-utils
  - 🏠/scripts/git
  - 🏠/scripts/rails
  - 🏠/scripts
  - 🏠/.volta/bin
  - 🏠/.pythons/Python-3.6.3/bin
  - 🏠/.cargo/bin
  - 🏠/Applications
  - 🏠/apps/phantomjs/bin
  - 🏠/scripts/system-utils
  - 🏠/scripts/git
  - 🏠/scripts/rails
  - 🏠/scripts
  - /usr/local/sbin
  - /usr/local/bin
  - /usr/sbin
  - /usr/bin
  - /sbin
  - /bin
  - /usr/games
  - /usr/local/games
  - /snap/bin
  - /snap/bin
  - 🏠/.fzf/bin
  PLATFORM: linux x64
  FREEMEM: 19545841664
  TOTALMEM: 33442414592
  UPTIME: 5440.65
  LOADAVG: 1.18,0.71,0.58
  CPUS:
  - 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz - 2938
  - 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz - 2231
  - 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz - 2400
  - 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz - 2400
  - 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz - 2938
  - 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz - 2400
  - 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz - 2400
  - 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz - 2400
  ENDIANNESS: LE
  VERSIONS:
  - ares: 1.17.2
  - brotli: 1.0.9
  - cldr: 39.0
  - icu: 69.1
  - llhttp: 2.1.3
  - modules: 83
  - napi: 8
  - nghttp2: 1.42.0
  - node: 14.17.6
  - openssl: 1.1.1l
  - tz: 2021a
  - unicode: 13.0
  - uv: 1.41.0
  - v8: 8.4.371.23-node.76
  - zlib: 1.2.11

ERROR Summary:

  - broccoliBuilderErrorStack: SyntaxError: Closing tag </Section> did not match last open tag <:example> (on line 6): 

|
|  </Section>
|

(error occurred in 'ember-octane-vs-classic-cheat-sheet/templates/docs.hbs' @ line 17 : column 2)
    at generateSyntaxError (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:11493:17)
    at TokenizerEventHandlers.validateEndTag (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:13427:15)
    at TokenizerEventHandlers.finishEndTag (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:13298:12)
    at TokenizerEventHandlers.finishTag (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:13268:14)
    at EventedTokenizer.endTagName (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:23478:27)
    at EventedTokenizer.tokenizePart (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:23771:19)
    at TokenizerEventHandlers.ContentStatement (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:12863:22)
    at TokenizerEventHandlers.acceptNode (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:12550:29)
    at TokenizerEventHandlers.Program (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:12670:14)
    at TokenizerEventHandlers.acceptTemplate (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:12546:29)
  - code: [undefined]
  - codeFrame: Closing tag </Section> did not match last open tag <:example> (on line 6): 

|
|  </Section>
|

(error occurred in 'ember-octane-vs-classic-cheat-sheet/templates/docs.hbs' @ line 17 : column 2)
  - errorMessage: ember-octane-vs-classic-cheat-sheet/templates/docs.hbs: Closing tag </Section> did not match last open tag <:example> (on line 6): 

|
|  </Section>
|

(error occurred in 'ember-octane-vs-classic-cheat-sheet/templates/docs.hbs' @ line 17 : column 2)
        in /tmp/broccoli-69332AQQgj7RPWki7/out-269-colocated_template_processor
        at TemplateCompiler
  - errorType: Template Compiler Error
  - location:
    - column: [undefined]
    - file: ember-octane-vs-classic-cheat-sheet/templates/docs.hbs
    - line: [undefined]
    - treeDir: /tmp/broccoli-69332AQQgj7RPWki7/out-269-colocated_template_processor
  - message: ember-octane-vs-classic-cheat-sheet/templates/docs.hbs: Closing tag </Section> did not match last open tag <:example> (on line 6): 

|
|  </Section>
|

(error occurred in 'ember-octane-vs-classic-cheat-sheet/templates/docs.hbs' @ line 17 : column 2)
        in /tmp/broccoli-69332AQQgj7RPWki7/out-269-colocated_template_processor
        at TemplateCompiler
  - name: Error
  - nodeAnnotation: [undefined]
  - nodeName: TemplateCompiler
  - originalErrorMessage: Closing tag </Section> did not match last open tag <:example> (on line 6): 

|
|  </Section>
|

(error occurred in 'ember-octane-vs-classic-cheat-sheet/templates/docs.hbs' @ line 17 : column 2)
  - stack: SyntaxError: Closing tag </Section> did not match last open tag <:example> (on line 6): 

|
|  </Section>
|

(error occurred in 'ember-octane-vs-classic-cheat-sheet/templates/docs.hbs' @ line 17 : column 2)
    at generateSyntaxError (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:11493:17)
    at TokenizerEventHandlers.validateEndTag (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:13427:15)
    at TokenizerEventHandlers.finishEndTag (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:13298:12)
    at TokenizerEventHandlers.finishTag (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:13268:14)
    at EventedTokenizer.endTagName (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:23478:27)
    at EventedTokenizer.tokenizePart (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:23771:19)
    at TokenizerEventHandlers.ContentStatement (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:12863:22)
    at TokenizerEventHandlers.acceptNode (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:12550:29)
    at TokenizerEventHandlers.Program (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:12670:14)
    at TokenizerEventHandlers.acceptTemplate (/✂️/ember-cheat-sheet/node_modules/ember-source/dist/ember-template-compiler.js:12546:29)

=================================================================================

Which points me at this directory:

/tmp/broccoli-69332AQQgj7RPWki7/out-269-colocated_template_processor 

which, reveals the following output (routes/docs.hbs):

<h1 id="t-layoutapplicationtitle"><a href="#t-layoutapplicationtitle">{{t 'layout.application.title'}}</a></h1>
<p>{{t 'layout.application.description-1' htmlSafe=true}}</p>
<p>{{t 'layout.application.description-2' htmlSafe=true}}</p>
<GuideSection @id='generating-files' as |Section|>
  <Section @id='generating-component'>
    <:example>
<pre><code>  \`\`\`bash
  # -gc stands for glimmer component
  ember generate component my-component -gc

  # See the full set of options with:
  ember generate component --help
  \`\`\`

&#x3C;:/example>
</code></pre>
  </Section>
  <Section @id='file-structure'>
  </Section>
</GuideSection>

Do we need to switch to rehype and rewrite remark-hbs for rehype?

[NullVoxPopuli]

Here is a reproduction: NullVoxPopuli/ember-cheat-sheet#1

[NullVoxPopuli]

Seems this breaks, too:

<GuideSection @id='generating-files' as |Section|>
  <Section @id='generating-component'>
  <:example>
\`\`\`bash
# -gc stands for glimmer component
ember generate component my-component -gc

# See the full set of options with:
ember generate component --help
\`\`\`
  <:/example>
  </Section>

  <Section @id='file-structure'>
  </Section>
</GuideSection>

as well as

<GuideSection @id='generating-files' as |Section|>
  <Section @id='generating-component'>
  <:example>

\`\`\`bash
# -gc stands for glimmer component
ember generate component my-component -gc

# See the full set of options with:
ember generate component --help
\`\`\`

  <:/example>
  </Section>

  <Section @id='file-structure'>
  </Section>
</GuideSection>

[NullVoxPopuli]

omg, I had the : and / swapped on the closing element. 🤦

[NullVoxPopuli]

still errors, tho

[NullVoxPopuli]

ok, so this renders, but the indentation is not ideal:

<GuideSection @id='generating-files' as |Section|>
  <Section @id='generating-component'>
  <:example>

    \`\`\`bash
    # -gc stands for glimmer component
    ember generate component my-component -gc

    # See the full set of options with:
    ember generate component --help
    \`\`\`

  </:example>
  </Section>

  <Section @id='file-structure'>
  </Section>
</GuideSection>

but, the code block isn't converted to a highlighted codeblock

[NullVoxPopuli]

de-denting the code-snippet gets hljs to run on it:

<GuideSection @id='generating-files' as |Section|>
  <Section @id='generating-component'>
  <:example>

\`\`\`bash
# -gc stands for glimmer component
ember generate component my-component -gc

# See the full set of options with:
ember generate component --help
\`\`\`

  </:example>
  </Section>

  <Section @id='file-structure'>
  </Section>
</GuideSection>

I guess.. there are a lot of different bugs going on here (2, I guess)

• Too much indentation breaks the remark-hbs plugin
• Can't have indentation of anything when you go in to markdown mode in a markdown block

Which maybe all boils down to one core issue:

• indentation level not stripped in nested components/elements