liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: setup issues + webpack improvements

Browse Source
This commit is contained in:
Nicolas Giard
2018-09-29 15:39:09 -04:00
parent edd0c1a00a
commit ed7d3ab540
26 changed files with 2267 additions and 1295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/app.js → client/client-app.js
View File

@@ -1,5 +1,3 @@
'use strict'
/* global siteConfig */
import Vue from 'vue'
@@ -116,7 +114,6 @@ Vue.component('nav-footer', () => import(/* webpackMode: "eager" */ './component
Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
Vue.component('nav-sidebar', () => import(/* webpackMode: "eager" */ './components/common/nav-sidebar.vue'))
Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue'))
Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
Vue.component('page', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/app.vue'))
@@ -142,7 +139,7 @@ let bootstrap = () => {
el: '#root',
components: {},
mixins: [helpers],
provide: apolloProvider.provide(),
apolloProvider,
store,
i18n
})

30
client/client-setup.js Normal file
View File

@@ -0,0 +1,30 @@
/* eslint-disable import/first */
import Vue from 'vue'
import Vuetify from 'vuetify'
import VeeValidate from 'vee-validate'
import boot from './modules/boot'
/* eslint-enable import/first */
window.WIKI = null
window.boot = boot
Vue.use(Vuetify)
Vue.use(VeeValidate, { events: '' })
Vue.component('setup', () => import(/* webpackMode: "eager" */ './components/setup.vue'))
let bootstrap = () => {
window.WIKI = new Vue({
el: '#root'
})
// ====================================
// Load Icons
// ====================================
import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
document.body.insertAdjacentHTML('beforeend', icons.default)
})
}
window.boot.onDOMReady(bootstrap)

141
client/components/admin/admin-navigation.vue
View File

