minor on webcomponents

nuxt.config.js

@@ -11,11 +11,19 @@ module.exports = {
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     ],
+    script: [{ src: '/gancio-events.es.js' }],
     link: [{ rel: 'icon', type: 'image/png', href: '/logo.png' }]
   },
   dev: (process.env.NODE_ENV !== 'production'),
   server: config.server,
 
+
+  vue: {
+    config: {
+      ignoredElements: ['gancio-events']
+    }
+  },
+
   /*
    ** Customize the progress-bar component
    */

static/gancio-events.es.js

@@ -0,0 +1,814 @@
+function noop() {
+}
+function run(fn) {
+  return fn();
+}
+function blank_object() {
+  return Object.create(null);
+}
+function run_all(fns) {
+  fns.forEach(run);
+}
+function is_function(thing) {
+  return typeof thing === "function";
+}
+function safe_not_equal(a, b) {
+  return a != a ? b == b : a !== b || (a && typeof a === "object" || typeof a === "function");
+}
+let src_url_equal_anchor;
+function src_url_equal(element_src, url) {
+  if (!src_url_equal_anchor) {
+    src_url_equal_anchor = document.createElement("a");
+  }
+  src_url_equal_anchor.href = url;
+  return element_src === src_url_equal_anchor.href;
+}
+function is_empty(obj) {
+  return Object.keys(obj).length === 0;
+}
+function append(target, node) {
+  target.appendChild(node);
+}
+function insert(target, node, anchor) {
+  target.insertBefore(node, anchor || null);
+}
+function detach(node) {
+  node.parentNode.removeChild(node);
+}
+function destroy_each(iterations, detaching) {
+  for (let i = 0; i < iterations.length; i += 1) {
+    if (iterations[i])
+      iterations[i].d(detaching);
+  }
+}
+function element(name) {
+  return document.createElement(name);
+}
+function text(data) {
+  return document.createTextNode(data);
+}
+function space() {
+  return text(" ");
+}
+function empty() {
+  return text("");
+}
+function attr(node, attribute, value) {
+  if (value == null)
+    node.removeAttribute(attribute);
+  else if (node.getAttribute(attribute) !== value)
+    node.setAttribute(attribute, value);
+}
+function children(element2) {
+  return Array.from(element2.childNodes);
+}
+function set_data(text2, data) {
+  data = "" + data;
+  if (text2.wholeText !== data)
+    text2.data = data;
+}
+function attribute_to_object(attributes) {
+  const result = {};
+  for (const attribute of attributes) {
+    result[attribute.name] = attribute.value;
+  }
+  return result;
+}
+let current_component;
+function set_current_component(component) {
+  current_component = component;
+}
+function get_current_component() {
+  if (!current_component)
+    throw new Error("Function called outside component initialization");
+  return current_component;
+}
+function onMount(fn) {
+  get_current_component().$$.on_mount.push(fn);
+}
+const dirty_components = [];
+const binding_callbacks = [];
+const render_callbacks = [];
+const flush_callbacks = [];
+const resolved_promise = Promise.resolve();
+let update_scheduled = false;
+function schedule_update() {
+  if (!update_scheduled) {
+    update_scheduled = true;
+    resolved_promise.then(flush);
+  }
+}
+function add_render_callback(fn) {
+  render_callbacks.push(fn);
+}
+let flushing = false;
+const seen_callbacks = new Set();
+function flush() {
+  if (flushing)
+    return;
+  flushing = true;
+  do {
+    for (let i = 0; i < dirty_components.length; i += 1) {
+      const component = dirty_components[i];
+      set_current_component(component);
+      update(component.$$);
+    }
+    set_current_component(null);
+    dirty_components.length = 0;
+    while (binding_callbacks.length)
+      binding_callbacks.pop()();
+    for (let i = 0; i < render_callbacks.length; i += 1) {
+      const callback = render_callbacks[i];
+      if (!seen_callbacks.has(callback)) {
+        seen_callbacks.add(callback);
+        callback();
+      }
+    }
+    render_callbacks.length = 0;
+  } while (dirty_components.length);
+  while (flush_callbacks.length) {
+    flush_callbacks.pop()();
+  }
+  update_scheduled = false;
+  flushing = false;
+  seen_callbacks.clear();
+}
+function update($$) {
+  if ($$.fragment !== null) {
+    $$.update();
+    run_all($$.before_update);
+    const dirty = $$.dirty;
+    $$.dirty = [-1];
+    $$.fragment && $$.fragment.p($$.ctx, dirty);
+    $$.after_update.forEach(add_render_callback);
+  }
+}
+const outroing = new Set();
+function transition_in(block, local) {
+  if (block && block.i) {
+    outroing.delete(block);
+    block.i(local);
+  }
+}
+function mount_component(component, target, anchor, customElement) {
+  const { fragment, on_mount, on_destroy, after_update } = component.$$;
+  fragment && fragment.m(target, anchor);
+  if (!customElement) {
+    add_render_callback(() => {
+      const new_on_destroy = on_mount.map(run).filter(is_function);
+      if (on_destroy) {
+        on_destroy.push(...new_on_destroy);
+      } else {
+        run_all(new_on_destroy);
+      }
+      component.$$.on_mount = [];
+    });
+  }
+  after_update.forEach(add_render_callback);
+}
+function destroy_component(component, detaching) {
+  const $$ = component.$$;
+  if ($$.fragment !== null) {
+    run_all($$.on_destroy);
+    $$.fragment && $$.fragment.d(detaching);
+    $$.on_destroy = $$.fragment = null;
+    $$.ctx = [];
+  }
+}
+function make_dirty(component, i) {
+  if (component.$$.dirty[0] === -1) {
+    dirty_components.push(component);
+    schedule_update();
+    component.$$.dirty.fill(0);
+  }
+  component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
+}
+function init(component, options, instance2, create_fragment2, not_equal, props, append_styles, dirty = [-1]) {
+  const parent_component = current_component;
+  set_current_component(component);
+  const $$ = component.$$ = {
+    fragment: null,
+    ctx: null,
+    props,
+    update: noop,
+    not_equal,
+    bound: blank_object(),
+    on_mount: [],
+    on_destroy: [],
+    on_disconnect: [],
+    before_update: [],
+    after_update: [],
+    context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
+    callbacks: blank_object(),
+    dirty,
+    skip_bound: false,
+    root: options.target || parent_component.$$.root
+  };
+  append_styles && append_styles($$.root);
+  let ready = false;
+  $$.ctx = instance2 ? instance2(component, options.props || {}, (i, ret, ...rest) => {
+    const value = rest.length ? rest[0] : ret;
+    if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
+      if (!$$.skip_bound && $$.bound[i])
+        $$.bound[i](value);
+      if (ready)
+        make_dirty(component, i);
+    }
+    return ret;
+  }) : [];
+  $$.update();
+  ready = true;
+  run_all($$.before_update);
+  $$.fragment = create_fragment2 ? create_fragment2($$.ctx) : false;
+  if (options.target) {
+    if (options.hydrate) {
+      const nodes = children(options.target);
+      $$.fragment && $$.fragment.l(nodes);
+      nodes.forEach(detach);
+    } else {
+      $$.fragment && $$.fragment.c();
+    }
+    if (options.intro)
+      transition_in(component.$$.fragment);
+    mount_component(component, options.target, options.anchor, options.customElement);
+    flush();
+  }
+  set_current_component(parent_component);
+}
+let SvelteElement;
+if (typeof HTMLElement === "function") {
+  SvelteElement = class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+      const { on_mount } = this.$$;
+      this.$$.on_disconnect = on_mount.map(run).filter(is_function);
+      for (const key in this.$$.slotted) {
+        this.appendChild(this.$$.slotted[key]);
+      }
+    }
+    attributeChangedCallback(attr2, _oldValue, newValue) {
+      this[attr2] = newValue;
+    }
+    disconnectedCallback() {
+      run_all(this.$$.on_disconnect);
+    }
+    $destroy() {
+      destroy_component(this, 1);
+      this.$destroy = noop;
+    }
+    $on(type, callback) {
+      const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []);
+      callbacks.push(callback);
+      return () => {
+        const index = callbacks.indexOf(callback);
+        if (index !== -1)
+          callbacks.splice(index, 1);
+      };
+    }
+    $set($$props) {
+      if (this.$$set && !is_empty($$props)) {
+        this.$$.skip_bound = true;
+        this.$$set($$props);
+        this.$$.skip_bound = false;
+      }
+    }
+  };
+}
+function get_each_context(ctx, list, i) {
+  const child_ctx = ctx.slice();
+  child_ctx[6] = list[i];
+  return child_ctx;
+}
+function create_if_block$1(ctx) {
+  let div1;
+  let a;
+  let div0;
+  let span;
+  let t0_value = (ctx[1] || "Gancio") + "";
+  let t0;
+  let t1;
+  let img;
+  let img_src_value;
+  let t2;
+  let each_value = ctx[2];
+  let each_blocks = [];
+  for (let i = 0; i < each_value.length; i += 1) {
+    each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+  }
+  return {
+    c() {
+      div1 = element("div");
+      a = element("a");
+      div0 = element("div");
+      span = element("span");
+      t0 = text(t0_value);
+      t1 = space();
+      img = element("img");
+      t2 = space();
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].c();
+      }
+      attr(span, "id", "headerTitle");
+      attr(img, "id", "logo");
+      attr(img, "alt", "logo");
+      if (!src_url_equal(img.src, img_src_value = "" + (ctx[0] + "/logo.png")))
+        attr(img, "src", img_src_value);
+      attr(div0, "class", "content");
+      attr(a, "href", ctx[0]);
+      attr(a, "target", "_blank");
+      attr(div1, "id", "gancioEvents");
+    },
+    m(target, anchor) {
+      insert(target, div1, anchor);
+      append(div1, a);
+      append(a, div0);
+      append(div0, span);
+      append(span, t0);
+      append(div0, t1);
+      append(div0, img);
+      append(div1, t2);
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].m(div1, null);
+      }
+    },
+    p(ctx2, dirty) {
+      if (dirty & 2 && t0_value !== (t0_value = (ctx2[1] || "Gancio") + ""))
+        set_data(t0, t0_value);
+      if (dirty & 1 && !src_url_equal(img.src, img_src_value = "" + (ctx2[0] + "/logo.png"))) {
+        attr(img, "src", img_src_value);
+      }
+      if (dirty & 1) {
+        attr(a, "href", ctx2[0]);
+      }
+      if (dirty & 5) {
+        each_value = ctx2[2];
+        let i;
+        for (i = 0; i < each_value.length; i += 1) {
+          const child_ctx = get_each_context(ctx2, each_value, i);
+          if (each_blocks[i]) {
+            each_blocks[i].p(child_ctx, dirty);
+          } else {
+            each_blocks[i] = create_each_block(child_ctx);
+            each_blocks[i].c();
+            each_blocks[i].m(div1, null);
+          }
+        }
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+        each_blocks.length = each_value.length;
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(div1);
+      destroy_each(each_blocks, detaching);
+    }
+  };
+}
+function create_each_block(ctx) {
+  let a;
+  let div2;
+  let div0;
+  let t0_value = when$1(ctx[6].start_datetime) + "";
+  let t0;
+  let t1;
+  let span;
+  let t2;
+  let t3_value = ctx[6].place.name + "";
+  let t3;
+  let t4;
+  let div1;
+  let t5_value = ctx[6].title + "";
+  let t5;
+  let t6;
+  let a_href_value;
+  return {
+    c() {
+      a = element("a");
+      div2 = element("div");
+      div0 = element("div");
+      t0 = text(t0_value);
+      t1 = space();
+      span = element("span");
+      t2 = text("@");
+      t3 = text(t3_value);
+      t4 = space();
+      div1 = element("div");
+      t5 = text(t5_value);
+      t6 = space();
+      attr(span, "class", "place");
+      attr(div0, "class", "subtitle");
+      attr(div1, "class", "title");
+      attr(div2, "class", "content");
+      attr(a, "href", a_href_value = "" + (ctx[0] + "/event/" + (ctx[6].slug || ctx[6].id)));
+      attr(a, "target", "_blank");
+    },
+    m(target, anchor) {
+      insert(target, a, anchor);
+      append(a, div2);
+      append(div2, div0);
+      append(div0, t0);
+      append(div0, t1);
+      append(div0, span);
+      append(span, t2);
+      append(span, t3);
+      append(div2, t4);
+      append(div2, div1);
+      append(div1, t5);
+      append(a, t6);
+    },
+    p(ctx2, dirty) {
+      if (dirty & 4 && t0_value !== (t0_value = when$1(ctx2[6].start_datetime) + ""))
+        set_data(t0, t0_value);
+      if (dirty & 4 && t3_value !== (t3_value = ctx2[6].place.name + ""))
+        set_data(t3, t3_value);
+      if (dirty & 4 && t5_value !== (t5_value = ctx2[6].title + ""))
+        set_data(t5, t5_value);
+      if (dirty & 5 && a_href_value !== (a_href_value = "" + (ctx2[0] + "/event/" + (ctx2[6].slug || ctx2[6].id)))) {
+        attr(a, "href", a_href_value);
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(a);
+    }
+  };
+}
+function create_fragment$1(ctx) {
+  let if_block_anchor;
+  let if_block = ctx[2].length && create_if_block$1(ctx);
+  return {
+    c() {
+      if (if_block)
+        if_block.c();
+      if_block_anchor = empty();
+      this.c = noop;
+    },
+    m(target, anchor) {
+      if (if_block)
+        if_block.m(target, anchor);
+      insert(target, if_block_anchor, anchor);
+    },
+    p(ctx2, [dirty]) {
+      if (ctx2[2].length) {
+        if (if_block) {
+          if_block.p(ctx2, dirty);
+        } else {
+          if_block = create_if_block$1(ctx2);
+          if_block.c();
+          if_block.m(if_block_anchor.parentNode, if_block_anchor);
+        }
+      } else if (if_block) {
+        if_block.d(1);
+        if_block = null;
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (if_block)
+        if_block.d(detaching);
+      if (detaching)
+        detach(if_block_anchor);
+    }
+  };
+}
+function when$1(timestamp) {
+  return new Date(timestamp * 1e3).toLocaleDateString(void 0, {
+    weekday: "long",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function instance$1($$self, $$props, $$invalidate) {
+  let { baseurl = "https://dev.gancio.org" } = $$props;
+  let { title = "Gancio events" } = $$props;
+  let { maxlength = false } = $$props;
+  let { tags = false } = $$props;
+  let events = [];
+  function update2(v) {
+    fetch(`${baseurl}/api/events${maxlength ? "?max=" + maxlength : ""}`).then((res) => res.json()).then((e) => $$invalidate(2, events = e));
+  }
+  $$self.$$set = ($$props2) => {
+    if ("baseurl" in $$props2)
+      $$invalidate(0, baseurl = $$props2.baseurl);
+    if ("title" in $$props2)
+      $$invalidate(1, title = $$props2.title);
+    if ("maxlength" in $$props2)
+      $$invalidate(3, maxlength = $$props2.maxlength);
+    if ("tags" in $$props2)
+      $$invalidate(4, tags = $$props2.tags);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty & 10) {
+      update2();
+    }
+  };
+  return [baseurl, title, events, maxlength, tags];
+}
+class GancioEvents extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>#gancioEvents{font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;overflow-x:hidden;font-size:1rem;width:100%;max-width:500px;box-sizing:content-box}#logo{position:absolute;top:10px;right:10px;height:40px}#headerTitle{line-height:45px;font-size:1.3rem;font-weight:600}a{text-decoration:none;color:#ccc;display:flex;flex-direction:column;flex:1 1 100%;padding:8px 20px;margin:0;line-height:1.275rem;font-weight:400;font-size:.875rem;position:relative;transition:background-color .3s cubic-bezier(.25,.8,.5,1), padding-left .3s;box-sizing:content-box}a:nth-child(odd){background-color:#161616}a:nth-child(even){background-color:#222}a:first-child{border-radius:5px 5px 0px 0px}a:last-child{border-radius:0px 0px 5px 5px;padding-bottom:5px}a:hover{background-color:#333 !important;padding-left:23px}.place{font-weight:600;color:#ff6e40}.title{color:white}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance$1, create_fragment$1, safe_not_equal, {
+      baseurl: 0,
+      title: 1,
+      maxlength: 3,
+      tags: 4
+    }, null);
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
+    }
+  }
+  static get observedAttributes() {
+    return ["baseurl", "title", "maxlength", "tags"];
+  }
+  get baseurl() {
+    return this.$$.ctx[0];
+  }
+  set baseurl(baseurl) {
+    this.$$set({ baseurl });
+    flush();
+  }
+  get title() {
+    return this.$$.ctx[1];
+  }
+  set title(title) {
+    this.$$set({ title });
+    flush();
+  }
+  get maxlength() {
+    return this.$$.ctx[3];
+  }
+  set maxlength(maxlength) {
+    this.$$set({ maxlength });
+    flush();
+  }
+  get tags() {
+    return this.$$.ctx[4];
+  }
+  set tags(tags) {
+    this.$$set({ tags });
+    flush();
+  }
+}
+customElements.define("gancio-events", GancioEvents);
+function create_if_block(ctx) {
+  let a;
+  let t0;
+  let div2;
+  let strong;
+  let t1_value = ctx[1].title + "";
+  let t1;
+  let t2;
+  let div0;
+  let t3_value = when(ctx[1]) + "";
+  let t3;
+  let t4;
+  let div1;
+  let t5;
+  let t6_value = ctx[1].place.name + "";
+  let t6;
+  let a_href_value;
+  let if_block = ctx[1].media.length && create_if_block_1(ctx);
+  return {
+    c() {
+      a = element("a");
+      if (if_block)
+        if_block.c();
+      t0 = space();
+      div2 = element("div");
+      strong = element("strong");
+      t1 = text(t1_value);
+      t2 = space();
+      div0 = element("div");
+      t3 = text(t3_value);
+      t4 = space();
+      div1 = element("div");
+      t5 = text("@");
+      t6 = text(t6_value);
+      attr(div1, "class", "place");
+      attr(div2, "class", "container");
+      attr(a, "href", a_href_value = "" + (ctx[0] + "/event/" + (ctx[1].slug || ctx[1].id)));
+      attr(a, "class", "card");
+    },
+    m(target, anchor) {
+      insert(target, a, anchor);
+      if (if_block)
+        if_block.m(a, null);
+      append(a, t0);
+      append(a, div2);
+      append(div2, strong);
+      append(strong, t1);
+      append(div2, t2);
+      append(div2, div0);
+      append(div0, t3);
+      append(div2, t4);
+      append(div2, div1);
+      append(div1, t5);
+      append(div1, t6);
+    },
+    p(ctx2, dirty) {
+      if (ctx2[1].media.length) {
+        if (if_block) {
+          if_block.p(ctx2, dirty);
+        } else {
+          if_block = create_if_block_1(ctx2);
+          if_block.c();
+          if_block.m(a, t0);
+        }
+      } else if (if_block) {
+        if_block.d(1);
+        if_block = null;
+      }
+      if (dirty & 2 && t1_value !== (t1_value = ctx2[1].title + ""))
+        set_data(t1, t1_value);
+      if (dirty & 2 && t3_value !== (t3_value = when(ctx2[1]) + ""))
+        set_data(t3, t3_value);
+      if (dirty & 2 && t6_value !== (t6_value = ctx2[1].place.name + ""))
+        set_data(t6, t6_value);
+      if (dirty & 3 && a_href_value !== (a_href_value = "" + (ctx2[0] + "/event/" + (ctx2[1].slug || ctx2[1].id)))) {
+        attr(a, "href", a_href_value);
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(a);
+      if (if_block)
+        if_block.d();
+    }
+  };
+}
+function create_if_block_1(ctx) {
+  let img;
+  let img_src_value;
+  let img_alt_value;
+  let img_style_value;
+  return {
+    c() {
+      img = element("img");
+      if (!src_url_equal(img.src, img_src_value = ctx[2](ctx[1])))
+        attr(img, "src", img_src_value);
+      attr(img, "alt", img_alt_value = ctx[1].media[0].name);
+      attr(img, "style", img_style_value = "background-position: " + position(ctx[1]) + "; aspect-ratio=1.7778;");
+    },
+    m(target, anchor) {
+      insert(target, img, anchor);
+    },
+    p(ctx2, dirty) {
+      if (dirty & 2 && !src_url_equal(img.src, img_src_value = ctx2[2](ctx2[1]))) {
+        attr(img, "src", img_src_value);
+      }
+      if (dirty & 2 && img_alt_value !== (img_alt_value = ctx2[1].media[0].name)) {
+        attr(img, "alt", img_alt_value);
+      }
+      if (dirty & 2 && img_style_value !== (img_style_value = "background-position: " + position(ctx2[1]) + "; aspect-ratio=1.7778;")) {
+        attr(img, "style", img_style_value);
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(img);
+    }
+  };
+}
+function create_fragment(ctx) {
+  let if_block_anchor;
+  let if_block = ctx[1] && create_if_block(ctx);
+  return {
+    c() {
+      if (if_block)
+        if_block.c();
+      if_block_anchor = empty();
+      this.c = noop;
+    },
+    m(target, anchor) {
+      if (if_block)
+        if_block.m(target, anchor);
+      insert(target, if_block_anchor, anchor);
+    },
+    p(ctx2, [dirty]) {
+      if (ctx2[1]) {
+        if (if_block) {
+          if_block.p(ctx2, dirty);
+        } else {
+          if_block = create_if_block(ctx2);
+          if_block.c();
+          if_block.m(if_block_anchor.parentNode, if_block_anchor);
+        }
+      } else if (if_block) {
+        if_block.d(1);
+        if_block = null;
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (if_block)
+        if_block.d(detaching);
+      if (detaching)
+        detach(if_block_anchor);
+    }
+  };
+}
+function when(event) {
+  return new Date(event.start_datetime * 1e3).toLocaleDateString(void 0, {
+    weekday: "long",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function position(event) {
+  if (event.media[0].focalpoint) {
+    const focalpoint = event.media[0].focalpoint;
+    return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`;
+  }
+  return "center center";
+}
+function instance($$self, $$props, $$invalidate) {
+  let { baseurl = "https://demo.gancio.org" } = $$props;
+  let { id } = $$props;
+  let mounted = false;
+  let event;
+  function update2(id2, baseurl2) {
+    if (mounted) {
+      fetch(`${baseurl2}/api/event/${id2}`).then((res) => res.json()).then((e) => $$invalidate(1, event = e));
+    }
+  }
+  onMount(() => {
+    mounted = true;
+    console.error("dentro onMount ", id, baseurl);
+    update2(id, baseurl);
+  });
+  function thumbnail(event2) {
+    return `${baseurl}/media/thumb/${event2.media[0].url}`;
+  }
+  $$self.$$set = ($$props2) => {
+    if ("baseurl" in $$props2)
+      $$invalidate(0, baseurl = $$props2.baseurl);
+    if ("id" in $$props2)
+      $$invalidate(3, id = $$props2.id);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty & 9) {
+      update2(id, baseurl);
+    }
+  };
+  return [baseurl, event, thumbnail, id];
+}
+class GancioEvent extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>.card{display:block;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);transition:0.3s;border-radius:5px;max-width:500px;text-decoration:none;color:white;background-color:#1e1e1e;overflow:hidden}img{border-radius:5px 5px 0 0;max-height:250px;min-height:160px;width:100%;object-fit:cover;object-position:top}.card:hover .container{padding-left:20px}.card:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2)}.container{transition:padding-left .2s;padding:16px}.place{font-weight:600;color:#ff6e40}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance, create_fragment, safe_not_equal, { baseurl: 0, id: 3 }, null);
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
+    }
+  }
+  static get observedAttributes() {
+    return ["baseurl", "id"];
+  }
+  get baseurl() {
+    return this.$$.ctx[0];
+  }
+  set baseurl(baseurl) {
+    this.$$set({ baseurl });
+    flush();
+  }
+  get id() {
+    return this.$$.ctx[3];
+  }
+  set id(id) {
+    this.$$set({ id });
+    flush();
+  }
+}
+customElements.define("gancio-event", GancioEvent);

webcomponents/index.html

@@ -8,9 +8,8 @@
   </head>
   <body>
     <gancio-events
-      baseURL='https://dev.gancio.org'
+      baseurl='http://localhost:13120' title='Gancio' tags="test"></gancio-events>
-      title='Gancio' tags="test"></gancio-events>
+    <gancio-event id=1 baseurl='http://localhost:13120'></gancio-event>
-    <gancio-event id="17"></gancio-event>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

webcomponents/src/GancioEvent.svelte

@@ -1,16 +1,25 @@
 <script>
+  import { onMount } from 'svelte'
   export let baseurl = 'https://demo.gancio.org'
   export let id
 
+  let mounted = false
   let event
 
-  function update (id) {
+  function update (id, baseurl) {
-
+    if (mounted) {
-    fetch(`${baseurl}/api/event/${id}`)
+      fetch(`${baseurl}/api/event/${id}`)
-    .then(res => res.json())
+        .then(res => res.json())
-    .then(e => event = e)
+        .then(e => event = e)
+    }
   }
 
+  onMount(() => {
+    mounted = true
+    update(id, baseurl)
+  })
+  $: update(id, baseurl)
+
   function when (event) {
     return new Date(event.start_datetime*1000)
             .toLocaleDateString(undefined,
@@ -35,8 +44,6 @@
       return 'center center'    
   }
 
-  $: update(id)
-
 </script>
 <svelte:options tag="gancio-event"/>
 {#if event}

webcomponents/src/GancioEvents.svelte

@@ -40,28 +40,17 @@
 <svelte:options tag="gancio-events"/>
 {#if events.length}
 <div id='gancioEvents'>
-  {#if title}
+  <a href='{baseurl}' target='_blank'>
-    <a href='{baseurl}' target='_blank'>
+    <div class='content'>
-      <div class='content'>
+      <span id='headerTitle'>{title || 'Gancio'}</span>
-        <span id='headerTitle'>{title}</span>
+      <img id='logo' alt='logo' src='{baseurl}/logo.png'/>
-        <img id='logo' alt='logo' src='{baseurl}/logo.png'/>
+    </div>
-      </div>
+  </a>
-    </a>
-  {/if}
   {#each events as event}
     <a href='{baseurl}/event/{event.slug || event.id}' target='_blank'>
       <div class='content'>
         <div class='subtitle'>
           {when(event.start_datetime)}
-          {new Date(event.start_datetime*1000)
-            .toLocaleDateString(undefined,
-              {
-                weekday: 'long',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit'
-              })}
           <span class='place'>@{event.place.name}</span>
         </div>
         <div class='title'>