feat: rendering modules + admin rendering
This commit is contained in:
Nicolas Giard
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user