New design for boards grouping, and featured items
This commit is contained in:
Phil Howard
parent
0544b6ae29
commit
b7ee95b31b
138
generate-html.py
138
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,27 +452,63 @@ 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_type in nav_html[o_class]:
|
||||
nav_html[o_class][o_type] += [link]
|
||||
else:
|
||||
nav_html[o_class][o_type] = [link]
|
||||
else:
|
||||
if o_class not in nav_html:
|
||||
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
|
||||
|
|
@ -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!')
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
display: inline-block;
|
||||
|
||||
#sections ul .dropdown .group-nav {
|
||||
padding-right:0;
|
||||
}
|
||||
#sections ul ul a, #sections .group-title {
|
||||
color:#FFF;
|
||||
padding:8px;
|
||||
|
||||
#sections .group li {
|
||||
display:inline-block;
|
||||
font-size:16px;
|
||||
margin:2px;
|
||||
}
|
||||
#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;
|
||||
margin-right:5px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
#sections > ul > li:nth-child(1) a, #sections > ul > li:nth-child(1) div {background: #D33682;}
|
||||
#sections > ul > li:nth-child(1) ul a {background: #C32672;}
|
||||
#sections > ul > li:nth-child(1) ul a:hover {color: #D33682;background:#FFF;}
|
||||
|
||||
#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 .group a {
|
||||
color:#FFF;
|
||||
padding:5px 10px;
|
||||
display:block;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -33,20 +33,14 @@
|
|||
<div id="content">
|
||||
<div id="sections">
|
||||
<ul>
|
||||
<li><a href="" title="Add-on boards for Raspberry Pi">Boards</a>
|
||||
<div><ul>
|
||||
{{nav_html_board}}
|
||||
</ul></div>
|
||||
<li class="boards"><a href="" title="Add-on boards for Raspberry Pi">Boards</a>
|
||||
<div class="dropdown">{{nav_html_board}}</div>
|
||||
</li>
|
||||
<li><a href="" title="Raspberry Pi hardware interfaces">Interfaces</a>
|
||||
<div><ul>
|
||||
{{nav_html_interface}}
|
||||
</ul></div>
|
||||
<li class="interfaces"><a href="" title="Raspberry Pi hardware interfaces">Interfaces</a>
|
||||
<div class="dropdown">{{nav_html_interface}}</div>
|
||||
</li>
|
||||
<li><a href="" title="Connection guides for Raspberry Pi GPIO">Guides</a>
|
||||
<div><ul>
|
||||
{{nav_html_guide}}
|
||||
</ul></div>
|
||||
<li class="guides"><a href="" title="Connection guides for Raspberry Pi GPIO">Guides</a>
|
||||
<div class="dropdown">{{nav_html_guide}}</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue