add support for 360 panorama embeds yayyy

using naver view360

.eleventy.js

@@ -12,6 +12,7 @@ const footnotes = require('eleventy-plugin-footnotes');
 
 const figure = require('./src/_includes/components/figure.js');
 const bounce = require('./src/_includes/components/bounce.js');
+const view360 = require('./src/_includes/components/view360.js');
 
 module.exports = function (eleventyConfig) {
   const isDev = (process.env.ELEVENTY_ENV || "dev") == "dev";
@@ -47,6 +48,7 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addShortcode('figure', figure(md));
   eleventyConfig.addShortcode('bounce', bounce);
+  eleventyConfig.addShortcode('view360', view360);
 
   eleventyConfig.addPassthroughCopy({ "src/static": "/" });
   eleventyConfig.addPassthroughCopy({ "node_modules/reveal.js/dist/reveal.css": "reveal.js/reveal.css" });

src/_includes/components/view360.js

@@ -0,0 +1,24 @@
+// for now this only supports one type of projection because i cant be bothered to implement all of them lol
+module.exports = async ({ src, ratio = '16by9', autoplay = false, autoplaySpeed = .2 }) => `
+<link rel="stylesheet" href="/view360/view360.min.css">
+<script src="/view360/view360.pkgd.min.js"></script>
+
+<div id="viewer" class="view360-container is-${ratio}">
+  <canvas class="view360-canvas"></canvas>
+</div>
+
+<script>
+    const spinner = new View360.LoadingSpinner();
+    const controlBar = new View360.ControlBar();
+    const viewer = new View360("#viewer", {
+        plugins: [spinner, controlBar],
+        projection: new View360.EquirectProjection({
+            src: "${src}",
+            video: false
+        })${autoplay ? `,
+        autoplay: {
+            speed: ${autoplaySpeed}
+        }` : ''}
+    });
+</script>
+`