Mobile layout / .NET 6 (#28)

- Mobile menu now shows for small and extra-small windows, with the traditional menu showing above those breakpoints (landscape on larger mobile, desktop)
- The back-end is now running on .NET 6 RC 1.
- Use existing library code for page title vs. hand-rolled component

src/JobsJobsJobs/Api/Auth.fs

@@ -20,7 +20,6 @@ type MastodonAccount () =
   member val Url = "" with get, set
 
 
-open FSharp.Control.Tasks
 open Microsoft.Extensions.Logging
 open System
 open System.Net.Http

src/JobsJobsJobs/Api/Data.fs

@@ -1,7 +1,6 @@
 /// Data access functions for Jobs, Jobs, Jobs
 module JobsJobsJobs.Api.Data
 
-open FSharp.Control.Tasks
 open JobsJobsJobs.Domain.Types
 open Polly
 open RethinkDb.Driver

src/JobsJobsJobs/Api/Handlers.fs

@@ -1,7 +1,6 @@
 /// Route handlers for Giraffe endpoints
 module JobsJobsJobs.Api.Handlers
 
-open FSharp.Control.Tasks
 open Giraffe
 open JobsJobsJobs.Domain
 open JobsJobsJobs.Domain.SharedTypes
@@ -288,7 +287,7 @@ module Listing =
   // PATCH: /api/listing/[id]
   let expire listingId : HttpHandler =
     authorize
-    >=> fun next ctx -> task {
+    >=> fun next ctx -> FSharp.Control.Tasks.Affine.task {
       let dbConn = conn ctx
       let now    = clock(ctx).GetCurrentInstant ()
       match! Data.Listing.findById (ListingId listingId) dbConn with
@@ -309,7 +308,6 @@ module Listing =
           | None -> ()
           return! ok next ctx
       | None -> return! Error.notFound next ctx
-
       }
 
   // GET: /api/listing/search

src/JobsJobsJobs/App/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobs-jobs-jobs",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -13,6 +13,7 @@
     "@mdi/js": "^5.9.55",
     "@vuelidate/core": "^2.0.0-alpha.24",
     "@vuelidate/validators": "^2.0.0-alpha.21",
+    "@vueuse/core": "^6.3.3",
     "bootstrap": "^5.1.0",
     "core-js": "^3.16.3",
     "date-fns": "^2.23.0",

src/JobsJobsJobs/App/src/App.vue

@@ -10,11 +10,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, onMounted } from "vue"
 
 import "bootstrap/dist/css/bootstrap.min.css"
 
 import { Citizen } from "./api"
+import { Mutations, useStore } from "./store"
 import AppFooter from "./components/layout/AppFooter.vue"
 import AppNav from "./components/layout/AppNav.vue"
 import AppToaster from "./components/layout/AppToaster.vue"
@@ -29,6 +30,10 @@ export default defineComponent({
   }
 })
 
+const store = useStore()
+
+onMounted(() => store.commit(Mutations.SetTitle, "Jobs, Jobs, Jobs"))
+
 /**
  * Return "Yes" for true and "No" for false
  *

src/JobsJobsJobs/App/src/components/ListingSearchForm.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
 form.container
   .row
-    .col.col-xs-12.col-sm-6.col-md-4.col-lg-3
+    .col-xs-12.col-sm-6.col-md-4.col-lg-3
       continent-list(v-model="criteria.continentId" topLabel="Any" @update:modelValue="updateContinent")
-    .col.col-xs-12.col-sm-6.col-lg-3
+    .col-xs-12.col-sm-6.col-lg-3
       .form-floating
         input.form-control(type="text" id="regionSearch" placeholder="(free-form text)" :value="criteria.region"
                            @input="updateValue('region', $event.target.value)")
         label(for="regionSearch") Region
       .form-text (free-form text)
-    .col.col-xs-12.col-sm-6.col-offset-md-2.col-lg-3.col-offset-lg-0
+    .col-xs-12.col-sm-6.col-offset-md-2.col-lg-3.col-offset-lg-0
       label.jjj-label Remote Work Opportunity?
       br
       .form-check.form-check-inline
@@ -24,13 +24,13 @@ form.container
         input.form-check-input(type="radio" id="remoteNo" name="remoteWork" :checked="criteria.remoteWork === 'no'"
                                @click="updateValue('remoteWork', 'no')")
         label.form-check-label(for="remoteNo") No
-    .col.col-xs-12.col-sm-6.col-lg-3
+    .col-xs-12.col-sm-6.col-lg-3
       .form-floating
         input.form-control(type="text" id="textSearch" placeholder="(free-form text)" :value="criteria.text"
                            @input="updateValue('text', $event.target.value)")
         label(for="textSearch") Job Listing Text
       .form-text (free-form text)
-  .row: .col.col-xs-12
+  .row: .col
     br
     button.btn.btn-outline-primary(type="submit" @click.prevent="$emit('search')") Search
 </template>

src/JobsJobsJobs/App/src/components/PageTitle.vue

@@ -1,28 +0,0 @@
-<template lang="pug">
-p(v-if="false")
-</template>
-
-<script setup lang="ts">
-import { onMounted, watch } from "vue"
-
-const props = defineProps<{
-  title: string
-}>()
-
-/** The name of the application */
-const appName = "Jobs, Jobs, Jobs"
-
-/** Set the page title based on the input title attribute */
-const setTitle = () => {
-  if (props.title === "") {
-    document.title = appName
-  } else {
-    document.title = `${props.title} | ${appName}`
-  }
-}
-
-onMounted(setTitle)
-
-/** Change the page title when the property changes */
-watch(() => props.title, setTitle)
-</script>

