docs: update examples page

- section: Line Charts

  files:

    - file: linecharts/simple_timeseries

      desc: A simple line chart.

    - file: linecharts/lines_with_points

      desc: A simple line chart with points and a legend.

    - file: linecharts/lines_with_labels

      desc: A line chart with labels.

    - file: linecharts/irregular_data

      desc: Plotting two series with unaligned data points.

- section: Bar Charts

  files:

    - file: barcharts/bars_with_labels

      desc: A vertical bar chart with labels.

    - file: barcharts/horizontal_bars

      desc: A simple horizontal bar chart.

    - file: barcharts/horizontal_ranges

      desc: A grouped, "floating" horizontal bar chart

    - file: barcharts/vertical_ranges

      desc: A grouped, "floating" vertical bar chart

    - file: barcharts/barsandlines

      desc: A bar chart and a line element.

- section: Scatter Plots

  files:

    - file: pointcharts/simple_scatter

      desc: A minimal scatter plot.

    - file: pointcharts/pointchart_with_labels

      desc: A scatter plot with labelled data points.

- section: Area Charts

  files:

    - file: areacharts/simple_area

      desc: A simple area chart.

    - file: areacharts/area_ranges

      desc: A "range" area chart

- section: Other

  files:

    - file: other/demo

      desc: A collection of examples generated with PlotFX (in a single file!)

#!/usr/bin/env python3

import pystache as TPL

import itertools

from glob import glob

from build_layout import *

from pathlib import Path

def build_example(url):

def build_example(example):

  url = example["file"]

  print("> Building page: /examples/%s" % url)

  tpl = Path("manual/example.tpl.html").read_text()

def build_example_list(examples):

  tpl = """

    <ul>

  <h1 style="margin-bottom: 0;">Examples</h1>

  {{#list}}

        <li><a href="/examples/{{name}}">{{name}}</a></li>

    <div style="margin-bottom: 6em; margin-top: -1em;">

      <h2>{{section}}</h2>

      {{#files}}

        <a href="/examples/{{file}}"><h3>Example: {{file}}</h3></a>

        <div>

          {{desc}}

        </div>

        <section class="info_box" style="margin-bottom: 3em;">

          <div class="example">

            <a href="/examples/{{file}}"><img src="/examples/{{file}}.svg"></a>

          </div>

        </section>

      {{/files}}

    </div>

  {{/list}}

    </ul>

  """

  env = {

    "list": map(lambda x: { "name": x }, examples),

    "list": examples,

  }

  write_file("/_example_list.gen.html", TPL.render(tpl, env))

  write_page("/examples", TPL.render(tpl, env), title="Example Gallery")

def main():

  examples = []

  for example in glob("examples/**/*.ptx", recursive=True):

    examples.append(os.path.splitext(os.path.relpath(example, "examples"))[0])

  examples = yaml.load(Path("examples/examples.yaml").read_text())

  examples_flat = list(itertools.chain(*map(lambda x: x["files"], examples)))

  for example in examples:

  for example in examples_flat:

    build_example(example)

  build_example_list(examples)

  text-decoration: none;

}

#documentation a:hover, a.link:hover {

#documentation a:hover,

#documentation a:hover h1,

#documentation a:hover h2,

#documentation a:hover h3,

#documentation a:hover h4,

a.link:hover{

  color: #04f;

  text-decoration: underline;

}

}

#documentation img {

  width: 100%;

  max-width: 100%;

  max-height: 100%;

  margin: auto;

}

code {

}

#documentation .info_box {

  border: 1px solid #ddd;

  border: 1px solid #ccc;

  margin-top: 1em;

  margin-bottom: 25px;

  border-radius: 2px;

  padding-top: .5em;

  box-shadow: 0 0 2px rgba(0, 0, 0, .2);

}

#documentation .info_box > .example {

  background: #f6f6f6;

  border: 1px solid #f6f6f6;

  padding: .3em;

}

#documentation .info_box h2 {

  border-bottom: none;

  margin-top: .1em;

  margin-top: .6em;

  margin-bottom: 0;

  padding-bottom: 0;

  padding-bottom: .6em;

  font-weight: 600;

  padding-left: 14px;

  font-size: 11pt;

  line-height: 12pt;

  font-weight: 400;

  color: #888;

  border-bottom: 2px solid #ddd;

}

#documentation .info_box h2.sub {

  line-height: 16pt;

}

#documentation .info_box > div {

  border-top: 2px solid #ddd;

  margin-top: .6em;

}

#documentation .plist {

  display: table;

  margin-bottom: 0;

<pre><code>{{demo}}</code></pre>

<h2>Example</h2>

<section class="info_box" style="margin-top: 1.4em;">

  <h2>Example Output</h2>

  <div>

    <img src="{{demo_img}}" />

  </div>

</section>

<h2>Properties</h2>

<div class="plist">

  {{#properties}}

      {{/values}}

    </dl>

    <h4>Examples</h4>

    <pre><code>{{syntax_example}}</code></pre>

  </section>

Examples

========

{%_example_list.gen.html%}