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

feat: rendering modules + admin rendering

Browse Source
This commit is contained in:
Nicolas Giard
2018-08-26 22:38:08 -04:00
parent db8e598e9a
commit 4cb9f3d9c6
26 changed files with 413 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
client/components/admin/admin-rendering.vue
View File

@@ -6,141 +6,45 @@
.subheading.grey--text Configure how content is rendered
v-layout.mt-3(row wrap)
v-flex(lg3 xs12)
v-card
v-toolbar(
color='primary'
dense
flat
dark
v-toolbar(
color='primary'
dense
flat
dark
)
v-icon.mr-2 line_weight
.subheading Pipeline
v-expansion-panel.adm-rendering-pipeline
v-expansion-panel-content(
hide-actions
v-for='core in cores'
:key='core.key'
)
v-icon.mr-2 line_weight
.subheading Pipeline
v-toolbar(
color='blue'
dense
dark
)
v-icon.mr-2 arrow_downward
.body-2 Markdown
v-spacer
v-btn(
icon
@click=''
v-toolbar(
slot='header'
color='blue'
dense
dark
flat
)
v-icon add
v-list(two-line, dense)
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') crop_free
v-list-tile-content
v-list-tile-title Core
v-list-tile-sub-title Basic Markdown parser
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') tag_faces
v-list-tile-content
v-list-tile-title Emoji
v-list-tile-sub-title Convert tags to emojis
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') list
v-list-tile-content
v-list-tile-title Task Lists
v-list-tile-sub-title Parse task lists to checkboxes
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') multiline_chart
v-list-tile-content
v-list-tile-title PlantUML
v-list-tile-sub-title Generate diagrams from PlantUML syntax
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') merge_type
v-list-tile-content
v-list-tile-title Mermaid
v-list-tile-sub-title Generate flowcharts from Mermaid syntax
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') functions
v-list-tile-content
v-list-tile-title Mathjax Pre-Processor
v-list-tile-sub-title Parse Mathjax content from Markdown
v-list-tile-avatar
v-icon(color='red', small) trip_origin
v-toolbar(
color='blue'
dense
dark
)
v-icon.mr-2 arrow_downward
.body-2 HTML
v-spacer
v-btn(
icon
@click=''
)
v-icon add
v-list(two-line, dense)
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') subscriptions
v-list-tile-content
v-list-tile-title Video Players
v-list-tile-sub-title Embed video players such as Youtube, Vimeo, etc.
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') subtitles
v-list-tile-content
v-list-tile-title Asciinema
v-list-tile-sub-title Embed asciinema players from compatible links
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') volume_up
v-list-tile-content
v-list-tile-title Audio Players
v-list-tile-sub-title Embed audio players for audio content
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') insert_comment
v-list-tile-content
v-list-tile-title Blockquotes
v-list-tile-sub-title Process styled blockquotes
v-list-tile-avatar
v-icon(color='green', small) lens
v-divider.my-0
v-list-tile(avatar)
v-list-tile-avatar
v-icon(color='grey') functions
v-list-tile-content
v-list-tile-title Mathjax Processor
v-list-tile-sub-title TeX/MathML Math Equations Parser
v-list-tile-avatar
v-icon(color='red', small) trip_origin
.body-2 {{core.input}}
v-icon.mx-2 arrow_forward
.caption {{core.output}}
v-list(two-line, dense)
v-list-tile(
avatar
v-for='rdr in core.children'
:key='rdr.key'
)
v-list-tile-avatar
v-icon(color='grey') {{rdr.icon}}
v-list-tile-content
v-list-tile-title {{rdr.title}}
v-list-tile-sub-title {{rdr.description}}
v-list-tile-avatar
v-icon(color='green', small, v-if='rdr.isEnabled') lens
v-icon(color='red', small, v-else) trip_origin
v-divider.my-0
v-flex(lg9 xs12)
v-card
@@ -201,16 +105,45 @@
</template>
<script>
import _ from 'lodash'
import renderersQuery from 'gql/admin/rendering/rendering-query-renderers.gql'
export default {
data() {
return {
linkify: true,
codeTheme: 'Light'
codeTheme: 'Light',
renderers: []
}
},
computed: {
cores() {
return _.filter(this.renderers, ['dependsOn', null]).map(core => {
core.children = _.concat([_.cloneDeep(core)], _.filter(this.renderers, ['dependsOn', core.key]))
return core
})
}
},
apollo: {
renderers: {
query: renderersQuery,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.rendering.renderers).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.parse(cfg.value)}))})),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-rendering-refresh')
}
}
}
}
</script>
<style lang='scss'>
.adm-rendering-pipeline {
border-top: 1px solid #FFF;
.v-expansion-panel__header {
padding: 0 0;
}
}
</style>

194
client/components/setup.vue
View File

