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