fix: CSP allow inline scripts

TODO.md

@@ -1,6 +1,7 @@
 @TODO
 
 - gitea rebuild website on each push -> script!!
+- sha512 to scripts for csp
 
 blog
 

scripts/bump-version.mjs

@@ -23,7 +23,7 @@ const prefixes = {
 	ignore: ['test', 'ci', 'refactor', 'build', 'chore'],
 	major: ['!'], // if this should change, please test it heavily
 	minor: ['feat', 'enhance'],
-	patch: ['fix', 'style', 'docs'],
+	patch: ['fix', 'style', 'docs', 'blog'],
 };
 const flatPrefixes = Object.values(prefixes).flat();
 
@@ -34,6 +34,7 @@ const prefixToMdMap = {
 	fix: { title: 'Fixes', content: [] },
 	style: { title: 'Styles', content: [] },
 	docs: { title: 'Documentations', content: [] },
+	blog: { title: 'Blog', content: [] },
 };
 
 const prefixReplaceRegex = new RegExp('^(' + prefixes.major.join('|') + ')?(' + flatPrefixes.join('|') + ')(\\(([a-z\\-]+)\\))?:? ?', 'i');

src/components/blogContent/BlogContent.astro

@@ -0,0 +1,38 @@
+---
+/** Simple table of contents for blogs */
+import { ReplacerParagraph } from '@components/index';
+
+interface Props {
+	content: {
+		id: string;
+		title: string;
+		text: (string | { list: string[] })[];
+	}[];
+}
+
+const {
+	content, //
+} = Astro.props;
+---
+
+{
+	content.map(content => (
+		<section id={content.id}>
+			<h2 set:html={content.title} />
+			{content.text.map(text => {
+				if (typeof text === 'string') {
+					return <ReplacerParagraph content={text} />;
+				}
+				return (
+					<ul class="list-disc pl-4">
+						{text.list.map(item => (
+							<li>
+								<ReplacerParagraph content={item} />
+							</li>
+						))}
+					</ul>
+				);
+			})}
+		</section>
+	))
+}

src/components/index.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck -> because of build error...
 export { default as Address } from './address/Address.astro';
+export { default as BlogContent } from './blogContent/BlogContent.astro';
 export { default as Card } from './card/Card.astro';
 export { default as Clickable } from './clickable/Clickable.astro';
 export { default as Code } from './code/Code.astro';

src/components/tableOfContents/TableOfContents.astro

