Jotschi/.htaccess

## .htaccess
RewriteEngine on
RewriteBase /
RewriteCond  %{REQUEST_FILENAME} !-f
RewriteCond  %{REQUEST_FILENAME} !-d
RewriteRule  ^(.*)$ index.php [QSA,L]

## base.twig
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
    <meta charset="UTF-8">
    <title>Gentics Mesh Demo</title>
    <style>
    .row.products > div {
      height: 500px
    }
    </style>
</head>
<body>

<div class="container">
    <h2>Gentics Mesh Silex Demo <small><a href="http://getmesh.io">getmesh.io</a></small></h2>

	{{ include('navigation.twig') }}

	{% block content %}{% endblock %}

</div>
</body>
</html>

## composer.json
{
  "type": "application",
  "require": {
    "silex/silex": "~1.3.5",
    "twig/twig": "~1.24.2",
    "nategood/httpful": "0.2.20"
 }
}

## Dockerfile
FROM php:7.0-apache
RUN a2enmod rewrite

COPY vendor/ /var/www/html/vendor
COPY src/ /var/www/html/

## index.php
<?php

require_once __DIR__.'/../vendor/autoload.php';

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

$app = new Silex\Application();
$app['debug'] = true;

define("BASEURI", "http://admin:admin@localhost:8080/api/v1/");

$app->register(new Silex\Provider\TwigServiceProvider(), array(
    'twig.path' => __DIR__.'/views',
));

/**
 * Load the breadcrumb information for the root level of the project.
 * @return Array with breadcrumb information
 */
function loadBreadcrumbData(): array {
    $uri = BASEURI . "demo/navroot/?maxDepth=1&resolveLinks=short";
    $response = \Httpful\Request::get($uri)->send();
    return $response->body->root->children;
}

/**
 * Load a list of children for the specified node.
 * @param uuid Uuid of the node
 */
function loadChildren(string $uuid): array {
    $uri = BASEURI . "demo/nodes/". $uuid . "/children?expandAll=true&resolveLinks=short";
    $response =  \Httpful\Request::get($uri)->send();
    return $response->body->data;
}

// Main route handler
$app->get('/{path}', function (Request $request, string $path) use ($app) {

  // Handle index/welcome page
  if ($path === "/" || $path === "") {
    return $app['twig']->render('welcome.twig', array('breadcrumb' => loadBreadcrumbData()));
  } else {
    // Use the webroot endpoint to resolve the path to a Gentics Mesh node. The node information will later
    // be used to determine which twig template to use in order to render the page.
    $uri = BASEURI . "demo/webroot/" . rawurlencode($path) . "?resolveLinks=short";
    $response = \Httpful\Request::get($uri)->send();

    // Check whether the found node represents an image. Otherwise continue with template specific code.
    if (substr($response->content_type, 0, 6) === "image/") {
       $serverResponse = new Response();
       $serverResponse->setContent($response->raw_body);
       $serverResponse->setStatusCode(Response::HTTP_OK);
       $serverResponse->headers->set('Content-Type', $response->content_type);
       return $serverResponse;
    } else {
      $uuid = $response->body->uuid;
      $children = loadChildren($uuid);

      // Check whether the loaded node is a vehicle node. In those cases a detail page should be shown.
      if ($response->body->schema->name === "vehicle") {
        return $app['twig']->render('productDetail.twig', array(
          'breadcrumb' => loadBreadcrumbData(),
          'product' => $response->body)
        );
      } else {
        // In all other cases the node can only be a category. Display the product list for those cases.
        return $app['twig']->render('productList.twig', array(
          'breadcrumb' => loadBreadcrumbData(),
          'category'=> $response->body,
          'products' => $children)
        );
      }
    }
  }

// Prevent silex from handling slashes in the request path
})->assert("path", ".*");

$app->run();

## navigation.twig
    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <a href="/" class="navbar-brand">Home</a>
            </div>

            <ul class="nav navbar-nav">
                {% for segment in breadcrumb %}
                {% if segment.node.schema.name == "category" %}
                <li>
                    <a href="{{segment.node.path}}">{{segment.node.fields.name}}</a>
                </li>
                {% endif %}
                {% endfor %}
            </ul>

        </div>
    </nav>

