diff --git a/client/components/admin/admin-navigation.vue b/client/components/admin/admin-navigation.vue index 3488eedd..a0ba97d8 100644 --- a/client/components/admin/admin-navigation.vue +++ b/client/components/admin/admin-navigation.vue @@ -76,8 +76,10 @@ :label='$t("navigation.icon")' prepend-icon='casino' v-model='current.icon' + hide-details ) - v-select( + .caption.pt-2.pl-5 Refer to the #[a(href='https://material.io/tools/icons/?style=baseline', target='_blank') Material Design Icons Reference] for the list of all possible values. + v-select.mt-4( outline :label='$t("navigation.targetType")' prepend-icon='near_me' diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index ed890af1..851c038a 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -51,14 +51,14 @@ span Horizontal Bar .editor-markdown-main .editor-markdown-sidebar - //- v-tooltip(right) - //- v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0 - //- v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image - //- span Insert Media v-tooltip(right, color='primary') v-btn(icon, slot='activator', dark).mx-0 - v-icon image - span Insert Media + v-icon link + span Insert Link + v-tooltip(right) + v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0 + v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image + span Insert Image v-tooltip(right, color='primary') v-btn(icon, slot='activator', dark).mx-0 v-icon insert_drive_file @@ -75,15 +75,15 @@ v-btn(icon, slot='activator', dark).mx-0 v-icon functions span Insert Math Expression - v-tooltip(right, color='primary') - v-btn(icon, slot='activator', dark).mx-0 - v-icon link - span Insert Link - v-spacer v-tooltip(right, color='primary') v-btn(icon, slot='activator', dark).mx-0 v-icon border_outer span Table Helper + v-spacer + v-tooltip(right, color='primary') + v-btn(icon, slot='activator', dark, @click='toggleFullscreen').mx-0 + v-icon crop_free + span Fullscreen Editor v-tooltip(right, color='primary') v-btn(icon, slot='activator', dark).mx-0 v-icon help @@ -124,10 +124,7 @@ import 'codemirror/addon/selection/active-line.js' import 'codemirror/addon/display/fullscreen.js' import 'codemirror/addon/display/fullscreen.css' import 'codemirror/addon/selection/mark-selection.js' -import 'codemirror/addon/scroll/annotatescrollbar.js' -import 'codemirror/addon/search/matchesonscrollbar.js' import 'codemirror/addon/search/searchcursor.js' -import 'codemirror/addon/search/match-highlighter.js' // Markdown-it import MarkdownIt from 'markdown-it' @@ -296,6 +293,9 @@ export default { }, 500), toggleAround (before, after) { + }, + toggleFullscreen () { + this.cm.setOption('fullScreen', true) } } } diff --git a/client/components/editor/editor-modal-media.vue b/client/components/editor/editor-modal-media.vue index 92450df7..b1ed1326 100644 --- a/client/components/editor/editor-modal-media.vue +++ b/client/components/editor/editor-modal-media.vue @@ -2,25 +2,97 @@ v-card.editor-modal-media.animated.fadeInLeft(flat, tile) v-container.pa-3(grid-list-lg, fluid) v-layout(row, wrap) - v-flex(xs3) + v-flex(xs9) v-card.radius-7.animated.fadeInLeft.wait-p1s(light) v-card-text - file-pond( + v-toolbar.radius-7(color='teal lighten-5', dense, flat) + .body-2.teal--text Images + v-spacer + v-btn(outline, small, color='teal') + v-icon(left) keyboard_backspace + span Parent Folder + v-btn(outline, small, color='teal') + v-icon(left) add + span New Folder + v-list.mt-3(dense, two-line) + template(v-for='(item, idx) of [1,2,3,4,5,6,7,8,9,10]') + v-list-tile(@click='') + v-list-tile-avatar + v-avatar.radius-7(color='teal', tile) + v-icon(dark) image + v-list-tile-content + v-list-tile-title Image {{item}} + v-list-tile-sub-title 1024x768, 10 KBs + v-list-tile-action + .caption.pr-3 2019-04-07 + v-list-tile-action + v-chip(label, small) JPG + v-divider(v-if='idx < 10 - 1') + .d-flex.mt-3 + v-toolbar.radius-7(flat, color='grey lighten-4', dense) + .body-2 / universe + v-spacer + .body-1.grey--text.text--darken-1 10 files + v-btn.ml-3(color='teal', dark, @click='insert') + v-icon(left) save_alt + span Insert + + v-flex(xs3) + v-card.radius-7.animated.fadeInRight.wait-p3s(light) + v-card-text + v-toolbar.radius-7(color='teal lighten-5', dense, flat) + v-icon.mr-3(color='teal') cloud_upload + .body-2.teal--text Upload Images + file-pond.mt-3( name='mediaUpload' ref='pond' - label-idle='Drop files here...' + label-idle='Browse or Drop files here...' allow-multiple='true' accepted-file-types='image/jpeg, image/png' :files='files' ) - v-flex(xs9) - v-card.radius-7.animated.fadeInLeft.wait-p3s(light) - v-card-text Beep boop + v-divider + v-card-actions.pa-3 + .caption.grey--text.text-darken-2 Max 20 files, 5 MB each + v-spacer + v-btn(color='teal', dark) Upload + + v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light) + v-card-text.pb-0 + v-toolbar.radius-7(color='teal lighten-5', dense, flat) + v-icon.mr-3(color='teal') cloud_download + .body-2.teal--text Fetch Remote Image + v-text-field.mt-3( + v-model='remoteImageUrl' + outline + single-line + background-color='grey lighten-2' + placeholder='https://example.com/image.jpg' + ) + v-divider + v-card-actions.pa-3 + .caption.grey--text.text-darken-2 Max 5 MB + v-spacer + v-btn(color='teal', dark) Fetch + + v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light) + v-card-text.pb-0 + v-toolbar.radius-7(color='teal lighten-5', dense, flat) + v-icon.mr-3(color='teal') format_align_left + .body-2.teal--text Alignment + v-select.mt-3( + v-model='imageAlignment' + :items='imageAlignments' + outline + single-line + background-color='grey lighten-2' + placeholder='None' + ) diff --git a/client/components/login.vue b/client/components/login.vue index 0c4ded34..06ee5d48 100644 --- a/client/components/login.vue +++ b/client/components/login.vue @@ -376,10 +376,6 @@ export default { display: flex; } - h1 { - font-family: 'Varela Round' !important; - } - .social-login-btn { display: inline-flex; justify-content: center; diff --git a/client/components/register.vue b/client/components/register.vue index 902295bb..98da2049 100644 --- a/client/components/register.vue +++ b/client/components/register.vue @@ -297,10 +297,6 @@ export default { display: flex; } - h1 { - font-family: 'Varela Round' !important; - } - .v-text-field.centered input { text-align: center; } diff --git a/client/scss/app.scss b/client/scss/app.scss index bb287b30..61bd915a 100644 --- a/client/scss/app.scss +++ b/client/scss/app.scss @@ -1,6 +1,7 @@ @import "global"; @import "base/base"; +@import "base/fonts"; @import "base/icons"; @import "base/animation"; diff --git a/client/scss/base/fonts.scss b/client/scss/base/fonts.scss new file mode 100644 index 00000000..d5bd1b23 --- /dev/null +++ b/client/scss/base/fonts.scss @@ -0,0 +1,79 @@ +@font-face { + font-family: 'Roboto'; + src: url('/fonts/Roboto-MediumItalic.woff2') format('woff2'), + url('/fonts/Roboto-MediumItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; +} + +@font-face { + font-family: 'Roboto'; + src: url('/fonts/Roboto-Italic.woff2') format('woff2'), + url('/fonts/Roboto-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Roboto'; + src: url('/fonts/Roboto-Bold.woff2') format('woff2'), + url('/fonts/Roboto-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-Bold.woff2') format('woff2'), + url('/fonts/SourceSansPro-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Roboto'; + src: url('/fonts/Roboto-Regular.woff2') format('woff2'), + url('/fonts/Roboto-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Roboto'; + src: url('/fonts/Roboto-BoldItalic.woff2') format('woff2'), + url('/fonts/Roboto-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-BoldItalic.woff2') format('woff2'), + url('/fonts/SourceSansPro-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-Regular.woff2') format('woff2'), + url('/fonts/SourceSansPro-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Roboto'; + src: url('/fonts/Roboto-Medium.woff2') format('woff2'), + url('/fonts/Roboto-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-Italic.woff2') format('woff2'), + url('/fonts/SourceSansPro-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; +} diff --git a/client/scss/base/icons.scss b/client/scss/base/icons.scss index ac8bf042..555937d7 100644 --- a/client/scss/base/icons.scss +++ b/client/scss/base/icons.scss @@ -1,3 +1,38 @@ +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: local('Material Icons'), + local('MaterialIcons-Regular'), + url(/fonts/MaterialIcons-Regular.woff2) format('woff2'), + url(/fonts/MaterialIcons-Regular.woff) format('woff'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-flex; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} + .icons { display: inline-block; color: mc('grey', '800'); diff --git a/client/static/fonts/MaterialIcons-Regular.woff b/client/static/fonts/MaterialIcons-Regular.woff new file mode 100644 index 00000000..d1c81db6 Binary files /dev/null and b/client/static/fonts/MaterialIcons-Regular.woff differ diff --git a/client/static/fonts/MaterialIcons-Regular.woff2 b/client/static/fonts/MaterialIcons-Regular.woff2 new file mode 100644 index 00000000..d9c6038f Binary files /dev/null and b/client/static/fonts/MaterialIcons-Regular.woff2 differ diff --git a/client/static/fonts/Roboto-Bold.woff b/client/static/fonts/Roboto-Bold.woff new file mode 100644 index 00000000..4536546c Binary files /dev/null and b/client/static/fonts/Roboto-Bold.woff differ diff --git a/client/static/fonts/Roboto-Bold.woff2 b/client/static/fonts/Roboto-Bold.woff2 new file mode 100644 index 00000000..4c8d525f Binary files /dev/null and b/client/static/fonts/Roboto-Bold.woff2 differ diff --git a/client/static/fonts/Roboto-BoldItalic.woff b/client/static/fonts/Roboto-BoldItalic.woff new file mode 100644 index 00000000..a8ff0d37 Binary files /dev/null and b/client/static/fonts/Roboto-BoldItalic.woff differ diff --git a/client/static/fonts/Roboto-BoldItalic.woff2 b/client/static/fonts/Roboto-BoldItalic.woff2 new file mode 100644 index 00000000..7ce2fcbb Binary files /dev/null and b/client/static/fonts/Roboto-BoldItalic.woff2 differ diff --git a/client/static/fonts/Roboto-Italic.woff b/client/static/fonts/Roboto-Italic.woff new file mode 100644 index 00000000..d15b4b3b Binary files /dev/null and b/client/static/fonts/Roboto-Italic.woff differ diff --git a/client/static/fonts/Roboto-Italic.woff2 b/client/static/fonts/Roboto-Italic.woff2 new file mode 100644 index 00000000..ca6d6c4f Binary files /dev/null and b/client/static/fonts/Roboto-Italic.woff2 differ diff --git a/client/static/fonts/Roboto-Medium.woff b/client/static/fonts/Roboto-Medium.woff new file mode 100644 index 00000000..f58e36d2 Binary files /dev/null and b/client/static/fonts/Roboto-Medium.woff differ diff --git a/client/static/fonts/Roboto-Medium.woff2 b/client/static/fonts/Roboto-Medium.woff2 new file mode 100644 index 00000000..afba9fbb Binary files /dev/null and b/client/static/fonts/Roboto-Medium.woff2 differ diff --git a/client/static/fonts/Roboto-MediumItalic.woff b/client/static/fonts/Roboto-MediumItalic.woff new file mode 100644 index 00000000..13978c14 Binary files /dev/null and b/client/static/fonts/Roboto-MediumItalic.woff differ diff --git a/client/static/fonts/Roboto-MediumItalic.woff2 b/client/static/fonts/Roboto-MediumItalic.woff2 new file mode 100644 index 00000000..994d760b Binary files /dev/null and b/client/static/fonts/Roboto-MediumItalic.woff2 differ diff --git a/client/static/fonts/Roboto-Regular.woff b/client/static/fonts/Roboto-Regular.woff new file mode 100644 index 00000000..5421d5dd Binary files /dev/null and b/client/static/fonts/Roboto-Regular.woff differ diff --git a/client/static/fonts/Roboto-Regular.woff2 b/client/static/fonts/Roboto-Regular.woff2 new file mode 100644 index 00000000..b6487a6f Binary files /dev/null and b/client/static/fonts/Roboto-Regular.woff2 differ diff --git a/client/static/fonts/SourceSansPro-Bold.woff b/client/static/fonts/SourceSansPro-Bold.woff new file mode 100644 index 00000000..fa5f2908 Binary files /dev/null and b/client/static/fonts/SourceSansPro-Bold.woff differ diff --git a/client/static/fonts/SourceSansPro-Bold.woff2 b/client/static/fonts/SourceSansPro-Bold.woff2 new file mode 100644 index 00000000..64c996a2 Binary files /dev/null and b/client/static/fonts/SourceSansPro-Bold.woff2 differ diff --git a/client/static/fonts/SourceSansPro-BoldItalic.woff b/client/static/fonts/SourceSansPro-BoldItalic.woff new file mode 100644 index 00000000..385eaa49 Binary files /dev/null and b/client/static/fonts/SourceSansPro-BoldItalic.woff differ diff --git a/client/static/fonts/SourceSansPro-BoldItalic.woff2 b/client/static/fonts/SourceSansPro-BoldItalic.woff2 new file mode 100644 index 00000000..3762b1df Binary files /dev/null and b/client/static/fonts/SourceSansPro-BoldItalic.woff2 differ diff --git a/client/static/fonts/SourceSansPro-Italic.woff b/client/static/fonts/SourceSansPro-Italic.woff new file mode 100644 index 00000000..bce2dd1c Binary files /dev/null and b/client/static/fonts/SourceSansPro-Italic.woff differ diff --git a/client/static/fonts/SourceSansPro-Italic.woff2 b/client/static/fonts/SourceSansPro-Italic.woff2 new file mode 100644 index 00000000..a396bbd0 Binary files /dev/null and b/client/static/fonts/SourceSansPro-Italic.woff2 differ diff --git a/client/static/fonts/SourceSansPro-Regular.woff b/client/static/fonts/SourceSansPro-Regular.woff new file mode 100644 index 00000000..c0a54e3f Binary files /dev/null and b/client/static/fonts/SourceSansPro-Regular.woff differ diff --git a/client/static/fonts/SourceSansPro-Regular.woff2 b/client/static/fonts/SourceSansPro-Regular.woff2 new file mode 100644 index 00000000..aa56eaa8 Binary files /dev/null and b/client/static/fonts/SourceSansPro-Regular.woff2 differ diff --git a/client/static/fonts/stylesheet.css b/client/static/fonts/stylesheet.css new file mode 100644 index 00000000..cac3a7d2 --- /dev/null +++ b/client/static/fonts/stylesheet.css @@ -0,0 +1,80 @@ +@font-face { + font-family: 'Roboto'; + src: url('Roboto-MediumItalic.woff2') format('woff2'), + url('Roboto-MediumItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; +} + +@font-face { + font-family: 'Roboto'; + src: url('Roboto-Italic.woff2') format('woff2'), + url('Roboto-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Roboto'; + src: url('Roboto-Bold.woff2') format('woff2'), + url('Roboto-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('SourceSansPro-Bold.woff2') format('woff2'), + url('SourceSansPro-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Roboto'; + src: url('Roboto-Regular.woff2') format('woff2'), + url('Roboto-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Roboto'; + src: url('Roboto-BoldItalic.woff2') format('woff2'), + url('Roboto-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('SourceSansPro-BoldItalic.woff2') format('woff2'), + url('SourceSansPro-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('SourceSansPro-Regular.woff2') format('woff2'), + url('SourceSansPro-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Roboto'; + src: url('Roboto-Medium.woff2') format('woff2'), + url('Roboto-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('SourceSansPro-Italic.woff2') format('woff2'), + url('SourceSansPro-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + diff --git a/dev/templates/master.pug b/dev/templates/master.pug index 3bf1e35a..4a89bff9 100644 --- a/dev/templates/master.pug +++ b/dev/templates/master.pug @@ -32,8 +32,6 @@ html var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code, company: config.company })} //- CSS - link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Varela+Round|Source+Code+Pro:400,700|Material+Icons') - link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css') <% for (var index in htmlWebpackPlugin.files.css) { %> <% if (htmlWebpackPlugin.files.cssIntegrity) { %> link( diff --git a/dev/templates/setup.pug b/dev/templates/setup.pug index dd5396f2..79d2811f 100644 --- a/dev/templates/setup.pug +++ b/dev/templates/setup.pug @@ -22,8 +22,6 @@ html var siteConfig = !{JSON.stringify({ title: config.title })} //- CSS - link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Source+Code+Pro:400,700|Material+Icons') - link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css') <% for (var index in htmlWebpackPlugin.files.css) { %> <% if (htmlWebpackPlugin.files.cssIntegrity) { %> link( diff --git a/server/views/master.pug b/server/views/master.pug index ca053029..f0a4da5a 100644 --- a/server/views/master.pug +++ b/server/views/master.pug @@ -7,9 +7,9 @@ html meta(name='theme-color', content='#333333') meta(name='msapplication-TileColor', content='#333333') meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png') - + title= pageMeta.title + ' | ' + config.title - + //- SEO / OpenGraph meta(name='description', content=pageMeta.description) meta(property='og:title', content=pageMeta.title) @@ -18,7 +18,7 @@ html meta(property='og:image', content=pageMeta.image) meta(property='og:url', content=pageMeta.url) meta(property='og:site_name', content=config.title) - + //- Favicon each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180] link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png') @@ -26,34 +26,32 @@ html each favsize in [32, 96, 16] link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png') link(rel='manifest', href='/manifest.json') - + //- Site Properties script. var siteConfig = !{JSON.stringify({ title: config.title, theme: config.theming.theme, darkMode: config.theming.darkMode, lang: config.lang.code, company: config.company })} - + //- CSS - link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Varela+Round|Source+Code+Pro:400,700|Material+Icons') - link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css') - - //- JS - + //- JS + + script( type='text/javascript' src='/js/runtime.js' ) - - - + + + script( type='text/javascript' src='/js/app.js' ) - + + - block head - + body block body diff --git a/server/views/setup.pug b/server/views/setup.pug index 2c0ec82f..a28a97b4 100644 --- a/server/views/setup.pug +++ b/server/views/setup.pug @@ -8,7 +8,7 @@ html meta(name='msapplication-TileColor', content='#333333') meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png') title Wiki.js Setup - + //- Favicon each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180] link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png') @@ -16,33 +16,31 @@ html each favsize in [32, 96, 16] link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png') link(rel='manifest', href='/manifest.json') - + //- Site Lang script. var siteConfig = !{JSON.stringify({ title: config.title })} - + //- CSS - link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Source+Code+Pro:400,700|Material+Icons') - link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css') - - //- JS - + //- JS + + script( type='text/javascript' src='/js/runtime.js' ) - - - + + + script( type='text/javascript' src='/js/setup.js' ) - - + + body #root setup(telemetry-id=telemetryClientID, wiki-version=packageObj.version)