updates

2025-11-29 12:10:23 -05:00
parent 010244847f
commit 1349158dcb
55 changed files with 2227 additions and 142 deletions
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
    <meta name="twitter:image" content="">

  </head>
-  <body class="">
+  <body class="z-0">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router'
-import { useDark, useToggle } from "@vueuse/core";
+    import { storeToRefs } from 'pinia'
+    import { RouterLink, RouterView } from 'vue-router'
+    import { useDark, useToggle } from "@vueuse/core";

-const isDark = useDark({selector: "body",});
-const toggleDark = useToggle(isDark);
+    const isDark = useDark({selector: "body",});
+    const toggleDark = useToggle(isDark);

 </script>

--- a/src/components/Sections/EventList.vue
+++ b/src/components/Sections/EventList.vue
@@ -7,8 +7,8 @@


  import EventListingComplete from '../listings/EventListing.vue';
-  import Promo from '../listings/BlueskyLinks.vue';
-  // import Promo from '../listings/Promo.vue';
+  // import Promo from '../listings/BlueskyLinks.vue';
+  import Promo from '../listings/Promo.vue';

  import { useEventsStore } from '../../stores/EventsStore';

@@ -26,19 +26,28 @@

  const store = useEventsStore();
  store.fetchEvents(props.cal);
-  store.fetchPromo();
+  store.fetchPromo(props.cal);
  const events = computed(() => {
+    if (store.events.length == 0){
+      store.fetchEvents(props.cal);
+    }
    return store.events;
  });
  const promo = computed(() => {
+    if (store.promo.length == 0){
+      store.fetchPromo(props.cal);
+    }
    return store.promo;
  });

-  
-
 </script>
        
 <template>
+  <div v-if="events.length == 0" class="p-8">
+    <p class="p-2">Wait for it ...</p>
+    <p class="p-2">Or try refreshing, still workin' out a few bugs in the code.</p>
+    <p class="p-2">Though give it a moment ... please ...</p>
+  </div>
  <div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex md:justify-center lg:flex lg:justify-center z-0">
    <span class="self-stretch" v-for="(item, index) in events">
      <Promo  v-if="(index % 6 == 0) && index != 0 && events.length > 12" :item = promo[(index/6)-1] :index = "(index/6)-1"/>
--- a/src/components/Sections/Header.vue
+++ b/src/components/Sections/Header.vue
@@ -15,7 +15,7 @@
          another <a href="https://www.dreamfreely.org" targe="_blank">DreamFreely</a> project
        </span> -->
        <span class="subtitle z-40">
-          Events done simply
+          a dreamfreely project
        </span>
      </div>
    </header>
--- a/src/components/blocks/About.vue
+++ b/src/components/blocks/About.vue
@@ -0,0 +1,56 @@
+<script setup>
+    import { storeToRefs } from 'pinia'
+    import { mainStore } from '../../stores/MainStore.vue'
+    import { useDark, useToggle } from "@vueuse/core";
+    import qrCode from '../../assets/qr.digi.png'
+
+    const isDark = useDark({selector: "body",});
+</script>
+
+<template>
+    <div class="max-w-2xl p-6 mt-0 rounded-md promo-overlay" :class="{ isDark: isDark }">
+        <div class="mt-3 pb-5">
+            <h2 class="text-2xl"><a href="//www.dreamfreely.org">DreamFreely</a></h2>
+            <!-- <div v-if="$route.path != '/medellin'"> -->
+            <div>
+                <!-- <p class="p-10">A creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p> -->
+                <p>The idea is to have a website that just has event details, and redirects you to the primary source; that's it.</p>
+                <p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
+                <p>If you represent a business and would like to be added to the directory, or seek ad space, <a>follow this link</a>.</p>
+
+                <hr/>
+
+                <p>La idea es tener un sitio web que solo contenga detalles del evento y te redirija a la fuente principal; eso es todo.</p>
+                <p>Puedes <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">enviar un calendario aquí</a>, o <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">enviar un evento aquí</a>.</p>
+                <p>Si representas a una empresa y deseas que te incluyan en el directorio, o si buscas espacio publicitario, <a>sigue este enlace</a>.</p>
+                <!-- <p>
+                    <img id="qrcode" :src="qrCode"/>
+                    <h2 class="text-xl green p-5">Shareable QR Code</h2>
+                </p> -->
+            </div>
+        </div>             
+    </div>    
+</template>
+
+<style scoped>
+/* .template {
+    background-color: #000;
+    z-index: 4;
+} */
+
+#qrcode {
+    width: 25em;
+    margin: auto;
+}
+.promo-overlay {
+    background-size: cover;    
+}
+
+.isDark {
+    background-color: #000;
+    color: #fff;
+}
+div >>> p {
+    padding:.5rem;
+}
+</style>
--- a/src/components/blocks/Modal.vue
+++ b/src/components/blocks/Modal.vue
@@ -1,114 +1,63 @@
 <script setup>
    import { storeToRefs } from 'pinia'
    import { mainStore } from '../../stores/MainStore.vue'
-    import About from '../About.vue'
+    import About from './About.vue'
    import qrCode from '../../assets/qr.digi.png'

    const promo = mainStore().promo_display;
-    
    const { isOpen, modal} = storeToRefs(mainStore())

-</script>
+    import { useDark, useToggle } from "@vueuse/core";
+    const isDark = useDark({selector: "body",});

+</script>

 <template>
    <div
        v-show="isOpen"
+        :class="{ isDark: isDark}"
        class="
-            overflow-auto scrolling-touch left-0 top-0 bottom-100 right-0 w-full h-full fixed
+            overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed
            overscroll-auto
            flex
-            items-start
-            justify-center
-            mx-auto
            z-40
        "
        >
-        <div class="max-w-2xl p-6 mt-10 rounded-md shadow-xl promo-overlay">
-            <!-- <div class="flex items-center justify-between">
-                <h3 v-show="modal" class="text-2xl">QR Code to DigiSnaxx</h3>
-                <h3 v-show="!modal" class="text-2xl">About DigiSnaxx</h3>
-                <svg
-                    @click="isOpen = false"
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-8 h-8 text-red-900 cursor-pointer"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                </svg>
-            </div> -->
-
-            <!-- <About v-if="modal === 0" class="z-40"/>  -->
-
-            <div v-if="modal === 0" class="p-2 template z-40">
-                <svg
-                    @click="isOpen = false"
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-8 h-8 text-red-900 cursor-pointer"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                </svg>
-                <div>
-                    <h2 class="text-2xl"><a href="">DreamFreely</a></h2>
-                    <p class="p-10">DigiSnaxx is the creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p>
-                    <p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
-
-                    <p>
-                        <img :src="qrCode"/>
-                        <h2 class="text-xl green p-5">Shareable QR Code</h2>
-                    </p>
-                </div>
-                
+        <div class="container p-6 rounded-md promo-overlay" :class="{ isDark: isDark}">
+            <svg
+                @click="isOpen = false"
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-8 h-8 text-red-900 cursor-pointer"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
+                <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+            </svg>
+            <div v-if="modal === 0" class="p-2 template z-40 justify-items-center" :class="{ isDark: isDark}">
+                <About class="" />
            </div>

-            <div v-if="modal === 1" class="p-2 template z-40">
-                <svg
-                    @click="isOpen = false"
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-8 h-8 text-red-900 cursor-pointer"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                </svg>
-                <img :src="qrCode"/>
-                <h2 class="text-xl green p-5">Shareable QR Code</h2>
-            </div>
-            <div v-if="modal === 2" class="p-10 template z-40 green">
+            <div v-if="modal === 2" class="p-10 template z-40" :class="{isDark: isDark }">
                <a class="text-lg underline font-bold" :href="promo[0].target_link">
-                    <h2 class="text-xl">
+                    <img class="rounded-full max-w-full m-auto p-5" :src="promo[0].overlay_image"/>
+                    <br/>
+                    <h2 class="text-xl m-auto">
                        {{ promo[0].title }}
                    </h2>
-                    <p class="text-xs">
+                    <p class="text-xs  m-auto">
                        {{ promo[0].target_link }}
                    </p>
-                    <img class="rounded-full" :src="promo[0].image"/>
                </a>
                <!-- <p>
                    {{  promo[0].promo_type }}
                </p> -->
-                <div class="p-5" v-html="promo[0].long_text" />
+                <div class="p-5 m-auto" v-html="promo[0].long_text" />
            </div>
            
        </div>
@@ -118,15 +67,21 @@
 </template>

 <style scoped>
-/* .template {
-    background-color: #000;
-    z-index: 4;
-} */
+.template {
+    background-color: #fff;
+}

