docs: Making playground examples clickable

docs/assets/css/playground.css

@@ -33,3 +33,27 @@
 		}
 	}
 }
+
+.playground-examples {
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		line-height: calc(var(--line-height) * 1.5);
+
+		> li {
+			display: inline;
+			white-space: nowrap;
+
+			> code {
+				padding: 5px 10px;
+
+				&:hover {
+					background: #aaa;
+					cursor: pointer;
+				}
+			}
+		}
+	}
+}

docs/assets/js/playground/base.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import ValueLoader from '../value-loader';
+
+export default class Playground extends React.Component {
+
+	constructor(defaultValue) {
+		super();
+
+		this.valueLoader = new ValueLoader({
+			loader: this.loadValue.bind(this),
+			idleTime: 100,
+			maxTime: 1000
+		});
+
+		this.valueLoader.on('data', this.onData.bind(this));
+
+		this.state = {
+			value: defaultValue || '',
+			data: null
+		};
+		this.updateValue = this.updateValue.bind(this);
+
+		this.valueLoader.value = this.state.value;
+	}
+
+	render() {
+		return <div className="playground">
+			<div className="playground__editor">
+				<input type="text" value={ this.state.value } onChange={ this.updateValue } />
+			</div>
+
+			{ this.renderData(this.state.data) }
+		</div>
+	}
+
+	updateValue(e) {
+		const value = e.target.value;
+		this.setState({ value: value });
+		this.valueLoader.value = value;
+	}
+
+	loadValue(v) {
+	}
+
+	onData(v) {
+		this.setState({ data: v });
+	}
+
+	renderData() {
+
+	}
+
+	componentDidMount() {
+		this.listener = e => {
+			console.log(e.target.name);
+			if(e.target.tagName === 'CODE' && withinExamples(e.target)) {
+				const value = e.target.textContent;
+				this.setState({ value: value });
+				this.valueLoader.value = value;
+			}
+		};
+		document.addEventListener('click', this.listener);
+	}
+
+	componentWillUnmount() {
+		document.removeEventListener('click', this.listener);
+	}
+}
+
+function withinExamples(el) {
+	while(el) {
+		if(el.classList.contains('playground-examples')) return true;
+
+		el = el.parentNode;
+	}
+
+	return false;
+}

docs/assets/js/playground/value.js

@@ -1,72 +1,33 @@
 import React from 'react';
-import ValueLoader from '../value-loader';
+import BasePlayground from './base';
 
-const en = require('ecolect/language/en');
+import en  from 'ecolect/language/en';
 
-export default class ValuePlayground extends React.Component {
+export default class ValuePlayground extends BasePlayground {
 
 	constructor(value, defaultValue) {
-		super();
-
-		console.log(en)
+		super(defaultValue);
 
 		this.value = value;
-		this.valueMatcher = value.matcher(en.default || en);
-		this.valueLoader = new ValueLoader({
-			loader: this.loadValue.bind(this),
-			idleTime: 100,
-			maxTime: 1000
-		});
-
-		this.valueLoader.on('data', this.onData.bind(this));
-
-		this.state = {
-			value: defaultValue || '',
-			data: null
-		};
-		this.updateValue = this.updateValue.bind(this);
-
-		this.valueLoader.value = this.state.value;
+		this.valueMatcher = value.matcher(en);
 	}
 
-	render() {
-		return <div className="playground">
-			<div className="playground__editor">
-				<input type="text" value={ this.state.value } onChange={ this.updateValue } />
-			</div>
-
-			<div className="playground__data">{ this.renderValue(this.state.data) }</div>
+	renderData() {
+		return <div className="playground__data">
+			<div className="playground__data__value">{ this.renderValue(this.state.data) }</div>
 
-			<div className="playground__js">
+			<div className="playground__data__js">
 				JavaScript value:
 				<pre>{ JSON.stringify(this.state.data, null, 2) }</pre>
 			</div>
 		</div>
 	}
 
-	updateValue(e) {
-		const value = e.target.value;
-		this.setState({ value: value });
-		this.valueLoader.value = value;
-	}
-
 	loadValue(v) {
 		return this.valueMatcher(v);
 	}
 
-	onData(v) {
-		this.setState({ data: v });
-	}
-
 	renderValue() {
 		return <div></div>;
 	}
-
-	renderExamples() {
-		const examples = this.getExamples(this.language.id) || [];
-
-		return <ul>
-			{ examples.map(e => <li>{ e }</li>) }
-		</ul>;
-	}
 }

docs/content/date-time/date.md

@@ -41,5 +41,22 @@ await result = matcher('today');
 * `tomorrow`
 * `yesterday`
 * `may 8th 2020`
+* `5/8 2020`
+* `2018-02-01`
+* `in 2 days`
+* `in 5 weeks`
+* `2 months ago`
+* `2 months from 2018-10-10`
+* `2 weeks before today`
+* `2m 1d`
+* `in 2 years`
+* `oct 10 in 2 years`
+* `this Saturday`
+* `first Sunday in Aug 2020`
+* `jun of 2002`
+* `this month in 2008`
+* `last month of 2018`
+* `end of September`
+* `start of August 2010`
 
 {% endcall %}

docs/content/phrases/custom.md

@@ -17,9 +17,10 @@ Custom values are supported and can be used to do things such as remote lookups.
 function matcher(encounter) {
 	const text = encounter.text();
 	if(encounter.partial) {
-		// Partial matching
+		// Partial matching, only implement if you want to support
 	} else {
 		// Full matching
+		encounter.match('matched value');
 	}
 }
 ```

docs/includes/helpers.njk

@@ -19,6 +19,10 @@
 
 {% macro examples(lang) %}
 
+<div class="playground-examples">
+
 {{ caller() }}
 
+</div>
+
 {% endmacro %}