src/JobsJobsJobs/App/src/components/layout/AppLinks.vue

@@ -0,0 +1,81 @@
+<template lang="pug">
+nav
+  template(v-if="isLoggedOn")
+    router-link(to="/citizen/dashboard" @click="hide") #[icon(:icon="mdiViewDashboardVariant")]&nbsp; Dashboard
+    router-link(to="/help-wanted" @click="hide") #[icon(:icon="mdiNewspaperVariantMultipleOutline")]&nbsp; Help Wanted!
+    router-link(to="/profile/search" @click="hide") #[icon(:icon="mdiViewListOutline")]&nbsp; Employment Profiles
+    router-link(to="/success-story/list" @click="hide") #[icon(:icon="mdiThumbUp")]&nbsp; Success Stories
+    .separator
+    router-link(to="/listings/mine" @click="hide") #[icon(:icon="mdiSignText")]&nbsp; My Job Listings
+    router-link(to="/citizen/profile" @click="hide") #[icon(:icon="mdiPencil")]&nbsp; My Employment Profile
+    .separator
+    router-link(to="/citizen/log-off" @click="hide") #[icon(:icon="mdiLogoutVariant")]&nbsp; Log Off
+  template(v-else)
+    router-link(to="/" @click="hide") #[icon(:icon="mdiHome")]&nbsp; Home
+    router-link(to="/profile/seeking" @click="hide") #[icon(:icon="mdiViewListOutline")]&nbsp; Job Seekers
+    router-link(to="/citizen/log-on" @click="hide") #[icon(:icon="mdiLoginVariant")]&nbsp; Log On
+  router-link(to="/how-it-works" @click="hide") #[icon(:icon="mdiHelpCircleOutline")]&nbsp; How It Works
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { useRouter } from "vue-router"
+import { Offcanvas } from "bootstrap"
+import { useStore } from "@/store"
+import {
+  mdiHelpCircleOutline,
+  mdiHome,
+  mdiLoginVariant,
+  mdiLogoutVariant,
+  mdiNewspaperVariantMultipleOutline,
+  mdiPencil,
+  mdiSignText,
+  mdiThumbUp,
+  mdiViewDashboardVariant,
+  mdiViewListOutline
+} from "@mdi/js"
+
+const store = useStore()
+const router = useRouter()
+
+/** Whether a user is logged in or not */
+const isLoggedOn = computed(() => store.state.user !== undefined)
+
+/** The current mobile menu */
+const menu = computed(() => {
+  const elt = document.getElementById("mobileMenu")
+  return elt ? Offcanvas.getOrCreateInstance(elt) : undefined
+})
+
+/** Hide the offcanvas menu (if it exists) when a link is clicked */
+const hide = () => { if (menu.value) menu.value.hide() }
+</script>
+
+<style lang="sass" scoped>
+path
+  fill: white
+path:hover
+  fill: black
+a:link, a:visited
+  text-decoration: none
+  color: white
+nav > a
+  display: block
+  width: 100%
+  border-radius: .25rem
+  padding: .5rem
+  margin: .5rem 0
+  font-size: 1rem
+  > i
+    vertical-align: top
+    margin-right: 1rem
+  &.router-link-exact-active
+    background-color: rgba(255, 255, 255, .2)
+  &:hover
+    background-color: rgba(255, 255, 255, .5)
+    color: black
+    text-decoration: none
+nav > div.separator
+  border-bottom: solid 1px rgba(255, 255, 255, .75)
+  height: 1px
+</style>

src/JobsJobsJobs/App/src/components/layout/AppNav.vue

@@ -1,88 +1,45 @@
 <template lang="pug">
-aside.collapse.show.p-3
+#mobileMenu.offcanvas.offcanvas-end(v-if="showMobileMenu" tabindex="-1" aria-labelledby="mobileMenuLabel")
+  .offcanvas-header
+    h5#mobileMenuLabel Menu
+    button.btn-close.text-reset(type="button" data-bs-dismiss="offcanvas" aria-label="Close")
+  .offcanvas-body: app-links
+aside.collapse.show.p-3(v-else)
   p.home-link.pb-3: router-link(to="/") Jobs, Jobs, Jobs
   p &nbsp;
