Merge pull request #479 from dwh-outsite/instagram-widget

Add insta widgets
dwh-outsite · Apr 9, 2023 · 874fc52 · 874fc52
2 parents a52f0f4 + 8fa0c90
commit 874fc52
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 6 deletions.
diff --git a/components/InstagramChannels.vue b/components/InstagramChannels.vue
@@ -0,0 +1,53 @@
+<i18n lang="yaml">
+en:
+  title: Our <strong>Events and Updates</strong>
+  button: Follow {name} on Instagram
+nl:
+  title: Onze <strong>Events en Updates</strong>
+  button: Volg {name} op Instagram
+</i18n>
+
+<template>
+  <div class="space-y-6">
+    <slot name="title">
+      <div class="lg:flex justify-between space-y-4 lg:space-y-0">
+        <h1 class="font-medium text-5xl" v-html="$t('title')" />
+        <div class="inline-block rounded-full bg-brand-900 p-2">
+          <button
+            v-for="brand in brands"
+            :key="brand.name"
+            class="rounded-full px-4 py-2 leading-none text-lg"
+            :class="active === brand ? 'bg-white text-gray-800' : 'text-white'"
+            @click="active = brand"
+          >
+            <div class="font-semibold">{{ brand.name }}</div>
+            <div class="text-xs">{{ brand.subtitle[$i18n.locale] }}</div>
+          </button>
+        </div>
+      </div>
+    </slot>
+    <InstagramWidget :widget-id="active.widgetId" />
+    <a :href="`https://www.instagram.com/${active.instagram}`" target="_blank" class="block text-center">
+      <button class="button-white">
+        <div class="flex items-center space-x-2">
+          <div v-text="$t('button', { name: active.name })" />
+          <Zondicon icon="cheveron-outline-right" class="h-8 text-gray-600 fill-current" />
+        </div>
+      </button>
+    </a>
+  </div>
+</template>
+
+<script>
+import Zondicon from 'vue-zondicons'
+
+export default {
+  components: { Zondicon },
+  props: ['brands'],
+  data() {
+    return {
+      active: this.brands[0],
+    }
+  },
+}
+</script>
diff --git a/components/InstagramWidget.vue b/components/InstagramWidget.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
+    <iframe
+      :src="`//lightwidget.com/widgets/${widgetId}.html`"
+      scrolling="no"
+      allowtransparency="true"
+      class="lightwidget-widget"
+      style="width: 100%; border: 0; overflow: hidden"
+    ></iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['widgetId'],
+}
+</script>
diff --git a/sites/dwhdelft.nl/pages/index.vue b/sites/dwhdelft.nl/pages/index.vue
@@ -84,6 +84,14 @@ nl:
       <RecurringEvents />
     </section>
 
+    <section class="-mt-24">
+      <SkewedSection content-class="bg-brand-800" triangle-class="border-brand-800" :bottom="false">
+        <div class="container mx-auto px-4 pt-12 pb-16">
+          <InstagramChannels class="text-white" :brands="instagramChannels" />
+        </div>
+      </SkewedSection>
+    </section>
+
     <section id="eatingout" class="bg-gray-200">
       <EatingOut />
     </section>
@@ -99,5 +107,29 @@ export default {
       )[0],
     }
   },
+  data() {
+    return {
+      instagramChannels: [
+        {
+          name: 'DWH',
+          subtitle: { nl: 'Organisatie', en: 'Organisation' },
+          widgetId: '9555f325abc15974a4a4e4ef0eadfa0a',
+          instagram: 'dwh_delft',
+        },
+        {
+          name: 'Outsite',
+          subtitle: { nl: 'Donderdagen', en: 'Thursdays' },
+          widgetId: '624d8645cce75e45bae0a87c9c761cd6',
+          instagram: 'outsite_delft',
+        },
+        {
+          name: 'MIXUP',
+          subtitle: { nl: 'Zaterdagen', en: 'Saturdays' },
+          widgetId: '219aedf13a4355fe95c6e27ed1f7386c',
+          instagram: 'mixupdelft',
+        },
+      ],
+    }
+  },
 }
 </script>
diff --git a/sites/outsite.nl/pages/index.vue b/sites/outsite.nl/pages/index.vue
@@ -17,8 +17,8 @@ en:
     invitation: 'Come by during one of our bar nights:<br> <strong>Every Thursday starting at {0}</strong>'
   video:
     title: <strong>Outsite</strong> in 120 seconds
-  activities:
-    title: Upcoming activities
+  instagram:
+    title: Updates and upcoming activities
 nl:
   hero:
     title: 'Delftse LHBT+ jongerenvereniging'
@@ -37,8 +37,8 @@ nl:
     invitation: 'Kom gerust langs op onze baravond: <br> <strong>Elke donderdag vanaf {0}</strong>'
   video:
     title: <strong>Outsite</strong> in 120 seconden
-  activities:
-    title: Aankomende activiteiten
+  instagram:
+    title: Updates en aankomende activiteiten
 </i18n>
 
 <template>
@@ -104,9 +104,17 @@ nl:
       </a>
     </section>
 
-    <section id="activities" class="relative page-ender pt-48 md:pt-20">
+    <section id="activities" class="relative page-ender pt-48 md:pt-20 pb-16">
       <Testimonial class="absolute left-0 right-0 -mt-64 md:-mt-40" />
-      <Activities :title="$t('activities.title')" class="relative z-10 mt-12" />
+      <div class="container mx-auto px-4 relative z-10 mt-12">
+        <InstagramChannels class="xl:w-2/3 mx-auto" :brands="instagramChannels">
+          <template #title>
+            <h1 class="tracking-wide font-semibold uppercase text-2xl mt-6 mb-10 text-center">
+              {{ $t('instagram.title') }}
+            </h1>
+          </template>
+        </InstagramChannels>
+      </div>
     </section>
 
     <section id="eatingout" class="bg-gray-200">
@@ -131,6 +139,18 @@ export default {
       )[0],
     }
   },
+  data() {
+    return {
+      instagramChannels: [
+        {
+          name: 'Outsite',
+          subtitle: { nl: 'Donderdagen', en: 'Thursdays' },
+          widgetId: '624d8645cce75e45bae0a87c9c761cd6',
+          instagram: 'outsite_delft',
+        },
+      ],
+    }
+  },
 }
 </script>