New design for boards grouping, and featured items

generate-html.py

@@ -12,6 +12,37 @@ reload(sys)
 sys.setdefaultencoding('utf8')
 
 
+
+lang = "en"
+default_strings = {
+    'made_by': 'Made by {manufacturer}',
+    'type_hat': 'HAT form-factor',
+    'type_classic': 'Classic form-factor',
+    'pin_header': '{} pin header',
+    'uses_i2c': 'Uses I2C',
+    'wiring_pi_pin': 'Wiring Pi pin {}',
+    'uses_n_gpio_pins': 'Uses {} GPIO pins',
+    'bcm_pin_rev1_pi': 'BCM pin {} on Rev 1 ( very early ) Pi',
+    'physical_pin_n': 'Physical pin {}',
+    'more_information': 'More Information',
+    'github_repository': 'GitHub Repository',
+    'buy_now': 'Buy Now',
+    'group_multi': 'Multi',
+    'group_led': 'LED',
+    'group_iot': 'IOT',
+    'group_instrument': 'Instrument',
+    'group_lcd': 'LCD',
+    'group_other': 'Other',
+    'group_motor': 'Motor',
+    'group_audio': 'Audio',
+    'group_gesture': 'Gesture',
+    'group_pinout': 'Pinout',
+    'group_info': 'Info',
+    'group_featured': 'Featured'
+}
+
+
+
 def cssify(value):
     value = slugify(value);
     if value[0] == '3' or value[0] == '5':
@@ -143,7 +174,7 @@ def load_md(filename):
 
         return html
     except IOError:
-        print('Unable to load markdown from {}'.format(filename))
+        print('!! Unable to load markdown from {}'.format(filename))
         return ''
 
 
@@ -356,33 +387,6 @@ def get_lang_urls(src):
 Main Program Flow
 '''
 
-lang = "en"
-default_strings = {
-    'made_by': 'Made by {manufacturer}',
-    'type_hat': 'HAT form-factor',
-    'type_classic': 'Classic form-factor',
-    'pin_header': '{} pin header',
-    'uses_i2c': 'Uses I2C',
-    'wiring_pi_pin': 'Wiring Pi pin {}',
-    'uses_n_gpio_pins': 'Uses {} GPIO pins',
-    'bcm_pin_rev1_pi': 'BCM pin {} on Rev 1 ( very early ) Pi',
-    'physical_pin_n': 'Physical pin {}',
-    'more_information': 'More Information',
-    'github_repository': 'GitHub Repository',
-    'buy_now': 'Buy Now',
-    'group_multi': 'Multi',
-    'group_led': 'LED',
-    'group_iot': 'IOT',
-    'group_instrument': 'Instrument',
-    'group_lcd': 'LCD',
-    'group_other': 'Other',
-    'group_motor': 'Motor',
-    'group_audio': 'Audio',
-    'group_gesture': 'Gesture',
-    'group_pinout': 'Pinout',
-    'group_info': 'Info'
-}
-
 if len(sys.argv) > 1:
     lang = sys.argv[1]
 
@@ -434,6 +438,8 @@ if not os.path.isdir('output/{}/pinout'.format(lang)):
         exit('Failed to create output/{}/pinout dir'.format(lang))
 
 overlays = map(load_overlay, overlays)
+overlay_subnav = ['featured']
+featured_boards = []
 
 '''
 Build up the navigation between overlays. This needs to be done before rendering pages
@@ -446,28 +452,64 @@ for overlay in overlays:
 
     overlays_html += [link]
 
+    if 'featured' in overlay and 'image' in overlay and len(featured_boards) < 3:
+        featured_boards.append(overlay)
+
     if 'class' in overlay and 'type' in overlay:
         o_class = overlay['class']
         o_type = overlay['type']
 
-        if o_class in nav_html:
+        if o_class not in nav_html:
-            if o_type in nav_html[o_class]:
-                nav_html[o_class][o_type] += [link]
-            else:
-                nav_html[o_class][o_type] = [link]
-        else:
             nav_html[o_class] = {}
-            nav_html[o_class][o_type] = [link]
 