-  nav
+  app-links
-    template(v-if="isLoggedOn")
-      router-link(to="/citizen/dashboard") #[icon(:icon="mdiViewDashboardVariant")]&nbsp; Dashboard
-      router-link(to="/help-wanted") #[icon(:icon="mdiNewspaperVariantMultipleOutline")]&nbsp; Help Wanted!
-      router-link(to="/profile/search") #[icon(:icon="mdiViewListOutline")]&nbsp; Employment Profiles
-      router-link(to="/success-story/list") #[icon(:icon="mdiThumbUp")]&nbsp; Success Stories
-      .separator
-      router-link(to="/listings/mine") #[icon(:icon="mdiSignText")]&nbsp; My Job Listings
-      router-link(to="/citizen/profile") #[icon(:icon="mdiPencil")]&nbsp; My Employment Profile
-      .separator
-      router-link(to="/citizen/log-off") #[icon(:icon="mdiLogoutVariant")]&nbsp; Log Off
-    template(v-else)
-      router-link(to="/") #[icon(:icon="mdiHome")]&nbsp; Home
-      router-link(to="/profile/seeking") #[icon(:icon="mdiViewListOutline")]&nbsp; Job Seekers
-      router-link(to="/citizen/log-on") #[icon(:icon="mdiLoginVariant")]&nbsp; Log On
-    router-link(to="/how-it-works") #[icon(:icon="mdiHelpCircleOutline")]&nbsp; How It Works
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue"
+import { useBreakpoints, breakpointsBootstrapV5 } from "@vueuse/core"
-import { useStore } from "@/store"
+import AppLinks from "./AppLinks.vue"
-import {
-  mdiHelpCircleOutline,
-  mdiHome,
-  mdiLoginVariant,
-  mdiLogoutVariant,
-  mdiNewspaperVariantMultipleOutline,
-  mdiPencil,
-  mdiSignText,
-  mdiThumbUp,
-  mdiViewDashboardVariant,
-  mdiViewListOutline
-} from "@mdi/js"
 
-const store = useStore()
+const breakpoints = useBreakpoints(breakpointsBootstrapV5)
 
-/** Whether a user is logged in or not */
+/** Whether the mobile menu or the desktop menu should be shown */
-const isLoggedOn = computed(() => store.state.user !== undefined)
+const showMobileMenu = breakpoints.smaller("md")
 </script>
 
 <style lang="sass" scoped>
-aside
+aside,
+#mobileMenu
   background-image: linear-gradient(180deg, darkgreen 0%, green 70%)
   color: white
   font-size: 1.2rem
+aside
   min-height: 100vh
   width: 250px
   min-width: 250px
   position: sticky
   top: 0
-path
-  fill: white
-path:hover
-  fill: black
-a:link, a:visited
-  text-decoration: none
-  color: white
-  // font-weight: 500
   .home-link
     font-size: 1.2rem
     text-align: center
     background-color: rgba(0, 0, 0, .4)
     margin: -1rem
     padding: 1rem
-nav > a
+  a:link,
-  display: block
+  a:visited
-  width: 100%
-  border-radius: .25rem
-  padding: .5rem
-  margin: .5rem 0
-  font-size: 1rem
-  > i
-    vertical-align: top
-    margin-right: 1rem
-  &.router-link-exact-active
-    background-color: rgba(255, 255, 255, .2)
-  &:hover
-    background-color: rgba(255, 255, 255, .5)
-    color: black
     text-decoration: none
-nav > div.separator
+    color: white
-  border-bottom: solid 1px rgba(255, 255, 255, .75)
-  height: 1px
 </style>

src/JobsJobsJobs/App/src/components/layout/TitleBar.vue

@@ -1,16 +1,38 @@
 <template lang="pug">