## productDetail.twig
{% extends "base.twig" %}

{% block content %}
<div>

    <h1>{{ product.fields.name }}</h1>

    <div class="row">

        <div class="col-md-6">
            <form name="productForm">

                <div class="form-group">
                    <label for="name">Product Name</label>
                    <input type="text"
                           class="form-control"
                           id="name"
                           name="name"
                           placeholder="Name"
                           required
                           value="{{ product.fields.name}}">
                </div>

                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control"
                              rows="7"
                              id="description"
                              name="description"
                              required
                              >{{ product.fields.description }}</textarea>
                </div>

                <div class="form-group">
                    <label for="sku">SKU</label>
                    <input type="text"
                           class="form-control"
                           id="sku"
                           name="sku"
                           placeholder="SKU"
                           value="{{ product.fields.SKU }}">
                </div>

                <div class="row">
                    <div class="col-sm-4 form-group">
                        <label for="price">Price</label>
                        <input type="number"
                               step="0.01"
                               min="0"
                               class="form-control"
                               id="price"
                               name="price"
                               value="{{ product.fields.price }}">
                    </div>
                    <div class="col-sm-4 form-group">
                        <label for="weight">Weight</label>
                        <input type="number"
                               class="form-control"
                               min="0"
                               id="weight"
                               name="weight"
                               value="{{ product.fields.weight }}">
                    </div>
                    <div class="col-sm-4 form-group">
                        <label for="stock">Stock Level</label>
                        <input type="number"
                               min="0"
                               class="form-control"
                               id="stock"
                               name="stock"
                               value="{{ product.fields.stocklevel }}">
                    </div>
                </div>
            </form>

        </div>

        <div class="col-md-6">
            <img style="width: 100%;" class="img-thumbnail" src="{{ product.fields.vehicleImage.path }}"">
        </div>

    </div>
</div>
{% endblock %}

## productList.twig
{% extends "base.twig" %}

{% block content %}
<div>
    <h1>{{ category.fields.name }}</h1>
    <p>{{ category.fields.description }}</p>
    <div class="row products">
        {% for product in products %}
        <div class="col-xs-12 col-sm-6 col-md-4">

            <div class="panel panel-default">
                <div class="panel-body">
                    <h3>
                        <a href="{{ product.path }}">{{ product.fields.name }}</a>
                        <small>{{ product.fields.SKU }}</small>
                    </h3>

                    <a href="{{ product.path }}">
                        <img style="height: 200px; width: 100%;" src="{{ product.fields.vehicleImage.path }}" class="img-thumbnail">
                    </a>

                    <p>{{ product.fields.description }}</p>

                    <hr>

                    <div class="row">
                        <div class="col-xs-6">
                        <!--| number: 2 -->
                            <h3 style="margin: 5px 0;"><span class="label label-primary">€{{ product.fields.price  }}</span></h3>
                        </div>
                        <div class="col-xs-6 text-right">
                            <span class="label label-default">Weight: {{ product.fields.weight }}</span><br>
                            <span class="label label-default">Stock: {{ product.fields.stocklevel }}</span>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

## setup.sh
# Clone the example from github
$ git clone https://github.com/gentics/mesh-silex-example.git
$ cd mesh-silex-example

# Update the php dependencies
$ composer update

# Downlad Gentics Mesh from http://getmesh.io/Download and start it
$ java -jar mesh-demo-0.6.xx.jar

# Run with PHP 7
# The example can also be run directly using the embedded PHP server.

$ php -S localhost:3000 src/index.php

# Run with Docker
# Start a docker container which uses the source to run the example
# The docker container will use the docker volume feature to use the local sources from your checkout.
# Additionally the container will be able to access your host network and thus php is able to connect to Gentics Mesh which is expected to run on http://localhost:8080.
$ ./dev.sh

#Run with Apache
# Alternatively you can also deploy the PHP example on your Apache Webserver installation.
# You may use the provided site configration file mesh-demo.conf for your apache.

## welcome.twig
{% extends "base.twig" %}

