Emulation/website-PretendoNetwork
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2025-04-02 11:11:50 -04:00
Code Issues Projects Releases Packages Wiki Activity

feat(blog): Add easy to use YouTube iframe with aspect-ratio fallback

Browse source 
[yt-iframe](videoID)
This commit is contained in:
Monty 2021-09-30 21:12:50 +02:00
parent 5fe413e5e2
commit 3a0ee14aaf
No known key found for this signature in database
GPG key ID: 78B405B6520E1012
2 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
blogposts/_test.md
View file

@ -126,9 +126,9 @@ console.log(trueOrFalseJSON);
<cite>Adapted from [blockquote: The Block Quotation element, from MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)</cite>
<div class="aspectratio-fallback">
<iframe src="https://www.youtube.com/embed/HGoCNOFpWpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
[yt-iframe](djV11Xbc914)
```[yt-iframe](djV11Xbc914)```
![test](https://media.discordapp.net/attachments/413884110667251722/886474243662037062/image1.jpg)

24
src/routers/blog.js
View file

@ -17,10 +17,14 @@ const postList = () => {
.filter(filename => filename.endsWith('.md')) // Ignores other files/folders
.map((filename) => {
const slug = filename.replace('.md', '');
const rawPost = fs.readFileSync(path.join('blogposts', `${filename}`), 'utf-8');
const rawPost = fs.readFileSync(
path.join('blogposts', `${filename}`),
'utf-8'
);
const { data: postInfo } = matter(rawPost);
return {
slug, postInfo
slug,
postInfo,
};
});
@ -63,7 +67,7 @@ router.get('/feed.xml', async (request, response) => {
});
});
router.get('/:slug', async (request, response) => {
router.get('/:slug', async (request, response, next) => {
const reqLocale = request.locale;
const locale = util.getLocale(reqLocale.region, reqLocale.language);
@ -79,12 +83,18 @@ router.get('/:slug', async (request, response) => {
rawPost = fs.readFileSync(path.join('blogposts', `${postName}.md`), 'utf-8');
} catch(err) {
logger.error(err);
response.sendStatus(404);
logger.warn(`HTTP 404 at /blog/${postName}`);
next();
return;
}
// Convert the post info into JSON and separate it and the content
const { data: postInfo, content } = matter(rawPost);
// eslint-disable-next-line prefer-const
let { data: postInfo, content } = matter(rawPost);
// Replace [yt-iframe](videoID) with the full <iframe />
content = content
.replaceAll(/(?<!`)\[yt-iframe]\(/g, '<div class="aspectratio-fallback"><iframe src="https://www.youtube-nocookie.com/embed/')
.replaceAll(/(?<=<iframe src="https:\/\/www\.youtube-nocookie\.com\/embed\/.{11})\)/g, '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>');
// Convert the content into HTML
const htmlPost = marked(content);
@ -93,7 +103,7 @@ router.get('/:slug', async (request, response) => {
locale,
localeString,
postInfo,
htmlPost
htmlPost,
});
});