pugjs/pug

Pug - robust, elegant, feature rich template engine for JavaScript

Konstantin Budasov

@kbudasov

Example:
I have parent Mixin +form-row and I need to know how much +inputs (or other blocks) he received inside of it. So, it should be 2 in this case:

+form-row
   +input(is="email", required)
   +input(is="job-title", required)

VladimirUA

@VladimirUA

Hi! Can I use pug in Deno environment? Somebody has experience in integration pug to deno project?

Pranav Ballaney

@ballaneypranav

Hi, is it possible to interpolate a mixin? Basically I want to create in-page links within a large block of text, for citations. So it would be great if I could do something like:

p.
    lots of multiline text here #{+intext(1, "Cooper et al.")} some more text

and then +intext() would add a link to a citation mentioned at the bottom using the citation number provided as argument

L53c

@L53c

Did anyone met this situation where the data rendered is surrounded by < and >
alt
alt
alt

As it seem like the pictures are not being linked, please find the links below;

View: https://drive.google.com/file/d/1sIPhikZVT3mYxpmt-fLlDY8iat4R2bAN/view?usp=sharing
Code: https://drive.google.com/file/d/19kEhXWHSseJkMNrAmPc8pwK-3R4tq7nf/view?usp=sharing
Dependencies: https://drive.google.com/file/d/1zpfkk69d02ePQuRQEOqDXPOQMPYoF_uQ/view?usp=sharing

L53c

@L53c

The above have been sorted, | <- this operator was missing in the line 14

AmirHossein MOjvar

@Ojvar

Hi guys, I have a little question, How can I use pug in deno ? thanks.

Kalaivani10

@Kalaivani10

Hi how to use carousel using the dart pug?

tyler

@skotchpine

Hi everyone! Been using pug -> jsx for a while. Love it!

Yair Fried

@yfried

Hi, I'm very new to pug. I'm trying to format a cell in a table where the cell.style should return background-style: red and cell.text is "foo"

            td 
                span(style="#{cell.style}") #{cell.text}

But this resolves to <td> <span style="#{cell.style}">foo</span></td>

Why doesn't span extrapolate the value of cell.style?

matrixbot

@matrixbot

yeetmanboi Oh I thought this was a pug server

David Ankin

@alexanderankin

if anyone can offer advice on how to share templates between apps with npm packages, that would be super appreciated.

David Ankin

@alexanderankin

i actually see that you can customize this here: https://pugjs.org/api/migration-v3.html but thats a weird place to put the plugin docs and i dont see it anywhere else. I opened a ticket for this.

if anyone wants to either close it with the link to the docs, or tell me how to make them, or make the plugin docs themselves, here's the issue: pugjs/pug-en#31

Luca Matei Pintilie

@AnInternetTroll

Hi, does anyone know how I can pass optional options to pug? I want to do something like res.render("page", {message: "Warning: ohno"}); but I don't want message to be required at all times. Is it possible to achieve this?

Cody Mikol

@codymikol

I think that’s outside the scope of pug and more the server side renderer that processes pug

Luca Matei Pintilie

@AnInternetTroll

Thanks, I figured it out :thumbsup:

istiyak-iroid

@istiyak-iroid

Please help! My html is being rendered inline. Because of this I'm having CSP (Content Security Policy) issues everywhere on my app.

HTML

doctype html
html(lang="en")
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')

OUTPUT

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">...

EXPECTED OUTPUT

<!DOCTYPE html>
<html lang="en">
       <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
      </head>
</html>

Volodymyr

@dx1ded

Hi guys, why this code returning error?

David Ankin

@alexanderankin

i dont think it supports new lines like that, i think thats only in blocks

Garridog

@Garridog

Hi, my mac dont detect pug command

Carlos Orama

@SolAZDev

Hello, could I ask for help on an Angular tempalte? Im trying to pass down an array object as a paramter to a mixin

Alex Pavlovich

@alexp1917

