Git Product home page Git Product logo

Comments (14)

NiklasPor avatar NiklasPor commented on July 17, 2024 6

This will be fixed with #49 .

Formatted examples:

@janraasch

{{ define "main" }}
  {{ $headless := .Site.GetPage "/homepage" }}
  {{ $sections := $headless.Resources.ByType "page" }}
  <header
    id="site-head"
    {{ with .Params.header_image }}
      style="background-image: url({{ . }})"
    {{ end }}
  >
    <div class="vertical">
      <div id="site-head-content" class="inner">
        {{ with .Params.header_headline }}
          <h1 class="blog-title">{{ . }}</h1>
        {{ end }}
        {{ with .Params.header_subheadline }}
          <h2 class="blog-description">{{ . }}</h2>
        {{ end }}
        {{ range where $sections ".Params.header_menu" "eq" true }}
          <a class="btn site-menu" data-title-anchor="{{ anchorize .Title }}"
            >{{ .Title }}</a
          >
        {{ end }}
        <i id="header-arrow" class="fa fa-angle-down"></i>
      </div>
    </div>
  </header>
  <main class="content" role="main">
    <div class="fixed-nav"></div>
    {{ $headless := .Site.GetPage "/homepage" }}2
  </main>
{{ end }}

@jasikpark

{{ with .Get "class" }}
  ... {{ . }} ...
{{ end }}

from prettier-plugin-go-template.

NiklasPor avatar NiklasPor commented on July 17, 2024 5

Thanks, I'll have a look at it 😄

from prettier-plugin-go-template.

NiklasPor avatar NiklasPor commented on July 17, 2024 4

@shiftgeist
Sorry, I'm currently quite busy with some other (not opensource) projects 😢

Yes, we'd need a way to detect whether the {{ and }} are inside a html tag.
If that's the case we could just use the regular replacement, instead of block replacement (for if etc).

In case you have anything in mind just hit me up here or on Twitter. Or open a PR – I'd be happy about every suggestion 👍

(Blocks inside attributes should work for now, as in your workaround.)

from prettier-plugin-go-template.

NiklasPor avatar NiklasPor commented on July 17, 2024 1

I gave it a shot, could you try [email protected] on your codebase?

from prettier-plugin-go-template.

NiklasPor avatar NiklasPor commented on July 17, 2024 1

@janraasch So I fixed up the large example and it works now on my machine ™️

Please try out: [email protected]

from prettier-plugin-go-template.

janraasch avatar janraasch commented on July 17, 2024

Hi @NiklasPor, sure.

I still get

Checking formatting...
layouts/index.html[error] layouts/index.html: SyntaxError: Unexpected closing tag "BPGT28EPGT". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (4:77)
[error]   2 | <!--BPGTBPGT26EPGTEPGT-->
[error]   3 | <!--BPGTBPGT27EPGTEPGT-->
[error] > 4 | <header id="site-head" <BPGT28EPGT>style="background-image: url(BPGT29EPGT)"</BPGT28EPGT>>
[error]     |                                                                             ^
[error]   5 |     <div class="vertical">
[error]   6 |         <div id="site-head-content" class="inner">
[error]   7 |

on

{{ define "main" }}
{{ $headless := .Site.GetPage "/homepage" }}
{{ $sections := $headless.Resources.ByType "page" }}
<header id="site-head" {{ with .Params.header_image }}style="background-image: url({{ . }})"{{ end }}>
    <div class="vertical">
        <div id="site-head-content" class="inner">

            {{ with .Params.header_headline }}<h1 class="blog-title">{{ . }}</h1>{{ end }}
            {{ with .Params.header_subheadline }}<h2 class="blog-description">{{ . }}</h2>{{ end }}

            {{ range where $sections ".Params.header_menu" "eq" true }}
                 <a class='btn site-menu' data-title-anchor='{{ anchorize .Title }}'>{{ .Title }}</a>
            {{ end }}
            <i id='header-arrow' class="fa fa-angle-down"></i>
        </div>
    </div>
</header>
<main class="content" role="main">

    <div class='fixed-nav'>
    </div>
    {{ range $index_val, $elem_val := $sections }}
        <div class='post-holder'>
            <article id='{{ anchorize .Title }}' class='post {{ if eq $index_val 0 }}first{{ else }}{{ if eq (add $index_val 1) (len $sections) }}last{{ end }}{{ end }}'>
                <header class="post-header">
                    <h2 class="post-title">{{ .Title }}</h2>
                </header>
                <section class="post-content">
                    {{ .Content }}
                </section>
            </article>
            <div class='post-after'></div>
        </div>
    {{ end }}
</main>
{{ end }}

using 0.0.11-beta.

from prettier-plugin-go-template.

janraasch avatar janraasch commented on July 17, 2024

The problem seems to be the define "main"-opening, because

