Merge pull request 'Custom Youtube Embed' (#18) from dev into main

Reviewed-on: #18

astro.config.mjs

@@ -1,8 +1,10 @@
 import { defineConfig } from 'astro/config';
 
-// https://astro.build/config
 import sitemap from "@astrojs/sitemap";
 
+// https://astro.build/config
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
   sitemap: true,
@@ -10,5 +12,5 @@ export default defineConfig({
   outDir: 'dist',
   publicDir: 'static',
   site: 'https://firq.dev/',
-  integrations: [sitemap()]
+  integrations: [sitemap(), mdx()]
 });

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.1.15",
+	"version": "0.1.16",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@@ -11,7 +11,9 @@
 		"astro": "astro"
 	},
 	"dependencies": {
+		"@astro-community/astro-embed-youtube": "^0.4.3",
 		"@astrojs/check": "^0.3.3",
+		"@astrojs/mdx": "^2.0.3",
 		"@astrojs/sitemap": "^3.0.3",
 		"astro": "^4.0.7",
 		"iconoir": "^7.2.0",

src/components/youtubeEmbed.astro

@@ -0,0 +1,61 @@
+---
+import { YouTube } from '@astro-community/astro-embed-youtube'
+export interface Props {
+  id: string
+  thumbnail: string
+}
+
+const { id, thumbnail } = Astro.props
+---
+
+<div class="youtube-center">
+  <noscript style="display: flex; justify-content: center;">
+    <style>
+      lite-youtube {
+        display: none;
+      }
+    </style>
+    <div class="warningtext">
+      <span>
+        To view the video, enable JavaScript or<br /><a
+          href=`https://www.youtube.com/watch?v=${id}`
+          target="_blank"
+          rel="noopener noreferrer">watch it on YouTube</a
+        >
+      </span>
+    </div>
+  </noscript>
+  <YouTube id={id} poster={thumbnail} />
+</div>
+
+<style>
+  .youtube-center {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  lite-youtube {
+    width: 100%;
+    max-height: 360px;
+    max-width: 640px;
+  }
+
+  .warningtext {
+    display: flex;
+    justify-content: center;
+    background-color: var(--c-darkgray);
+    width: 640px;
+    height: 360px;
+  }
+
+  span {
+    text-align: center;
+    margin-top: 20%;
+  }
+
+  span > a {
+    font-style: unset;
+    font-weight: bold;
+  }
+</style>

src/pages/blog.astro

@@ -5,7 +5,7 @@ import BlogSection from '../layouts/blogSection.astro'
 
 const description =
   'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
-const allPosts = await Astro.glob('../pages/blog/*.md')
+const allPosts = await Astro.glob('../pages/blog/*.{md,mdx}')
 allPosts.sort(
   (a, b) =>
     Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)

src/pages/blog/instant-death.mdx

@@ -6,6 +6,8 @@ description: 'Blog post talking about instant death in FGO, how you can take adv
 author: 'Firq'
 tags: ['fgo', 'games']
 ---
+import thumbnail from "../../assets/thumbnails/UwbNp_dB_VU.jpg"
+import YoutubeEmbed from "../../components/youtubeEmbed.astro"
 
 > **Disclaimer**<br/>
 > While writing this, Requiem and I faced a bit of a challenge concerning death rate calculations. Case in point is the passive "Item Construction"
@@ -103,9 +105,8 @@ For other skill levels, this looks like this (_Her S1 scales from 50% to 100%_)
 
 In the end, this resulted in the following comp that worked like a charm.
 
-<div style="width: 100%; display: flex; justify-content: center; padding-top: 0.75rem">
+<YoutubeEmbed id="UwbNp_dB_VU" thumbnail={thumbnail.src}/>
-<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/UwbNp_dB_VU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>
+
-</div>
 
 ## Conclusion