Add router, basic nav (#22)

vacs-map-app/package.json

@@ -16,7 +16,8 @@
     "d3": "^7.8.5",
     "mapbox-gl": "^2.15.0",
     "pinia": "^2.1.7",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

vacs-map-app/src/App.vue

@@ -1,55 +1,11 @@
 <template>
   <main>
-    <div class="top-bar">
-      <select v-model="selectedMap">
-        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
-      </select>
-      <Filters />
-    </div>
-    <component :is="selectedMapComponent" />
+    <RouterView />
   </main>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
-import MapContainerColor from '@/components/MapContainerColor.vue';
-import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
-import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
-import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
-import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
-import Filters from '@/components/Filters.vue';
-
-const availableMaps = [
-  {
-    id: 'just-color',
-    name: 'dynamic color',
-    component: MapContainerColor,
-  },
-  {
-    id: 'color-and-radius-1',
-    name: 'dynamic color and radius (cropyield)',
-    component: MapContainerColorRadius,
-  },
-  {
-    id: 'not-filled',
-    name: 'circles not filled',
-    component: MapContainerNotFilled,
-  },
-  {
-    id: 'not-filled-2',
-    name: 'circles not filled, two layers',
-    component: MapContainerNotFilledTwoLayers,
-  },
-  {
-    id: 'african-union',
-    name: 'circles + african union regions',
-    component: MapContainerColorAfricanUnion,
-  },
-];
-const selectedMap = ref(availableMaps[0].id);
-const selectedMapComponent = computed(() => {
-  return availableMaps.find(({ id }) => id === selectedMap.value).component;
-});
+import { RouterView } from 'vue-router';
 </script>
 
 <style scoped>
@@ -60,18 +16,4 @@ main {
   width: 100vw;
   overflow: hidden;
 }
-
-.top-bar {
-  padding: 0.5rem 2rem;
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.overlay {
-  position: absolute;
-  left: 1rem;
-  top: 3rem;
-}
 </style>

vacs-map-app/src/LandingPage.vue

@@ -0,0 +1,80 @@
+<template>
+  <LayoutOpen>
+    <div class="map-wrapper-row">
+      <div class="callout">
+        <div class="callout-content">
+          How does
+          <select v-model="topic" class="topic-picker">
+            <option
+              v-for="t in topicUrlOptions"
+              :key="t.value"
+              :value="t.value"
+            >{{ t.label }}</option>
+          </select>
+          impact decisions about food security?
+        </div>
+        <button class="go-to-topic" @click="navigate">
+          Find out
+        </button>
+      </div>
+      <div class="map-wrapper">
+        <MapContainerColor />
+      </div>
+    </div>
+  </LayoutOpen>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import LayoutOpen from '@/components/layouts/LayoutOpen.vue';
+import MapContainerColor from '@/components/MapContainerColor.vue';
+import { topicUrlOptions } from '@/constants/topics';
+
+const router = useRouter();
+const topic = ref(topicUrlOptions[0].value);
+const navigate = () => router.push(topic.value);
+</script>
+
+<style scoped>
+.map-wrapper-row {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  justify-content: space-between;
+}
+
+.map-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 55%;
+}
+
+.callout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 5rem;
+  font-size: 3em;
+  flex-basis: 0;
+  flex-grow: 1;
+  gap: 2rem;
+  line-height: 1.25em;
+}
+
+.go-to-topic {
+  appearance: none;
+  border: 1px solid #BFBFBF;
+  background: none;
+  border-radius: 4px;
+  color: var(--white);
+  font-size: 0.9em;
+}
+
+.topic-picker {
+  display: block;
+  font-size: 1em;
+  appearance: none;
+}
+</style>

vacs-map-app/src/MapExplorer.vue

@@ -0,0 +1,70 @@
+<template>
+  <main>
+    <div class="top-bar">
+      <select v-model="selectedMap">
+        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
+      </select>
+      <Filters />
+    </div>
+    <component :is="selectedMapComponent" />
+  </main>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import MapContainerColor from '@/components/MapContainerColor.vue';
+import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
+import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
+import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
+import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
+import Filters from '@/components/Filters.vue';
+
+const availableMaps = [
+  {
+    id: 'just-color',
+    name: 'dynamic color',
+    component: MapContainerColor,
+  },
+  {
+    id: 'color-and-radius-1',
+    name: 'dynamic color and radius (cropyield)',
+    component: MapContainerColorRadius,
+  },
+  {
+    id: 'not-filled',
+    name: 'circles not filled',
+    component: MapContainerNotFilled,
+  },
+  {
+    id: 'not-filled-2',
+    name: 'circles not filled, two layers',
+    component: MapContainerNotFilledTwoLayers,
+  },
+  {
+    id: 'african-union',
+    name: 'circles + african union regions',
+    component: MapContainerColorAfricanUnion,
+  },
+];
+const selectedMap = ref(availableMaps[0].id);
+const selectedMapComponent = computed(() => {
+  return availableMaps.find(({ id }) => id === selectedMap.value).component;
+});
+</script>
+
+<style scoped>
+.top-bar {
+  padding: 0.5rem 2rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.overlay {
+  position: absolute;
+  left: 1rem;
+  top: 3rem;
+}
+</style>
+

vacs-map-app/src/assets/main.css

@@ -1,5 +1,16 @@
 @import './base.css';
 
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
 #app {
   margin: 0 auto;
+
+  --dark-gray: #404040;
+  --white: #ffffff;
+
+  --page-horizontal-margin: 5rem;
 }

vacs-map-app/src/components/NavigationButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <RouterLink
+    class="navigation-button"
+    v-bind="props"
+  >
+    <slot></slot>
+  </RouterLink>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router';
+
+const props = defineProps({
+  ...RouterLink.props,
+});
+</script>
+
+<style scoped>
+.navigation-button {
+  border: 1px solid #BFBFBF;
+  border-radius: 4px;
+  color: var(--white);
+  font-size: 0.8em;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+}
+</style>

vacs-map-app/src/components/OverviewTop.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="overview-top">
+    <div class="row">
+      <div>
+        How does <TopicPicker :value="topic" /> impact decisions about food security?
+      </div>
+      <NavigationButton to="/map-explore">Explore the map</NavigationButton>
+    </div>
+    <div class="row">
+      <NavigationButton to="/">Go Back</NavigationButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+import NavigationButton from '@/components/NavigationButton.vue';
+import TopicPicker from '@/components/TopicPicker.vue';
+
+const props = defineProps({
+  topic: {
+    type: String,
+    default: '',
+  },
+});
+const { topic } = toRefs(props);
+</script>
+
+<style scoped>
+.overview-top {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  gap: 0.5rem;
+  margin: 1rem var(--page-horizontal-margin);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>