Add more cities

src/components/Sections/EventList.vue

@@ -5,7 +5,6 @@
   const MenuStore = useMenuStore();
   MenuStore.get_today();
 
-
   import EventListingComplete from '../listings/EventListing.vue';
   // import Promo from '../listings/BlueskyLinks.vue';
   import Promo from '../listings/Promo.vue';

src/router/index.js

@@ -17,6 +17,21 @@ const router = createRouter({
       name: '000',
       component: DigiSnaxxView
     },
+    {
+      path: '/boston',
+      name: 'bos',
+      component: DigiSnaxxView
+    },
+    {
+      path: '/chicago',
+      name: 'chi',
+      component: DigiSnaxxView
+    }, 
+    {
+      path: '/houston',
+      name: 'hou',
+      component: DigiSnaxxView
+    },
     {
       path: '/medellin',
       name: 'mde',
@@ -27,16 +42,32 @@ const router = createRouter({
       name: 'msp',
       component: DigiSnaxxView
     },
+    {
+      path: '/philly',
+      name: 'phl',
+      component: DigiSnaxxView
+    },
+    {
+      path: '/portland',
+      name: 'pdx',
+      component: DigiSnaxxView
+    },
+    {
+      path: '/stlouis',
+      name: 'stl',
+      component: DigiSnaxxView
+    },
+    
     // {
     //   path: '/live',
     //   name: 'live',
     //   component: LiveView
     // },
-    {
-      path: '/media',
-      name: 'bluesky',
-      component: BlueskyView
-    },
+    // {
+    //   path: '/media',
+    //   name: 'bluesky',
+    //   component: BlueskyView
+    // },
   ]
 })
 

src/views/HomeView.vue

@@ -18,6 +18,30 @@
     <!-- <ButtonSet /> -->
 
     <div class="flex grid text-center p-4 grid-flow-row lg:grid-cols-3">
+      <div class="text-center p-2">
+        <a class=" text-center" href="/beyond">
+          <img src="../assets/earth.png" style="width:15em;"/>
+          <p class="text-lg">Beyond</p>
+        </a>
+      </div>
+      <div class="text-center p-2">
+        <a class=" text-center" href="/boston" :click="EventsStore.shortcode = 'bos'">
+          <img src="../assets/boston.png" style="width:15em;"/>
+          <p class="text-lg">Boston</p>
+        </a>
+      </div>
+      <div class="text-center p-2">
+        <a class=" text-center" href="/chicago" :click="EventsStore.shortcode = 'chi'">
+          <img src="../assets/chicago.png" style="width:15em;"/>
+          <p class="text-lg">Chicago</p>
+        </a>
+      </div>
+      <div class="text-center p-2">
+        <a class=" text-center" href="/" :click="EventsStore.shortcode = 'hou'">
+          <img src="../assets/houston.png" style="width:15em;" class="hold"/>
+          <p class="text-lg">Houston</p>
+        </a>
+      </div>
       <div class="text-center p-2">
         <a class=" text-center" href="/medellin" :click="EventsStore.shortcode = 'mde'">  
           <img src="../assets/Medellin.png" style="width:15em;"/>
@@ -31,9 +55,21 @@
         </a>
       </div>
       <div class="text-center p-2">
-          <a class=" text-center" href="/beyond">
-            <img src="../assets/earth.png" style="width:15em;"/>
-            <p class="text-lg">Beyond</p>
+        <a class=" text-center" href="/philly" :click="EventsStore.shortcode = 'phl'">
+          <img src="../assets/philly.png" style="width:15em;"/>
+          <p class="text-lg">Philadelphia</p>
+        </a>
+      </div>
+      <div class="text-center p-2">
+        <a class=" text-center" href="/portland" :click="EventsStore.shortcode = 'pdx'">
+          <img src="../assets/portland.png" style="width:15em;"/>
+          <p class="text-lg">Portland</p>
+        </a>
+      </div>
+      <div class="text-center p-2">
+        <a class=" text-center" href="/" :click="EventsStore.shortcode = 'stl'">
+          <img src="../assets/stlouis.png" style="width:15em;" class="hold"/>
+          <p class="text-lg">St. Louis</p>
         </a>
       </div>
     </div>
@@ -58,4 +94,9 @@ a {
   padding: 2em;
 }
 
+.hold {
+  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+  filter: grayscale(100%);
+}
+
 </style>