+#qrcode {
+    width: 25em;
+    margin: auto;
+}
 .promo-overlay {
+    background-size: cover;    
+}
+
+.isDark {
    background-color: #000;
    color: #fff;
-    
 }
 div >>> p {
    padding:.5rem;
--- a/src/components/blocks/Modal2.vue
+++ b/src/components/blocks/Modal2.vue
@@ -0,0 +1,163 @@
+<script setup>
+    import { storeToRefs } from 'pinia'
+    import { mainStore } from '../../stores/MainStore.vue'
+    import About from '../About.vue'
+    import qrCode from '../../assets/qr.digi.png'
+
+    const promo = mainStore().promo_display;
+    
+    const { isOpen, modal} = storeToRefs(mainStore())
+
+</script>
+
+
+<template>
+    <div
+        v-show="isOpen"
+        class="
+            overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed
+            overscroll-auto
+            flex
+            items-start
+            justify-center
+            m-0
+            z-40
+        "
+        >
+        <div class="max-w-2xl p-6 mt-0 rounded-md shadow-xl promo-overlay">
+            <!-- <div class="flex items-center justify-between">
+                <h3 v-show="modal" class="text-2xl">QR Code to DigiSnaxx</h3>
+                <h3 v-show="!modal" class="text-2xl">About DigiSnaxx</h3>
+                <svg
+                    @click="isOpen = false"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-8 h-8 text-red-900 cursor-pointer"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>
+            </div> -->
+
+            <!-- <About v-if="modal === 0" class="z-40"/>  -->
+
+            <div v-if="modal === 0" class="p-2 template z-40">
+                <svg
+                    @click="isOpen = false"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-8 h-8 text-red-900 cursor-pointer"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>
+                <div class="mt-3 pb-5">
+                    <h2 class="text-2xl"><a href="//www.dreamfreely.org">DreamFreely</a></h2>
+                    <!-- <div v-if="$route.path != '/medellin'"> -->
+                    <div>
+                        <!-- <p class="p-10">A creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p> -->
+                        <p>The idea is to have a website that just has event details, and redirects you to the primary source; that's it.</p>
+                        <p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
+                        <p>If you represent a business and would like to be added to the directory, or seek ad space, <a>follow this link</a>.</p>
+
+                        <hr/>
+
+                        <p>La idea es tener un sitio web que solo contenga detalles del evento y te redirija a la fuente principal; eso es todo.</p>
+                        <p>Puedes <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">enviar un calendario aquí</a>, o <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">enviar un evento aquí</a>.</p>
+                        <p>Si representas a una empresa y deseas que te incluyan en el directorio, o si buscas espacio publicitario, <a>sigue este enlace</a>.</p>
+                        <!-- <p>
+                            <img id="qrcode" :src="qrCode"/>
+                            <h2 class="text-xl green p-5">Shareable QR Code</h2>
+                        </p> -->
+                    </div>
+                    
+                </div>
+                
+            </div>
+            
+            <!-- <div v-if="modal === 1" class="p-2 template z-40">
+                <svg
+                    @click="isOpen = false"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-8 h-8 text-red-900 cursor-pointer"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>
+                <img :src="qrCode"/>
+                <h2 class="text-xl green p-5">Shareable QR Code</h2>
+            </div> -->
+            <div v-if="modal === 2" class="p-10 template z-40 green">
+                <svg
+                    @click="isOpen = false"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-8 h-8 text-red-900 cursor-pointer"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>
+                <a class="text-lg underline font-bold" :href="promo[0].target_link">
+                    <h2 class="text-xl">
+                        {{ promo[0].title }}
+                    </h2>
+                    <p class="text-xs">
+                        {{ promo[0].target_link }}
+                    </p>
+                    <img class="rounded-full" :src="promo[0].image"/>
+                </a>
+                <!-- <p>
+                    {{  promo[0].promo_type }}
+                </p> -->
+                <div class="p-5" v-html="promo[0].long_text" />
+            </div>
+            
+        </div>
+       
+    </div>
+    
+</template>
+
+<style scoped>
+/* .template {
+    background-color: #000;
+    z-index: 4;
+} */
+
+#qrcode {
+    width: 25em;
+    margin: auto;
+}
+.promo-overlay {
+    background-size: cover;
+    
+}
+div >>> p {
+    padding:.5rem;
+}
+</style>
--- a/src/components/blocks/PrimaryButtonSet.vue
+++ b/src/components/blocks/PrimaryButtonSet.vue
@@ -10,8 +10,31 @@
 </script>
        
 <template>
+    <!-- <div v-if="$route.path == '/medellin'" class="text-center p-0">
+        <button class="" v-on:click="menuStore.showMenu = !menuStore.showMenu">Filtros</button>
+        <span v-if="EventsStore.filter">
+            <span >
+                <button id="filter-btn" v-on:click.prevent="EventsStore.fetchEvents('mde')">Borra Filtros</button>
+            </span>
+        </span>
+        
+        <button
+        @click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)"
+        class="about"
+        type="button"
+        >
+            Sobre
+        </button>
+    </div> -->
+    <!-- <div v-if="$route.path == '/mpls-msp'" class="text-center p-0"> -->
    <div class="text-center p-0">
        <button class="" v-on:click="menuStore.showMenu = !menuStore.showMenu">Filters</button>
+        <span v-if="EventsStore.filter">
+            <button id="filter-btn" v-on:click.prevent="EventsStore.fetchEvents('msp')">Clear Filters</button>
+        <!-- <span v-if="$route.path == 'beyond'">
+            <button id="filter-btn" v-on:click.prevent="EventsStore.fetchEvents()">Clear Filters</button>
+        </span> -->
+        </span>
        
        <button
        @click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)"
@@ -77,8 +100,9 @@ font-weight: bold;
 button {
  border-radius: 25px;
  padding: .25rem .75rem;
-  margin: .25rem;
-  background-color: orange;
+  margin: 1rem;
+  background-color: #00bd7e;
+  border: #000 1px solid;
  color: #000;
  font-weight: bold;
 }
@@ -88,7 +112,7 @@ button {
  padding: .5rem 1rem;
  margin: .5rem;
  margin-top: 10px;
-  background-color: hsla(160, 100%, 37%, 1);
+  background-color: #00bd7e;
  color: #000;
  font-weight: bold;
 }
--- a/src/components/blocks/SecondaryButtonSet.vue
+++ b/src/components/blocks/SecondaryButtonSet.vue
@@ -13,20 +13,26 @@
    <div  v-if="menuStore.showMenu">
        <div v-if="menuStore.isHidden">
            <div>
-                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Today</button>
-                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Tomorrow</button>
+                <!-- <span v-if="$route.path == '/medellin'" class="text-center p-0">
+                    <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Hoy</button>
+                    <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Mañana</button>
+                </span> -->
+                <span class="text-center p-0">
+                    <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Today</button>
+                    <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Tomorrow</button>
+                </span>
                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(2)">+ 2</button>

                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(3)">+ 3</button>
                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(4)">+ 4</button>
                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(5)">+ 5</button>
-                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(6)">+ 6</button>
+                <!-- <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(6)">+ 6</button> -->
            </div>
-
+<!-- 
            <div>
                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Mu')">Entertainment</button>
                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ed')">Education</button>
-            </div>
+            </div> -->
        </div>

        <!-- <div v-if="!menuStore.isHidden">
--- a/src/components/listings/EventListing.vue
+++ b/src/components/listings/EventListing.vue
@@ -32,7 +32,12 @@
                </a> 
            </span>
        </div>
-        <a :href="item.show_link"  target="_blank">
+        <a v-if="item.show_link" :href="item.show_link"  target="_blank">
+            <p class="text-2xl p-5">
+                {{ item.show_title }}
+            </p>
+        </a> 
+        <a v-if="!item.show_link" :href="item.venue.website"  target="_blank">
            <p class="text-2xl p-5">
                {{ item.show_title }}
            </p>
--- a/src/components/listings/Promo.vue
+++ b/src/components/listings/Promo.vue
@@ -3,7 +3,9 @@
    import Modal from '../blocks/Modal.vue';
    import { mainStore } from '../../stores/MainStore.vue';

+    import { useDark, useToggle } from "@vueuse/core";

