search

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
7.43k stars 1.87k forks source link

Integrating YT video canvases in MD #863

Closed artajohan369 closed 3 months ago

artajohan369 commented 4 months ago

Is your feature request related to a problem? Please describe. Currently there is no possibility to add a YT video in md

Describe the solution you'd like I want it to be like in other templates like <Youtube id="ZEe-IFezQok" title="Play:Youtube"/>

Describe alternatives you've considered

Additional context

rhokstar commented 4 months ago

@artajohan369

here's what i did: https://github.com/rhokstar/rhokstar.com/blob/main/components/YouTube.tsx

and then implemented YouTube component like this: https://github.com/rhokstar/rhokstar.com/blob/main/app/page.tsx https://github.com/rhokstar/rhokstar.com/blob/main/app/blog/%5B...slug%5D/page.tsx

and then on blog post level example: https://github.com/rhokstar/rhokstar.com/blob/main/data/blog/hijacking-ships/aegis-hammerhead.mdx

mensenvau commented 3 months ago

Screenshot 2024-04-13 at 16 17 47

I think we need to add the domain to the ContentSecurityPolicy variable in next.config.js.

timlrx commented 3 months ago

Yup, the approach by rhokstar works, or I have a remark-webembed plugin that you could try using as well: https://github.com/timlrx/remark-webembed

fess932 commented 2 months ago

Yup, the approach by rhokstar works, or I have a remark-webembed plugin that you could try using as well: https://github.com/timlrx/remark-webembed

ConfigReadError (/Users/fess932/git/blog/contentlayer.config.ts): Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/fess932/git/blog/node_modules/async/tryEach' imported from /Users/fess932/git/blog/node_modules/remark-webembed/dist/src/modules/webembed-handler.js Did you mean to import "async/tryEach.js"?

Error