Fix liquid template copy component 1337

[JayKay24]

Description

This PR fixes #1337

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

[netlify]

✅ Deploy Preview for mesheryio-preview ready!

Name	Link
🔨 Latest commit	a29620c
🔍 Latest deploy log	https://app.netlify.com/sites/mesheryio-preview/deploys/6536a6eaa7f74f00085603a2
😎 Deploy Preview	https://deploy-preview-1348--mesheryio-preview.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 configuration.

[Ghat0tkach]

hey @JayKay24 ,

Let's discuss it on the websites call.
Please add this as an agenda item in the meeting minutes, if you would :)

https://docs.google.com/document/d/1XczAHXVe2FIWPqiF57ospJ43zw5cZQ7ui8mn39v5EvA/edit#heading=h.lohhtewfwima

[thisiskaransgit]

@JayKay24, thanks much, please take a look into the footer.html to make sure there's no overlapping script.

[JayKay24]

@thisiskaransgit Thanks for your review. The code in footer.html only has the javascript function(resetCopyText) and dependency(clipboard.min.js) needed to copy a piece of text. It is only defined in that file. I abstracted away the repeated HTML into a copy-to-clipboard.html template that still references the resetCopyText defined in footer.html.

[thisiskaransgit]

We are good to then, thanks @JayKay24 👍🏼

[JayKay24]

I've updated the branch to keep it mergable but will need a re-review @thisiskaransgit

[thisiskaransgit]

@JayKay24, use of CDN, we need to replace it with a locally available file, otherwise the payload will not be improved. You can reference the implementation in docs.meshery.io if required. I overlooked it initially but we need this update

[JayKay24]

@thisiskaransgit does that mean that I integrate npm into the project? This would allow me to use the clipboard library currently loaded via CDN as a local npm module.

[thisiskaransgit]

@thisiskaransgit does that mean that I integrate npm into the project? This would allow me to use the clipboard library currently loaded via CDN as a local npm module.

@JayKay24 declare the javascript logic in the code. the desired behavior should be that the class element can use the locally hosted code and not third-party module, which will a) reduce load b) filter the unused code that comes along c) opt out of depending on other services. This is what I intend to update for other sections too actually.

take a look at here for reference: https://github.com/meshery/meshery/blob/master/docs/assets/js/main.js

[Chadha93]

@thisiskaransgit does that mean that I integrate npm into the project? This would allow me to use the clipboard library currently loaded via CDN as a local npm module.

@JayKay24 declare the javascript logic in the code. the desired behavior should be that the class element can use the locally hosted code and not third-party module, which will a) reduce load b) filter the unused code that comes along c) opt out of depending on other services. This is what I intend to update for other sections too actually.

take a look at here for reference: meshery/meshery@master/docs/assets/js/main.js

@JayKay24, does this helps?

[JayKay24]

@Chadha93 i haven't had a chance to dive deep into the solution but from what I can tell is that I will wrap the clipboard logic inside an IIFE. Will look to address this tomorrow. I'll post any questions I have in this thread.

[JayKay24]

@thisiskaransgit The example you gave me also references the clipboard.min.js library via CDN in this file -> https://github.com/meshery/meshery/blob/master/docs/_layouts/default.html.

I don't understand what you mean when you say the payload will be improved. Which payload is this? Do you mean that what we want is to avoid the extra HTTP request of downloading the clipboard.min.js dependency on page load in order to achieve a faster loading rate by having the browser parse a local .js file with clipboard logic?
If this is the case, there's a way to use the dependency locally by downloading and extracting the zip file if we're not into package management. But if we do it this way, we won't have a way to keep it up to date easily.
The other option is to integrate the project with npm and reference clipboard.js as a node module. This way when the project is built, the dependency will be included on page load without any extra HTTP request to the CDN.
Please help me to clarify this matter. Sorry If I'm not understanding it as quickly.
@Chadha93 please let me know your insights on this. What could I be missing?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.

[vishalvivekm]

Looks good to me.
Thanks @JayKay24 🚀

[welcome]

Thanks for your contribution to the Layer5 and Meshery community! 🎉

        ⭐ Please leave a star on the project. 😄