-nav.navbar.navbar-light.bg-light
+nav.navbar.navbar-dark(v-if="showMobileHeader")
+  span.navbar-text: router-link(to="/") Jobs, Jobs, Jobs
+  button.btn(data-bs-toggle="offcanvas" data-bs-target="#mobileMenu" aria-controls="mobileMenu")
+    icon(:icon="mdiMenu")
+nav.navbar.navbar-light.bg-light(v-else)
   span &nbsp;
   span.navbar-text.
     (&hellip;and Jobs &ndash; #[audio-clip(clip="pelosi-jobs") Let&rsquo;s Vote for Jobs!])
 </template>
 
 <script setup lang="ts">
+import { mdiMenu } from "@mdi/js"
+import { useBreakpoints, breakpointsBootstrapV5 } from "@vueuse/core"
+
 import AudioClip from "@/components/AudioClip.vue"
+
+const breakpoints = useBreakpoints(breakpointsBootstrapV5)
+
+/** Whether to show the mobile or desktop header */
+const showMobileHeader = breakpoints.smaller("md")
 </script>
 
 <style lang="sass" scoped>
+.navbar-dark
+  background-image: linear-gradient(0deg, green 0%, darkgreen 70%)
+  padding-left: 1rem
+  padding-right: 1rem
+  button
+    padding: 0
+  .navbar-text
+    font-weight: bold
+    color: white
+.navbar-light
   .navbar-text
     font-style: italic
-  padding-right: 1rem
+    padding: 0 1rem 0 0
 </style>

src/JobsJobsJobs/App/src/components/profile/PublicSearchForm.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
 form.container
   .row
-    .col.col-xs-12.col-sm-6.col-md-4.col-lg-3
+    .col-xs-12.col-sm-6.col-md-4.col-lg-3
       continent-list(v-model="criteria.continentId" topLabel="Any" @update:modelValue="updateContinent")
-    .col.col-xs-12.col-sm-6.col-md-4.col-lg-3
+    .col-xs-12.col-sm-6.col-md-4.col-lg-3
       .form-floating
         input.form-control.form-control-sm(type="text" id="region" placeholder="(free-form text)"
                                            :value="criteria.region" @input="updateValue('region', $event.target.value)")
         label(for="region") Region
       .form-text (free-form text)
-    .col.col-xs-12.col-sm-6.col-offset-md-2.col-lg-3.col-offset-lg-0
+    .col-xs-12.col-sm-6.col-offset-md-2.col-lg-3.col-offset-lg-0
       label.jjj-label Seeking Remote Work?
       br
       .form-check.form-check-inline
@@ -24,13 +24,13 @@ form.container
         input.form-check-input(type="radio" id="remoteNo" name="remoteWork" :checked="criteria.remoteWork === 'no'"
                                @click="updateValue('remoteWork', 'no')")
         label.form-check-label(for="remoteNo") No
-    .col.col-xs-12.col-sm-6.col-lg-3
+    .col-xs-12.col-sm-6.col-lg-3
       .form-floating
         input.form-control.form-control-sm(type="text" id="skillSearch" placeholder="(free-form text)"
                                            :value="criteria.skill" @input="updateValue('skill', $event.target.value)")
         label(for="skillSearch") Skill
       .form-text (free-form text)
-  .row: .col.col-xs-12
+  .row: .col
     br
     button.btn.btn-outline-primary(type="submit" @click.prevent="$emit('search')") Search
 </template>

src/JobsJobsJobs/App/src/components/profile/SearchForm.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 form.container
   .row
-    .col.col-xs-12.col-sm-6.col-md-4.col-lg-3
+    .col-xs-12.col-sm-6.col-md-4.col-lg-3
       continent-list(v-model="criteria.continentId" topLabel="Any" @update:modelValue="updateContinent")
-    .col.col-xs-12.col-sm-6.col-offset-md-2.col-lg-3.col-offset-lg-0
+    .col-xs-12.col-sm-6.col-offset-md-2.col-lg-3.col-offset-lg-0
       label.jjj-label Seeking Remote Work?
       br
       .form-check.form-check-inline
@@ -18,19 +18,19 @@ form.container
         input.form-check-input(type="radio" id="remoteNo" name="remoteWork" :checked="criteria.remoteWork === 'no'"
                                @click="updateValue('remoteWork', 'no')")
         label.form-check-label(for="remoteNo") No
-    .col.col-xs-12.col-sm-6.col-lg-3
+    .col-xs-12.col-sm-6.col-lg-3
       .form-floating
         input.form-control(type="text" id="skillSearch" placeholder="(free-form text)" :value="criteria.skill"
                            @input="updateValue('skill', $event.target.value)")
         label(for="skillSearch") Skill
       .form-text (free-form text)
-    .col.col-xs-12.col-sm-6.col-lg-3
+    .col-xs-12.col-sm-6.col-lg-3
       .form-floating
         input.form-control(type="text" id="bioSearch" placeholder="(free-form text)" :value="criteria.bioExperience"
                            @input="updateValue('bioExperience', $event.target.value)")
         label(for="bioSearch") Bio / Experience
       .form-text (free-form text)
-  .row: .col.col-xs-12
+  .row: .col
     br
     button.btn.btn-outline-primary(type="submit" @click.prevent="$emit('search')") Search
 </template>

src/JobsJobsJobs/App/src/components/profile/SkillEdit.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
 .row.pb-3
-  .col.col-xs-2.col-md-1.align-self-center
+  .col-xs-2.col-md-1.align-self-center
     button.btn.btn-sm.btn-outline-danger.rounded-pill(title="Delete" @click.prevent="$emit('remove')") &nbsp;&minus;&nbsp;
-  .col.col-xs-10.col-md-6
+  .col-xs-10.col-md-6
     .form-floating
       input.form-control(type="text" :id="`skillDesc${skill.id}`" maxlength="100"
                          placeholder="A skill (language, design technique, process, etc.)" :value="skill.description"
                          @input="updateValue('description', $event.target.value)")
       label.jjj-label(:for="`skillDesc${skill.id}`") Skill
     .form-text A skill (language, design technique, process, etc.)
-  .col.col-xs-12.col-md-5
+  .col-xs-12.col-md-5
     .form-floating
       input.form-control(type="text" :id="`skillNotes${skill.id}`" maxlength="100"
                          placeholder="A further description of the skill (100 characters max)" :value="skill.notes"

src/JobsJobsJobs/App/src/main.ts

@@ -3,13 +3,11 @@ import App from "./App.vue"
 import router from "./router"
 import store, { key } from "./store"
 import Icon from "./components/Icon.vue"
-import PageTitle from "./components/PageTitle.vue"
 
 const app = createApp(App)
   .use(router)
   .use(store, key)
 
 app.component("Icon", Icon)
-app.component("PageTitle", PageTitle)
 
 app.mount("#app")

src/JobsJobsJobs/App/src/router/index.ts

@@ -3,10 +3,9 @@ import {
   createWebHistory,
   RouteLocationNormalized,
   RouteLocationNormalizedLoaded,
-  RouteRecordName,
   RouteRecordRaw
 } from "vue-router"
-import store from "@/store"
+import store, { Mutations } from "@/store"
 import Home from "@/views/Home.vue"
 import LogOn from "@/views/citizen/LogOn.vue"
 
@@ -29,124 +28,141 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
     name: "Home",
-    component: Home
+    component: Home,
+    meta: { title: "Welcome!" }
   },
   {
     path: "/how-it-works",
     name: "HowItWorks",
-    component: () => import(/* webpackChunkName: "help" */ "../views/HowItWorks.vue")
+    component: () => import(/* webpackChunkName: "help" */ "../views/HowItWorks.vue"),
+    meta: { title: "How It Works" }
   },
   {
     path: "/privacy-policy",
     name: "PrivacyPolicy",
-    component: () => import(/* webpackChunkName: "legal" */ "../views/PrivacyPolicy.vue")
+    component: () => import(/* webpackChunkName: "legal" */ "../views/PrivacyPolicy.vue"),
+    meta: { title: "Privacy Policy" }
   },
   {
     path: "/terms-of-service",
     name: "TermsOfService",
-    component: () => import(/* webpackChunkName: "legal" */ "../views/TermsOfService.vue")
+    component: () => import(/* webpackChunkName: "legal" */ "../views/TermsOfService.vue"),
+    meta: { title: "Terms of Service" }
   },
   // Citizen URLs
   {
     path: "/citizen/log-on",
     name: "LogOn",
-    component: LogOn
+    component: LogOn,
+    meta: { title: "Log On" }
   },
   {
     path: "/citizen/:abbr/authorized",
     name: "CitizenAuthorized",
-    component: () => import(/* webpackChunkName: "dashboard" */ "../views/citizen/Authorized.vue")
+    component: () => import(/* webpackChunkName: "dashboard" */ "../views/citizen/Authorized.vue"),
+    meta: { title: "Logging On" }
   },
   {
     path: "/citizen/dashboard",
     name: "Dashboard",
-    component: () => import(/* webpackChunkName: "dashboard" */ "../views/citizen/Dashboard.vue")
+    component: () => import(/* webpackChunkName: "dashboard" */ "../views/citizen/Dashboard.vue"),
+    meta: { auth: true, title: "Dashboard" }
   },
   {
     path: "/citizen/profile",
     name: "EditProfile",
-    component: () => import(/* webpackChunkName: "profedit" */ "../views/citizen/EditProfile.vue")
+    component: () => import(/* webpackChunkName: "profedit" */ "../views/citizen/EditProfile.vue"),
+    meta: { auth: true, title: "Edit Profile" }
   },
   {
     path: "/citizen/log-off",
     name: "LogOff",
-    component: () => import(/* webpackChunkName: "logoff" */ "../views/citizen/LogOff.vue")
+    component: () => import(/* webpackChunkName: "logoff" */ "../views/citizen/LogOff.vue"),
+    meta: { auth: true, title: "Logging Off" }
   },
   // Job Listing URLs
   {
     path: "/help-wanted",
     name: "HelpWanted",
-    component: () => import(/* webpackChunkName: "joblist" */ "../views/listing/HelpWanted.vue")
+    component: () => import(/* webpackChunkName: "joblist" */ "../views/listing/HelpWanted.vue"),
+    meta: { auth: true, title: "Help Wanted" }
   },
   {
     path: "/listing/:id/edit",
     name: "EditListing",
-    component: () => import(/* webpackChunkName: "jobedit" */ "../views/listing/ListingEdit.vue")
+    component: () => import(/* webpackChunkName: "jobedit" */ "../views/listing/ListingEdit.vue"),
+    meta: { auth: true, title: "Edit Job Listing" }
   },
   {
     path: "/listing/:id/expire",
     name: "ExpireListing",
-    component: () => import(/* webpackChunkName: "jobedit" */ "../views/listing/ListingExpire.vue")
+    component: () => import(/* webpackChunkName: "jobedit" */ "../views/listing/ListingExpire.vue"),
+    meta: { auth: true, title: "Expire Job Listing" }
   },
   {
     path: "/listing/:id/view",
     name: "ViewListing",
-    component: () => import(/* webpackChunkName: "joblist" */ "../views/listing/ListingView.vue")
+    component: () => import(/* webpackChunkName: "joblist" */ "../views/listing/ListingView.vue"),
+    meta: { auth: true, title: "Loading Job Listing..." }
   },
   {
     path: "/listings/mine",
     name: "MyListings",
-    component: () => import(/* webpackChunkName: "joblist" */ "../views/listing/MyListings.vue")
+    component: () => import(/* webpackChunkName: "joblist" */ "../views/listing/MyListings.vue"),
+    meta: { auth: true, title: "My Job Listings" }
   },
   // Profile URLs
   {
     path: "/profile/:id/view",
     name: "ViewProfile",
-    component: () => import(/* webpackChunkName: "profview" */ "../views/profile/ProfileView.vue")
+    component: () => import(/* webpackChunkName: "profview" */ "../views/profile/ProfileView.vue"),
+    meta: { auth: true, title: "Loading Profile..." }
   },
   {
     path: "/profile/search",
     name: "SearchProfiles",
-    component: () => import(/* webpackChunkName: "profview" */ "../views/profile/ProfileSearch.vue")
+    component: () => import(/* webpackChunkName: "profview" */ "../views/profile/ProfileSearch.vue"),
+    meta: { auth: true, title: "Search Profiles" }
   },
   {
     path: "/profile/seeking",
     name: "PublicSearchProfiles",
-    component: () => import(/* webpackChunkName: "seeking" */ "../views/profile/Seeking.vue")
+    component: () => import(/* webpackChunkName: "seeking" */ "../views/profile/Seeking.vue"),
+    meta: { auth: false, title: "People Seeking Work" }
   },
   // "So Long" URLs
   {
     path: "/so-long/options",
     name: "DeletionOptions",
-    component: () => import(/* webpackChunkName: "so-long" */ "../views/so-long/DeletionOptions.vue")
+    component: () => import(/* webpackChunkName: "so-long" */ "../views/so-long/DeletionOptions.vue"),
+    meta: { auth: true, title: "Account Deletion Options" }
   },
   {
     path: "/so-long/success/:abbr",
     name: "DeletionSuccess",
-    component: () => import(/* webpackChunkName: "so-long" */ "../views/so-long/DeletionSuccess.vue")
+    component: () => import(/* webpackChunkName: "so-long" */ "../views/so-long/DeletionSuccess.vue"),
+    meta: { auth: false, title: "Account Deletion Success" }
   },
   // Success Story URLs
   {
     path: "/success-story/list",
     name: "ListStories",
-    component: () => import(/* webpackChunkName: "success" */ "../views/success-story/StoryList.vue")
+    component: () => import(/* webpackChunkName: "success" */ "../views/success-story/StoryList.vue"),
+    meta: { auth: false, title: "Success Stories" }
   },
   {
     path: "/success-story/:id/edit",
     name: "EditStory",
-    component: () => import(/* webpackChunkName: "succedit" */ "../views/success-story/StoryEdit.vue")
+    component: () => import(/* webpackChunkName: "succedit" */ "../views/success-story/StoryEdit.vue"),
+    meta: { auth: false, title: "Edit Success Story" }
   },
   {
     path: "/success-story/:id/view",
     name: "ViewStory",
-    component: () => import(/* webpackChunkName: "success" */ "../views/success-story/StoryView.vue")
+    component: () => import(/* webpackChunkName: "success" */ "../views/success-story/StoryView.vue"),
+    meta: { auth: false, title: "Success Story" }
   }
 ]