+    const isDark = useDark({selector: "body",});
    const MainStore = mainStore();

    defineProps({
@@ -20,17 +22,7 @@
 </script>
        
 <template>
-    <div v-if="item.promo_type === 'Ja'" class="events p-5 m-2 max-w-lg art-text" :class="item.promo_type">
-        <a :href="item.target_link">
-            <h2 class="text-lg pb-2">
-                {{ item.title }} 
-            </h2>
-        </a>
-        <div class="p-5 font-bold underline">
-            <a :href="item.target_link">{{ item.organization.name  }}</a>
-        </div>
-    </div>
-    <div v-else-if="item.promo_type === ''" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+    <div class="events p-5 m-2 max-w-lg" :class="item.promo_type">
        <a href="#!"
        @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
        >
@@ -42,16 +34,6 @@
            {{ item.short_text }}
        </div>
    </div>
-    <div v-else class="events p-5 m-2 max-w-lg" :class="item.promo_type">
-        <a :href="item.target_link">
-            <h2 class="text-2xl pb-2 underline ad-headline">
-                {{ item.title }} 
-            </h2>
-        </a>
-        <div class="p-5">
-            {{ item.short_text }}
-        </div>
-    </div>
 </template>

 <style scoped>
@@ -62,16 +44,23 @@
    max-width: 400px;
    }

+    h2 {
+        color:#000;
+    }
    .Ja, .Su, .An, .Su {
-        background-color: hsla(202, 100%, 37%, 0.1);
+        background-color: #0078bdc4;
+        color: #000;
    }

    .Sp, .Ma, .Ar {
-        background-color: hsla(160, 100%, 37%, .1);
+        background-color: #ff674cec;
+        color: #000;
    }

    .Jo, .Re, .Fo, .Ev {
-        background-color: hsla(0, 100%, 59%, 0.1);
+        /* background-color: #ff4d2e; */
+        background-color: #00bd7e;
+        color: #000;
    }


--- a/src/components/listings/Promo2.vue
+++ b/src/components/listings/Promo2.vue
@@ -0,0 +1,113 @@
+<script setup>
+    import moment from 'moment-timezone';
+    import Modal from '../blocks/Modal.vue';
+    import { mainStore } from '../../stores/MainStore.vue';
+
+
+    const MainStore = mainStore();
+
+    defineProps({
+        item: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            require: true
+        },
+    })
+
+</script>
+        
+<template>
+    <div class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+        <a href="#!"
+        @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
+        >
+            <h2 class="text-2xl pb-2 underline ad-headline">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5">
+            {{ item.short_text }}
+        </div>
+    </div>
+    
+    <!-- <div v-if="item.promo_type === 'Ja'" class="events p-5 m-2 max-w-lg art-text" :class="item.promo_type">
+        <a :href="item.target_link">
+            <h2 class="text-lg pb-2">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5 font-bold underline">
+            <a :href="item.target_link">{{ item.organization.name  }}</a>
+        </div>
+    </div>
+
+    <div v-else-if="item.promo_type === 'Ev'" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+        <a href="#!"
+        @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
+        >
+            <h2 class="text-2xl pb-2 underline ad-headline">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5">
+            {{ item.short_text }}
+        </div>
+    </div>
+    <div v-else class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+        <a :href="item.target_link">
+            <h2 class="text-2xl pb-2 underline ad-headline">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5">
+            {{ item.short_text }}
+            <p>{{ item.promo_type }}</p>
+        </div>
+    </div> -->
+</template>
+
+<style scoped>
+    .events {
+    border: .1em solid #666;
+    border-radius: 25px;
+    min-width: 325px;
+    max-width: 400px;
+    }
+
+    .Ja, .Su, .An, .Su {
+        background-color: hsla(202, 100%, 37%, 0.1);
+    }
+
+    .Sp, .Ma, .Ar {
+        background-color: hsla(160, 100%, 37%, .1);
+    }
+
+    .Jo, .Re, .Fo, .Ev {
+        background-color: hsla(0, 100%, 59%, 0.1);
+    }
+
+
+    @media (min-width: 800px) and (max-width:1023px) {
+        .events {
+            min-width: 300px;
+            max-width: 300px;
+        }
+    }
+
+    @media (min-width: 1024px) and (max-width: 1249) {
+        .events {
+            min-width: 300px;
+            max-width: 400px;
+        }
+    }
+
+    @media (min-width: 1250px) {
+        .events {
+            min-width: 325px;
+            max-width: 475px;
+        }
+    }
+</style>
--- a/src/stores/EventsStore.js
+++ b/src/stores/EventsStore.js
@@ -27,6 +27,7 @@ export const useEventsStore = defineStore('Events', {
      new_msg: "",
      today: "",
      shortcode: "",
+      filter: false,
    };
  },

