Add new Mastering Nuxt top banner

nicodevs commented 1 year ago

This PR is similar to https://github.com/nuxt/nuxtjs.org/pull/2159

It adds an external script that renders the top banner of Mastering Nuxt at the top of the site. When clicked, it opens the Mastering Nuxt website in a new tab.

To quickly preview the banner on your website, you can follow these steps:

Go to nuxtjs.org
Open the developer toolbar
Run the following:

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://masteringnuxt.com/banner.js?affiliate=nuxt&type=top';    
document.head.appendChild(script);

That will add the script to the head and give you a live preview of how it will look when this PR gets merged.

Here's an screencast of the banner in action: https://imgur.com/a/B89zOiL

Let me know if you have comments or questions.

codesandbox[bot] commented 1 year ago

CodeSandbox logo Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

netlify[bot] commented 1 year ago

Deploy Preview for nuxt ready!

Name	Link
Latest commit	c765210d6682c7c39821370982d5eaf7d2dc7c78
Latest deploy log	https://app.netlify.com/sites/nuxt/deploys/641b64bda98d3400084c6620
Deploy Preview	https://deploy-preview-2218--nuxt.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

nuxt / website-v2