+        if o_type not in nav_html[o_class]:
+            nav_html[o_class][o_type] = []
+
+        if o_class == 'board' and o_type not in overlay_subnav:
+            overlay_subnav.append(o_type)
+
+        nav_html[o_class][o_type] += [link]
+
+
+
+featured_boards_html = ''
+for overlay in featured_boards:
+    featured_boards_html += '<div class="featured"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong><span>{description}</span></a></div>'.format(
+            image=overlay['image'],
+            name=overlay['name'],
+            page_url=overlay['page_url'],
+            base_url=base_url,
+            resource_url=resource_url,
+            description=overlay['description']
+        )
+
+featured_boards_html = '<div class="group group_featured">' + featured_boards_html + '</div>'
+
+'''
+Generate legacy navigation menu for all overlays in a single drop-down
+'''
 overlays_html.sort()
 overlays_html = ''.join(map(lambda x: '<li><a href="{}{}">{}</a></li>'.format(base_url, x[0], x[1]), overlays_html))
 
+'''
+Generate the new categorised navigation menu
+'''
+overlay_subnav = ''.join(map(lambda overlay_type: '<li class="group_{cls}" data-group="{cls}">{text}</li>'.format(cls=overlay_type,text=strings['group_' + overlay_type]),overlay_subnav))
+
 for overlay_type in nav_html.keys():
     for overlay_group, items in nav_html[overlay_type].iteritems():
         items.sort()
-        nav_html[overlay_type][overlay_group] = '<li class="group"><ul><li class="group-title">' + strings['group_' + overlay_group] + '</li>' + (''.join(map(lambda x: '<li><a href="{}{}">{}</a></li>'.format(base_url, x[0], x[1]), items))) + '</ul></li>'
+        group_items = (''.join(map(lambda x: '<li><a href="{}{}">{}</a></li>'.format(base_url, x[0], x[1]), items)))
+        
+        nav_html[overlay_type][overlay_group] = '<div class="group group_' + overlay_group + '"><ul>' + group_items + '</ul></div>'
     nav_html[overlay_type] = ''.join(nav_html[overlay_type].values())
     
