Skip to content

W
wiki-js
Commit 1658fcbf authored by NGPixel's avatar NGPixel
Browse files
Options

feat: config wizard UI improvements

parent 98d31114
Expand all Show whitespace changes
Inline Side-by-side
Showing with 69 additions and 189 deletions
assets/svg/logo-git.svg 0 → 100644
View file @ 1658fcbf
<svg width="2500" height="1055" viewBox="0 0 256 108" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M152.984 37.214c-5.597 0-9.765 2.748-9.765 9.362 0 4.983 2.747 8.443 9.463 8.443 5.693 0 9.56-3.355 9.56-8.65 0-6-3.46-9.155-9.258-9.155zm-11.19 46.701c-1.325 1.625-2.645 3.353-2.645 5.39 0 4.067 5.186 5.291 12.31 5.291 5.9 0 13.938-.414 13.938-5.9 0-3.261-3.867-3.462-8.753-3.768l-14.85-1.013zm30.113-46.394c1.828 2.34 3.764 5.597 3.764 10.276 0 11.292-8.851 17.904-21.667 17.904-3.259 0-6.209-.406-8.038-.914l-3.359 5.39 9.969.61c17.602 1.122 27.975 1.632 27.975 15.157 0 11.702-10.272 18.311-27.975 18.311-18.413 0-25.433-4.68-25.433-12.716 0-4.578 2.035-7.015 5.596-10.378-3.358-1.419-4.476-3.961-4.476-6.71 0-2.24 1.118-4.273 2.952-6.208 1.83-1.93 3.864-3.865 6.306-6.103-4.984-2.442-8.75-7.732-8.75-15.262 0-11.697 7.733-19.731 23.295-19.731 4.376 0 7.022.402 9.362 1.017h19.84v8.644l-9.361.713zM199.166 19.034c-5.8 0-9.157-3.36-9.157-9.161 0-5.793 3.356-8.95 9.157-8.95 5.9 0 9.258 3.157 9.258 8.95 0 5.801-3.357 9.161-9.258 9.161zM186.04 80.171v-8.033l5.19-.71c1.425-.205 1.627-.509 1.627-2.038V39.48c0-1.116-.304-1.832-1.325-2.134l-5.492-1.935 1.118-8.238h21.061V69.39c0 1.63.098 1.833 1.629 2.039l5.188.71v8.032H186.04zM255.267 76.227c-4.376 2.135-10.785 4.068-16.586 4.068-12.106 0-16.682-4.878-16.682-16.38V37.264c0-.61 0-1.017-.817-1.017h-7.12V27.19c8.955-1.02 12.513-5.496 13.632-16.585h9.666v14.45c0 .71 0 1.017.815 1.017h14.343v10.173H237.36v24.313c0 6.002 1.426 8.34 6.917 8.34 2.852 0 5.799-.71 8.24-1.626l2.75 8.954" fill="#2F2707"/><path d="M104.529 49.53L58.013 3.017a6.86 6.86 0 0 0-9.703 0l-9.659 9.66 12.253 12.252a8.145 8.145 0 0 1 8.383 1.953 8.157 8.157 0 0 1 1.936 8.434L73.03 47.125c2.857-.984 6.154-.347 8.435 1.938a8.161 8.161 0 0 1 0 11.545 8.164 8.164 0 0 1-13.324-8.88L57.129 40.716l-.001 28.98a8.248 8.248 0 0 1 2.159 1.544 8.164 8.164 0 0 1 0 11.547c-3.19 3.19-8.36 3.19-11.545 0a8.164 8.164 0 0 1 2.672-13.328v-29.25a8.064 8.064 0 0 1-2.672-1.782c-2.416-2.413-2.997-5.958-1.759-8.925l-12.078-12.08L2.011 49.314a6.863 6.863 0 0 0 0 9.706l46.516 46.514a6.862 6.862 0 0 0 9.703 0l46.299-46.297a6.866 6.866 0 0 0 0-9.707" fill="#DE4C36"/></svg>
\ No newline at end of file
client/js/app.js
View file @ 1658fcbf
...@@ -13,8 +13,7 @@ import { ApolloClient } from 'apollo-client' ...@@ -13,8 +13,7 @@ import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http' import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory' import { InMemoryCache } from 'apollo-cache-inmemory'
import store from './store' import store from './store'
import icons from '../svg/nc-icons.svg' import icons from '../svg/icons.svg'
// ==================================== // ====================================
// Load Modules // Load Modules
// ==================================== // ====================================
......
client/js/app.old.js deleted 100644 → 0
View file @ 98d31114
'use strict'
/* global $, siteConfig */
/* eslint-disable no-new */
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueClipboards from 'vue-clipboards'
import VueLodash from 'vue-lodash'
import store from './store'
import i18next from 'i18next'
import i18nextXHR from 'i18next-xhr-backend'
import VueI18Next from '@panter/vue-i18next'
import 'jquery-contextmenu'
import 'jquery-simple-upload'
import 'jquery-smooth-scroll'
import 'jquery-sticky'
// ====================================
// Load Helpers
// ====================================
import helpers from './helpers'
import _ from './helpers/lodash'
// ====================================
// Load Vue Components
// ====================================
import alertComponent from './components/alert.vue'
import anchorComponent from './components/anchor.vue'
import colorPickerComponent from './components/color-picker.vue'
import editorCodeblockComponent from './components/editor-codeblock.vue'
import editorFileComponent from './components/editor-file.vue'
import editorVideoComponent from './components/editor-video.vue'
import historyComponent from './components/history.vue'
import loadingSpinnerComponent from './components/loading-spinner.vue'
import modalCreatePageComponent from './components/modal-create-page.vue'
import modalCreateUserComponent from './components/modal-create-user.vue'
import modalDeleteUserComponent from './components/modal-delete-user.vue'
import modalDiscardPageComponent from './components/modal-discard-page.vue'
import modalMovePageComponent from './components/modal-move-page.vue'
import modalProfile2faComponent from './components/modal-profile-2fa.vue'
import modalUpgradeSystemComponent from './components/modal-upgrade-system.vue'
import pageLoaderComponent from './components/page-loader.vue'
import searchComponent from './components/search.vue'
import toggleComponent from './components/toggle.vue'
import treeComponent from './components/tree.vue'
import adminEditUserComponent from './pages/admin-edit-user.component.js'
import adminProfileComponent from './pages/admin-profile.component.js'
import adminSettingsComponent from './pages/admin-settings.component.js'
import adminThemeComponent from './pages/admin-theme.component.js'
import contentViewComponent from './pages/content-view.component.js'
import editorComponent from './components/editor.component.js'
import sourceViewComponent from './pages/source-view.component.js'
// ====================================
// Initialize Vue Modules
// ====================================
Vue.use(VueResource)
Vue.use(VueClipboards)
Vue.use(VueI18Next)
Vue.use(VueLodash, _)
Vue.use(helpers)
// ====================================
// Register Vue Components
// ====================================
Vue.component('alert', alertComponent)
Vue.component('adminEditUser', adminEditUserComponent)
Vue.component('adminProfile', adminProfileComponent)
Vue.component('adminSettings', adminSettingsComponent)
Vue.component('adminTheme', adminThemeComponent)
Vue.component('anchor', anchorComponent)
Vue.component('colorPicker', colorPickerComponent)
Vue.component('contentView', contentViewComponent)
Vue.component('editor', editorComponent)
Vue.component('editorCodeblock', editorCodeblockComponent)
Vue.component('editorFile', editorFileComponent)
Vue.component('editorVideo', editorVideoComponent)
Vue.component('history', historyComponent)
Vue.component('loadingSpinner', loadingSpinnerComponent)
Vue.component('modalCreatePage', modalCreatePageComponent)
Vue.component('modalCreateUser', modalCreateUserComponent)
Vue.component('modalDeleteUser', modalDeleteUserComponent)
Vue.component('modalDiscardPage', modalDiscardPageComponent)
Vue.component('modalMovePage', modalMovePageComponent)
Vue.component('modalProfile2fa', modalProfile2faComponent)
Vue.component('modalUpgradeSystem', modalUpgradeSystemComponent)
Vue.component('pageLoader', pageLoaderComponent)
Vue.component('search', searchComponent)
Vue.component('sourceView', sourceViewComponent)
Vue.component('toggle', toggleComponent)
Vue.component('tree', treeComponent)
// ====================================
// Load Localization strings
// ====================================
i18next
.use(i18nextXHR)
.init({
backend: {
loadPath: siteConfig.path + '/js/i18n/{{lng}}.json'
},
lng: siteConfig.lang,
fallbackLng: siteConfig.lang
})
$(() => {
// ====================================
// Notifications
// ====================================
$(window).bind('beforeunload', () => {
store.dispatch('startLoading')
})
$(document).ajaxSend(() => {
store.dispatch('startLoading')
}).ajaxComplete(() => {
store.dispatch('stopLoading')
})
// ====================================
// Bootstrap Vue
// ====================================
const i18n = new VueI18Next(i18next)
if (document.querySelector('#root')) {
window.wikijs = new Vue({
mixins: [helpers],
components: {},
store,
i18n,
el: '#root',
methods: {
changeTheme(opts) {
this.$el.className = `has-stickynav is-primary-${opts.primary} is-alternate-${opts.alt}`
this.$refs.header.className = `nav is-${opts.primary}`
this.$refs.footer.className = `footer is-${opts.footer}`
}
},
mounted() {
$('a:not(.toc-anchor)').smoothScroll({ speed: 500, offset: -50 })
$('#header').sticky({ topSpacing: 0 })
$('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
}
})
}
})
client/scss/base/icons.scss
View file @ 1658fcbf
...@@ -13,24 +13,11 @@ ...@@ -13,24 +13,11 @@
fill: none; fill: none;
} }
&.is-16 { @each $size in 16,18,20,24,48,64,96,128 {
width: 16px; &.is-#{$size} {
height: 16px; width: #{$size}px;
height: #{$size}px;
} }
&.is-18 {
width: 18px;
height: 18px;
}
&.is-20 {
width: 20px;
height: 20px;
}
&.is-24 {
width: 24px;
height: 24px;
} }
&.has-right-pad { &.has-right-pad {
......
client/scss/components/config-manager.scss
View file @ 1658fcbf
.config-manager { .config-manager {
background-image: linear-gradient(to right, mc('indigo', '400'), mc('indigo', '600')); background-image: linear-gradient(to right, mc('indigo', '400'), mc('indigo', '600'));
background-repeat: no-repeat;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
padding-top: 1rem; padding-top: 1rem;
...@@ -22,6 +23,10 @@ ...@@ -22,6 +23,10 @@
border-bottom: 1px solid mc('indigo', '50'); border-bottom: 1px solid mc('indigo', '50');
margin-bottom: 1rem; margin-bottom: 1rem;
img {
max-height: 100px;
}
h2 { h2 {
margin: 0; margin: 0;
color: mc('indigo', '700'); color: mc('indigo', '700');
...@@ -30,6 +35,27 @@ ...@@ -30,6 +35,27 @@
} }
.is-logo {
text-align: center;
padding: .5rem 0 1.5rem 0;
border-bottom: 1px solid mc('indigo', '50');
margin-bottom: 1rem;
display: flex;
justify-content: center;
align-items: center;
img {
max-height: 64px;
}
h4 {
font-size: 1.2rem;
font-weight: 600;
margin-left: 1.5rem;
color: mc('grey', '700');
}
}
i.icon-loader { i.icon-loader {
display: inline-block; display: inline-block;
color: mc('indigo', '500') color: mc('indigo', '500')
......
server/configure.js
View file @ 1658fcbf
...@@ -77,10 +77,10 @@ module.exports = () => { ...@@ -77,10 +77,10 @@ module.exports = () => {
Promise.mapSeries([ Promise.mapSeries([
() => { () => {
const semver = require('semver') const semver = require('semver')
if (!semver.satisfies(semver.clean(process.version), '>=8.8.1')) { if (!semver.satisfies(semver.clean(process.version), '>=8.9.0')) {
throw new Error('Node.js version is too old. Minimum is 8.8.1.') throw new Error('Node.js version is too old. Minimum is 8.9.0.')
} }
return 'Node.js ' + process.version + ' detected. Minimum is 8.8.1.' return 'Node.js ' + process.version + ' detected. Minimum is 8.9.0.'
}, },
() => { () => {
return Promise.try(() => { return Promise.try(() => {
......
server/views/configure/index.pug
View file @ 1658fcbf
...@@ -19,7 +19,7 @@ block body ...@@ -19,7 +19,7 @@ block body
i(v-if='loading') i(v-if='loading')
.panel-content.is-text .panel-content.is-text
.welcome .welcome
img(src='/images/logo.png', alt='Wiki.js') img(src='svg/logo-wikijs.svg', alt='Wiki.js Logo')
h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
p This installation wizard will guide you through the steps needed to get your wiki up and running in no time! p This installation wizard will guide you through the steps needed to get your wiki up and running in no time!
p Detailed information about installation and usage can be found on the #[a(href='https://wiki.requarks.io/docs') official documentation site]. #[br] Should you have any question or would like to report something that doesn't look right, feel free to create a new issue on the #[a(href='https://github.com/Requarks/wiki/issues') GitHub project]. p Detailed information about installation and usage can be found on the #[a(href='https://wiki.requarks.io/docs') official documentation site]. #[br] Should you have any question or would like to report something that doesn't look right, feel free to create a new issue on the #[a(href='https://github.com/Requarks/wiki/issues') GitHub project].
...@@ -48,9 +48,12 @@ block body ...@@ -48,9 +48,12 @@ block body
template(v-else-if='state === "syscheck"') template(v-else-if='state === "syscheck"')
.panel .panel
h2.panel-title.is-featured h2.panel-title.is-featured
span System Check span Wiki.js
i(v-if='loading') i(v-if='loading')
.panel-content.is-text .panel-content.is-text
.is-logo
svg.icons.is-64: use(xlink:href='#nc-metrics')
h4 System Check
p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#nc-ms-dots')] Checking your system for compatibility... p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#nc-ms-dots')] Checking your system for compatibility...
p(v-if='!loading && syscheck.ok') p(v-if='!loading && syscheck.ok')
ul ul
...@@ -73,10 +76,13 @@ block body ...@@ -73,10 +76,13 @@ block body
template(v-else-if='state === "general"') template(v-else-if='state === "general"')
.panel .panel
h2.panel-title.is-featured h2.panel-title.is-featured
span General span Wiki.js
i(v-if='loading') i(v-if='loading')
.panel-content.form-sections .panel-content.form-sections
section section
.is-logo
svg.icons.is-64: use(xlink:href='#nc-butterfly')
h4 General Information
p.control.is-fullwidth p.control.is-fullwidth
label.label Site Title label.label Site Title
input(type='text', placeholder='e.g. Wiki', v-model='conf.title', data-vv-scope='general', name='ipt-title', v-validate='{ required: true, min: 2 }') input(type='text', placeholder='e.g. Wiki', v-model='conf.title', data-vv-scope='general', name='ipt-title', v-validate='{ required: true, min: 2 }')
...@@ -84,9 +90,11 @@ block body ...@@ -84,9 +90,11 @@ block body
section.columns section.columns
.column.is-half .column.is-half
p.control p.control
label.label Port label.label Site UI Language
input(type='text', placeholder='e.g. 80', v-model.number='conf.port', data-vv-scope='general', name='ipt-port', v-validate='{ required: true }') select(v-model='conf.lang')
span.desc The port on which Wiki.js will listen to. Usually port 80 if connecting directly, or a random port (e.g. 3000) if using a web server in front of it. Set #[strong $(PORT)] to use the PORT environment variable. each lg in data.langs
option(value=lg.id)= lg.name
span.desc The language in which navigation, help and other UI elements will be displayed.
.column.is-half .column.is-half
p.control.is-fullwidth p.control.is-fullwidth
label.label Site Relative Path label.label Site Relative Path
...@@ -95,11 +103,9 @@ block body ...@@ -95,11 +103,9 @@ block body
section.columns section.columns
.column.is-half .column.is-half
p.control p.control
label.label Site UI Language label.label Server Port
select(v-model='conf.lang') input(type='text', placeholder='e.g. 80', v-model.number='conf.port', data-vv-scope='general', name='ipt-port', v-validate='{ required: true }')
each lg in data.langs span.desc The port on which Wiki.js will listen to. Usually port 80 if connecting directly, or a random port (e.g. 3000) if using a web server in front of it. Set #[strong $(PORT)] to use the PORT environment variable.
option(value=lg.id)= lg.name
span.desc The language in which navigation, help and other UI elements will be displayed.
.column.is-half .column.is-half
p.control.is-fullwidth p.control.is-fullwidth
input#ipt-public(type='checkbox', v-model='conf.public', data-vv-scope='general', name='ipt-public') input#ipt-public(type='checkbox', v-model='conf.public', data-vv-scope='general', name='ipt-public')
...@@ -107,7 +113,7 @@ block body ...@@ -107,7 +113,7 @@ block body
span.desc Should the site be accessible (read only) without login. span.desc Should the site be accessible (read only) without login.
section section
p.control.is-fullwidth p.control.is-fullwidth
label.label Local Repository Path label.label Local Server Repository Path
input(type='text', placeholder='e.g. ./repo', v-model='conf.pathRepo', data-vv-scope='general', name='ipt-repopath', v-validate='{ required: true, min: 2 }') input(type='text', placeholder='e.g. ./repo', v-model='conf.pathRepo', data-vv-scope='general', name='ipt-repopath', v-validate='{ required: true, min: 2 }')
span.desc The path where the local git repository will be created, used to store content in markdown files and uploads.#[br] #[strong It is recommended to leave the default value]. span.desc The path where the local git repository will be created, used to store content in markdown files and uploads.#[br] #[strong It is recommended to leave the default value].
.panel-footer .panel-footer
...@@ -122,9 +128,12 @@ block body ...@@ -122,9 +128,12 @@ block body
template(v-else-if='state === "considerations"') template(v-else-if='state === "considerations"')
.panel .panel
h2.panel-title.is-featured h2.panel-title.is-featured
span Important Considerations span Wiki.js
i(v-if='loading') i(v-if='loading')
.panel-content.is-text .panel-content.is-text
.is-logo
svg.icons.is-64: use(xlink:href='#nc-radar')
h4 Important Considerations
h3 Is Wiki.js going to be behind a web server (e.g. nginx / apache / IIS) or proxy? h3 Is Wiki.js going to be behind a web server (e.g. nginx / apache / IIS) or proxy?
p p
ul ul
...@@ -149,9 +158,12 @@ block body ...@@ -149,9 +158,12 @@ block body
template(v-else-if='state === "git"') template(v-else-if='state === "git"')
.panel .panel
h2.panel-title.is-featured h2.panel-title.is-featured
span Git Repository span Wiki.js
i(v-if='loading') i(v-if='loading')
.panel-content.is-text .panel-content.is-text
.is-logo
img(src='svg/logo-git.svg', alt='Git Logo')
h4 Git Repository
p Wiki.js stores article content and uploads locally on disk. All content is then regularly kept in sync with a remote git repository. This acts a backup protection and provides history / revert features. While optional, it is <strong>HIGHLY</strong> recommended to setup the remote git repository connection. p Wiki.js stores article content and uploads locally on disk. All content is then regularly kept in sync with a remote git repository. This acts a backup protection and provides history / revert features. While optional, it is <strong>HIGHLY</strong> recommended to setup the remote git repository connection.
.panel-content.form-sections .panel-content.form-sections
section.columns section.columns
......
tools/fuse_tasks.js
View file @ 1658fcbf
...@@ -68,5 +68,12 @@ module.exports = Promise.mapSeries([ ...@@ -68,5 +68,12 @@ module.exports = Promise.mapSeries([
() => { () => {
console.info(colors.white(' └── ') + colors.green('Clearing fuse-box cache...')) console.info(colors.white(' └── ') + colors.green('Clearing fuse-box cache...'))
return fs.emptyDirAsync('./.fusebox') return fs.emptyDirAsync('./.fusebox')
},
/**
* Delete Test Results
*/
() => {
console.info(colors.white(' └── ') + colors.green('Clearing test results...'))
return fs.remove('./test_results')
} }
], f => { return f() }) ], f => { return f() })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment