@@ -38,134 +38,138 @@ const PageView = () => {
38
38
}
39
39
40
40
const patchContent = createQuery ( ( ) => ( {
41
- queryKey : [ ' patchContent' , currentArticle ( ) ?. contentPath ] ,
41
+ queryKey : [ " patchContent" , currentArticle ( ) ?. contentPath ] ,
42
42
queryFn : ( ) => fetchPatchContent ( currentArticle ( ) ! . contentPath ! ) ,
43
- enabled : ! ! currentArticle ( ) ?. contentPath && currentArticle ( ) ?. type === "patch" ,
43
+ enabled :
44
+ ! ! currentArticle ( ) ?. contentPath && currentArticle ( ) ?. type === "patch" ,
44
45
staleTime : 30 * 60 * 1000 // 30 minutes
45
46
} ) )
46
47
47
48
return (
48
49
< div class = "max-w-4xl mx-auto p-6" >
49
- < Show
50
- when = { ! news . isPending && ! patchNotes . isPending && currentArticle ( ) }
51
- fallback = {
52
- < div class = "text-center py-20" >
53
- < div class = "bg-darkSlate-700 rounded-2xl p-12 border border-darkSlate-600" >
54
- < Show
55
- when = { news . isPending || patchNotes . isPending }
56
- fallback = {
57
- < >
58
- < h1 class = "text-3xl font-bold mb-6 text-white" >
59
- Article not found
60
- </ h1 >
61
- < p class = "text-lightSlate-400 mb-8" >
62
- The article you're looking for doesn't exist or has been
63
- removed.
64
- </ p >
65
- < Button
66
- onClick = { ( ) => navigator . navigate ( "/news" ) }
67
- class = "px-8 py-3"
68
- >
69
- Back to News
70
- </ Button >
71
- </ >
72
- }
73
- >
74
- < div class = "flex items-center justify-center gap-3 text-lightSlate-400" >
75
- < div class = "animate-spin i-ri:loader-4-line text-2xl" />
76
- < span class = "text-xl" > Loading article...</ span >
77
- </ div >
78
- </ Show >
79
- </ div >
50
+ < Show
51
+ when = { ! news . isPending && ! patchNotes . isPending && currentArticle ( ) }
52
+ fallback = {
53
+ < div class = "text-center py-20" >
54
+ < div class = "bg-darkSlate-700 rounded-2xl p-12 border border-darkSlate-600" >
55
+ < Show
56
+ when = { news . isPending || patchNotes . isPending }
57
+ fallback = {
58
+ < >
59
+ < h1 class = "text-3xl font-bold mb-6 text-white" >
60
+ Article not found
61
+ </ h1 >
62
+ < p class = "text-lightSlate-400 mb-8" >
63
+ The article you're looking for doesn't exist or has been
64
+ removed.
65
+ </ p >
66
+ < Button
67
+ onClick = { ( ) => navigator . navigate ( "/news" ) }
68
+ class = "px-8 py-3"
69
+ >
70
+ Back to News
71
+ </ Button >
72
+ </ >
73
+ }
74
+ >
75
+ < div class = "flex items-center justify-center gap-3 text-lightSlate-400" >
76
+ < div class = "animate-spin i-ri:loader-4-line text-2xl" />
77
+ < span class = "text-xl" > Loading article...</ span >
78
+ </ div >
79
+ </ Show >
80
80
</ div >
81
- }
82
- >
83
- { ( article ) => (
84
- < article class = "flex flex-col gap-8" >
85
- < style >
86
- { `
81
+ </ div >
82
+ }
83
+ >
84
+ { ( article ) => (
85
+ < article class = "flex flex-col gap-8" >
86
+ < style >
87
+ { `
87
88
#news_article_content *::selection {
88
89
background: rgb(var(--primary-500) / 0.3);
89
90
color: rgb(var(--lightSlate-50));
90
91
}
91
92
` }
92
- </ style >
93
- { /* Navigation */ }
94
- < button
95
- onClick = { ( ) => navigator . navigate ( "/news" ) }
96
- class = "self-start text-lightSlate-400 hover:text-lightSlate-200 flex items-center gap-3 mb-2 transition-colors group"
97
- >
98
- < div class = "i-ri:arrow-left-line group-hover:transform group-hover:-translate-x-1 transition-transform" />
99
- < span class = "font-medium" > Back to News</ span >
100
- </ button >
93
+ </ style >
94
+ { /* Navigation */ }
95
+ < button
96
+ onClick = { ( ) => navigator . navigate ( "/news" ) }
97
+ class = "self-start text-lightSlate-400 hover:text-lightSlate-200 flex items-center gap-3 mb-2 transition-colors group"
98
+ >
99
+ < div class = "i-ri:arrow-left-line group-hover:transform group-hover:-translate-x-1 transition-transform" />
100
+ < span class = "font-medium" > Back to News</ span >
101
+ </ button >
101
102
102
- { /* Hero Image */ }
103
- < div class = "relative overflow-hidden rounded-2xl shadow-2xl" >
104
- < img
105
- src = { article ( ) . image }
106
- alt = { article ( ) . title }
107
- class = "w-full h-96 object-cover"
108
- />
109
- < div class = "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
110
- </ div >
103
+ { /* Hero Image */ }
104
+ < div class = "relative overflow-hidden rounded-2xl shadow-2xl" >
105
+ < img
106
+ src = { article ( ) . image }
107
+ alt = { article ( ) . title }
108
+ class = "w-full h-96 object-cover"
109
+ />
110
+ < div class = "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
111
+ </ div >
111
112
112
- { /* Header */ }
113
- < header class = "flex flex-col gap-6 bg-darkSlate-700 rounded-2xl p-8 border border-darkSlate-600" >
114
- < div class = "flex items-start justify-between gap-4" >
115
- < h1 class = "text-5xl font-bold leading-tight text-white" >
116
- { article ( ) . title }
117
- </ h1 >
118
- { article ( ) . type === "patch" && (
119
- < div class = "flex flex-col gap-2 items-end" >
120
- < span class = "text-sm bg-primary-600/20 text-primary-300 px-4 py-2 rounded-full border border-primary-600/30 font-semibold" >
121
- Patch Notes
113
+ { /* Header */ }
114
+ < header class = "flex flex-col gap-6 bg-darkSlate-700 rounded-2xl p-8 border border-darkSlate-600" >
115
+ < div class = "flex items-start justify-between gap-4" >
116
+ < h1 class = "text-5xl font-bold leading-tight text-white" >
117
+ { article ( ) . title }
118
+ </ h1 >
119
+ { article ( ) . type === "patch" && (
120
+ < div class = "flex flex-col gap-2 items-end" >
121
+ < span class = "text-sm bg-primary-600/20 text-primary-300 px-4 py-2 rounded-full border border-primary-600/30 font-semibold" >
122
+ Patch Notes
123
+ </ span >
124
+ { article ( ) . version && (
125
+ < span class = "text-xs text-lightSlate-400 font-mono" >
126
+ v{ article ( ) . version }
122
127
</ span >
123
- { article ( ) . version && (
124
- < span class = "text-xs text-lightSlate-400 font-mono" >
125
- v{ article ( ) . version }
126
- </ span >
127
- ) }
128
- </ div >
129
- ) }
130
- </ div >
131
-
132
- < div class = "flex items-center gap-4 text-lightSlate-300" >
133
- < div class = "flex items-center gap-2" >
134
- < i class = "i-ri:calendar-line text-primary-400" />
135
- < time class = "text-lg font-medium" >
136
- { new Date ( article ( ) . date ) . toLocaleDateString ( undefined , {
137
- year : "numeric" ,
138
- month : "long" ,
139
- day : "numeric"
140
- } ) }
141
- </ time >
128
+ ) }
142
129
</ div >
143
- < div class = "w-1 h-1 bg-lightSlate-500 rounded-full" />
144
- < span class = "text-sm capitalize font-medium text-lightSlate-400" >
145
- { article ( ) . type === "patch"
146
- ? "Minecraft Patch"
147
- : "Minecraft News" }
148
- </ span >
130
+ ) }
131
+ </ div >
132
+
133
+ < div class = "flex items-center gap-4 text-lightSlate-300" >
134
+ < div class = "flex items-center gap-2" >
135
+ < i class = "i-ri:calendar-line text-primary-400" />
136
+ < time class = "text-lg font-medium" >
137
+ { new Date ( article ( ) . date ) . toLocaleDateString ( undefined , {
138
+ year : "numeric" ,
139
+ month : "long" ,
140
+ day : "numeric"
141
+ } ) }
142
+ </ time >
149
143
</ div >
150
- </ header >
144
+ < div class = "w-1 h-1 bg-lightSlate-500 rounded-full" />
145
+ < span class = "text-sm capitalize font-medium text-lightSlate-400" >
146
+ { article ( ) . type === "patch"
147
+ ? "Minecraft Patch"
148
+ : "Minecraft News" }
149
+ </ span >
150
+ </ div >
151
+ </ header >
151
152
152
- { /* Content */ }
153
- < div id = "news_article_content" class = "bg-darkSlate-700 rounded-2xl p-8 border border-darkSlate-600" >
154
- { article ( ) . type === "patch" ? (
155
- < Show
156
- when = { patchContent . data }
157
- fallback = {
158
- < div class = "flex items-center justify-center py-16" >
159
- < div class = "flex items-center gap-3 text-lightSlate-400" >
160
- < div class = "animate-spin i-ri:loader-4-line text-xl" />
161
- < span class = "text-lg" > Loading patch content...</ span >
162
- </ div >
153
+ { /* Content */ }
154
+ < div
155
+ id = "news_article_content"
156
+ class = "bg-darkSlate-700 rounded-2xl p-8 border border-darkSlate-600"
157
+ >
158
+ { article ( ) . type === "patch" ? (
159
+ < Show
160
+ when = { patchContent . data }
161
+ fallback = {
162
+ < div class = "flex items-center justify-center py-16" >
163
+ < div class = "flex items-center gap-3 text-lightSlate-400" >
164
+ < div class = "animate-spin i-ri:loader-4-line text-xl" />
165
+ < span class = "text-lg" > Loading patch content...</ span >
163
166
</ div >
164
- }
165
- >
166
- < div class = "patch-content" >
167
- < style >
168
- { `
167
+ </ div >
168
+ }
169
+ >
170
+ < div class = "patch-content" >
171
+ < style >
172
+ { `
169
173
.patch-content h1, .patch-content h2, .patch-content h3, .patch-content h4, .patch-content h5, .patch-content h6 {
170
174
font-weight: 700;
171
175
margin: 1.5rem 0 1rem 0;
@@ -274,40 +278,40 @@ const PageView = () => {
274
278
font-weight: 600;
275
279
}
276
280
` }
277
- </ style >
278
- < div
279
- class = "text-lightSlate-100 leading-relaxed prose prose-lg prose-invert max-w-none"
280
- // eslint-disable-next-line solid/no-innerhtml
281
- innerHTML = { parseToHtml ( patchContent . data ! ) }
282
- />
283
- </ div >
284
- </ Show >
285
- ) : (
286
- < div class = "prose prose-xl prose-invert max-w-none" >
287
- < p class = "text-lightSlate-100 leading-relaxed first-letter:text-6xl first-letter:font-bold first-letter:text-primary-400 first-letter:float-left first-letter:mr-3 first-letter:mt-1" >
288
- { article ( ) . description }
289
- </ p >
281
+ </ style >
282
+ < div
283
+ class = "text-lightSlate-100 leading-relaxed prose prose-lg prose-invert max-w-none"
284
+ // eslint-disable-next-line solid/no-innerhtml
285
+ innerHTML = { parseToHtml ( patchContent . data ! ) }
286
+ />
290
287
</ div >
291
- ) }
292
- </ div >
288
+ </ Show >
289
+ ) : (
290
+ < div class = "prose prose-xl prose-invert max-w-none" >
291
+ < p class = "text-lightSlate-100 leading-relaxed first-letter:text-6xl first-letter:font-bold first-letter:text-primary-400 first-letter:float-left first-letter:mr-3 first-letter:mt-1" >
292
+ { article ( ) . description }
293
+ </ p >
294
+ </ div >
295
+ ) }
296
+ </ div >
293
297
294
- { /* Action Button */ }
295
- < div class = "flex justify-center pt-4" >
296
- < Button
297
- onClick = { ( ) => window . openExternalLink ( article ( ) . url ) }
298
- class = "flex items-center gap-3 px-8 py-4 text-lg font-semibold bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-500 hover:to-primary-600 border border-primary-500/50 shadow-lg hover:shadow-primary-500/25 transition-all duration-300"
299
- >
300
- < span >
301
- { article ( ) . type === "patch"
302
- ? "Read Full Patch Notes"
303
- : "Read Full Article" }
304
- </ span >
305
- < div class = "i-ri:external-link-line text-xl" />
306
- </ Button >
307
- </ div >
308
- </ article >
309
- ) }
310
- </ Show >
298
+ { /* Action Button */ }
299
+ < div class = "flex justify-center pt-4" >
300
+ < Button
301
+ onClick = { ( ) => window . openExternalLink ( article ( ) . url ) }
302
+ class = "flex items-center gap-3 px-8 py-4 text-lg font-semibold bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-500 hover:to-primary-600 border border-primary-500/50 shadow-lg hover:shadow-primary-500/25 transition-all duration-300"
303
+ >
304
+ < span >
305
+ { article ( ) . type === "patch"
306
+ ? "Read Full Patch Notes"
307
+ : "Read Full Article" }
308
+ </ span >
309
+ < div class = "i-ri:external-link-line text-xl" />
310
+ </ Button >
311
+ </ div >
312
+ </ article >
313
+ ) }
314
+ </ Show >
311
315
</ div >
312
316
)
313
317
}
0 commit comments