@@ -51,6 +51,10 @@ const {
 		@apply list-decimal;
 		@apply pl-4;
 
+		li {
+			@apply py-1;
+		}
+
 		a {
 			@apply underline;
 		}

src/i18n/link.ts

@@ -28,6 +28,10 @@ export default {
 				text: 'Meine Erfahrungen mit boot.dev',
 				href: 'boot-dev',
 			},
+			firstGameJam: {
+				text: 'Mein erster Game Jam',
+				href: 'erster-game-jam',
+			},
 			tsPathsAliasesInAstroConfig: {
 				text: 'Typescript paths-aliases in astro.config.ts',
 				href: 'ts-paths-aliases-in-astro-config',
@@ -79,6 +83,10 @@ export default {
 				text: 'My experiences with boot.dev',
 				href: 'boot-dev',
 			},
+			firstGameJam: {
+				text: 'My first Game Jam',
+				href: 'first-game-jam',
+			},
 			tsPathsAliasesInAstroConfig: {
 				text: 'How to use Typescript paths-aliases in astro.config.ts',
 				href: 'ts-paths-aliases-in-astro-config',

src/i18n/pages/blog/boot-dev.ts

@@ -15,29 +15,33 @@ export default {
 			src: bootDev,
 			alt: 'boot.dev Blog',
 		},
-		content: {
-			struktur: {
+		content: [
+			{
+				id: 'struktur',
 				title: 'Struktur und Inhalte',
 				text: [
 					'BOOT.DEV bietet einen klaren, gut organisierten Lehrplan, der sich perfekt für alle eignet, die einen strukturierten Einstieg ins Backend Development suchen. Die Kurse bauen logisch aufeinander auf, sodass man sich Schritt für Schritt in die Themen einarbeitet. Die Plattform setzt stark auf praktische Übungen, wodurch das Gelernte sofort angewendet werden kann.',
 					'Ein großer Vorteil ist, dass die Inhalte nicht trocken oder langweilig sind. Stattdessen führen kleine Herausforderungen, Miniprojekte sowie Elemente wie Bosse, Power-Ups, Levels, Challenges, Quests, Achievements und ein Leaderboard dazu, dass man stets motiviert bleibt. Besonders gefallen hat mir die spielerische Art, mit der BOOT.DEV Wissen vermittelt.',
 				],
 			},
-			lernreise: {
+			{
+				id: 'lernreise',
 				title: 'Meine Lernreise',
 				text: [
 					'Ursprünglich hatte ich erwartet, dass das Programm mehrere Monate dauern würde. Doch durch einen ungewollten Umstand - eine gebrochene Hand - hatte ich mehr Zeit zum Lernen und habe den gesamten Kurs in etwa sechs Wochen abgeschlossen. Tatsächlich wäre es in noch kürzerer Zeit machbar gewesen. Das spricht einerseits für die Effizienz der Plattform, andererseits wäre ein noch umfangreicheres Angebot wünschenswert gewesen.',
 					'Trotzdem fand ich den Preis für den Kurs fair, da die Inhalte qualitativ hochwertig sind und praxisnah vermittelt werden. Wer schnell lernt oder bereits Grundkenntnisse mitbringt, wird BOOT.DEV vielleicht als etwas kurzweilig empfinden, aber als solide Grundlage ist es definitiv empfehlenswert.',
 				],
 			},
-			networking: {
+			{
+				id: 'networking',
 				title: 'Mehr als nur Programmieren: Karriere und Networking',
 				text: [
 					'Ein besonderes Highlight war für mich das Modul, das sich mit Bewerbungen und Networking beschäftigte. Es zeigte nicht nur, wie man eine starke Bewerbung erstellt, sondern auch, wie wichtig es ist, sich mit anderen Entwicklern zu vernetzen. Plattformen wie Meetup wurden als hilfreiche Ressourcen vorgestellt, um Gleichgesinnte zu treffen und an Events teilzunehmen.',
-					'Durch dieses Modul habe ich das Berlin Mini GameJam entdeckt und direkt teilgenommen - eine Erfahrung, die nicht nur spaßig war, sondern auch meine Begeisterung für gemeinsames Entwickeln von Spielen geweckt hat. Darüber werde ich jedoch in einem separaten Blogeintrag berichten.',
+					'Durch dieses Modul habe ich das Berlin Mini GameJam entdeckt und direkt teilgenommen - eine Erfahrung, die nicht nur spaßig war, sondern auch meine Begeisterung für gemeinsames Entwickeln von Spielen geweckt hat. Darüber werde ich jedoch in einem separaten [Blogeintrag](/blog/erster-game-jam) berichten.',
 				],
 			},
-			gelernt: {
+			{
+				id: 'gelernt',
 				title: 'Was ich gelernt und erhalten habe',
 				text: [
 					'Für jedes abgeschlossene Modul erhielt ich ein Zertifikat, was mir eine sichtbare Bestätigung meines Fortschritts gab. Auch wenn ich kein großer Fan von Python bin, habe ich dennoch alles gelernt, was ich an der Sprache interessant finde. Zusätzlich konnte ich neue Erkenntnisse zu C und Speichermanagement gewinnen, was für mich besonders spannend war. Auch das Thema Kryptographie war überraschend interessant und bot viele praktische Anwendungen.',
@@ -45,7 +49,8 @@ export default {
 					'Themen wie SQL, Go, Docker und Projekte waren mir aus Beruf und Studium bereits vertraut, weshalb ich diese Module schneller abschließen konnte. Dennoch war es hilfreich, praktische Aufgaben dazu zu bearbeiten, und ich konnte durch das strukturierte Lernen vielleicht noch das ein oder andere dazulernen.',
 				],
 			},
-			fazit: {
+			{
+				id: 'fazit',
 				title: 'Fazit: Lohnt sich BOOT.DEV?',
 				text: [
 					'BOOT.DEV ist eine gut durchdachte Lernplattform für alle, die sich systematisch ins Backend Development einarbeiten wollen. Die Mischung aus Theorie, Praxis und spielerischen Elementen sorgt für eine angenehme Lernatmosphäre. Auch wenn die Inhalte für sehr schnelle Lerner etwas umfangreicher sein könnten, bleibt der Kurs lohnenswert - insbesondere wegen der praxisnahen Aufgaben und der fairen Preisgestaltung.',
@@ -53,7 +58,7 @@ export default {
 					'Und wenn man sich das Geld sparen möchte, dann gibt es auch viele kostenlose Videos auf deren [YouTube-Kanal](https://www.youtube.com/@bootdotdev).',
 				],
 			},
-		},
+		],
 	},
 	en: {
 		publishDate: '2025-02-08',
@@ -68,29 +73,33 @@ export default {
 			src: bootDev,
 			alt: 'boot.dev Blog',
 		},
-		content: {
-			structure: {
+		content: [
+			{
+				id: 'structure',
 				title: 'Structure and Content',
 				text: [
 					'BOOT.DEV offers a clear, well-organized curriculum that is perfect for anyone looking for a structured introduction to backend development. The courses build logically on each other, allowing you to work through the topics step by step. The platform places a strong emphasis on practical exercises, so you can immediately apply what you have learned.',
 					'A big advantage is that the content is not dry or boring. Instead, small challenges, mini-projects, and elements like bosses, power-ups, levels, challenges, quests, achievements, and a leaderboard keep you constantly motivated. I particularly liked the playful way BOOT.DEV conveys knowledge.',
 				],
 			},
-			journey: {
+			{
+				id: 'journey',
 				title: 'My Learning Journey',
 				text: [
 					'I originally expected the program to take several months. But due to an unexpected circumstance - a broken hand - I had more time to learn and completed the entire course in about six weeks. In fact, it could have been done in even less time. This speaks to the efficiency of the platform, but a more extensive offering would have been desirable.',
 					'Nevertheless, I found the price for the course fair, as the content is of high quality and conveyed in a practical manner. Those who learn quickly or already have basic knowledge may find BOOT.DEV a bit short, but as a solid foundation, it is definitely recommended.',
 				],
 			},
-			networking: {
+			{
+				id: 'networking',
 				title: 'More than just Programming: Career and Networking',
 				text: [
 					'A particular highlight for me was the module that dealt with applications and networking. It not only showed how to create a strong application, but also how important it is to network with other developers. Platforms like Meetup were presented as helpful resources to meet like-minded people and attend events.',
-					'Through this module, I discovered the Berlin Mini GameJam and participated directly - an experience that was not only fun but also sparked my enthusiasm for developing games together. However, I will report on this in a separate blog post.',
+					'Through this module, I discovered the Berlin Mini GameJam and participated directly - an experience that was not only fun but also sparked my enthusiasm for developing games together. However, I will report on this in a separate [blog post](/en/blog/first-game-jam).',
 				],
 			},
-			learned: {
+			{
+				id: 'learned',
 				title: 'What I Learned and Gained',
 				text: [
 					'For each completed module, I received a certificate, which gave me visible confirmation of my progress. Even though I am not a big fan of Python, I still learned everything I found interesting about the language. Additionally, I was able to gain new insights into C and memory management, which was particularly exciting for me. The topic of cryptography was also surprisingly interesting and offered many practical applications.',
@@ -98,7 +107,8 @@ export default {
 					'Topics like SQL, Go, Docker, and projects were already familiar to me from work and study, so I was able to complete these modules faster. Nevertheless, it was helpful to work on practical tasks, and through structured learning, I might have learned a thing or two.',
 				],
 			},
-			conclusion: {
+			{
+				id: 'conclusion',
 				title: 'Conclusion: Is BOOT.DEV worth it?',
 				text: [
 					'BOOT.DEV is a well-thought-out learning platform for anyone who wants to systematically get into backend development. The mix of theory, practice, and playful elements creates a pleasant learning atmosphere. Even if the content could be a bit more extensive for very fast learners, the course remains worthwhile - especially because of the practical tasks and the fair pricing.',
@@ -106,6 +116,6 @@ export default {
 					'And if you want to save money, there are also many free videos on their [YouTube channel](https://www.youtube.com/@bootdotdev).',
 				],
 			},
-		},
+		],
 	},
 } as const satisfies Translations;

src/i18n/pages/blog/first-game-jam.ts

@@ -0,0 +1,143 @@
+import { type Translations } from '@i18n/utils';
+import firstGameJam from '@public/images/blog/first-game-jam.webp';
+
+export default {
+	de: {
+		publishDate: '2025-02-09',
+		header: {
+			title: 'Mein erster Game Jam - Berlin Mini Jam 2024 - Blog',
+			description: 'Mein erster Game Jam: Erfahrungen, Herausforderungen und Erkenntnisse im Mini Jam Berlin 2024',
+		},
+		title: 'Mein erster Game Jam - Berlin Mini Jam 2024',
+		description:
+			'Nachdem ich durch BOOT.DEV auf die Seite Meetup aufmerksam wurde, habe ich mich sofort beim [Berlin Mini Jam](http://berlinminijam.de/) angemeldet und möchte nun hier meine Erfahrungen davon teilen.',
+		image: {
+			src: firstGameJam,
+			alt: 'Erster Game Jam Blog',
+		},
+		content: [
+			{
+				id: 'einstieg',
+				title: 'Wie ich zum Berlin Mini Jam gekommen bin',
+				text: [
+					'Im Dezember 2024 habe ich mich über Meetup beim Berlin Mini Jam angemeldet und teilgenommen. Bis dahin kannte ich Game Jams nur von YouTube, wo sie meist online und über mehrere Tage liefen. Allerdings wollte ich nicht alleine teilnehmen und kannte privat niemanden, der mitmachen würde. Umso glücklicher war ich, dass der Berlin Mini Jam ein lokales Event war - die perfekte Gelegenheit, neue Leute kennenzulernen.',
+					'Die Anreise nach Berlin war allerdings eine kleine Herausforderung. Einen Parkplatz zu finden, war nicht gerade einfach, aber ich habe es geschafft. Nach meiner Ankunft begann das Event mit einer Vorstellungsrunde, bei der man sich mit anderen Teilnehmern unterhalten konnte, um sich kennenzulernen. Ich merkte schnell, dass viele zum ersten Mal an einem Game Jam teilnahmen. Auch stellte sich heraus, dass die meisten mit Unity arbeiteten, einige wenige mit Godot, und Unreal war gar nicht vertreten. Das passte mir gut, obwohl ich seit ca. acht Jahren kein Spiel mehr mit Unity entwickelt hatte, habe ich meine letzte Erfahrung mit der Engine im Bereich Augmented Reality mit Vuforia gehabt und wusste noch wie man UI erstellt und den generellen Umgang mit der Engine.',
+				],
+			},
+			{
+				id: 'thema',
+				title: 'Themenwahl und Teamfindung',
+				text: [
+					'Nach der Vorstellungsrunde wurden die Themen für das Jam festgelegt. Diese waren:',
+					{ list: ['Waschbären', 'Harmlose Massenvernichtungswaffen', 'Ich bin hungrig'] },
+					'Die Teilnehmer konnten sich an diesen Themen orientieren, waren aber nicht dazu verpflichtet. Nach der Themenverkündung ging es an die Teamfindung. Ich tat mich mit papyroll (zuständig für Design und Dialoge) und metalpriest94 (Programmierer) zusammen. Wir kannten uns vorher nicht, doch das änderte sich schnell - wir verstanden uns gut und hatten Spaß an der Zusammenarbeit.',
+				],
+			},
+			{
+				id: 'idee',
+				title: 'Die Spielidee: Von Planetenfresser zu Visual Novel',
+				text: [
+					'Unsere erste Idee war ein Spiel, in dem ein Waschbär immer größer wird, indem er Müll frisst - bis hin zu ganzen Planeten. Doch als wir das Konzept vorstellten und nach weiteren Teammitgliedern suchten, entschieden wir uns spontan um: Wir entwickelten stattdessen eine Visual Novel! In dieser nutzt ein Waschbär eine Dating-App, um herauszufinden, wo du wohnst - damit er dir deinen Müll klauen kann.',
+				],
+			},
+			{
+				id: 'entwicklung',
+				title: 'Die Entwicklung: in 7 Stunden, ein fertiges Spiel',
+				text: [
+					'Da keiner von uns zuvor eine Visual Novel in Unity entwickelt hatte, brauchten wir eine Strategie. Wir entschieden uns für GitHub, legten ein Repository an und nutzten Issues zur Aufgabenverteilung. Nach der Namensfindung und der Einrichtung von Unity konnten wir bereits nach 30 Minuten mit der Umsetzung starten - schneller als erwartet!',
+					'Aufgabenverteilung:',
+					{ list: ['papyroll: Design, Pixelart, Dialoge', 'metalpriest94 & ich: Programmierung, UI, Szenenerstellung'] },
+					'Für die Dialoge planten wir ursprünglich verschiedene Enden und mehr Interaktionsmöglichkeiten. Doch mit nur sieben Stunden Zeit beschränkten wir uns auf ein simples Punktesystem: Je nach Antwort bekam der Spieler Plus- oder Minuspunkte, die am Ende zu einem von vier möglichen Enden führten.',
+					'Technisch setzten wir auf ScriptableObjects für die Dialoge. Ich kümmerte mich um die UI und das Design der Szenen, während metalpriest94 und ich gemeinsam die Dialoge einpflegten und testeten.',
+				],
+			},
+			{
+				id: 'endspurt',
+				title: 'Bugs, Stress und Erfolg',
+				text: [
+					'Wie es beim Programmieren oft der Fall ist, traten kurz vor Schluss noch einige Bugs auf. Insbesondere falsche Bilder in den Dialogen. Doch wir konnten die meisten Fehler schnell beheben und waren genau zur Deadline fertig, um unser Spiel zu präsentieren.',
+					'Ich war stolz darauf, dass wir in so kurzer Zeit ein funktionierendes Spiel entwickelt hatten, auch wenn es ohne Audio auskommen musste. Beim Präsentieren stellte sich heraus, dass wir nicht die Einzigen mit technischen Problemen waren: Manche Teams hatten nur einen Prototyp, einige waren durch Bugs komplett lahmgelegt, und andere hatten nur Musik fertiggestellt. Doch das tat der Stimmung keinen Abbruch.',
+					'Besonders gefreut hat mich, dass unser Spiel bei den anderen Teilnehmern gut ankam und für einige Lacher sorgte.',
+				],
+			},
+			{
+				id: 'fazit',
+				title: 'Fazit: Mein erster Game Jam, aber nicht der letzte!',
+				text: [
+					'Der Berlin Mini Jam war als erster Jam eine unglaublich interessante Erfahrung und hat besser geklappt als geplant. Ich habe viele neue Leute kennengelernt, viel über Game-Entwicklung in Unity gelernt und in nur sieben Stunden ein komplettes Spiel mit meinem Team erstellt. Es war stressig, aber auch unglaublich lohnend.',
+					'Unser fertiges Spiel kann man sich hier anschauen und auch spielen: [I want you(r trash)](https://metalpriest94.itch.io/i-want-your-trash). Auch ein paar weitere Projekte des Jams gibt es hier: [Berlin Mini Jam 2024](https://itch.io/jam/berlin-mini-jam-2024).',
+					'Ich freue mich schon auf das nächste Game Jam!',
+				],
+			},
+		],
+	},
+	en: {
+		publishDate: '2025-02-09',
+		header: {
+			title: 'My First Game Jam - Berlin Mini Jam 2024 - Blog',
+			description: 'My first Game Jam: experiences, challenges, and insights at the Mini Jam Berlin 2024',
+		},
+		title: 'My First Game Jam - Berlin Mini Jam 2024',
+		description:
+			'After discovering Meetup via BOOT.DEV, I immediately registered for the [Berlin Mini Jam](http://berlinminijam.de/) and would like to share my experiences here.',
+		image: {
+			src: firstGameJam,
+			alt: 'First Game Jam Blog',
+		},
+		content: [
+			{
+				id: 'entryPoint',
+				title: 'How I Found My Way to the Berlin Mini Jam',
+				text: [
+					'In December 2024, I registered for the Berlin Mini Jam through Meetup and took part. Until then, I only knew Game Jams from YouTube, where they mostly took place online over multiple days. However, I did not want to participate alone and had no friends who would join me. All the more reason I was happy to see that the Berlin Mini Jam was a local event - a perfect chance to meet new people.',
+					'Getting to Berlin proved somewhat tricky. Finding a parking space was not easy, but I managed. After arriving, the event started with a round of introductions where everyone could chat and get to know each other. I quickly noticed that many were attending a Game Jam for the first time. It also turned out that most participants used Unity, a few used Godot, and nobody used Unreal. That worked fine for me: although it had been around eight years since I last used Unity, I still remembered how to set up UIs and generally handle the engine from my previous experience with Vuforia for AR.',
+				],
+			},
+			{
+				id: 'theme',
+				title: 'Choosing a Theme and Forming a Team',
+				text: [
+					'After the introductions, the themes for the jam were announced. They were:',
+					{ list: ['Raccoons', 'Harmless Weapons of Mass Destruction', "I'm Hungry"] },
+					'Participants could follow these themes but were not required to. Once the themes were announced, we began team formation. I teamed up with papyroll (design and dialogues) and metalpriest94 (programming). We did not know each other beforehand, but that changed quickly - we got along well and enjoyed working together.',
+				],
+			},
+			{
+				id: 'idea',
+				title: 'The Game Idea: From Planet Eater to Visual Novel',
+				text: [
+					'Our original idea was a game where a raccoon becomes ever larger as it eats more trash - eventually moving on to entire planets. But when we pitched the concept and searched for more teammates, we spontaneously changed our plans: we developed a visual novel instead! In it, a raccoon uses a dating app to find out where you live - so it can get your trash.',
+				],
+			},
+			{
+				id: 'development',
+				title: 'Development: A Complete Game in 7 Hours',
+				text: [
+					'None of us had created a visual novel in Unity before, so we needed a plan. We decided to use GitHub, created a repository, and used issues to assign tasks. After picking a name and setting up Unity, we were able to start implementing our game within just 30 minutes - faster than expected!',
+					'Task distribution:',
+					{ list: ['papyroll: Design, pixel art, dialogue', 'metalpriest94 & me: Programming, UI, scene creation'] },
+					'We had planned multiple endings and more interactivity for the dialogues, but with only seven hours, we settled for a simple points system: Each player answer gave plus or minus points, ending in one of four possible outcomes.',
+					'From a technical perspective, we used ScriptableObjects for the dialogue. I handled the UI and scene design, while metalpriest94 and I imported and tested the dialogues together.',
+				],
+			},
+			{
+				id: 'final',
+				title: 'Final Stretch: Bugs, Stress, and Success',
+				text: [
+					'As often happens in programming, a few bugs cropped up at the last minute, especially incorrect images in the dialogues. We managed to fix most of them quickly, and wrapped up just in time to present our game.',
+					'I was proud that we had completed a working game in such a short period, even if it lacked audio. During the presentation, it turned out we were not the only ones with technical issues: some teams only had a prototype, some got bogged down by bugs, and others only managed to produce music. Still, it did not dampen the mood.',
+					'I was especially pleased that our game was well-received by the other participants and got a few laughs.',
+				],
+			},
+			{
+				id: 'conclusion',
+				title: 'Conclusion: My First Game Jam, But Not My Last!',
+				text: [
+					'The Berlin Mini Jam was an incredibly interesting experience for my first jam and went better than expected. I met many new people, learned a lot about game development in Unity, and built a complete game with my team in just seven hours. It was stressful but very rewarding.',
+					'You can check out and play our finished game here: [I want you(r trash)](https://metalpriest94.itch.io/i-want-your-trash). There are also a few other projects from the jam here: [Berlin Mini Jam 2024](https://itch.io/jam/berlin-mini-jam-2024).',
+					'I am already looking forward to the next Game Jam!',
+				],
+			},
+		],
+	},
+} as const satisfies Translations;

src/i18n/utils.ts

@@ -2,6 +2,7 @@ import headComponentTranslations from '@i18n/components/head';
 import tableOfContentsComponentTranslations from '@i18n/components/tableOfContents';
 import linkTranslations from '@i18n/link';
 import bootDevPageTranslations from '@i18n/pages/blog/boot-dev';
+import firstGameJamPageTranslations from '@i18n/pages/blog/first-game-jam';
 import blogIndexPageTranslations from '@i18n/pages/blog/index';
 import tsPathsAliasesInAstroPageTranslations from '@i18n/pages/blog/ts-paths-aliases-in-astro-config';
 import copyrightPageTranslations from '@i18n/pages/copyright';
@@ -35,6 +36,7 @@ const translations = {
 		blog: {
 			index: blogIndexPageTranslations,
 			bootDev: bootDevPageTranslations,
+			firstGameJam: firstGameJamPageTranslations,
 			tsInAstro: tsPathsAliasesInAstroPageTranslations,
 		},
 		references: {

src/layouts/Layout.astro

@@ -3,6 +3,7 @@ import { author } from '@/package.json';
 import { CookieBanner, Footer, Header } from '@components/index';
 import { getLangFromUrl, useTranslations } from '@i18n/utils';
 import { fileTransferURL } from '@pages/en/file-transfer.astro';
+import notificationScriptUrl from '@public/scripts/notification?url';
 import { site, siteName } from '@shared/constants';
 import { indexSuffixRegEx, type SchemaProps } from '@shared/helpers';
 import noscriptStylesUrl from '@styles/noscript.scss?url';
@@ -90,7 +91,7 @@ const mainProps = Object.keys(props).reduce((prev, curr) => {
 			import.meta.env.PROD && (
 				<meta
 					http-equiv="content-security-policy"
-					content={`default-src 'none'; script-src ${site}/_astro/ ${site}/scripts/; style-src ${site}/_astro/ 'unsafe-inline'; img-src ${site}/; font-src 'none'; connect-src ${site}/ ${fileTransferURL}; frame-src ${fileTransferURL}; object-src 'none'; media-src 'none'; worker-src 'none';`}
+					content={`default-src 'none'; script-src ${site}/_astro/ ${site}/scripts/ 'unsafe-inline'; script-src-attr 'none'; style-src ${site}/_astro/ 'unsafe-inline'; img-src ${site}/; font-src 'none'; connect-src ${site}/ ${fileTransferURL}; frame-src ${fileTransferURL}; object-src 'none'; media-src 'none'; worker-src 'none';`}
 				/>
 			)
 		}
@@ -114,7 +115,7 @@ const mainProps = Object.keys(props).reduce((prev, curr) => {
 		<link rel="canonical" href={props.canonical || Astro.url.href.replace(indexSuffixRegEx, '')} />
 		<link rel="sitemap" href="/sitemap.xml" />
 
-		<script src="/scripts/notification.js" is:inline></script>
+		<script src={notificationScriptUrl} is:inline></script>
 
 		<ClientRouter />
 	</head>

src/pages/en/blog/boot-dev.astro

@@ -1,5 +1,5 @@
 ---
-import { Image, ReplacerParagraph, TableOfContents } from '@components/index';
+import { BlogContent, Image, ReplacerParagraph, TableOfContents } from '@components/index';
 import { getLangFromUrl, useTranslations } from '@i18n/utils';
 import Layout from '@layouts/Layout.astro';
 import { getBlogSchema } from '@shared/helpers';
@@ -20,14 +20,7 @@ const schema = getBlogSchema(Astro.url.href, {
 
 	<Image image={translate('page.blog.bootDev.image')} popup />
 
-	<TableOfContents list={Object.entries(translate('page.blog.bootDev.content')).map(([key, value]) => ({ id: key, title: value.title }))} />
+	<TableOfContents list={translate('page.blog.bootDev.content')} />
 
-	{
-		Object.entries(translate('page.blog.bootDev.content')).map(([key, value]) => (
-			<section id={key}>
-				<h2 set:html={value.title} />
-				<ReplacerParagraph content={value.text} />
-			</section>
-		))
-	}
+	<BlogContent content={translate('page.blog.bootDev.content')} />
 </Layout>

src/pages/en/blog/first-game-jam.astro

@@ -0,0 +1,26 @@
+---
+import { BlogContent, Image, ReplacerParagraph, TableOfContents } from '@components/index';
+import { getLangFromUrl, useTranslations } from '@i18n/utils';
+import Layout from '@layouts/Layout.astro';
+import { getBlogSchema } from '@shared/helpers';
+
+const lang = getLangFromUrl(Astro.url);
+const translate = useTranslations(lang);
+
+const schema = getBlogSchema(Astro.url.href, {
+	headline: translate('page.blog.firstGameJam.header.title'),
+	description: translate('page.blog.firstGameJam.header.description'),
+	datePublished: translate('page.blog.firstGameJam.publishDate'),
+});
+---
+
+<Layout class="content-grid" style={{ '--content-width': '80ch' }} {...translate('page.blog.firstGameJam.header')} {schema}>
+	<h1 class="breakout" set:html={translate('page.blog.firstGameJam.title')} />
+	<ReplacerParagraph content={translate('page.blog.firstGameJam.description')} />
+
+	<Image image={translate('page.blog.firstGameJam.image')} popup />
+
+	<TableOfContents list={translate('page.blog.firstGameJam.content')} />
+
+	<BlogContent content={translate('page.blog.firstGameJam.content')} />
+</Layout>

src/shared/collections.ts

@@ -17,9 +17,9 @@ const blogsTranslation = Object.fromEntries<Translations>(
 		globVal.default,
 	]),
 );
-export const getBlogs = (lang: Language) =>
+export const getBlogs = (lang: Language, maxBlogs = Number.MAX_SAFE_INTEGER) =>
 	Object.entries(import.meta.glob<AstroInstance>('@pages/en/blog/**/*.astro', { eager: true }))
-		.filter(([key]) => !key.endsWith('index.astro'))
+		.filter(([key], i) => !key.endsWith('index.astro') && i < maxBlogs)
 		.map(([key, page]) => ({ ...blogsTranslation[parse(key).name]?.[lang], href: translateHref(page.url!, 'en')(lang) }) as BlogFile)
 		.sort((a, b) => {
 			const aArr = a.publishDate?.split('-').map(Number) || [0, 0, 0];