@mindful-web/marko-web 1.0.0

package/utils/embedded-media/index.js

@@ -0,0 +1,8 @@
+const imageHandler = require('./image');
+const oembedHandler = require('./oembed');
+
+module.exports = {
+  imageHandler,
+  oembedHandler,
+  invalidHandler: () => '',
+};

package/utils/embedded-media/instagram-oembed.js

@@ -0,0 +1,57 @@
+const { URL } = require('url');
+
+const buildInstagramElement = ({
+  href,
+  lazy = true,
+  width,
+}) => {
+  const src = `${href.replace(/\/+$/g, '')}/embed/?cr=1`;
+  const params = {
+    src,
+    ...(lazy && { lazy: true }),
+    ...(width && { width }),
+  };
+  const data = Object.keys(params).map((key) => `${key}="${params[key]}"`);
+  if (data.lazy) {
+    data.loading = 'lazy';
+  }
+  return `
+  <iframe class="instagram-media instagram-media-rendered"
+    ${data.join(' ')}
+    allowtransparency="true"
+    frameborder="0"
+    height="700px"
+    scrolling="no"
+    style="
+    background: rgb(255, 255, 255);
+    border: 1px solid rgb(219, 219, 219);
+    margin: 0px 0px 0px; max-width: 700px;
+    width: calc(100% - 2px);
+    border-radius: 4px;
+    box-shadow: none;
+    display: block;
+    padding: 0px;">
+    </iframe>
+  <script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script>`;
+};
+
+const instagram = (url) => {
+  const pattern = /instagram\.com/i;
+  if (!pattern.test(url)) return null; // not a instagram URL.
+
+  const { href, host } = new URL(url);
+  // after checking for instagram URLs, treat all other instagram URLs as posts.
+  if (!pattern.test(host)) return null; // instagram.com appears somewhere else in the URL.
+  // return instagram div element
+  return buildInstagramElement({ href });
+};
+
+/**
+ *
+ */
+module.exports = (url) => {
+  // convert embeds, as they no longer support oembed without auth
+  const igPost = instagram(url);
+  if (igPost) return igPost;
+  return null;
+};

package/utils/embedded-media/oembed.js

@@ -0,0 +1,18 @@
+const BrowserComponent = require('../../components/browser-component');
+const facebook = require('./facebook-oembed');
+const instagram = require('./instagram-oembed');
+
+module.exports = (tag, $global) => {
+  const { config } = $global;
+  const url = tag.id;
+  const facebookPost = facebook(url);
+  const instagramPost = instagram(url);
+  const props = { mountPoint: config.oembedMountPoint(), url, attrs: tag.attrs };
+  if (facebookPost) {
+    return facebookPost;
+  }
+  if (instagramPost) {
+    return instagramPost;
+  }
+  return BrowserComponent.renderToString({ $global, name: 'OEmbed', props });
+};

package/utils/hierarchy-aliases.js

@@ -0,0 +1,3 @@
+const { getAsArray } = require('@mindful-web/object-path');
+
+module.exports = (section) => getAsArray(section, 'hierarchy').map((s) => s.alias).reverse();

package/utils/hierarchy-ids.js

@@ -0,0 +1,3 @@
+const { getAsArray } = require('@mindful-web/object-path');
+
+module.exports = (section) => getAsArray(section, 'hierarchy').map((s) => s.id).reverse();

package/utils/index.js

@@ -0,0 +1,11 @@
+const buildMarkoGlobal = require('./build-marko-global');
+const defaultValue = require('./default-value');
+const isDev = require('./is-dev');
+const shouldCollapse = require('./should-collapse');
+
+module.exports = {
+  buildMarkoGlobal,
+  defaultValue,
+  isDev,
+  shouldCollapse,
+};

package/utils/is-dev.js

@@ -0,0 +1 @@
+module.exports = require('@mindful-web/marko-core/utils/is-dev');

package/utils/published-content/description.js

@@ -0,0 +1 @@
+module.exports = (title, config) => `The latest ${(title || '').toLowerCase()} from ${config.website('name')}`;

package/utils/render-ssr-component-from-marko.js

@@ -0,0 +1,18 @@
+const renderComponent = require('./render-ssr-component');
+const BrowserComponentScript = require('../components/browser-component/script');
+
+module.exports = async ({ id, input, out }) => {
+  const { name, props } = input;
+  const { compiledVueComponents } = out.global;
+  const Component = compiledVueComponents[name];
+  if (!Component) throw new Error(`No compiled Vue template found for ${name}. Unable to render server-side.`);
+  const html = await renderComponent(Component, { id, props });
+  const script = BrowserComponentScript.renderToString({
+    id,
+    hydrate: true,
+    name,
+    props,
+    skipWhenExists: input.skipWhenExists,
+  });
+  return `${html}${script}`;
+};

package/utils/render-ssr-component.js

@@ -0,0 +1,15 @@
+const { get } = require('@mindful-web/object-path');
+const Vue = require('vue');
+const VueServerRenderer = require('vue-server-renderer');
+
+const renderer = VueServerRenderer.createRenderer();
+const EventBus = new Vue();
+
+module.exports = async (Component, { id, props } = {}) => {
+  if (get(Component, 'props.id')) throw new Error('The provided component has an `id` prop which is incompatible with SSR rendering.');
+  const app = new Vue({
+    provide: { EventBus },
+    render: (h) => h(Component, { attrs: { id }, props }),
+  });
+  return renderer.renderToString(app);
+};

package/utils/should-collapse.js

@@ -0,0 +1 @@
+module.exports = require('@mindful-web/marko-core/utils/should-collapse');