@@ -3,63 +3,77 @@
v-layout(row wrap)
v-flex(xs12)
.admin-header-icon: v-icon(size='80', color='grey lighten-2') near_me
.headline.primary--text {{$t('admin:navigation.title')}}
.subheading.grey--text {{$t('admin:navigation.subtitle')}}
.headline.primary--text {{$t('navigation.title')}}
.subheading.grey--text {{$t('navigation.subtitle')}}
v-container.pa-0.mt-3(fluid, grid-list-lg)
v-layout(row)
v-flex(style='flex: 0 0 350px;')
v-card
v-list.primary.py-2(dense, dark)
draggable
draggable(v-model='navTree')
template(v-for='navItem in navTree')
v-list-tile(v-if='navItem.kind === "link"', :class='(navItem === current) ? "blue" : ""', @click='selectItem(navItem)')
v-list-tile(
v-if='navItem.kind === "link"'
:key='navItem.id'
:class='(navItem === current) ? "blue" : ""'
@click='selectItem(navItem)'
)
v-list-tile-avatar: v-icon {{navItem.icon}}
v-list-tile-title {{navItem.label}}
.py-2.clickable(v-else-if='navItem.kind === "divider"', :class='(navItem === current) ? "blue" : ""', @click='selectItem(navItem)')
.py-2.clickable(
v-else-if='navItem.kind === "divider"'
:key='navItem.id'
:class='(navItem === current) ? "blue" : ""'
@click='selectItem(navItem)'
)
v-divider
v-subheader.pl-4.clickable(v-else-if='navItem.kind === "header"', :class='(navItem === current) ? "blue" : ""', @click='selectItem(navItem)') {{navItem.label}}
v-subheader.pl-4.clickable(
v-else-if='navItem.kind === "header"'
:key='navItem.id'
:class='(navItem === current) ? "blue" : ""'
@click='selectItem(navItem)'
) {{navItem.label}}
v-card-chin
v-spacer
v-menu(offset-y, bottom, min-width='200px')
v-btn(slot='activator', color='primary', depressed)
v-menu(offset-y, bottom, min-width='200px', style='flex: 1 1;')
v-btn(slot='activator', color='primary', depressed, block)
v-icon(left) add
span Add
span {{$t('common:actions.add')}}
v-list
v-list-tile(@click='addItem("link")')
v-list-tile-avatar: v-icon link
v-list-tile-title Link
v-list-tile-title {{$t('navigation.link')}}
v-list-tile(@click='addItem("header")')
v-list-tile-avatar: v-icon title
v-list-tile-title Header
v-list-tile-title {{$t('navigation.header')}}
v-list-tile(@click='addItem("divider")')
v-list-tile-avatar: v-icon power_input
v-list-tile-title Divider
v-btn.ml-2(color='success', depressed)
v-list-tile-title {{$t('navigation.divider')}}
v-btn.ml-2(color='success', depressed, block, @click='save')
v-icon(left) check
span Save
span {{$t('common:actions.save')}}
v-flex
v-card(v-if='current.kind === "link"')
v-toolbar(dense, color='blue', flat, dark)
.subheading Edit Link
.subheading {{$t('navigation.edit', { kind: $t('navigation.link') })}}
v-card-text
v-text-field(
outline
background-color='grey lighten-2'
label='Label'
:label='$t("navigation.label")'
prepend-icon='title'
v-model='current.label'
)
v-text-field(
outline
background-color='grey lighten-2'
label='Icon'
:label='$t("navigation.icon")'
prepend-icon='casino'
v-model='current.icon'
)
v-select(
outline
background-color='grey lighten-2'
label='Target Type'
:label='$t("navigation.targetType")'
prepend-icon='near_me'
:items='navTypes'
v-model='current.targetType'
@@ -68,41 +82,47 @@
v-if='current.targetType === "external"'
outline
background-color='grey lighten-2'
label='Target'
:label='$t("navigation.target")'
prepend-icon='near_me'
v-model='current.target'
)
v-card-chin
v-spacer
v-btn(color='red', outline)
v-btn(color='red', outline, @click='deleteItem(current)')
v-icon(left) delete
span Delete Link
span {{$t('navigation.delete', { kind: $t('navigation.link') })}}
v-card(v-else-if='current.kind === "header"')
v-toolbar(dense, color='blue', flat, dark)
.subheading Edit Header
.subheading {{$t('navigation.edit', { kind: $t('navigation.header') })}}
v-card-text
v-text-field(
outline
background-color='grey lighten-2'
label='Label'
:label='$t("navigation.label")'
prepend-icon='title'
v-model='current.label'
)
v-card-chin
v-spacer
v-btn(color='red', outline)
v-btn(color='red', outline, @click='deleteItem(current)')
v-icon(left) delete
span Delete Header
span {{$t('navigation.delete', { kind: $t('navigation.header') })}}
div(v-else-if='current.kind === "divider"')
v-btn.mt-0(color='red', outline)
v-btn.mt-0(color='red', outline, @click='deleteItem(current)')
v-icon(left) delete
span Delete Divider
span {{$t('navigation.delete', { kind: $t('navigation.divider') })}}
v-card(v-else)
v-card-text.grey--text Select a navigation item on the left.
v-card-text.grey--text {{$t('navigation.noSelectionText')}}
</template>
<script>
import _ from 'lodash'
import uuid from 'uuid/v4'
import treeSaveMutation from 'gql/admin/navigation/navigation-mutation-save-tree.gql'
import treeQuery from 'gql/admin/navigation/navigation-query-tree.gql'
import draggable from 'vuedraggable'
export default {
@@ -111,48 +131,77 @@ export default {
},
data() {
return {
navTypes: [
{ text: 'External Link', value: 'external' },
{ text: 'Home', value: 'home' },
{ text: 'Page', value: 'page' },
{ text: 'Search Query', value: 'search' }
],
navTree: [
{
kind: 'link',
label: 'Home',
icon: 'home',
targetType: 'home',
target: '/'
}
],
navTree: [],
current: {}
}
},
computed: {
navTypes() {
return [
{ text: this.$t('navigation.navType.external'), value: 'external' },
{ text: this.$t('navigation.navType.home'), value: 'home' },
{ text: this.$t('navigation.navType.page'), value: 'page' },
{ text: this.$t('navigation.navType.searchQuery'), value: 'search' }
]
}
},
methods: {
addItem(kind) {
let newItem = {
id: uuid(),
kind
}
switch (kind) {
case 'link':
newItem = {
...newItem,
label: 'Untitled Link',
label: this.$t('navigation.untitled', { kind: this.$t(`navigation.link`) }),
icon: 'chevron_right',
targetType: 'home',
target: '/'
}
break
case 'header':
newItem.label = 'Untitled Header'
newItem.label = this.$t('navigation.untitled', { kind: this.$t(`navigation.header`) })
break
}
this.navTree.push(newItem)
this.current = newItem
},
deleteItem(item) {
this.navTree = _.pull(this.navTree, item)
this.current = {}
},
selectItem(item) {
this.current = item
},
async save() {
this.$store.commit(`loadingStart`, 'admin-navigation-save')
try {
await this.$apollo.mutate({
mutation: treeSaveMutation,
variables: {
tree: this.navTree
}
})
} catch (err) {
this.$store.commit('showNotification', {
message: this.$t('navigation.saveSuccess'),
style: 'success',
icon: 'check'
})
}
this.$store.commit(`loadingStop`, 'admin-navigation-save')
}
},
apollo: {
navTree: {
query: treeQuery,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.navigation.tree),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-navigation-tree')
}
}
}
}

