DigiSnaxx/client.digisnaxx
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove src2

Browse Source
This commit is contained in:
canin carlos
2025-11-30 15:39:27 -05:00
parent 1349158dcb
commit 9a5273bb76
41 changed files with 0 additions and 1752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src2/App.vue
View File

@@ -1,39 +0,0 @@
<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>

BIN
src2/assets/GlobalBoom.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 MiB

BIN
src2/assets/Light.dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
src2/assets/Light.light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src2/assets/MEFull.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 178 KiB

BIN
src2/assets/Medellin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 MiB

BIN
src2/assets/Mpls.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 MiB

99
src2/assets/base.css
View File

@@ -1,99 +0,0 @@
/* 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);
}

BIN
src2/assets/books.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 745 KiB

BIN
src2/assets/cover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 571 KiB

BIN
src2/assets/earth.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src2/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 146 KiB

1
src2/assets/logo.svg
View File

@@ -1 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 308 B

48
src2/assets/main.css
View File

@@ -1,48 +0,0 @@
@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;
}
}

BIN
src2/assets/profile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 789 KiB

BIN
src2/assets/qr.digi.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.0 KiB

98
src2/components/About.vue
View File

@@ -1,98 +0,0 @@
<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>

43
src2/components/Bluesky.alt.vue
View File

@@ -1,43 +0,0 @@
<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>

49
src2/components/Sections/EventList.vue
View File

@@ -1,49 +0,0 @@
<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>

22
src2/components/Sections/Footer.vue
View File

@@ -1,22 +0,0 @@
<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>

68
src2/components/Sections/Header.vue
View File

@@ -1,68 +0,0 @@
<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>

134
src2/components/blocks/Modal.vue
View File

@@ -1,134 +0,0 @@
<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>

107
src2/components/blocks/PrimaryButtonSet.vue
View File

@@ -1,107 +0,0 @@
<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>

45
src2/components/blocks/SearchButton.vue
View File

@@ -1,45 +0,0 @@
<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>

120
src2/components/blocks/SecondaryButtonSet.vue
View File

@@ -1,120 +0,0 @@
<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>

74
src2/components/listings/BlueskyLinks.alt.vue
View File

@@ -1,74 +0,0 @@
<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>

119
src2/components/listings/BlueskyLinks.vue
View File

@@ -1,119 +0,0 @@
<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>

81
src2/components/listings/EventListing.vue
View File

@@ -1,81 +0,0 @@
<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>

98
src2/components/listings/Promo.vue
View File

@@ -1,98 +0,0 @@
<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>

16
src2/main.js
View File

@@ -1,16 +0,0 @@
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')

43
src2/router/index.js
View File

@@ -1,43 +0,0 @@
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

124
src2/stores/EventsStore.js
View File

@@ -1,124 +0,0 @@
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;
}
}
});

27
src2/stores/MainStore.vue
View File

@@ -1,27 +0,0 @@
<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>

68
src2/stores/MenuStore.js
View File

@@ -1,68 +0,0 @@
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;
},
}
});

3
src2/stores/api.http
View File

@@ -1,3 +0,0 @@
GET http://localhost:8000/events/events/?calendar__shortcode=msp HTTP/1.1
content-type: application/json
Authorization: Api-Key etxKiSpu.56Bgqtxxq9IGF3rPXHhluUtlckk5n0LG

4
src2/style.css
View File

@@ -1,4 +0,0 @@
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
/* @import "tailwindcss"; */

13
src2/views/BlueskyView.vue
View File

@@ -1,13 +0,0 @@
<script setup>
import Bluesky from '../components/Bluesky.alt.vue';
</script>
<template>
<div class="grid grid-cols-1">
<main>
<center>
<Bluesky />
</center>
</main>
</div>
</template>

96
src2/views/DigiSnaxxView.vue
View File

@@ -1,96 +0,0 @@
<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>

61
src2/views/HomeView.vue
View File

@@ -1,61 +0,0 @@
<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>

31
src2/views/zarchive/DreamFreelyView.vue
View File

@@ -1,31 +0,0 @@
<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>

21
src2/views/zarchive/LiveView.vue
View File

@@ -1,21 +0,0 @@
<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>