index.njk

---
layout: layout.njk
---

<div id="app">
	<input type="search" placeholder="Suchen …" v-model="term" v-on:input="search">
	<div class="articlelist" v-if="results">
		<ul>
			<li v-for="result in results">
				<a :href="result.url"> {% raw %} <span class="number">#{{result.articleId}}</span> {{ result.title }}{% endraw %}</a>
			</li>
		</ul>
    </div>
    <div class="articlelist" v-else>
		    <ul id="index">
                {% for article in collections.articles %}
                    <li class="indexList"><a href="{{ article.url }}"><span class="number">#{{ article.data.id }}</span> {{ article.data.title }}</a></li>
                {% endfor %}
            </ul>
		</p>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
	el:'#app',
	data:{
		docs:null,
		idx:null,
		term:'',
		results:null
	},
	async created() {
		let result = await fetch('/index.json');
		docs = await result.json();
		this.idx = lunr(function () {
			this.ref('id');
			this.field('title');
			this.field('content');
            this.field('articleId');
			docs.forEach(function (doc, idx) {
				doc.id = idx;
				this.add(doc); 
			}, this);
		});
		this.docs = docs;
	},
	computed: {
		noResults() {
            // Show all the articles
			return this.results.length === 0;
		}
	},
	methods:{
		isInt(value) {
 			var x;
  			if (isNaN(value)) {
    			return false;
  			}
 			x = parseFloat(value);
  			return (x | 0) === x;
		},
		getResults(term) {
			if (this.isInt(term) == true) {
				console.log('int');
				return this.idx.search(term, {field: 'id'});
			} else {
				console.log('string');
				return this.idx.query(function(q) {
					q.term(term, {editDistance: 5, presence: 2})
				});
			}
		},
		search() {
			results = this.getResults(this.term);
			console.log('search', results);
			// we need to add title, url, articleID from ref
			results.forEach(r => {
				r.title = this.docs[r.ref].title;
				r.url = this.docs[r.ref].url;
                r.articleId = this.docs[r.ref].articleId;
			});
			this.results = results;
		}
	}
});
</script>