Custom Youtube Embed #18
7 changed files with 1194 additions and 9 deletions
|
@ -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
1123
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "@firq/fgosite",
|
"name": "@firq/fgosite",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.1.15",
|
"version": "0.1.16",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
|
@ -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",
|
||||||
|
|
BIN
src/assets/thumbnails/UwbNp_dB_VU.jpg
Normal file
BIN
src/assets/thumbnails/UwbNp_dB_VU.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 145 KiB |
61
src/components/youtubeEmbed.astro
Normal file
61
src/components/youtubeEmbed.astro
Normal file
|
@ -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>
|
|
@ -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)
|
||||||
|
|
|
@ -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 thumbnail from "../../assets/thumbnails/UwbNp_dB_VU.jpg"
|
||||||
|
import YoutubeEmbed from "../../components/youtubeEmbed.astro"
|
||||||
|
|
||||||
> **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,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.
|
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
|
## Conclusion
|
||||||
|
|
Loading…
Reference in a new issue