@@ -14,22 +14,14 @@
small Wiki.js Installation Wizard
v-divider
v-stepper-step(step='2' :complete='state > 2')
| System Check
small Checking your system for compatibility
v-divider
v-stepper-step(step='3' :complete='state > 3')
| General Information
small Site Title, Language and Access
v-divider
v-stepper-step(step='4' :complete='state > 4')
| Administration Account
small Create the admin account
v-divider(v-if='this.conf.upgrade')
v-stepper-step(step='5' :complete='state > 5', v-if='this.conf.upgrade')
v-stepper-step(step='3' :complete='state > 3', v-if='this.conf.upgrade')
| Upgrade from Wiki.js 1.x
small Migrate your existing installation
v-divider
v-stepper-step(:step='this.conf.upgrade ? 6 : 5' :complete='this.conf.upgrade ? state > 5 : state > 6')
v-stepper-step(:step='this.conf.upgrade ? 4 : 3' :complete='this.conf.upgrade ? state > 3 : state > 4')
| Final Steps
small Finalizing your installation
@@ -68,126 +60,13 @@
)
v-divider
.pt-3.text-xs-center
v-btn(color='primary', @click='proceedToSyscheck', :disabled='loading') Start
//- ==============================================
//- SYSTEM CHECK
//- ==============================================
v-stepper-content(step='2')
v-card.text-xs-center(flat)
svg.icons.is-64: use(xlink:href='#nc-metrics')
.subheading System Check
v-container
v-layout(row, align-center, v-if='loading')
v-progress-circular(v-if='loading', indeterminate, color='blue')
.body-2.blue--text.ml-3 Checking your system for compatibility...
v-alert(type='success', outline, :value='!loading && syscheck.ok') Looks good! No issues so far.
v-alert(type='error', outline, :value='!loading && !syscheck.ok') {{ syscheck.error }}
v-list.mt-3(two-line, v-if='!loading && syscheck.ok', dense)
template(v-for='(rs, n) in syscheck.results')
v-divider(v-if='n > 0', inset)
v-list-tile
v-list-tile-avatar(color='green lighten-5')
v-icon(color='green') check
v-list-tile-content
v-list-tile-title {{rs.title}}
v-list-tile-sub-title {{rs.subtitle}}
v-divider
.pt-3.text-xs-center
v-btn(@click='proceedToWelcome', :disabled='loading') Back
v-btn(color='primary', @click='proceedToSyscheck', v-if='!loading && !syscheck.ok') Check Again
v-btn(color='red', dark, @click='proceedToGeneral', v-if='!loading && !syscheck.ok') Continue Anyway
v-btn(color='primary', @click='proceedToGeneral', v-if='loading || syscheck.ok', :disabled='loading') Continue
//- ==============================================
//- GENERAL
//- ==============================================
v-stepper-content(step='3')
v-card.text-xs-center(flat)
svg.icons.is-64: use(xlink:href='#nc-webpage')
.subheading General Information
v-form
v-container
v-layout(row, wrap)
v-flex(xs12, sm6).pr-3
v-text-field(
outline
background-color='grey lighten-2'
v-model='conf.title',
label='Site Title',
:counter='255',
persistent-hint,
hint='The site title will appear in the top left corner on every page and within the window title bar.',
v-validate='{ required: true, min: 2 }',
data-vv-name='siteTitle',
data-vv-as='Site Title',
data-vv-scope='general',
:error-messages='errors.collect(`siteTitle`)'
)
v-flex.pr-3(xs12, sm6)
v-text-field(
outline
background-color='grey lighten-2'
v-model='conf.port',
label='Server Port',
persistent-hint,
hint='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 $(PORT) to use the PORT environment variable.',
v-validate='{ required: true }',
data-vv-name='port',
data-vv-as='Port',
data-vv-scope='general',
:error-messages='errors.collect(`port`)'
)
v-layout(row, wrap).mt-3
v-flex(xs12, sm6).pr-3
v-text-field(
outline
background-color='grey lighten-2'
v-model='conf.pathContent',
label='Content Data Path',
persistent-hint,
hint='The path where content is stored (markdown files, uploads, etc.)',
v-validate='{ required: true, min: 2 }',
data-vv-name='pathContent',
data-vv-as='Content Data Path',
data-vv-scope='general',
:error-messages='errors.collect(`pathContent`)'
)
v-flex(xs12, sm6)
v-text-field(
outline
background-color='grey lighten-2'
v-model='conf.pathData',
label='Temporary Data Path',
persistent-hint,
hint='The path where temporary data is stored (cache, thumbnails, temporary upload files, etc.)',
v-validate='{ required: true, min: 2 }',
data-vv-name='pathData',
data-vv-as='Temporary Data Path',
data-vv-scope='general',
:error-messages='errors.collect(`pathData`)'
)
v-layout(row, wrap).mt-3
v-flex(xs12)
v-checkbox(
color='primary',
v-model='conf.public',
label='Public Access',
persistent-hint,
hint='Should the site be accessible (read only) without login.'
)
v-divider
.pt-3.text-xs-center
v-btn(@click='proceedToSyscheck', :disabled='loading') Back
v-btn(color='primary', @click='proceedToAdmin', :disabled='loading') Continue
v-btn(color='primary', @click='proceedToAdmin', :disabled='loading') Start
//- ==============================================
//- ADMINISTRATOR ACCOUNT
//- ==============================================
v-stepper-content(step='4')
v-stepper-content(step='2')
v-card.text-xs-center(flat)
svg.icons.is-64: use(xlink:href='#nc-man-black')
.subheading Administrator Account
@@ -245,14 +124,14 @@
:error-messages='errors.collect(`adminPasswordConfirm`)'
)
.pt-3.text-xs-center
v-btn(@click='proceedToGeneral', :disabled='loading') Back
v-btn(@click='proceedToWelcome', :disabled='loading') Back
v-btn(color='primary', @click='proceedToUpgrade', :disabled='loading') Continue
//- ==============================================
//- UPGRADE FROM 1.x
//- ==============================================
v-stepper-content(step='5', v-if='conf.upgrade')
v-stepper-content(step='3', v-if='conf.upgrade')
v-card.text-xs-center(flat)
svg.icons.is-64: use(xlink:href='#nc-spaceship')
.subheading Upgrade from Wiki.js 1.x
@@ -283,7 +162,7 @@
//- FINAL
//- ==============================================
v-stepper-content(:step='conf.upgrade ? 6 : 5')
v-stepper-content(:step='conf.upgrade ? 4 : 3')
v-card.text-xs-center(flat)
template(v-if='loading')
.mt-3(style='width: 64px; display:inline-block;')
@@ -340,11 +219,6 @@ export default {
return {
loading: false,
state: 1,
syscheck: {
ok: false,
error: '',
results: []
},
final: {
ok: false,
error: '',
@@ -354,13 +228,7 @@ export default {
adminEmail: '',
adminPassword: '',
adminPasswordConfirm: '',
lang: siteConfig.lang || 'en',
pathData: './data',
pathContent: './content',
port: siteConfig.port || 80,
public: (siteConfig.public === true),
telemetry: true,
title: siteConfig.title || 'Wiki',
upgrade: false,
upgMongo: 'mongodb://'
},
@@ -373,73 +241,43 @@ export default {
this.state = 1
this.loading = false
},
proceedToSyscheck () {
let self = this
this.state = 2
this.loading = true
this.syscheck = {
ok: false,
error: '',
results: []
}
_.delay(() => {
axios.post('/syscheck', self.conf).then(resp => {
if (resp.data.ok === true) {
self.syscheck.ok = true
self.syscheck.results = resp.data.results
} else {
self.syscheck.ok = false
self.syscheck.error = resp.data.error
}
self.loading = false
self.$nextTick()
}).catch(err => {
window.alert(err.message)
})
}, 1000)
},
proceedToGeneral () {
this.state = 3
this.loading = false
},
async proceedToAdmin () {
if (this.state < 4) {
if (this.state < 2) {
const validationSuccess = await this.$validator.validateAll('general')
if (!validationSuccess) {
this.state = 3
this.state = 1
return
}
}
this.state = 4
this.state = 2
this.loading = false
},
async proceedToUpgrade () {
if (this.state < 5) {
if (this.state < 3) {
const validationSuccess = await this.$validator.validateAll('admin')
if (!validationSuccess || this.conf.adminPassword !== this.conf.adminPasswordConfirm) {
this.state = 4
this.state = 2
return
}
}
if (this.conf.upgrade) {
this.state = 5
this.state = 3
this.loading = false
} else {
this.proceedToFinal()
}
},
async proceedToFinal () {
if (this.conf.upgrade && this.state < 6) {
if (this.conf.upgrade && this.state < 4) {
const validationSuccess = await this.$validator.validateAll('upgrade')
if (!validationSuccess) {
this.state = 5
this.state = 3
return
}
}
this.state = this.conf.upgrade ? 6 : 5
this.state = this.conf.upgrade ? 4 : 3
this.loading = true
this.final = {
ok: false,

12
client/graph/admin/rendering/rendering-mutation-save-renderers.gql Normal file
View File

@@ -0,0 +1,12 @@
mutation($renderers: [RendererInput]) {
rendering {
updateRenderers(renderers: $renderers) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}

18
client/graph/admin/rendering/rendering-query-renderers.gql Normal file
View File

@@ -0,0 +1,18 @@
{
rendering {
renderers {
isEnabled
key
title
description
icon
dependsOn
input
output
config {
key
value
}
}
}
}