2
client/components/login.vue
View File

@@ -19,7 +19,7 @@
ref='iptPassword'
v-model='password'
:append-icon='hidePassword ? "visibility" : "visibility_off"'
:append-icon-cb='() => (hidePassword = !hidePassword)'
@click:append='() => (hidePassword = !hidePassword)'
:type='hidePassword ? "password" : "text"'
:placeholder='$t("auth:fields.password")'
@keyup.enter='login'

55
client/components/setup.vue
View File

@@ -5,7 +5,7 @@
v-toolbar-title
span.subheading Wiki.js Setup
v-spacer
v-content
v-content.white
v-progress-linear.ma-0(indeterminate, height='4', :active='loading')
v-stepper.elevation-0(v-model='state')
v-stepper-header
@@ -33,17 +33,19 @@
v-stepper-content(step='1')
v-card.text-xs-center.pa-3(flat)
img(src='/svg/logo-wikijs.svg', alt='Wiki.js Logo', style='width: 300px;')
v-container
.text-xs-center
.body-2.py-2 This installation wizard will guide you through the steps needed to get your wiki up and running in no time!
.body-1
| 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].
.body-1.pt-3
v-icon.mr-2 system_update
span You are about to install Wiki.js #[strong {{wikiVersion}}].
v-divider.mt-3
v-form
.body-1 Detailed information about installation and usage can be found on the #[a(href='https://wiki.requarks.io/docs') official documentation site].
.body-1 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].
.body-1.py-3
v-icon.mr-2(color='indigo') open_in_browser
span.indigo--text You are about to install Wiki.js #[strong {{wikiVersion}}].
v-btn.mt-4(color='primary', @click='proceedToAdmin', :disabled='loading', large)
span Start
v-icon(right) arrow_forward
v-divider.my-5
.body-2 Additional Setup Options
div(style='display:inline-block;')
v-checkbox(
color='primary',
v-model='conf.telemetry',
@@ -58,9 +60,6 @@
persistent-hint,
hint='Check this box if you are upgrading from Wiki.js 1.x and wish to migrate your existing data.'
)
v-divider
.pt-3.text-xs-center
v-btn(color='primary', @click='proceedToAdmin', :disabled='loading') Start
//- ==============================================
//- ADMINISTRATOR ACCOUNT
@@ -81,11 +80,13 @@
v-model='conf.adminEmail',
label='Administrator Email',
hint='The email address of the administrator account',
persistent-hint
v-validate='{ required: true, email: true }',
data-vv-name='adminEmail',
data-vv-as='Administrator Email',
data-vv-scope='admin',
:error-messages='errors.collect(`adminEmail`)'
ref='adminEmailInput'
)
v-flex.pr-3(xs6)
v-text-field(
@@ -96,9 +97,10 @@
v-model='conf.adminPassword',
label='Password',
:append-icon="pwdMode ? 'visibility' : 'visibility_off'"
:append-icon-cb="() => (pwdMode = !pwdMode)"
@click:append="() => (pwdMode = !pwdMode)"
:type="pwdMode ? 'password' : 'text'"
hint='At least 8 characters long.',
persistent-hint
v-validate='{ required: true, min: 8 }',
data-vv-name='adminPassword',
data-vv-as='Password',
@@ -114,14 +116,16 @@
v-model='conf.adminPasswordConfirm',
label='Confirm Password',
:append-icon="pwdConfirmMode ? 'visibility' : 'visibility_off'"
:append-icon-cb="() => (pwdConfirmMode = !pwdConfirmMode)"
@click:append="() => (pwdConfirmMode = !pwdConfirmMode)"
:type="pwdConfirmMode ? 'password' : 'text'"
hint='Verify your password again.',
persistent-hint
v-validate='{ required: true, min: 8 }',
data-vv-name='adminPasswordConfirm',
data-vv-as='Confirm Password',
data-vv-scope='admin',
:error-messages='errors.collect(`adminPasswordConfirm`)'
@keyup.enter='proceedToUpgrade'
)
.pt-3.text-xs-center
v-btn(@click='proceedToWelcome', :disabled='loading') Back
@@ -194,9 +198,6 @@
</template>
<script>
/* global siteConfig */
import axios from 'axios'
import _ from 'lodash'
import { AtomSpinner } from 'epic-spinners'
@@ -251,6 +252,9 @@ export default {
}
this.state = 2
this.loading = false
_.delay(() => {
this.$refs.adminEmailInput.focus()
}, 400)
},
async proceedToUpgrade () {
if (this.state < 3) {
@@ -292,17 +296,6 @@ export default {
if (resp.data.ok === true) {
_.delay(() => {
self.final.ok = true
switch (resp.data.redirectPort) {
case 80:
self.final.redirectUrl = `http://${window.location.hostname}${resp.data.redirectPath}/login`
break
case 443:
self.final.redirectUrl = `https://${window.location.hostname}${resp.data.redirectPath}/login`
break
default:
self.final.redirectUrl = `http://${window.location.hostname}:${resp.data.redirectPort}${resp.data.redirectPath}/login`
break
}
self.loading = false
}, 5000)
} else {
@@ -317,7 +310,7 @@ export default {
}, 1000)
},
finish () {
window.location.assign(this.final.redirectUrl)
window.location.assign('/login')
}
}
}

