So siehts ganz gut aus !

2019-04-03 17:44:16 +02:00
parent 3695b33c83
commit 0fe884c90a
6758 changed files with 530485 additions and 65 deletions
@@ -0,0 +1,5 @@
+The examples in this directory can be run simply by something like. 
+
+    node attributes.js
+
+You can also open `browser.html` in a browser.
@@ -0,0 +1,11 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/attributes.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+console.log(fn({ name: 'tj' }));
@@ -0,0 +1,8 @@
+div#id.left.container(class='user user-' + name)
+  h1.title= name
+  form
+    //- unbuffered comment :)
+    // An example of attributes.
+    input(type='text' name='user[name]' value=name)
+    input(checked, type='checkbox', name='user[blocked]')
+    input(type='submit', value='Update')
@@ -0,0 +1,16 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/code.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+var users = {
+  tj: { age: 23, email: 'tj@vision-media.ca', isA: 'human' },
+  tobi: { age: 1, email: 'tobi@is-amazing.com', isA: 'ferret' }
+};
+
+console.log(fn({ users: users }));
@@ -0,0 +1,17 @@
+
+- var title = "Things"
+
+-
+  var subtitle = ["Really",  "long",
+                  "list", "of",
+                  "words"]
+h1= title
+h2= subtitle.join(" ")
+
+ul#users
+  each user, name in users
+    // expands to if (user.isA == 'ferret')
+    if user.isA == 'ferret'
+      li(class='user-' + name) #{name} is just a ferret
+    else
+      li(class='user-' + name) #{name} #{user.email}
@@ -0,0 +1,16 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../');
+
+var locals = {
+  users: {
+    tj: { age: 23, email: 'tj@vision-media.ca', isA: 'human' },
+    tobi: { age: 1, email: 'tobi@is-amazing.com', isA: 'ferret' }
+  }
+};
+
+var fn = pug.compileFile(__dirname + '/dynamicscript.pug');
+console.log(fn(locals));
@@ -0,0 +1,5 @@
+html
+  head
+    title Dynamic Inline JavaScript
+    script.
+      var users = !{JSON.stringify(users).replace(/<\//g, "<\\/")}
@@ -0,0 +1,16 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/each.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+var users = {
+  tj: { age: 23, email: 'tj@vision-media.ca', isA: 'human' },
+  tobi: { age: 1, email: 'tobi@is-amazing.com', isA: 'ferret' }
+};
+
+console.log(fn({ users: users }));
@@ -0,0 +1,3 @@
+ul#users
+  each user, name in users
+    li(class='user-' + name) #{name} #{user.email}
@@ -0,0 +1,10 @@
+html
+  head
+    h1 My Site - #{title}
+    block scripts
+      script(src='/jquery.js')
+  body
+    block content
+    block foot
+      #footer
+        p some footer content
@@ -0,0 +1,18 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/extend.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+var tobi = { name: 'tobi', age: 2 };
+var loki = { name: 'loki', age: 1 };
+var jane = { name: 'jane', age: 5 };
+
+console.log(fn({
+    title: 'pets'
+  , pets: [tobi, loki, jane]
+}));
@@ -0,0 +1,11 @@
+
+extends extend-layout.pug
+
+block scripts
+  script(src='/jquery.js')
+  script(src='/pets.js')
+
+block content
+  h1= title
+  each pet in pets
+    include pet.pug
@@ -0,0 +1,18 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/form.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+var user = {
+  name: 'TJ',
+  email: 'tj@vision-media.ca',
+  city: 'Victoria',
+  province: 'BC'
+};
+
+console.log(fn({ user: user }));
@@ -0,0 +1,29 @@
+form(method="post")
+  fieldset
+    legend General
+    p
+      label(for="user[name]") Username:
+        input(type="text", name="user[name]", value=user.name)
+    p
+      label(for="user[email]") Email:
+        input(type="text", name="user[email]", value=user.email)
+        .tip.
+          Enter a valid 
+          email address 
+          such as <em>tj@vision-media.ca</em>.
+  fieldset
+    legend Location
+    p
+      label(for="user[city]") City:
+        input(type="text", name="user[city]", value=user.city)
+    p
+      select(name="user[province]")
+        option(value="") -- Select Province --
+        option(value="AB") Alberta
+        option(value="BC") British Columbia
+        option(value="SK") Saskatchewan
+        option(value="MB") Manitoba
+        option(value="ON") Ontario
+        option(value="QC") Quebec
+  p.buttons
+    input(type="submit", value="Save")
@@ -0,0 +1,11 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/includes.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+console.log(fn());
@@ -0,0 +1,7 @@
+
+html
+  include includes/head.pug
+  body
+    h1 My Site
+    p Welcome to my super lame site.
+    include includes/foot.pug
@@ -0,0 +1,2 @@
+#footer
+  p Copyright (c) foobar
@@ -0,0 +1,6 @@
+head
+  title My Site
+  // including other pug works
+  include scripts.pug
+  // including .html, .css, etc works
+  include style.css
@@ -0,0 +1,2 @@
+script(src='/javascripts/jquery.js')
+script(src='/javascripts/app.js')
@@ -0,0 +1,5 @@
+<style>
+  body {
+    padding: 50px;
+  }
+</style>
@@ -0,0 +1,11 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../');
+
+pug.renderFile(__dirname + '/layout.pug', { debug: true }, function(err, html){
+    if (err) throw err;
+    console.log(html);
+});
@@ -0,0 +1,11 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/layout.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+console.log(fn());
@@ -0,0 +1,14 @@
+doctype html
+html(lang="en")
+  head
+    title Example
+    script.
+      if (foo) {
+        bar();
+      }
+  body
+    h1 Pug - node template engine
+    #container
+      :markdown-it
+        Pug is a _high performance_ template engine for [node](http://nodejs.org),
+        inspired by [haml](http://haml-lang.com/), and written by [TJ Holowaychuk](http://github.com/visionmedia).
@@ -0,0 +1,16 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/mixins.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+var user = {
+    name: 'tj'
+  , pets: ['tobi', 'loki', 'jane', 'manny']
+};
+
+console.log(fn({ user: user }));
@@ -0,0 +1,14 @@
+include mixins/dialog.pug
+include mixins/profile.pug
+
+.one
+  +dialog
+
+.two
+  +dialog-title('Whoop')
+
+.three
+  +dialog-title-desc('Whoop', 'Just a mixin')
+
+#profile
+  +profile(user)
@@ -0,0 +1,15 @@
+
+mixin dialog
+  .dialog
+    h1 Whoop
+    p stuff
+
+mixin dialog-title(title)
+  .dialog
+    h1= title
+    p stuff
+
+mixin dialog-title-desc(title, desc)
+  .dialog
+    h1= title
+    p= desc
@@ -0,0 +1,10 @@
+
+mixin pets(pets)
+  ul.pets
+    each pet in pets
+      li= pet
+
+mixin profile(user)
+  .user
+    h2= user.name
+    +pets(user.pets)
@@ -0,0 +1,3 @@
+.pet
+  h2= pet.name
+  p #{pet.name} is <em>#{pet.age}</em> year(s) old.
@@ -0,0 +1,17 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/rss.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+var items = [];
+
+items.push({ title: 'Example', description: 'Something', link: 'http://google.com' });
+items.push({ title: 'LearnBoost', description: 'Cool', link: 'http://learnboost.com' });
+items.push({ title: 'Express', description: 'Cool', link: 'http://expressjs.com' });
+
+console.log(fn({ items: items }));
@@ -0,0 +1,14 @@
+doctype xml
+rss(version='2.0')
+channel
+  title RSS Title
+  description Some description here
+  link http://google.com
+  lastBuildDate Mon, 06 Sep 2010 00:01:00 +0000
+  pubDate Mon, 06 Sep 2009 16:45:00 +0000
+
+  each item in items
+    item
+      title= item.title
+      description= item.description
+      link= item.link
@@ -0,0 +1,11 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/text.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+console.log(fn({ name: 'tj', email: 'tj@vision-media.ca' }));
@@ -0,0 +1,36 @@
+| An example of an
+a(href='#') inline
+| link.
+
+form
+  label Username:
+    input(type='text', name='user[name]')
+    p
+      | Just an example of some text usage.
+      | You can have <em>inline</em> html,
+      | as well as
+      strong tags
+      | .
+
+      | Interpolation is also supported. The 
+      | username is currently "#{name}".
+
+  label Email:
+    input(type='text', name='user[email]')
+    p
+      | Email is currently
+      em= email
+      | .
+
+  // alternatively, if we plan on having only
+  // text or inline-html, we can use a trailing
+  // "." to let pug know we want to omit pipes
+  
+  label Username:
+    input(type='text')
+    p.
+      Just an example, like before
+      however now we can omit those
+      annoying pipes!.
+      
+      Wahoo.
@@ -0,0 +1,11 @@
+
+/**
+ * Module dependencies.
+ */
+
+var pug = require('../')
+  , path = __dirname + '/whitespace.pug'
+  , str = require('fs').readFileSync(path, 'utf8')
+  , fn = pug.compile(str, { filename: path, pretty: true });
+
+console.log(fn());
@@ -0,0 +1,11 @@
+- var js = '<script></script>'
+doctype html
+html
+ 
+  head
+    title= "Some " + "JavaScript"
+    != js
+   
+   
+     
+  body