uses compiled vue3-pinboard

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+.env.development
 
 /cypress/videos/
 /cypress/screenshots/

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@fortawesome/pro-regular-svg-icons": "^6.6.0",
     "@phila/phila-ui-core": "^1.0.15",
-    "@phila/pinboard": "2.0.15",
+    "@phila/pinboard": "2.0.50",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-router": "^0.10.8"
   },

src/assets/mac-style.scss

@@ -0,0 +1,10 @@
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0,0,0,.5);
+  box-shadow: 0 0 1px rgba(255,255,255,.5);
+} 

src/components/ExpandCollapseContent.vue

@@ -1,9 +1,7 @@
 <script setup>
 
-import { useMainStore } from '@phila/pinboard/src/stores/MainStore.js';
-import { useConfigStore } from '@phila/pinboard/src/stores/ConfigStore.js';
 import { ref, computed, getCurrentInstance, onBeforeMount, onMounted, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+// import { useRoute, useRouter } from 'vue-router';
 
 import useLocalSharedFunctions from '../composables/useLocalSharedFunctions.js';
 const { getPickupDetails, parseTimeRange, parseException } = useLocalSharedFunctions();
@@ -21,12 +19,7 @@ import GeneralSiteCard from './GeneralSiteCard.vue';
 import FridgeSiteCard from './FridgeSiteCard.vue';
 import PublicBenefitsSiteCard from './PublicBenefitsSiteCard.vue';
 
-// import PrintShareSection from '../../node_modules/@phila/pinboard/src/components/PrintShareSection';
-import PrintShareSection from '@phila/pinboard/src/components/PrintShareSection.vue';
-
-const MainStore = useMainStore();
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 
 const props = defineProps({
   item: {
@@ -37,9 +30,9 @@ const props = defineProps({
   }
 });
 
-const isMobile = computed(() => {
-  return MainStore.isMobileDevice;
-});
+// const isMobile = computed(() => {
+//   return MainStore.isMobileDevice;
+// });
 
 const currentUnixDate = computed (() => {
   let currentYear = format(new Date(), 'yyyy');
@@ -237,11 +230,8 @@ const makeValidUrl = (url) => {
 
 <template>
   <div>
-    <div :class="isMobile ? 'main-content-mobile' : 'main-content'">
-      <print-share-section
-        :item="item"
-      />
-
+    <!-- <div :class="isMobile ? 'main-content-mobile' : 'main-content'"> -->
+    <div>
       <div class="columns">
         <div class="column is-6">
           <div
@@ -444,7 +434,6 @@ const makeValidUrl = (url) => {
 </template>
 
 <style lang="scss" scoped>
-// @import "../../node_modules/@phila/pinboard/src/assets/scss/expandCollapse.scss";
 
 .location-content {
   // font-size: 14px;

src/components/FridgeSiteCard.vue

@@ -1,9 +1,7 @@
 <script setup>
 
 import { computed } from 'vue';
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
   
 const props = defineProps({
   item: {
@@ -15,15 +13,15 @@ const props = defineProps({
 });
 
 const subsections = computed(() => {
-  return this.$config.subsections;
+  return $config.subsections;
 });
 
 const section = computed(() => {
-  return this.subsections[this.$props.item.properties['category']];
+  return subsections[props.item.properties['category']];
 });
 
 const subsection = computed(() => {
-  return this.$props.item.properties.category;
+  return props.item.properties.category;
 });
 
 </script>

src/components/GeneralSiteCard.vue

@@ -1,8 +1,6 @@
 <script setup>
 
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 
 import useLocalSharedFunctions from '../composables/useLocalSharedFunctions.js';
 const { parseException } = useLocalSharedFunctions();

src/components/NdsSchoolCard.vue

@@ -1,8 +1,6 @@
 <script setup>
 
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 import useLocalSharedFunctions from '../composables/useLocalSharedFunctions.js';
 const { parseException } = useLocalSharedFunctions();
 

src/components/PhaSchoolCard.vue

@@ -1,8 +1,6 @@
 <script setup>
 
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 
 const props = defineProps({
   item: {

src/components/PlaystreetsSchoolCard.vue

@@ -1,8 +1,6 @@
 <script setup>
 
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 
 const props = defineProps({
   item: {

src/components/PprSchoolCard.vue

@@ -1,8 +1,6 @@
 <script setup>
 
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 
 const props = defineProps({
   item: {

src/components/PublicBenefitsSiteCard.vue

@@ -1,8 +1,6 @@
 <script setup>
 
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 
 import useLocalSharedFunctions from '../composables/useLocalSharedFunctions.js';
 const { parseException } = useLocalSharedFunctions();

src/components/SeniorMealSiteCard.vue

@@ -1,9 +1,7 @@
 <script setup>
 
 import { computed } from 'vue';
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 
 const props = defineProps({
   item: {

src/components/SeniorMealSitePprCard.vue

@@ -1,8 +1,6 @@
 <script>
 
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 
 const props = defineProps({
   item: {

src/components/customGreeting.vue

@@ -1,16 +1,9 @@
 <script setup>
 
-import { useMainStore } from '../../node_modules/@phila/pinboard/src/stores/MainStore.js';
-import { useMapStore } from '../../node_modules/@phila/pinboard/src/stores/MapStore.js';
-import { useGeocodeStore } from '../../node_modules/@phila/pinboard/src/stores/GeocodeStore.js';
-import { useDataStore } from '../../node_modules/@phila/pinboard/src/stores/DataStore.js';
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-
-import { parse, format } from 'date-fns';
+// import { parse, format } from 'date-fns';
 import { onMounted, watch, ref, computed, defineEmits } from 'vue';
-const MainStore = useMainStore();
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+
+import $config from '../main.js';
 
 const $emit = defineEmits(['view-list']);
 
@@ -95,7 +88,7 @@ watch(
     // let subsections = getCounts();
     subsections.value = getCounts();
     // $store.commit('setSubsections', subsections);
-    MainStore.subsections = subsections.value;
+    // MainStore.subsections = subsections.value;
   },
 );
 

src/components/greetingSection.vue

@@ -1,8 +1,6 @@
 <script setup>
 
-import { useConfigStore } from '../../node_modules/@phila/pinboard/src/stores/ConfigStore.js';
-const ConfigStore = useConfigStore();
-const $config = ConfigStore.config;
+import $config from '../main.js';
 import { getCurrentInstance } from 'vue';
 
 const props = defineProps({

src/main.js

@@ -5,6 +5,11 @@
 // (we might not need to use axios with new vue async tools)
 // if that is not needed, we can move this info to main.js
 
+import isMac from './util/is-mac';
+if (isMac()) {
+  import('./assets/mac-style.scss')
+}
+
 // Font Awesome Icons
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -15,14 +20,13 @@ import { faTimes as farTimes } from '@fortawesome/pro-regular-svg-icons';
 import { faPlus as farPlus } from '@fortawesome/pro-regular-svg-icons';
 import { faMinus as farMinus } from '@fortawesome/pro-regular-svg-icons';
 import { markRaw } from 'vue';
-
-// library.add(faExclamationTriangle, faHandHoldingHeart);
-// library.add(faExclamationTriangle, faHandHoldingHeart, farTimes, farPlus, farMinus);
 library.add(faExclamationTriangle, faHandHoldingHeart, farAngleDown, farAngleUp, farTimes, farPlus, farMinus);
 
-// import pinboard
-import pinboard from '../node_modules/@phila/pinboard/src/main.js';
-if (import.meta.env.VITE_DEBUG) console.log('pinboard:', pinboard);
+import pinboard from '@phila/pinboard';
+// import pinboard from '../node_modules/@phila/pinboard/src/main.js';
+if (import.meta.env.VITE_DEBUG) console.log('test pinboard:', pinboard);
+
+import '../node_modules/@phila/pinboard/dist/style.css';
 
 // import greeting from './general/greeting';
 import legendControls from './general/legendControls';
@@ -47,9 +51,7 @@ const customComps = markRaw({
 import i18n from './i18n/i18n';
 // if (import.meta.env.VITE_DEBUG) console.log('main.js i18n:', i18n);
 
-// pinboard();
-pinboard({
-// export default {
+let $config = {
   i18n: i18n.i18n,
   publicPath: import.meta.env.VITE_PUBLICPATH,
   app: {
@@ -658,4 +660,8 @@ pinboard({
       'circle-stroke-color': 'white',
     },
   },
-});
+};
+
+pinboard($config);
+export default $config;
+

src/util/is-mac.js

@@ -0,0 +1,3 @@
+export default function () {
+  return /Macintosh/.test(navigator.userAgent);
+}