https://mizerc.github.io/categories/graphics/Recent content in Graphics on MIZEHugoen-UShttps://mizerc.github.io/posts/004-hugo-canvas-support/Mon, 01 Jan 0001 00:00:00 +0000https://mizerc.github.io/posts/004-hugo-canvas-support/<script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } } </script> <p>This post walks through how to add an HTML Canvas to a Hugo site, with additional guidance on including external JavaScript libraries from a CDN, such as Three.js to render the cube shown below:</p> <!-- If you need to add HTML canvas or import JavaScript libraries from a CDN in your Hugo website, this post will walk you thru on how to do that. In the end you will be able to use HTML canvas to render things like a 3d rotating cube from your markdown file: --> <style> p.canvasjs-label { text-align: center; font-family: 'Georgia', serif; color: #555; font-size: 0.8rem; text-align: center; font-style: italic; line-height: 1.3; } </style> <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 16px;"> <div style="width: 500px; height: 500px; margin: 8px;" id="div-container-cube1"> </div> </div> <script type="module" src="scripts/cube1.js"></script> <h3 id="hugo-shortcodes">Hugo Shortcodes</h3> <p>Adding support to a new HTML DOM in your Hugo site is possible using Hugo <a href="https://gohugo.io/content-management/shortcodes/">shortcodes</a>. Which is a way to add custom HTML elements to your website like image, video, and HTML canvas. The shortcode is a HTML template invoked within markup, accepting any number of arguments.</p>