linux counter image.

This site uses PHP and PUG

bartonlp.org

My Home Weather Station

About My Weather Station

Pug Examples

Pug was formally Jade. You can find out all about it at pugjs.org or at github.com.

These are two examples of using Pug to render content with PHP. The first one really does not need PHP per say. It could have been a plain HTML file if it were not for the need of my framework to get some variables.

The fist examples uses Pug pug --client --no-debug pug-example.pug to gererate a JavaScript file from the pug file. You must change the #{args.top} and #{args.footer} to !{args.top} and !{args.footer} before running pug. And don't forget to change them back after running pug.

We loaded pug via npm sudo npm install -g pug-cli. The JavaScript is used to generate the output.

PHP Using JavaScript File (pug-via-js.php)

<?php
// Get info for SiteClass Framework.  
$_site = require_once(getenv("SITELOADNAME"));
ErrorClass::setNoEmailErrs(true);
ErrorClass::setDevelopment(true);

$S = new $_site->className($_site);

$via = $_GET['via'];

$y = 0;
foreach(['pub-via-js.php', 'pug/pug-example.js'] as $file) {
  $x = filemtime($file);
  if($x > $y) {
    $y = $x;
  }
}

$b->lastmod = date("M j, Y H:i T", $y);

$h->title = "This is a test";
$h->desc = "test of this";
$h->css = <<<EOF
  <style>
body {
  background-color: white;
  font-family: 'Lora', serif;
  font-size: 1.5rem;
}
h1 {
  font-family: Rancho, serif;
}
h2 {
  font-family: 'Jacques Francois Shadow', cursive;
  font-size: 1.5rem;
}
h3 {
  font-family: 'Jacques Francois Shadow', cursive;
  font-size: 1.2rem;
}
#browser-info {
  border-top: 1px solid gray;
}
#daycount {
  text-align: center;
  width: 90%;
  margin: auto;
  border: 1px solid black;
  background-color: #ECD087;
  padding-bottom: 20px;
}
#daycount ul {
  width: 80%;
  text-align: left;
  margin: auto;
}
ul {
  font-family: Rancho, serif;
  line-height: 150%;
  font-size: 1.5rem;
}
.fontface {
  line-height: 110%;
  font-size: 1.2rem;
  margin-top: -20px;
}
.lora {
  font-family: Lora, serif;
}
.rancho {
  font-family: Rancho, cursive;
}
.jacques {
  font-family: 'Jacques Francois Shadow', cursive;
}
.tangerine {
  font-family: Tangerine, cursive;
}
@media (max-width: 600px) {
  a {
    font-size: 1.9rem;
    line-height: 2.5rem;
  }
}
  </style>
EOF;

list($top, $footer) = $S->getPageTopBottom($h, $b);
$top = preg_replace(["/\n/","/'/","/script/"], ["",'"',"\\script"], $top);

$footer = preg_replace(["/\n/","/'/"], ["", '"'], $footer);

// Now use the 'pug-example.js' file that was generated from the pug-example.pug file.
// Note this is all generated via javascript.
// The function 'template()' was created by running
// pug --client --no-debug pug-example.pug
// which created the function and the text to interperet.

echo <<<EOF
<script src="pug/pug-example.js"></script>
<script>
var pug_html = template({args: {
  top: '$top',
  via: '$via',
  footer: '$footer'
}});

document.write(pug_html);
</script>
EOF;
Run Pug via JavaScript

The second example uses pug-php. We got pug-php via composer.

composer require pug-php/pug
composer install

Then we instantiate pug via $pug = new Pug\Pug();

PHP Using Pug File (pug-via-php.php)

<?php
// Get info for SiteClass Framework NOT NEEDED except to get some variables.
$_site = require_once(getenv("SITELOADNAME"));
$S = new $_site->className($_site);

// The pug-php was loaded via 'composer'. Run
// composer require pug-php/pug
// composer install

$h->css = <<<EOF
  <style>
body {
  background-color: white;
  font-family: 'Lora', serif;
  font-size: 1.5rem;
}
h1 {
  font-family: Rancho, serif;
}
h2 {
  font-family: 'Jacques Francois Shadow', cursive;
  font-size: 1.5rem;
}
h3 {
  font-family: 'Jacques Francois Shadow', cursive;
  font-size: 1.2rem;
}
#browser-info {
  border-top: 1px solid gray;
}
#daycount {
  text-align: center;
  width: 90%;
  margin: auto;
  border: 1px solid black;
  background-color: #ECD087;
  padding-bottom: 20px;
}
#daycount ul {
  width: 80%;
  text-align: left;
  margin: auto;
}
ul {
  font-family: Rancho, serif;
  line-height: 150%;
  font-size: 1.5rem;
}
.fontface {
  line-height: 110%;
  font-size: 1.2rem;
  margin-top: -20px;
}
.lora {
  font-family: Lora, serif;
}
.rancho {
  font-family: Rancho, cursive;
}
.jacques {
  font-family: 'Jacques Francois Shadow', cursive;
}
.tangerine {
  font-family: Tangerine, cursive;
}
@media (max-width: 600px) {
  a {
    font-size: 1.9rem;
    line-height: 2.5rem;
  }
}
  </style>
EOF;

use Pug\Pug;

$pug = new Pug(); // Instantiate Pug in namespace Pug.

$args['via'] = $_GET['via'];

$y = 0;
foreach(['pug-via-php.php', 'pug/pug-example.pug'] as $file) {
  $x = filemtime($file);
  if($x > $y) {
    $y = $x;
  }
}

