timtinkers.online
this repo has no description
Commented out themes, replaced Event types with ICalEvent, added Youtube location
+47
-28
+40
-28
components/WeeklySchedule.tsx
+40
-28
components/WeeklySchedule.tsx
···
1
1
import satori from "https://esm.sh/satori@0.12.1";
2
2
import format from "https://deno.land/x/date_fns@v2.22.1/format/index.js";
3
-
import { Event } from "../utils/calendarUtils.ts";
4
3
import { toZonedTime } from "npm:date-fns-tz";
5
4
6
5
// Define theme interface for styling options
···
13
12
default: string;
14
13
twitch: string;
15
14
discord: string;
15
+
youtube: string;
16
16
};
17
17
eventTextColor: string;
18
18
noEventColor: string;
···
20
20
iconPaths: {
21
21
discord: string;
22
22
twitch: string;
23
+
youtube: string;
23
24
};
24
25
}
25
26
···
33
34
default: "#e6d195",
34
35
twitch: "#eebd37",
35
36
discord: "#f3af52",
37
+
youtube: "#ff8e46",
36
38
},
37
39
eventTextColor: "#ffffff",
38
40
noEventColor: "#ffffff",
···
40
42
iconPaths: {
41
43
discord: "./static/discord-icon.svg",
42
44
twitch: "./static/twitch-icon.svg",
45
+
youtube: "./static/youtube-icon.svg",
43
46
},
44
47
};
45
48
46
49
// Theme collection - can be expanded as needed
47
-
const themes: Record<string, Theme> = {
48
-
"light": defaultTheme,
49
-
"dark": {
50
-
fontFamily: "Lazydog",
51
-
headerColor: "#ffffff",
52
-
dateRangeColor: "#cccccc",
53
-
dayColor: "#ffffff",
54
-
eventBgColors: {
55
-
default: "#333333",
56
-
twitch: "#333333",
57
-
discord: "#333333",
58
-
},
59
-
eventTextColor: "#ffffff",
60
-
noEventColor: "#777777",
61
-
backgroundImagePath: "./static/background.png",
62
-
iconPaths: {
63
-
discord: "./static/discord-icon.svg",
64
-
twitch: "./static/twitch-icon.svg",
65
-
},
66
-
},
67
-
// Add more themes as needed
68
-
};
50
+
// const themes: Record<string, Theme> = {
51
+
// "light": defaultTheme,
52
+
// "dark": {
53
+
// fontFamily: "Lazydog",
54
+
// headerColor: "#ffffff",
55
+
// dateRangeColor: "#cccccc",
56
+
// dayColor: "#ffffff",
57
+
// eventBgColors: {
58
+
// default: "#333333",
59
+
// twitch: "#333333",
60
+
// discord: "#333333",
61
+
// },
62
+
// eventTextColor: "#ffffff",
63
+
// noEventColor: "#777777",
64
+
// backgroundImagePath: "./static/background.png",
65
+
// iconPaths: {
66
+
// discord: "./static/discord-icon.svg",
67
+
// twitch: "./static/twitch-icon.svg",
68
+
// },
69
+
// },
70
+
// // Add more themes as needed
71
+
// };
69
72
70
73
export default function WeeklySchedule(
71
-
events: Event[],
74
+
events: ICalEvent[],
72
75
startDate: Date,
73
76
endDate: Date,
74
77
backgroundImageBase64?: string,
···
91
94
const dateRangeText = `${startDateFormatted} - ${endDateFormatted}`;
92
95
93
96
// Helper function to get event background color based on location
94
-
const getEventBgColor = (event: Event | undefined) => {
97
+
const getEventBgColor = (event: ICalEvent | undefined) => {
95
98
if (!event || !event.location) return theme.eventBgColors.default;
96
99
97
100
const location = event.location.toLowerCase();
98
101
if (location === "twitch") return theme.eventBgColors.twitch;
99
102
if (location === "discord") return theme.eventBgColors.discord;
103
+
if (location === "youtube") return theme.eventBgColors.youtube;
100
104
101
105
return theme.eventBgColors.default;
102
106
};
103
107
104
108
// Helper function to get icon based on location
105
-
const getEventIcon = (event: Event | undefined) => {
109
+
const getEventIcon = (event: ICalEvent | undefined) => {
106
110
if (!event || !event.location || !iconBase64Map) return null;
107
111
108
112
const location = event.location.toLowerCase();
···
111
115
}
112
116
if (location === "discord" && iconBase64Map.discord) {
113
117
return iconBase64Map.discord;
118
+
}
119
+
if (location === "youtube" && iconBase64Map.youtube) {
120
+
return iconBase64Map.youtube;
114
121
}
115
122
116
123
return null;
···
328
335
}
329
336
330
337
export async function generateScheduleSVG(
331
-
events: Event[],
338
+
events: ICalEvent[],
332
339
startDate: Date,
333
340
endDate: Date,
334
341
themeName: string = "light",
335
342
) {
336
343
// Get the theme
337
-
const theme = themes[themeName] || defaultTheme;
344
+
//const theme = themes[themeName] || defaultTheme;
345
+
const theme = defaultTheme;
338
346
339
347
// Load font
340
348
const fontPath = "./static/fonts/Lazydog.ttf";
···
362
370
// Load Twitch icon
363
371
const twitchIconData = await Deno.readFile(theme.iconPaths.twitch);
364
372
iconBase64Map.twitch = encodeBase64(twitchIconData);
373
+
374
+
// Load YouTube icon
375
+
const youtubeIconData = await Deno.readFile(theme.iconPaths.youtube);
376
+
iconBase64Map.youtube = encodeBase64(youtubeIconData);
365
377
} catch (error) {
366
378
console.error(
367
379
`Error loading icon images: ${(error as Error).message}`,
+7
static/youtube-icon.svg
+7
static/youtube-icon.svg
···
1
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
2
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
3
+
<svg fill="#ffffff" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-4.9 -4.9 58.80 58.80" xml:space="preserve" stroke="#ffffff" stroke-width="3.332">
4
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
5
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
6
+
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M39.256,6.5H9.744C4.371,6.5,0,10.885,0,16.274v16.451c0,5.39,4.371,9.774,9.744,9.774h29.512 c5.373,0,9.744-4.385,9.744-9.774V16.274C49,10.885,44.629,6.5,39.256,6.5z M47,32.726c0,4.287-3.474,7.774-7.744,7.774H9.744 C5.474,40.5,2,37.012,2,32.726V16.274C2,11.988,5.474,8.5,9.744,8.5h29.512c4.27,0,7.744,3.488,7.744,7.774V32.726z"/> <path d="M33.36,24.138l-13.855-8.115c-0.308-0.18-0.691-0.183-1.002-0.005S18,16.527,18,16.886v16.229 c0,0.358,0.192,0.69,0.502,0.868c0.154,0.088,0.326,0.132,0.498,0.132c0.175,0,0.349-0.046,0.505-0.137l13.855-8.113 c0.306-0.179,0.495-0.508,0.495-0.863S33.667,24.317,33.36,24.138z M20,31.37V18.63l10.876,6.371L20,31.37z"/> </g> </g> </g>
7
+
</svg>
