Do Pug Mixins work with Fiber?

[ghost]

Hi, I'm trying to get the Pug template engine mixins to work but I can't get it to work.

All my pug code is under templates/views.

The mixins are located in _mixins.

Specifically I am trying to import one called _card.pug.

When I do it, the server crashes.

block content
    include _mixins/_card.pug //- This doesn't make the server crash

+card("Hello world") //- This makes the server crash

Thanks in advance.

[gaby]

@carlos-molero Is this related to https://github.com/gofiber/template/tree/master/pug ?

Do you have a full example?

[sixcolors]

@carlos-molero do you have the trace from the panic or preferably a runnable minimum example?

[ghost]

@gaby @sixcolors

Yep, here is the whole code involved:

main.go

func main() {
	engine := pug.New("./src/templates/views", ".pug")
	fiberLogger := logger.New()
	colorLogger := log.New(os.Stderr)

	app := fiber.New(fiber.Config{
		Views: engine,
	})

	app.Use(fiberLogger)
	app.Use(recover.New())

	corsConfig := cors.Config{
		AllowOrigins:     os.Getenv("ALLOWED_ORIGIN"),
		AllowCredentials: true,
	}

	app.Use(cors.New(corsConfig))

	colorLogger.Infof("Environment: %s", os.Getenv("ENV"))
	colorLogger.Infof("Server initialized with CORS [allowed origin]: %s", corsConfig.AllowOrigins)

	app.Static("/dist", "./dist")

	app.Get("/", func(c *fiber.Ctx) error {
		return c.Render("index", fiber.Map{
			"Metas": map[string]string{
				"title":       "<YOUR_META_TITLE>",
				"description": "<YOUR_META_DESCRIPTION>",
			},
		}, "layouts/main")
	})

	colorLogger.Fatal(app.Listen(":8080"))
}

/layouts/main.pug

head
  meta(charset='utf-8')
  meta(name='viewport' content='width=device-width, initial-scale=1')

  title {{.Metas.title}}
  meta(name='title' content='{{.Metas.title}}')
  meta(name='description' content='{{.Metas.description}}')

  block head
    link(rel='stylesheet' href='/dist/assets/css/global.css')
    //- link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css')
    //- script(src='https://code.jquery.com/jquery-3.7.1.slim.min.js')

body 
  include ../_includes/_desktop-navbar.pug
  | {{embed}}
  block content
  include ../_includes/_footer.pug

  block body
    //- script(src='/dist/assets/js/lib/bootstrap.js')
    script(src='/dist/assets/js/index.js')

/_mixins/_card.pug

mixin card(lordiconUrl, title, description)
    .card.text-white.rounded-5.p-3
        lord-icon(src=lordiconUrl trigger="loop" colors="primary:#ffffff,secondary:#ffffff" style="width:100px;height:100px")
        h2=title
        p=description

index.pug

block content
    include _mixins/_card.pug
    div#services 
                .col-6
                    +card("App development", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta mauris in dolor gravida, ac vehicula mauris ultricies. Integer dignissim, arcu vel sagittis ornare, mi orci accumsan odio, nec eleifend nisi enim eu nisi.", "https://cdn.lordicon.com/uvqdhrsk.json")
                .col-6
                    +card("App development", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta mauris in dolor gravida, ac vehicula mauris ultricies. Integer dignissim, arcu vel sagittis ornare, mi orci accumsan odio, nec eleifend nisi enim eu nisi.", "https://cdn.lordicon.com/abwrkdvl.json")

Error log: 23:30:52 | 500 | 19.809µs | 127.0.0.1 | GET | / | failed to render: render: layout layouts/main does not exist

Which doesn't help much because if I comment the +card lines it works again.

I don't see examples using mixin in https://github.com/gofiber/template/tree/master/pug...

[ghost]

It seems like it does work, but the problem comes when you try to use the variables passed to the mixin.

[ghost]

I figured it out by printing the result of pug, err = jade.ParseWithFileSystem(path, buf, e.FileSystem).

It makes sense, the pug templates get compiled into regular Go templates.

Internal variables can be called with a dollar $myVariable.

{{ $lordiconUrl := "App development" }}{{ $title := "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta mauris in dolor gravida, ac vehicula mauris ultricies. Integer dignissim, arcu vel sagittis ornare, mi orci accumsan odio, nec eleifend nisi enim eu nisi." }}{{ $description := "https://cdn.lordicon.com/abwrkdvl.json" }}
<lord-icon src="lordiconUrl" trigger="loop" colors="primary:#ffffff,secondary:#ffffff" style="width:100px;height:100px"></lord-icon><h2>{{ title }}</h2></div></div></div></div></div>

The mixin should use variables like this:

mixin card(lordiconUrl, title, description)
    .card.text-white.rounded-5.p-3
        lord-icon(src=`$lordiconUrl` trigger="loop" colors="primary:#ffffff,secondary:#ffffff" style="width:100px;height:100px")
        h2= $title
        p= $description

Thanks!