Testing lite-youtube for embed
All checks were successful
/ checking (push) Successful in 31s
/ publish (push) Successful in 9s
/ build-site (push) Successful in 2m52s
/ unlighthouse (push) Successful in 32s
/ deploy-unlighthouse-files (push) Successful in 8s
/ deploy-unlighthouse-site (push) Successful in 8s

This commit is contained in:
Firq 2023-12-29 18:24:44 +01:00
parent 71a6ea0051
commit cb8b53ea63
Signed by: Firq
GPG key ID: 4DE1059A4666E89F
7 changed files with 1145 additions and 7 deletions

View file

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

1123
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -11,7 +11,9 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astro-community/astro-embed-youtube": "^0.4.3",
"@astrojs/check": "^0.3.3", "@astrojs/check": "^0.3.3",
"@astrojs/mdx": "^2.0.3",
"@astrojs/sitemap": "^3.0.3", "@astrojs/sitemap": "^3.0.3",
"astro": "^4.0.7", "astro": "^4.0.7",
"iconoir": "^7.2.0", "iconoir": "^7.2.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

View file

@ -120,6 +120,18 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
color: orange; color: orange;
} }
article :global(.youtube-center) {
width: 100%;
display: flex;
justify-content: center;
}
article :global(.youtube-center) :global(lite-youtube) {
width: 100%;
max-height: 360px;
max-width: 640px;
}
@media (min-width: 1000px) { @media (min-width: 1000px) {
article { article {
margin-left: 10rem; margin-left: 10rem;

View file

@ -5,7 +5,7 @@ import BlogSection from '../layouts/blogSection.astro'
const description = const description =
'My own small blog. Topics include FGO, TA, Programming, web technologies and more!' '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( allPosts.sort(
(a, b) => (a, b) =>
Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate) Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)

View file

@ -6,6 +6,8 @@ description: 'Blog post talking about instant death in FGO, how you can take adv
author: 'Firq' author: 'Firq'
tags: ['fgo', 'games'] tags: ['fgo', 'games']
--- ---
import { YouTube } from '@astro-community/astro-embed-youtube';
import thumbnail from "../../assets/thumbnails/UwbNp_dB_VU.jpg"
> **Disclaimer**<br/> > **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" > 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,10 +105,11 @@ 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. 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"> <div class="youtube-center">
<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> <YouTube id="UwbNp_dB_VU" poster={thumbnail.src}/>
</div> </div>
## Conclusion ## Conclusion
This small article should have given you an insight into using Instant Death as an advantage in the future. But remember: Stacking Gacha in a Gacha game can backfire. This small article should have given you an insight into using Instant Death as an advantage in the future. But remember: Stacking Gacha in a Gacha game can backfire.