Commit b6161ddf authored by Manuel Tancoigne's avatar Manuel Tancoigne

Add support for shortcodes

parent 812140be
......@@ -7,6 +7,13 @@ const regexes = {
variableReplacement: variableName => new RegExp(`\\[~${variableName}\\]`),
}
const date = new Date()
const shortCodes = {
DATE_YEAR: date.getFullYear(),
DATE_MONTH: date.getMonth() + 1,
DATE_DAY: date.getDate(),
}
const emptyVariableContent = '________'
const parser = {
......@@ -124,6 +131,7 @@ const renderer = {
.renderConditionals()
.renderVariables()
.renderNumbers()
.renderShortCodes()
.removeDoubleLines()
.parsedSource
},
......@@ -215,6 +223,25 @@ const renderer = {
return this
},
renderShortCodes () {
const regex = /\[~~([A-Z_]+)\]/
const keys = Object.keys(shortCodes)
let matches
do {
matches = regex.exec(this.parsedSource)
if (matches) {
if (keys.indexOf(matches[1]) > -1) {
this.parsedSource = this.parsedSource.replace(regex, shortCodes[matches[1]])
} else {
this.parsedSource = this.parsedSource.replace(regex, `**[ERROR: ~~${matches[1]} is not a valid shortcode]**`)
}
}
} while (matches)
return this
},
renderBlock (text) {
let matches
......
......@@ -112,6 +112,22 @@
v-html="codeCondition('IF', 'SOME_BLOCK', `Some content${codeCondition('IF', 'OTHER_BLOCK', 'Some other content')}`)" />
<!-- eslint-enable vue/no-v-html -->
</section>
<section>
<h2>Sortcodes</h2>
<p>We have a small collection of shortcodes that can help in your journey into making templates:</p>
<ul>
<li><code>DATE_YEAR</code>: Current year</li>
<li><code>DATE_MONTH</code>: Current month</li>
<li><code>DATE_DAY</code>: Current day of the month</li>
</ul>
<p>To use shortcodes, use this format:</p>
<!-- eslint-disable vue/no-v-html -->
<pre v-html="codeShortCode('DATE_YEAR')" />
<!-- eslint-enable vue/no-v-html -->
</section>
</i-container>
</template>
......@@ -152,6 +168,8 @@ export default {
return this.codeElement('condition', `[[${typeTag} ${blockNameTag}]]${contentTag}[[${endTypeTag} ${blockNameTag}]]`)
},
codeNumber (code) { return this.codeElement('number', code) },
codeShortCodeName (name) { return this.codeElement('shortcode-name', name) },
codeShortCode (name) { return this.codeElement('shortcode', `[~~${this.codeShortCodeName(name)}]`) },
},
}
</script>
......@@ -213,5 +231,14 @@ export default {
$color: #436fce;
color: $color;
}
&-shortcode {
$color: #ce485b;
color: #ce485b;
&-name {
color: lighten($color, 30%)
}
}
}
</style>
......@@ -203,3 +203,16 @@ describe('Parser mixin - Numbering', () => {
expect(parser.render()).to.eq('1 1.1 Some content 2 2.1 Some content')
})
})
describe('Parser - Shortcodes', () => {
it('renders valid shortcodes', () => {
const source = '[~~DATE_YEAR]'
parser.parse(source)
expect(parser.render()).to.eq(`${(new Date()).getFullYear()}`)
})
it('renders an error for invalid shortcodes', () => {
const source = '[~~UNKNOWN]'
parser.parse(source)
expect(parser.render()).to.eq('**[ERROR: ~~UNKNOWN is not a valid shortcode]**')
})
})
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