Initial commit with working front page and partial search

src/main.js

@@ -0,0 +1,54 @@
+import './generated.css'
+
+import Alpine from 'alpinejs'
+
+window.Alpine = Alpine;
+
+
+Alpine.data('bookmeterList', () => ({
+    items: [],
+    filteredItems: [],
+    nameFilter: '',
+    async init() {
+        this.$watch('nameFilter', () => this.updateFilter());
+
+        let qp = new URLSearchParams(window.location.search);
+        if(qp.get('filter')) this.nameFilter = qp.get('filter');
+
+        const res = await fetch('/posts.json')
+        this.items = await res.json();
+        this.updateFilter();
+    },
+    test(){
+        return {
+            'pages_total': this.filteredItems.reduce((a, b) => a + b.book.pages, 0) || '-',
+            'likes_total': this.filteredItems.reduce((a, b) => a + b.likes, 0) || '-',
+            'pages_avg': Math.round(this.filteredItems.reduce((a, b) => a + b.book.pages, 0)/this.filteredItems.length) || '-',
+            'likes_avg': Math.round(this.filteredItems.reduce((a, b) => a + b.likes, 0)/this.filteredItems.length) || '-',
+            'rating_avg': (this.filteredItems.reduce((a, b) => a + b.book.rating, 0)/this.filteredItems.length).toPrecision(2) || '-',
+            'formats': this.filteredItems.reduce((acc, item) => {
+                let val = item.book.format.toLowerCase() || 'brak danych';
+                acc[val] = acc[val] === undefined ? 1 : acc[val] += 1;
+                return acc;
+            }, {})
+        };
+    },
+    updateFilter(){
+        let filter = this.nameFilter.toLowerCase();
+
+        this.filteredItems = this.items.filter(i => {
+            if(filter.startsWith('@') && i.username.toLowerCase().includes(filter.substring(1))) return true;
+            if (i.book.title.toLowerCase().includes(this.nameFilter.toLowerCase()) || i.book.author.toLowerCase().includes(this.nameFilter.toLowerCase())) return true;
+            return false;
+        });
+
+        this.updateURL();
+    },
+    updateURL() {
+        let qp = new URLSearchParams();
+        if(this.nameFilter !== '') qp.set('filter', this.nameFilter);
+
+        history.replaceState(null, null, "?"+qp.toString());
+    }
+}))
+Alpine.start();