Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/language/attributes.md
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ a(class=classes)
|
|
//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])
a(class=classes class=['bing'])
```

It can also be an object which maps class names to `true` or `false` values. This is useful for applying conditional classes
Expand All @@ -187,15 +187,25 @@ a(class={active: currentUrl === '/about'} href='/about') About
Classes may be defined using a `.classname` syntax:

```pug-preview
a.button
a.button.important
```

Since `div`'s are such a common choice of tag, it is the default if you omit the tag name:

```pug-preview
.content
.content.admin
```

## Class Literal and Attributes used together
These can be pulled together in a massive, highly readable, element defining Class Chain of Doom.

```pug-preview
- var classes = ['foo', 'bar', 'baz']
- var currentUrl = '/about'
a.bang.bong(class=classes class=['bing'] class={active: currentUrl === '/about'} href='/about') About
```


## ID Literal

IDs may be defined using a `#idname` syntax:
Expand Down
25 changes: 17 additions & 8 deletions src/language/conditionals.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,39 @@ Pug's first-class conditional syntax allows for optional parentheses.

If you’re coming from Pug v1, you may now omit the leading `-`. Otherwise, it's identical (just regular JavaScript):

You can use strict or loose equality (triple and double equals), as well as any valid expression for a JavaScript `if` statement

```pug-preview
- var user = { description: 'foo bar baz' }
- var authorised = false
-
var user = {
37: { name: "Finn", description: "The Human", authorised: true },
38: { name: "Marceline", description: "The Vampire Queen", authorised: false }
}
var id = 38
#user
if user.description
if user[id].description
h2.green Description
p.description= user.description
else if authorised
p.description= user[id].description
if user[id].name === "Finn"
h1.yellow Name
p.name= user[id].name
else if user[id].authorised
h2.blue Description
p.description.
User has no description,
why not add one...
else
h2.red Description
p.description User has no description
p.description User is not Finn.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this be clearer as:

  if user[id].name === "Finn"
    h1.yellow Name
    p.name= user[id].name
  else
    h2.red Description
    p.description User is not Finn.

  if user[id].description
    h2.green Description
    p.description= user[id].description
  else
    h2.blue Description
    p.description.
      User has no description,
      why not add one...

i.e. first, are they "Finn", second, do they have a description, with a space between the two if blocks.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first section makes sense, I've changed it.

The second section, I was trying to work in the boolean style 'if exists' check on the more sensible authorised element.

```

Pug also provides the conditional `unless`, which works like a negated `if`. The following are equivalent:

```pug-preview-readonly
\\\\\\\\\\ a.pug <
unless user.isAnonymous
p You're logged in as #{user.name}
p You're logged in as #{user[id].name}
\\\\\\\\\\ b.pug >
if !user.isAnonymous
p You're logged in as #{user.name}
p You're logged in as #{user[id].name}
```
14 changes: 12 additions & 2 deletions src/language/plain-text.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,22 @@ Plain text does still use tag and string [interpolation](interpolation.html), bu

One common pitfall here is managing whitespace in the rendered HTML. We'll talk about that at the end of this page.

## Free text

Simple free text can be added to the page, without a tag, by using a pipe. Note: Free text like this has various caveats regarding styling, etc.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have been calling this "piped text", so this section should be merged with that section that's further down the page. It may be that:

  1. Free text may be a clearer name than "piped text" it's probably closer to what people are looking for.
  2. It might be better to have the piped text further up the page.
  3. Your description may be clearer than the one we have currently.

I'm happy to hear opinions on this, and I don't have a strong opinion on it of my own. As a relative beginner, you're probably much better placed than I am to suggest what the best wording is for the help files.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah see I had no idea that's what Piped Text was intended for. . . it came across as "piped text is a continuation of text in an element", with the existing example being a continuation of p element. I tend to agree that my example makes the intended point a bit more clearly.


```pug-preview
div
| This is plain old free text.
```


## Inline in a Tag

The easiest way to add plain text is *inline*. The first term on the line is the tag itself. Everything after the tag and one space will be the text contents of that tag. This is most useful when the plain text content is short (or if you don't mind lines running long).
The easiest way to add plain text is *inline*. The first term on the line is the tag itself. Add the tag, then one space, and then the text contents of that tag. This is most useful when the plain text content is short (or if you don't mind lines running long).

```pug-preview
p This is plain old <em>text</em> content.
p This is paragraph <em>text</em> content.
```

## Literal HTML
Expand Down