Add sphinx documentation, integrated into our navigation and colour scheme
[ndcode_site.git] / navbar.jst
1 let XDate = require('xdate')
2
3 return async (env, head, body) => {
4   let feedback_form = await _require('/feedback_form.jst')
5   let globals = await env.site.get_json('/_config/globals.json')
6   let icon_search = await env.site.get_min_svg('/_svg/icon_search.svg')
7   let logo_large = await env.site.get_min_svg('/_svg/logo_large.svg')
8   let page = await _require('/page.jst')
9
10   await page(
11     env,
12     // head
13     async _out => {
14       title {
15         _out.push(
16           globals.site_title +
17           ": " +
18           (globals.page_to_title[env.parsed_url.pathname] || env.parsed_url.pathname)
19         )
20       }
21
22       await head(_out)
23     },
24     // body
25     async _out => {
26       div(style="padding-left: calc(100vw - 100%);") {
27         div.container(style="margin-top: 15px; margin-bottom: 15px;") {
28           //div.row {
29           //  div.col-sm-12(style="text-align: right;") {
30           //    a(href="/login.html") {'Login'}
31           //  }
32           //}
33           div.row {
34             div.'col-sm-8'.vbottom {
35               _out.push(logo_large)
36             }
37             div.'col-sm-4'.vbottom(style="padding-bottom: 15px;") {
38               form(action="/search.html") {
39                 div.input-group {
40                   input.form-control(name="query" type="text" placeholder="Search") {}
41                   span.input-group-btn {
42                     button.btn.btn-default(type="submit") {
43                       _out.push(icon_search)
44                     }
45                   }
46                 }
47               }
48             }
49           }
50         }
51       }
52       nav.navbar.navbar-default(style="margin-top: 0px; margin-bottom: 0px;") {
53         div(style="padding-left: calc(100vw - 100%);") {
54           div.container { //-fluid") {
55             //  Brand and toggle get grouped for better mobile display 
56             div.navbar-header {
57               button.navbar-toggle.collapsed(type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false") {
58                 span.sr-only {'Toggle navigation'}
59                 span.icon-bar {}
60                 span.icon-bar {}
61                 span.icon-bar {}
62               }
63               //a.navbar-brand(href="#") {'Brand'}
64             }
65
66             //  Collect the nav links, forms, and other content for toggling 
67             div.collapse.navbar-collapse#bs-example-navbar-collapse-1 {
68               ul.nav.navbar-nav {
69                 let navigation = globals.navigation
70                 for (let i = 0; i < navigation.length; ++i) {
71                   let page = navigation[i]
72                   let title = globals.page_to_title[page] || page
73                   if (page === env.parsed_url.pathname)
74                     li.active {
75                       a(href=page) {
76                         `${title}`
77                         span.sr-only {'(current)'}
78                       }
79                     }
80                   else
81                     li {
82                       a(href=page) {`${title}`}
83                     }
84                 }
85               }
86               ul.nav.navbar-nav.navbar-right {
87                 li {
88                   a#give-feedback {'Give feedback'}
89                 }
90               } 
91             }
92           }
93         }
94       }
95       div(style="padding-left: calc(100vw - 100%);") {
96         div.container {
97           await body(_out)
98         }
99       }
100       div.footer(style="padding-left: calc(100vw - 100%);") {
101         div.container { //-fluid") {
102           div(style="height: 16px;") {}
103           a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
104             img(alt="Creative Commons License" style="border-width:0" src="/images/by-sa_3.0_88x31.png") {}
105           }
106           p {
107             'This website is '
108             a(href="https://git.ndcode.org/public/ndcode_site.git") {
109               'open source'
110             }
111             ' and licensed under a '
112             a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
113               'Creative Commons Attribution-ShareAlike 3.0 Unported License'
114             }
115             '.'
116           }
117
118           p {'Code samples within the page are placed in the public domain unless otherwise noted.'}
119
120           p {`Copyright © ${new XDate().getUTCFullYear()} Integration Logic Pty Ltd trading as NDCODE and contributors.`}
121         }
122       }
123
124       // hidden part
125       div#feedback-modal.modal.fade(role="dialog") {
126         div.modal-dialog {
127           div.modal-content {
128             div.modal-header {
129               button.close(type="button" data-dismiss="modal") {
130                 '×'
131               }
132               h4.modal-title {
133                 'Give feedback'
134               }
135             }
136             div.modal-body {
137               p {
138                 'Did you notice something not quite right, or just want to share your impression of this page?'
139               }
140               await feedback_form(env, _out)
141             }
142             div.modal-footer {
143               button.btn.btn-primary(type="submit" form="feedback-form") {
144                 'Submit'
145               }
146               button.btn.btn-default(type="button" data-dismiss="modal") {
147                 'Close'
148               }
149             }
150           }
151         }
152       }
153
154       div#message-modal.modal.fade(role="dialog") {
155         div.modal-dialog {
156           div.modal-content {
157             div.modal-header {
158               button.close(type="button" data-dismiss="modal") {
159                 '×'
160               }
161               h4.modal-title {
162                 'Message'
163               }
164             }
165             div.modal-body {
166               p#message-modal-message {}
167             }
168             div.modal-footer {
169               button.btn.btn-default(type="button" data-dismiss="modal") {
170                 'Close'
171               }
172             }
173           }
174         }
175       }
176     },
177     // scripts
178     async _out => {
179       // when feedback form is submitted, do not reload the page
180       script {
181         $(document).ready(function() {
182           $('#give-feedback').click(function() {
183             $('#feedback-modal').modal('show')
184             $('#feedback-form-message').text('')
185           })
186           $('#feedback-modal').on('shown.bs.modal', function() {
187             $('#feedback-form-message').focus()
188           })
189           $(document).on('submit', '#feedback-form', function(e) {
190             e.preventDefault()
191             $.ajax({
192               url: '/feedback.html',
193               type: 'POST',
194               data: {
195                 page: window.location.href,
196                 message: $('#feedback-form-message').val()
197               },
198               success: function(data, textStatus, jqXHR) {
199                 $('#feedback-modal').modal('hide')
200                 $('#message-modal-message').text(data)
201                 $('#message-modal').modal('show')
202               },
203               error: function(jqXHR, textStatus, errorThrown) {
204                 $('#feedback-modal').modal('hide')
205                 $('#message-modal-message').text(errorThrown)
206                 $('#message-modal').modal('show')
207               }               
208             })
209           })
210         })
211       }
212     }
213   )
214 }