Published Pages Cheatsheet
This page catalogs the features available on the Published Pages framework.
This is a cheat sheet for the features available in the Publishing Pages publication system.
In lacinia nulla elit, in blandit quam mollis id. In sed nisl et leo pulvinar suscipit sit amet quis urna. Ut in turpis nisi. Nullam tristique ipsum nec malesuada consectetur. Fusce laoreet iaculis nibh, eu pharetra nibh tempus a. Nam euismod massa lacus, at lacinia urna pulvinar ut. Aliquam auctor massa quis sollicitudin imperdiet. Phasellus nisi magna, fringilla sed elit at, aliquet dapibus eros. Sed vel libero leo. Aenean vehicula diam quis accumsan tempor. Maecenas non nisl neque. Sed ut leo sem. Pellentesque ut lectus nunc.
![Figure 1: An image of Lorem Ipsum](image.png){ width=70% }
```python import json s = 'hello, world' print(s) with open('foo') as f: json.loads(f) ```
import json
s = 'hello, world'
print(s)
with open('foo') as f:
json.loads(f)
In the markdown file, add a div:
<div class="template" data-filename="external.html">
</div>
and in the file system, add a file:
<ol>
<li>
apple
</li>
<li>
banana
</li>
<li>
cherry
</li>
</ol>
<div class="template" data-filename="jinja-template.html">
<script type="application/json" data-objname="jinja_context">
[
{
"first_name" : "Luke",
"last_name" : "Skywalker",
"goodguy" : true,
"force_level" : 8
},
{
"first_name" : "Han",
"last_name" : "Solo",
"goodguy" : true,
"force_level" : 0
},
{
"first_name" : "Darth",
"last_name" : "Vader",
"goodguy" : false,
"force_level" : 8
}
]
</script>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Good Guy?</th>
<th>Force Level</th>
</tr>
</thead>
<tbody>
{% for person in jinja_context %}
<tr>
<td>{{ person.first_name }}</td>
<td>{{ person.last_name }}</td>
<td>{{ person.goodguy }}</td>
<td>{{ person.force_level }}</td>
</tr>
{% endfor %}
</tbody>
</table>
First Name | Last Name | Good Guy? | Force Level |
---|---|---|---|
Luke | Skywalker | True | 8 |
Han | Solo | True | 0 |
Darth | Vader | False | 7 |
Add script.js to the file system and extend the following template:
var gobj = {};
(function (gobj) {
gobj.ready = function(pagename){
console.log("page-specific javascript");
};
}(gobj));
Enable the AJAX endpoint via YAML frontmatter:
ajax:
- module: example_module
type: ExampleClass
assets:
- script.js
ExampleClass is a python class that extends AjaxResource. It will be instantiated with a local context containing the pagename and a directory containing copies of any file dependencies from the ./context directory.
ExampleClass will define a set of methods with the ‘cmd_’ prefix to be exposed as AJAX endpoints. The corresponding HTTP POST requests should be of type application/json, providing a dictionary with a key indicating the command, and additional keys for the parameters of the specific cmd_ method to be invoked.
Alternatively, ExampleClass may override AjaxResource’s process method for additional flexibility.
See the AppContext.setup_mappings method in the staticpages module for specifics.
import os
import pandas as pd
import numpy as np
import datetime
import json
from staticpages import AjaxResponder
class ExampleClass(AjaxResponder):
def __init__(self, app_context, local_context):
super(ExampleClass, self).__init__(app_context, local_context)
def cmd_hello(self, request, name):
return "hello, {0}".format(name)
Here is a sample javascript AJAX call utilizing the localtime endpoint defined in AjaxResource and the hello endpoint with argument ‘name’ in the ExampleClass object.
var gobj = {};
(function (gobj) {
var pagename = "";
var ajax_url = "";
gobj.ajax_call = function(json_data){
$.ajax({
url : gobj.ajax_url,
method : "POST",
contentType: "application/json; charset=utf-8",
data : JSON.stringify(json_data)
})
.done(function(data){
$("#ajax-result")
.empty()
.append(data);
})
.fail(function(data,textStatus,jqXHR){
$("#ajax-result")
.empty()
.add(textStatus);
});
}
gobj.ready = function(pagename, ajax_url){
console.log("page-specific javascript");
gobj.pagename = pagename;
gobj.ajax_url = ajax_url;
};
}(gobj));
/* Try these in the browser console, or click the corresponding buttons:
gobj.ajax_call({'cmd' : 'hello', 'name' : 'dustin'});
gobj.ajax_call({'cmd' : 'localtime'});
*/
This is now included inside the templating system:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ TeX: { equationNumbers: {autoNumber: "AMS"} } });
</script>
Use the pandoc raw_attribute to define new commands or math operators.
```{=html}
<div style="display:none">
$$
\DeclareMathOperator*{\argmax}{arg\,max} \notag
\newcommand{\dotsim}{ \overset{.}{\sim} }
$$
</div>
```
And then use the custom definitions in the usual display math context denoted with double dollar signs.
$$
\begin{gather}
\argmax_n \left\{ n : \Pr \left[ T_n > 1 \right] \leq \varepsilon \right\} \label{amx}\\
\bar{X} \dotsim N(\mu,\sigma^2)
\end{gather}
$$
Use \ref{amx}
to reference labeled equations.
\[ \begin{gather} \argmax_n \left\{ n : \Pr \left[ T_n > 1 \right] \leq \varepsilon \right\} \label{amx} \\ \bar{X} \dotsim N(\mu,\sigma^2) \end{gather} \]
Equation \(\ref{amx}\) is the first one.