first push
This commit is contained in:
1
.env
Normal file
1
.env
Normal file
@@ -0,0 +1 @@
|
||||
VITE_API_KEY='Api-Key etxKiSpu.56Bgqtxxq9IGF3rPXHhluUtlckk5n0LG'
|
||||
14
.eslintrc.cjs
Normal file
14
.eslintrc.cjs
Normal file
@@ -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'
|
||||
}
|
||||
}
|
||||
28
.gitignore
vendored
Normal file
28
.gitignore
vendored
Normal file
@@ -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?
|
||||
1
.prettierrc.json
Normal file
1
.prettierrc.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
35
README.md
Normal file
35
README.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# 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
|
||||
```
|
||||
27
index.html
Normal file
27
index.html
Normal file
@@ -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>Canin Carlos</title>
|
||||
|
||||
<script type="application/javascript" src="https://cdn.jsdelivr.net/ghost/signup-form@~0.3/umd/signup-form.min.js"></script>
|
||||
<script defer src="https://cloud.umami.is/script.js" data-website-id="ff960a47-0f98-4c50-8b0d-7a3e3231df57"></script>
|
||||
<!-- FACEBOOK METADATA -->
|
||||
<meta property="og:image" content="https://idioke.com/assets/logo.d6c62083.png">
|
||||
<meta property="og:description" content="King Criminal Orphan Bastard">
|
||||
<meta property="og:title" content="Canin Carlos">
|
||||
|
||||
<!-- TWITTER METADATA -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="Canin Carlos">
|
||||
<meta name="twitter:description" content="King Criminal Orphan Bastard">
|
||||
<meta name="twitter:image" content="">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
5150
package-lock.json
generated
Normal file
5150
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"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": {
|
||||
"@vueuse/core": "^12.8.2",
|
||||
"axios": "^1.3.5",
|
||||
"dayjs": "^1.11.7",
|
||||
"moment": "^2.29.4",
|
||||
"moment-timezone": "^0.5.43",
|
||||
"pinia": "^2.0.34",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-carousel": "^0.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.2.0",
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"@vue/eslint-config-prettier": "^7.1.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-plugin-vue": "^9.11.0",
|
||||
"postcss": "^8.4.22",
|
||||
"prettier": "^2.8.7",
|
||||
"tailwindcss": "^3.3.1",
|
||||
"vite": "^4.2.1"
|
||||
}
|
||||
}
|
||||
31
package.json.bak
Normal file
31
package.json.bak
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
public/search.png
Normal file
BIN
public/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 927 B |
39
src/App.vue
Normal file
39
src/App.vue
Normal file
@@ -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>
|
||||
BIN
src/assets/GlobalBoom.png
Normal file
BIN
src/assets/GlobalBoom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
src/assets/Light.dark.png
Normal file
BIN
src/assets/Light.dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/Light.light.png
Normal file
BIN
src/assets/Light.light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/MEFull.png
Normal file
BIN
src/assets/MEFull.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
99
src/assets/base.css
Normal file
99
src/assets/base.css
Normal file
@@ -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);
|
||||
}
|
||||
BIN
src/assets/books.png
Normal file
BIN
src/assets/books.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 745 KiB |
BIN
src/assets/cover.png
Normal file
BIN
src/assets/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 571 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 308 B |
37
src/assets/main.css
Normal file
37
src/assets/main.css
Normal file
@@ -0,0 +1,37 @@
|
||||
@import "./base.css";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
#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
src/assets/profile.png
Normal file
BIN
src/assets/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 789 KiB |
BIN
src/assets/qr.digi.png
Normal file
BIN
src/assets/qr.digi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
83
src/components/About.vue
Normal file
83
src/components/About.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<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 Business Community, <a href='https://canin.dreamfreely.org/the-dbc' target='_blank'>click here</a></b>.<br/><br/>Or, let me know ...<br/><br/><iframe class='airtable-embed' src='https://airtable.com/embed/appzQxsifc8AnD1zA/shr317pX2OVA7zfIk' frameborder='0' onmousewheel='' width='100%' height='533' style='background: transparent; border: 1px solid #ccc;'></iframe>", 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>
|
||||
98
src/components/BlogPosts.vue
Normal file
98
src/components/BlogPosts.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
import MiniLinkListing from './listings/MiniBlueskyLinks.vue';
|
||||
import LinkListing from './listings/BlueskyLinks.vue';
|
||||
|
||||
MenuStore.fetchBlogPosts();
|
||||
const links = computed(() => {
|
||||
return MenuStore.blog_posts;
|
||||
});
|
||||
|
||||
MenuStore.fetchDigiSnaxx();
|
||||
const snaxx = computed(() => {
|
||||
return MenuStore.snaxx;
|
||||
});
|
||||
|
||||
defineProps({
|
||||
limit: {
|
||||
type: Number,
|
||||
require: false
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template class="">
|
||||
<div class="p-2">
|
||||
<p class="text-xl">Recent writings:</p>
|
||||
</div>
|
||||
<div v-if="limit" class="md:grid lg:grid">
|
||||
<p class="p-1" v-for="(item, index) in links.slice(0,limit)">
|
||||
<a :href="item.url">{{ item.title }}</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="!limit" class="md:grid lg:grid md:justify-center lg:justify-center">
|
||||
<p v-if="!limit" class="" v-for="(item, index) in links">
|
||||
<a :href="item.url">{{ item.title }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* table {
|
||||
width: 70%
|
||||
} */
|
||||
|
||||
.tcenter, th {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
td, p.border {
|
||||
/* background-color: #222; */
|
||||
border-collapse: separate;
|
||||
/* border-left: .1em solid #333; */
|
||||
/* border-right: .1em solid #333; */
|
||||
border-radius: 25px;
|
||||
padding: 2em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.social-data {
|
||||
display: block;
|
||||
/* float: right; */
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
div > span {
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
91
src/components/Bluesky.vue
Normal file
91
src/components/Bluesky.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
import BlueSkyMini from './listings/MiniBlueskyLinks.vue';
|
||||
import BlueSkyComplete from './listings/BlueskyLinks.vue';
|
||||
MenuStore.fetchSocialLinks();
|
||||
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 v-if="limit" class="md:grid lg:grid">
|
||||
<span class="" v-for="(item, index) in links.slice(0,limit)">
|
||||
<BlueSkyMini :item = "item" :index = "index" />
|
||||
</span>
|
||||
<a href="/media">View All Recent Media</a>
|
||||
</div>
|
||||
<div v-if="!limit" 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>
|
||||
<p><a href="/">Back to the Front</a></p>
|
||||
<span v-if="!limit" class="" v-for="(item, index) in links">
|
||||
<BlueSkyComplete :item = "item" :index = "index" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.tcenter, th {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
td, p.border {
|
||||
/* background-color: #222; */
|
||||
border-collapse: separate;
|
||||
/* border-left: .1em solid #333; */
|
||||
/* border-right: .1em solid #333; */
|
||||
border-radius: 25px;
|
||||
padding: 2em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.social-data {
|
||||
display: block;
|
||||
/* float: right; */
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
div > span {
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
49
src/components/Sections/EventList.vue
Normal file
49
src/components/Sections/EventList.vue
Normal file
@@ -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/EventListingComplete.vue';
|
||||
import MiniEventListing 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();
|
||||
store.fetchPromo();
|
||||
const events = computed(() => {
|
||||
return store.events;
|
||||
});
|
||||
const promo = computed(() => {
|
||||
return store.promo;
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="limit > 0" class="md:justify-center lg:justify-center z-0">
|
||||
<span class="self-stretch" v-for="(item, index) in events.slice(0,limit)">
|
||||
<Promo v-if="(index % 6 == 0) && index != 0 && events.length > 12 && limit > 12" :item = promo[(index/6)-1] :index = "(index/6)-1"/>
|
||||
<MiniEventListing v-else-if="(index % 6 != 0)" :item = "item" :index = "index" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
22
src/components/Sections/Footer.vue
Normal file
22
src/components/Sections/Footer.vue
Normal file
@@ -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>
|
||||
|
||||
68
src/components/Sections/Header.vue
Normal file
68
src/components/Sections/Header.vue
Normal file
@@ -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 for Adventurers
|
||||
</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>
|
||||
57
src/components/Sections/IntroBlock.vue
Normal file
57
src/components/Sections/IntroBlock.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
MenuStore.fetchSocialImages();
|
||||
const social_images = computed(() => {
|
||||
return MenuStore.social_images;
|
||||
});
|
||||
|
||||
|
||||
import BlogLead from '../blocks/BlogLead.vue';
|
||||
import ImageBlock from '../blocks/ImageBlock.vue';
|
||||
import MiniImageBlock from '../blocks/MiniImageBlock.vue';
|
||||
import BlogPosts from '../BlogPosts.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template class="">
|
||||
<div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex justify-center">
|
||||
<div class="md:float-left lg:float-left">
|
||||
<BlogLead class="p-4" />
|
||||
<span class="p-4">
|
||||
<MiniImageBlock />
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<span class="md:float-right lg:float-right md:w-80 lg:w-80 p-4">
|
||||
<BlogPosts class="p-8" :limit="8" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* table {
|
||||
width: 70%
|
||||
} */
|
||||
|
||||
p {
|
||||
padding: .4em;
|
||||
}
|
||||
|
||||
.lg\:w-80, .md\:w-80 {
|
||||
width:30rem
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
83
src/components/Sections/MediaBlock.vue
Normal file
83
src/components/Sections/MediaBlock.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
import Bluesky from '../Bluesky.vue';
|
||||
import EventList from './EventList.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template class="p-4">
|
||||
<!-- <div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex">
|
||||
<span class="md:float-left lg:float-left md:w-80 lg:w-80 p-4 m-4"> -->
|
||||
<div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex justify-center">
|
||||
<span class="md:float-left lg:float-left md:w-80 lg:w-80">
|
||||
<Bluesky :limit="3" />
|
||||
</span>
|
||||
<span class="justify-center pt-16 p-8 w-80 m-8">
|
||||
<img src="../../assets/profile.png" style="width:95%"/>
|
||||
</span>
|
||||
<span class="z-10" style="float:right">
|
||||
<p class="p-2 text-center text-xl">
|
||||
Upcoming Events (<a href="//www.digisnaxx.com">view all</a>)
|
||||
</p>
|
||||
<EventList :limit="6" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* table {
|
||||
width: 70%
|
||||
} */
|
||||
|
||||
.tcenter, th {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
td, p.border {
|
||||
/* background-color: #222; */
|
||||
border-collapse: separate;
|
||||
/* border-left: .1em solid #333; */
|
||||
/* border-right: .1em solid #333; */
|
||||
border-radius: 25px;
|
||||
padding: 2em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.social-data {
|
||||
display: block;
|
||||
/* float: right; */
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
div > span {
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
98
src/components/Sections/Shop.vue
Normal file
98
src/components/Sections/Shop.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
import MiniLinkListing from '../listings/MiniBlueskyLinks.vue';
|
||||
import LinkListing from '../listings/BlueskyLinks.vue';
|
||||
MenuStore.fetchSocialLinks();
|
||||
const links = computed(() => {
|
||||
return MenuStore.social_links;
|
||||
});
|
||||
|
||||
defineProps({
|
||||
limit: {
|
||||
type: Number,
|
||||
require: false
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template class="m-4">
|
||||
<div class="justify-center">
|
||||
<!-- <p class="text-2xl text-center">Foundations</p> -->
|
||||
<div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex justify-center">
|
||||
<span class="p-2 m-5 text-center">
|
||||
<a href="https://payhip.com/b/iFOLu">
|
||||
<img src="../../assets/MEFull.png" width="400px" class="p-2 m-auto"/>
|
||||
<h2 class="text-xl">Manifesting Empathy</h2>
|
||||
</a>
|
||||
<p class="text-strong">$3 PDF</p>
|
||||
</span>
|
||||
|
||||
<span class="p-2 m-5 text-center">
|
||||
<a href="https://payhip.com/b/5dHEp">
|
||||
<img src="../../assets/GlobalBoom.png" width="400px" class="p-2 m-auto"/>
|
||||
<h2 class="text-xl">Diversity Inverted</h2>
|
||||
</a>
|
||||
<p class="text-strong">$5 PDF</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* table {
|
||||
width: 70%
|
||||
} */
|
||||
|
||||
.tcenter, th {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
td, p.border {
|
||||
/* background-color: #222; */
|
||||
border-collapse: separate;
|
||||
/* border-left: .1em solid #333; */
|
||||
/* border-right: .1em solid #333; */
|
||||
border-radius: 25px;
|
||||
padding: 2em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.social-data {
|
||||
display: block;
|
||||
/* float: right; */
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
div > span {
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
73
src/components/blocks/BlogLead.vue
Normal file
73
src/components/blocks/BlogLead.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.fetchDigiSnaxx();
|
||||
const snaxx = computed(() => {
|
||||
return MenuStore.snaxx;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template class="">
|
||||
<span class="p-2" v-for="(item, index) in snaxx.slice(0,1)">
|
||||
<p class="text-lg">{{ item.title }}</p>
|
||||
<p>{{ item.excerpt }}</p>
|
||||
<a :href="item.url" class="">more snaxx</a>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* table {
|
||||
width: 70%
|
||||
} */
|
||||
|
||||
.tcenter, th {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
td, p.border {
|
||||
/* background-color: #222; */
|
||||
border-collapse: separate;
|
||||
/* border-left: .1em solid #333; */
|
||||
/* border-right: .1em solid #333; */
|
||||
border-radius: 25px;
|
||||
padding: 2em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.social-data {
|
||||
display: block;
|
||||
/* float: right; */
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
div > span {
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
72
src/components/blocks/ImageBlock.vue
Normal file
72
src/components/blocks/ImageBlock.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import 'vue3-carousel/carousel.css'
|
||||
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
MenuStore.fetchSocialImages();
|
||||
const social_images = computed(() => {
|
||||
return MenuStore.social_images;
|
||||
});
|
||||
|
||||
const config = {
|
||||
height: 300,
|
||||
itemsToShow: 1,
|
||||
gap: 1,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Carousel v-bind="config" style="width:45em;">
|
||||
<Slide v-for="image in social_images" :key="image.id" class="align-middle">
|
||||
<a :href="'https://bsky.app/profile/' + image.handle + '/post/' + image.uri">
|
||||
<img :src="image.img_link" alt="image" />
|
||||
</a>
|
||||
</Slide>
|
||||
|
||||
<template #addons>
|
||||
<Navigation />
|
||||
<Pagination />
|
||||
</template>
|
||||
</Carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
--vc-pgn-background-color: rgba(255, 255, 255, 0.7);
|
||||
--vc-pgn-active-color: rgba(255, 255, 255, 1);
|
||||
--vc-nav-background: rgba(255, 255, 255, 0.7);
|
||||
--vc-nav-border-radius: 100%;
|
||||
}
|
||||
|
||||
/* .carousel__viewport {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
} */
|
||||
|
||||
/* .carousel__slide {
|
||||
align-items: center;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
margin: .75em;
|
||||
transform: translateZ(0);
|
||||
} */
|
||||
|
||||
img {
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
62
src/components/blocks/MiniImageBlock.vue
Normal file
62
src/components/blocks/MiniImageBlock.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import 'vue3-carousel/carousel.css'
|
||||
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
MenuStore.fetchSocialImages();
|
||||
const social_images = computed(() => {
|
||||
return MenuStore.social_images;
|
||||
});
|
||||
|
||||
const config = {
|
||||
height: 280,
|
||||
itemsToShow: 1,
|
||||
gap: 1,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Carousel v-bind="config" style="width:24em;margin:auto;margin-top:1em;">
|
||||
<Slide v-for="image in social_images" :key="image.id" class="align-middle">
|
||||
<a :href="'https://bsky.app/profile/' + image.handle + '/post/' + image.uri">
|
||||
<img :src="image.img_link" alt="image" />
|
||||
</a>
|
||||
</Slide>
|
||||
|
||||
<template #addons>
|
||||
<Navigation />
|
||||
<Pagination />
|
||||
</template>
|
||||
</Carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
--vc-pgn-background-color: rgba(255, 255, 255, 0.7);
|
||||
--vc-pgn-active-color: rgba(255, 255, 255, 1);
|
||||
--vc-nav-background: rgba(255, 255, 255, 0.7);
|
||||
--vc-nav-border-radius: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.carousel__icon {
|
||||
fill: orange !important;
|
||||
height: var(--vc-icn-width);
|
||||
width: var(--vc-icn-width);
|
||||
}
|
||||
</style>
|
||||
|
||||
84
src/components/blocks/Modal.vue
Normal file
84
src/components/blocks/Modal.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<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 === 1" class="p-10 template z-40">
|
||||
<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;
|
||||
} */
|
||||
div >>> p {
|
||||
padding:.5rem;
|
||||
}
|
||||
</style>
|
||||
71
src/components/blocks/PageLead.vue
Normal file
71
src/components/blocks/PageLead.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.fetchDigiSnaxx();
|
||||
const snaxx = computed(() => {
|
||||
return MenuStore.snaxx;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
An elder millenial indigenous orphan bastard on the run ... or something like that.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* table {
|
||||
width: 70%
|
||||
} */
|
||||
|
||||
.tcenter, th {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
td, p.border {
|
||||
/* background-color: #222; */
|
||||
border-collapse: separate;
|
||||
/* border-left: .1em solid #333; */
|
||||
/* border-right: .1em solid #333; */
|
||||
border-radius: 25px;
|
||||
padding: 2em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.social-data {
|
||||
display: block;
|
||||
/* float: right; */
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
div > span {
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
114
src/components/blocks/PrimaryButtonSet.vue
Normal file
114
src/components/blocks/PrimaryButtonSet.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<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
|
||||
@click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)"
|
||||
class="about"
|
||||
type="button"
|
||||
>
|
||||
About
|
||||
</button>
|
||||
|
||||
<button class="menu" v-on:click="menuStore.showMenu = !menuStore.showMenu">Filters</button>
|
||||
|
||||
<button
|
||||
@click="MainStore.changeGallery(MainStore.isOpen, 0, 1, null)"
|
||||
class="qr-code"
|
||||
type="button"
|
||||
>
|
||||
QR Code
|
||||
</button>
|
||||
<button
|
||||
@click="menuStore.toggleTheme()"
|
||||
class="darkMode"
|
||||
type="button"
|
||||
>
|
||||
L/D
|
||||
</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
src/components/blocks/SearchButton.vue
Normal file
45
src/components/blocks/SearchButton.vue
Normal file
@@ -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>
|
||||
114
src/components/blocks/SecondaryButtonSet.vue
Normal file
114
src/components/blocks/SecondaryButtonSet.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
13
src/components/blocks/SubscribeBlock.vue
Normal file
13
src/components/blocks/SubscribeBlock.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
const props = {
|
||||
"data-button-color": "#ff881a",
|
||||
"data-button-text-color": "#FFFFFF",
|
||||
"data-site": "https://canin.dreamfreely.org/",
|
||||
"data-locale": "en"
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div id="email-form" style="min-height: 58px;max-width: 440px;margin: 0 auto;width: 100%"></div>
|
||||
</template>
|
||||
119
src/components/listings/BlueskyLinks.vue
Normal file
119
src/components/listings/BlueskyLinks.vue
Normal file
@@ -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>
|
||||
69
src/components/listings/EventListing.vue
Normal file
69
src/components/listings/EventListing.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<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="m-auto">
|
||||
<div class="float-right text-right text-xs p-2 m-3 w-70">
|
||||
{{ format_date(item.show_date) }} <br/>
|
||||
<a :href="item.venue.website" target="_blank">
|
||||
<b>
|
||||
{{ item.venue.name }}
|
||||
</b>
|
||||
</a>
|
||||
<a :href="item.show_link" target="_blank">
|
||||
<p class="text-lg">
|
||||
{{ item.show_title }}
|
||||
</p>
|
||||
</a>
|
||||
<span class="float-right text-xs">
|
||||
{{ item.venue.city }} | {{ item.event_type }}
|
||||
</span>
|
||||
</div>
|
||||
</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>
|
||||
81
src/components/listings/EventListingComplete.vue
Normal file
81
src/components/listings/EventListingComplete.vue
Normal file
@@ -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>
|
||||
90
src/components/listings/MiniBlueskyLinks.vue
Normal file
90
src/components/listings/MiniBlueskyLinks.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<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 xs:p-2 sm:p-2 md:p-4 lg:p-3 m-2" style="padding-top: revert-layer;">
|
||||
<div class="p-2">
|
||||
<div class="xs:text-center sm:text-center md:float-left lg:float-left text-xs">
|
||||
#{{ item.id }} |
|
||||
<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>
|
||||
| {{ format_date(item.created_at) }}
|
||||
<span v-if="item.published">
|
||||
| <a :href="item.pub_link">
|
||||
📝 {{ item.platform }}
|
||||
</a>
|
||||
|
||||
</span>
|
||||
<span v-else="!item.published">
|
||||
| ✍️
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="text-left">
|
||||
<p style="width:20em;">
|
||||
{{ item.text.slice(0,256) }}
|
||||
</p>
|
||||
|
||||
<p v-if="item.link != 'blank' && item.platform =='bluesky'" style="width:20em;">
|
||||
<a :href="item.link">Link</a>
|
||||
</p>
|
||||
|
||||
<p class="border" v-if="item.rt_text != 'blank'" style="width:20em;">
|
||||
{{ item.rt_text }}
|
||||
<p v-if="item.rt_link != 'blank'">
|
||||
<a :href="item.rt_link">RT Link</a>
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.events {
|
||||
/* background-color: #222; */
|
||||
/* border: .1em solid #333; */
|
||||
border-radius: 25px;
|
||||
min-width: 325px;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-radius: 25px;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
background-color: orange;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div > span {
|
||||
padding: .5em;
|
||||
}
|
||||
</style>
|
||||
98
src/components/listings/Promo.vue
Normal file
98
src/components/listings/Promo.vue
Normal file
@@ -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>
|
||||
44
src/components/listings/VideoList.vue
Normal file
44
src/components/listings/VideoList.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
|
||||
import { useMenuStore } from '../../stores/MenuStore';
|
||||
const MenuStore = useMenuStore();
|
||||
MenuStore.get_today();
|
||||
|
||||
import MiniLinkListing from '../listings/MiniBlueskyLinks.vue';
|
||||
import LinkListing from '../listings/BlueskyLinks.vue';
|
||||
MenuStore.fetchSocialLinks();
|
||||
const links = computed(() => {
|
||||
return MenuStore.social_links;
|
||||
});
|
||||
|
||||
defineProps({
|
||||
limit: {
|
||||
type: Number,
|
||||
require: false
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="md:hidden lg:hidden m-auto">
|
||||
<iframe width="322" height="181" src="https://www.youtube.com/embed/djeADP6JCts?si=4jVmPQ5qOvR0ecwL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="322" height="181" src="https://www.youtube.com/embed/9Z4MWLz6ZFc?si=CrwZeC46CCz3cVbe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:block lg:block m-auto">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/djeADP6JCts?si=4jVmPQ5qOvR0ecwL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/9Z4MWLz6ZFc?si=CrwZeC46CCz3cVbe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
iframe {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
16
src/main.js
Normal file
16
src/main.js
Normal file
@@ -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')
|
||||
27
src/router/index.js
Normal file
27
src/router/index.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import LiveView from '../views/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: '/live',
|
||||
// name: 'live',
|
||||
// component: LiveView
|
||||
// },
|
||||
// {
|
||||
// path: '/media',
|
||||
// name: 'bluesky',
|
||||
// component: BlueskyView
|
||||
// },
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
50
src/stores/EventsStore.js
Normal file
50
src/stores/EventsStore.js
Normal file
@@ -0,0 +1,50 @@
|
||||
import {defineStore} from 'pinia';
|
||||
import moment from 'moment-timezone';
|
||||
import axios from 'axios';
|
||||
|
||||
moment.tz.setDefault('America/Chicago')
|
||||
|
||||
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() {
|
||||
const results = await fetch(`${apiUrl}/events/events/`, {headers: this.headers});
|
||||
const data = await results.json();
|
||||
this.events = data.slice(0,16);
|
||||
},
|
||||
}
|
||||
});
|
||||
30
src/stores/MainStore.vue
Normal file
30
src/stores/MainStore.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script>
|
||||
import { defineStore } from 'pinia'
|
||||
import {ref, computed} from 'vue'
|
||||
|
||||
// You can name the return value of `defineStore()` anything you want, but it's best to use the name of the store and surround it with `use` and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
|
||||
// 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
|
||||
}
|
||||
console.log("promoo", promo)
|
||||
if (!(promo === null)) {
|
||||
promo_display.push(promo);
|
||||
if (promo_display.length > 1) {
|
||||
promo_display.shift();
|
||||
}
|
||||
console.log("promo: ", promo_display[0]);
|
||||
}
|
||||
}
|
||||
|
||||
return { isOpen, modal, changeGallery, promo_display}
|
||||
})
|
||||
</script>
|
||||
87
src/stores/MenuStore.js
Normal file
87
src/stores/MenuStore.js
Normal file
@@ -0,0 +1,87 @@
|
||||
import {defineStore} from 'pinia';
|
||||
import moment from 'moment-timezone';
|
||||
import {ref, computed} from 'vue';
|
||||
|
||||
import {useDark, useToggle } from '@vueuse/core';
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
toggleTheme(){
|
||||
const isDark = useDark();
|
||||
const toggleDark = useToggle(isDark);
|
||||
let theme = 'testing'
|
||||
console.log("dark: ", isDark.value)
|
||||
|
||||
if (isDark.value == true){
|
||||
theme = 'light';
|
||||
console.log('jello');
|
||||
} else {
|
||||
theme = 'dark';
|
||||
console.log('belly');
|
||||
}
|
||||
|
||||
console.log("theme: ", theme)
|
||||
|
||||
localStorage.setItem("theme", theme);
|
||||
this.userTheme = theme;
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
},
|
||||
|
||||
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
src/style.css
Normal file
3
src/style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
13
src/views/BlueskyView.vue
Normal file
13
src/views/BlueskyView.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
import Bluesky from '../components/Bluesky.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-1">
|
||||
<main>
|
||||
<center>
|
||||
<Bluesky />
|
||||
</center>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
42
src/views/HomeView.vue
Normal file
42
src/views/HomeView.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import PageLead from '../components/blocks/PageLead.vue';
|
||||
import MediaBlock from '../components/Sections/MediaBlock.vue';
|
||||
import IntroBlock from '../components/Sections/IntroBlock.vue'
|
||||
import SubscribeBlock from '../components/blocks/SubscribeBlock.vue';
|
||||
import ShopList from '../components/Sections/Shop.vue';
|
||||
import VideoList from '../components/listings/VideoList.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="pt-4" style="margin:auto;width:95%;">
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl">Canin Carlos</h1>
|
||||
<!-- <h2 class="text-xl">the digital home of <a href="//canin.dreamfreely.org/about"></a>.</h2> -->
|
||||
<img src="../assets/cover.png" width="95%" class="pt-4 m-auto" />
|
||||
|
||||
<PageLead class="p-4 m-4" />
|
||||
<span class="text-xl mt-8">
|
||||
<a href="https://canin.dreamfreely.org">Blog</a> 🍃
|
||||
<a href="https://shop.dreamfreely.org">Shop</a> 🍃
|
||||
<a href="https://digisnaxx.com">Snaxx</a>
|
||||
</span>
|
||||
|
||||
<IntroBlock class="py-4" />
|
||||
<span class="text-lg mt-8">
|
||||
<a href="https://bsky.app/profile/dreamfreely.org">Bluesky</a> 🍃
|
||||
<a href="https://youtube.com/@canincarlos">YouTube</a> 🍃
|
||||
<a href="https://linkedin.com/in/canincarlos">LinkedIn</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ShopList class="p-8" />
|
||||
<MediaBlock />
|
||||
<VideoList class="p-8" />
|
||||
|
||||
<div class="text-center p-4">
|
||||
DreamFreely © 2025
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</template>
|
||||
21
src/views/LiveView.vue
Normal file
21
src/views/LiveView.vue
Normal file
@@ -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>
|
||||
12
tailwind.config.js
Normal file
12
tailwind.config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
14
vite.config.js
Normal file
14
vite.config.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user