+    if overlay_type == 'board':
+        nav_html[overlay_type] = '<div class="group-nav"><ul>' + overlay_subnav + '</ul></div>' + featured_boards_html + nav_html[overlay_type]
+
+
+print(nav_html)
+
 '''
 Manually add the index page as 'pinout', this is due to how the
 website is currently structured with /pinout as the index
@@ -479,7 +521,17 @@ pages['index'] = {}
 pages['index']['rendered_html'] = render_overlay_page({'name': 'Index', 'long_description': load_md('index.md')})
 navs['index'] = render_nav('pinout')
 
-print('Rendering pin pages...')
+'''
+Add the 404 page if 404.md is present.
+'''
+page404 = load_md('404.md')
+if page404 is not None:
+    pages['404'] = {}
+    pages['404']['rendered_html'] = render_overlay_page({'name': '404', 'long_description': page404})
+    navs['404'] = render_nav('pinout')
+
+
+print('\nRendering pin pages...')
 
 for pin in range(1, len(pinout.pins) + 1):
     (pin_url, pin_html, pin_title) = render_pin_page(pin)
@@ -502,13 +554,14 @@ for pin in range(1, len(pinout.pins) + 1):
                                   langcode=lang,
                                   nav_html=nav_html
                                   )
-    print('Outputting page {}'.format(pin_url))
+
+    print('>> pinout/{}.html'.format(pin_url))
 
     with open(os.path.join('output', lang, 'pinout', '{}.html'.format(pin_url)), 'w') as f:
         f.write(pin_html)
 
 
-print('Rendering overlay and index pages...')
+print('\nRendering overlay and index pages...')
 
 for url in pages:
     content = pages[url]['rendered_html']
@@ -545,10 +598,13 @@ for url in pages:
                               langcode=lang,
                               nav_html=nav_html
                               )
-    print('Outputting page {}'.format(url))
 
-    if url != 'index':
+    if url != 'index' and url != '404':
         url = os.path.join('pinout', url)
 
+    print('>> {}.html'.format(url))
+
     with open(os.path.join('output', lang, '{}.html'.format(url)), 'w') as f:
         f.write(html)
+
+print('\nAll done!')

resources/pinout.css

@@ -167,7 +167,7 @@ Drop down nav
 	top:50%;
 	margin-top:-5px;
 }
-#sections ul div {
+#sections ul .dropdown {
 	display:none;
 	position:absolute;
 	right:0px;
@@ -175,58 +175,108 @@ Drop down nav
 	max-width:704px;
 	z-index:1;
 }
-#sections ul div > ul {
+
+#sections .dropdown .group, #sections .dropdown .group-nav {
 	padding:10px;
-	text-align:right;
 	box-sizing:border-box;
 	display:block;
 }
-#sections ul ul li {
+
-	float:none;
+#sections ul .dropdown .group-nav {
-	display: inline-block;
+	padding-right:0;
 }
-#sections ul ul a, #sections .group-title {
+
-	color:#FFF;
+#sections .group li {
-	padding:8px;
 	display:inline-block;
-	font-size:16px;
+	margin-right:5px;
-	margin:2px;
+	margin-bottom:5px;
-}
-#sections .group .group-title  {
-	position:relative;
-	padding-right:20px;
-}
-#sections .group .group-title:after {
-	content: '';
-	border:5px solid transparent;
-	border-left-color:#ffffff;
-	position:absolute;
-	right:0;
-	top:50%;
-	margin-top:-5px;
 }
 
-#sections > ul > li:nth-child(1) a, #sections > ul > li:nth-child(1) div {background: #D33682;}
+#sections .group a {
-#sections > ul > li:nth-child(1) ul a {background: #C32672;}
+	color:#FFF;
-#sections > ul > li:nth-child(1) ul a:hover {color: #D33682;background:#FFF;}
+	padding:5px 10px;
-
+	display:block;
-#sections > ul > li:nth-child(2) a, #sections > ul > li:nth-child(2) div {background: #6c71c4;}
-#sections > ul > li:nth-child(2) ul a {background: #5c61b4;}
-#sections > ul > li:nth-child(2) ul a:hover {color: #6c71c4;background:#FFF;}
-
-#sections > ul > li:nth-child(3) a, #sections > ul > li:nth-child(3) div {background: #268BD2;}
-#sections > ul > li:nth-child(3) ul a {background: #167BC2;}
-#sections > ul > li:nth-child(3) ul a:hover {color: #268BD2;background:#FFF;}
-
-#sections > ul > li:nth-child(2) .group-title, #sections > ul > li:nth-child(3) .group-title {
-	display:none;
 }
 
-#sections > ul > li:first-child {
+#sections .boards .group-nav {
+	width:25%;
+	display:block;
+	float:left;
+}
+
+#sections .boards .group {
+	width:75%;
+	display:block;
+	float:left;
+	min-height:390px;
+}
+
+#sections .boards .group-nav li {
+	display:block;
+	color:#FFFFFF;
+	padding:5px 10px;
+	display:block;
+	margin-bottom:5px;
+	cursor:pointer;
+}
+
+#sections .boards .group-nav li:hover,
+#sections .boards .group-nav li.active {background: #C32672;}
+
+#sections .boards a, #sections .boards .dropdown {background: #D33682;}
+#sections .boards .group {background: #C32672;}
+#sections .boards ul a:hover {color: #D33682;background:#FFF;}
+
+#sections .interfaces a, #sections .interfaces .dropdown {background: #6c71c4;}
+#sections .interfaces ul a {background: #5c61b4;}
+#sections .interfaces ul a:hover {color: #6c71c4;background:#FFF;}
+
+#sections .guides a, #sections .guides .dropdown {background: #268BD2;}
+#sections .guides ul a {background: #167BC2;}
+#sections .guides ul a:hover {color: #268BD2;background:#FFF;}
+
+#sections .boards {
 	border-left:none;
 	width:34%;
 }
 
+#sections .featured {
+	box-sizing:border-box;
+	width:33.3333%;
+	display:block;
+	float:left;
+	text-align:center;
+}
+#sections .featured img {
+	max-width:100%;
+	height:auto;
+	display:block;
+}
+#sections .featured a {
+	background:none;
+}
+
+#sections .featured a:hover {
+	background: #D33682;
+}
+#sections .featured strong {
+	font-size:20px;
+	font-family: 'Avenir', sans-serif;
+    font-weight: 500;
+    color:#FFFFFF;
+    margin: 0;
+    padding: 0 5px;
+    display:block;
+}
+#sections .featured span {
+    color: #FFFFFF;
+    font-size: 16px;
+    font-weight: normal;
+    margin: 0;
+    padding: 0 5px;
+    display:block;
+}
+
 /*
 Footer
 */
@@ -452,7 +502,7 @@ ol.linenums {margin-left:30px;}
 	.board {
 		right:1200px;
 	}
-	#sections ul div {
+	#sections ul .dropdown {
 		min-width:700px;
 		max-width:700px;
 	}

resources/pinout.js

@@ -1,27 +1,42 @@
 jQuery(document).ready(function(){
 	var overlay_slideUp;
-	var dropdowns = $('#sections ul li div');
+	var dropdowns = $('#sections ul li .dropdown');
 
 	$('pre').addClass('prettyprint').addClass('linenums');
 
 	window.prettyPrint&&prettyPrint();
 
+	var groups = $('#sections .boards .group');
+	var group_nav = $('#sections .boards .group-nav li');
+	
+	groups.hide().filter(':eq(0)').show();
+	group_nav.removeClass('active').filter(':eq(0)').addClass('active');
+
+	group_nav.on('click',function(e){
+		group_nav.removeClass('active');
+		$(this).addClass('active');
+		groups.hide();
+
+		var group = $(this).data('group');
+
+		groups.filter('.group_' + group).show();
+	})
 
 	$('#container').on('click',function(){
 		dropdowns.slideUp(100);
 	});
 
-	$('#sections > ul > li > a').click(function(e){
+	$('#sections > ul > li > a').on('click',function(e){
 		e.preventDefault();
 		e.stopPropagation();
-		var dropdown = $(this).parent().find('div');
+		var dropdown = $(this).parent().find('.dropdown');
 		dropdowns.hide();
 		dropdown.show();
 	});
 
 	$('#sections > ul > li > a').hover(function(e){
 		e.preventDefault();
-		var dropdown = $(this).parent().find('div');
+		var dropdown = $(this).parent().find('.dropdown');
 		clearTimeout(overlay_slideUp);
 		if(dropdowns.filter(':visible').length){
 			dropdowns.hide();
@@ -33,12 +48,16 @@ jQuery(document).ready(function(){
 		}
 	},function(e){
 		e.preventDefault();
-		var dropdown = $(this).parent().find('div');
+		var dropdown = $(this).parent().find('.dropdown');
 		clearTimeout(overlay_slideUp);
 		overlay_slideUp = setTimeout(function(){dropdown.slideUp(100);}, 100);
 	});
 
-	$('#sections > ul > li > div').hover(function(e){
+	dropdowns.on('click',function(e){
+		e.stopPropagation();
+	})
+
+	dropdowns.hover(function(e){
 		clearTimeout(overlay_slideUp);
 	},function(e){
 		e.preventDefault();
@@ -47,12 +66,6 @@ jQuery(document).ready(function(){
 		overlay_slideUp = setTimeout(function(){dropdown.slideUp(100);}, 100);
 	})
 
-	$.gaat({
-		trackExternal: true,
-		trackDownload: false,
-		trackFTP: false
-	})
-
 	$('article p').each(function(){
 		html = $(this).html();
 

src/en/template/layout.html

@@ -33,20 +33,14 @@
 			<div id="content">
 				<div id="sections">
 					<ul>
-						<li><a href="" title="Add-on boards for Raspberry Pi">Boards</a>
+						<li class="boards"><a href="" title="Add-on boards for Raspberry Pi">Boards</a>
-							<div><ul>
+							<div class="dropdown">{{nav_html_board}}</div>
-								{{nav_html_board}}
-							</ul></div>
 						</li>
-						<li><a href="" title="Raspberry Pi hardware interfaces">Interfaces</a>
+						<li class="interfaces"><a href="" title="Raspberry Pi hardware interfaces">Interfaces</a>
-							<div><ul>
+							<div class="dropdown">{{nav_html_interface}}</div>
-								{{nav_html_interface}}
-							</ul></div>
 						</li>
-						<li><a href="" title="Connection guides for Raspberry Pi GPIO">Guides</a>
+						<li class="guides"><a href="" title="Connection guides for Raspberry Pi GPIO">Guides</a>
-							<div><ul>
+							<div class="dropdown">{{nav_html_guide}}</div>
-								{{nav_html_guide}}
-							</ul></div>
 						</li>
 					</ul>
 				</div>
@@ -71,7 +65,6 @@
 		<script type="text/javascript" src="//cdn.jsdelivr.net/prettify/0.1/prettify.js"></script>
     	<script src='{{resource_url}}prettify/lang-ruby.js'></script>
     	<script src='{{resource_url}}prettify/lang-bash.js'></script>
-	<script src='{{resource_url}}gaat.js'></script>
 		<script src='{{resource_url}}pinout.js?v={{v}}'></script>
 </body>
 </html>