{{ define "main" }}
<header id="site-head" {{ with .Params.header_image }} style="background-image: url({{ . }})" {{ end }}></header>
{{ end }}

still fails with

SyntaxError: Unexpected closing tag "BPGT26EPGT". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (2:79)
[error]   1 | <BPGT25EPGT>
[error] > 2 | <header id="site-head" <BPGT26EPGT> style="background-image: url(BPGT27EPGT)" </BPGT26EPGT>></header>
[error]     |                                                                               ^
[error]   3 | </BPGT25EPGT>

while

<header id="site-head" {{ with .Params.header_image }} style="background-image: url({{ . }})" {{ end }}></header>

works fine...

from prettier-plugin-go-template.

NiklasPor avatar NiklasPor commented on July 17, 2024

Yeah, I just noticed there is a missing global flag in a regex for this. I'll later publish another beta version you can try out.

Thanks for your help. Would it be fine if I include your example inside the test file?

from prettier-plugin-go-template.

janraasch avatar janraasch commented on July 17, 2024

Yeah, I just noticed there is a missing global flag in a regex for this. I'll later publish another beta version you can try out.

That's great.

Thanks for your help. Would it be fine if I include your example inside the test file?

Absolutely, the code is open-source anyway: https://github.com/janraasch/hugo-scroll 😸

from prettier-plugin-go-template.

NiklasPor avatar NiklasPor commented on July 17, 2024

Great!

Now please try again (one last time 😆 ) with [email protected].

from prettier-plugin-go-template.

janraasch avatar janraasch commented on July 17, 2024

@NiklasPor, w00ps, now something else broke 🤕 🤣 .

Now I'm getting a

layouts/index.html[error] layouts/index.html: Error: Missing ending block.
[error]     at Object.preprocess (/Users/jan/hugo-scroll/node_modules/prettier-plugin-go-template/lib/index.js:62:23)
[error]     at Object.parse (/Users/jan/hugo-scroll/node_modules/prettier/index.js:13560:21)
[error]     at coreFormat (/Users/jan/hugo-scroll/node_modules/prettier/index.js:14841:25)
[error]     at format (/Users/jan/hugo-scroll/node_modules/prettier/index.js:15063:14)
[error]     at formatWithCursor (/Users/jan/hugo-scroll/node_modules/prettier/index.js:15080:12)
[error]     at Object.formatWithCursor (/Users/jan/hugo-scroll/node_modules/prettier/index.js:54672:12)
[error]     at format (/Users/jan/hugo-scroll/node_modules/prettier/bin-prettier.js:15851:14)
[error]     at Object.formatFiles (/Users/jan/hugo-scroll/node_modules/prettier/bin-prettier.js:16035:16)
[error]     at Object.run (/Users/jan/hugo-scroll/node_modules/prettier/bin-prettier.js:16508:14)
[error]     at Object.<anonymous> (/Users/jan/hugo-scroll/node_modules/prettier/bin-prettier.js:16523:5)

for

{{ define "main" }}
{{ $headless := .Site.GetPage "/homepage" }}
{{ $sections := $headless.Resources.ByType "page" }}
<header id="site-head" {{ with .Params.header_image }}style="background-image: url({{ . }})"{{ end }}>
    <div class="vertical">
        <div id="site-head-content" class="inner">

            {{ with .Params.header_headline }}<h1 class="blog-title">{{ . }}</h1>{{ end }}
            {{ with .Params.header_subheadline }}<h2 class="blog-description">{{ . }}</h2>{{ end }}

            {{ range where $sections ".Params.header_menu" "eq" true }}
                 <a class='btn site-menu' data-title-anchor='{{ anchorize .Title }}'>{{ .Title }}</a>
            {{ end }}
            <i id='header-arrow' class="fa fa-angle-down"></i>
        </div>
    </div>
</header>
<main class="content" role="main">

    <div class='fixed-nav'>
    </div>
    {{ range $index_val, $elem_val := $sections }}
        <div class='post-holder'>
            <article id='{{ anchorize .Title }}' class='post {{ if eq $index_val 0 }}first{{ else }}{{ if eq (add $index_val 1) (len $sections) }}last{{ end }}{{ end }}'>
                <header class="post-header">
                    <h2 class="post-title">{{ .Title }}</h2>
                </header>
                <section class="post-content">
                    {{ .Content }}
                </section>
            </article>
            <div class='post-after'></div>
        </div>
    {{ end }}
</main>
{{ end }}

from prettier-plugin-go-template.

janraasch avatar janraasch commented on July 17, 2024

Hi @NiklasPor, thank you for your avid replies.

Sadly... 😺 there's a new problem 😄.

For some reason, after running prettier --write once, your plugin now wants to format again and then it leaves a <!--BPGTBPGT30EPGTEPGT-- and a > in the code.

Here's a branch to illustrate the issue: https://github.com/janraasch/hugo-scroll/commits/test-prettier-go-template