$b->lastmod = date("M j, Y H:i T", $y);
list($top, $footer) = $S->getPageTopBottom($h, $b);
$args['top'] = $top;
$args['footer'] = $footer;

$output = $pug->render('pug/pug-example.pug', array('args'=>$args));

echo $output;
Run Pug via PHP

Here is the original pug file.

PUG FILE (pug-example.pug)

| #{args.top}

block content
  h1 This is an Example of PUG via #{args.via}
  p There are two example file.
  ul
    li
      a(href="pug-via-js.php?via=JavaScript") This uses a java script image of the pug-example.pug file.
    li
      a(href="pug-via-php.php?via=PHP") This one uses PHP to render the pug-example.pug file.

  | #{args.footer}

And here is this file which is also a pug file.

THIS FILE (pug-example.php)

<?php
$_site = require_once(getenv("SITELOADNAME"));
$S = new $_site->className($_site);
ErrorClass::setNoEmailErrs(true);
ErrorClass::setDevelopment(true);

// Get the files we want to show

$indexpug = file_get_contents("pug/pug-example.pug");
$thisfile = file_get_contents("pug-examples.php");
$thisfile = preg_replace(["/</", "/>/"], ["<", ">"], $thisfile);
$thisfilepug = file_get_contents("pug/pug-example-index.pug");
$example1 = file_get_contents("pug-via-js.php");
$example1 = preg_replace(["/</", "/>/"], ["<", ">"], $example1);
$example2 = file_get_contents("pug-via-php.php");
$example2 = preg_replace(["/</", "/>/"], ["<", ">"], $example2);

use Pug\Pug;

$pug = new Pug(); // Instantiate Pug in namespace Pug.

$h->banner = "<h1>Pug Examples</a>";
$h->title = "Pug Example";
$h->link = <<<EOF
<link rel="stylesheet" href="http://bartonphillips.net/css/theme.css">
EOF;
$h->css = <<<EOF
  <style>
.syntaxhighlighter {
  height: 10rem;
  font-size: .8rem !important;
}
code {
  background-color: lightgray;
  padding: .1rem .5rem;
}
  </style>
EOF;
$h->extra = <<<EOF
  <script src="https://bartonphillips.net/js/syntaxhighlighter.js"></script>
EOF;

// Set up the $args with the files we want to show

$args->indexpug = $indexpug;
$args->example1 = $example1;
$args->example2 = $example2;
$args->thisfile = $thisfile;
$args->thisfilepug = $thisfilepug;

// Get the lastmod value 
$y = 0;
foreach(['pug-examples.php', 'pug/pug-example-index.pug'] as $file) {
  $x = filemtime($file);
  if($x > $y) {
    $y = $x;
  }
}

$b->lastmod = date("M j, Y H:i T", $y);

list($args->top, $args->footer) = $S->getPageTopBottom($h, $b);

// Use $args as an object do ['args'=>(array)$args].

$output = $pug->render('pug/pug-example-index.pug', ['args'=>(array)$args]);

echo $output;

THIS FILE PUG (pug-example-index.pug)

| #{args.top}

block content

  p
    b Pug 
    | was formally 
    b Jade
    | . You can find out all about it at 
    a(href="https://pugjs.org/api/getting-started.html") pugjs.org
    |  or at 
    a(href="https://github.com/pugjs/pug") github.com
    | .

  p 
    | These are two examples of using 
    b Pug 
    |  to render content with PHP. The first one really does not need PHP per say. 
    | It could have been a plain HTML file if it were not for the need of my framework to get some variables.

  p 
    | The fist examples uses 
    b Pug 
    code pug --client --no-debug pug-example.pug
    |  to gererate a JavaScript file from the 
    b pug
    |  file.
    | You must change the \#{args.top} and \#{args.footer} to \!{args.top} and \!{args.footer}
    | before running pug. And don't forget to change them back after running pug.

  p 
    | We loaded 
    b pug
    |  via npm 
    code sudo npm install -g pug-cli
    | . The JavaScript is used to generate the output.
  
  p
    caption PHP Using JavaScript File (pug-via-js.php)
  
  pre(class="brush: php") #{args.example1}

  a(href="/pug-via-js.php?via=JavaScript") Run Pug via JavaScript
  
  p 
    | The second example uses 
    b pug-php
    | . We got 
    b pug-php
    |  via 
    b composer.
  
  pre(class="brush: plain") composer require pug-php/pug
    | composer install

  p 
    | Then we instantiate 
    b pug
    |  via 
    code $pug = new Pug\Pug();

  p
    caption PHP Using Pug File (pug-via-php.php)
  
  pre(class="brush: php") #{args.example2}

  a(href="/pug-via-php.php?via=PHP") Run Pug via PHP
  
  p 
    | Here is the original 
    b pug
    |  file.

  p
    caption PUG FILE (pug-example.pug)
  
  pre(class="brush: plain") #{args.indexpug}

  p And here is this file which is also a 
    b pug
    |  file.

  p
    caption THIS FILE (pug-example.php)

  pre(class="brush: php") #{args.thisfile}
 
  p
    caption THIS FILE PUG (pug-example-index.pug)

  pre(class="brush: plain") #{args.thisfilepug}

  p 
    | As you can see the 
    b pug
    |  is more concise than HTML with much less typing. Also 
    b pug
    |  has a nice 
    code extends
    |  syntax which lets you load things like headers and footers from other 
    b pug
    |  files.

  | #{args.footer}

As you can see the pug is more concise than HTML with much less typing. Also pug has a nice extends syntax which lets you load things like headers and footers from other pug files.