-/** The routes that do not require logins */
-const publicRoutes : Array<RouteRecordName> = [
-  "Home", "HowItWorks", "PrivacyPolicy", "TermsOfService", "LogOn", "CitizenAuthorized", "PublicSearchProfiles",
-  "DeletionSuccess"
-]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
@@ -159,10 +175,11 @@ const router = createRouter({
 
 // eslint-disable-next-line
 router.beforeEach((to : RouteLocationNormalized, from : RouteLocationNormalized) => {
-  if (store.state.user === undefined && !publicRoutes.includes(to.name ?? "")) {
+  if (store.state.user === undefined && (to.meta.auth || false)) {
     window.localStorage.setItem(AFTER_LOG_ON_URL, to.fullPath)
     return "/citizen/log-on"
   }
+  store.commit(Mutations.SetTitle, to.meta.title ?? "")
 })
 
 export default router

src/JobsJobsJobs/App/src/store/index.ts

@@ -1,3 +1,4 @@
+import { useTitle } from "@vueuse/core"
 import { InjectionKey } from "vue"
 import { createStore, Store, useStore as baseUseStore } from "vuex"
 import api, { Continent, Instance, LogOnSuccess } from "../api"
@@ -6,6 +7,8 @@ import * as Mutations from "./mutations"
 
 /** The state tracked by the application */
 export interface State {
+  /** The document's current title */
+  pageTitle : string
   /** The currently logged-on user */
   user : LogOnSuccess | undefined
   /** The state of the log on process */
@@ -24,9 +27,13 @@ export function useStore () : Store<State> {
   return baseUseStore(key)
 }
 
+/** The application name */
+const appName = "Jobs, Jobs, Jobs"
+
 export default createStore({
   state: () : State => {
     return {
+      pageTitle: "",
       user: undefined,
       logOnState: "<em>Welcome back!</em>",
       continents: [],
@@ -34,6 +41,10 @@ export default createStore({
     }
   },
   mutations: {
+    [Mutations.SetTitle]: (state, title : string) => {
+      state.pageTitle = title === "" ? appName : `${title} | ${appName}`
+      useTitle(state.pageTitle)
+    },
     [Mutations.SetUser]: (state, user : LogOnSuccess) => { state.user = user },
     [Mutations.ClearUser]: (state) => { state.user = undefined },
     [Mutations.SetLogOnState]: (state, message : string) => { state.logOnState = message },

src/JobsJobsJobs/App/src/store/mutations.ts

@@ -1,3 +1,6 @@
+/** Set the page title */
+export const SetTitle = "setTitle"
+
 /** Set the logged-on user */
 export const SetUser = "setUser"
 

src/JobsJobsJobs/App/src/views/Home.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Welcome!")
   p &nbsp;
   p.
     Welcome to Jobs, Jobs, Jobs (AKA No Agenda Careers), where citizens of Gitmo Nation can assist one another in

src/JobsJobsJobs/App/src/views/HowItWorks.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="How It Works")
   h3 How It Works
   h5.pb-3.text-muted: em Last Updated August 29#[sup th], 2021
   p: em.

src/JobsJobsJobs/App/src/views/PrivacyPolicy.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Privacy Policy")
   h3 Privacy Policy
   p: em (as of September 6#[sup th], 2021)
 

src/JobsJobsJobs/App/src/views/TermsOfService.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Terms of Service")
   h3 Terms of Service
   p: em (as of September 6#[sup th], 2021)
 

src/JobsJobsJobs/App/src/views/citizen/Authorized.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Logging on...")
   p &nbsp;
   p(v-html="message")
 </template>

src/JobsJobsJobs/App/src/views/citizen/Dashboard.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article.container
-  page-title(title="Dashboard")
   h3.pb-4 Welcome, {{user.name}}
   load-data(:load="retrieveData"): .row.row-cols-1.row-cols-md-2
     .col: .card.h-100

src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Edit Profile")
   h3.pb-3 My Employment Profile
   load-data(:load="retrieveData"): form.row.g-3
     .col-12.col-sm-10.col-md-8.col-lg-6

src/JobsJobsJobs/App/src/views/citizen/LogOff.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Logging off...")
   p &nbsp;
   p.fst-italic Logging off&hellip;
 </template>

src/JobsJobsJobs/App/src/views/listing/HelpWanted.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Help Wanted")
   h3.pb-3 Help Wanted
   p(v-if="!searched").
     Enter relevant criteria to find results, or just click &ldquo;Search&rdquo; to see all current job listings.

src/JobsJobsJobs/App/src/views/listing/ListingEdit.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(:title="isNew ? 'Add a Job Listing' : 'Edit Job Listing'")
   h3.pb-3(v-if="isNew") Add a Job Listing
   h3.pb-3(v-else) Edit Job Listing
   load-data(:load="retrieveData"): form.row.g-3
@@ -44,7 +43,7 @@ import { required } from "@vuelidate/validators"
 
 import api, { Listing, ListingForm, LogOnSuccess } from "@/api"
 import { toastError, toastSuccess } from "@/components/layout/AppToaster.vue"
-import { useStore } from "@/store"
+import { Mutations, useStore } from "@/store"
 
 import ContinentList from "@/components/ContinentList.vue"
 import LoadData from "@/components/LoadData.vue"
@@ -99,6 +98,7 @@ const v$ = useVuelidate(rules, listing, { $lazy: true })
 
 /** Retrieve the listing being edited (or set up the form for a new listing) */
 const retrieveData = async (errors : string[]) => {
+  if (isNew.value) store.commit(Mutations.SetTitle, "Add a Job Listing")
   const listResult = isNew.value ? newListing : await api.listings.retreive(id, user)
   if (typeof listResult === "string") {
     errors.push(listResult)

src/JobsJobsJobs/App/src/views/listing/ListingExpire.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Expire Job Listing")
   load-data(:load="retrieveListing")
     h3.pb-3 Expire Job Listing ({{listing.title}})
     p: em.

src/JobsJobsJobs/App/src/views/listing/ListingView.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(:title="title")
   load-data(:load="retrieveListing")
     h3
       | {{it.listing.title}}
@@ -24,7 +23,7 @@ import { formatNeededBy } from "./"
 import api, { Citizen, ListingForView, LogOnSuccess } from "@/api"
 import { citizenName } from "@/App.vue"
 import { toHtml } from "@/markdown"
-import { useStore } from "@/store"
+import { Mutations, useStore } from "@/store"
 import LoadData from "@/components/LoadData.vue"
 
 const store = useStore()
@@ -48,6 +47,7 @@ const retrieveListing = async (errors : string[]) => {
     errors.push("Job Listing not found")
   } else {
     it.value = listingResp
+    store.commit(Mutations.SetTitle, `${listingResp.listing.title} | Job Listing`)
     const citizenResp = await api.citizen.retrieve(listingResp.listing.citizenId, user)
     if (typeof citizenResp === "string") {
       errors.push(citizenResp)
@@ -59,9 +59,6 @@ const retrieveListing = async (errors : string[]) => {
   }
 }
 
-/** The page title (changes once the listing is loaded) */
-const title = computed(() => it.value ? `${it.value.listing.title} | Job Listing` : "Loading Job Listing...")
-
 /** The HTML details of the job listing */
 const details = computed(() => toHtml(it.value?.listing.text ?? ""))
 

src/JobsJobsJobs/App/src/views/listing/MyListings.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="My Job Listings")
   h3.pb-3 My Job Listings
   p: router-link.btn.btn-outline-primary(to="/listing/new/edit") Add a New Job Listing
   load-data(:load="getListings")

src/JobsJobsJobs/App/src/views/profile/ProfileSearch.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Search Profiles")
   h3.pb-3 Search Profiles
   p(v-if="!searched").
     Enter one or more criteria to filter results, or just click &ldquo;Search&rdquo; to list all profiles.
@@ -13,23 +12,25 @@ article
         thead: tr
           th(scope="col") Profile
           th(scope="col") Name
-          th.text-center(scope="col") Seeking?
+          th.text-center(scope="col" v-if="wideDisplay") Seeking?
           th.text-center(scope="col") Remote?
-          th.text-center(scope="col") Full-Time?
+          th.text-center(scope="col" v-if="wideDisplay") Full-Time?
-          th(scope="col") Last Updated
+          th(scope="col" v-if="wideDisplay") Last Updated
         tbody: tr(v-for="profile in results" :key="profile.citzenId")
           td: router-link(:to="`/profile/${profile.citizenId}/view`") View
           td(:class="{ 'fw-bold' : profile.seekingEmployment }") {{profile.displayName}}
-          td.text-center {{yesOrNo(profile.seekingEmployment)}}
+          td.text-center(v-if="wideDisplay") {{yesOrNo(profile.seekingEmployment)}}
           td.text-center {{yesOrNo(profile.remoteWork)}}
-          td.text-center {{yesOrNo(profile.fullTime)}}
+          td.text-center(v-if="wideDisplay") {{yesOrNo(profile.fullTime)}}
-          td: full-date(:date="profile.lastUpdatedOn")
+          td(v-if="wideDisplay"): full-date(:date="profile.lastUpdatedOn")
       p.pt-3(v-else-if="searched") No results found for the specified criteria
 </template>
 
 <script setup lang="ts">
-import { defineComponent, Ref, ref, watch } from "vue"
+import { Ref, ref, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
+import { useBreakpoints, breakpointsBootstrapV5 } from "@vueuse/core"
+
 import { yesOrNo } from "@/App.vue"
 import api, { LogOnSuccess, ProfileSearch, ProfileSearchResult } from "@/api"
 import { queryValue } from "@/router"
@@ -43,6 +44,7 @@ import ProfileSearchForm from "@/components/profile/SearchForm.vue"
 const store = useStore()
 const route = useRoute()
 const router = useRouter()
+const breakpoints = useBreakpoints(breakpointsBootstrapV5)
 
 /** Any errors encountered while retrieving data */
 const errors : Ref<string[]> = ref([])
@@ -70,6 +72,9 @@ const results : Ref<ProfileSearchResult[]> = ref([])
 /** Whether the search criteria should be collapsed */
 const isCollapsed = ref(searched.value && results.value.length > 0)
 
+/** Hide certain columns if the display is too narrow */
+const wideDisplay = breakpoints.greater("sm")
+
 /** Set up the page to match its requested state */
 const setUpPage = async () => {
   if (queryValue(route, "searched") === "true") {

src/JobsJobsJobs/App/src/views/profile/ProfileView.vue

@@ -34,7 +34,7 @@ import { mdiPencil } from "@mdi/js"
 import api, { LogOnSuccess, ProfileForView } from "@/api"
 import { citizenName } from "@/App.vue"
 import { toHtml } from "@/markdown"
-import { useStore } from "@/store"
+import { Mutations, useStore } from "@/store"
 import LoadData from "@/components/LoadData.vue"
 
 const store = useStore()
@@ -66,14 +66,10 @@ const retrieveProfile = async (errors : string[]) => {
     errors.push("Profile not found")
   } else {
     it.value = profileResp
+    store.commit(Mutations.SetTitle, `Employment profile for ${citizenName(profileResp.citizen)}`)
   }
 }
 
-/** The title of the page (changes once the profile is loaded) */
-const title = computed(() => it.value
-  ? `Employment profile for ${citizenName(it.value.citizen)}`
-  : "Loading Profile...")
-
 /** The HTML version of the citizen's professional biography */
 const bioHtml = computed(() => toHtml(it.value?.profile.biography ?? ""))
 

src/JobsJobsJobs/App/src/views/profile/Seeking.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="People Seeking Work")
   h3.pb-3 People Seeking Work
   p(v-if="!searched").
     Enter one or more criteria to filter results, or just click &ldquo;Search&rdquo; to list all profiles.

src/JobsJobsJobs/App/src/views/so-long/DeletionOptions.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Account Deletion Options")
   h3.pb-3 Account Deletion Options
   h4.pb-3 Option 1 &ndash; Delete Your Profile
   p.

src/JobsJobsJobs/App/src/views/so-long/DeletionSuccess.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Account Deletion Success")
   h3.pb-3 Account Deletion Success
   p.
     Your account has been successfully deleted. To revoke the permissions you have previously granted to this

src/JobsJobsJobs/App/src/views/success-story/StoryEdit.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(:title="title")
   h3.pb-3 {{title}}
   load-data(:load="retrieveStory")
     p(v-if="isNew").
@@ -26,7 +25,7 @@ import useVuelidate from "@vuelidate/core"
 
 import api, { LogOnSuccess, StoryForm } from "@/api"
 import { toastError, toastSuccess } from "@/components/layout/AppToaster.vue"
-import { useStore } from "@/store"
+import { Mutations, useStore } from "@/store"
 
 import LoadData from "@/components/LoadData.vue"
 import MarkdownEditor from "@/components/MarkdownEditor.vue"
@@ -45,9 +44,6 @@ const id = route.params.id as string
 /** Whether this is a new story */
 const isNew = computed(() => id === "new")
 
-/** The page title */
-const title = computed(() => isNew.value ? "Tell Your Success Story" : "Edit Success Story")
-
 /** The form for editing the story */
 const story = reactive(new StoryForm())
 
@@ -64,6 +60,7 @@ const v$ = useVuelidate(rules, story, { $lazy: true })
 const retrieveStory = async (errors : string[]) => {
   if (isNew.value) {
     story.id = "new"
+    store.commit(Mutations.SetTitle, "Tell Your Success Story")
   } else {
     const storyResult = await api.success.retrieve(id, user)
     if (typeof storyResult === "string") {

src/JobsJobsJobs/App/src/views/success-story/StoryList.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Success Stories")
   h3.pb-3 Success Stories
   load-data(:load="retrieveStories")
     table.table.table-sm.table-hover(v-if="stories?.length > 0")

src/JobsJobsJobs/App/src/views/success-story/StoryView.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 article
-  page-title(title="Success Story")
   load-data(:load="retrieveStory")
     h3
       | {{citizenName}}&rsquo;s Success Story

src/JobsJobsJobs/App/vue.config.js

@@ -2,5 +2,14 @@ module.exports = {
   transpileDependencies: [
     'vuetify'
   ],
-  outputDir: '../Api/wwwroot'
+  outputDir: '../Api/wwwroot',
+  configureWebpack: {
+    module: {
+      rules: [{
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto"
+      }]
+    }
+  }
 }