Skip to content

Commit

Permalink
feat: headers badge (#540)
Browse files Browse the repository at this point in the history
  • Loading branch information
ulivz authored Jun 2, 2018
1 parent 4e7f3da commit c3696d2
Show file tree
Hide file tree
Showing 9 changed files with 68 additions and 16 deletions.
2 changes: 1 addition & 1 deletion docs/guide/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ export default {
}
```

## Import Code Snippets
## Import Code Snippets <Badge text="Experimental" type="warn"/> <Badge text="0.0.11+" type="tip"/>

You can import code snippets from existing files via following syntax:

Expand Down
2 changes: 2 additions & 0 deletions lib/app/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Vue from 'vue'
import Router from 'vue-router'
import Content from './Content'
import OutboundLink from '../default-theme/OutboundLink.vue'
import Badge from '../default-theme/Badge.vue'
import ClientOnly from './ClientOnly'
import dataMixin from './dataMixin'
import store from './store'
Expand Down Expand Up @@ -30,6 +31,7 @@ Vue.mixin(dataMixin(siteData))
// component for rendering markdown content and setting title etc.
Vue.component('Content', Content)
Vue.component('OutboundLink', OutboundLink)
Vue.component('Badge', Badge)
// component for client-only content
Vue.component('ClientOnly', ClientOnly)

Expand Down
30 changes: 30 additions & 0 deletions lib/default-theme/Badge.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script>
export default {
functional: true,
props: ['type', 'text'],
render (h, { props, slots }) {
return h('span', {
class: ['badge', props.type]
}, props.text || slots().default)
}
}
</script>

<style lang="stylus">
@import './styles/config.styl'
.badge
display inline-block
vertical-align top
font-size 14px
height 18px
line-height 18px
border-radius 9px
padding 0 5px
color white
margin-right 5px
&.tip
background-color #42b983
&.warning, &.warn
background-color darken(#ffe564, 35%)
</style>
1 change: 1 addition & 0 deletions lib/default-theme/styles/theme.styl
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'

html, body
padding 0
Expand Down
3 changes: 3 additions & 0 deletions lib/default-theme/styles/toc.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.table-of-contents
.badge
vertical-align middle
5 changes: 3 additions & 2 deletions lib/markdown/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ const emoji = require('markdown-it-emoji')
const anchor = require('markdown-it-anchor')
const toc = require('markdown-it-table-of-contents')
const _slugify = require('./slugify')
const parseHeaders = require('../util/parseHeaders')
const { parseHeaders, removeTailHtml } = require('../util/parseHeaders')
const { compose } = require('../util/shared')

module.exports = ({ markdown = {}} = {}) => {
// allow user config slugify
const slugify = markdown.slugify || _slugify
const slugify = markdown.slugify || compose(removeTailHtml, _slugify)

const md = require('markdown-it')({
html: true,
Expand Down
10 changes: 5 additions & 5 deletions lib/util/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const parseHeaders = require('./parseHeaders')
const { deeplyParseHeaders } = require('./parseHeaders')

exports.normalizeHeadTag = function (tag) {
if (typeof tag === 'string') {
Expand Down Expand Up @@ -32,11 +32,11 @@ exports.inferTitle = function (frontmatter) {
return 'Home'
}
if (frontmatter.data.title) {
return parseHeaders(frontmatter.data.title)
return deeplyParseHeaders(frontmatter.data.title)
}
const match = frontmatter.content.trim().match(/^#+\s+(.*)/)
if (match) {
return parseHeaders(match[1])
return deeplyParseHeaders(match[1])
}
}

Expand Down Expand Up @@ -68,11 +68,11 @@ exports.extractHeaders = function (content, include = [], md) {
const res = []
tokens.forEach((t, i) => {
if (t.type === 'heading_open' && include.includes(t.tag)) {
const title = parseHeaders(tokens[i + 1].content)
const title = tokens[i + 1].content
const slug = t.attrs.find(([name]) => name === 'id')[1]
res.push({
level: parseInt(t.tag.slice(1), 10),
title,
title: deeplyParseHeaders(title),
slug: slug || md.slugify(title)
})
}
Expand Down
24 changes: 16 additions & 8 deletions lib/util/parseHeaders.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const { compose } = require('./shared')

const parseEmojis = str => {
const emojiData = require('markdown-it-emoji/lib/data/full.json')
return String(str).replace(/:(.+?):/g, (placeholder, key) => emojiData[key] || placeholder)
Expand All @@ -17,13 +19,19 @@ const removeMarkdownToken = str => String(str)
.replace(/\*(.*)\*/, '$1') // *
.replace(/_(.*)_/, '$1') // _

// put here to avoid circular references
const compose = (...processors) => {
if (processors.length === 0) return input => input
if (processors.length === 1) return processors[0]
return processors.reduce((prev, next) => {
return (...args) => next(prev(...args))
})
exports.removeTailHtml = (str) => {
return String(str).replace(/<.*>\s*$/g, '')
}

module.exports = compose(unescapeHtml, parseEmojis, removeMarkdownToken)
// only remove some md tokens.
exports.parseHeaders = compose(
unescapeHtml,
parseEmojis,
removeMarkdownToken
)

// also clean html in headers.
exports.deeplyParseHeaders = compose(
exports.parseHeaders,
exports.removeTailHtml
)
7 changes: 7 additions & 0 deletions lib/util/shared.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
exports.compose = (...processors) => {
if (processors.length === 0) return input => input
if (processors.length === 1) return processors[0]
return processors.reduce((prev, next) => {
return (...args) => next(prev(...args))
})
}

0 comments on commit c3696d2

Please sign in to comment.