hey so did pug just become actively maintained? like 6 commits merged a couple days back

Shinigami

@Shinigami92

red is sus..., uhm I mean yeah I noticed that too and I would be very happy if it did

Marta Blázquez

@marta-blazquez

Hi! could you please let me know if it is possible to include an image in pug proyect via URL instead folder path?

Thank you in advance

Somebody have some complet guide to share? All that I can find is to short and incomplete.

cͥërͣeͫ多ro Cër多ërนs

@whoiscerebrocerberus

Hi guys...new here

Linda MacDonald

@lindamacdonald

Hey there guys hope you are all doing well :) SO I am on a course that uses pug.js and must admit I LOVE pug, so got curious to learn more about it :) I went online to see a production site that uses pug, but I couldn't find any info...can you guys tell me about a site that uses pug in production. I would like to check out the load speeds of it

Nathan Parikh

@nathanp

Hi there, Is there any way to get the current page URL in pug? I've got a static site and am trying to build out canonical tags that will grab the current page url

Trincheira - Comunicação Visual

@marvitphy

hey guys!!! :0

Rajasegar Chandran

@rajasegar

I made a CLI tool to generate Pug mixins from SVG files
https://github.com/rajasegar/svpug
Appreciate any comments/feedback :pray:

Burt Harris

@BurtHarris

Hello. I'm investigating pug, seems quite interesting, I want to understand the high-level syntax better. The readme, under Tutorials, points to https://cssdeck.com/labs/learning-the-jade-templating-engine-syntax. This page doesn't seem to be working for me, and still seems use the name 'jade'. Is there really some tutorial-like docs behind this?

2 replies

Chan Cheung Wai

@kenchan1604

how to string to int in pug ?

Chris Pak

@Pakiavelli

hello is anyone here

i need help with pug please

const chris = require('help')

Javier Sanchez

@jsanch9

hello! Will pug be updated to use a newer safer version of lodash ?

├─┬ pug@3.0.2
│ └─┬ pug-code-gen@3.0.2
│ └─┬ constantinople@4.0.1
│ └─┬ @babel/types@7.11.0
│ └── lodash@4.17.20

Avinash Sharma

@avin1103

Hey everyone!
Is there a way to make the scrolling smooth?

especially when someone hits a button and it scrolls to another section within the page?

Filip Samuel

@1337M0nst3r

is it normal that this doesn't compile?

pre
    code.
        #{}

It gives me an "Unexpected token error", I've tried using pipes and left brackets to make Pug ignore it but it doesn't work

webdiscus

@webdiscus

Hello,
here is NEW pug-plugin for Webpack.

Now is possible to define pug templates in webpack entry. All styles and scripts will be automatically extracted from pug.

const PugPlugin = require('pug-plugin');
module.exports = {
  entry: {
    'index': './src/index.pug', // extract html, css and js from pug
  },
  plugins: [
    new PugPlugin(),
  ],
  // ...
};

Now is possible to use the source files of styles and scripts directly in pug.

link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))

The generated HTML contains hashed CSS and JS output filenames, depending on how webpack is configured.

<link rel="stylesheet" href="/assets/css/styles.05e4dd86.css">
<script src="/assets/js/main.f4b855d8.js"></script>

CxRes

@CxRes

A question for pug developers: Is it not possible to have a limited version of pretty like safePretty where line breaks are introduced only when a html block tag is followed by another block tag only.

Oğuz

@ouzsrcm

Hi everyone, i so newbe here, i hope getting an advice with pug :)

arvkonstantin

@arvkonstantin

Hello! Can i compile pug to pug?

Mehul Prajapati

@mehul_cs_twitter

Hey everyone

Are the devs/maintainers in here?

Hope you are doing great, and having a good day

I'm curious to know if this project is still being maintained, I've raised a feature request pugjs/pug#3379.

It would be great if you can have a look there :)

Where communities thrive

People

Repo info

Activity

HTML

OUTPUT

EXPECTED OUTPUT