init

priv/ui/pug-demo/index.pug

@@ -0,0 +1,80 @@
+extends ./layout.pug
+include ./_mixins.pug
+
+block content
+  -
+    const name = "Ada Lovelace";
+    const signedIn = true;
+    const plan = "pro";
+    const features = [
+      {
+        name: "Interpolation",
+        description: "Drop values into text with #{name} and escaped output.",
+        status: "ready",
+        statusLabel: "ready"
+      },
+      {
+        name: "Conditionals",
+        description: "Render different branches with if, else if, else, and case.",
+        status: "ready",
+        statusLabel: "ready"
+      },
+      {
+        name: "Loops",
+        description: "Repeat markup with each item in collection syntax.",
+        status: "ready",
+        statusLabel: "ready"
+      },
+      {
+        name: "Includes and extends",
+        description: "Compose pages from layouts and smaller partial files.",
+        status: "practice",
+        statusLabel: "practice"
+      },
+      {
+        name: "Mixins",
+        description: "Create reusable snippets that accept arguments.",
+        status: "ready",
+        statusLabel: "ready"
+      }
+    ];
+
+  header
+    h1 Pug features for #{name}
+    p.muted
+      | This page is rendered from 
+      code index.pug
+      |  and extends 
+      code layout.pug
+      | .
+
+  section.panel
+    h2 Interpolation
+    p Hello, #{name}. Your current plan is #{plan.toUpperCase()}.
+    p
+      | The literal syntax is 
+      code #{'#{name}'}
+      | , which inserts escaped text into a line.
+
+  section.panel
+    h2 Conditionals
+    if signedIn
+      p Welcome back, #{name}.
+    else
+      p Please sign in to see the demo.
+
+    case plan
+      when "free"
+        p You are using the free plan.
+      when "pro"
+        p You are using the pro plan, so all examples are visible.
+      default
+        p Your plan is #{plan}.
+
+  section.panel
+    h2 Loops and Mixins
+    ul.feature-grid
+      each feature in features
+        +featureCard(feature)
+
+  include ./_summary.pug