{% block content %}
<div class="jumbotron">

	  <div class="row">
	    <div class="col-sm-3 text-right">
	      <svg version="1.0" xmlns="http://www.w3.org/2000/svg" style="max-width: 150px;" viewBox="0 0 500.000000 579.000000" preserveAspectRatio="xMidYMid meet">
	          <g transform="translate(0.000000,579.000000) scale(0.100000,-0.100000)" fill="#00a0d2" stroke="none">
	            <path class="gtx-logo-main" d="M2417 5780 c-21 -6 -52 -17 -70 -26 -24 -13 -2014 -1184 -2183 -1285 -43 -26 -108 -98 -136 -151 l-23 -43 -3 -1362 -2 -1362 21 -56 c44 -119 20 -102 1213 -805 598 -353 1109 -652 1135 -663 65 -30 197 -30 262 0 34 15 1874 1096 2205 1294 43 26 108 98 136 151 l23 43 3 1362 c2 1355 2 1362 -18 1417 -61 163 -257 260 -425 211 -41 -12 -278 -145 -765 -432 -774 -455 -786 -463 -829 -578 -28 -75 -28 -184 0 -260 27 -72 104 -156 176 -191 75 -37 185 -44 263 -17 30 10 240 127 466 261 227 133 414 242 418 242 3 0 5 -383 4 -851 l-3 -851 -888 -524 c-488 -288 -892 -524 -897 -524 -5 0 -409 236 -897 524 l-888 524 0 1067 0 1067 888 524 c488 288 892 524 897 524 5 0 184 -103 397 -229 258 -152 408 -235 447 -246 162 -47 339 35 417 193 20 40 24 63 24 147 0 88 -3 107 -26 156 -15 32 -44 74 -66 96 -37 37 -964 593 -1059 635 -52 22 -162 32 -217 18z"></path>
	            <path class="gtx-logo-dot" d="M2343 3231 c-222 -82 -310 -351 -181 -553 80 -127 249 -192 398 -154 115 30 199 99 249 206 23 48 26 68 26 155 0 89 -3 106 -28 157 -36 73 -102 139 -174 174 -76 38 -211 45 -290 15z"></path>
	          </g>
	        </svg>
	    </div>
	    <div class="col-sm-9">
	      <h1>Gentics Mesh Demo Application</h1>
	    </div>
	  </div>

	  <div class="row">
	    <div class="col-sm-6 col-sm-offset-3">
	      <p>This is a basic demonstration of how to build an application to use Mesh. This example is an Silex implementation
	        and the source is <a href="https://github.com/gentics/mesh-silex-example">available on GitHub</a>.</p>
	      <p><a class="btn btn-primary btn-lg" href="http://getmesh.io/docs/beta/getting-started.html" role="button">Learn more</a></p>
	    </div>
	  </div>