@@ -37,11 +38,15 @@ export const useEventsStore = defineStore('Events', {
    //   return this.shortcode;
    // },

-    async fetchPromo() {
-      // const results = await fetch(`${apiUrl}/socials/promo/`, {headers: this.headers});
-      const results = await fetch(`${apiUrl}/socials/links/`, {headers: this.headers});
+    async fetchPromo(cal) {
+      const results = await fetch(`${apiUrl}/events/promo/?calendar__shortcode=${this.shortcode}`, {headers: this.headers});
+      // const results = await fetch(`${apiUrl}/socials/links/`, {headers: this.headers});
      const data = await results.json();
      this.promo = data;
+      if(this.promo.length == 0){
+        console.log("Promo Again")
+            this.fetchPromo(cal)
+          }
    },

    async fetchEvents(cal) {
@@ -60,7 +65,9 @@ export const useEventsStore = defineStore('Events', {
            };
            this.events = newArr;
            this.the_day = "";
-            if(this.events.length() == 0){
+            this.filter = false;
+            if(this.events.length == 0){
+              console.log("Events Again")
              this.fetchEvents(cal)
            }
    },
@@ -79,7 +86,8 @@ export const useEventsStore = defineStore('Events', {
      }
      axios.get(api_url, {headers: this.headers})
      .then(response => {
-        this.events = response.data
+        this.events = response.data;
+        this.filter = true;
        if(api_url==`${apiUrl}/events/events/?search=`){
          this.new_msg = ""
        }
@@ -90,16 +98,19 @@ export const useEventsStore = defineStore('Events', {
    },

    getEventByDate(which_day) {
+      console.log(which_day);
      let today = moment().format("YYYY-MM-DD");
      let the_date = moment().add(which_day, 'd').format("YYYY-MM-DD");
      this.the_day = the_date;
      let api_url = `${apiUrl}/events/events/`;
      if(the_date!==''||the_date!==null) {
        api_url = `${apiUrl}/events/events/?show_day=${the_date}&calendar__shortcode=${this.shortcode}`;
+        console.log(api_url)
      }
      axios.get(api_url, {headers: this.headers})
      .then(response => {
        this.events = response.data
+        this.filter = true;
      })
      .catch(e => {
        this.errors.push(e)
@@ -118,6 +129,7 @@ export const useEventsStore = defineStore('Events', {
      const data = await result.json();
      this.events = data;
      this.fetchPromo()
+      this.filter = true;
      return this.events;
    }
  }
--- a/src/views/DigiSnaxxView.vue
+++ b/src/views/DigiSnaxxView.vue
@@ -23,12 +23,12 @@
    <Header/>
    <SecondaryButtonSet />
    <div class="text-center pt-0 pb-3" v-if="menuStore.showMenu === false">
-      <SearchButton />
+      <!-- <SearchButton /> -->
      <PrimaryButtonSet />
-      <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">
-        <b v-if="$route.name == 'mde'" >Dame tus eventos, por favor</b>
-        <b v-if="$route.name != 'mde'" >Add your event!</b>
-      </a>
+      <!-- <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">
+        <b class="text-lg underline" v-if="$route.name == 'mde'" >¡Envíenos sus eventos!</b>
+        <b class="text-lg underline" v-if="$route.name != 'mde'" >Add your event!</b>
+      </a> -->
      <Modal />
    </div>

--- a/src2/App.vue
+++ b/src2/App.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+import { useDark, useToggle } from "@vueuse/core";
+
+const isDark = useDark({selector: "body",});
+const toggleDark = useToggle(isDark);
+
+</script>
+
+<template>
+    <button id="theme-toggle" @click="toggleDark()" class="px-4 py-2 w-16">
+        <span v-if="isDark"><img class="theme-toggle" src="./assets/Light.dark.png"></span>
+        <span v-if="!isDark"><img class="theme-toggle" src="./assets/Light.light.png"></span>
+    </button>
+    <RouterView />
+</template>
+
+<style>
+    .dark {
+        background-color: #111;
+        color: #999
+    }
+
+    #theme-toggle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin-left: -20px;
+        margin-top:5px;
+        z-index: 11;
+    }
+    #app {
+        display: block !important;
+        max-width: None !important;
+        padding: 0rem 0rem !important;
+        width: 95%;
+        margin: auto;
+    }
+</style>
--- a/src2/assets/GlobalBoom.png
+++ b/src2/assets/GlobalBoom.png
--- a/src2/assets/Light.dark.png
+++ b/src2/assets/Light.dark.png
--- a/src2/assets/Light.light.png
+++ b/src2/assets/Light.light.png
--- a/src2/assets/MEFull.png
+++ b/src2/assets/MEFull.png
--- a/src2/assets/Medellin.png
+++ b/src2/assets/Medellin.png
--- a/src2/assets/Mpls.png
+++ b/src2/assets/Mpls.png
--- a/src2/assets/base.css
+++ b/src2/assets/base.css
@@ -0,0 +1,99 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+  --color-text-opp: var(--vt-c-text-dark-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+    --color-text-opp: var(--vt-c-text-light-1);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.art-text {
+  background-color: hsla(160, 100%, 37%, .1);
+}
+
+.art-text a, .ad-headline {
+  color: var(--color-text);
+}
+
+.ad-headline {
+
+}
+
+#promo-overlay {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  z-index: 4;
+}
+
+.promo-overlay {
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
--- a/src2/assets/books.png
+++ b/src2/assets/books.png
--- a/src2/assets/cover.png
+++ b/src2/assets/cover.png
--- a/src2/assets/earth.png
+++ b/src2/assets/earth.png
--- a/src2/assets/logo.png
+++ b/src2/assets/logo.png
--- a/src2/assets/logo.svg
+++ b/src2/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src2/assets/main.css
+++ b/src2/assets/main.css
@@ -0,0 +1,48 @@
+@import "./base.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "tailwindcss";
+
+body.dark {
+  background-color: #111;
+  color: #999
+}
+
+body {
+  background-color: #fff;
+  color: #111
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
--- a/src2/assets/profile.png
+++ b/src2/assets/profile.png
--- a/src2/assets/qr.digi.png
+++ b/src2/assets/qr.digi.png
--- a/src2/components/About.vue
+++ b/src2/components/About.vue
@@ -0,0 +1,98 @@
+<template> 
+  <svg
+      @click="isOpen = false"
+      xmlns="http://www.w3.org/2000/svg"
+      class="w-8 h-8 text-red-900 cursor-pointer z-40"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+  >
+      <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+  </svg>
+  <div id="promo-overlay" class="z-40" v-for="(qa, index) in questions">
+    <div class=" p-3 m-3">
+      <h2 class="text-xl">
+        <a :href="index" v-on:click.prevent="open_answer(qa)">
+          {{ qa.q }}
+        </a>   
+      </h2>
+      <div ref="a-${index}" :class="{hidden:qa.show}" class="p-5 promo-overlay">
+        <span v-html="qa.a"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import moment from 'moment-timezone';
+
+export default {
+  data() {
+    return {
+      questions: [],
+      new_msg: "",
+      the_day: "",
+      isHidden: true,
+      questions: [ 
+        { q: "What is DigiSnaxx?", a:"DigiSnaxx is an events calendar, and community board. We aggregate events and news from the Twin Cities Metro Area.", show:false  },
+        { q: "Who built DigiSnaxx?", a:"'Twas I <a href='https://canin.dreamfreely.org' target='_blank'>Canin Carlos</a>.", show:false  }, 
+        { q: "How can you support this project?", a:"Share the QR code & URL! <br/><br/>To learn about my other projects, support me as an innovator, or <b>join the DigiSnaxx Commerce Community, <a href='https://canin.dreamfreely.org/digisnaxx' target='_blank'>click here</a></b>", show:false  }, 
+        { q: "Submit a calendar!", a:'<iframe class="airtable-embed" src="https://airtable.com/embed/shrfUvOiFdaHI8xoz?backgroundColor=teal" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>', show:false }, 
+        { q: "What's the status of the calendar I submitted?", a:'<iframe class="airtable-embed" src="https://airtable.com/embed/shr6IRnNvHtDEcokM?backgroundColor=teal&layout=card&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>', show: false},      
+        // { q: "Next question?", a:"Next answer", show: true},
+      ]
+    }
+  },
+
+
+  methods: {
+      open_answer(q) {
+          q.show = !q.show
+      },
+  },
+}
+</script>
+    
+    <style scoped>
+    .question {
+      background-color: aquamarine;
+      color: black;
+    }
+
+    .answer {
+      background-color: coral ;
+    }
+
+    p {
+      padding: 1rem 1rem 1rem 0rem;
+      text-align: center;
+    }
+
+    h1 {
+      font-weight: 500;
+      font-size: 2.6rem;
+      top: -10px;
+    }
+    
+    h3 {
+      font-size: 1.2rem;
+    }
+    
+    @media (min-width: 1024px) {
+      .gform-mini {
+        display: none;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      .gform-lg {
+        display: none;
+      }
+    }
+    </style>
--- a/src2/components/Bluesky.alt.vue
+++ b/src2/components/Bluesky.alt.vue
@@ -0,0 +1,43 @@
+<script setup>
+  import { ref, onMounted, computed } from "vue";
+
+  import { useMenuStore } from '../stores/MenuStore';
+  const MenuStore = useMenuStore();
+  MenuStore.get_today();
+
+  import BlueSkyComplete from './listings/BlueskyLinks.alt.vue';
+
+  MenuStore.fetchSocialLinkList();
+  const links = computed(() => {
+    return MenuStore.social_links;
+  });
+
+  defineProps({
+        limit: {
+            type: Number,
+            require: false
+        }
+    })
+
+</script>
+        
+<template class="">
+    <div class="p-2">
+      <p class="text-xl">Recent readings:</p>
+    </div>
+
+    <div class="md:grid lg:grid md:justify-center lg:justify-center">
+        <p class="text-lg">from <a href="https://bsky.app/profile/dreamfreely.org">BlueSky</a> & <a href="https://www.reddit.com/user/CultureClap/">Reddit</a></p>
+        <table class="table-striped">
+            <tr class="even:bg-blue-100 even:text-black odd:bg-grey-800" v-for="(item, index) in links">
+                <BlueSkyComplete :item = "item" :index = "index" />
+            </tr>
+        </table>
+    </div>
+</template>
+
+<style scoped>
+    tr {
+        border-radius: 25px;
+    }
+</style>
--- a/src2/components/Sections/EventList.vue
+++ b/src2/components/Sections/EventList.vue
@@ -0,0 +1,49 @@
+<script setup>
+  import { ref, onMounted, computed } from "vue";
+
+  import { useMenuStore } from '../../stores/MenuStore';
+  const MenuStore = useMenuStore();
+  MenuStore.get_today();
+
+
+  import EventListingComplete from '../listings/EventListing.vue';
+  import Promo from '../listings/BlueskyLinks.vue';
+  // import Promo from '../listings/Promo.vue';
+
+  import { useEventsStore } from '../../stores/EventsStore';
+
+  const props = defineProps({
+        limit: {
+            type: Number,
+            require: false
+        },
+        
+        cal: {
+          type: String,
+          require: true
+        }
+    })
+
+  const store = useEventsStore();
+  store.fetchEvents(props.cal);
+  store.fetchPromo();
+  const events = computed(() => {
+    return store.events;
+  });
+  const promo = computed(() => {
+    return store.promo;
+  });
+
+  
+
+</script>
+        
+<template>
+  <div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex md:justify-center lg:flex lg:justify-center z-0">
+    <span class="self-stretch" v-for="(item, index) in events">
+      <Promo  v-if="(index % 6 == 0) && index != 0 && events.length > 12" :item = promo[(index/6)-1] :index = "(index/6)-1"/>
+      <EventListingComplete v-else-if="(index % 6 != 0)" :item = "item" :index = "index" />
+      <!-- <EventListingComplete :item = "item" :index = "index" /> -->
+    </span>
+  </div>
+</template>
--- a/src2/components/Sections/Footer.vue
+++ b/src2/components/Sections/Footer.vue
@@ -0,0 +1,22 @@
+<script setup>
+    defineProps({
+        lead: {
+        type: String,
+        required: true
+      }
+    })
+    </script>
+        
+<template>
+    <div class="">
+        <a class="green text-2xl flex justify-center" href="https://www.dreamfreely.org" target="_blank">
+            {{ lead }}
+        </a>
+        <br/>
+        Privacy Policy: This website uses <a href="https://umami.is/" target="_blank">Umami</a> for analytics.
+    </div>
+    
+    
+    
+</template>
+        
--- a/src2/components/Sections/Header.vue
+++ b/src2/components/Sections/Header.vue
@@ -0,0 +1,68 @@
+<script setup>
+    import { ref, onMounted, computed } from "vue";
+    import moment from 'moment-timezone';
+
+</script>
+
+<template>
+  <div>
+    <header class="grid justify-center z-10">
+      <div class="greetings justify-center pt-2 pb-3">
+        <h1 class="green">
+          <RouterLink to="/">DigiSnaxx.com</RouterLink>
+        </h1>
+        <!-- <span class="subtitle z-40">
+          another <a href="https://www.dreamfreely.org" targe="_blank">DreamFreely</a> project
+        </span> -->
+        <span class="subtitle z-40">
+          Events done simply
+        </span>
+      </div>
+    </header>
+  </div>
+</template>
+
+<style scoped>
+    header {
+      line-height: 1.5;
+      max-height: 50vh;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      margin-bottom: -15px;
+    }
+
+    .subtitle {
+      margin-left: 65px;
+      letter-spacing: .15em;
+    }
+    
+    .logo {
+      display: block;
+      margin: 0 auto 2rem;
+    }
+
+    .nav {
+      background-color: var(--color-background) !important;
+      opacity: 1;
+      z-index: 9;
+    }
+    
+    @media (min-width: 1024px) {
+      header {
+        display: flex;
+        place-items: center;
+      }
+    
+      .logo {
+        margin: 0 2rem 0 0;
+      }
+    
+      header .wrapper {
+        display: flex;
+        place-items: flex-start;
+        flex-wrap: wrap;
+      }
+    }
+    </style>
--- a/src2/components/blocks/Modal.vue
+++ b/src2/components/blocks/Modal.vue
@@ -0,0 +1,134 @@
+<script setup>
+    import { storeToRefs } from 'pinia'
+    import { mainStore } from '../../stores/MainStore.vue'
+    import About from '../About.vue'
+    import qrCode from '../../assets/qr.digi.png'
+
+    const promo = mainStore().promo_display;
+    
+    const { isOpen, modal} = storeToRefs(mainStore())
+
+</script>
+
+
+<template>
+    <div
+        v-show="isOpen"
+        class="
+            overflow-auto scrolling-touch left-0 top-0 bottom-100 right-0 w-full h-full fixed
+            overscroll-auto
+            flex
+            items-start
+            justify-center
+            mx-auto
+            z-40
+        "
+        >
+        <div class="max-w-2xl p-6 mt-10 rounded-md shadow-xl promo-overlay">
+            <!-- <div class="flex items-center justify-between">
+                <h3 v-show="modal" class="text-2xl">QR Code to DigiSnaxx</h3>
+                <h3 v-show="!modal" class="text-2xl">About DigiSnaxx</h3>
+                <svg
+                    @click="isOpen = false"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-8 h-8 text-red-900 cursor-pointer"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>
+            </div> -->
+
+            <!-- <About v-if="modal === 0" class="z-40"/>  -->
+
+            <div v-if="modal === 0" class="p-2 template z-40">
+                <svg
+                    @click="isOpen = false"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-8 h-8 text-red-900 cursor-pointer"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>
+                <div>
+                    <h2 class="text-2xl"><a href="">DreamFreely</a></h2>
+                    <p class="p-10">DigiSnaxx is the creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p>
+                    <p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
+
+                    <p>
+                        <img :src="qrCode"/>
+                        <h2 class="text-xl green p-5">Shareable QR Code</h2>
+                    </p>
+                </div>
+                
+            </div>
+            
+            <div v-if="modal === 1" class="p-2 template z-40">
+                <svg
+                    @click="isOpen = false"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-8 h-8 text-red-900 cursor-pointer"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>
+                <img :src="qrCode"/>
+                <h2 class="text-xl green p-5">Shareable QR Code</h2>
+            </div>
+            <div v-if="modal === 2" class="p-10 template z-40 green">
+                <a class="text-lg underline font-bold" :href="promo[0].target_link">
+                    <h2 class="text-xl">
+                        {{ promo[0].title }}
+                    </h2>
+                    <p class="text-xs">
+                        {{ promo[0].target_link }}
+                    </p>
+                    <img class="rounded-full" :src="promo[0].image"/>
+                </a>
+                <!-- <p>
+                    {{  promo[0].promo_type }}
+                </p> -->
+                <div class="p-5" v-html="promo[0].long_text" />
+            </div>
+            
+        </div>
+       
+    </div>
+    
+</template>
+
+<style scoped>
+/* .template {
+    background-color: #000;
+    z-index: 4;
+} */
+
+.promo-overlay {
+    background-color: #000;
+    color: #fff;
+    
+}
+div >>> p {
+    padding:.5rem;
+}
+</style>
--- a/src2/components/blocks/PrimaryButtonSet.vue
+++ b/src2/components/blocks/PrimaryButtonSet.vue
@@ -0,0 +1,107 @@
+<script setup>
+    import { useMenuStore } from '../../stores/MenuStore';
+    import { useEventsStore } from '../../stores/EventsStore';
+    import { mainStore } from '../../stores/MainStore.vue';
+    import Modal from './Modal.vue';
+
+    const menuStore = useMenuStore();
+    const EventsStore = useEventsStore();
+    const MainStore = mainStore();
+</script>
+        
+<template>
+    <div class="text-center p-0">
+        <button class="" v-on:click="menuStore.showMenu = !menuStore.showMenu">Filters</button>
+        
+        <button
+        @click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)"
+        class="about"
+        type="button"
+        >
+            About
+        </button>
+        
+        <!-- <button
+        @click="MainStore.changeGallery(MainStore.isOpen, 0, 1, null)"
+        class="qr-code"
+        type="button"
+        >
+            QR Code
+        </button> -->
+    </div>
+    
+</template>
+
+<style scoped>
+.menu {
+color: #777 !important;
+background-color: #111;
+padding: .25em 1em .25em 1em;
+}
+
+.ads {
+background-color: #222;
+border: .1em solid #fff;
+border-radius: 25px;
+}
+
+p {
+padding: 1rem 1rem 1rem 0rem;
+text-align: center;
+}
+
+input {
+border-radius: 25px;
+padding: .5rem;
+color: #000;
+}
+
+button {
+border-radius: 25px;
+padding: .5rem;
+margin: .75rem;
+background-color: orange;
+color: #000;
+font-weight: bold;
+}
+
+#filter-btn {
+border-radius: 25px;
+padding: .5rem;
+margin: .75rem;
+background-color: cornflowerblue;
+color: #000;
+font-weight: bold;
+}
+
+button {
+  border-radius: 25px;
+  padding: .25rem .75rem;
+  margin: .25rem;
+  background-color: orange;
+  color: #000;
+  font-weight: bold;
+}
+
+.search {
+  border-radius: 25px;
+  padding: .5rem 1rem;
+  margin: .5rem;
+  margin-top: 10px;
+  background-color: hsla(160, 100%, 37%, 1);
+  color: #000;
+  font-weight: bold;
+}
+
+.days {
+background-color: hsla(160, 100%, 37%, 1);
+padding: .5rem 1rem .5rem 1rem;
+font-size: 1.05rem;
+}
+
+.category {
+/* background-color: hsla(160, 100%, 37%, 1); */
+padding: .5rem 1rem .5rem 1rem;
+font-size: 1.15rem;
+}
+</style>
--- a/src2/components/blocks/SearchButton.vue
+++ b/src2/components/blocks/SearchButton.vue
@@ -0,0 +1,45 @@
+<script setup>
+    import { useMenuStore } from '../../stores/MenuStore';
+    import { useEventsStore } from '../../stores/EventsStore';
+    import { mainStore } from '../../stores/MainStore.vue';
+    import Modal from './Modal.vue';
+
+    const menuStore = useMenuStore();
+    const EventsStore = useEventsStore();
+    const MainStore = mainStore();
+</script>
+        
+<template>
+    <div class="text-center p-0">
+        <input v-model="EventsStore.search_term" type="text" id="search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 blockz p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 align-middle"/>
+        <button class="btn search mt-8 align-middle" v-on:click.prevent="EventsStore.searchEvents(EventsStore.search_term)"><img class="lens align-middle" src="/search.png"/></button>
+    </div>
+</template>
+
+<style scoped>
+input {
+border-radius: 25px;
+padding: .5rem;
+color: #000;
+}
+
+button {
+border-radius: 25px;
+padding: .5rem;
+margin: .75rem;
+background-color: orange;
+color: #000;
+font-weight: bold;
+}
+
+.search {
+  border-radius: 25px;
+  padding: .5rem 1rem;
+  margin: .5rem;
+  margin-top: 10px;
+  background-color: hsla(160, 100%, 37%, 1);
+  color: #000;
+  font-weight: bold;
+}
+
+</style>
--- a/src2/components/blocks/SecondaryButtonSet.vue
+++ b/src2/components/blocks/SecondaryButtonSet.vue
@@ -0,0 +1,120 @@
+<script setup>
+    import { useMenuStore } from '../../stores/MenuStore';
+    import { useEventsStore } from '../../stores/EventsStore';
+    import { mainStore } from '../../stores/MainStore.vue';
+    import Modal from './Modal.vue';
+
+    const menuStore = useMenuStore();
+    const EventsStore = useEventsStore();
+    const MainStore = mainStore();
+</script>
+        
+<template>
+    <div  v-if="menuStore.showMenu">
+        <div v-if="menuStore.isHidden">
+            <div>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Today</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Tomorrow</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(2)">+ 2</button>
+
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(3)">+ 3</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(4)">+ 4</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(5)">+ 5</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(6)">+ 6</button>
+            </div>
+
+            <div>
+                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Mu')">Entertainment</button>
+                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ed')">Education</button>
+            </div>
+        </div>
+
+        <!-- <div v-if="!menuStore.isHidden">
+            <div>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Today</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Tomorrow</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(2)">+ 2</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(3)">+ 3</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(4)">+ 4</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(5)">+ 5</button>
+                <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(6)">+ 6</button>
+            </div>
+
+            <div>
+                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Mu')">Music</button>
+                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Gv')">Government</button>
+                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ed')">Education</button>
+                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Co')">Comedy</button>
+                <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ot')">Other</button>
+            </div>
+        </div> -->
+        <!-- <span>
+            <button id="filter-btn" v-if="menuStore.isHidden" v-on:click="menuStore.isHidden = !menuStore.isHidden">More Filters</button>
+            <button id="filter-btn" v-if="!menuStore.isHidden" v-on:click="menuStore.isHidden = !menuStore.isHidden">Less Filters</button>
+            <button id="filter-btn" v-on:click.prevent="EventsStore.fetchEvents()">Clear Filters</button>
+        </span> -->
+        <div class="text-center p-0">
+            <button class="menu" v-on:click="menuStore.close_menu()">X</button>
+        </div>
+    </div>
+    
+</template>
+
+<style scoped>
+.menu {
+color: #777 !important;
+background-color: #111;
+padding: .25em 1em .25em 1em;
+}
+
+.ads {
+background-color: #222;
+border: .1em solid #fff;
+border-radius: 25px;
+}
+
+p {
+padding: 1rem 1rem 1rem 0rem;
+text-align: center;
+}
+
+input {
+border-radius: 25px;
+padding: .5rem;
+color: #000;
+}
+
+button {
+border-radius: 25px;
+padding: .5rem;
+margin: .75rem;
+background-color: orange;
+color: #000;
+font-weight: bold;
+}
+
+#filter-btn {
+border-radius: 25px;
+padding: .5rem;
+margin: .75rem;
+background-color: cornflowerblue;
+color: #000;
+font-weight: bold;
+}
+
+.search {
+padding: .5rem 2rem .5rem 2rem;
+}
+
+.days {
+background-color: hsla(160, 100%, 37%, 1);
+padding: .5rem 1rem .5rem 1rem;
+font-size: 1.05rem;
+}
+
+.category {
+/* background-color: hsla(160, 100%, 37%, 1); */
+padding: .5rem 1rem .5rem 1rem;
+font-size: 1.15rem;
+}
+</style>
--- a/src2/components/listings/BlueskyLinks.alt.vue
+++ b/src2/components/listings/BlueskyLinks.alt.vue
@@ -0,0 +1,74 @@
+<script setup>
+    import moment from 'moment-timezone';
+
+    defineProps({
+        item: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            require: true
+        },
+    })
+
+    function format_date(dateString) {
+        let date = moment.utc(dateString);
+            // Then specify how you want your dates to be formatted
+        return date.format('MM/DD');
+        // return date.format('LLLL')
+    };
+</script>
+
+<template>
+    <td>
+        <a v-if="item.platform == 'bluesky'" :href="'https://bsky.app/profile/' + item.handle + '/post/' + item.uri" target="_blank" class="">
+            <b>
+                {{  item.platform }}
+            </b>
+        </a>
+        <a v-else="item.platform == 'reddit'" :href="item.link">
+            <b>
+                {{  item.platform }}
+            </b>
+        </a> 
+    </td>
+    <td>
+        {{  item.text }}
+
+        <p v-if="item.link != 'blank' && item.platform =='bluesky'">
+            <a :href="item.link">Link</a> 
+        </p>
+
+        <p class="border p-2" v-if="item.rt_text != 'blank'">
+            {{ item.rt_text }}
+            <p v-if="item.rt_link != 'blank'">
+                <a :href="item.rt_link">RT Link</a> 
+            </p>
+        </p>
+    </td>
+    <td class="text-center w-72">
+        <span v-if="item.likes > 0">👍{{ item.likes }} </span>
+        <span v-if="item.replies > 0">↩️{{ item.replies }} </span>
+        <span v-if="item.quotes > 0">💭{{ item.quotes }} </span>
+        <span v-if="item.reposts >0">⏩{{ item.reposts }} </span>
+    </td>
+</template>
+<style scoped>
+    td {
+        padding: 1rem;
+    }
+
+    .link {
+        border-radius: 25px;
+        padding: .5rem;
+        margin: .5rem;
+        background-color: orange;
+        color: #000;
+        font-weight: bold;
+    }
+
+    td > span {
+        padding: .5em;
+    }
+</style>
--- a/src2/components/listings/BlueskyLinks.vue
+++ b/src2/components/listings/BlueskyLinks.vue
@@ -0,0 +1,119 @@
+<script setup>
+    import moment from 'moment-timezone';
+
+    defineProps({
+        item: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            require: true
+        },
+    })
+
+    function format_date(dateString) {
+        let date = moment.utc(dateString);
+            // Then specify how you want your dates to be formatted
+        return date.format('MM/DD');
+        // return date.format('LLLL')
+    };
+</script>
+
+<template>
+    <div class="events px-4 pb-6 m-2" style="padding-top: revert-layer;">
+        <div class="p-2">
+            <span class="float-left text-xs">
+                #{{ item.id }} | {{  format_date(item.created_at) }}
+            </span>
+            <span class="float-right text-right text-xs" style="">
+                <a v-if="item.platform == 'bluesky'" :href="'https://bsky.app/profile/' + item.handle + '/post/' + item.uri" target="_blank" class="">
+                    <b>
+                        {{  item.platform }}
+                    </b>
+                </a>
+                <a v-else="item.platform == 'reddit'" :href="item.link">
+                    <b>
+                        {{  item.platform }}
+                    </b>
+                </a> 
+            </span>
+        </div>
+        <br/>
+        <div class="tcenter p-1">
+              {{  item.text.slice(0,256) }}
+
+              <p v-if="item.link != 'blank' && item.platform =='bluesky'">
+                <a :href="item.link">Link</a> 
+              </p>
+
+              <p class="border" v-if="item.rt_text != 'blank'">
+                {{ item.rt_text }}
+                <p v-if="item.rt_link != 'blank'">
+                  <a :href="item.rt_link">RT Link</a> 
+                </p>
+              </p>
+        </div>
+        <div class="p-2">
+            <div v-if="item.published" style="float:left;">
+                <a :href="item.pub_link">
+                    📝 {{ item.platform }}
+                </a>
+                
+            </div> 
+            <div v-else="!item.published" style="float:left;">
+                ✍️
+            </div> 
+            <!-- <div style="float:right;">
+                <span v-if="item.likes > 0">👍{{ item.likes }} </span>
+                <span v-if="item.replies > 0">↩️{{ item.replies }} </span>
+                <span v-if="item.quotes > 0">💭{{ item.quotes }} </span>
+                <span v-if="item.reposts >0">⏩{{ item.reposts }} </span>
+            </div>  -->
+
+        </div>
+    </div>
+</template>
+<style scoped>
+    .events {
+    /* background-color: #222; */
+    border: .1em solid #333;
+    border-radius: 25px;
+    min-width: 325px;
+    max-width: 400px;
+    }
+
+    @media (min-width: 800px) and (max-width:1023px) {
+        .events {
+            min-width: 300px;
+            max-width: 300px;
+        }
+    }
+
+    @media (min-width: 1024px) and (max-width: 1249) {
+        .events {
+            min-width: 300px;
+            max-width: 400px;
+        }
+    }
+
+    @media (min-width: 1250px) {
+        .events {
+            min-width: 325px;
+            max-width: 475px;
+        }
+    }
+
+    .link {
+        border-radius: 25px;
+        padding: .5rem;
+        margin: .5rem;
+        background-color: orange;
+        color: #000;
+        font-weight: bold;
+    }
+
+    div > span {
+        padding: .5em;
+    }
+</style>
--- a/src2/components/listings/EventListing.vue
+++ b/src2/components/listings/EventListing.vue
@@ -0,0 +1,81 @@
+<script setup>
+    import moment from 'moment-timezone';
+
+    defineProps({
+        item: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            require: true
+        },
+    })
+
+    function format_date(dateString) {
+        let date = moment.utc(dateString);
+        return date.format('dd @ h:mm a');
+    };
+</script>
+        
+<template>
+    <div class="events px-2 py-2 m-2 max-w-lg">
+        <div class="p-2">
+            <span class="float-left text-xs">
+                {{  format_date(item.show_date) }}
+            </span>
+            <span class="float-right text-right text-xs" style="width:60%;">
+                <a :href="item.venue.website" target="_blank">
+                    <b>
+                        {{  item.venue.name }}
+                    </b>
+                </a> 
+            </span>
+        </div>
+        <a :href="item.show_link"  target="_blank">
+            <p class="text-2xl p-5">
+                {{ item.show_title }}
+            </p>
+        </a> 
+        <div class="p-2">
+            <span class="float-left text-xs">
+                {{  item.event_type }}
+            </span>
+            <span class="float-right text-right text-xs" style="width:60%;">
+                {{  item.venue.city }}
+            </span>
+        </div>
+        <p class="text-xs p-2">
+            
+        </p>
+    </div>
+</template>
+<style scoped>
+    .events {
+    border: .1em solid #333;
+    border-radius: 25px;
+    min-width: 325px;
+    max-width: 400px;
+    }
+
+    @media (min-width: 800px) and (max-width:1023px) {
+        .events {
+            min-width: 300px;
+            max-width: 300px;
+        }
+    }
+
+    @media (min-width: 1024px) and (max-width: 1249) {
+        .events {
+            min-width: 300px;
+            max-width: 400px;
+        }
+    }
+
+    @media (min-width: 1250px) {
+        .events {
+            min-width: 325px;
+            max-width: 475px;
+        }
+    }
+</style>
--- a/src2/components/listings/Promo.vue
+++ b/src2/components/listings/Promo.vue
@@ -0,0 +1,98 @@
+<script setup>
+    import moment from 'moment-timezone';
+    import Modal from '../blocks/Modal.vue';
+    import { mainStore } from '../../stores/MainStore.vue';
+
+
+    const MainStore = mainStore();
+
+    defineProps({
+        item: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            require: true
+        },
+    })
+
+</script>
+        
+<template>
+    <div v-if="item.promo_type === 'Ja'" class="events p-5 m-2 max-w-lg art-text" :class="item.promo_type">
+        <a :href="item.target_link">
+            <h2 class="text-lg pb-2">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5 font-bold underline">
+            <a :href="item.target_link">{{ item.organization.name  }}</a>
+        </div>
+    </div>
+    <div v-else-if="item.promo_type === ''" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+        <a href="#!"
+        @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
+        >
+            <h2 class="text-2xl pb-2 underline ad-headline">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5">
+            {{ item.short_text }}
+        </div>
+    </div>
+    <div v-else class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+        <a :href="item.target_link">
+            <h2 class="text-2xl pb-2 underline ad-headline">
+                {{ item.title }} 
+            </h2>
+        </a>
+        <div class="p-5">
+            {{ item.short_text }}
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .events {
+    border: .1em solid #666;
+    border-radius: 25px;
+    min-width: 325px;
+    max-width: 400px;
+    }
+
+    .Ja, .Su, .An, .Su {
+        background-color: hsla(202, 100%, 37%, 0.1);
+    }
+
+    .Sp, .Ma, .Ar {
+        background-color: hsla(160, 100%, 37%, .1);
+    }
+
+    .Jo, .Re, .Fo, .Ev {
+        background-color: hsla(0, 100%, 59%, 0.1);
+    }
+
+
+    @media (min-width: 800px) and (max-width:1023px) {
+        .events {
+            min-width: 300px;
+            max-width: 300px;
+        }
+    }
+
+    @media (min-width: 1024px) and (max-width: 1249) {
+        .events {
+            min-width: 300px;
+            max-width: 400px;
+        }
+    }
+
+    @media (min-width: 1250px) {
+        .events {
+            min-width: 325px;
+            max-width: 475px;
+        }
+    }
+</style>
--- a/src2/main.js
+++ b/src2/main.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { createPinia } from 'pinia'
+
+import moment from 'moment';
+
+import './assets/main.css'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(router)
+app.use(pinia)
+
+app.mount('#app')
--- a/src2/router/index.js
+++ b/src2/router/index.js
@@ -0,0 +1,43 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import DigiSnaxxView from '../views/DigiSnaxxView.vue'
+// import LiveView from '../views/zarchive/LiveView.vue'
+import BlueskyView from '../views/BlueskyView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/beyond',
+      name: '000',
+      component: DigiSnaxxView
+    },
+    {
+      path: '/medellin',
+      name: 'mde',
+      component: DigiSnaxxView
+    },
+    {
+      path: '/mpls-stp',
+      name: 'msp',
+      component: DigiSnaxxView
+    },
+    // {
+    //   path: '/live',
+    //   name: 'live',
+    //   component: LiveView
+    // },
+    {
+      path: '/media',
+      name: 'bluesky',
+      component: BlueskyView
+    },
+  ]
+})
+
+export default router
--- a/src2/stores/EventsStore.js
+++ b/src2/stores/EventsStore.js
@@ -0,0 +1,124 @@
+import {defineStore} from 'pinia';
+import moment from 'moment-timezone';
+import axios from 'axios';
+
+moment.tz.setDefault('America/Chicago')
+
+// const headers = {
+//   "Access-Control-Allow-Origin": "*",
+// }
+const apikey = import.meta.env.VITE_API_KEY;
+const apiUrl = import.meta.env.PROD
+  ? "https://api.digisnaxx.com"
+  : "http://localhost:8000";
+
+export const useEventsStore = defineStore('Events', {
+  state: () => {
+    return {
+      headers: {
+            "content-type": "application/json",
+            "Authorization": `${apikey}`,
+          },
+      events: [],
+      promo: [],
+      errors: [],
+      search_term: '',
+      the_day: "",
+      new_msg: "",
+      today: "",
+      shortcode: "",
+    };
+  },
+
+  actions: {
+    // setCalendar(cal) {
+    //   this.shortcode = cal;
+    //   console.log("CAL: ", this.shortcode);
+    //   return this.shortcode;
+    // },
+
+    async fetchPromo() {
+      // const results = await fetch(`${apiUrl}/socials/promo/`, {headers: this.headers});
+      const results = await fetch(`${apiUrl}/socials/links/`, {headers: this.headers});
+      const data = await results.json();
+      this.promo = data;
+    },
+
+    async fetchEvents(cal) {
+      this.shortcode = cal;
+      const results = await fetch(`${apiUrl}/events/events/?calendar__shortcode=${this.shortcode}`, {headers: this.headers});
+      const data = await results.json();
+      const events_list = data.slice(0,126);
+      const index = 6;
+      const value = {};
+      const newArr = [];
+      for (let i = 0; i < events_list.length; i++) {
+                if (i === index) {
+                  newArr.push(value);
+                }
+                newArr.push(events_list[i]);
+            };
+            this.events = newArr;
+            this.the_day = "";
+            if(this.events.length() == 0){
+              this.fetchEvents(cal)
+            }
+    },
+
+    async get_today(){
+      var currentDate = moment().format('MMMM Do, YYYY | h:mm a');
+      this.today = currentDate;
+    },
+
+    searchEvents(){
+      console.log("Running Search");
+      let api_url = `${apiUrl}/events/events/`;
+      if(this.search_term!==''||this.search_term!==null) {
+        api_url = `${apiUrl}/events/events/?search=${this.search_term}&calendar__shortcode=${this.shortcode}`;
+        this.new_msg = "Click Search again to view all events."
+      }
+      axios.get(api_url, {headers: this.headers})
+      .then(response => {
+        this.events = response.data
+        if(api_url==`${apiUrl}/events/events/?search=`){
+          this.new_msg = ""
+        }
+      })
+      .catch(e => {
+        this.errors.push(e)
+      })
+    },
+
+    getEventByDate(which_day) {
+      let today = moment().format("YYYY-MM-DD");
+      let the_date = moment().add(which_day, 'd').format("YYYY-MM-DD");
+      this.the_day = the_date;
+      let api_url = `${apiUrl}/events/events/`;
+      if(the_date!==''||the_date!==null) {
+        api_url = `${apiUrl}/events/events/?show_day=${the_date}&calendar__shortcode=${this.shortcode}`;
+      }
+      axios.get(api_url, {headers: this.headers})
+      .then(response => {
+        this.events = response.data
+      })
+      .catch(e => {
+        this.errors.push(e)
+      })
+    },
+
+    async getEventsByType(event_type){
+      let api_url = `${apiUrl}/events/events/`;
+      if(this.the_day!=='' && (event_type!==''||event_type!==null)) {
+        api_url = `${apiUrl}/events/events/?event_type=${event_type}&show_day=${this.the_day}&calendar__shortcode=${this.shortcode}`;
+      } else if(this.the_day=='' && (event_type!==''||event_type!==null)) {
+        api_url = `${apiUrl}/events/events/?event_type=${event_type}&calendar__shortcode=${this.shortcode}`;
+      }
+      console.log(api_url)
+      const result = await fetch(api_url, {headers: this.headers});
+      const data = await result.json();
+      this.events = data;
+      this.fetchPromo()
+      return this.events;
+    }
+  }
+});
--- a/src2/stores/MainStore.vue
+++ b/src2/stores/MainStore.vue
@@ -0,0 +1,27 @@
+<script>
+import { defineStore } from 'pinia'
+import {ref, computed} from 'vue'
+
+// the first argument is a unique id of the store across your application
+
+export const mainStore = defineStore('store', () => {
+  const isOpen = ref(false)
+  const modal = ref(false)
+  const promo_display = []
+
+  function changeGallery(isopen, n, val, promo) {
+    modal.value = val
+    if (n == 0) {
+        isOpen.value = !isopen
+    } 
+    if (!(promo === null)) {
+      promo_display.push(promo);
+      if (promo_display.length > 1) {
+        promo_display.shift();
+      }
+    }
+  }
+
+  return { isOpen, modal, changeGallery, promo_display}
+})
+</script>
--- a/src2/stores/MenuStore.js
+++ b/src2/stores/MenuStore.js
@@ -0,0 +1,68 @@
+import {defineStore} from 'pinia';
+import moment from 'moment-timezone';
+import {ref, computed} from 'vue';
+
+const apikey = import.meta.env.VITE_API_KEY;
+const apiUrl = import.meta.env.PROD
+  ? "https://api.digisnaxx.com"
+  : "http://localhost:8000";
+
+export const useMenuStore = defineStore('MenuOptions', {
+  state: () => {
+    return {
+      headers: {
+            "content-type": "application/json",
+            "Authorization": `${apikey}`,
+          },
+      showMenu: false,
+      isHidden: true,
+      today: ref(""),
+      new_msg: "",
+      social_links: [],
+      social_images: [],
+      blog_posts: [],
+      snaxx: [],
+    };
+  },
+
+  actions: {
+    async get_today(){
+      this.today = moment().tz("America/Chicago");
+    },
+
+    close_menu(name){
+      this.showMenu = !this.showMenu;
+      this.get_today();
+    },
+
+    async fetchSocialLinkList() {
+      const results = await fetch(`${apiUrl}/socials/list-links`, {headers: this.headers});
+      const data = await results.json();
+      this.social_links = data;
+    },
+
+    async fetchSocialLinks() {
+      const results = await fetch(`${apiUrl}/socials/links`, {headers: this.headers});
+      const data = await results.json();
+      this.social_links = data;
+    },
+
+    async fetchSocialImages() {
+      const results = await fetch(`${apiUrl}/socials/images`, {headers: this.headers});
+      const data = await results.json();
+      this.social_images = data;
+    },
+
+    async fetchBlogPosts() {
+      const results = await fetch('https://canin.dreamfreely.org/ghost/api/content/posts/?key=ef0447585c290da508e6684916&filter=tag%3A-digisnaxx');
+      const data = await results.json();
+      this.blog_posts = data.posts;
+    },
+
+    async fetchDigiSnaxx() {
+      const results = await fetch('https://canin.dreamfreely.org/ghost/api/content/posts/?key=ef0447585c290da508e6684916&filter=tag%3Adigisnaxx');
+      const data = await results.json();
+      this.snaxx = data.posts;
+    },
+  }
+});
--- a/src2/stores/api.http
+++ b/src2/stores/api.http
@@ -0,0 +1,3 @@
+GET http://localhost:8000/events/events/?calendar__shortcode=msp HTTP/1.1
+content-type: application/json
+Authorization: Api-Key etxKiSpu.56Bgqtxxq9IGF3rPXHhluUtlckk5n0LG
--- a/src2/style.css
+++ b/src2/style.css
@@ -0,0 +1,4 @@
+/* @tailwind base;
+@tailwind components;
+@tailwind utilities; */
+/* @import "tailwindcss"; */
--- a/src2/views/BlueskyView.vue
+++ b/src2/views/BlueskyView.vue
@@ -0,0 +1,13 @@
+<script setup>
+import Bluesky from '../components/Bluesky.alt.vue';
+  </script>
+  
+  <template>
+    <div class="grid grid-cols-1">
+    <main>
+      <center>
+        <Bluesky />
+      </center>
+    </main>
+  </div>
+  </template>
--- a/src2/views/DigiSnaxxView.vue
+++ b/src2/views/DigiSnaxxView.vue
@@ -0,0 +1,96 @@
+<script setup>
+    import Footer from '../components/Sections/Footer.vue';
+    import Header from '../components/Sections/Header.vue';
+    import SearchButton from '../components/blocks/SearchButton.vue';
+    import PrimaryButtonSet from '../components/blocks/PrimaryButtonSet.vue';
+    import SecondaryButtonSet from '../components/blocks/SecondaryButtonSet.vue';
+    import EventList from '../components/Sections/EventList.vue';
+    import Modal from '../components/blocks/Modal.vue';
+
+
+    import { useMenuStore } from '../stores/MenuStore';
+    import { useEventsStore } from '../stores/EventsStore';
+    import { mainStore } from '../stores/MainStore.vue';
+
+    const menuStore = useMenuStore();
+    const EventsStore = useEventsStore();
+    const MainStore = mainStore();
+
+</script>
+    
+<template>
+  <div class="text-center">
+    <Header/>
+    <SecondaryButtonSet />
+    <div class="text-center pt-0 pb-3" v-if="menuStore.showMenu === false">
+      <SearchButton />
+      <PrimaryButtonSet />
+      <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">
+        <b v-if="$route.name == 'mde'" >Dame tus eventos, por favor</b>
+        <b v-if="$route.name != 'mde'" >Add your event!</b>
+      </a>
+      <Modal />
+    </div>
+
+    <EventList :cal="$route.name"/>
+
+    <div class="p-10">
+      <Footer lead="DreamFreely"></Footer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+button {
+  border-radius: 25px;
+  padding: .25rem .75rem;
+  margin: .25rem;
+  background-color: orange;
+  color: #000;
+  font-weight: bold;
+}
+
+img {
+  display: inline;
+
+}
+
+.lens {
+  width: 100%;
+}
+
+.search {
+  border-radius: 25px;
+  padding: .5rem 1rem;
+  margin: .5rem;
+  margin-top: 10px;
+  background-color: hsla(160, 100%, 37%, 1);
+  color: #000;
+  font-weight: bold;
+}
+
+.about {
+color: #000 !important;
+background-color: rgb(180, 180, 180);
+padding: .25em 1em .25em 1em;
+}
+
+.about a {
+color: #000 !important;
+font-weight: bold;
+padding: 1em;
+}
+
+.qr-code {
+background-color: #760870;;
+color: #fff !important;
+padding: .25em 1em .25em 1em;
+font-weight: bold;
+}
+
+.qr-code a {
+color: #fff !important;
+font-weight: bold;
+padding: 1em;
+}
+</style>
--- a/src2/views/HomeView.vue
+++ b/src2/views/HomeView.vue
@@ -0,0 +1,61 @@
+<script setup>
+    import Footer from '../components/Sections/Footer.vue';
+    import Header from '../components/Sections/Header.vue';
+
+    import { useMenuStore } from '../stores/MenuStore';
+    import { useEventsStore } from '../stores/EventsStore';
+    import { mainStore } from '../stores/MainStore.vue';
+
+    const menuStore = useMenuStore();
+    const EventsStore = useEventsStore();
+    const MainStore = mainStore();
+
+    </script>
+    
+<template>
+  <div class="text-center">
+    <Header></Header>
+    <!-- <ButtonSet /> -->
+
+    <div class="flex grid text-center p-4 grid-flow-row lg:grid-cols-3">
+        <div class="text-center p-2">
+          <a class=" text-center" href="/medellin" :click="EventsStore.shortcode = 'mde'">  
+            <img src="../assets/Medellin.png" style="width:15em;"/>
+            <p class="text-lg">Medellin</p>
+          </a>
+        </div>
+        <div class="text-center p-2">
+          <a class=" text-center" href="/mpls-stp">
+            <img src="../assets/Mpls.png" style="width:15em;"/>
+            <p class="text-lg">Mpls/StPaul</p>
+          </a>
+        </div>
+        <div class="text-center p-2">
+          <a class=" text-center" href="/beyond">
+            <img src="../assets/earth.png" style="width:15em;"/>
+            <p class="text-lg">Beyond</p>
+          </a>
+        </div>
+    </div>
+
+    <div class="p-8">
+      <Footer lead="DreamFreely"></Footer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+img {
+  width: 50em;
+  border-radius: 8em;
+  padding: 1em;
+  margin: 2em;
+  margin: auto;
+}
+
+a {
+  padding: 2em;
+}
+
+</style>
--- a/src2/views/zarchive/DreamFreelyView.vue
+++ b/src2/views/zarchive/DreamFreelyView.vue
@@ -0,0 +1,31 @@
+<script setup>
+  import BlogLead from '../components/blocks/BlogLead.vue';
+  import MediaBlock from '../components/blocks/MediaBlock.vue';
+  import IntroBlock from '../components/blocks/IntroBlock.vue'
+  import SubscribeBlock from '../components/blocks/SubscribeBlock.vue';
+  import ShopList from '../components/Shop.vue';
+</script>
+
+<template>
+  <main class="pt-4" style="margin:auto;width:85%;">
+    <div class="text-center">
+      <h1 class="text-2xl">Welcome to DigiSnaxx</h1>
+      <h2 class="text-xl">a <a href="//www.dreamfreely.org">DreamFreely</a> Playground</h2>
+      <img src="../assets/cover.png" width="95%" class="lg:hidden pt-4 m-auto" />
+      <BlogLead class="p-2" />
+      <span class="text-xl">
+        <a href="https://canin.dreamfreely.org">Blog</a> 🍃 
+        <a href="https://shop.dreamfreely.org">Shop</a>
+      </span>
+      <IntroBlock class="py-4" />
+    </div>
+
+    <MediaBlock />
+    <ShopList />
+    <div class="text-center p-4">
+      DreamFreely &#169; 2025
+    </div>
+
+  </main>
+  
+</template>
--- a/src2/views/zarchive/LiveView.vue
+++ b/src2/views/zarchive/LiveView.vue
@@ -0,0 +1,21 @@
+<script setup>
+</script>
+  
+<template>
+    <div class="grid grid-cols-1">
+        <main class="text-center pt-24">
+                <h1 class="text-2xl">
+                    DigiSnaxx LIVE!
+                </h1>
+                <p>
+                    Welcome to the Garden
+                </p>
+                <p>
+                    Every Monday @ the Acadia
+                </p>
+                <p>
+                    5PM
+                </p>
+        </main>
+    </div>
+</template>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`