Generate docs site using beta build.

examples/docs/beta-index.js

@@ -0,0 +1,8 @@
+import * as elmOembed from "/elm-oembed.js";
+// import "./lib/native-shim.js";
+
+export default function (elmLoaded) {
+  document.addEventListener("DOMContentLoaded", function (event) {
+    elmOembed.setup();
+  });
+}

examples/docs/beta-style.css

@@ -0,0 +1,41 @@
+@import "/syntax.css";
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto|Roboto+Mono&display=swap");
+@import url("https://use.fontawesome.com/releases/v5.9.0/css/all.css");
+
+.dotted-line {
+  -webkit-animation: animation-yweh2o 400ms linear infinite;
+  animation: animation-yweh2o 400ms linear infinite;
+}
+@-webkit-keyframes animation-yweh2o {
+  to {
+    stroke-dashoffset: 10;
+  }
+}
+@keyframes animation-yweh2o {
+  to {
+    stroke-dashoffset: 10;
+  }
+}
+
+.avatar img {
+  border-radius: 50%;
+}
+@media all and (max-width: 600px) {
+  .navbar-title {
+    font-size: 20px !important;
+  }
+  .navbar-title svg {
+    width: 20px;
+  }
+}
+
+@media (max-width: 600px) {
+  .responsive-desktop {
+    display: none !important;
+  }
+}
+@media (min-width: 600px) {
+  .responsive-mobile {
+    display: none !important;
+  }
+}

examples/docs/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "elm-pages develop --port 1234",
     "serve": "npm run build && http-server ./dist -a localhost -p 3000 -c-1",
-    "build": "elm-pages build"
+    "build": "node ../../generator/src/cli.js"
   },
   "author": "Dillon Kearns",
   "license": "BSD-3",
@@ -18,4 +18,4 @@
     "elm-pages": "file:../..",
     "http-server": "^0.11.1"
   }
-}
+}

examples/docs/static/elm-oembed.js

