From 40bab39965f76345c20fdfd438e3621f207c2e4c Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Tue, 1 Feb 2022 12:48:14 +0100
Subject: [PATCH] add new webcomponent "fullwidth" layout

---
 locales/it.json                       |   3 +-
 pages/export.vue                      |  17 +-
 static/gancio-events.es.js            | 571 ++++++++++++++++++++------
 webcomponents/index.html              |   5 +-
 webcomponents/package.json            |   2 +-
 webcomponents/src/GancioEvents.svelte | 203 ++++++---
 6 files changed, 626 insertions(+), 175 deletions(-)

diff --git a/locales/it.json b/locales/it.json
index 3f117096..184a0f9a 100644
--- a/locales/it.json
+++ b/locales/it.json
@@ -223,7 +223,8 @@
         "delete_footer_link_confirm": "Vuoi eliminare questo collegamento?",
         "edit_place": "Modifica luogo",
         "new_announcement": "Nuovo annuncio",
-        "show_smtp_setup": "Impostazioni email"
+        "show_smtp_setup": "Impostazioni email",
+        "widget": "Widget"
     },
     "auth": {
         "not_confirmed": "Non ancora confermato…",
diff --git a/pages/export.vue b/pages/export.vue
index 6e82aa91..30e64b50 100644
--- a/pages/export.vue
+++ b/pages/export.vue
@@ -53,14 +53,16 @@
                   v-text-field(v-model='list.title' :label='$t("common.title")')
                   v-text-field(v-model='list.maxEvents' type='number' min='1' :label='$t("common.max_events")')
                   v-switch(v-model='list.theme' inset true-value='dark' false-value='light' :label="$t('admin.is_dark')")
-                v-col.float-right(:span='12')
+                  v-switch(v-model='list.sidebar' inset true-value='true' false-value='false' :label="$t('admin.widget')")
+                v-col.col-12.col-lg-8
                   gancio-events(:baseurl='settings.baseurl'
                     :maxlength='list.maxEvents &&  Number(list.maxEvents)'
                     :title='list.title'
                     :theme='list.theme'
                     :places='filters.places.join(",")'
                     :tags='filters.tags.join(",")'
-                    :show_recurrent='filters.show_recurrent')
+                    :show_recurrent='filters.show_recurrent'
+                    :sidebar="list.sidebar")
               v-alert.pa-5.my-4.blue-grey.darken-4.text-body-1.lime--text.text--lighten-3 <pre>{{code}}</pre>
                 v-btn.float-end(text color='primary' @click='clipboard(code)') {{$t("common.copy")}}
                   v-icon.ml-1 mdi-content-copy
