Firefly 魔改指南

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import I18nKey from "@/i18n/i18nKey";
4
import { i18n } from "@/i18n/translation";
5
import { Icon } from "astro-icon";
6
import { getCollection } from "astro:content";
7
import { siteConfig } from "@/config";
8

9
const allBlogPosts = await getCollection("posts", ({ data }) => {
10
  return import.meta.env.PROD ? data.draft !== true : true;
11
});
12

13
let words = 0;
14
for (let post of allBlogPosts) {
15
  if (post.body) {
16
    let text = post.body
17
      .replace(/```[\s\S]*?```/g, "")
18
      .replace(/`[^`]*`/g, "")
19
      .replace(/\s+/g, " ")
20
      .trim();
21

22
    const chineseChars = text.match(/[\u4e00-\u9fa5]/g) || [];
23
    const englishChars = text.match(/[a-zA-Z]/g) || [];
24

25
    words += chineseChars.length + englishChars.length;
26
  }
27
}
28

29
const sorted = allBlogPosts.sort((a, b) => {
30
  const dateA = new Date(a.data.published);
31
  const dateB = new Date(b.data.published);
32
  return dateA > dateB ? -1 : 1;
33
});
34

35
const title = sorted[0].data.title;
36

37
const startDate = siteConfig.siteStartDate || '2025-01-01';
38
const begin = new Date(startDate);
39
let end = new Date(startDate);
40
end.setDate(begin.getDate() + 3650);
41
const latestDate = new Date(sorted[0].data.published);
42

43
const total = Math.ceil((end - begin) / (1000 * 60 * 60 * 24));
44
const dayU = i18n(I18nKey.decennialDayUnit);
45
const dayAgoU = i18n(I18nKey.decennialDaysAgo);
46
const daysTogoU = i18n(I18nKey.decennialDaysToGo);
47
---
48
<style>
49
.container {
50
  width: 100%;
51
  background: var(--card-bg);
52
  border-radius: 20px;
53
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
54
  padding: 40px;
55
  text-align: center;
56
  position: relative;
57
  overflow: hidden;
58
}
59

60
.container::before {
61
  content: '';
62
  position: absolute;
63
  top: 0;
64
  left: 0;
65
  width: 100%;
66
  height: 8px;
67
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
68
}
69

70
h1 {
71
  font-size: 2.8rem;
72
  margin-bottom: 30px;
73
  letter-spacing: 2px;
74
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
75
}
76

77
.avatar-container {
78
  margin: 20px auto 30px;
79
  width: 150px;
80
  height: 150px;
81
  border-radius: 50%;
82
  overflow: hidden;
83
  border: 5px solid #f8f9fa;
84
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
85
  position: relative;
86
  user-select: none;
87
}
88

89
.avatar {
90
  width: 100%;
91
  height: 100%;
92
  background: linear-gradient(45deg, #3498db, #9b59b6);
93
  display: flex;
94
  justify-content: center;
95
  align-items: center;
96
  font-size: 3rem;
97
}
98

99
.decennial-title {
100
  margin: 0 0 30px 0;
101
}
102

103
#daysCounter {
104
  margin: 20px 0;
105
}
106

107
#days-label {
108
  font-size: 1.2rem;
109
  margin-bottom: 30px;
110
}
111

112
.date-info {
113
  display: flex;
114
  justify-content: space-between;
115
  margin: 30px 0;
116
  flex-wrap: wrap;
117
}
118

119
.date-box {
120
  flex: 1;
121
  min-width: 200px;
122
  padding: 20px;
123
  margin: 10px;
124
  background: var(--page-bg);
125
  border-radius: 12px;
126
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
127
  transition: transform 0.3s ease;
128
}
129

130
.date-box:hover {
131
  transform: translateY(-5px);
132
}
133

134
.date-title {
135
  margin-bottom: 10px;
136
}
137

138
.label-container {
139
  display: flex;
140
  flex-direction: column;
141
  text-align: left;
142
  line-height: 2.5;
143
}
144

145
.horizontal-items {
146
  display: flex;
147
  flex-wrap: wrap;
148
  justify-content: space-between;
149
}
150

151
.progress-container {
152
  margin: 40px 0 20px;
153
  text-align: left;
154
}
155

156
.progress-label {
157
  display: flex;
158
  justify-content: space-between;
159
  margin-bottom: 10px;
160
  font-size: 1.1rem;
161
}
162

163
.progress-bar {
164
  height: 20px;
165
  background: var(--page-bg);
166
  border-radius: 10px;
167
  overflow: hidden;
168
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
169
}
170

171
.progress-fill {
172
  height: 100%;
173
  background: linear-gradient(90deg, #3498db, #2ecc71);
174
  border-radius: 10px;
175
  width: 0;
176
  transition: width 1.5s ease-in-out;
177
  position: relative;
178
  overflow: hidden;
179
}
180

181
.progress-fill::after {
182
  content: '';
183
  position: absolute;
184
  top: 0;
185
  left: 0;
186
  bottom: 0;
187
  right: 0;
188
  background-image: linear-gradient(
189
    -45deg,
190
    rgba(255, 255, 255, 0.2) 25%,
191
    transparent 25%,
192
    transparent 50%,
193
    rgba(255, 255, 255, 0.2) 50%,
194
    rgba(255, 255, 255, 0.2) 75%,
195
    transparent 75%,
196
    transparent
197
  );
198
  background-size: 20px 20px;
199
  animation: move 1s linear infinite;
200
}
201

202
@keyframes move {
203
  0% {
204
    background-position: 0 0;
205
  }
206
  100% {
207
    background-position: 20px 0;
208
  }
209
}
210

211
.quote {
212
  margin-top: 30px;
213
  font-style: italic;
214
  color: #7f8c8d;
215
  font-size: 1.1rem;
216
  line-height: 1.6;
217
  border-left: 4px solid #3498db;
218
  padding-left: 15px;
219
  text-align: left;
220
}
221

222
img {
223
  max-width: 100%;
224
}
225

226
@media (max-width: 600px) {
227
  .container {
228
    padding: 20px;
229
  }
230

231
  h1 {
232
    font-size: 2rem;
233
  }
234

235
  .days-counter {
236
    font-size: 3rem;
237
  }
238

239
  .date-info {
240
    flex-direction: column;
241
  }
242

243
  .date-box {
244
    min-width: 100%;
245
  }
246
}
247
</style>
248

249
<MainGridLayout title={i18n(I18nKey.decennialTitle)} description={i18n(I18nKey.decennialDesc)}>
250
  <div class="container">
251
        <div class="decennial-title text-4xl font-bold text-neutral-900 dark:text-neutral-100 group-hover:text-(--primary) transition-colors truncate pr-1">{i18n(I18nKey.decennialSubtitle)}</div>
252

253
        <div class="avatar-container">
254
            <div class="avatar">
255
              <img src="https://justpureh2o.cn/avatar.jpg">
256
            </div>
257
        </div>
258

259
        <div class="text-7xl font-bold text-neutral-900 dark:text-neutral-100 group-hover:text-(--primary) transition-colors truncate pr-1" id="daysCounter"></div>
260
        <div class="days-label font-bold text-base text-neutral-900 dark:text-neutral-100 group-hover:text-(--primary) transition-colors truncate pr-4">{i18n(I18nKey.decennialDaysCounter)}</div>
261

262
        <div class="date-info">
263
            <div class="date-box">
264
                <div class="date-title text-base text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialCountFrom)}</div>
265
                <div class="text-2xl font-bold text-neutral-900 dark:text-neutral-100" id="startDate">2025-01-01</div>
266
            </div>
267

268
            <div class="date-box">
269
                <div class="date-title text-base text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialCountTo)}</div>
270
                <div class="text-2xl font-bold text-neutral-900 dark:text-neutral-100" id="endDate">2034-12-29</div>
271
            </div>
272
        </div>
273

274
    <div class="label-container">
275
            <div class="text-xlarge font-bold text-neutral-900 dark:text-neutral-100">📄 {i18n(I18nKey.decennialPromiseTitle)}</div>
276
      <div class="horizontal-items">
277
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="entry1Title">{i18n(I18nKey.decennialPromiseEntry1)}</div>
278
        <div class="text-base text-neutral-900 dark:text-neutral-100" id="entry1Text"></div>
279
      </div>
280
      <div class="horizontal-items">
281
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" style=`color:${sorted.length >= 10 ? "oklch(0.6 0.2 170)" : "oklch(0.7 0.2 25)"}`>{i18n(I18nKey.decennialPromiseEntry2)}</div>
282
        <div class="text-base text-neutral-900 dark:text-neutral-100">{sorted.length} {i18n(I18nKey.decennialPostUnit)}</div>
283
      </div>
284
        </div>
285

286
    <div class="label-container">
287
            <div class="text-xlarge font-bold text-neutral-900 dark:text-neutral-100">🎉 {i18n(I18nKey.decennialAchievementTitle)}</div>
288
      <div class="horizontal-items">
289
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" style=`color:${sorted.length >= 100 ? "oklch(0.6 0.2 170)" : ""}`>{i18n(I18nKey.decennialAchievementEntry1)}</div>
290
        <div class="text-base text-neutral-900 dark:text-neutral-100">{sorted.length} {i18n(I18nKey.decennialPostUnit)}</div>
291
      </div>
292
      <div class="horizontal-items">
293
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" style=`color:${words >= 100000 ? "oklch(0.6 0.2 170)" : ""}`>{i18n(I18nKey.decennialAchievementEntry2)}</div>
294
        <div class="text-base text-neutral-900 dark:text-neutral-100">{words} {i18n(I18nKey.decennialCharacterUnit)}</div>
295
      </div>
296
      <div class="horizontal-items">
297
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" style=`color:${words >= 1000000 ? "oklch(0.6 0.2 170)" : ""}`>{i18n(I18nKey.decennialAchievementEntry3)}</div>
298
        <div class="text-base text-neutral-900 dark:text-neutral-100">{words} {i18n(I18nKey.decennialCharacterUnit)}</div>
299
      </div>
300
      <div class="horizontal-items">
301
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="entry4Title">{i18n(I18nKey.decennialAchievementEntry4)}</div>
302
        <div class="text-base text-neutral-900 dark:text-neutral-100" id="entry4Text"></div>
303
      </div>
304
      <div class="horizontal-items">
305
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="entry5Title">{i18n(I18nKey.decennialAchievementEntry5)}</div>
306
        <div class="text-base text-neutral-900 dark:text-neutral-100" id="entry5Text"></div>
307
      </div>
308
      <div class="horizontal-items">
309
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="entry6Title">{i18n(I18nKey.decennialAchievementEntry6)}</div>
310
        <div class="text-base text-neutral-900 dark:text-neutral-100" id="entry6Text"></div>
311
      </div>
312
        </div>
313

314
        <div class="progress-container">
315
      <div class="text-xlarge font-bold text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialAchievementsTitle)}</div>
316
            <div class="progress-label">
317
                <div class="text-xlarge font-bold text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialProgressTitle)}</div>
318
                <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="progressPercent"></div>
319
            </div>
320
            <div class="progress-bar">
321
                <div class="progress-fill" id="progressFill"></div>
322
            </div>
323
        </div>
324

325
        <div class="quote text-base font-bold text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialQuote)}</div>
326
  </div>
327
</MainGridLayout>
328

329
<script is:inline define:vars={{ startDate, latestDate, title, dayU, dayAgoU, daysTogoU }}>
330
  const today = new Date();
331
  const begin = new Date(startDate);
332
  const end = new Date(startDate);
333
  const latest = new Date(latestDate);
334
  end.setDate(end.getDate() + 3650);
335
  const elapsed = Math.ceil((today - latest) / (1000 * 60 * 60 * 24));
336
  const counter = Math.ceil((today - begin) / (1000 * 60 * 60 * 24));
337
  const daysTogo = Math.max(Math.ceil((end - today) / (1000 * 60 * 60 * 24)), 0);
338
  // 计算进度百分比
339
  const progress = (counter / 3650 * 100).toFixed(3);
340

341
  // 格式化日期为 YYYY-MM-DD
342
  function formatDate(date) {
343
  date = new Date(date);
344
  const year = date.getFullYear();
345
  const month = String(date.getMonth() + 1).padStart(2, '0');
346
  const day = String(date.getDate()).padStart(2, '0');
347
  return `${year}-${month}-${day}`;
348
  }
349

350
  // 更新页面内容
351
  document.getElementById('startDate').textContent = formatDate(begin);
352
  document.getElementById('endDate').textContent = formatDate(end);
353
  document.getElementById('progressPercent').textContent = `${progress}%`;
354
  document.getElementById('entry1Title').style.color = elapsed <= 180 ? "oklch(0.6 0.2 170)" : "oklch(0.7 0.2 25)";
355
  document.getElementById('entry1Text').textContent = `${elapsed} ${dayAgoU}: ${title}`;
356
  document.getElementById('entry4Title').style.color = counter >= 100 ? "oklch(0.6 0.2 170)" : "";
357
  document.getElementById('entry4Text').textContent = `${counter} ${dayU}`;
358
  document.getElementById('entry5Title').style.color = counter >= 1000 ? "oklch(0.6 0.2 170)" : "";
359
  document.getElementById('entry5Text').textContent = `${counter} ${dayU}`;
360
  document.getElementById('entry6Title').style.color = daysTogo === 0 ? "oklch(0.6 0.2 170)" : "";
361
  document.getElementById('entry6Text').textContent = `${daysTogo} ${daysTogoU}`;
362

363
  // 动画显示进度条
364
  setTimeout(() => {
365
  document.getElementById('progressFill').style.width = `${progress}%`;
366
  }, 500);
367

368
  // 更新运行天数（动态效果）
369
  let currentDays = 0;
370
  const daysCounter = document.getElementById('daysCounter');
371
  const increment = Math.ceil(counter / 100);
372

373
  const counterInterval = setInterval(() => {
374
  currentDays += increment;
375
  if (currentDays >= counter) {
376
    currentDays = counter;
377
    clearInterval(counterInterval);
378
  }
379
  daysCounter.textContent = currentDays;
380
  }, 20);
381
</script>

1
// 十年之约 i18nKey.ts
2
decennialTitle = "decennialTitle",
3
decennialDesc = "decennialDesc",
4
decennialSubtitle = "decennialSubtitle",
5
decennialDaysCounter = "decennialDaysCounter",
6
decennialCountFrom = "decennialCountFrom",
7
decennialCountTo = "decennialCountTo",
8
decennialPromiseTitle = "decennialPromiseTitle",
9
decennialAchievementTitle = "decennialAchievementTitle",
10
decennialProgressTitle = "decennialProgressTitle",
11
decennialQuote = "decennialQuote",
12
decennialDaysAgo = "decennialDaysAgo",
13
decennialDaysToGo = "decennialDaysToGo",
14
decennialCharacterUnit = "decennialCharacterUnit",
15
decennialDayUnit = "decennialDayUnit",
16
decennialPostUnit = "decennialPostUnit",
17
decennialAchievementEntry1 = "decennialAchievementEntry1",
18
decennialAchievementEntry2 = "decennialAchievementEntry2",
19
decennialAchievementEntry3 = "decennialAchievementEntry3",
20
decennialAchievementEntry4 = "decennialAchievementEntry4",
21
decennialAchievementEntry5 = "decennialAchievementEntry5",
22
decennialAchievementEntry6 = "decennialAchievementEntry6",
23
decennialPromiseEntry1 = "decennialPromiseEntry1",
24
decennialPromiseEntry2 = "decennialPromiseEntry2",

1
// 十年之约 zh_CN.ts
2
[Key.decennialTitle]: "十年之约",
3
[Key.decennialDesc]: "",
4
[Key.decennialSubtitle]: "我的博客 · 十年之约",
5
[Key.decennialDaysCounter]: "已运行天数",
6
[Key.decennialCountFrom]: "建站日期",
7
[Key.decennialCountTo]: "十年之约到期日",
8
[Key.decennialPromiseTitle]: "履约事项：",
9
[Key.decennialAchievementTitle]: "履约成就：",
10
[Key.decennialProgressTitle]: "履约进度：",
11
[Key.decennialQuote]: "十年之约，是坚持，是承诺，是对未来的期许。无论风雨，无论晴好，我会在这里记录、分享、成长。",
12
[Key.decennialDaysAgo]: "天前发布",
13
[Key.decennialDaysToGo]: "天后",
14
[Key.decennialCharacterUnit]: "字",
15
[Key.decennialDayUnit]: "天",
16
[Key.decennialPostUnit]: "篇",
17
[Key.decennialAchievementEntry1]: "发布100篇原创文章",
18
[Key.decennialAchievementEntry2]: "总字数达10万字",
19
[Key.decennialAchievementEntry3]: "总字数达100万字",
20
[Key.decennialAchievementEntry4]: "正常运行100天",
21
[Key.decennialAchievementEntry5]: "正常运行1000天",
22
[Key.decennialAchievementEntry6]: "完成十年之约",
23
[Key.decennialPromiseEntry1]: "六个月内有新文章发布",
24
[Key.decennialPromiseEntry2]: "至少有十篇原创文章",

1
// Decennial Countdown en.ts
2
[Key.decennialTitle]: "Decennial Countdown",
3
[Key.decennialDesc]: "",
4
[Key.decennialSubtitle]: "My Blog - Decennial Countdown",
5
[Key.decennialDaysCounter]: "Days Since Online",
6
[Key.decennialCountFrom]: "Starts on",
7
[Key.decennialCountTo]: "Ends on",
8
[Key.decennialPromiseTitle]: "Promise TODOs",
9
[Key.decennialAchievementTitle]: "Achievements",
10
[Key.decennialProgressTitle]: "Countdown progress",
11
[Key.decennialQuote]: "A decennial miracle will soon bloom on this site.",
12
[Key.decennialDaysAgo]: "days after post",
13
[Key.decennialDaysToGo]: "days to go",
14
[Key.decennialCharacterUnit]: "characters",
15
[Key.decennialDayUnit]: "days",
16
[Key.decennialPostUnit]: "posts",
17
[Key.decennialAchievementEntry1]: "Post 100 original articles",
18
[Key.decennialAchievementEntry2]: "Write 100k words",
19
[Key.decennialAchievementEntry3]: "Write 1m words",
20
[Key.decennialAchievementEntry4]: "Run normally for 100 days",
21
[Key.decennialAchievementEntry5]: "Run normally for 1000 days",
22
[Key.decennialAchievementEntry6]: "Accomplish the Decennial Countdown",
23
[Key.decennialPromiseEntry1]: "Post at least one article in six months",
24
[Key.decennialPromiseEntry2]: "Post at least ten original posts",

1
import type { APIRoute } from 'astro';
2
import { analyzeFeed } from '@/utils/feed-utils';
3
import NodeCache from 'node-cache';
4

5
export const prerender = false;
6

7
const cache = new NodeCache({ stdTTL: 1800, checkperiod: 120 });
8

9
export const POST: APIRoute = async ({ request }) => {
10
  try {
11
  const { friends } = await request.json();
12

13
  const cacheKey = JSON.stringify(
14
    friends.map(f => ({ baseid: f.baseid, feed: f.feed, feedtype: f.feedtype }))
15
  );
16

17
  let cachedLinks = cache.get(cacheKey);
18
  if (cachedLinks) {
19
    return new Response(JSON.stringify(cachedLinks), {
20
    status: 200,
21
    headers: { 'Content-Type': 'application/json' },
22
    });
23
  }
24

25
  const promises = friends.map(async (friend: any) => {
26
    const type = friend.feedtype || 'rss';
27
    const feed = await analyzeFeed(type, friend.feed, 3);
28
    return { baseid: friend.baseid, feed };
29
  });
30

31
  const links = await Promise.all(promises);
32

33
  cache.set(cacheKey, links);
34

35
  return new Response(JSON.stringify(links), {
36
    status: 200,
37
    headers: { 'Content-Type': 'application/json' },
38
  });
39
  } catch (error) {
40
    return new Response(JSON.stringify({ error: 'Failed to fetch feeds' }), {
41
      status: 500,
42
      headers: { 'Content-Type': 'application/json' },
43
    });
44
  }
45
};

1
---
2
import { Icon } from "astro-icon/components";
3
import {
4
  friendsPageConfig,
5
  getEnabledFriends,
6
  siteConfig,
7
} from "@/config";
8
import MainGridLayout from "@/layouts/MainGridLayout.astro";
9

10
if (!siteConfig.pages.circle) {
11
  return Astro.redirect("/404/");
12
}
13

14
const title = "友链朋友圈";
15
const description = "友链里发生的那些新鲜事";
16

17
let friends = [];
18
getEnabledFriends()
19
  .filter(friend => friend.feed?.length > 0)
20
  .map(friend => {
21
    friends.push({
22
      ...friend,
23
      baseid: Buffer.from(friend.siteurl, 'utf-8').toString('base64'),
24
    });
25
  });
26
---
27

28
<MainGridLayout title={title} description={description}>
29
  <div
30
    class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32"
31
  >
32
    <div class="card-base z-10 px-9 py-6 relative w-full">
33
      <!-- 页面标题和描述 -->
34
      <div class="mb-4">
35
      <div class="flex items-center gap-3 mb-3">
36
        <div
37
        class="h-8 w-8 rounded-lg bg-(--primary) flex items-center justify-center text-white dark:text-black/70"
38
        >
39
        <Icon is:inline name="material-symbols:rss-feed-rounded" class="text-[1.5rem]" />
40
        </div>
41
        <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">
42
        {title}
43
        </div>
44
      </div>
45
      {
46
        description && (
47
        <p class="text-base text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
48
          {description}
49
        </p>
50
        )
51
      }
52
      </div>
53
      <div class="mb-4">
54
      {
55
        friends.map((item) => (
56
          <div class="mb-2">
57
            <div
58
              data-tags={item.tags?.join(",")}
59
              class="friend-card group flex items-center gap-3 p-2.5 rounded-xl border border-(--line-divider) transition-all duration-300 hover:shadow-lg relative overflow-hidden"
60
            >
61
              <!-- 头像 -->
62
              <div class="relative w-16 h-16 shrink-0 rounded-xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 border border-black/5 dark:border-white/5 transition-transform duration-300">
63
              <img
64
                src={item.imgurl}
65
                alt={item.title}
66
                class="w-full h-full object-cover"
67
                onerror="this.onerror=null;this.src='/defavatar.svg';"
68
              />
69
              </div>
70

71
              <!-- 内容 -->
72
              <div class="grow min-h-0 flex flex-col gap-1">
73
                <div class="flex items-center justify-between">
74
                  <div class="font-bold text-base text-neutral-900 dark:text-neutral-100 transition-colors truncate pr-4">
75
                  {item.title}
76
                  </div>
77
                </div>
78

79
                <div
80
                  class="text-sm text-neutral-500 dark:text-neutral-400 line-clamp-1"
81
                  title={item.desc}
82
                >
83
                  {item.desc}
84
                </div>
85
              </div>
86

87
              <div class="flex flex-col gap-0.5" id={item.baseid}>
88
                <div class="feed-loading text-sm text-neutral-400 dark:text-neutral-500 animate-pulse">
89
                加载 RSS/Atom 订阅中...
90
                </div>
91
              </div>
92
            </div>
93
          </div>
94
        ))
95
      }
96
    </div>
97
    </div>
98
  </div>
99
</MainGridLayout>
100

101
<script define:vars={{ friends }}>
102
  const friendParams = friends.map(f => ({
103
    baseid: f.baseid,
104
    feedtype: f.feedtype,
105
    feed: f.feed,
106
  }));
107

108
  async function loadFeeds() {
109
    try {
110
      const response = await fetch('/api/feed.json', {
111
        method: 'POST',
112
        headers: { 'Content-Type': 'application/json' },
113
        body: JSON.stringify({ friends: friendParams }),
114
      });
115
      if (!response.ok) throw new Error('Network response was not ok');
116
      const links = await response.json();
117

118
      links.forEach((item) => {
119
        const container = document.getElementById(item.baseid);
120
        if (!container) return;
121
    container.replaceChildren();
122

123
        item.feed.entries.forEach((entry) => {
124
          container.insertAdjacentHTML("beforeend", `
125
            <a
126
              href="${entry.url}"
127
              target="_blank"
128
              rel="noopener noreferrer"
129
              data-tags="${item.tags?.join(",") || ''}"
130
              class="friend-card group flex items-center gap-3 p-2.5 rounded-xl border border-(--line-divider) hover:border-(--primary) hover:bg-(--card-bg) transition-all duration-300 hover:shadow-lg relative overflow-hidden w-100"
131
            >
132
              <div class="flex flex-col">
133
                <div class="font-bold text-base text-neutral-900 dark:text-neutral-100 transition-colors pr-4 line-clamp-1 w-100 truncate">
134
                  ${entry.title}
135
                </div>
136
                <div class="text-sm text-neutral-500 dark:text-neutral-400 line-clamp-1 indent-1">
137
                  ${new Date(entry.date).toLocaleDateString()}
138
                </div>
139
              </div>
140
            </a>
141
          `);
142
        });
143
      });
144
    } catch (error) {
145
      console.error('Failed to load feeds:', error);
146
    }
147
  }
148
  loadFeeds();
149
</script>