1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
// Lazy-load search index from JSON file (language-aware)
async function loadSearchIndex() {
if (window.searchIndex) {
return window.searchIndex;
}
try {
// Detect current language from URL
const isItalian = window.location.pathname.startsWith('/it/');
const indexPath = isItalian ? '/it/search-index.json' : '/search-index.json';
const response = await fetch(indexPath);
if (!response.ok) throw new Error('Failed to load search index');
window.searchIndex = await response.json();
return window.searchIndex;
} catch (error) {
console.error('Error loading search index:', error);
return [];
}
}
// Filter articles by query (case-insensitive, max 5 results)
function filterArticles(query, articles) {
if (!query.trim()) {
return [];
}
const lowerQuery = query.toLowerCase();
return articles
.filter(article =>
article.title.toLowerCase().includes(lowerQuery) ||
article.summary.toLowerCase().includes(lowerQuery)
)
.slice(0, 5);
}
// Register Alpine.js components
document.addEventListener('alpine:init', () => {
// Desktop search modal component
Alpine.data('searchOverlay', () => ({
isOpen: false,
searchQuery: '',
filteredArticles: [],
allArticles: [],
indexLoaded: false,
async open() {
this.isOpen = true;
await this.ensureIndexLoaded();
this.$nextTick(() => {
const input = this.$el.querySelector('#search-input-desktop');
if (input) input.focus();
});
},
close() {
this.isOpen = false;
this.searchQuery = '';
this.filteredArticles = [];
},
async ensureIndexLoaded() {
if (!this.indexLoaded) {
this.allArticles = await loadSearchIndex();
this.indexLoaded = true;
}
},
filterArticles(query) {
this.searchQuery = query;
this.filteredArticles = filterArticles(query, this.allArticles);
},
handleEscape(event) {
if (event.key === 'Escape') {
this.close();
}
}
}));
// Mobile search component (integrated into hamburger menu)
Alpine.data('mobileSearch', () => ({
searchQuery: '',
filteredArticles: [],
allArticles: [],
indexLoaded: false,
async ensureIndexLoaded() {
if (!this.indexLoaded) {
this.allArticles = await loadSearchIndex();
this.indexLoaded = true;
}
},
filterArticles(query) {
this.searchQuery = query;
this.filteredArticles = filterArticles(query, this.allArticles);
}
}));
// Refactored 404 page component
Alpine.data('notFoundPage', () => ({
showEasterEgg: false,
searchQuery: '',
filteredArticles: [],
allArticles: [],
indexLoaded: false,
async init() {
await this.ensureIndexLoaded();
},
async ensureIndexLoaded() {
if (!this.indexLoaded) {
this.allArticles = await loadSearchIndex();
this.indexLoaded = true;
}
},
filterArticles(query) {
this.searchQuery = query;
this.filteredArticles = filterArticles(query, this.allArticles);
},
toggleEasterEgg() {
this.showEasterEgg = !this.showEasterEgg;
},
goToRandomArticle() {
if (this.allArticles.length > 0) {
const randomArticle = this.allArticles[Math.floor(Math.random() * this.allArticles.length)];
window.location.href = randomArticle.url;
}
}
}));
});
|