@@ -0,0 +1,149 @@
+export function setup() {
+  customElements.define(
+    "oembed-element",
+    class extends HTMLElement {
+      connectedCallback() {
+        let shadow = this.attachShadow({ mode: "closed" });
+        const urlAttr = this.getAttribute("url");
+        if (urlAttr) {
+          renderOembed(shadow, urlAttr, {
+            maxwidth: this.getAttribute("maxwidth"),
+            maxheight: this.getAttribute("maxheight"),
+          });
+        } else {
+          const discoverUrl = this.getAttribute("discover-url");
+          if (discoverUrl) {
+            getDiscoverUrl(discoverUrl, function (discoveredUrl) {
+              if (discoveredUrl) {
+                renderOembed(shadow, discoveredUrl, null);
+              }
+            });
+          }
+        }
+      }
+    }
+  );
+
+  /**
+   *
+   * @param {ShadowRoot} shadow
+   * @param {string} urlToEmbed
+   * @param {{maxwidth: string?; maxheight: string?}?} options
+   */
+  function renderOembed(shadow, urlToEmbed, options) {
+    let apiUrlBuilder = new URL(
+      `https://cors-anywhere.herokuapp.com/${urlToEmbed}`
+    );
+    if (options && options.maxwidth) {
+      apiUrlBuilder.searchParams.set("maxwidth", options.maxwidth);
+    }
+    if (options && options.maxheight) {
+      apiUrlBuilder.searchParams.set("maxheight", options.maxheight);
+    }
+    const apiUrl = apiUrlBuilder.toString();
+    httpGetAsync(apiUrl, (rawResponse) => {
+      const response = JSON.parse(rawResponse);
+
+      switch (response.type) {
+        case "rich":
+          tryRenderingHtml(shadow, response);
+          break;
+        case "video":
+          tryRenderingHtml(shadow, response);
+          break;
+        case "photo":
+          let img = document.createElement("img");
+          img.setAttribute("src", response.url);
+          if (options) {
+            img.setAttribute(
+              "style",
+              `max-width: ${options.maxwidth}px; max-height: ${options.maxheight}px;`
+            );
+          }
+          shadow.appendChild(img);
+          break;
+        default:
+          break;
+      }
+    });
+  }
+
+  /**
+ * @param {{
+    height: ?number;
+    width: ?number;
+    html: any;
+}} response
+ * @param {ShadowRoot} shadow
+ */
+  function tryRenderingHtml(shadow, response) {
+    if (response && typeof response.html) {
+      let iframe = createIframe(response);
+      shadow.appendChild(iframe);
+      setTimeout(() => {
+        let refetchedIframe = shadow.querySelector("iframe");
+        if (refetchedIframe && !response.height) {
+          refetchedIframe.setAttribute(
+            "height",
+            // @ts-ignore
+            (iframe.contentWindow.document.body.scrollHeight + 10).toString()
+          );
+        }
+        if (refetchedIframe && !response.width) {
+          refetchedIframe.setAttribute(
+            "width",
+            // @ts-ignore
+            (iframe.contentWindow.document.body.scrollWidth + 10).toString()
+          );
+        }
+      }, 1000);
+    }
+  }
+
+  /**
+   * @param {{ height: number?; width: number?; html: string; }} response
+   * @returns {HTMLIFrameElement}
+   */
+  function createIframe(response) {
+    let iframe = document.createElement("iframe");
+    iframe.setAttribute("border", "0");
+    iframe.setAttribute("frameborder", "0");
+    iframe.setAttribute("height", ((response.height || 500) + 20).toString());
+    iframe.setAttribute("width", ((response.width || 500) + 20).toString());
+    iframe.setAttribute("style", "max-width: 100%;");
+    iframe.srcdoc = response.html;
+    return iframe;
+  }
+
+  /**
+   * @param {string} url
+   * @param {{ (discoveredUrl: string?): void;}} callback
+   */
+  function getDiscoverUrl(url, callback) {
+    let apiUrl = new URL(
+      `https://cors-anywhere.herokuapp.com/${url}`
+    ).toString();
+    httpGetAsync(apiUrl, function (response) {
+      let dom = document.createElement("html");
+      dom.innerHTML = response;
+      /** @type {HTMLLinkElement | null} */ const oembedTag = dom.querySelector(
+        'link[type="application/json+oembed"]'
+      );
+      callback(oembedTag && oembedTag.href);
+    });
+  }
+
+  /**
+   * @param {string} theUrl
+   * @param {{ (rawResponse: string): void }} callback
+   */
+  function httpGetAsync(theUrl, callback) {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+      if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
+        callback(xmlHttp.responseText);
+    };
+    xmlHttp.open("GET", theUrl, true); // true for asynchronous
+    xmlHttp.send(null);
+  }
+}

examples/docs/static/syntax.css

@@ -0,0 +1,43 @@
+pre.elmsh {
+  padding: 10px;
+  margin: 0;
+  text-align: left;
+  overflow: auto;
+  padding: 20px !important;
+}
+
+code.elmsh {
+  padding: 0;
+}
+
+code {
+  font-family: 'Roboto Mono' !important;
+  font-size: 20px !important;
+  line-height: 28px;
+}
+
+.elmsh-line:before {
+  /* content: attr(data-elmsh-lc); */
+  display: inline-block;
+  text-align: right;
+  width: 40px;
+  padding: 0 20px 0 0;
+  opacity: 0.3;
+}
+
+.elmsh {
+    color: #f8f8f2;
+    background: #000;
+}
+.elmsh-hl {background: #343434;}
+.elmsh-add {background: #003800;}
+.elmsh-del {background: #380000;}
+.elmsh-comm {color: #75715e;}
+.elmsh1 {color: #ae81ff;}
+.elmsh2 {color: #e6db74;}
+.elmsh3 {color: #66d9ef;}
+.elmsh4 {color: #f92672;}
+.elmsh5 {color: #a6e22e;}
+.elmsh6 {color: #ae81ff;}
+.elmsh7 {color: #fd971f;}
+

package.json

@@ -2,6 +2,7 @@
   "name": "elm-pages",
   "version": "1.4.3",
   "homepage": "http://elm-pages.com",
+  "moduleResolution": "node",
   "description": "Type-safe static sites, written in pure elm with your own custom elm-markup syntax.",
   "main": "index.js",
   "scripts": {