After running formatting once, I get zjedi/hugo-scroll@edef933 which seems correct.

But then, running prettier --check I'm being told, that I should run prettier again. Then, after running prettier --write again, I get zjedi/hugo-scroll@2773d05 which now validates, but includes the internal <!--BPGTBPGT30EPGTEPGT-- and a > lines...

from prettier-plugin-go-template.

shiftgeist avatar shiftgeist commented on July 17, 2024

First of all thank you for this awesome plugin!

I can confirm this also happens for me on version 0.0.11-beta.3.

Source:

<section class="relative py-12 mb-0 o-section" {{ if $dev }}template="api.html"{{ end }}>

Prettier log:

Unexpected closing tag[...]

 <section class="relative py-12 mb-0 o-section" <BPGT831EPGT>template="api.html"</BPGT831EPGT>>

The workaround I found, but not worked for every situation:

- <section class="relative py-12 mb-0 o-section" {{ if $dev }}template="api.html"{{ end }}>
+ <section class="relative py-12 mb-0 o-section" template="{{ if $dev }}api.html{{ end }}">

Is there a way to differentiate between template strings ({{, }}) inside of html tags?

I am happy to test new beta versions.

from prettier-plugin-go-template.

jasikpark avatar jasikpark commented on July 17, 2024

I seem to be having a similar problem with {{ with .Get "class" }} ... {{ . }} ... {{ end }} statements.

Prettier Output: 
[error] layouts/_default/single.html: SyntaxError: Unexpected closing tag "BPGT135EPGT". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (72:1)
[error]   70 |   <div><BPGT148EPGT><BPGT149EPGT><a role="next"
[error]   71 |       href="BPGT150EPGT"><BPGT151EPGT>BPGT152EPGTBPGT153EPGTBPGT154EPGT</BPGT151EPGT> </a> </BPGT149EPGT></BPGT148EPGT></div>
[error] > 72 | </BPGT135EPGT>
[error]      | ^^^^^^^^^^^^^^
[error]   73 | </section>
[error]   74 | </BPGT109EPGT>
layouts/404.html
[error] layouts/404.html: SyntaxError: Unexpected character "s" (14:24)
[error]   12 | <main id="main">
[error]   13 |   <BPGT168EPGT></BPGT168EPGT>
[error] > 14 |   <p>Oops!! Here&#x2019s my <a href="BPGT170EPGT">homepage</a> and if you think something is weird you can open
[error]      |                        ^
[error]   15 |     an issue on my <a href="https://github.com/jasikpark/jasik-xyz/issues/new">github repo</a> or email me at <a
[error]   16 |       href="mailto:[email protected]?subject=RE%20404">[email protected]</a></p>
[error]   17 |   <figure>
layouts/index.html
[error] layouts/index.html: SyntaxError: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (18:3)
[error]   16 |         <a href="BPGT175EPGT">Portfolio</a>
[error]   17 |     </li>
[error] > 18 |   </div>
[error]      |   ^^^^^^
[error]   19 |   <p class="mb-0">You can find me at:</p>
[error]   20 |   <ul class="py-1 mb-4 grid grid-auto">
[error]   21 |     <li>
layouts/photos/photos.html
[error] layouts/photos/photos.html: SyntaxError: Unexpected closing tag "BPGT195EPGT". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (24:44)
[error]   22 |       <figure class="e-content p-name">
[error]   23 |         <img <BPGT195EPGT> <BPGT196EPGT>
[error] > 24 |           src='BPGT197EPGT' </BPGT196EPGT> </BPGT195EPGT> <BPGT200EPGT>alt="BPGT201EPGT" </BPGT200EPGT>
[error]      |                                            ^^^^^^^^^^^^^^
[error]   25 |           <BPGT203EPGT>title="BPGT204EPGT" </BPGT203EPGT> />
[error]   26 |         <figcaption>
[error]   27 |           <BPGT206EPGT><p>BPGT207EPGT</p>BPGT208EPGT
layouts/shortcodes/img.html
[error] layouts/shortcodes/img.html: SyntaxError: Unexpected closing tag "BPGT268EPGT". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (7:65)
[error]    5 | 
[error]    6 | <BPGT267EPGT>
[error] >  7 | <img <BPGT268EPGT> width='BPGT269EPGT' BPGT270EPGT width="100%" </BPGT268EPGT> src="BPGT272EPGT" <BPGT273EPGT>alt='BPGT274EPGT' BPGT275EPGTalt='BPGT276EPGT'
[error]      |                                                                 ^^^^^^^^^^^^^^
[error]    8 |   </BPGT273EPGT> <BPGT278EPGT>title='BPGT279EPGT'
[error]    9 |   BPGT280EPGTtitle='BPGT281EPGT' </BPGT278EPGT>/>
[error]   10 | <!--BPGTBPGT283EPGTEPGT-->
All matched files use Prettier code style!

from prettier-plugin-go-template.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.