Refactored to match pinout structure

description/overlay/display-o-tron.md

@@ -0,0 +1,9 @@
+#Display-o-Tron 3000
+
+You can use the one-line product installer to get Display-o-Tron 3000 set up and ready to go, just:
+
+```bash
+curl get.pimoroni.com/dot3k | bash
+```
+
+And follow the instructions!

generate-html.py

@@ -4,11 +4,18 @@ import markdown
 import unicodedata
 import re
 import os
+import time
 
-resource_url = '/pinout2/resources/'
+base_url = '/pinout/'
-#resource_url = '/resources/'
+resource_url = '/resources/'
 
-overlays = ['pibrella','explorer-hat-pro','explorer-hat']
+
+overlays = [
+	'pibrella',
+	'explorer-hat-pro',
+	'explorer-hat',
+	'display-o-tron'
+	]
 
 template = open('template/layout.html').read()
 
@@ -18,6 +25,11 @@ select_overlays = {}
 
 overlays_html = ''
 
+try:
+	os.mkdir('output/pinout')
+except OSError:
+	pass
+
 def slugify(value):
     """
     Normalizes string, converts to lowercase, removes non-alpha characters,
@@ -72,7 +84,7 @@ def load_md(filename):
 		return html
 		#return markdown.markdown(open(filename).read(), extensions=[gfm.HiddenHiliteExtension([]),'fenced_code'])
 	except IOError:
-		return None
+		return ''
 
 def render_pin_text(pin_num, pin_url, pin_name, pin_subtext):
 	return '<article class="{}"><h1>{}</h1>{}{}</article>'.format(pin_url,pin_name,pin_subtext,load_md('description/pins/pin-{}.md'.format(pin_num)))
@@ -163,16 +175,17 @@ def render_pin(pin_num, selected_url, overlay=None):
 
 		#print(pin_type)
 
-	pin_url = slugify('pin{}_{}'.format(pin_num,pin_url))
+	pin_url = base_url + slugify('pin{}_{}'.format(pin_num,pin_url))
 
 	#print(selected_url)
 	selected = ''
-	if selected_url == pin_url:
+
+	if base_url + selected_url == pin_url:
 		selected = ' active'
 	if pin_used:
 		selected += ' overlay-pin'
 
-	return '<li class="pin{} {}{}"><a href="{}.html"><span class="default"><span class="phys">{}</span> {}</span><span class="pin"></span></a></li>\n'.format(
+	return '<li class="pin{} {}{}"><a href="{}"><span class="default"><span class="phys">{}</span> {}</span><span class="pin"></span></a></li>\n'.format(
 		pin_num,
 		' '.join(map(slugify,pin_type)),
 		selected,
@@ -206,19 +219,19 @@ for url in select_overlays:
 	overlays_html += '<option value="{}">{}</option>'.format(url, select_overlays[url])
 
 
-pages['index'] = render_overlay_page({'name':'Index','long_description':load_md('description/index.md')})
+pages['pinout'] = render_overlay_page({'name':'Index','long_description':load_md('description/index.md')})
-navs['index'] = render_nav('index')
+navs['pinout'] = render_nav('pinout')
 
 print('Rendering pin pages...')
 
 for pin in range(1,len(pins)+1):
 	(pin_url, pin_html) = render_pin_page(pin)
 	pin_nav = render_nav(pin_url)
-	pin_html = template.replace('{{nav}}',pin_nav).replace('{{content}}',pin_html).replace('{{resource_url}}',resource_url).replace('{{overlays}}',overlays_html)
+	pin_html = template.replace('{{nav}}',pin_nav).replace('{{content}}',pin_html).replace('{{resource_url}}',resource_url).replace('{{overlays}}',overlays_html).replace('{{v}}',str(int(time.time())))
 
 	print('Outputting page {}'.format(pin_url))
 
-	with open(os.path.join('output','{}.html'.format(pin_url)),'w') as f:
+	with open(os.path.join('output/pinout','{}.html'.format(pin_url)),'w') as f:
 		f.write(pin_html)
 
 #nav = render_nav()
@@ -229,7 +242,11 @@ for url in pages:
 	content = pages[url]
 	nav = navs[url]
 	print('Outputting page {}'.format(url))
-	html = template.replace('{{nav}}',nav).replace('{{content}}',content).replace('{{resource_url}}',resource_url).replace('{{overlays}}',overlays_html)
+	html = template.replace('{{nav}}',nav).replace('{{content}}',content).replace('{{resource_url}}',resource_url).replace('{{overlays}}',overlays_html).replace('{{v}}',str(int(time.time())))
+	
+	if url != 'pinout':
+		url = os.path.join('pinout',url)
+
 	with open(os.path.join('output','{}.html'.format(url)),'w') as f:
 		f.write(html)
 

overlay/display-o-tron.json

@@ -0,0 +1,34 @@
+{
+	"name": "Display-o-Tron 3000",
+	"manufacturer": "Pimoroni",
+	"url": "https://github.com/pimoroni/dot3k",
+	"description": "A 3-line character LCD with an RGB backlight and joystick",
+	"pincount": 40,
+	"pin": {
+		"7": {
+			"name": "Joystick Button",
+			"mode": "input",
+			"active": "low"
+		},
+		"11": {
+			"name": "Joystick Left",
+			"mode": "input",
+			"active": "low"
+		},
+		"13": {
+			"name": "Joystick Up",
+			"mode": "input",
+			"active": "low"
+		},
+		"15": {
+			"name": "Joystick Right",
+			"mode": "input",
+			"active": "low"
+		},
+		"21": {
+			"name": "Joystick Down",
+			"mode": "input",
+			"active": "low"
+		}
+	}
+}

resources/pinout.css

@@ -8,6 +8,37 @@ table td, table th {border:1px solid #073642;padding:5px;}
 table th {background:#073642;color:#EBE6D3;}
 table * {text-align:left;font-size:13px;}
 
+.main-nav {
+	position:absolute;
+	right:0px;
+	top:0px;
+	margin:0;
+	padding:0;
+	list-style:none;
+}
+.main-nav li {
+	margin:0;
+	padding:0;
+	float:left;
+	  border-right: 1px solid #666;
+  padding-right: 10px;
+}
+
+.main-nav li:last-child {
+	border-right:none;
+	padding-right:0px;
+}
+
+
+.main-nav li a {
+	padding-left:10px;
+	color:#6D6D6D;
+	font-size:16px;
+}
+.main-nav li a:hover {
+	color:#D6264E;
+}
+
 nav#gpio {
 	position:relative;
 	width:300px;
@@ -196,6 +227,9 @@ div#pinbasebplus {
 	color:#888888;
 	margin-bottom:5px;
 	cursor:pointer;
+	position: absolute;
+	left:0px;
+	top:5px;
 }
 .logo img {float:left;position:relative;top:0px;margin:0 13px;
 	-moz-transform:rotate(-45deg);
@@ -228,11 +262,12 @@ h3 {
 	margin:0 auto;
 	margin-top:10px;
 	position:relative;
+	padding-top:70px;
 }
 .overlay-container {
 	position: absolute;
 	right: 0px;
-	top: 65px;
+	top: 40px;
 }
 article a {color:#859900;text-decoration:underline;}
 article ul {margin-left:20px;margin-top:10px;margin-bottom:10px;}

resources/pinout.js

@@ -26,7 +26,7 @@ jQuery(document).ready(function(){
 	$('.overlay').on('change',function(){
 		var url = $(this).val();
 		if( url != '' ){
-			window.location.href = url + '.html'
+			window.location.href = '/pinout/' + url
 		}
 	})
 

template/layout.html

@@ -5,7 +5,8 @@
 		<link href='http://fonts.googleapis.com/css?family=Sanchez|Ubuntu+Mono' rel='stylesheet' type='text/css' />
 		<link href='{{resource_url}}prettify/prettify.css' rel='stylesheet' />
 		<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-		<link href="{{resource_url}}pinout.css?v=0100" rel="stylesheet">
+		<link href="{{resource_url}}pinout.css?v={{v}}" rel="stylesheet">
+		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <!--script type='text/javascript'>
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-32070014-1']);
@@ -19,10 +20,12 @@
 	</head>
 	<body>
 		<div id="container">
-		<div class="latest" style="padding:10px;font-size:14px;margin-bottom:10px;text-align:right;">
+		<ul class="main-nav">
-			Latest at Gadgetoid: <a href="http://pi.gadgetoid.com/article/parallax-propeller-p8x32a-first-impressions">Propeller ASC+, the Arduino-compatible multi-core micro: read my first impressions</a>
+			<li><a href="http://pi.gadgetoid.com/">Pi Blog</a></li>
-		</div>
+			<li><a href="https://twitter.com/gadgetoid"><i class="fa fa-twitter"></i> @Gadgetoid</a></li>
-		<h1 class="logo"><a href="index.html"><img src="{{resource_url}}pinout-logo.png" style="top:8px;" /></a><span>Pi</span>n<span class="out">out</span></h1>
+			<li><a href="https://github.com/Gadgetoid/Pinout2"><i class="fa fa-github"></i> Contribute</a></li>
+		</ul>
+		<h1 class="logo"><a href="/pinout"><img src="{{resource_url}}pinout-logo.png" style="top:8px;" /></a><span>Pi</span>n<span class="out">out</span></h1>
 		<div class="overlay-container">
 			<span>Learn more about:</span>
 			<select class="overlay">
@@ -48,7 +51,7 @@
     	<script src='{{resource_url}}prettify/lang-bash.js'></script>
 		<script src='http://cdn.jsdelivr.net/history.js/1.7.1/history.js'></script>
 		<script src='http://cdn.jsdelivr.net/history.js/1.7.1/history.adapter.jquery.js'></script>
-		<script src='{{resource_url}}pinout.js?v=00000001'></script>
+		<script src='{{resource_url}}pinout.js?v={{v}}'></script>
 	<!--script type="text/javascript">if (typeof NREUMQ !== "undefined") { if (!NREUMQ.f) { NREUMQ.f=function() {
 NREUMQ.push(["load",new Date().getTime()]);
 var e=document.createElement("script");