resolved how to run scripts in articles, added devbreak broadcasts

_posts/blog/2022-03-16-devbreak-1-state-of-js-2021.md

@@ -0,0 +1,19 @@
+---
+layout: blog
+title: "DevBreak #1 State of JS 2021 review with Lukáš Orgován"
+segments:
+  - broadcasts
+published: true
+date: 2022-03-16T22:22:21.191Z
+tags:
+  - DevBreak
+---
+
+The first episode of the [DevBreak talk show](/broadcasts/tags/DevBreak).
+I've invited my close friend and a tech lead [Lukáš Orgován](https://www.linkedin.com/in/lukasorgovan/) to talk about the opinions on the results of the [State of JS 2021 survey](https://2021.stateofjs.com/en-us/).
+
+This episode aired in 16th of March 2022 and is in Slovak language.
+
+<div class="video-embed">
+<iframe src="https://player.twitch.tv/?video=1427225407&parent=localhost&parent=michalvanko.dev" frameborder="0" allowfullscreen="true" scrolling="no" height="100%" width="100%" class="embed"></iframe>
+</div>

_posts/blog/2022-04-27-devbreak-2-stories-and-impressions-hack-kosice.md

@@ -0,0 +1,17 @@
+---
+layout: blog
+title: "DevBreak #2 Stories and impressions from Hack Kosice 2022"
+segments:
+  - broadcasts
+published: true
+date: 2022-04-16T22:22:21.191Z
+tags:
+  - DevBreak
+---
+
+At the last possible moment, I have been able to invite **Daniela, Samuel, and Filip** over to talk about stories and their impressions of the _Hack Kosice 2022_ event that took place last weekend.
+This episode aired in 27th of April 2022 and is in Slovak language.
+
+<div class="video-embed">
+<iframe src="https://player.twitch.tv/?video=1468441353&parent=localhost&parent=michalvanko.dev" frameborder="0" allowfullscreen="true" scrolling="no" height="100%" width="100%" class="embed"></iframe>
+</div>

_posts/blog/2022-06-14-devbreak-3-full-stack-development.md

@@ -0,0 +1,17 @@
+---
+layout: blog
+title: "DevBreak #3 Full-stack development with Dominik Štefan"
+segments:
+  - broadcasts
+published: true
+date: 2022-06-14T22:22:21.191Z
+tags:
+  - DevBreak
+---
+
+My friend and former collegue [Dominik Štefan](https://www.linkedin.com/in/dominik-%C5%A1tefan-167266180/) came by to talk about his experience working on full-stack web application development. We have talked about many different topics but most importantly we had a lot of fun.
+This episode aired in 14th of June 2022 and is in Slovak language.
+
+<div class="video-embed">
+<iframe src="https://player.twitch.tv/?video=1503339615&parent=localhost&parent=michalvanko.dev" frameborder="0" allowfullscreen="true" scrolling="no" height="100%" width="100%" class="embed"></iframe>
+</div>

_posts/blog/2023-01-22-devbreak-4-state-of-js-2022.md

@@ -0,0 +1,18 @@
+---
+layout: blog
+title: "DevBreak #4 State of JS 2022 review with Filip Seman"
+segments:
+  - broadcasts
+published: true
+date: 2023-01-22T22:22:21.191Z
+tags:
+  - DevBreak
+---
+
+After another year, the results for the [State of JS](https://2022.stateofjs.com/en-us/) survey has been published.
+I've invited my #1 fan and friend [Filip Seman](https://www.linkedin.com/in/xseman/).
+This episode aired in 22nd of January 2023 and is in Slovak language.
+
+<div class="video-embed">
+<iframe src="https://player.twitch.tv/?video=1715138585&parent=localhost&parent=michalvanko.dev" frameborder="0" allowfullscreen="true" scrolling="no" height="100%" width="100%" class="embed"></iframe>
+</div>

_posts/blog/2023-02-04-devbreak-5-joys-and-concerns-of-engineering-manager.md

@@ -0,0 +1,17 @@
+---
+layout: blog
+title: "DevBreak #5 Joys and concerns of Engineering manager with Pavol Dudrík"
+segments:
+  - broadcasts
+published: true
+date: 2023-02-04T22:22:21.191Z
+tags:
+  - DevBreak
+---
+
+This episode I've invited my friend [Pavol Dudrík](https://www.linkedin.com/in/pavol-dudr%C3%ADk-043100168/) to talk about what motivates us and makes us happy about the work of Engineering manager. This job combines two different views, and the transition from engineer to manager is often full of pitfalls. We would like to share our experience and dispel the misconceptions that are often associated with managerial positions in IT.
+This episode aired in 4th of February 2023 and is in Slovak language.
+
+<div class="video-embed">
+<iframe src="https://player.twitch.tv/?video=1728904048&parent=localhost&parent=michalvanko.dev" frameborder="0" allowfullscreen="true" scrolling="no" height="100%" width="100%" class="embed"></iframe>
+</div>

src/lib/articleContent/onMountScripts.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    onMountScripts?: Array<() => void>
+  }
+}
+export function runOnMountScripts() {
+  window.onMountScripts?.forEach((fn) => {
+    fn()
+  })
+}
+

src/lib/styles/article/article.css.ts

@@ -19,3 +19,9 @@ globalStyle(`${contentClass} img:only-child`, {
   display: 'block',
   margin: '0 auto',
 })
+
+globalStyle(`${contentClass} .video-embed`, {
+  margin: '0 auto',
+  maxWidth: vars.width.image,
+  aspectRatio: vars.aspectRatio.monitor,
+})

src/routes/blog/[slug=blogPage]/+page.svelte

@@ -2,8 +2,14 @@
   import ArticleFooter from '$lib/components/articles/ArticlePreviewFooter/ArticlePreviewFooter.svelte'
   import type { PageData } from './$types'
   import { contentClass } from '$lib/styles/article/article.css'
+  import { onMount } from 'svelte'
+  import { runOnMountScripts } from '$lib/articleContent/onMountScripts'
 
   export let data: PageData
+
+  onMount(() => {
+    runOnMountScripts()
+  })
 </script>
 
 <svelte:head>
@@ -12,7 +18,7 @@
 
 <h1>{data.title}</h1>
 
-<div class="content {contentClass}">
+<article class="content {contentClass}">
   {@html data.body}
-</div>
+</article>
 <ArticleFooter article={data} segment="blog" />

src/routes/broadcasts/[slug=blogPage]/+page.svelte

@@ -2,8 +2,14 @@
   import ArticleFooter from '$lib/components/articles/ArticlePreviewFooter/ArticlePreviewFooter.svelte'
   import type { PageData } from './$types'
   import { contentClass } from '$lib/styles/article/article.css'
+  import { onMount } from 'svelte'
+  import { runOnMountScripts } from '$lib/articleContent/onMountScripts'
 
   export let data: PageData
+
+  onMount(() => {
+    runOnMountScripts()
+  })
 </script>
 
 <svelte:head>
@@ -12,7 +18,7 @@
 
 <h1>{data.title}</h1>
 
-<div class="content {contentClass}">
+<article class="content {contentClass}">
   {@html data.body}
-</div>
+</article>
 <ArticleFooter article={data} segment="broadcasts" />

static/admin/config.yml

@@ -25,7 +25,7 @@ collections:
         multiple: true
         options: 
           - { label: 'Blog', value: 'blog' }
-          - { label: 'Broadcasts', value:  'Broadcasts' }
+          - { label: 'Broadcasts', value:  'broadcasts' }
           - { label: 'Cookbook', value: 'cookbook' }
         default: ['blog']
       - {