Documentation and examples #7

devopsfaith · Feb 4, 2018 · f5f2542 · f5f2542
1 parent 97ae247
commit f5f2542
Show file tree

Hide file tree

Showing 10 changed files with 202 additions and 0 deletions.
diff --git a/examples/blog/README.md b/examples/blog/README.md
@@ -0,0 +1,20 @@
+# Example blog
+
+The following code shows a very basic example of API2HTML serving pages. In order to run it:
+
+	cd examples/blog
+	api2html serve -d -c config.json
+
+This will start the server and you will be able to navigate the following pages:
+
+	- [Home](http://localhost:8080/)
+	- [Post](http://localhost:8080/posts/1)
+	- [robots.txt](http://localhost:8080/robots.txt)
+	- [sitemap.xml](http://localhost:8080/sitemap.xml)
+	- [hello.txt](http://localhost:8080/hello.txt): An example of `text/plain` content
+	- [404 page](http://localhost:8080/idontexist)
+	- 500 page: You need to break the API response to see it
+
+See the `config.json` to understand how this works and the `tmpl` folder to see how `{{data}}` is injected.
+
+The template system is [Mustache](https://mustache.github.io)
diff --git a/examples/blog/config.json b/examples/blog/config.json
@@ -0,0 +1,33 @@
+{
+  "robots": true,
+  "sitemap": true,
+  "static_txt_content": [
+    "hello.txt"
+  ],
+  "pages":[
+    {
+      "name": "post",
+      "URLPattern": "/posts/:post",
+      "BackendURLPattern": "https://jsonplaceholder.typicode.com/posts/:post",
+      "Template": "post",
+      "Layout": "main",
+      "CacheTTL": "3600s"
+    },
+    {
+      "name": "home",
+      "URLPattern": "/",
+      "BackendURLPattern": "https://jsonplaceholder.typicode.com/posts",
+      "Template": "home",
+      "Layout": "main",
+      "CacheTTL": "3600s",
+      "IsArray": true,
+      "extra": {"is_home":true }
+    }
+  ],
+  "templates": {"home":"tmpl/home.mustache","post":"tmpl/post.mustache"},
+  "layouts": {"main":"tmpl/main_layout.mustache"},
+  "extra":{
+    "lang": "en-US",
+    "copyright": "© 2018 My Company"
+  }
+}
diff --git a/examples/blog/static/404 b/examples/blog/static/404
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ca">
+<head>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+	<title>Page not found</title>
+</head>
+<body class="text-center">
+	<h1 class="my-5">Page not found!</h1>
+	<p>The page you are looking for is not hosted in this site</p>
+	<p>You might want to customize this file by editing <code>static/404</code></p>
+</body>
diff --git a/examples/blog/static/500 b/examples/blog/static/500
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ca">
+<head>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+	<title>Bummer!</title>
+</head>
+<body class="text-center">
+	<h1 class="my-5">API response went wild!</h1>
+	<p>The response from the API was weird an unable to process it.</p>
+	<p>You might want to customize this file by editing <code>static/500</code></p>
+</body>
diff --git a/examples/blog/static/hello.txt b/examples/blog/static/hello.txt
@@ -0,0 +1 @@
+Hello, I am a text/plain content.
diff --git a/examples/blog/static/robots.txt b/examples/blog/static/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/examples/blog/static/sitemap.xml b/examples/blog/static/sitemap.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+   <url>
+      <loc>http://localhost:8080/</loc>
+      <changefreq>monthly</changefreq>
+      <priority>0.8</priority>
+   </url>
+   <url>
+      <loc>http://localhost:8080/post/1</loc>
+      <changefreq>monthly</changefreq>
+      <priority>0.2</priority>
+   </url>
+</urlset>
diff --git a/examples/blog/tmpl/home.mustache b/examples/blog/tmpl/home.mustache
@@ -0,0 +1,26 @@
+<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
+        <div class="col-md-6 px-0">
+          <h1 class="display-4 font-italic">Welcome to an example site</h1>
+          <p class="lead my-3">This site is powered by an API and all the source code is either configuration or templating. Enjoy!</p>
+          <p class="lead mb-0">You are seeing the <code>tmpl/home.mustache</code> template</p>
+        </div>
+      </div>
+
+<div class="row">
+	{{ #data }}
+	<div class="col-md-6">
+		<div class="card flex-md-row mb-4 box-shadow h-md-250">
+			<div class="card-body d-flex flex-column align-items-start">
+				<strong class="d-inline-block mb-2 text-primary">World</strong>
+				<h3 class="mb-0">
+					<a class="text-dark" href="/posts/{{ id }}">{{ title }}</a>
+				</h3>
+				<div class="mb-1 text-muted">Written by user {{ idUser }}</div>
+				<p class="card-text mb-auto">{{ body }}</p>
+				<a href="/posts/{{ id }}">Continue reading</a>
+			</div>
+			<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" style="width: 200px; height: 250px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20250%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1616040248b%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A13pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1616040248b%22%3E%3Crect%20width%3D%22200%22%20height%3D%22250%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2256.203125%22%20y%3D%22131%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
+		</div>
+	</div>
+	{{ /data }}
+</div>
diff --git a/examples/blog/tmpl/main_layout.mustache b/examples/blog/tmpl/main_layout.mustache
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="{{extra.lang}}">
+<head>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+	<title>API2HTML Demo</title>
+</head>
+<body>
+	<div class="container">
+		<header class="blog-header py-3">
+			<div class="row flex-nowrap justify-content-between align-items-center">
+				<div class="col-4 pt-1">
+					<a class="text-muted" href="#">Subscribe</a>
+				</div>
+				<div class="col-4 text-center">
+					<h1>API2HTML</h1>
+				</div>
+				<div class="col-4 d-flex justify-content-end align-items-center">
+					<a class="text-muted" href="#">
+						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
+					</a>
+					<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
+				</div>
+			</div>
+		</header>
+		<div class="nav-scroller py-1 mb-2">
+			<nav class="nav d-flex justify-content-between">
+				<a class="p-2" href="/">Home</a>
+				<a class="p-2 text-muted" href="#">World</a>
+				<a class="p-2 text-muted" href="#">Technology</a>
+				<a class="p-2 text-muted" href="#">Design</a>
+				<a class="p-2 text-muted" href="#">Culture</a>
+				<a class="p-2 text-muted" href="#">Business</a>
+				<a class="p-2 text-muted" href="#">Politics</a>
+				<a class="p-2 text-muted" href="#">Opinion</a>
+				<a class="p-2 text-muted" href="#">Science</a>
+				<a class="p-2 text-muted" href="#">Health</a>
+				<a class="p-2 text-muted" href="#">Style</a>
+				<a class="p-2 text-muted" href="#">Travel</a>
+			</nav>
+		</div>
+
+		<main role="main">
+
+			{{{content}}}
+
+		</main>
+		<footer>
+			<p class="float-right"><a href="#">Back to top</a></p>
+			<p>The layout of this page is under <code>tmpl/main_layout.mustache</code></p>
+			<p>{{extra.copyright}} · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
+		</footer>
+	</div>
+</body>
+</html>
diff --git a/examples/blog/tmpl/post.mustache b/examples/blog/tmpl/post.mustache
@@ -0,0 +1,28 @@
+<div class="row">
+	<div class="col-md-6">
+		<h2 class="blog-post-title">{{data.title}}</h2>
+		<p class="blog-post-meta">January 1, 2018 by employee number <a href="#">{{data.userId}}</a></p>
+
+		<p>{{data.body}}</p>
+		<hr/>
+		<p><a href="/">Back</a></p>
+	</div>
+	<div class="col-md-6">
+		<h3>Where the data comes from?</h3>
+		<p>The response from the API is:
+			<a href="https://jsonplaceholder.typicode.com/posts/{{data.id}}">
+				https://jsonplaceholder.typicode.com/posts/{{data.id}}
+			</a>
+		</p>
+		<pre>
+{
+  "userId": {{data.userId}},
+  "id": {{data.id}},
+  "title": "{{data.title}}",
+  "body": "{{data.body}}"
+}
+</pre>
+
+	</div>
+</div>
+