</div>
{% endblock %}
	RewriteEngine on
	RewriteBase /
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule ^(.*)$ index.php [QSA,L]
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
	<meta charset="UTF-8">
	<title>Gentics Mesh Demo</title>
	<style>
	.row.products > div {
	height: 500px
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h2>Gentics Mesh Silex Demo <small><a href="http://getmesh.io">getmesh.io</a></small></h2>

	{{ include('navigation.twig') }}

	{% block content %}{% endblock %}

	</div>
	</body>
	</html>
	{
	"type": "application",
	"require": {
	"silex/silex": "~1.3.5",
	"twig/twig": "~1.24.2",
	"nategood/httpful": "0.2.20"
	}
	}
	FROM php:7.0-apache
	RUN a2enmod rewrite

	COPY vendor/ /var/www/html/vendor
	COPY src/ /var/www/html/
	<?php

	require_once __DIR__.'/../vendor/autoload.php';

	use Symfony\Component\HttpFoundation\Request;
	use Symfony\Component\HttpFoundation\Response;

	$app = new Silex\Application();
	$app['debug'] = true;

	define("BASEURI", "http://admin:admin@localhost:8080/api/v1/");

	$app->register(new Silex\Provider\TwigServiceProvider(), array(
	'twig.path' => __DIR__.'/views',
	));

	/**
	* Load the breadcrumb information for the root level of the project.
	* @return Array with breadcrumb information
	*/
	function loadBreadcrumbData(): array {
	$uri = BASEURI . "demo/navroot/?maxDepth=1&resolveLinks=short";
	$response = \Httpful\Request::get($uri)->send();
	return $response->body->root->children;
	}

	/**
	* Load a list of children for the specified node.
	* @param uuid Uuid of the node
	*/
	function loadChildren(string $uuid): array {
	$uri = BASEURI . "demo/nodes/". $uuid . "/children?expandAll=true&resolveLinks=short";
	$response = \Httpful\Request::get($uri)->send();
	return $response->body->data;
	}

	// Main route handler
	$app->get('/{path}', function (Request $request, string $path) use ($app) {

	// Handle index/welcome page
	if ($path === "/" \|\| $path === "") {
	return $app['twig']->render('welcome.twig', array('breadcrumb' => loadBreadcrumbData()));
	} else {
	// Use the webroot endpoint to resolve the path to a Gentics Mesh node. The node information will later
	// be used to determine which twig template to use in order to render the page.
	$uri = BASEURI . "demo/webroot/" . rawurlencode($path) . "?resolveLinks=short";
	$response = \Httpful\Request::get($uri)->send();

	// Check whether the found node represents an image. Otherwise continue with template specific code.
	if (substr($response->content_type, 0, 6) === "image/") {
	$serverResponse = new Response();
	$serverResponse->setContent($response->raw_body);
	$serverResponse->setStatusCode(Response::HTTP_OK);
	$serverResponse->headers->set('Content-Type', $response->content_type);
	return $serverResponse;
	} else {
	$uuid = $response->body->uuid;
	$children = loadChildren($uuid);

	// Check whether the loaded node is a vehicle node. In those cases a detail page should be shown.
	if ($response->body->schema->name === "vehicle") {
	return $app['twig']->render('productDetail.twig', array(
	'breadcrumb' => loadBreadcrumbData(),
	'product' => $response->body)
	);
	} else {
	// In all other cases the node can only be a category. Display the product list for those cases.
	return $app['twig']->render('productList.twig', array(
	'breadcrumb' => loadBreadcrumbData(),
	'category'=> $response->body,
	'products' => $children)
	);
	}
	}
	}

	// Prevent silex from handling slashes in the request path
	})->assert("path", ".*");

	$app->run();
	<nav class="navbar navbar-default">
	<div class="container-fluid">

	<div class="navbar-header">
	<a href="/" class="navbar-brand">Home</a>
	</div>

	<ul class="nav navbar-nav">
	{% for segment in breadcrumb %}
	{% if segment.node.schema.name == "category" %}
	<li>
	<a href="{{segment.node.path}}">{{segment.node.fields.name}}</a>
	</li>
	{% endif %}
	{% endfor %}
	</ul>

	</div>
	</nav>
	{% extends "base.twig" %}

	{% block content %}
	<div>

	<h1>{{ product.fields.name }}</h1>

	<div class="row">

	<div class="col-md-6">
	<form name="productForm">

	<div class="form-group">
	<label for="name">Product Name</label>
	<input type="text"
	class="form-control"
	id="name"
	name="name"
	placeholder="Name"
	required
	value="{{ product.fields.name}}">
	</div>

	<div class="form-group">
	<label for="description">Description</label>
	<textarea class="form-control"
	rows="7"
	id="description"
	name="description"
	required
	>{{ product.fields.description }}</textarea>
	</div>

	<div class="form-group">
	<label for="sku">SKU</label>
	<input type="text"
	class="form-control"
	id="sku"
	name="sku"
	placeholder="SKU"
	value="{{ product.fields.SKU }}">
	</div>

	<div class="row">
	<div class="col-sm-4 form-group">
	<label for="price">Price</label>
	<input type="number"
	step="0.01"
	min="0"
	class="form-control"
	id="price"
	name="price"
	value="{{ product.fields.price }}">
	</div>
	<div class="col-sm-4 form-group">
	<label for="weight">Weight</label>
	<input type="number"
	class="form-control"
	min="0"
	id="weight"
	name="weight"
	value="{{ product.fields.weight }}">
	</div>
	<div class="col-sm-4 form-group">
	<label for="stock">Stock Level</label>
	<input type="number"
	min="0"
	class="form-control"
	id="stock"
	name="stock"
	value="{{ product.fields.stocklevel }}">
	</div>
	</div>
	</form>

	</div>

	<div class="col-md-6">
	<img style="width: 100%;" class="img-thumbnail" src="{{ product.fields.vehicleImage.path }}"">
	</div>

	</div>
	</div>
	{% endblock %}
	# Clone the example from github
	$ git clone https://github.com/gentics/mesh-silex-example.git
	$ cd mesh-silex-example

	# Update the php dependencies
	$ composer update

	# Downlad Gentics Mesh from http://getmesh.io/Download and start it
	$ java -jar mesh-demo-0.6.xx.jar

	# Run with PHP 7
	# The example can also be run directly using the embedded PHP server.

	$ php -S localhost:3000 src/index.php

	# Run with Docker
	# Start a docker container which uses the source to run the example
	# The docker container will use the docker volume feature to use the local sources from your checkout.
	# Additionally the container will be able to access your host network and thus php is able to connect to Gentics Mesh which is expected to run on http://localhost:8080.
	$ ./dev.sh

	#Run with Apache
	# Alternatively you can also deploy the PHP example on your Apache Webserver installation.
	# You may use the provided site configration file mesh-demo.conf for your apache.
	{% extends "base.twig" %}

	{% block content %}
	<div class="jumbotron">

	<div class="row">
	<div class="col-sm-3 text-right">
	<svg version="1.0" xmlns="http://www.w3.org/2000/svg" style="max-width: 150px;" viewBox="0 0 500.000000 579.000000" preserveAspectRatio="xMidYMid meet">
	<g transform="translate(0.000000,579.000000) scale(0.100000,-0.100000)" fill="#00a0d2" stroke="none">
	<path class="gtx-logo-main" d="M2417 5780 c-21 -6 -52 -17 -70 -26 -24 -13 -2014 -1184 -2183 -1285 -43 -26 -108 -98 -136 -151 l-23 -43 -3 -1362 -2 -1362 21 -56 c44 -119 20 -102 1213 -805 598 -353 1109 -652 1135 -663 65 -30 197 -30 262 0 34 15 1874 1096 2205 1294 43 26 108 98 136 151 l23 43 3 1362 c2 1355 2 1362 -18 1417 -61 163 -257 260 -425 211 -41 -12 -278 -145 -765 -432 -774 -455 -786 -463 -829 -578 -28 -75 -28 -184 0 -260 27 -72 104 -156 176 -191 75 -37 185 -44 263 -17 30 10 240 127 466 261 227 133 414 242 418 242 3 0 5 -383 4 -851 l-3 -851 -888 -524 c-488 -288 -892 -524 -897 -524 -5 0 -409 236 -897 524 l-888 524 0 1067 0 1067 888 524 c488 288 892 524 897 524 5 0 184 -103 397 -229 258 -152 408 -235 447 -246 162 -47 339 35 417 193 20 40 24 63 24 147 0 88 -3 107 -26 156 -15 32 -44 74 -66 96 -37 37 -964 593 -1059 635 -52 22 -162 32 -217 18z"></path>
	<path class="gtx-logo-dot" d="M2343 3231 c-222 -82 -310 -351 -181 -553 80 -127 249 -192 398 -154 115 30 199 99 249 206 23 48 26 68 26 155 0 89 -3 106 -28 157 -36 73 -102 139 -174 174 -76 38 -211 45 -290 15z"></path>
	</g>
	</svg>
	</div>
	<div class="col-sm-9">
	<h1>Gentics Mesh Demo Application</h1>
	</div>
	</div>

	<div class="row">
	<div class="col-sm-6 col-sm-offset-3">
	<p>This is a basic demonstration of how to build an application to use Mesh. This example is an Silex implementation
	and the source is <a href="https://github.com/gentics/mesh-silex-example">available on GitHub</a>.</p>
	<p><a class="btn btn-primary btn-lg" href="http://getmesh.io/docs/beta/getting-started.html" role="button">Learn more</a></p>
	</div>
	</div>
	</div>
	{% endblock %}