shiny new gancio-event[s] webcomponents!

webcomponents/src/GancioEvent.svelte

@@ -0,0 +1,97 @@
+<script>
+  export let baseurl = 'https://demo.gancio.org'
+  export let id
+
+  let event
+
+  function update (id) {
+
+    fetch(`${baseurl}/api/event/${id}`)
+    .then(res => res.json())
+    .then(e => event = e)
+  }
+
+  function when (event) {
+    return new Date(event.start_datetime*1000)
+            .toLocaleDateString(undefined,
+              {
+                weekday: 'long',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+              })    
+  }
+
+  function thumbnail(event) {
+    return `${baseurl}/media/thumb/${event.media[0].url}`
+  }
+
+  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'    
+  }
+
+  $: update(id)
+
+</script>
+<svelte:options tag="gancio-event"/>
+{#if event}
+<a href='{baseurl}/event/{event.slug || event.id}' class="card">
+  {#if event.media.length}
+  <img src="{thumbnail(event)}" alt="{event.media[0].name}" style="background-position: {position(event)}; aspect-ratio=1.7778;">
+  {/if}
+  <div class="container">
+    <strong>{event.title}</strong>
+    <div>{when(event)}</div>
+    <div class='place'>@{event.place.name}</div>
+  </div>
+</a>
+{/if}
+<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; /* 5px rounded corners */
+  max-width: 500px;
+  text-decoration: none;
+  color: white;
+  background-color: #1e1e1e;
+  overflow: hidden;
+}
+
+/* Add rounded corners to the top left and the top right corner of the image */
+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;
+}
+
+/* On mouse-over, add a deeper shadow */
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+/* Add some padding inside the card container */
+.container {
+  transition: padding-left .2s;
+  padding: 16px;
+}
+
+.place {
+  font-weight: 600;
+  color: #ff6e40;
+}
+</style>

webcomponents/src/GancioEvents.svelte

@@ -0,0 +1,147 @@
+<script>
+  export let baseurl = 'https://dev.gancio.org'
+  export let title = 'Gancio events'
+  export let maxlength = false
+  export let tags = false 
+
+  let events = []
+  function update (v) {
+
+    const params = []
+    if (maxlength) {
+      params.push(`max=${maxlength}`)
+    }
+
+    if(tags) {
+      params.push(`tags="${tags}"`)
+    }
+
+    
+    fetch(`${baseurl}/api/events${maxlength ? '?max=' + maxlength : '' }`)
+    .then(res => res.json())
+    .then(e => events = e)
+  }
+
+  function when (timestamp) {
+    return new Date(timestamp*1000)
+            .toLocaleDateString(undefined,
+              {
+                weekday: 'long',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+              })
+  }
+  // update()
+  $: update(maxlength && title)
+
+</script>
+<svelte:options tag="gancio-events"/>
+{#if events.length}
+<div id='gancioEvents'>
+  {#if title}
+    <a href='{baseurl}' target='_blank'>
+      <div class='content'>
+        <span id='headerTitle'>{title}</span>
+        <img id='logo' alt='logo' src='{baseurl}/logo.png'/>
+      </div>
+    </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'>
+          {event.title}
+        </div>
+      </div>
+    </a>
+    {/each}
+</div>
+{/if}
+<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>

webcomponents/src/main.js

@@ -0,0 +1,2 @@
+export * from './GancioEvents.svelte'
+export * from './GancioEvent.svelte'