first push

2025-11-11 18:03:20 -05:00
commit 010244847f
56 changed files with 6749 additions and 0 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1 @@
+VITE_API_KEY='Api-Key etxKiSpu.56Bgqtxxq9IGF3rPXHhluUtlckk5n0LG'
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1 @@
+{}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,36 @@
+# Digital Art Museum
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
+# digidream_client
--- a/index.html
+++ b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DigiSnaxx</title>
+
+    <script defer src="https://cloud.umami.is/script.js" data-website-id="12a553a3-d3fe-4069-ab15-3ee87c6a2607"></script>
+    
+    <!-- FACEBOOK METADATA -->
+    <meta property="og:image" content="https://idioke.com/assets/logo.d6c62083.png">
+    <meta property="og:description" content="Event Listings">
+    <meta property="og:title" content="DigiSnaxx">
+    
+    <!-- TWITTER METADATA -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="DigiSnaxx">
+    <meta name="twitter:description" content="Event Listings">
+    <meta name="twitter:image" content="">
+
+  </head>
+  <body class="">
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "digital-art-museum",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 4173",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.14",
+    "@vueuse/core": "^13.9.0",
+    "axios": "^1.12.2",
+    "dayjs": "^1.11.18",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.6.0",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.22",
+    "vue-router": "^4.5.1",
+    "@vueuse/core": "^13.9.0",
+    "axios": "^1.12.2",
+    "dayjs": "^1.11.18",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.6.0",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.22",
+    "vue-router": "^4.5.1",
+    "vue3-carousel": "^0.16.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.13.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.37.0",
+    "eslint-plugin-vue": "^10.5.0",
+    "prettier": "^3.6.2",
+    "tailwindcss": "^4.1.14",
+    "vite": "^7.1.9"
+  }
+}
--- a/package.json.bak
+++ b/package.json.bak
@@ -0,0 +1,31 @@
+{
+  "name": "digital-art-museum",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 4173",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "dayjs": "^1.11.7",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.41",
+    "pinia": "^2.0.22",
+    "vue": "^3.2.38",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "autoprefixer": "^10.4.8",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "postcss": "^8.4.16",
+    "prettier": "^2.7.1",
+    "tailwindcss": "^3.1.8",
+    "vite": "^3.0.9"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/search.png
+++ b/public/search.png
--- a/src/App.vue
+++ b/src/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/src/assets/GlobalBoom.png
+++ b/src/assets/GlobalBoom.png
--- a/src/assets/Light.dark.png
+++ b/src/assets/Light.dark.png
--- a/src/assets/Light.light.png
+++ b/src/assets/Light.light.png
--- a/src/assets/MEFull.png
+++ b/src/assets/MEFull.png
--- a/src/assets/Medellin.png
+++ b/src/assets/Medellin.png
--- a/src/assets/Mpls.png
+++ b/src/assets/Mpls.png
--- a/src/assets/base.css
+++ b/src/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/src/assets/books.png
+++ b/src/assets/books.png
--- a/src/assets/cover.png
+++ b/src/assets/cover.png
--- a/src/assets/earth.png
+++ b/src/assets/earth.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo.svg
+++ b/src/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/src/assets/main.css
+++ b/src/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/src/assets/profile.png
+++ b/src/assets/profile.png
--- a/src/assets/qr.digi.png
+++ b/src/assets/qr.digi.png
--- a/src/components/About.vue
+++ b/src/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/src/components/Bluesky.alt.vue
+++ b/src/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/src/components/Sections/EventList.vue
+++ b/src/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/src/components/Sections/Footer.vue
+++ b/src/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/src/components/Sections/Header.vue
+++ b/src/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/src/components/blocks/Modal.vue
+++ b/src/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/src/components/blocks/PrimaryButtonSet.vue
+++ b/src/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/src/components/blocks/SearchButton.vue
+++ b/src/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/src/components/blocks/SecondaryButtonSet.vue
+++ b/src/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/src/components/listings/BlueskyLinks.alt.vue
+++ b/src/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/src/components/listings/BlueskyLinks.vue
+++ b/src/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/src/components/listings/EventListing.vue
+++ b/src/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/src/components/listings/Promo.vue
+++ b/src/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/src/main.js
+++ b/src/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/src/router/index.js
+++ b/src/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/src/stores/EventsStore.js
+++ b/src/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/src/stores/MainStore.vue
+++ b/src/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/src/stores/MenuStore.js
+++ b/src/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/src/stores/api.http
+++ b/src/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/src/style.css
+++ b/src/style.css
@@ -0,0 +1,4 @@
+/* @tailwind base;
+@tailwind components;
+@tailwind utilities; */
+/* @import "tailwindcss"; */
--- a/src/views/BlueskyView.vue
+++ b/src/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/src/views/DigiSnaxxView.vue
+++ b/src/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/src/views/HomeView.vue
+++ b/src/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/src/views/zarchive/DreamFreelyView.vue
+++ b/src/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/src/views/zarchive/LiveView.vue
+++ b/src/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>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				`VITE_API_KEY='Api-Key etxKiSpu.56Bgqtxxq9IGF3rPXHhluUtlckk5n0LG'`
				`@@ -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>`