@@ -101,7 +103,12 @@ export default {
     return {
       type: 'rss',
       notification: { email: '' },
-      list: { title: $store.state.settings.title, maxEvents: null, theme: 'dark' },
+      list: {
+        title: $store.state.settings.title,
+        maxEvents: null,
+        theme: $store.state.settings['theme.is_dark'] ? 'dark' : 'light',
+        sidebar: 'true'
+      },
       filters: { tags: [], places: [], show_recurrent: false },
       events: []
     }
@@ -116,7 +123,7 @@ export default {
     code () {
       const params = [`baseurl="${this.settings.baseurl}"`]
 
-      if (this.list.title) {
+      if (this.list.title && this.list.sidebar === 'true') {
         params.push(`title="${this.list.title}"`)
       }
 
@@ -136,6 +143,8 @@ export default {
         params.push('maxlength=' + this.list.maxEvents)
       }
 
+      params.push('sidebar="' + this.list.sidebar + '"')
+
       params.push(`theme="${this.list.theme}"`)
 
       return `<script src="${this.settings.baseurl}\/gancio-events.es.js"><\/script>\n<gancio-events ${params.join(' ')}></gancio-events>\n\n`
diff --git a/static/gancio-events.es.js b/static/gancio-events.es.js
index 26250386..664251f5 100644
--- a/static/gancio-events.es.js
+++ b/static/gancio-events.es.js
@@ -279,73 +279,60 @@ if (typeof HTMLElement === "function") {
 }
 function get_each_context(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[9] = list[i];
+  child_ctx[11] = list[i];
+  return child_ctx;
+}
+function get_each_context_1(ctx, list, i) {
+  const child_ctx = ctx.slice();
+  child_ctx[14] = 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[3];
+  let div;
+  let t;
+  let div_class_value;
+  let if_block = ctx[1] && ctx[3] === "true" && create_if_block_4(ctx);
+  let each_value = ctx[4];
   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();
+      div = element("div");
+      if (if_block)
+        if_block.c();
+      t = 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");
-      attr(div1, "class", ctx[2]);
+      attr(div, "id", "gancioEvents");
+      attr(div, "class", div_class_value = "" + (ctx[2] + " " + (ctx[3] === "true" ? "sidebar" : "nosidebar")));
     },
     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);
+      insert(target, div, anchor);
+      if (if_block)
+        if_block.m(div, null);
+      append(div, t);
       for (let i = 0; i < each_blocks.length; i += 1) {
-        each_blocks[i].m(div1, null);
+        each_blocks[i].m(div, 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 (ctx2[1] && ctx2[3] === "true") {
+        if (if_block) {
+          if_block.p(ctx2, dirty);
+        } else {
+          if_block = create_if_block_4(ctx2);
+          if_block.c();
+          if_block.m(div, t);
+        }
+      } else if (if_block) {
+        if_block.d(1);
+        if_block = null;
       }
-      if (dirty & 1) {
-        attr(a, "href", ctx2[0]);
-      }
-      if (dirty & 9) {
-        each_value = ctx2[3];
+      if (dirty & 25) {
+        each_value = ctx2[4];
         let i;
         for (i = 0; i < each_value.length; i += 1) {
           const child_ctx = get_each_context(ctx2, each_value, i);
@@ -354,7 +341,7 @@ function create_if_block$1(ctx) {
           } else {
             each_blocks[i] = create_each_block(child_ctx);
             each_blocks[i].c();
-            each_blocks[i].m(div1, null);
+            each_blocks[i].m(div, null);
           }
         }
         for (; i < each_blocks.length; i += 1) {
@@ -362,83 +349,61 @@ function create_if_block$1(ctx) {
         }
         each_blocks.length = each_value.length;
       }
-      if (dirty & 4) {
-        attr(div1, "class", ctx2[2]);
+      if (dirty & 12 && div_class_value !== (div_class_value = "" + (ctx2[2] + " " + (ctx2[3] === "true" ? "sidebar" : "nosidebar")))) {
+        attr(div, "class", div_class_value);
       }
     },
     d(detaching) {
       if (detaching)
-        detach(div1);
+        detach(div);
+      if (if_block)
+        if_block.d();
       destroy_each(each_blocks, detaching);
     }
   };
 }
-function create_each_block(ctx) {
+function create_if_block_4(ctx) {
   let a;
-  let div2;
+  let div1;
   let div0;
-  let t0_value = when$1(ctx[9].start_datetime) + "";
   let t0;
   let t1;
-  let span;
-  let t2;
-  let t3_value = ctx[9].place.name + "";
-  let t3;
-  let t4;
-  let div1;
-  let t5_value = ctx[9].title + "";
-  let t5;
-  let t6;
-  let a_href_value;
-  let a_title_value;
+  let img;
+  let img_src_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[9].slug || ctx[9].id)));
-      attr(a, "title", a_title_value = ctx[9].title);
+      div0 = element("div");
+      t0 = text(ctx[1]);
+      t1 = space();
+      img = element("img");
+      attr(div0, "class", "title");
+      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(div1, "class", "content");
+      attr(a, "href", ctx[0]);
       attr(a, "target", "_blank");
+      attr(a, "id", "header");
     },
     m(target, anchor) {
       insert(target, a, anchor);
-      append(a, div2);
-      append(div2, div0);
+      append(a, div1);
+      append(div1, 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);
+      append(div1, t1);
+      append(div1, img);
     },
     p(ctx2, dirty) {
-      if (dirty & 8 && t0_value !== (t0_value = when$1(ctx2[9].start_datetime) + ""))
-        set_data(t0, t0_value);
-      if (dirty & 8 && t3_value !== (t3_value = ctx2[9].place.name + ""))
-        set_data(t3, t3_value);
-      if (dirty & 8 && t5_value !== (t5_value = ctx2[9].title + ""))
-        set_data(t5, t5_value);
-      if (dirty & 9 && a_href_value !== (a_href_value = "" + (ctx2[0] + "/event/" + (ctx2[9].slug || ctx2[9].id)))) {
-        attr(a, "href", a_href_value);
+      if (dirty & 2)
+        set_data(t0, ctx2[1]);
+      if (dirty & 1 && !src_url_equal(img.src, img_src_value = "" + (ctx2[0] + "/logo.png"))) {
+        attr(img, "src", img_src_value);
       }
-      if (dirty & 8 && a_title_value !== (a_title_value = ctx2[9].title)) {
-        attr(a, "title", a_title_value);
+      if (dirty & 1) {
+        attr(a, "href", ctx2[0]);
       }
     },
     d(detaching) {
@@ -447,9 +412,322 @@ function create_each_block(ctx) {
     }
   };
 }
+function create_if_block_2(ctx) {
+  let div;
+  function select_block_type(ctx2, dirty) {
+    if (ctx2[11].media.length)
+      return create_if_block_3;
+    return create_else_block;
+  }
+  let current_block_type = select_block_type(ctx);
+  let if_block = current_block_type(ctx);
+  return {
+    c() {
+      div = element("div");
+      if_block.c();
+      attr(div, "class", "img");
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+      if_block.m(div, null);
+    },
+    p(ctx2, dirty) {
+      if (current_block_type === (current_block_type = select_block_type(ctx2)) && if_block) {
+        if_block.p(ctx2, dirty);
+      } else {
+        if_block.d(1);
+        if_block = current_block_type(ctx2);
+        if (if_block) {
+          if_block.c();
+          if_block.m(div, null);
+        }
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(div);
+      if_block.d();
+    }
+  };
+}
+function create_else_block(ctx) {
+  let img;
+  let img_style_value;
+  let img_alt_value;
+  let img_src_value;
+  return {
+    c() {
+      img = element("img");
+      attr(img, "style", img_style_value = "object-position: " + position$1(ctx[11]) + "; aspect-ratio=1.7778;");
+      attr(img, "alt", img_alt_value = ctx[11].media[0].name);
+      if (!src_url_equal(img.src, img_src_value = ctx[11].media.length ? ctx[0] + "/media/thumb/" + ctx[11].media[0].url : ctx[0] + "/noimg.svg"))
+        attr(img, "src", img_src_value);
+      attr(img, "loading", "lazy");
+    },
+    m(target, anchor) {
+      insert(target, img, anchor);
+    },
+    p(ctx2, dirty) {
+      if (dirty & 16 && img_style_value !== (img_style_value = "object-position: " + position$1(ctx2[11]) + "; aspect-ratio=1.7778;")) {
+        attr(img, "style", img_style_value);
+      }
+      if (dirty & 16 && img_alt_value !== (img_alt_value = ctx2[11].media[0].name)) {
+        attr(img, "alt", img_alt_value);
+      }
+      if (dirty & 17 && !src_url_equal(img.src, img_src_value = ctx2[11].media.length ? ctx2[0] + "/media/thumb/" + ctx2[11].media[0].url : ctx2[0] + "/noimg.svg")) {
+        attr(img, "src", img_src_value);
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(img);
+    }
+  };
+}
+function create_if_block_3(ctx) {
+  let img;
+  let img_style_value;
+  let img_alt_value;
+  let img_src_value;
+  return {
+    c() {
+      img = element("img");
+      attr(img, "style", img_style_value = "object-position: " + position$1(ctx[11]) + "; aspect-ratio=1.7778;");
+      attr(img, "alt", img_alt_value = ctx[11].media[0].name);
+      if (!src_url_equal(img.src, img_src_value = ctx[11].media.length ? ctx[0] + "/media/thumb/" + ctx[11].media[0].url : ctx[0] + "/noimg.svg"))
+        attr(img, "src", img_src_value);
+      attr(img, "loading", "lazy");
+    },
+    m(target, anchor) {
+      insert(target, img, anchor);
+    },
+    p(ctx2, dirty) {
+      if (dirty & 16 && img_style_value !== (img_style_value = "object-position: " + position$1(ctx2[11]) + "; aspect-ratio=1.7778;")) {
+        attr(img, "style", img_style_value);
+      }
+      if (dirty & 16 && img_alt_value !== (img_alt_value = ctx2[11].media[0].name)) {
+        attr(img, "alt", img_alt_value);
+      }
+      if (dirty & 17 && !src_url_equal(img.src, img_src_value = ctx2[11].media.length ? ctx2[0] + "/media/thumb/" + ctx2[11].media[0].url : ctx2[0] + "/noimg.svg")) {
+        attr(img, "src", img_src_value);
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(img);
+    }
+  };
+}
+function create_if_block_1$1(ctx) {
+  let div;
+  let each_value_1 = ctx[11].tags;
+  let each_blocks = [];
+  for (let i = 0; i < each_value_1.length; i += 1) {
+    each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+  }
+  return {
+    c() {
+      div = element("div");
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].c();
+      }
+      attr(div, "class", "tags");
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].m(div, null);
+      }
+    },
+    p(ctx2, dirty) {
+      if (dirty & 16) {
+        each_value_1 = ctx2[11].tags;
+        let i;
+        for (i = 0; i < each_value_1.length; i += 1) {
+          const child_ctx = get_each_context_1(ctx2, each_value_1, i);
+          if (each_blocks[i]) {
+            each_blocks[i].p(child_ctx, dirty);
+          } else {
+            each_blocks[i] = create_each_block_1(child_ctx);
+            each_blocks[i].c();
+            each_blocks[i].m(div, null);
+          }
+        }
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+        each_blocks.length = each_value_1.length;
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(div);
+      destroy_each(each_blocks, detaching);
+    }
+  };
+}
+function create_each_block_1(ctx) {
+  let span;
+  let t0;
+  let t1_value = ctx[14] + "";
+  let t1;
+  return {
+    c() {
+      span = element("span");
+      t0 = text("#");
+      t1 = text(t1_value);
+      attr(span, "class", "tag");
+    },
+    m(target, anchor) {
+      insert(target, span, anchor);
+      append(span, t0);
+      append(span, t1);
+    },
+    p(ctx2, dirty) {
+      if (dirty & 16 && t1_value !== (t1_value = ctx2[14] + ""))
+        set_data(t1, t1_value);
+    },
+    d(detaching) {
+      if (detaching)
+        detach(span);
+    }
+  };
+}
+function create_each_block(ctx) {
+  let a;
+  let t0;
+  let div2;
+  let div0;
+  let t1_value = when$1(ctx[11].start_datetime) + "";
+  let t1;
+  let t2;
+  let div1;
+  let t3_value = ctx[11].title + "";
+  let t3;
+  let t4;
+  let span1;
+  let t5;
+  let t6_value = ctx[11].place.name + "";
+  let t6;
+  let t7;
+  let span0;
+  let t8_value = ctx[11].place.address + "";
+  let t8;
+  let t9;
+  let t10;
+  let a_href_value;
+  let a_title_value;
+  let if_block0 = ctx[3] !== "true" && create_if_block_2(ctx);
+  let if_block1 = ctx[11].tags.length && create_if_block_1$1(ctx);
+  return {
+    c() {
+      a = element("a");
+      if (if_block0)
+        if_block0.c();
+      t0 = space();
+      div2 = element("div");
+      div0 = element("div");
+      t1 = text(t1_value);
+      t2 = space();
+      div1 = element("div");
+      t3 = text(t3_value);
+      t4 = space();
+      span1 = element("span");
+      t5 = text("@");
+      t6 = text(t6_value);
+      t7 = space();
+      span0 = element("span");
+      t8 = text(t8_value);
+      t9 = space();
+      if (if_block1)
+        if_block1.c();
+      t10 = space();
+      attr(div0, "class", "subtitle");
+      attr(div1, "class", "title");
+      attr(span0, "class", "subtitle");
+      attr(span1, "class", "place");
+      attr(div2, "class", "content");
+      attr(a, "href", a_href_value = "" + (ctx[0] + "/event/" + (ctx[11].slug || ctx[11].id)));
+      attr(a, "class", "event");
+      attr(a, "title", a_title_value = ctx[11].title);
+      attr(a, "target", "_blank");
+    },
+    m(target, anchor) {
+      insert(target, a, anchor);
+      if (if_block0)
+        if_block0.m(a, null);
+      append(a, t0);
+      append(a, div2);
+      append(div2, div0);
+      append(div0, t1);
+      append(div2, t2);
+      append(div2, div1);
+      append(div1, t3);
+      append(div2, t4);
+      append(div2, span1);
+      append(span1, t5);
+      append(span1, t6);
+      append(span1, t7);
+      append(span1, span0);
+      append(span0, t8);
+      append(div2, t9);
+      if (if_block1)
+        if_block1.m(div2, null);
+      append(a, t10);
+    },
+    p(ctx2, dirty) {
+      if (ctx2[3] !== "true") {
+        if (if_block0) {
+          if_block0.p(ctx2, dirty);
+        } else {
+          if_block0 = create_if_block_2(ctx2);
+          if_block0.c();
+          if_block0.m(a, t0);
+        }
+      } else if (if_block0) {
+        if_block0.d(1);
+        if_block0 = null;
+      }
+      if (dirty & 16 && t1_value !== (t1_value = when$1(ctx2[11].start_datetime) + ""))
+        set_data(t1, t1_value);
+      if (dirty & 16 && t3_value !== (t3_value = ctx2[11].title + ""))
+        set_data(t3, t3_value);
+      if (dirty & 16 && t6_value !== (t6_value = ctx2[11].place.name + ""))
+        set_data(t6, t6_value);
+      if (dirty & 16 && t8_value !== (t8_value = ctx2[11].place.address + ""))
+        set_data(t8, t8_value);
+      if (ctx2[11].tags.length) {
+        if (if_block1) {
+          if_block1.p(ctx2, dirty);
+        } else {
+          if_block1 = create_if_block_1$1(ctx2);
+          if_block1.c();
+          if_block1.m(div2, null);
+        }
+      } else if (if_block1) {
+        if_block1.d(1);
+        if_block1 = null;
+      }
+      if (dirty & 17 && a_href_value !== (a_href_value = "" + (ctx2[0] + "/event/" + (ctx2[11].slug || ctx2[11].id)))) {
+        attr(a, "href", a_href_value);
+      }
+      if (dirty & 16 && a_title_value !== (a_title_value = ctx2[11].title)) {
+        attr(a, "title", a_title_value);
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(a);
+      if (if_block0)
+        if_block0.d();
+      if (if_block1)
+        if_block1.d();
+    }
+  };
+}
 function create_fragment$1(ctx) {
   let if_block_anchor;
-  let if_block = ctx[3].length && create_if_block$1(ctx);
+  let if_block = ctx[4].length && create_if_block$1(ctx);
   return {
     c() {
       if (if_block)
@@ -463,7 +741,7 @@ function create_fragment$1(ctx) {
       insert(target, if_block_anchor, anchor);
     },
     p(ctx2, [dirty]) {
-      if (ctx2[3].length) {
+      if (ctx2[4].length) {
         if (if_block) {
           if_block.p(ctx2, dirty);
         } else {
@@ -486,10 +764,17 @@ function create_fragment$1(ctx) {
     }
   };
 }
+function position$1(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 when$1(timestamp) {
   return new Date(timestamp * 1e3).toLocaleDateString(void 0, {
     weekday: "long",
-    month: "short",
+    month: "long",
     day: "numeric",
     hour: "2-digit",
     minute: "2-digit"
@@ -497,11 +782,13 @@ function when$1(timestamp) {
 }
 function instance$1($$self, $$props, $$invalidate) {
   let { baseurl = "" } = $$props;
-  let { title = "Gancio events" } = $$props;
+  let { title = "" } = $$props;
   let { maxlength = false } = $$props;
   let { tags = "" } = $$props;
   let { places = "" } = $$props;
   let { theme = "light" } = $$props;
+  let { show_recurrent = false } = $$props;
+  let { sidebar = "true" } = $$props;
   let mounted = false;
   let events = [];
   function update2(v) {
@@ -517,8 +804,11 @@ function instance$1($$self, $$props, $$invalidate) {
     if (places) {
       params.push(`places=${places}`);
     }
+    if (show_recurrent) {
+      params.push(`show_recurrent=true`);
+    }
     fetch(`${baseurl}/api/events?${params.join("&")}`).then((res) => res.json()).then((e) => {
-      $$invalidate(3, events = e);
+      $$invalidate(4, events = e);
     }).catch((e) => {
       console.error("Error loading Gancio API -> ", e);
     });
@@ -533,25 +823,39 @@ function instance$1($$self, $$props, $$invalidate) {
     if ("title" in $$props2)
       $$invalidate(1, title = $$props2.title);
     if ("maxlength" in $$props2)
-      $$invalidate(4, maxlength = $$props2.maxlength);
+      $$invalidate(5, maxlength = $$props2.maxlength);
     if ("tags" in $$props2)
-      $$invalidate(5, tags = $$props2.tags);
+      $$invalidate(6, tags = $$props2.tags);
     if ("places" in $$props2)
-      $$invalidate(6, places = $$props2.places);
+      $$invalidate(7, places = $$props2.places);
     if ("theme" in $$props2)
       $$invalidate(2, theme = $$props2.theme);
+    if ("show_recurrent" in $$props2)
+      $$invalidate(8, show_recurrent = $$props2.show_recurrent);
+    if ("sidebar" in $$props2)
+      $$invalidate(3, sidebar = $$props2.sidebar);
   };
   $$self.$$.update = () => {
-    if ($$self.$$.dirty & 118) {
+    if ($$self.$$.dirty & 486) {
       update2();
     }
   };
-  return [baseurl, title, theme, events, maxlength, tags, places];
+  return [
+    baseurl,
+    title,
+    theme,
+    sidebar,
+    events,
+    maxlength,
+    tags,
+    places,
+    show_recurrent
+  ];
 }
 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;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;border-radius:5px}#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:var(--text-color);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}.dark{--bg-odd-color:#161616;--bg-even-color:#222;--bg-hover-color:#333;--text-color:white;--title-color:white}.light{--bg-odd-color:#f5f5f5;--bg-even-color:#FAFAFA;--bg-hover-color:#EEE;--text-color:#222;--title-color:black}a:nth-child(odd){background-color:var(--bg-odd-color)}a:nth-child(even){background-color:var(--bg-even-color)}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:var(--bg-hover-color);padding-left:23px}.place{font-weight:600;color:#ff6e40}.title{color:var(--title-color);font-weight:bold}</style>`;
+    this.shadowRoot.innerHTML = `<style>#gancioEvents{font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";overflow-x:hidden;width:100%;box-sizing:content-box;margin:0 auto;font-size:1rem}.nosidebar{max-width:1200px}.event{display:flex;flex-direction:row;flex-wrap:nowrap}#header{padding:1.2rem 1rem;background-color:var(--bg-odd-color)}.sidebar{max-width:500px;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;border-radius:5px;font-size:1rem}.event .img{width:100%;max-width:500px;height:250px;flex:1 0 auto}@media screen and (max-width: 800px){.event{flex-wrap:wrap}.event .img{max-width:100%}}.event img{object-fit:cover;border-radius:15px;width:100%;height:100%;box-shadow:rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px}.event .content{display:flex;flex:auto;flex-direction:column;min-width:300px}.nosidebar .event{margin-bottom:2rem}.nosidebar .content{margin-left:1rem;margin-top:5px}.tags{margin-top:2px}#logo{position:absolute;top:10px;right:10px;height:40px}a{text-decoration:none;color:var(--text-color);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 .3s;box-sizing:content-box}a:hover .title,a:focus .title,a:active .title{text-decoration:underline}.dark{--bg-odd-color:#161616;--bg-even-color:#222;--bg-hover-color:#333;--text-color:white;--title-color:white;--line-color:rgba(120, 120, 120, 0.2)}.light{--bg-odd-color:#f5f5f5;--bg-even-color:#FAFAFA;--bg-hover-color:#EEE;--text-color:#222;--title-color:black;--line-color:rgba(220, 220, 220, 0.9)}.sidebar a{background-color:var(--bg-even-color);border-bottom:1px solid var(--line-color)}.sidebar a:hover,.sidebar a:focus,.sidebar a:active{background-color:var(--bg-hover-color);padding-left:15px;padding-right:25px}.place{font-weight:400;font-size:1.2rem;line-height:1.4rem;color:orangered}.title{color:var(--title-color);font-weight:bold;font-size:1.3rem;line-height:1.1em}.nosidebar .title{font-size:1.9em;line-height:1.1em}.subtitle{font-size:1rem;line-height:1.1em;color:var(--title-color);opacity:0.9}.tag{margin-right:10px}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -559,10 +863,12 @@ class GancioEvents extends SvelteElement {
     }, instance$1, create_fragment$1, safe_not_equal, {
       baseurl: 0,
       title: 1,
-      maxlength: 4,
-      tags: 5,
-      places: 6,
-      theme: 2
+      maxlength: 5,
+      tags: 6,
+      places: 7,
+      theme: 2,
+      show_recurrent: 8,
+      sidebar: 3
     }, null);
     if (options) {
       if (options.target) {
@@ -575,7 +881,16 @@ class GancioEvents extends SvelteElement {
     }
   }
   static get observedAttributes() {
-    return ["baseurl", "title", "maxlength", "tags", "places", "theme"];
+    return [
+      "baseurl",
+      "title",
+      "maxlength",
+      "tags",
+      "places",
+      "theme",
+      "show_recurrent",
+      "sidebar"
+    ];
   }
   get baseurl() {
     return this.$$.ctx[0];
@@ -592,21 +907,21 @@ class GancioEvents extends SvelteElement {
     flush();
   }
   get maxlength() {
-    return this.$$.ctx[4];
+    return this.$$.ctx[5];
   }
   set maxlength(maxlength) {
     this.$$set({ maxlength });
     flush();
   }
   get tags() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[6];
   }
   set tags(tags) {
     this.$$set({ tags });
     flush();
   }
   get places() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[7];
   }
   set places(places) {
     this.$$set({ places });
@@ -619,6 +934,20 @@ class GancioEvents extends SvelteElement {
     this.$$set({ theme });
     flush();
   }
+  get show_recurrent() {
+    return this.$$.ctx[8];
+  }
+  set show_recurrent(show_recurrent) {
+    this.$$set({ show_recurrent });
+    flush();
+  }
+  get sidebar() {
+    return this.$$.ctx[3];
+  }
+  set sidebar(sidebar) {
+    this.$$set({ sidebar });
+    flush();
+  }
 }
 customElements.define("gancio-events", GancioEvents);
 function create_if_block(ctx) {
diff --git a/webcomponents/index.html b/webcomponents/index.html
index ed611ec8..87e1d881 100644
--- a/webcomponents/index.html
+++ b/webcomponents/index.html
@@ -7,10 +7,11 @@
     <title>Gancio Events Custom Element Demo</title>
   </head>
   <body>
-    <gancio-events baseurl='http://localhost:13120' title='Gancio' theme='light'></gancio-events>
+    <gancio-events baseurl='https://demo.gancio.org' title='demo' theme='light' show_recurrent='true'></gancio-events>
     <br/>
-    <gancio-events baseurl='http://localhost:13120' title='Gancio' theme='dark'></gancio-events>
+    <gancio-events baseurl='https://gancio.cisti.org' title='La punta' theme='dark'  show_recurrent='true'></gancio-events>
     <br/>
+    <gancio-events baseurl='https://gancio.cisti.org' sidebar='false' show_recurrent='true'></gancio-events>
     <!-- <gancio-event id=1 baseurl='http://localhost:13120'></gancio-event> -->
     <script type="module" src="/src/main.js"></script>
   </body>
diff --git a/webcomponents/package.json b/webcomponents/package.json
index 1facfb05..f88bd8dc 100644
--- a/webcomponents/package.json
+++ b/webcomponents/package.json
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.34",
-    "svelte": "^3.46.1",
+    "svelte": "^3.46.3",
     "vite": "^2.7.11"
   }
 }
diff --git a/webcomponents/src/GancioEvents.svelte b/webcomponents/src/GancioEvents.svelte
index f016315f..4a5bfcc5 100644
--- a/webcomponents/src/GancioEvents.svelte
+++ b/webcomponents/src/GancioEvents.svelte
@@ -1,11 +1,14 @@
 <script>
+
   import { onMount } from 'svelte'
   export let baseurl = ''
-  export let title = 'Gancio events'
+  export let title = ''
   export let maxlength = false
   export let tags = ''
   export let places = ''
   export let theme = 'light'
+  export let show_recurrent=false
+  export let sidebar='true'
 
   let mounted = false
   let events = []
@@ -24,6 +27,10 @@
     if (places) {
       params.push(`places=${places}`)
     }
+
+    if (show_recurrent) {
+      params.push(`show_recurrent=true`)
+    }
     
     fetch(`${baseurl}/api/events?${params.join('&')}`)
     .then(res => res.json())
@@ -35,62 +42,153 @@
     })
   }
 
-  
+
+  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 when (timestamp) {
     return new Date(timestamp*1000)
-            .toLocaleDateString(undefined,
-              {
-                weekday: 'long',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit'
-              })
+      .toLocaleDateString(undefined,
+        {
+          weekday: 'long',
+          month: 'long',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit'
+        })
   }
 
-
   onMount(() => {
     mounted = true
     update()
   })
-  $: update(maxlength && title && places && tags && theme)
+  $: update(maxlength && title && places && tags && theme && show_recurrent)
 
 </script>
 <svelte:options tag="gancio-events"/>
 {#if events.length}
-<div id='gancioEvents' class='{theme}'>
-  <a href='{baseurl}' target='_blank'>
+<div id='gancioEvents' class='{theme} {sidebar === 'true' ? "sidebar" : "nosidebar"}'>
+  {#if title && sidebar === 'true'}
+  <a href='{baseurl}' target='_blank' id='header'>
     <div class='content'>
-      <span id='headerTitle'>{title || 'Gancio'}</span>
+      <div class='title'>{title}</div>
       <img id='logo' alt='logo' src='{baseurl}/logo.png'/>
     </div>
   </a>
+  {/if}
   {#each events as event}
-    <a href='{baseurl}/event/{event.slug || event.id}' title='{event.title}' target='_blank'>
+    <a href='{baseurl}/event/{event.slug || event.id}' class='event' title='{event.title}' target='_blank'>
+      {#if sidebar !== 'true'}
+      <div class='img'>
+        {#if event.media.length}
+          <img style="object-position: {position(event)}; aspect-ratio=1.7778;"
+            alt="{event.media[0].name}"
+            src="{event.media.length ? baseurl + '/media/thumb/' + event.media[0].url : baseurl + '/noimg.svg'}" loading='lazy'/>
+        {:else}
+          <img style="object-position: {position(event)}; aspect-ratio=1.7778;"
+          alt="{event.media[0].name}"
+          src="{event.media.length ? baseurl + '/media/thumb/' + event.media[0].url : baseurl + '/noimg.svg'}" loading='lazy'/>
+        {/if}
+      </div>
+      {/if}
       <div class='content'>
         <div class='subtitle'>
           {when(event.start_datetime)}
-          <span class='place'>@{event.place.name}</span>
         </div>
         <div class='title'>
           {event.title}
         </div>
+        <span class='place'>@{event.place.name} <span class='subtitle'> {event.place.address}</span></span>
+        {#if event.tags.length}
+          <div class='tags'>
+          {#each event.tags as tag}
+            <span class='tag'>#{tag}</span>
+          {/each}
+          </div>
+        {/if}
       </div>
     </a>
     {/each}
 </div>
 {/if}
 <style>
-
 #gancioEvents {
-  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   overflow-x: hidden;
-  font-size: 1rem;
   width: 100%;
-  max-width: 500px;
   box-sizing: content-box;
+  margin: 0 auto;
+  font-size: 1rem;
+}
+
+
+.nosidebar {
+  max-width: 1200px;
+}
+.event {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+#header{
+  padding: 1.2rem 1rem;
+  background-color: var(--bg-odd-color);
+}
+
+.sidebar {
+  max-width: 500px;
   box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;
   border-radius: 5px;
+  font-size: 1rem;
+}
+
+.event .img {
+  width: 100%;
+  max-width: 500px;
+  height: 250px;
+  flex: 1 0 auto;
+  /* height: 100%; */
+}
+
+@media screen and (max-width: 800px) {
+  .event {
+    flex-wrap: wrap;
+  }
+  .event .img {
+    max-width: 100%;
+  }
+}
+.event img {
+  object-fit: cover;
+  border-radius: 15px;
+  width: 100%;
+  height: 100%;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+}
+.event .content {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.nosidebar .event {
+  margin-bottom: 2rem;
+}
+
+.nosidebar .content {
+  margin-left: 1rem;
+  margin-top: 5px;
+}
+
+.tags {
+  margin-top: 2px;
 }
 
 #logo {
@@ -100,12 +198,6 @@
   height: 40px;
 }
 
-#headerTitle {
-  line-height: 45px;
-  font-size: 1.3rem;
-  font-weight: 600;
-}
-
 a {
   text-decoration: none;
   color: var(--text-color);
@@ -118,16 +210,23 @@ a {
   font-weight: 400;
   font-size: .875rem;
   position: relative;
-  transition: background-color .3s cubic-bezier(.25,.8,.5,1), padding-left .3s;
+  transition: background-color .3s cubic-bezier(.25,.8,.5,1), padding .3s;
   box-sizing: content-box;
 }
 
+a:hover .title,
+a:focus .title,
+a:active .title {
+  text-decoration:underline;
+}
+
 .dark {
   --bg-odd-color: #161616;
   --bg-even-color: #222;
   --bg-hover-color: #333;
   --text-color: white;
   --title-color: white;
+  --line-color: rgba(120, 120, 120, 0.2);
 }
 
 .light {
@@ -136,37 +235,49 @@ a {
   --bg-hover-color: #EEE;
   --text-color: #222;
   --title-color: black;
+  --line-color: rgba(220, 220, 220, 0.9);
 }
-a:nth-child(odd) {
-  background-color: var(--bg-odd-color);
-}
-
-a:nth-child(even) {
+.sidebar a {
   background-color: var(--bg-even-color);
+  border-bottom:1px solid var(--line-color);
 }
 
-a:first-child {
-  border-radius: 5px 5px 0px 0px;
-}
-
-a:last-child {
-  border-radius: 0px 0px 5px 5px;
-  padding-bottom: 5px;
-}
-
-a:hover {
+.sidebar a:hover,
+.sidebar a:focus,
+.sidebar a:active {
   background-color: var(--bg-hover-color);
-  padding-left: 23px;
+  padding-left: 15px;
+  padding-right:25px;
 }
 
 .place {
-  font-weight: 600;
-  color: #ff6e40;
+  font-weight: 400;
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  color: orangered;
 }
 
 .title {
   color: var(--title-color);
   font-weight: bold;
+  font-size: 1.3rem;
+  line-height: 1.1em;
+}
+
+.nosidebar .title {
+  font-size: 1.9em;
+  line-height: 1.1em;
+}
+
+.subtitle {
+  font-size: 1rem;
+  line-height: 1.1em;
+  color: var(--title-color);
+  opacity: 0.9;
+}
+
+.tag {
+  margin-right: 10px;
 }
 
 </style>