Add pug cheatsheet

jade.md

@@ -1,84 +1,5 @@
 ---
 title: Jade
 category: JavaScript libraries
+redirect_to: /pug
 ---
-
-```
-doctype html
-// comment (html)
--// silent comment
-
-html(lang='en')
-  - javascript()
-  h1.class#id(name='hi')
-    | Text. Hello there,
-    = name
-
-  if condition
-    p. hello
-
-  p.
-    multiline text
-    goes here
-```
-
-### Iteration
-
-```jade
-ul
-  each user in users
-    li= user
-```
-
-### Layouts
-
-```jade
-extends layout.jade
-
-block title
-  | hello
-
-block content
-  | hello
-```
-
-```jade
--// layout.jade
-title
-  block title
-body
-  block content
-```
-
-### Includes (partials)
-
-```jade
-include ./includes/head.jade
-include:markdown article.md
-```
-
-### Mixins
-
-```jade
-mixin list
-  ul ..
-
-+list
-```
-
-```jade
-mixin pet(name)
-  span.pet= name
-
-+pet('cat')
-```
-
-```jade
-mixin article(title)
-  article
-    h2.title= title
-    block
-
-+article('hello there')
-  p Content goes here
-```

pug.md

@@ -0,0 +1,132 @@
+---
+title: Pug
+category: JavaScript libraries
+layout: 2017/sheet
+prism_languages: [jade]
+updated: 2017-08-30
+weight: -3
+---
+
+## Pug
+{: .-three-column}
+
+### Basic document
+
+```jade
+doctype html
+html(lang='en')
+  - javascript()
+  h1.class#id(name='hi')
+    | Text. Hello there,
+    = name
+
+  if showControls
+    button.red Edit this page
+```
+
+### Comments
+
+```jade
+// This comment will appear in the HTML
+```
+
+```jade
+-// This is a silent comment
+```
+
+### Iteration
+
+```jade
+ul
+  each user in users
+    li= user
+```
+
+### Layouts
+
+```jade
+-// page.pug
+extends layout.pug
+
+block title
+  | hello
+
+block content
+  | hello
+```
+
+```jade
+-// layout.pug
+title
+  block title
+body
+  block content
+```
+
+### Includes (partials)
+
+```jade
+include ./includes/head.pug
+```
+
+```jade
+include:markdown article.md
+```
+
+### Multiline text
+
+```jade
+p.
+  This is text that doesn't need to
+  be prefixed by pipes.
+```
+{: data-line="1"}
+
+```jade
+script.
+  // It's great for raw
+  // JavaScript and stuff
+  alert('hello')
+```
+{: data-line="1"}
+
+## Mixins
+{: .-three-column}
+
+### Mixins
+
+```jade
+mixin list
+  ul
+    ···
+```
+
+```jade
++list
+```
+
+### Mixin with arguments
+
+```jade
+mixin pet(name)
+  span.pet= name
+```
+
+```jade
++pet('cat')
+```
+
+### Mixin with content
+
+```jade
+mixin article(title)
+  article
+    h2.title= title
+    block
+```
+{: data-line="4"}
+
+```jade
++article('hello there')
+  p Content goes here
+```