12
client/graph/admin/navigation/navigation-mutation-save-tree.gql Normal file
View File

@@ -0,0 +1,12 @@
mutation ($tree: [NavigationItemInput]!) {
navigation{
updateTree(tree: $tree) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}

12
client/graph/admin/navigation/navigation-query-tree.gql Normal file
View File

@@ -0,0 +1,12 @@
{
navigation {
tree {
id
kind
label
icon
targetType
target
}
}
}

2
client/helpers/compatibility.js
View File

@@ -1,5 +1,3 @@
require('@babel/polyfill')
// =======================================
// Fetch polyfill
// =======================================

4
client/index.js → client/index-app.js
View File

@@ -1,9 +1,9 @@
'use strict'
require('@babel/polyfill')
require('vuetify/src/stylus/main.styl')
require('./scss/app.scss')
require('./themes/' + process.env.CURRENT_THEME + '/scss/app.scss')
require('./helpers/compatibility.js')
require('./app.js')
require('./client-app.js')
require('./themes/' + process.env.CURRENT_THEME + '/js/app.js')

7
client/index-setup.js Normal file
View File

@@ -0,0 +1,7 @@
require('@babel/polyfill')
require('vuetify/src/stylus/main.styl')
require('./scss/app.scss')
require('./helpers/compatibility.js')
require('./client-setup.js')