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> <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"> [yt-iframe](djV11Xbc914)
<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)```
![test](https://media.discordapp.net/attachments/413884110667251722/886474243662037062/image1.jpg) ![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 .filter(filename => filename.endsWith('.md')) // Ignores other files/folders
.map((filename) => { .map((filename) => {
const slug = filename.replace('.md', ''); 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); const { data: postInfo } = matter(rawPost);
return { 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 reqLocale = request.locale;
const locale = util.getLocale(reqLocale.region, reqLocale.language); 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'); rawPost = fs.readFileSync(path.join('blogposts', `${postName}.md`), 'utf-8');
} catch(err) { } catch(err) {
logger.error(err); logger.error(err);
response.sendStatus(404); next();
logger.warn(`HTTP 404 at /blog/${postName}`);
return; return;
} }
// Convert the post info into JSON and separate it and the content // 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 // Convert the content into HTML
const htmlPost = marked(content); const htmlPost = marked(content);
@ -93,7 +103,7 @@ router.get('/:slug', async (request, response) => {
locale, locale,
localeString, localeString,
postInfo, postInfo,
htmlPost htmlPost,
}); });
}); });