From 2eefb44f161d067bebb608406ffd09274855c2b2 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel@bitbadger.solutions>
Date: Tue, 24 Aug 2021 09:41:43 -0400
Subject: [PATCH] Welcome, pug

---
 src/JobsJobsJobs/App/package.json             |   3 +-
 src/JobsJobsJobs/App/src/App.vue              |  25 +-
 .../App/src/components/AudioClip.vue          |   4 +-
 .../App/src/components/CollapsePanel.vue      |  14 +-
 .../App/src/components/ContinentList.vue      |  18 +-
 .../App/src/components/ErrorList.vue          |  13 +-
 .../App/src/components/FullDate.vue           |   4 +-
 .../App/src/components/FullDateTime.vue       |   4 +-
 src/JobsJobsJobs/App/src/components/Icon.vue  |   4 +-
 .../App/src/components/ListingSearchForm.vue  |  96 ++-
 .../App/src/components/LoadData.vue           |   9 +-
 .../App/src/components/MarkdownEditor.vue     |  27 +-
 .../App/src/components/MaybeSave.vue          |  26 +-
 .../App/src/components/PageTitle.vue          |   4 +-
 .../App/src/components/layout/AppFooter.vue   |  11 +-
 .../App/src/components/layout/AppNav.vue      |  46 +-
 .../App/src/components/layout/AppToaster.vue  |   7 +-
 .../App/src/components/layout/TitleBar.vue    |  12 +-
 .../components/profile/PublicSearchForm.vue   |  96 ++-
 .../App/src/components/profile/SearchForm.vue |  96 ++-
 .../App/src/components/profile/SkillEdit.vue  |  44 +-
 src/JobsJobsJobs/App/src/views/Home.vue       |  27 +-
 src/JobsJobsJobs/App/src/views/HowItWorks.vue | 142 ++--
 .../App/src/views/PrivacyPolicy.vue           | 686 ++++++++----------
 .../App/src/views/TermsOfService.vue          |  66 +-
 .../App/src/views/citizen/Authorized.vue      |  11 +-
 .../App/src/views/citizen/Dashboard.vue       | 109 ++-
 .../App/src/views/citizen/EditProfile.vue     | 168 ++---
 .../App/src/views/citizen/LogOff.vue          |  11 +-
 .../App/src/views/citizen/LogOn.vue           |   9 +-
 .../App/src/views/listing/HelpWanted.vue      |  66 +-
 .../App/src/views/listing/ListingEdit.vue     |  92 +--
 .../App/src/views/listing/ListingView.vue     |  28 +-
 .../App/src/views/listing/MyListings.vue      |  51 +-
 .../App/src/views/profile/ProfileSearch.vue   |  67 +-
 .../App/src/views/profile/ProfileView.vue     |  58 +-
 .../App/src/views/profile/Seeking.vue         |  71 +-
 .../App/src/views/so-long/DeletionOptions.vue |  56 +-
 .../App/src/views/so-long/DeletionSuccess.vue |  24 +-
 .../App/src/views/success-story/StoryEdit.vue |  49 +-
 .../App/src/views/success-story/StoryList.vue |  58 +-
 .../App/src/views/success-story/StoryView.vue |  20 +-
 42 files changed, 1028 insertions(+), 1404 deletions(-)

diff --git a/src/JobsJobsJobs/App/package.json b/src/JobsJobsJobs/App/package.json
index d41e50b..6914c67 100644
--- a/src/JobsJobsJobs/App/package.json
+++ b/src/JobsJobsJobs/App/package.json
@@ -43,6 +43,7 @@
     "eslint-plugin-vue": "^7.16.0",
     "sass": "~1.37.0",
     "sass-loader": "^10.0.0",
-    "typescript": "~4.3.5"
+    "typescript": "~4.3.5",
+    "vue-cli-plugin-pug": "~2.0.0"
   }
 }
diff --git a/src/JobsJobsJobs/App/src/App.vue b/src/JobsJobsJobs/App/src/App.vue
index b682083..835d9a4 100644
--- a/src/JobsJobsJobs/App/src/App.vue
+++ b/src/JobsJobsJobs/App/src/App.vue
@@ -1,19 +1,12 @@
-<template>
-  <div class="jjj-app">
-    <app-nav />
-    <div class="jjj-main">
-      <title-bar />
-      <main class="container-fluid">
-        <router-view v-slot="{ Component }">
-          <transition name="fade" mode="out-in">
-            <component :is="Component" />
-          </transition>
-        </router-view>
-      </main>
-      <app-footer />
-      <app-toaster />
-    </div>
-  </div>
+<template lang="pug">
+.jjj-app
+  app-nav
+  .jjj-main
+    title-bar
+    main.container-fluid: router-view(v-slot="{ Component }"): transition(name='fade' mode='out-in')
+      component(:is='Component')
+    app-footer
+    app-toaster
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/AudioClip.vue b/src/JobsJobsJobs/App/src/components/AudioClip.vue
index fe2f538..a597836 100644
--- a/src/JobsJobsJobs/App/src/components/AudioClip.vue
+++ b/src/JobsJobsJobs/App/src/components/AudioClip.vue
@@ -1,5 +1,5 @@
-<template>
-  <span @click="playFile"><slot></slot><audio :id="clip"><source :src="clipSource"></audio></span>
+<template lang="pug">
+span(@click='playFile') #[slot] #[audio(:id='clip'): source(:src='clipSource')]
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/CollapsePanel.vue b/src/JobsJobsJobs/App/src/components/CollapsePanel.vue
index 234e7b1..d8ae62f 100644
--- a/src/JobsJobsJobs/App/src/components/CollapsePanel.vue
+++ b/src/JobsJobsJobs/App/src/components/CollapsePanel.vue
@@ -1,12 +1,8 @@
-<template>
-  <div class="card">
-    <div class="card-body">
-      <h6 class="card-title">
-          <a href="#" :class="{ 'cp-c': collapsed, 'cp-o': !collapsed }" @click.prevent="toggle">{{headerText}}</a>
-      </h6>
-      <slot v-if="!collapsed"></slot>
-    </div>
-  </div>
+<template lang="pug">
+.card: .card-body
+  h6.card-title
+    a(href='#' :class="{ 'cp-c': collapsed, 'cp-o': !collapsed }" @click.prevent='toggle') {{headerText}}
+  slot(v-if='!collapsed')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/ContinentList.vue b/src/JobsJobsJobs/App/src/components/ContinentList.vue
index 2ed03a7..a14b42e 100644
--- a/src/JobsJobsJobs/App/src/components/ContinentList.vue
+++ b/src/JobsJobsJobs/App/src/components/ContinentList.vue
@@ -1,13 +1,11 @@
-<template>
-  <div class="form-floating">
-    <select id="continentId" :class="{ 'form-select': true, 'is-invalid': isInvalid}"
-            :value="continentId" @change="continentChanged">
-      <option value="">&ndash; {{emptyLabel}} &ndash;</option>
-      <option v-for="c in continents" :key="c.id" :value="c.id">{{c.name}}</option>
-    </select>
-    <label for="continentId" class="jjj-required">Continent</label>
-  </div>
-  <div class="invalid-feedback">Please select a continent</div>
+<template lang="pug">
+.form-floating
+  select.form-select(id='continentId' :class="{ 'is-invalid': isInvalid}" :value='continentId'
+                     @change='continentChanged')
+    option(value='') &ndash; {{emptyLabel}} &ndash;
+    option(v-for='c in continents' :key='c.id' :value='c.id') {{c.name}}
+  label.jjj-required(for='continentId') Continent
+.invalid-feedback Please select a continent
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/ErrorList.vue b/src/JobsJobsJobs/App/src/components/ErrorList.vue
index d9524ba..c872f32 100644
--- a/src/JobsJobsJobs/App/src/components/ErrorList.vue
+++ b/src/JobsJobsJobs/App/src/components/ErrorList.vue
@@ -1,11 +1,8 @@
-<template>
-  <template v-if="errors.length > 0">
-    <p>The following error<template v-if="errors.length !== 1">s</template> occurred:</p>
-    <ul>
-      <li v-for="(error, idx) in errors" :key="idx">{{error}}</li>
-    </ul>
-  </template>
-  <slot v-else></slot>
+<template lang="pug">
+template(v-if='errors.length > 0')
+  p The following error#[template(v-if='errors.length !== 1') s] occurred:
+  ul: li(v-for='(error, idx) in errors' :key='idx') {{error}}
+slot(v-else)
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/FullDate.vue b/src/JobsJobsJobs/App/src/components/FullDate.vue
index 69b78ef..e76a121 100644
--- a/src/JobsJobsJobs/App/src/components/FullDate.vue
+++ b/src/JobsJobsJobs/App/src/components/FullDate.vue
@@ -1,5 +1,5 @@
-<template>
-  <template v-if="true">{{formatted}}</template>
+<template lang="pug">
+template(v-if='true') {{formatted}}
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/FullDateTime.vue b/src/JobsJobsJobs/App/src/components/FullDateTime.vue
index d532ae1..efbca7e 100644
--- a/src/JobsJobsJobs/App/src/components/FullDateTime.vue
+++ b/src/JobsJobsJobs/App/src/components/FullDateTime.vue
@@ -1,5 +1,5 @@
-<template>
-  <template v-if="true">{{formatted}}</template>
+<template lang="pug">
+template(v-if='true') {{formatted}}
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/Icon.vue b/src/JobsJobsJobs/App/src/components/Icon.vue
index dfaa30c..c306d64 100644
--- a/src/JobsJobsJobs/App/src/components/Icon.vue
+++ b/src/JobsJobsJobs/App/src/components/Icon.vue
@@ -1,5 +1,5 @@
-<template>
-  <span :class="iconClass"></span>
+<template lang="pug">
+span(:class='iconClass')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/ListingSearchForm.vue b/src/JobsJobsJobs/App/src/components/ListingSearchForm.vue
index 764e44b..a344b18 100644
--- a/src/JobsJobsJobs/App/src/components/ListingSearchForm.vue
+++ b/src/JobsJobsJobs/App/src/components/ListingSearchForm.vue
@@ -1,52 +1,38 @@
-<template>
-  <form class="container">
-    <div class="row">
-      <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
-        <continent-list v-model="criteria.continentId" topLabel="Any"
-                        @update:modelValue="(c) => updateValue('continentId', c)" />
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-lg-3">
-        <div class="form-floating">
-          <input type="text" id="regionSearch" class="form-control" placeholder="(free-form text)"
-                 :value="criteria.region" @input="updateValue('region', $event.target.value)">
-          <label for="regionSearch" class="jjj-label">Region</label>
-        </div>
-        <div class="form-text">(free-form text)</div>
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-offset-md-2 col-lg-3 col-offset-lg-0">
-        <label class="jjj-label">Remote Work Opportunity?</label><br>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteNull" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === ''" @click="updateValue('remoteWork', '')">
-          <label for="remoteNull" class="form-check-label">No Selection</label>
-        </div>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteYes" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === 'yes'" @click="updateValue('remoteWork', 'yes')">
-          <label for="remoteYes" class="form-check-label">Yes</label>
-        </div>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteNo" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === 'no'" @click="updateValue('remoteWork', 'no')">
-          <label for="remoteNo" class="form-check-label">No</label>
-        </div>
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-lg-3">
-        <div class="form-floating">
-          <input type="text" id="textSearch" class="form-control" placeholder="(free-form text)"
-                 :value="criteria.text" @input="updateValue('text', $event.target.value)">
-          <label for="textSearch" class="jjj-label">Job Listing Text</label>
-        </div>
-        <div class="form-text">(free-form text)</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col col-xs-12">
-        <br>
-        <button type="submit" class="btn btn-outline-primary" @click.prevent="$emit('search')">Search</button>
-      </div>
-    </div>
-  </form>
+<template lang="pug">
+form.container
+  .row
+    .col.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
+      .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
+      label.jjj-label Remote Work Opportunity?
+      br
+      .form-check.form-check-inline
+        input.form-check-input(type='radio' id='remoteNull' name='remoteWork' :checked="criteria.remoteWork === ''"
+                               @click="updateValue('remoteWork', '')")
+        label.form-check-label(for='remoteNull') No Selection
+      .form-check.form-check-inline
+        input.form-check-input(type='radio' id='remoteYes' name='remoteWork' :checked="criteria.remoteWork === 'yes'"
+                               @click="updateValue('remoteWork', 'yes')")
+        label.form-check-label(for='remoteYes') Yes
+      .form-check.form-check-inline
+        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
+      .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
+    br
+    button.btn.btn-outline-primary(type='submit' @click.prevent="$emit('search')") Search
 </template>
 
 <script lang="ts">
@@ -68,12 +54,16 @@ export default defineComponent({
     /** The initial search criteria passed; this is what we'll update and emit when data changes */
     const criteria : Ref<ListingSearch> = ref({ ...props.modelValue as ListingSearch })
 
+    /** Emit a value update */
+    const updateValue = (key : string, value : string) => {
+      criteria.value = { ...criteria.value, [key]: value }
+      emit('update:modelValue', criteria.value)
+    }
+
     return {
       criteria,
-      updateValue: (key : string, value : string) => {
-        criteria.value = { ...criteria.value, [key]: value }
-        emit('update:modelValue', criteria.value)
-      }
+      updateContinent: (c : string) => updateValue('continentId', c),
+      updateValue
     }
   }
 })
diff --git a/src/JobsJobsJobs/App/src/components/LoadData.vue b/src/JobsJobsJobs/App/src/components/LoadData.vue
index 781d2cd..a2e3574 100644
--- a/src/JobsJobsJobs/App/src/components/LoadData.vue
+++ b/src/JobsJobsJobs/App/src/components/LoadData.vue
@@ -1,8 +1,7 @@
-<template>
-  <div v-if="loading">Loading&hellip;</div>
-  <error-list v-else :errors="errors">
-    <slot></slot>
-  </error-list>
+<template lang="pug">
+div(v-if='loading') Loading&hellip;
+error-list(v-else :errors='errors')
+  slot
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/MarkdownEditor.vue b/src/JobsJobsJobs/App/src/components/MarkdownEditor.vue
index fb095a1..29bd9c5 100644
--- a/src/JobsJobsJobs/App/src/components/MarkdownEditor.vue
+++ b/src/JobsJobsJobs/App/src/components/MarkdownEditor.vue
@@ -1,18 +1,15 @@
-<template>
-  <div class="col-12">
-    <nav class="nav nav-pills pb-1">
-      <button :class="sourceClass" @click.prevent="showMarkdown">Markdown</button> &nbsp;
-      <button :class="previewClass" @click.prevent="showPreview">Preview</button>
-    </nav>
-    <section v-if="preview" class="preview" v-html="previewHtml">
-    </section>
-    <div v-else class="form-floating">
-      <textarea :id="id" :class="{ 'form-control': true, 'md-edit': true, 'is-invalid': isInvalid }" rows="10"
-                v-text="text" @input="$emit('update:text', $event.target.value)"></textarea>
-      <div class="invalid-feedback">Please enter some text for {{label}}</div>
-      <label :for="id">{{label}}</label>
-    </div>
-  </div>
+<template lang="pug">
+.col-12
+  nav.nav.nav-pills.pb-1
+    button(:class='sourceClass' @click.prevent='showMarkdown') Markdown
+    | &nbsp;
+    button(:class='previewClass' @click.prevent='showPreview') Preview
+  section.preview(v-if='preview' v-html='previewHtml')
+  .form-floating(v-else)
+    textarea(:id='id' :class="{ 'form-control': true, 'md-edit': true, 'is-invalid': isInvalid }" rows='10'
+             v-text='text' @input="$emit('update:text', $event.target.value)")
+    .invalid-feedback Please enter some text for {{label}}
+    label(:for='id') {{label}}
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/MaybeSave.vue b/src/JobsJobsJobs/App/src/components/MaybeSave.vue
index 91991d6..495c1d1 100644
--- a/src/JobsJobsJobs/App/src/components/MaybeSave.vue
+++ b/src/JobsJobsJobs/App/src/components/MaybeSave.vue
@@ -1,21 +1,11 @@
-<template>
-  <div class="modal fade" id="maybeSaveModal" tabindex="-1" aria-labelledby="maybeSaveLabel" aria-hidden="true">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="maybeSaveLabel">Unsaved Changes</h5>
-        </div>
-        <div class="modal-body">
-          You have modified the data on this page since it was last saved. What would you like to do?
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" @click.prevent="onStay">Stay on This Page</button>
-          <button type="button" class="btn btn-primary" @click.prevent="onSave">Save Changes</button>
-          <button type="button" class="btn btn-danger" @click.prevent="onDiscard">Discard Changes</button>
-        </div>
-      </div>
-    </div>
-  </div>
+<template lang="pug">
+.modal.fade(id='maybeSaveModal' tabindex='-1' aria-labelledby='maybeSaveLabel' aria-hidden='true'): .modal-dialog: .modal-content
+  .modal-header: h5.modal-title(id='maybeSaveLabel') Unsaved Changes
+  .modal-body You have modified the data on this page since it was last saved. What would you like to do?
+  .modal-footer
+    button.btn.btn-secondary(type='button' @click.prevent='onStay') Stay on This Page
+    button.btn.btn-primary(type='button' @click.prevent='onSave') Save Changes
+    button.btn.btn-danger(type='button' @click.prevent='onDiscard') Discard Changes
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/PageTitle.vue b/src/JobsJobsJobs/App/src/components/PageTitle.vue
index 3fd419a..86cc368 100644
--- a/src/JobsJobsJobs/App/src/components/PageTitle.vue
+++ b/src/JobsJobsJobs/App/src/components/PageTitle.vue
@@ -1,5 +1,5 @@
-<template>
-  <p v-if="false"></p>
+<template lang="pug">
+p(v-if='false')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/layout/AppFooter.vue b/src/JobsJobsJobs/App/src/components/layout/AppFooter.vue
index f55a5c1..82f5565 100644
--- a/src/JobsJobsJobs/App/src/components/layout/AppFooter.vue
+++ b/src/JobsJobsJobs/App/src/components/layout/AppFooter.vue
@@ -1,10 +1,7 @@
-<template>
-  <footer>
-    <p class="text-muted">
-      Jobs, Jobs, Jobs v{{appVersion}} &bull; <router-link to="/privacy-policy">Privacy Policy</router-link>
-      &bull; <router-link to="/terms-of-service">Terms of Service</router-link>
-    </p>
-  </footer>
+<template lang="pug">
+footer: p.text-muted.
+  Jobs, Jobs, Jobs v{{appVersion}} &bull; #[router-link(to='/privacy-policy') Privacy Policy]
+  &bull; #[router-link(to='/terms-of-service') Terms of Service]
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/layout/AppNav.vue b/src/JobsJobsJobs/App/src/components/layout/AppNav.vue
index 439e910..c820a32 100644
--- a/src/JobsJobsJobs/App/src/components/layout/AppNav.vue
+++ b/src/JobsJobsJobs/App/src/components/layout/AppNav.vue
@@ -1,29 +1,23 @@
-<template>
-  <aside class="collapse show p-3">
-    <p class="home-link pb-3"><router-link to="/">Jobs, Jobs, Jobs</router-link></p>
-    <p>&nbsp;</p>
-    <nav>
-      <template v-if="isLoggedOn">
-        <router-link to="/citizen/dashboard"><icon icon="view-dashboard-variant" />&nbsp; Dashboard</router-link>
-        <router-link to="/help-wanted">
-          <icon icon="newspaper-variant-multiple-outline" />&nbsp; Help Wanted!
-        </router-link>
-        <router-link to="/profile/search"><icon icon="view-list-outline" />&nbsp; Employment Profiles</router-link>
-        <router-link to="/success-story/list"><icon icon="thumb-up" />&nbsp; Success Stories</router-link>
-        <div class="separator"></div>
-        <router-link to="/listings/mine"><icon icon="sign-text" />&nbsp; My Job Listings</router-link>
-        <router-link to="/citizen/profile"><icon icon="pencil" />&nbsp; My Employment Profile</router-link>
-        <div class="separator"></div>
-        <router-link to="/citizen/log-off"><icon icon="logout-variant" />&nbsp; Log Off</router-link>
-      </template>
-      <template v-else>
-        <router-link to="/"><icon icon="home" />&nbsp; Home</router-link>
-        <router-link to="/profile/seeking"><icon icon="view-list-outline" />&nbsp; Job Seekers</router-link>
-        <router-link to="/citizen/log-on"><icon icon="login-variant" />&nbsp; Log On</router-link>
-      </template>
-      <router-link to="/how-it-works"><icon icon="help-circle-outline" />&nbsp; How It Works</router-link>
-    </nav>
-  </aside>
+<template lang="pug">
+aside.collapse.show.p-3
+  p.home-link.pb-3: router-link(to='/') Jobs, Jobs, Jobs
+  p &nbsp;
+  nav
+    template(v-if='isLoggedOn')
+      router-link(to='/citizen/dashboard') #[icon(icon='view-dashboard-variant')]&nbsp; Dashboard
+      router-link(to='/help-wanted') #[icon(icon='newspaper-variant-multiple-outline')]&nbsp; Help Wanted!
+      router-link(to='/profile/search') #[icon(icon='view-list-outline')]&nbsp; Employment Profiles
+      router-link(to='/success-story/list') #[icon(icon='thumb-up')]&nbsp; Success Stories
+      .separator
+      router-link(to='/listings/mine') #[icon(icon='sign-text')]&nbsp; My Job Listings
+      router-link(to='/citizen/profile') #[icon(icon='pencil')]&nbsp; My Employment Profile
+      .separator
+      router-link(to='/citizen/log-off') #[icon(icon='logout-variant')]&nbsp; Log Off
+    template(v-else)
+      router-link(to='/') #[icon(icon='home')]&nbsp; Home
+      router-link(to='/profile/seeking') #[icon(icon='view-list-outline')]&nbsp; Job Seekers
+      router-link(to='/citizen/log-on') #[icon(icon='login-variant')]&nbsp; Log On
+    router-link(to='/how-it-works') #[icon(icon='help-circle-outline')]&nbsp; How It Works
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/layout/AppToaster.vue b/src/JobsJobsJobs/App/src/components/layout/AppToaster.vue
index 5087233..3a42c6b 100644
--- a/src/JobsJobsJobs/App/src/components/layout/AppToaster.vue
+++ b/src/JobsJobsJobs/App/src/components/layout/AppToaster.vue
@@ -1,7 +1,6 @@
-<template>
-  <div aria-live="polite" aria-atomic="true" id="toastHost">
-    <div class="toast-container position-absolute p-3 bottom-0 start-50 translate-middle-x" id="toasts"></div>
-  </div>
+<template lang="pug">
+div(aria-live='polite' aria-atomic='true' id='toastHost')
+  .toast-container.position-absolute.p-3.bottom-0.start-50.translate-middle-x(id='toasts')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/layout/TitleBar.vue b/src/JobsJobsJobs/App/src/components/layout/TitleBar.vue
index b1eda59..93f9773 100644
--- a/src/JobsJobsJobs/App/src/components/layout/TitleBar.vue
+++ b/src/JobsJobsJobs/App/src/components/layout/TitleBar.vue
@@ -1,10 +1,8 @@
-<template>
-  <nav class="navbar navbar-light bg-light">
-    <span></span>
-    <span class="navbar-text">
-      (...and Jobs &ndash; <audio-clip clip="pelosi-jobs">Let's Vote for Jobs!</audio-clip>)
-    </span>
-  </nav>
+<template lang="pug">
+nav.navbar.navbar-light.bg-light
+  span &nbsp;
+  span.navbar-text.
+    (...and Jobs &ndash; #[audio-clip(clip='pelosi-jobs') Let's Vote for Jobs!])
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/components/profile/PublicSearchForm.vue b/src/JobsJobsJobs/App/src/components/profile/PublicSearchForm.vue
index 7719ca8..854c1ba 100644
--- a/src/JobsJobsJobs/App/src/components/profile/PublicSearchForm.vue
+++ b/src/JobsJobsJobs/App/src/components/profile/PublicSearchForm.vue
@@ -1,52 +1,38 @@
-<template>
-  <form class="container">
-    <div class="row">
-      <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
-        <continent-list v-model="criteria.continentId" topLabel="Any"
-                        @update:modelValue="(c) => updateValue('continentId', c)" />
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
-        <div class="form-floating">
-          <input type="text" id="region" class="form-control form-control-sm" placeholder="(free-form text)"
-                 :value="criteria.region" @input="updateValue('region', $event.target.value)">
-          <label for="region">Region</label>
-        </div>
-        <div class="form-text">(free-form text)</div>
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-offset-md-2 col-lg-3 col-offset-lg-0">
-        <label class="jjj-label">Seeking Remote Work?</label><br>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteNull" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === ''" @click="updateValue('remoteWork', '')">
-          <label for="remoteNull" class="form-check-label">No Selection</label>
-        </div>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteYes" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === 'yes'" @click="updateValue('remoteWork', 'yes')">
-          <label for="remoteYes" class="form-check-label">Yes</label>
-        </div>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteNo" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === 'no'" @click="updateValue('remoteWork', 'no')">
-          <label for="remoteNo" class="form-check-label">No</label>
-        </div>
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-lg-3">
-        <div class="form-floating">
-          <input type="text" id="skillSearch" class="form-control form-control-sm" placeholder="(free-form text)"
-                 :value="criteria.skill" @input="updateValue('skill', $event.target.value)">
-          <label for="skillSearch">Skill</label>
-        </div>
-        <div class="form-text">(free-form text)</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col col-xs-12">
-        <br>
-        <button type="submit" class="btn btn-outline-primary" @click.prevent="$emit('search')">Search</button>
-      </div>
-    </div>
-  </form>
+<template lang="pug">
+form.container
+  .row
+    .col.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
+      .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
+      label.jjj-label Seeking Remote Work?
+      br
+      .form-check.form-check-inline
+        input.form-check-input(type='radio' id='remoteNull' name='remoteWork' :checked="criteria.remoteWork === ''"
+                               @click="updateValue('remoteWork', '')")
+        label.form-check-label(for='remoteNull') No Selection
+      .form-check.form-check-inline
+        input.form-check-input(type='radio' id='remoteYes' name='remoteWork' :checked="criteria.remoteWork === 'yes'"
+                               @click="updateValue('remoteWork', 'yes')")
+        label.form-check-label(for='remoteYes') Yes
+      .form-check.form-check-inline
+        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
+      .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
+    br
+    button.btn.btn-outline-primary(type='submit' @click.prevent="$emit('search')") Search
 </template>
 
 <script lang="ts">
@@ -68,12 +54,16 @@ export default defineComponent({
     /** The initial search criteria passed; this is what we'll update and emit when data changes */
     const criteria : Ref<PublicSearch> = ref({ ...props.modelValue as PublicSearch })
 
+    /** Emit a value update */
+    const updateValue = (key : string, value : string) => {
+      criteria.value = { ...criteria.value, [key]: value }
+      emit('update:modelValue', criteria.value)
+    }
+
     return {
       criteria,
-      updateValue: (key : string, value : string) => {
-        criteria.value = { ...criteria.value, [key]: value }
-        emit('update:modelValue', criteria.value)
-      }
+      updateContinent: (c : string) => updateValue('continentId', c),
+      updateValue
     }
   }
 })
diff --git a/src/JobsJobsJobs/App/src/components/profile/SearchForm.vue b/src/JobsJobsJobs/App/src/components/profile/SearchForm.vue
index 7605d9e..b143ba2 100644
--- a/src/JobsJobsJobs/App/src/components/profile/SearchForm.vue
+++ b/src/JobsJobsJobs/App/src/components/profile/SearchForm.vue
@@ -1,52 +1,38 @@
-<template>
-  <form class="container">
-    <div class="row">
-      <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
-        <continent-list v-model="criteria.continentId" topLabel="Any"
-                        @update:modelValue="(c) => updateValue('continentId', c)" />
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-offset-md-2 col-lg-3 col-offset-lg-0">
-        <label class="jjj-label">Seeking Remote Work?</label><br>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteNull" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === ''" @click="updateValue('remoteWork', '')">
-          <label for="remoteNull" class="form-check-label">No Selection</label>
-        </div>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteYes" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === 'yes'" @click="updateValue('remoteWork', 'yes')">
-          <label for="remoteYes" class="form-check-label">Yes</label>
-        </div>
-        <div class="form-check form-check-inline">
-          <input type="radio" id="remoteNo" name="remoteWork" class="form-check-input"
-                  :checked="criteria.remoteWork === 'no'" @click="updateValue('remoteWork', 'no')">
-          <label for="remoteNo" class="form-check-label">No</label>
-        </div>
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-lg-3">
-        <div class="form-floating">
-          <input type="text" id="skillSearch" class="form-control" placeholder="(free-form text)"
-                 :value="criteria.skill" @input="updateValue('skill', $event.target.value)">
-          <label for="skillSearch" class="jjj-label">Skill</label>
-        </div>
-        <div class="form-text">(free-form text)</div>
-      </div>
-      <div class="col col-xs-12 col-sm-6 col-lg-3">
-        <div class="form-floating">
-          <input type="text" id="bioSearch" class="form-control" placeholder="(free-form text)"
-                 :value="criteria.bioExperience" @input="updateValue('bioExperience', $event.target.value)">
-          <label for="bioSearch" class="jjj-label">Bio / Experience</label>
-        </div>
-        <div class="form-text">(free-form text)</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col col-xs-12">
-        <br>
-        <button type="submit" class="btn btn-outline-primary" @click.prevent="$emit('search')">Search</button>
-      </div>
-    </div>
-  </form>
+<template lang="pug">
+form.container
+  .row
+    .col.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
+      label.jjj-label Seeking Remote Work?
+      br
+      .form-check.form-check-inline
+        input.form-check-input(type='radio' id='remoteNull' name='remoteWork' :checked="criteria.remoteWork === ''"
+                               @click="updateValue('remoteWork', '')")
+        label.form-check-label(for='remoteNull') No Selection
+      .form-check.form-check-inline
+        input.form-check-input(type='radio' id='remoteYes' name='remoteWork' :checked="criteria.remoteWork === 'yes'"
+                               @click="updateValue('remoteWork', 'yes')")
+        label.form-check-label(for='remoteYes') Yes
+      .form-check.form-check-inline
+        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
+      .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
+      .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
+    br
+    button.btn.btn-outline-primary(type='submit' @click.prevent="$emit('search')") Search
 </template>
 
 <script lang="ts">
@@ -68,12 +54,16 @@ export default defineComponent({
     /** The initial search criteria passed; this is what we'll update and emit when data changes */
     const criteria : Ref<ProfileSearch> = ref({ ...props.modelValue as ProfileSearch })
 
+    /** Emit a value update */
+    const updateValue = (key : string, value : string) => {
+      criteria.value = { ...criteria.value, [key]: value }
+      emit('update:modelValue', criteria.value)
+    }
+
     return {
       criteria,
-      updateValue: (key : string, value : string) => {
-        criteria.value = { ...criteria.value, [key]: value }
-        emit('update:modelValue', criteria.value)
-      }
+      updateContinent: (c : string) => updateValue('continentId', c),
+      updateValue
     }
   }
 })
diff --git a/src/JobsJobsJobs/App/src/components/profile/SkillEdit.vue b/src/JobsJobsJobs/App/src/components/profile/SkillEdit.vue
index 6015e7d..3130d4f 100644
--- a/src/JobsJobsJobs/App/src/components/profile/SkillEdit.vue
+++ b/src/JobsJobsJobs/App/src/components/profile/SkillEdit.vue
@@ -1,29 +1,21 @@
-<template>
-  <div class="row pb-3">
-    <div class="col col-xs-2 col-md-1 align-self-center">
-      <button class="btn btn-sm btn-outline-danger rounded-pill" title="Delete" @click.prevent="$emit('remove')">
-        &nbsp;&minus;&nbsp;
-      </button>
-    </div>
-    <div class="col col-xs-10 col-md-6">
-      <div class="form-floating">
-        <input type="text" :id="`skillDesc${skill.id}`" class="form-control" maxlength="100"
-               placeholder="A skill (language, design technique, process, etc.)"
-               :value="skill.description" @input="updateValue('description', $event.target.value)">
-        <label :for="`skillDesc${skill.id}`" class="jjj-label">Skill</label>
-      </div>
-      <div class="form-text">A skill (language, design technique, process, etc.)</div>
-    </div>
-    <div class="col col-xs-12 col-md-5">
-      <div class="form-floating">
-        <input type="text" :id="`skillNotes${skill.id}`" class="form-control" maxlength="100"
-               placeholder="A further description of the skill (100 characters max)"
-               :value="skill.notes" @input="updateValue('notes', $event.target.value)">
-        <label :for="`skillNotes${skill.id}`" class="jjj-label">Notes</label>
-      </div>
-      <div class="form-text">A further description of the skill (100 characters max)</div>
-    </div>
-  </div>
+<template lang="pug">
+.row.pb-3
+  .col.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
+    .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
+    .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'
+                         @input="updateValue('notes', $event.target.value)")
+      label.jjj-label(:for='`skillNotes${skill.id}`') Notes
+    .form-text A further description of the skill (100 characters max)
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/Home.vue b/src/JobsJobsJobs/App/src/views/Home.vue
index e30b44e..2528d0c 100644
--- a/src/JobsJobsJobs/App/src/views/Home.vue
+++ b/src/JobsJobsJobs/App/src/views/Home.vue
@@ -1,18 +1,15 @@
-<template>
-  <article>
-    <page-title title="Welcome!" />
-    <p>&nbsp;</p>
-    <p>
-      Welcome to Jobs, Jobs, Jobs (AKA No Agenda Careers), where citizens of Gitmo Nation can assist one another in
-      finding employment. This will enable them to continue providing value-for-value to Adam and John, as they continue
-      their work deconstructing the misinformation that passes for news on a day-to-day basis.
-    </p>
-    <p>
-      Do you not understand the terms in the paragraph above? No worries; just head over to
-      <a href="https://noagendashow.net" target="_blank">The Best Podcast in the Universe</a>
-      <em><audio-clip clip="thats-true"> (that&rsquo;s true!)</audio-clip></em> and find out what you&rsquo;re missing.
-    </p>
-  </article>
+<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
+    finding employment. This will enable them to continue providing value-for-value to Adam and John, as they continue
+    their work deconstructing the misinformation that passes for news on a day-to-day basis.
+  p.
+    Do you not understand the terms in the paragraph above? No worries; just head over to
+    #[a(href='https://noagendashow.net' target='_blank') The Best Podcast in the Universe]
+    #[em &nbsp;#[audio-clip(clip='thats-true') (that&rsquo;s true!)]] and find out what you&rsquo;re missing.
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/HowItWorks.vue b/src/JobsJobsJobs/App/src/views/HowItWorks.vue
index 9116233..4c61e53 100644
--- a/src/JobsJobsJobs/App/src/views/HowItWorks.vue
+++ b/src/JobsJobsJobs/App/src/views/HowItWorks.vue
@@ -1,83 +1,69 @@
-<template>
-  <article>
-    <page-title title="How It Works" />
-    <h3>How It Works</h3>
+<template lang="pug">
+article
+  page-title(title='How It Works')
+  h3 How It Works
+  h4 Completing Your Profile
+  ul
+    li.
+      The &ldquo;View Your Employment Profile&rdquo; link (which you&rdquo;ll see on this page, once your profile is
+      established) shows your profile the way all other validated users will be able to see it. While this site does not
+      perform communication with others over No Agenda Social, the name on employment profiles is a link to that
+      user&rsquo;s profile; from there, others can communicate further with you using the tools Mastodon provides.
+    li.
+      The &ldquo;Professional Biography&rdquo; and &ldquo;Experience&rdquo; sections support Markdown, a plain-text way
+      to specify formatting quite similar to that provided by word processors. The
+      #[a(href='https://daringfireball.net/projects/markdown/' target='_blank') original page] for the project is a
+      good overview of its capabilities, and the pages at
+      #[a(href='https://www.markdownguide.org/' target='_blank') Markdown Guide] give in-depth lessons to make the most
+      of this language. The version of Markdown employed here supports many popular extensions, include smart quotes
+      (turning "a quote" into &ldquo;a quote&rdquo;), tables, super/subscripts, and more.
+    li.
+      Skills are optional, but they are the place to record skills you have. Along with the skill, there is a
+      &ldquo;Notes&rdquo; section, which can be used to indicate the time you&rsquo;ve practiced a particular skill, the
+      mastery you have of that skill, etc. It is free-form text, so it is all up to you how you utilize the field.
+    li.
+      The &ldquo;Experience&rdquo; field is intended to capture a chronological or topical employment history; with this
+      &ldquo;quick-n-dirty&rdquo; implementation, this Markdown box can be used to capture that information however you
+      would like it presented to fellow citizens.
+    li.
+      If you check the &ldquo;Allow my profile to be searched publicly&rdquo; checkbox, #[strong and] you are seeking
+      employment, your continent, region, and skills fields will be searchable and displayed to public users of the
+      site. They will not be tied to your No Agenda Social handle or real name; they are there to let people peek
+      behind the curtain a bit, and hopefully inspire them to join us.
 
-    <h4>Completing Your Profile</h4>
-    <ul>
-      <li>
-        The &ldquo;View Your Employment Profile&rdquo; link (which you&rdquo;ll see on this page, once your profile is
-        established) shows your profile the way all other validated users will be able to see it. While this site does
-        not perform communication with others over No Agenda Social, the name on employment profiles is a link to that
-        user&rsquo;s profile; from there, others can communicate further with you using the tools Mastodon provides.
-      </li>
-      <li>
-        The &ldquo;Professional Biography&rdquo; and &ldquo;Experience&rdquo; sections support Markdown, a plain-text
-        way to specify formatting quite similar to that provided by word processors. The
-        <a href="https://daringfireball.net/projects/markdown/" target="_blank">original page</a> for the project is a
-        good overview of its capabilities, and the pages at
-        <a href="https://www.markdownguide.org/" target="_blank">Markdown Guide</a> give in-depth lessons to make the
-        most of this language. The version of Markdown employed here supports many popular extensions, include smart
-        quotes (turning "a quote" into &ldquo;a quote&rdquo;), tables, super/subscripts, and more.
-      </li>
-      <li>
-        Skills are optional, but they are the place to record skills you have. Along with the skill, there is a
-        &ldquo;Notes&rdquo; section, which can be used to indicate the time you&rsquo;ve practiced a particular skill,
-        the mastery you have of that skill, etc. It is free-form text, so it is all up to you how you utilize the field.
-      </li>
-      <li>
-        The &ldquo;Experience&rdquo; field is intended to capture a chronological or topical employment history; with
-        this &ldquo;quick-n-dirty&rdquo; implementation, this Markdown box can be used to capture that information
-        however you would like it presented to fellow citizens.
-      </li>
-      <li>
-        If you check the &ldquo;Allow my profile to be searched publicly&rdquo; checkbox, <strong>and</strong> you are
-        seeking employment, your continent, region, and skills fields will be searchable and displayed to public users
-        of the site. They will not be tied to your No Agenda Social handle or real name; they are there to let people
-        peek behind the curtain a bit, and hopefully inspire them to join us.
-      </li>
-    </ul>
+  h4 Searching Profiles
+  p.
+    The &ldquo;View Profiles&rdquo; link at the side allows you to search for profiles by continent, the citizen&rsquo;s
+    desire for remote work, a skill, or any text in their professional biography and experience. If you find someone
+    with whom you&rsquo;d like to discuss potential opportunities, the name at the top of the profile links to their No
+    Agenda Social account, where you can use its features to get in touch.
 
-    <h4>Searching Profiles</h4>
-    <p>
-      The &ldquo;View Profiles&rdquo; link at the side allows you to search for profiles by continent, the
-      citizen&rsquo;s desire for remote work, a skill, or any text in their professional biography and experience. If
-      you find someone with whom you&rsquo;d like to discuss potential opportunities, the name at the top of the profile
-      links to their No Agenda Social account, where you can use its features to get in touch.
-    </p>
+  h4 Finding Employment
+  p.
+    If your profile indicates that you are seeking employment, and you secure employment, that is something you will
+    want to update (and &ndash; congratulations!). From both the Dashboard and the Edit Profile pages, you will see a
+    link that encourages you to tell us about it. Click either of those links, and you will be brought to a page that
+    allows you to indicate whether your employment actually came from someone finding your profile on Jobs, Jobs, Jobs,
+    and gives you a place to write about the experience. These stories are only viewable by validated users, so feel
+    free to use as much (or as little) identifying information as you&rsquo;d like. You can also submit this page with
+    all the fields blank; in that case, your &ldquo;Seeking Employment&rdquo; flag is cleared, and the
+    &ldquo;story&rdquo; is recorded.
+  p.
+    As a validated user, you can also view others success stories. Clicking &ldquo;Success Stories&rdquo; in the sidebar
+    will display a list of all the stories that have been recorded. If there is a story to be read, there will be a link
+    to read it; if you submitted the story, there will also be an &ldquo;Edit&rdquo; link.
 
-    <h4>Finding Employment</h4>
-    <p>
-      If your profile indicates that you are seeking employment, and you secure employment, that is something you will
-      want to update (and &ndash; congratulations!). From both the Dashboard and the Edit Profile pages, you will see a
-      link that encourages you to tell us about it. Click either of those links, and you will be brought to a page that
-      allows you to indicate whether your employment actually came from someone finding your profile on Jobs, Jobs,
-      Jobs, and gives you a place to write about the experience. These stories are only viewable by validated users, so
-      feel free to use as much (or as little) identifying information as you&rsquo;d like. You can also submit this page
-      with all the fields blank; in that case, your &ldquo;Seeking Employment&rdquo; flag is cleared, and the
-      &ldquo;story&rdquo; is recorded.
-    </p>
-    <p>
-      As a validated user, you can also view others success stories. Clicking &ldquo;Success Stories&rdquo; in the
-      sidebar will display a list of all the stories that have been recorded. If there is a story to be read, there will
-      be a link to read it; if you submitted the story, there will also be an &ldquo;Edit&rdquo; link.
-    </p>
+  h4 Publicly Available Information
+  p.
+    The &ldquo;Job Seekers&rdquo; page for profile information will allow users to search for and display the continent,
+    region, skills, and notes of users who are seeking employment #[strong and] have opted in to their information being
+    publicly searchable. If you are a public user, this information is always the latest we have; check out the link at
+    the top of the search results for how you can learn more about these fine human resources!
 
-    <h4>Publicly Available Information</h4>
-    <p>
-      The &ldquo;Job Seekers&rdquo; page for profile information will allow users to search for and display the
-      continent, region, skills, and notes of users who are seeking employment <strong>and</strong> have opted in to
-      their information being publicly searchable. If you are a public user, this information is always the latest we
-      have; check out the link at the top of the search results for how you can learn more about these fine human
-      resources!
-    </p>
-
-    <h4>Help / Suggestions</h4>
-    <p>
-      This is open-source software
-      <a href="https://github.com/bit-badger/jobs-jobs-jobs" _target="_blank">developed on Github</a>; feel free to
-      <a href="https://github.com/bit-badger/jobs-jobs-jobs/issues" target="_blank">create an issue there</a>, or look
-      up @danieljsummers on No Agenda Social.
-    </p>
-  </article>
+  h4 Help / Suggestions
+  p.
+    This is open-source software
+    #[a(href='https://github.com/bit-badger/jobs-jobs-jobs' _target='_blank') developed on Github]; feel free to
+    #[a(href='https://github.com/bit-badger/jobs-jobs-jobs/issues' target='_blank') create an issue there], or look up
+    @danieljsummers on No Agenda Social.
 </template>
diff --git a/src/JobsJobsJobs/App/src/views/PrivacyPolicy.vue b/src/JobsJobsJobs/App/src/views/PrivacyPolicy.vue
index ccd45b0..376ce2e 100644
--- a/src/JobsJobsJobs/App/src/views/PrivacyPolicy.vue
+++ b/src/JobsJobsJobs/App/src/views/PrivacyPolicy.vue
@@ -1,414 +1,338 @@
-<template>
-  <article>
-    <page-title title="Privacy Policy" />
-    <h3>Privacy Policy</h3>
-    <p><em>(as of February 6<sup>th</sup>, 2021)</em></p>
+<template lang="pug">
+article
+  page-title(title='Privacy Policy')
+  h3 Privacy Policy
+  p: em (as of February 6#[sup th], 2021)
 
-    <p>
-      {{name}} (“we,” “our,” or “us”) is committed to protecting your privacy. This Privacy Policy explains how your
-      personal information is collected, used, and disclosed by {{name}}.
-    </p>
-    <p>
-      This Privacy Policy applies to our website, and its associated subdomains (collectively, our “Service”) alongside
-      our application, {{name}}. By accessing or using our Service, you signify that you have read, understood, and
-      agree to our collection, storage, use, and disclosure of your personal information as described in this Privacy
-      Policy and our Terms of Service.
-    </p>
+  p.
+    {{name}} (“we,” “our,” or “us”) is committed to protecting your privacy. This Privacy Policy explains how your
+    personal information is collected, used, and disclosed by {{name}}.
+  p.
+    This Privacy Policy applies to our website, and its associated subdomains (collectively, our “Service”) alongside
+    our application, {{name}}. By accessing or using our Service, you signify that you have read, understood, and agree
+    to our collection, storage, use, and disclosure of your personal information as described in this Privacy Policy and
+    our Terms of Service.
 
-    <h4>Definitions and key terms</h4>
-    <p>
-      To help explain things as clearly as possible in this Privacy Policy, every time any of these terms are
-      referenced, are strictly defined as:
-    </p>
+  h4 Definitions and key terms
+  p.
+    To help explain things as clearly as possible in this Privacy Policy, every time any of these terms are referenced,
+    are strictly defined as:
+  ul
+    li.
+      Cookie: small amount of data generated by a website and saved by your web browser. It is used to identify your
+      browser, provide analytics, remember information about you such as your language preference or login information.
+    li.
+      Company: when this policy mentions “Company,” “we,” “us,” or “our,” it refers to {{name}}, that is responsible for
+      your information under this Privacy Policy.
+    li Country: where {{name}} or the owners/founders of {{name}} are based, in this case is US.
+    li.
+      Customer: refers to the company, organization or person that signs up to use the {{name}} Service to manage the
+      relationships with your consumers or service users.
+    li.
+      Device: any internet connected device such as a phone, tablet, computer or any other device that can be used to
+      visit {{name}} and use the services.
+    li.
+      IP address: Every device connected to the Internet is assigned a number known as an Internet protocol (IP)
+      address. These numbers are usually assigned in geographic blocks. An IP address can often be used to identify the
+      location from which a device is connecting to the Internet.
+    li.
+      Personnel: refers to those individuals who are employed by {{name}} or are under contract to perform a service on
+      behalf of one of the parties.
+    li.
+      Personal Data: any information that directly, indirectly, or in connection with other information — including a
+      personal identification number — allows for the identification or identifiability of a natural person.
+    li.
+      Service: refers to the service provided by {{name}} as described in the relative terms (if available) and on this
+      platform.
+    li.
+      Third-party service: refers to advertisers, contest sponsors, promotional and marketing partners, and others who
+      provide our content or whose products or services we think may interest you.
+    li.
+      Website: {{name}}&rsquo;s site, which can be accessed via this URL:
+      #[router-link(to='/') https://noagendacareers.com/]
+    li You: a person or entity that is registered with {{name}} to use the Services.
 
-    <ul>
-      <li>
-        Cookie: small amount of data generated by a website and saved by your web browser. It is used to identify your
-        browser, provide analytics, remember information about you such as your language preference or login
-        information.
-      </li>
-      <li>
-        Company: when this policy mentions “Company,” “we,” “us,” or “our,” it refers to {{name}}, that is responsible
-        for your information under this Privacy Policy.
-      </li>
-      <li>Country: where {{name}} or the owners/founders of {{name}} are based, in this case is US.</li>
-      <li>
-        Customer: refers to the company, organization or person that signs up to use the {{name}} Service to manage the
-        relationships with your consumers or service users.
-      </li>
-      <li>
-        Device: any internet connected device such as a phone, tablet, computer or any other device that can be used to
-        visit {{name}} and use the services.
-      </li>
-      <li>
-        IP address: Every device connected to the Internet is assigned a number known as an Internet protocol (IP)
-        address. These numbers are usually assigned in geographic blocks. An IP address can often be used to identify
-        the location from which a device is connecting to the Internet.
-      </li>
-      <li>
-        Personnel: refers to those individuals who are employed by {{name}} or are under contract to perform a service
-        on behalf of one of the parties.
-      </li>
-      <li>
-        Personal Data: any information that directly, indirectly, or in connection with other information — including a
-        personal identification number — allows for the identification or identifiability of a natural person.
-      </li>
-      <li>
-        Service: refers to the service provided by {{name}} as described in the relative terms (if available) and on
-        this platform.
-      </li>
-      <li>
-        Third-party service: refers to advertisers, contest sponsors, promotional and marketing partners, and others who
-        provide our content or whose products or services we think may interest you.
-      </li>
-      <li>
-        Website: {{name}}&rsquo;s site, which can be accessed via this URL:
-        <router-link to="/">https://noagendacareers.com/</router-link>
-      </li>
-      <li>You: a person or entity that is registered with {{name}} to use the Services.</li>
-    </ul>
+  h4 What Information Do We Collect?
+  p We collect information from you when you visit our website, register on our site, or fill out a form.
+  ul
+    li Name / Username
+    li Coarse Geographic Location
+    li Employment History
+    li No Agenda Social Account Name / Profile
 
-    <h4>What Information Do We Collect?</h4>
-    <p>
-      We collect information from you when you visit our website, register on our site, or fill out a form.
-    </p>
+  h4 How Do We Use The Information We Collect?
+  p Any of the information we collect from you may be used in one of the following ways:
+  ul
+    li To personalize your experience (your information helps us to better respond to your individual needs)
+    li.
+      To improve our website (we continually strive to improve our website offerings based on the information and
+      feedback we receive from you)
+    li.
+      To improve customer service (your information helps us to more effectively respond to your customer service
+      requests and support needs)
 
-    <ul>
-      <li>Name / Username</li>
-      <li>Coarse Geographic Location</li>
-      <li>Employment History</li>
-      <li>No Agenda Social Account Name / Profile</li>
-    </ul>
+  h4 When does {{name}} use end user information from third parties?
+  p {{name}} will collect End User Data necessary to provide the {{name}} services to our customers.
+  p.
+    End users may voluntarily provide us with information they have made available on social media websites
+    (specifically No Agenda Social). If you provide us with any such information, we may collect publicly available
+    information from the social media websites you have indicated. You can control how much of your information social
+    media websites make public by visiting these websites and changing your privacy settings.
 
-    <h4>How Do We Use The Information We Collect?</h4>
-    <p>
-      Any of the information we collect from you may be used in one of the following ways:
-    </p>
-    <ul>
-      <li>To personalize your experience (your information helps us to better respond to your individual needs)</li>
-      <li>
-        To improve our website (we continually strive to improve our website offerings based on the information and
-        feedback we receive from you)
-      </li>
-      <li>
-        To improve customer service (your information helps us to more effectively respond to your customer service
-        requests and support needs)
-      </li>
-    </ul>
+  h4 When does {{name}} use customer information from third parties?
+  p We do not utilize third party information apart from the end-user data described above.
 
-    <h4>When does {{name}} use end user information from third parties?</h4>
-    <p>{{name}} will collect End User Data necessary to provide the {{name}} services to our customers.</p>
-    <p>
-      End users may voluntarily provide us with information they have made available on social media websites
-      (specifically No Agenda Social). If you provide us with any such information, we may collect publicly available
-      information from the social media websites you have indicated. You can control how much of your information social
-      media websites make public by visiting these websites and changing your privacy settings.
-    </p>
+  h4 Do we share the information we collect with third parties?
+  p.
+    We may disclose personal and non-personal information about you to government or law enforcement officials or
+    private parties as we, in our sole discretion, believe necessary or appropriate in order to respond to claims, legal
+    process (including subpoenas), to protect our rights and interests or those of a third party, the safety of the
+    public or any person, to prevent or stop any illegal, unethical, or legally actionable activity, or to otherwise
+    comply with applicable court orders, laws, rules and regulations.
 
-    <h4>When does {{name}} use customer information from third parties?</h4>
-    <p>We do not utilize third party information apart from the end-user data described above.</p>
+  h4 Where and when is information collected from customers and end users?
+  p.
+    {{name}} will collect personal information that you submit to us. We may also receive personal information about you
+    from third parties as described above.
 
-    <h4>Do we share the information we collect with third parties?</h4>
-    <p>
-      We may disclose personal and non-personal information about you to government or law enforcement officials or
-      private parties as we, in our sole discretion, believe necessary or appropriate in order to respond to claims,
-      legal process (including subpoenas), to protect our rights and interests or those of a third party, the safety of
-      the public or any person, to prevent or stop any illegal, unethical, or legally actionable activity, or to
-      otherwise comply with applicable court orders, laws, rules and regulations.
-    </p>
+  h4 How Do We Use Your E-mail Address?
+  p.
+    We do not collect nor use an e-mail address. If you have provided it in the free text areas of the site, other
+    validated users may be able to view it, but {{name}} does not search for nor utilize e-mail addresses from those
+    areas.
 
-    <h4>Where and when is information collected from customers and end users?</h4>
-    <p>
-      {{name}} will collect personal information that you submit to us. We may also receive personal information about
-      you from third parties as described above.
-    </p>
+  h4 How Long Do We Keep Your Information?
+  p.
+    We keep your information only so long as we need it to provide {{name}} to you and fulfill the purposes described in
+    this policy. When we no longer need to use your information and there is no need for us to keep it to comply with
+    our legal or regulatory obligations, we’ll either remove it from our systems or depersonalize it so that we
+    can&rsquo;t identify you.
 
-    <h4>How Do We Use Your E-mail Address?</h4>
-    <p>
-      We do not collect nor use an e-mail address. If you have provided it in the free text areas of the site, other
-      validated users may be able to view it, but {{name}} does not search for nor utilize e-mail addresses from those
-      areas.
-    </p>
+  h4 How Do We Protect Your Information?
+  p.
+    We implement a variety of security measures to maintain the safety of your personal information when you enter,
+    submit, or access your personal information. We mandate the use of a secure server. We cannot, however, ensure or
+    warrant the absolute security of any information you transmit to {{name}} or guarantee that your information on the
+    Service may not be accessed, disclosed, altered, or destroyed by a breach of any of our physical, technical, or
+    managerial safeguards.
 
-    <h4>How Long Do We Keep Your Information?</h4>
-    <p>
-      We keep your information only so long as we need it to provide {{name}} to you and fulfill the purposes described
-      in this policy. When we no longer need to use your information and there is no need for us to keep it to comply
-      with our legal or regulatory obligations, we’ll either remove it from our systems or depersonalize it so that we
-      can&rsquo;t identify you.
-    </p>
+  h4 Could my information be transferred to other countries?
+  p.
+    {{name}} is hosted in the US. Information collected via our website may be viewed and hosted anywhere in the world,
+    including countries that may not have laws of general applicability regulating the use and transfer of such data. To
+    the fullest extent allowed by applicable law, by using any of the above, you voluntarily consent to the trans-border
+    transfer and hosting of such information.
 
-    <h4>How Do We Protect Your Information?</h4>
-    <p>
-      We implement a variety of security measures to maintain the safety of your personal information when you enter,
-      submit, or access your personal information. We mandate the use of a secure server. We cannot, however, ensure or
-      warrant the absolute security of any information you transmit to {{name}} or guarantee that your information on
-      the Service may not be accessed, disclosed, altered, or destroyed by a breach of any of our physical, technical,
-      or managerial safeguards.
-    </p>
+  h4 Is the information collected through the {{name}} Service secure?
+  p.
+    We take precautions to protect the security of your information. We have physical, electronic, and managerial
+    procedures to help safeguard, prevent unauthorized access, maintain data security, and correctly use your
+    information. However, neither people nor security systems are foolproof, including encryption systems. In addition,
+    people can commit intentional crimes, make mistakes, or fail to follow policies. Therefore, while we use reasonable
+    efforts to protect your personal information, we cannot guarantee its absolute security. If applicable law imposes
+    any non-disclaimable duty to protect your personal information, you agree that intentional misconduct will be the
+    standards used to measure our compliance with that duty.
 
-    <h4>Could my information be transferred to other countries?</h4>
-    <p>
-      {{name}} is hosted in the US. Information collected via our website may be viewed and hosted anywhere in the
-      world, including countries that may not have laws of general applicability regulating the use and transfer of such
-      data. To the fullest extent allowed by applicable law, by using any of the above, you voluntarily consent to the
-      trans-border transfer and hosting of such information.
-    </p>
+  h4 Can I update or correct my information?
+  p.
+    The rights you have to request updates or corrections to the information {{name}} collects depend on your
+    relationship with {{name}}.
+  p.
+    Customers have the right to request the restriction of certain uses and disclosures of personally identifiable
+    information as follows. You can contact us in order to (1) update or correct your personally identifiable
+    information, or (3) delete the personally identifiable information maintained about you on our systems (subject to
+    the following paragraph), by cancelling your account. Such updates, corrections, changes and deletions will have no
+    effect on other information that we maintain in accordance with this Privacy Policy prior to such update,
+    correction, change, or deletion. You are responsible for maintaining the secrecy of your unique password and account
+    information at all times.
+  p.
+    {{name}} also provides ways for users to modify or remove the information we have collected from them from the
+    application; these actions will have the same effect as contacting us to modify or remove data.
+  p.
+    You should be aware that it is not technologically possible to remove each and every record of the information you
+    have provided to us from our system. The need to back up our systems to protect information from inadvertent loss
+    means that a copy of your information may exist in a non-erasable form that will be difficult or impossible for us
+    to locate. Promptly after receiving your request, all personal information stored in databases we actively use, and
+    other readily searchable media will be updated, corrected, changed, or deleted, as appropriate, as soon as and to
+    the extent reasonably and technically practicable.
+  p.
+    If you are an end user and wish to update, delete, or receive any information we have about you, you may do so by
+    contacting the organization of which you are a customer.
 
-    <h4>Is the information collected through the {{name}} Service secure?</h4>
-    <p>
-      We take precautions to protect the security of your information. We have physical, electronic, and managerial
-      procedures to help safeguard, prevent unauthorized access, maintain data security, and correctly use your
-      information. However, neither people nor security systems are foolproof, including encryption systems. In
-      addition, people can commit intentional crimes, make mistakes, or fail to follow policies. Therefore, while we use
-      reasonable efforts to protect your personal information, we cannot guarantee its absolute security. If applicable
-      law imposes any non-disclaimable duty to protect your personal information, you agree that intentional misconduct
-      will be the standards used to measure our compliance with that duty.
-    </p>
+  h4 Governing Law
+  p.
+    This Privacy Policy is governed by the laws of US without regard to its conflict of laws provision. You consent to
+    the exclusive jurisdiction of the courts in connection with any action or dispute arising between the parties under
+    or in connection with this Privacy Policy except for those individuals who may have rights to make claims under
+    Privacy Shield, or the Swiss-US framework.
+  p.
+    The laws of US, excluding its conflicts of law rules, shall govern this Agreement and your use of the website. Your
+    use of the website may also be subject to other local, state, national, or international laws.
+  p.
+    By using {{name}} or contacting us directly, you signify your acceptance of this Privacy Policy. If you do not agree
+    to this Privacy Policy, you should not engage with our website, or use our services. Continued use of the website,
+    direct engagement with us, or following the posting of changes to this Privacy Policy that do not significantly
+    affect the use or disclosure of your personal information will mean that you accept those changes.
 
-    <h4>Can I update or correct my information?</h4>
-    <p>
-      The rights you have to request updates or corrections to the information {{name}} collects depend on your
-      relationship with {{name}}.
-    </p>
-    <p>
-      Customers have the right to request the restriction of certain uses and disclosures of personally identifiable
-      information as follows. You can contact us in order to (1) update or correct your personally identifiable
-      information, or (3) delete the personally identifiable information maintained about you on our systems (subject to
-      the following paragraph), by cancelling your account. Such updates, corrections, changes and deletions will have
-      no effect on other information that we maintain in accordance with this Privacy Policy prior to such update,
-      correction, change, or deletion. You are responsible for maintaining the secrecy of your unique password and
-      account information at all times.
-    </p>
-    <p>
-      {{name}} also provides ways for users to modify or remove the information we have collected from them from the
-      application; these actions will have the same effect as contacting us to modify or remove data.
-    </p>
-    <p>
-      You should be aware that it is not technologically possible to remove each and every record of the information you
-      have provided to us from our system. The need to back up our systems to protect information from inadvertent loss
-      means that a copy of your information may exist in a non-erasable form that will be difficult or impossible for us
-      to locate. Promptly after receiving your request, all personal information stored in databases we actively use,
-      and other readily searchable media will be updated, corrected, changed, or deleted, as appropriate, as soon as and
-      to the extent reasonably and technically practicable.
-    </p>
-    <p>
-      If you are an end user and wish to update, delete, or receive any information we have about you, you may do so by
-      contacting the organization of which you are a customer.
-    </p>
+  h4 Your Consent
+  p.
+    We&rsquo;ve updated our Privacy Policy to provide you with complete transparency into what is being set when you
+    visit our site and how it&rsquo;s being used. By using our website, registering an account, or making a purchase,
+    you hereby consent to our Privacy Policy and agree to its terms.
 
-    <h4>Governing Law</h4>
-    <p>
-      This Privacy Policy is governed by the laws of US without regard to its conflict of laws provision. You consent to
-      the exclusive jurisdiction of the courts in connection with any action or dispute arising between the parties
-      under or in connection with this Privacy Policy except for those individuals who may have rights to make claims
-      under Privacy Shield, or the Swiss-US framework.
-    </p>
-    <p>
-      The laws of US, excluding its conflicts of law rules, shall govern this Agreement and your use of the website.
-      Your use of the website may also be subject to other local, state, national, or international laws.
-    </p>
-    <p>
-      By using {{name}} or contacting us directly, you signify your acceptance of this Privacy Policy. If you do not
-      agree to this Privacy Policy, you should not engage with our website, or use our services. Continued use of the
-      website, direct engagement with us, or following the posting of changes to this Privacy Policy that do not
-      significantly affect the use or disclosure of your personal information will mean that you accept those changes.
-    </p>
+  h4 Links to Other Websites
+  p.
+    This Privacy Policy applies only to the Services. The Services may contain links to other websites not operated or
+    controlled by {{name}}. We are not responsible for the content, accuracy or opinions expressed in such websites, and
+    such websites are not investigated, monitored or checked for accuracy or completeness by us. Please remember that
+    when you use a link to go from the Services to another website, our Privacy Policy is no longer in effect. Your
+    browsing and interaction on any other website, including those that have a link on our platform, is subject to that
+    website’s own rules and policies. Such third parties may use their own cookies or other methods to collect
+    information about you.
 
-    <h4>Your Consent</h4>
-    <p>
-      We&rsquo;ve updated our Privacy Policy to provide you with complete transparency into what is being set when you
-      visit our site and how it&rsquo;s being used. By using our website, registering an account, or making a purchase,
-      you hereby consent to our Privacy Policy and agree to its terms.
-    </p>
+  h4 Cookies
+  p {{name}} does not use Cookies.
 
-    <h4>Links to Other Websites</h4>
-    <p>
-      This Privacy Policy applies only to the Services. The Services may contain links to other websites not operated or
-      controlled by {{name}}. We are not responsible for the content, accuracy or opinions expressed in such websites,
-      and such websites are not investigated, monitored or checked for accuracy or completeness by us. Please remember
-      that when you use a link to go from the Services to another website, our Privacy Policy is no longer in effect.
-      Your browsing and interaction on any other website, including those that have a link on our platform, is subject
-      to that website’s own rules and policies. Such third parties may use their own cookies or other methods to collect
-      information about you.
-    </p>
+  h4 Kids' Privacy
+  p.
+    We do not address anyone under the age of 13. We do not knowingly collect personally identifiable information from
+    anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with
+    Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age
+    of 13 without verification of parental consent, We take steps to remove that information from Our servers.
 
-    <h4>Cookies</h4>
-    <p>{{name}} does not use Cookies.</p>
+  h4 Changes To Our Privacy Policy
+  p.
+    We may change our Service and policies, and we may need to make changes to this Privacy Policy so that they
+    accurately reflect our Service and policies. Unless otherwise required by law, we will notify you (for example,
+    through our Service) before we make changes to this Privacy Policy and give you an opportunity to review them before
+    they go into effect. Then, if you continue to use the Service, you will be bound by the updated Privacy Policy. If
+    you do not want to agree to this or any updated Privacy Policy, you can delete your account.
 
-    <h4>Kids' Privacy</h4>
-    <p>
-      We do not address anyone under the age of 13. We do not knowingly collect personally identifiable information from
-      anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with
-      Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the
-      age of 13 without verification of parental consent, We take steps to remove that information from Our servers.
-    </p>
+  h4 Third-Party Services
+  p.
+    We may display, include or make available third-party content (including data, information, applications and other
+    products services) or provide links to third-party websites or services (&ldquo;Third-Party Services&rdquo;).
+  p.
+    You acknowledge and agree that {{name}} shall not be responsible for any Third-Party Services, including their
+    accuracy, completeness, timeliness, validity, copyright compliance, legality, decency, quality or any other aspect
+    thereof. {{name}} does not assume and shall not have any liability or responsibility to you or any other person or
+    entity for any Third-Party Services.
+  p.
+    Third-Party Services and links thereto are provided solely as a convenience to you and you access and use them
+    entirely at your own risk and subject to such third parties' terms and conditions.
 
-    <h4>Changes To Our Privacy Policy</h4>
-    <p>
-      We may change our Service and policies, and we may need to make changes to this Privacy Policy so that they
-      accurately reflect our Service and policies. Unless otherwise required by law, we will notify you (for example,
-      through our Service) before we make changes to this Privacy Policy and give you an opportunity to review them
-      before they go into effect. Then, if you continue to use the Service, you will be bound by the updated Privacy
-      Policy. If you do not want to agree to this or any updated Privacy Policy, you can delete your account.
-    </p>
+  h4 Tracking Technologies
+  p.
+    {{name}} does not use any tracking technologies. When an authorization code is received from No Agenda Social, that
+    token is stored in the browser&rsquo;s memory, and the Service uses tokens on each request for data. If the page is
+    refreshed or the browser window/tab is closed, this token disappears, and a new one must be generated before the
+    application can be used again.
 
-    <h4>Third-Party Services</h4>
-    <p>
-      We may display, include or make available third-party content (including data, information, applications and other
-      products services) or provide links to third-party websites or services (&ldquo;Third-Party Services&rdquo;).
-    </p>
-    <p>
-      You acknowledge and agree that {{name}} shall not be responsible for any Third-Party Services, including their
-      accuracy, completeness, timeliness, validity, copyright compliance, legality, decency, quality or any other aspect
-      thereof. {{name}} does not assume and shall not have any liability or responsibility to you or any other person or
-      entity for any Third-Party Services.
-    </p>
-    <p>
-      Third-Party Services and links thereto are provided solely as a convenience to you and you access and use them
-      entirely at your own risk and subject to such third parties' terms and conditions.
-    </p>
+  h4 Information about General Data Protection Regulation (GDPR)
+  p.
+    We may be collecting and using information from you if you are from the European Economic Area (EEA), and in this
+    section of our Privacy Policy we are going to explain exactly how and why is this data collected, and how we
+    maintain this data under protection from being replicated or used in the wrong way.
 
-    <h4>Tracking Technologies</h4>
-    <p>
-      {{name}} does not use any tracking technologies. When an authorization code is received from No Agenda Social,
-      that token is stored in the browser&rsquo;s memory, and the Service uses tokens on each request for data. If the
-      page is refreshed or the browser window/tab is closed, this token disappears, and a new one must be generated
-      before the application can be used again.
-    </p>
+  h5 What is GDPR?
+  p.
+    GDPR is an EU-wide privacy and data protection law that regulates how EU residents&rsquo; data is protected by
+    companies and enhances the control the EU residents have, over their personal data.
+  p.
+    The GDPR is relevant to any globally operating company and not just the EU-based businesses and EU residents. Our
+    customers’ data is important irrespective of where they are located, which is why we have implemented GDPR controls
+    as our baseline standard for all our operations worldwide.
 
-    <h4>Information about General Data Protection Regulation (GDPR)</h4>
-    <p>
-      We may be collecting and using information from you if you are from the European Economic Area (EEA), and in this
-      section of our Privacy Policy we are going to explain exactly how and why is this data collected, and how we
-      maintain this data under protection from being replicated or used in the wrong way.
-    </p>
+  h5 What is personal data?
+  p.
+    Any data that relates to an identifiable or identified individual. GDPR covers a broad spectrum of information that
+    could be used on its own, or in combination with other pieces of information, to identify a person. Personal data
+    extends beyond a person’s name or email address. Some examples include financial information, political opinions,
+    genetic data, biometric data, IP addresses, physical address, sexual orientation, and ethnicity.
+  p The Data Protection Principles include requirements such as:
+  ul
+    li.
+      Personal data collected must be processed in a fair, legal, and transparent way and should only be used in a way
+      that a person would reasonably expect.
+    li.
+      Personal data should only be collected to fulfil a specific purpose and it should only be used for that purpose.
+      Organizations must specify why they need the personal data when they collect it.
+    li Personal data should be held no longer than necessary to fulfil its purpose.
+    li.
+      People covered by the GDPR have the right to access their own personal data. They can also request a copy of their
+      data, and that their data be updated, deleted, restricted, or moved to another organization.
 
-    <h4>What is GDPR?</h4>
-    <p>
-      GDPR is an EU-wide privacy and data protection law that regulates how EU residents&rsquo; data is protected by
-      companies and enhances the control the EU residents have, over their personal data.
-    </p>
-    <p>
-      The GDPR is relevant to any globally operating company and not just the EU-based businesses and EU residents. Our
-      customers’ data is important irrespective of where they are located, which is why we have implemented GDPR
-      controls as our baseline standard for all our operations worldwide.
-    </p>
+  h5 Why is GDPR important?
+  p.
+    GDPR adds some new requirements regarding how companies should protect individuals&rsquo; personal data that they
+    collect and process. It also raises the stakes for compliance by increasing enforcement and imposing greater fines
+    for breach. Beyond these facts, it&rsquo;s simply the right thing to do. At {{name}} we strongly believe that your
+    data privacy is very important and we already have solid security and privacy practices in place that go beyond the
+    requirements of this regulation.
 
-    <h4>What is personal data?</h4>
-    <p>
-      Any data that relates to an identifiable or identified individual. GDPR covers a broad spectrum of information
-      that could be used on its own, or in combination with other pieces of information, to identify a person. Personal
-      data extends beyond a person’s name or email address. Some examples include financial information, political
-      opinions, genetic data, biometric data, IP addresses, physical address, sexual orientation, and ethnicity.
-    </p>
-    <p>The Data Protection Principles include requirements such as:</p>
-    <ul>
-      <li>
-        Personal data collected must be processed in a fair, legal, and transparent way and should only be used in a way
-        that a person would reasonably expect.
-      </li>
-      <li>
-        Personal data should only be collected to fulfil a specific purpose and it should only be used for that purpose.
-        Organizations must specify why they need the personal data when they collect it.
-      </li>
-      <li>Personal data should be held no longer than necessary to fulfil its purpose.</li>
-      <li>
-        People covered by the GDPR have the right to access their own personal data. They can also request a copy of
-        their data, and that their data be updated, deleted, restricted, or moved to another organization.
-      </li>
-    </ul>
+  h5 Individual Data Subject&rsquo;s Rights - Data Access, Portability, and Deletion
+  p.
+    We are committed to helping our customers meet the data subject rights requirements of GDPR. {{name}} processes or
+    stores all personal data in fully vetted, DPA compliant vendors. We do store all conversation and personal data for
+    up to 6 years unless your account is deleted. In which case, we dispose of all data in accordance with our Terms of
+    Service and Privacy Policy, but we will not hold it longer than 60 days.
+  p.
+    We are aware that if you are working with EU customers, you need to be able to provide them with the ability to
+    access, update, retrieve and remove personal data. We got you! We've been set up as self service from the start and
+    have always given you access to your data. Our customer support team is here for you to answer any questions you
+    might have about working with the API.
 
-    <h4>Why is GDPR important?</h4>
-    <p>
-      GDPR adds some new requirements regarding how companies should protect individuals&rsquo; personal data that they
-      collect and process. It also raises the stakes for compliance by increasing enforcement and imposing greater fines
-      for breach. Beyond these facts, it&rsquo;s simply the right thing to do. At {{name}} we strongly believe that your
-      data privacy is very important and we already have solid security and privacy practices in place that go beyond
-      the requirements of this regulation.
-    </p>
+  h4 California Residents
+  p.
+    The California Consumer Privacy Act (CCPA) requires us to disclose categories of Personal Information we collect and
+    how we use it, the categories of sources from whom we collect Personal Information, and the third parties with whom
+    we share it, which we have explained above.
+  p.
+    We are also required to communicate information about rights California residents have under California law. You may
+    exercise the following rights:
+  ul
+    li.
+      Right to Know and Access. You may submit a verifiable request for information regarding the: (1) categories of
+      Personal Information we collect, use, or share; (2) purposes for which categories of Personal Information are
+      collected or used by us; (3) categories of sources from which we collect Personal Information; and (4) specific
+      pieces of Personal Information we have collected about you.
+    li Right to Equal Service. We will not discriminate against you if you exercise your privacy rights.
+    li.
+      Right to Delete. You may submit a verifiable request to close your account and we will delete Personal Information
+      about you that we have collected.
+    li Request that a business that sells a consumer's personal data, not sell the consumer's personal data.
+  p.
+    If you make a request, we have one month to respond to you. If you would like to exercise any of these rights,
+    please contact us.
+  p We do not sell the Personal Information of our users.
+  p For more information about these rights, please contact us.
 
-    <h4>Individual Data Subject&rsquo;s Rights - Data Access, Portability, and Deletion</h4>
-    <p>
-      We are committed to helping our customers meet the data subject rights requirements of GDPR. {{name}} processes or
-      stores all personal data in fully vetted, DPA compliant vendors. We do store all conversation and personal data
-      for up to 6 years unless your account is deleted. In which case, we dispose of all data in accordance with our
-      Terms of Service and Privacy Policy, but we will not hold it longer than 60 days.
-    </p>
-    <p>
-      We are aware that if you are working with EU customers, you need to be able to provide them with the ability to
-      access, update, retrieve and remove personal data. We got you! We've been set up as self service from the start
-      and have always given you access to your data. Our customer support team is here for you to answer any questions
-      you might have about working with the API.
-    </p>
+  h5 California Online Privacy Protection Act (CalOPPA)
+  p.
+    CalOPPA requires us to disclose categories of Personal Information we collect and how we use it, the categories of
+    sources from whom we collect Personal Information, and the third parties with whom we share it, which we have
+    explained above.
+  p CalOPPA users have the following rights:
+  ul
+    li.
+      Right to Know and Access. You may submit a verifiable request for information regarding the: (1) categories of
+      Personal Information we collect, use, or share; (2) purposes for which categories of Personal Information are
+      collected or used by us; (3) categories of sources from which we collect Personal Information; and (4) specific
+      pieces of Personal Information we have collected about you.
+    li Right to Equal Service. We will not discriminate against you if you exercise your privacy rights.
+    li.
+      Right to Delete. You may submit a verifiable request to close your account and we will delete Personal Information
+      about you that we have collected.
+    li Right to request that a business that sells a consumer's personal data, not sell the consumer's personal data.
+  p.
+    If you make a request, we have one month to respond to you. If you would like to exercise any of these rights,
+    please contact us.
+  p We do not sell the Personal Information of our users.
+  p For more information about these rights, please contact us.
 
-    <h4>California Residents</h4>
-    <p>
-      The California Consumer Privacy Act (CCPA) requires us to disclose categories of Personal Information we collect
-      and how we use it, the categories of sources from whom we collect Personal Information, and the third parties with
-      whom we share it, which we have explained above.
-    </p>
-    <p>
-      We are also required to communicate information about rights California residents have under California law. You
-      may exercise the following rights:
-    </p>
-    <ul>
-      <li>
-        Right to Know and Access. You may submit a verifiable request for information regarding the: (1) categories of
-        Personal Information we collect, use, or share; (2) purposes for which categories of Personal Information are
-        collected or used by us; (3) categories of sources from which we collect Personal Information; and (4) specific
-        pieces of Personal Information we have collected about you.
-      </li>
-      <li>Right to Equal Service. We will not discriminate against you if you exercise your privacy rights.</li>
-      <li>
-        Right to Delete. You may submit a verifiable request to close your account and we will delete Personal
-        Information about you that we have collected.
-      </li>
-      <li>Request that a business that sells a consumer's personal data, not sell the consumer's personal data.</li>
-    </ul>
-    <p>
-      If you make a request, we have one month to respond to you. If you would like to exercise any of these rights,
-      please contact us.
-    </p>
-    <p>We do not sell the Personal Information of our users.</p>
-    <p>For more information about these rights, please contact us.</p>
-
-    <h4>California Online Privacy Protection Act (CalOPPA)</h4>
-    <p>
-      CalOPPA requires us to disclose categories of Personal Information we collect and how we use it, the categories of
-      sources from whom we collect Personal Information, and the third parties with whom we share it, which we have
-      explained above.
-    </p>
-    <p>CalOPPA users have the following rights:</p>
-    <ul>
-      <li>
-        Right to Know and Access. You may submit a verifiable request for information regarding the: (1) categories of
-        Personal Information we collect, use, or share; (2) purposes for which categories of Personal Information are
-        collected or used by us; (3) categories of sources from which we collect Personal Information; and (4) specific
-        pieces of Personal Information we have collected about you.
-      </li>
-      <li>Right to Equal Service. We will not discriminate against you if you exercise your privacy rights.</li>
-      <li>
-        Right to Delete. You may submit a verifiable request to close your account and we will delete Personal
-        Information about you that we have collected.
-      </li>
-      <li>
-        Right to request that a business that sells a consumer's personal data, not sell the consumer's personal data.
-      </li>
-    </ul>
-    <p>
-      If you make a request, we have one month to respond to you. If you would like to exercise any of these rights,
-      please contact us.
-    </p>
-    <p>We do not sell the Personal Information of our users.</p>
-    <p>For more information about these rights, please contact us.</p>
-
-    <h4>Contact Us</h4>
-    <p>Don't hesitate to contact us if you have any questions.</p>
-    <ul>
-      <li>Via this Link: <router-link to="/how-it-works">https://noagendacareers.com/how-it-works</router-link></li>
-    </ul>
-  </article>
+  h4 Contact Us
+  p Don't hesitate to contact us if you have any questions.
+  ul: li Via this Link: #[router-link(to='/how-it-works') https://noagendacareers.com/how-it-works]
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/TermsOfService.vue b/src/JobsJobsJobs/App/src/views/TermsOfService.vue
index ede9109..e3dbdb9 100644
--- a/src/JobsJobsJobs/App/src/views/TermsOfService.vue
+++ b/src/JobsJobsJobs/App/src/views/TermsOfService.vue
@@ -1,43 +1,37 @@
-<template>
-  <article>
-    <page-title title="Terms of Service" />
-    <h3>Terms of Service</h3>
-    <p><em>(as of February 6<sup>th</sup>, 2021)</em></p>
+<template lang="pug">
+article
+  page-title(title='Terms of Service')
+  h3 Terms of Service
+  p: em (as of February 6#[sup th], 2021)
 
-    <h4>Acceptance of Terms</h4>
-    <p>
-      By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are
-      responsible to ensure that your use of this site complies with all applicable laws. Your continued use of this
-      site implies your acceptance of these terms.
-    </p>
+  h4 Acceptance of Terms
+  p.
+    By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are responsible
+    to ensure that your use of this site complies with all applicable laws. Your continued use of this site implies your
+    acceptance of these terms.
 
-    <h4>Description of Service and Registration</h4>
-    <p>
-      Jobs, Jobs, Jobs is a service that allows individuals to enter and amend employment profiles, restricting access
-      to the details of these profiles to other users of <a href="https://noagendasocial.com" target="_blank">No Agenda
-      Social</a>. Registration is accomplished by allowing Jobs, Jobs, Jobs to read one&rsquo;s No Agenda Social
-      profile. See our <router-link to="/privacy-policy">privacy policy</router-link> for details on the personal (user)
-      information we maintain.
-    </p>
+  h4 Description of Service and Registration
+  p.
+    Jobs, Jobs, Jobs is a service that allows individuals to enter and amend employment profiles, restricting access
+    to the details of these profiles to other users of
+    #[a(href='https://noagendasocial.com' target='_blank') No Agenda Social]. Registration is accomplished by allowing
+    Jobs, Jobs, Jobs to read one&rsquo;s No Agenda Social profile. See our
+    #[router-link(to='/privacy-policy') privacy policy] for details on the personal (user) information we maintain.
 
-    <h4>Liability</h4>
-    <p>
-      This service is provided &ldquo;as is&rdquo;, and no warranty (express or implied) exists. The service and its
-      developers may not be held liable for any damages that may arise through the use of this service.
-    </p>
+  h4 Liability
+  p.
+    This service is provided &ldquo;as is&rdquo;, and no warranty (express or implied) exists. The service and its
+    developers may not be held liable for any damages that may arise through the use of this service.
 
-    <h4>Updates to Terms</h4>
-    <p>
-      These terms and conditions may be updated at any time. When these terms are updated, users will be notified via a
-      notice on the dashboard page. Additionally, the date at the top of this page will be updated, and any substantive
-      updates will also be accompanied by a summary of those changes.
-    </p>
+  h4 Updates to Terms
+  p.
+    These terms and conditions may be updated at any time. When these terms are updated, users will be notified via a
+    notice on the dashboard page. Additionally, the date at the top of this page will be updated, and any substantive
+    updates will also be accompanied by a summary of those changes.
 
-    <hr>
+  hr
 
-    <p>
-      You may also wish to review our <router-link to="/privacy-policy">privacy policy</router-link> to learn how we
-      handle your data.
-    </p>
-  </article>
+  p.
+    You may also wish to review our #[router-link(to='/privacy-policy') privacy policy] to learn how we handle your
+    data.
 </template>
diff --git a/src/JobsJobsJobs/App/src/views/citizen/Authorized.vue b/src/JobsJobsJobs/App/src/views/citizen/Authorized.vue
index 232722c..46f37fc 100644
--- a/src/JobsJobsJobs/App/src/views/citizen/Authorized.vue
+++ b/src/JobsJobsJobs/App/src/views/citizen/Authorized.vue
@@ -1,9 +1,8 @@
-<template>
-  <article>
-    <page-title title="Logging on..." />
-    <p>&nbsp;</p>
-    <p v-html="message"></p>
-  </article>
+<template lang="pug">
+article
+  page-title(title='Logging on...')
+  p &nbsp;
+  p(v-html='message')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/citizen/Dashboard.vue b/src/JobsJobsJobs/App/src/views/citizen/Dashboard.vue
index acb10b2..33200fc 100644
--- a/src/JobsJobsJobs/App/src/views/citizen/Dashboard.vue
+++ b/src/JobsJobsJobs/App/src/views/citizen/Dashboard.vue
@@ -1,71 +1,44 @@
-<template>
-  <article class="container">
-    <page-title title="Dashboard" />
-    <h3 class="pb-4">Welcome, {{user.name}}</h3>
-    <load-data :load="retrieveData">
-      <div class="row row-cols-1 row-cols-md-2">
-        <div class="col">
-          <div class="card h-100">
-            <h5 class="card-header">Your Profile</h5>
-            <div class="card-body">
-              <h6 class="card-subtitle mb-3 text-muted fst-italic">
-                Last updated <full-date-time :date="profile.lastUpdatedOn" />
-              </h6>
-              <p v-if="profile" class="card-text">
-                Your profile currently lists {{profile.skills.length}}
-                skill<template v-if="profile.skills.length !== 1">s</template>.
-                <span v-if="profile.seekingEmployment">
-                  <br><br>
-                  Your profile indicates that you are seeking employment. Once you find it,
-                  <router-link to="/success-story/add">tell your fellow citizens about it!</router-link>
-                </span>
-              </p>
-              <p v-else class="card-text">
-                You do not have an employment profile established; click below (or &ldquo;Edit Profile&rdquo; in the
-                menu) to get started!
-              </p>
-            </div>
-            <div class="card-footer">
-              <template v-if="profile">
-                <router-link class="btn btn-outline-secondary"
-                             :to="`/profile/${user.citizenId}/view`">View Profile</router-link> &nbsp; &nbsp;
-                <router-link class="btn btn-outline-secondary" to="/citizen/profile">Edit Profile</router-link>
-              </template>
-              <router-link v-else class="btn btn-primary" to="/citizen/profile">Create Profile</router-link>
-            </div>
-          </div>
-        </div>
-        <div class="col">
-          <div class="card h-100">
-            <h5 class="card-header">Other Citizens</h5>
-            <div class="card-body">
-              <h6 class="card-subtitle mb-3 text-muted fst-italic">
-                <template v-if="profileCount === 0">No</template><template v-else>{{profileCount}} Total</template>
-                Employment Profile<template v-if="profileCount !== 1">s</template>
-              </h6>
-              <p v-if="profileCount === 1 && profile" class="card-text">
-                It looks like, for now, it&rsquo;s just you&hellip;
-              </p>
-              <p v-else-if="profileCount > 0" class="card-text">
-                Take a look around and see if you can help them find work!
-              </p>
-              <p v-else class="card-text">
-                You can click below, but you will not find anything&hellip;
-              </p>
-            </div>
-            <div class="card-footer">
-              <router-link class="btn btn-outline-secondary" to="/profile/search">Search Profiles</router-link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </load-data>
-    <p>&nbsp;</p>
-    <p>
-      To see how this application works, check out &ldquo;How It Works&rdquo; in the sidebar (last updated June
-      14<sup>th</sup>, 2021).
-    </p>
-  </article>
+<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
+      h5.card-header Your Profile
+      .card-body
+        h6.card-subtitle.mb-3.text-muted.fst-italic Last updated #[full-date-time(:date='profile.lastUpdatedOn')]
+        p.card-text(v-if='profile')
+          | Your profile currently lists {{profile.skills.length}}
+          | skill#[template(v-if='profile.skills.length !== 1') s].
+          span(v-if='profile.seekingEmployment')
+            br
+            br
+            | Your profile indicates that you are seeking employment. Once you find it,
+            router-link(to='/success-story/add') tell your fellow citizens about it!
+        p.card-text(v-else).
+          You do not have an employment profile established; click below (or &ldquo;Edit Profile&rdquo; in the menu) to
+          get started!
+      .card-footer
+        template(v-if='profile')
+          router-link.btn.btn-outline-secondary(:to='`/profile/${user.citizenId}/view`') View Profile
+          | &nbsp; &nbsp;
+          router-link.btn.btn-outline-secondary(to='/citizen/profile') Edit Profile
+        router-link.btn.btn-primary(v-else to='/citizen/profile') Create Profile
+    .col: .card.h-100
+      h5.card-header Other Citizens
+      .card-body
+        h6.card-subtitle.mb-3.text-muted.fst-italic
+          template(v-if='profileCount === 0') No
+          template(v-else) {{profileCount}} Total
+          | Employment Profile#[template(v-if='profileCount !== 1') s]
+        p.card-text(v-if='profileCount === 1 && profile') It looks like, for now, it&rsquo;s just you&hellip;
+        p.card-text(v-else-if='profileCount > 0') Take a look around and see if you can help them find work!
+        p.card-text(v-else) You can click below, but you will not find anything&hellip;
+      .card-footer: router-link.btn.btn-outline-secondary(to='/profile/search') Search Profiles
+  p &nbsp;
+  p.
+    To see how this application works, check out &ldquo;How It Works&rdquo; in the sidebar (last updated June
+    14#[sup th], 2021).
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue b/src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue
index bd0cf84..18e0016 100644
--- a/src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue
+++ b/src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue
@@ -1,103 +1,71 @@
-<template>
-  <article>
-    <page-title title="Edit Profile" />
-    <h3 class="pb-3">My Employment Profile</h3>
-    <load-data :load="retrieveData">
-      <form class="row g-3">
-        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
-          <div class="form-floating">
-            <input type="text" id="realName" class="form-control" v-model="v$.realName.$model" maxlength="255"
-                    placeholder="Leave blank to use your NAS display name">
-            <label for="realName">Real Name</label>
-          </div>
-          <div class="form-text">Leave blank to use your NAS display name</div>
-        </div>
-        <div class="col-12">
-          <div class="form-check">
-            <input type="checkbox" id="isSeeking" class="form-check-input" v-model="v$.isSeekingEmployment.$model">
-            <label for="isSeeking" class="form-check-label">I am currently seeking employment</label>
-          </div>
-          <p v-if="profile.isSeekingEmployment">
-            <em>If you have found employment, consider <router-link to="/success-story/new/edit">telling your fellow
-            citizens about it!</router-link></em>
-          </p>
-        </div>
-        <div class="col-12 col-sm-6 col-md-4">
-          <continent-list v-model="v$.continentId.$model" :isInvalid="v$.continentId.$error"
-                          @touch="v$.continentId.$touch() || true" />
-        </div>
-        <div class="col-12 col-sm-6 col-md-8">
-          <div class="form-floating">
-            <input type="text" id="region" :class="{ 'form-control': true, 'is-invalid': v$.region.$error }"
-                   v-model="v$.region.$model" maxlength="255" placeholder="Country, state, geographic area, etc.">
-            <div id="regionFeedback" class="invalid-feedback">Please enter a region</div>
-            <label for="region" class="jjj-required">Region</label>
-          </div>
-          <div class="form-text">Country, state, geographic area, etc.</div>
-        </div>
-        <markdown-editor id="bio" label="Professional Biography" v-model:text="v$.biography.$model"
-                         :isInvalid="v$.biography.$error" />
-        <div class="col-12 col-offset-md-2 col-md-4">
-          <div class="form-check">
-            <input type="checkbox" id="isRemote" class="form-check-input" v-model="v$.remoteWork.$model">
-            <label class="form-check-label" for="isRemote">I am looking for remote work</label>
-          </div>
-        </div>
-        <div class="col-12 col-md-4">
-          <div class="form-check">
-            <input type="checkbox" id="isFullTime" class="form-check-input" v-model="v$.fullTime.$model">
-            <label class="form-check-label" for="isFullTime">I am looking for full-time work</label>
-          </div>
-        </div>
-        <div class="col-12">
-          <hr>
-          <h4 class="pb-2">
-            Skills &nbsp;
-            <button class="btn btn-sm btn-outline-primary rounded-pill" @click.prevent="addSkill">Add a Skill</button>
-          </h4>
-        </div>
-        <profile-skill-edit v-for="(skill, idx) in profile.skills" :key="skill.id" v-model="profile.skills[idx]"
-                            @remove="removeSkill(skill.id)" @input="v$.skills.$touch" />
-        <div class="col-12">
-          <hr>
-          <h4>Experience</h4>
-          <p>
-            This application does not have a place to individually list your chronological job history; however, you can
-            use this area to list prior jobs, their dates, and anything else you want to include that&rsquo;s not
-            already a part of your Professional Biography above.
-          </p>
-        </div>
-        <markdown-editor id="experience" label="Experience" v-model:text="v$.experience.$model" />
-        <div class="col-12">
-          <div class="form-check">
-            <input type="checkbox" id="isPublic" class="form-check-input" v-model="v$.isPublic.$model">
-            <label class="form-check-label" for="isPublic">
-              Allow my profile to be searched publicly (outside NA Social)
-            </label>
-          </div>
-        </div>
-        <div class="col-12">
-          <p v-if="v$.$error" class="text-danger">Please correct the errors above</p>
-          <button class="btn btn-primary" @click.prevent="saveProfile">
-            <icon icon="content-save-outline" />&nbsp; Save
-          </button>
-          <template v-if="!isNew">
-            &nbsp; &nbsp;
-            <router-link class="btn btn-outline-secondary" :to="`/profile/${user.citizenId}/view`">
-              <icon icon="file-account-outline" />&nbsp; View Your User Profile
-            </router-link>
-          </template>
-        </div>
-      </form>
-    </load-data>
-    <hr>
-    <p class="text-muted fst-italic">
-      (If you want to delete your profile, or your entire account, <router-link to="/so-long/options">see your deletion
-      options here</router-link>.)
-    </p>
-    <maybe-save :isShown="confirmNavShown" :toRoute="nextRoute" :saveAction="saveProfile" :validator="v$"
-                @close="confirmClose" />
-  </article>
+<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
+      .form-floating
+        input.form-control(type='text' id='realName' v-model='v$.realName.$model' maxlength='255'
+                           placeholder='Leave blank to use your NAS display name')
+        label(for='realName') Real Name
+      .form-text Leave blank to use your NAS display name
+    .col-12
+      .form-check
+        input.form-check-input(type='checkbox' id='isSeeking' v-model='v$.isSeekingEmployment.$model')
+        label.form-check-label(for='isSeeking') I am currently seeking employment
+      p(v-if='profile.isSeekingEmployment'): em.
+        If you have found employment, consider
+        #[router-link(to='/success-story/new/edit') telling your fellow citizens about it!]
+    .col-12.col-sm-6.col-md-4
+      continent-list(v-model='v$.continentId.$model' :isInvalid='v$.continentId.$error'
+                     @touch='v$.continentId.$touch() || true')
+    .col-12.col-sm-6.col-md-8
+      .form-floating
+        input.form-control(type='text' id='region' :class="{ 'is-invalid': v$.region.$error }"
+                           v-model='v$.region.$model' maxlength='255'
+                           placeholder='Country, state, geographic area, etc.')
+        #regionFeedback.invalid-feedback Please enter a region
+        label.jjj-required(for='region') Region
+      .form-text Country, state, geographic area, etc.
+    markdown-editor(id='bio' label='Professional Biography' v-model:text='v$.biography.$model'
+                    :isInvalid='v$.biography.$error')
+    .col-12.col-offset-md-2.col-md-4
+      .form-check
+        input.form-check-input(type='checkbox' id='isRemote' v-model='v$.remoteWork.$model')
+        label.form-check-label(for='isRemote') I am looking for remote work
+    .col-12.col-md-4
+      .form-check
+        input.form-check-input(type='checkbox' id='isFullTime' v-model='v$.fullTime.$model')
+        label.form-check-label(for='isFullTime') I am looking for full-time work
+    .col-12
+      hr
+      h4.pb-2 Skills &nbsp;#[button.btn.btn-sm.btn-outline-primary.rounded-pill(@click.prevent='addSkill') Add a Skill]
+    profile-skill-edit(v-for='(skill, idx) in profile.skills' :key='skill.id' v-model='profile.skills[idx]'
+                       @remove='removeSkill(skill.id)' @input='v$.skills.$touch')
+    .col-12
+      hr
+      h4 Experience
+      p.
+        This application does not have a place to individually list your chronological job history; however, you can use
+        this area to list prior jobs, their dates, and anything else you want to include that&rsquo;s not already a part
+        of your Professional Biography above.
+    markdown-editor(id='experience' label='Experience' v-model:text='v$.experience.$model')
+    .col-12: .form-check
+      input.form-check-input(type='checkbox' id='isPublic' v-model='v$.isPublic.$model')
+      label.form-check-label(for='isPublic') Allow my profile to be searched publicly (outside NA Social)
+    .col-12
+      p.text-danger(v-if='v$.$error') Please correct the errors above
+      button.btn.btn-primary(@click.prevent='saveProfile') #[icon(icon='content-save-outline')]&nbsp; Save
+      template(v-if='!isNew')
+        | &nbsp; &nbsp;
+        router-link.btn.btn-outline-secondary(:to='`/profile/${user.citizenId}/view`').
+          #[icon(icon='file-account-outline')]&nbsp; View Your User Profile
+  hr
+  p.text-muted.fst-italic.
+    (If you want to delete your profile, or your entire account,
+    #[router-link(to='/so-long/options') see your deletion options here].)
+  maybe-save(:isShown='confirmNavShown' :toRoute='nextRoute' :saveAction='saveProfile' :validator='v$'
+             @close='confirmClose')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/citizen/LogOff.vue b/src/JobsJobsJobs/App/src/views/citizen/LogOff.vue
index f2809e2..2013cb0 100644
--- a/src/JobsJobsJobs/App/src/views/citizen/LogOff.vue
+++ b/src/JobsJobsJobs/App/src/views/citizen/LogOff.vue
@@ -1,9 +1,8 @@
-<template>
-  <article>
-    <page-title title="Logging off..." />
-    <p>&nbsp;</p>
-    <p class="fst-italic">Logging off&hellip;</p>
-  </article>
+<template lang="pug">
+article
+  page-title(title='Logging off...')
+  p &nbsp;
+  p.fst-italic Logging off&hellip;
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/citizen/LogOn.vue b/src/JobsJobsJobs/App/src/views/citizen/LogOn.vue
index 60149a9..b783f7b 100644
--- a/src/JobsJobsJobs/App/src/views/citizen/LogOn.vue
+++ b/src/JobsJobsJobs/App/src/views/citizen/LogOn.vue
@@ -1,8 +1,7 @@
-<template>
-  <article>
-    <p>&nbsp;</p>
-    <p class="fst-italic">Sending you over to No Agenda Social to log on; see you back in just a second&hellip;</p>
-  </article>
+<template lang="pug">
+article
+  p &nbsp;
+  p.fst-italic Sending you over to No Agenda Social to log on; see you back in just a second&hellip;
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/listing/HelpWanted.vue b/src/JobsJobsJobs/App/src/views/listing/HelpWanted.vue
index 49fc103..8b94ae1 100644
--- a/src/JobsJobsJobs/App/src/views/listing/HelpWanted.vue
+++ b/src/JobsJobsJobs/App/src/views/listing/HelpWanted.vue
@@ -1,43 +1,29 @@
-<template>
-  <article>
-    <page-title title="Help Wanted" />
-    <h3 class="pb-3">Help Wanted</h3>
-
-    <p v-if="!searched">
-      Enter relevant criteria to find results, or just click &ldquo;Search&rdquo; to see all current job listings.
-    </p>
-    <collapse-panel headerText="Search Criteria" :collapsed="isCollapsed" @toggle="toggleCollapse">
-      <listing-search-form v-model="criteria" @search="doSearch" />
-    </collapse-panel>
-    <error-list :errors="errors">
-      <p v-if="searching" class="pt-3">Searching job listings...</p>
-      <template v-else>
-        <table v-if="results.length > 0" class="table table-sm table-hover pt-3">
-          <thead>
-            <tr>
-              <th scope="col">Listing</th>
-              <th scope="col">Title</th>
-              <th scope="col">Location</th>
-              <th scope="col" class="text-center">Remote?</th>
-              <th scope="col" class="text-center">Needed By</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="it in results" :key="it.listing.id">
-              <td><router-link :to="`/listing/${it.listing.id}/view`">View</router-link></td>
-              <td>{{it.listing.title}}</td>
-              <td>{{it.continent.name}} / {{it.listing.region}}</td>
-              <td class="text-center">{{yesOrNo(it.listing.remoteWork)}}</td>
-              <td v-if="it.listing.neededBy" class="text-center">{{formatNeededBy(it.listing.neededBy)}}</td>
-              <td v-else class="text-center">N/A</td>
-            </tr>
-          </tbody>
-        </table>
-        <p v-else-if="searched" class="pt-3">No job listings found for the specified criteria</p>
-      </template>
-    </error-list>
-
-  </article>
+<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.
+  collapse-panel(headerText='Search Criteria' :collapsed='isCollapsed' @toggle='toggleCollapse')
+    listing-search-form(v-model='criteria' @search='doSearch')
+  error-list(:errors='errors')
+    p.pt-3(v-if='searching') Searching job listings&hellip;
+    template(v-else)
+      table.table.table-sm.table-hover.pt-3(v-if='results.length > 0')
+        thead: tr
+          th(scope='col') Listing
+          th(scope='col') Title
+          th(scope='col') Location
+          th.text-center(scope='col') Remote?
+          th.text-center(scope='col') Needed By
+        tbody: tr(v-for='it in results' :key='it.listing.id')
+          td: router-link(:to='`/listing/${it.listing.id}/view`') View
+          td {{it.listing.title}}
+          td {{it.continent.name}} / {{it.listing.region}}
+          td.text-center {{yesOrNo(it.listing.remoteWork)}}
+          td.text-center(v-if='it.listing.neededBy') {{formatNeededBy(it.listing.neededBy)}}
+          td.text-center(v-else) N/A
+      p.pt-3(v-else-if='searched') No job listings found for the specified criteria
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/listing/ListingEdit.vue b/src/JobsJobsJobs/App/src/views/listing/ListingEdit.vue
index 8f24022..001005f 100644
--- a/src/JobsJobsJobs/App/src/views/listing/ListingEdit.vue
+++ b/src/JobsJobsJobs/App/src/views/listing/ListingEdit.vue
@@ -1,60 +1,38 @@
-<template>
-  <article>
-    <page-title :title="isNew ? 'Add a Job Listing' : 'Edit Job Listing'" />
-    <h3 v-if="isNew" class="pb-3">Add a Job Listing</h3>
-    <h3 v-else class="pb-3">Edit Job Listing</h3>
-    <load-data :load="retrieveData">
-      <form class="row g-3">
-        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
-          <div class="form-floating">
-            <input type="text" id="title" :class="{ 'form-control': true, 'is-invalid': v$.title.$error }"
-                   v-model="v$.title.$model" maxlength="255" placeholder="The title for the job listing">
-            <div id="titleFeedback" class="invalid-feedback">Please enter a title for the job listing</div>
-            <label class="jjj-required" for="title">Title</label>
-          </div>
-          <div class="form-text">
-            No need to put location here; it will always be show to seekers with continent and region
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 col-md-4">
-          <continent-list v-model="v$.continentId.$model" :isInvalid="v$.continentId.$error"
-                          @touch="v$.continentId.$touch() || true" />
-        </div>
-        <div class="col-12 col-sm-6 col-md-8">
-          <div class="form-floating">
-            <input type="text" id="region" :class="{ 'form-control': true, 'is-invalid': v$.region.$error }"
-                   v-model="v$.region.$model" maxlength="255" placeholder="Country, state, geographic area, etc.">
-            <div id="regionFeedback" class="invalid-feedback">Please enter a region</div>
-            <label for="region" class="jjj-required">Region</label>
-          </div>
-          <div class="form-text">Country, state, geographic area, etc.</div>
-        </div>
-        <div class="col-12">
-          <div class="form-check">
-            <input type="checkbox" id="isRemote" class="form-check-input" v-model="v$.remoteWork.$model">
-            <label class="form-check-label" for="isRemote">This opportunity is for remote work</label>
-          </div>
-        </div>
-        <markdown-editor id="description" label="Job Description" v-model:text="v$.text.$model"
-                         :isInvalid="v$.text.$error" />
-        <div class="col-12 col-md-4">
-          <div class="form-floating">
-            <input type="date" id="neededBy" class="form-control" v-model="v$.neededBy.$model"
-                   placeholder="Date by which this position needs to be filled">
-            <label for="neededBy">Needed By</label>
-          </div>
-        </div>
-        <div class="col-12">
-          <p v-if="v$.$error" class="text-danger">Please correct the errors above</p>
-          <button class="btn btn-primary" @click.prevent="saveListing(true)">
-            <icon icon="content-save-outline" />&nbsp; Save
-          </button>
-        </div>
-      </form>
-    </load-data>
-    <maybe-save :isShown="confirmNavShown" :toRoute="nextRoute" :saveAction="doSave" :validator="v$"
-                @close="confirmClose" />
-  </article>
+<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
+    .col-12.col-sm-10.col-md-8.col-lg-6
+      .form-floating
+        input.form-control(type='text' id='title' :class="{ 'is-invalid': v$.title.$error }" maxlength='255'
+                           v-model='v$.title.$model' placeholder='The title for the job listing')
+        #titleFeedback.invalid-feedback Please enter a title for the job listing
+        label.jjj-required(for='title') Title
+      .form-text No need to put location here; it will always be show to seekers with continent and region
+    .col-12.col-sm-6.col-md-4
+      continent-list(v-model='v$.continentId.$model' :isInvalid='v$.continentId.$error'
+                     @touch='v$.continentId.$touch() || true')
+    .col-12.col-sm-6.col-md-8
+      .form-floating
+        input.form-control(type='text' id='region' :class="{ 'is-invalid': v$.region.$error }" maxlength='255'
+                           v-model='v$.region.$model' placeholder='Country, state, geographic area, etc.')
+        #regionFeedback.invalid-feedback Please enter a region
+        label.jjj-required(for='region') Region
+      .form-text Country, state, geographic area, etc.
+    .col-12: .form-check
+      input.form-check-input(type='checkbox' id='isRemote' v-model='v$.remoteWork.$model')
+      label.form-check-label(for='isRemote') This opportunity is for remote work
+    markdown-editor(id='description' label='Job Description' v-model:text='v$.text.$model' :isInvalid='v$.text.$error')
+    .col-12.col-md-4: .form-floating
+      input.form-control(type='date' id='neededBy' v-model='v$.neededBy.$model'
+                         placeholder='Date by which this position needs to be filled')
+      label(for='neededBy') Needed By
+    .col-12
+      p.text-danger(v-if='v$.$error') Please correct the errors above
+      button.btn.btn-primary(@click.prevent='saveListing(true)') #[icon(icon='content-save-outline')]&nbsp; Save
+  maybe-save(:isShown='confirmNavShown' :toRoute='nextRoute' :saveAction='doSave' :validator='v$' @close='confirmClose')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/listing/ListingView.vue b/src/JobsJobsJobs/App/src/views/listing/ListingView.vue
index 4c0ff0c..414429d 100644
--- a/src/JobsJobsJobs/App/src/views/listing/ListingView.vue
+++ b/src/JobsJobsJobs/App/src/views/listing/ListingView.vue
@@ -1,19 +1,15 @@
-<template>
-  <article>
-    <page-title :title="pageTitle" />
-    <load-data :load="retrieveListing">
-      <h3>{{it.listing.title}}</h3>
-      <h4 class="pb-3 text-muted">{{it.continent.name}} / {{it.listing.region}}</h4>
-      <p>
-        <template v-if="it.listing.neededBy">
-          <strong><em>NEEDED BY {{neededBy(it.listing.neededBy)}}</em></strong> &bull;
-        </template>
-        Listed by <a :href="profileUrl" target="_blank">{{citizenName(citizen)}}</a>
-      </p>
-      <hr>
-      <div v-html="details"></div>
-    </load-data>
-  </article>
+<template lang="pug">
+article
+  page-title(:title='pageTitle')
+  load-data(:load='retrieveListing')
+    h3 {{it.listing.title}}
+    h4.pb-3.text-muted {{it.continent.name}} / {{it.listing.region}}
+    p
+      template(v-if='it.listing.neededBy').
+        #[strong #[em NEEDED BY {{neededBy(it.listing.neededBy)}}]] &bull;
+      |  Listed by #[a(:href='profileUrl' target='_blank') {{citizenName(citizen)}}]
+    hr
+    div(v-html='details')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/listing/MyListings.vue b/src/JobsJobsJobs/App/src/views/listing/MyListings.vue
index 39ef743..33cc7e6 100644
--- a/src/JobsJobsJobs/App/src/views/listing/MyListings.vue
+++ b/src/JobsJobsJobs/App/src/views/listing/MyListings.vue
@@ -1,34 +1,23 @@
-<template>
-  <article>
-    <page-title title="My Job Listings" />
-    <h3 class="pb-3">My Job Listings</h3>
-    <p>
-      <router-link class="btn btn-outline-primary" to="/listing/new/edit">Add a New Job Listing</router-link>
-    </p>
-    <load-data :load="getListings">
-      <table v-if="listings.length > 0" class="table table-sm table-hover pt-3">
-        <thead>
-          <tr>
-            <th>Action</th>
-            <th>Title</th>
-            <th>Continent / Region</th>
-            <th>Created</th>
-            <th>Updated</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="it in listings" :key="it.listing.id">
-            <td><router-link :to="`/listing/${it.listing.id}/edit`">Edit</router-link></td>
-            <td>{{it.listing.title}}</td>
-            <td>{{it.continent.name}} / {{it.listing.region}}</td>
-            <td><full-date-time :date="it.listing.createdOn" /></td>
-            <td><full-date-time :date="it.listing.updatedOn" /></td>
-          </tr>
-        </tbody>
-      </table>
-      <p v-else class="fst-italic">No job listings found</p>
-    </load-data>
-  </article>
+<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")
+    table.table.table-sm.table-hover.pt-3(v-if='listings.length > 0')
+      thead: tr
+        th(scope='col') Action
+        th(scope='col') Title
+        th(scope='col') Continent / Region
+        th(scope='col') Created
+        th(scope='col') Updated
+      tbody: tr(v-for='it in listings' :key='it.listing.id')
+        td: router-link(:to='`/listing/${it.listing.id}/edit`') Edit
+        td {{it.listing.title}}
+        td {{it.continent.name}} / {{it.listing.region}}
+        td: full-date-time(:date='it.listing.createdOn')
+        td: full-date-time(:date='it.listing.updatedOn')
+    p.fst-italic(v-else) No job listings found
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/profile/ProfileSearch.vue b/src/JobsJobsJobs/App/src/views/profile/ProfileSearch.vue
index 6a42361..2c5aadd 100644
--- a/src/JobsJobsJobs/App/src/views/profile/ProfileSearch.vue
+++ b/src/JobsJobsJobs/App/src/views/profile/ProfileSearch.vue
@@ -1,43 +1,30 @@
-<template>
-  <article>
-    <page-title title="Search Profiles" />
-    <h3 class="pb-3">Search Profiles</h3>
-
-    <p v-if="!searched">
-      Enter one or more criteria to filter results, or just click &ldquo;Search&rdquo; to list all profiles.
-    </p>
-    <collapse-panel headerText="Search Criteria" :collapsed="isCollapsed" @toggle="toggleCollapse">
-      <profile-search-form v-model="criteria" @search="doSearch" />
-    </collapse-panel>
-    <error-list :errors="errors">
-      <p v-if="searching" class="pt-3">Searching profiles...</p>
-      <template v-else>
-        <table v-if="results.length > 0" class="table table-sm table-hover pt-3">
-          <thead>
-            <tr>
-              <th scope="col">Profile</th>
-              <th scope="col">Name</th>
-              <th scope="col" class="text-center">Seeking?</th>
-              <th scope="col" class="text-center">Remote?</th>
-              <th scope="col" class="text-center">Full-Time?</th>
-              <th scope="col">Last Updated</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="profile in results" :key="profile.citzenId">
-              <td><router-link :to="`/profile/${profile.citizenId}/view`">View</router-link></td>
-              <td :class="{ 'font-weight-bold' : profile.seekingEmployment }">{{profile.displayName}}</td>
-              <td class="text-center">{{yesOrNo(profile.seekingEmployment)}}</td>
-              <td class="text-center">{{yesOrNo(profile.remoteWork)}}</td>
-              <td class="text-center">{{yesOrNo(profile.fullTime)}}</td>
-              <td><full-date :date="profile.lastUpdatedOn" /></td>
-            </tr>
-          </tbody>
-        </table>
-        <p v-else-if="searched" class="pt-3">No results found for the specified criteria</p>
-      </template>
-    </error-list>
-  </article>
+<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.
+  collapse-panel(headerText='Search Criteria' :collapsed='isCollapsed' @toggle='toggleCollapse')
+    profile-search-form(v-model='criteria' @search='doSearch')
+  error-list(:errors='errors')
+    p.pt-3(v-if='searching') Searching profiles&hellip;
+    template(v-else)
+      table.table.table-sm.table-hover.pt-3(v-if='results.length > 0')
+        thead: tr
+          th(scope='col') Profile
+          th(scope='col') Name
+          th.text-center(scope='col') Seeking?
+          th.text-center(scope='col') Remote?
+          th.text-center(scope='col') Full-Time?
+          th(scope='col') Last Updated
+        tbody: tr(v-for='profile in results' :key='profile.citzenId')
+          td: router-link(:to='`/profile/${profile.citizenId}/view`') View
+          td(:class="{ 'font-weight-bold' : profile.seekingEmployment }") {{profile.displayName}}
+          td.text-center {{yesOrNo(profile.seekingEmployment)}}
+          td.text-center {{yesOrNo(profile.remoteWork)}}
+          td.text-center {{yesOrNo(profile.fullTime)}}
+          td: full-date(:date='profile.lastUpdatedOn')
+      p.pt-3(v-else-if='searched') No results found for the specified criteria
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/profile/ProfileView.vue b/src/JobsJobsJobs/App/src/views/profile/ProfileView.vue
index 3ac8e4e..914bf1d 100644
--- a/src/JobsJobsJobs/App/src/views/profile/ProfileView.vue
+++ b/src/JobsJobsJobs/App/src/views/profile/ProfileView.vue
@@ -1,37 +1,26 @@
-<template>
-  <article>
-    <page-title :title="pageTitle" />
-    <load-data :load="retrieveProfile">
-      <h2><a :href="it.citizen.profileUrl" target="_blank">{{it.citizen.citizenName()}}</a></h2>
-      <h4 class="pb-3">{{it.continent.name}}, {{it.profile.region}}</h4>
-      <p v-html="workTypes"></p>
-      <hr>
-      <div v-html="bioHtml"></div>
-
-      <template v-if="it.profile.skills.length > 0">
-        <hr>
-        <h4 class="pb-3">Skills</h4>
-        <ul>
-          <li v-for="(skill, idx) in it.profile.skills" :key="idx">
-            {{skill.description}}<template v-if="skill.notes"> ({{skill.notes}})</template>
-          </li>
-        </ul>
-      </template>
-
-      <template v-if="it.profile.experience">
-        <hr>
-        <h4 class="pb-3">Experience / Employment History</h4>
-        <div v-html="expHtml"></div>
-      </template>
-
-      <template v-if="user.citizenId === it.citizen.id">
-        <br><br>
-        <router-link class="btn btn-primary" to="/citizen/profile">
-          <icon icon="pencil" />&nbsp; Edit Your Profile
-        </router-link>
-      </template>
-    </load-data>
-  </article>
+<template lang="pug">
+article
+  page-title(:title='pageTitle')
+  load-data(:load='retrieveProfile')
+    h2: a(:href='it.citizen.profileUrl' target='_blank') {{citizenName(it.citizen)}}
+    h4.pb-3 {{it.continent.name}}, {{it.profile.region}}
+    p(v-html='workTypes')
+    hr
+    div(v-html='bioHtml')
+    template(v-if='it.profile.skills.length > 0')
+      hr
+      h4.pb-3 Skills
+      ul
+        li(v-for='(skill, idx) in it.profile.skills' :key='idx').
+          {{skill.description}}#[template(v-if='skill.notes') ({{skill.notes}})]
+    template(v-if='it.profile.experience')
+      hr
+      h4.pb-3 Experience / Employment History
+      div(v-html='expHtml')
+    template(v-if='user.citizenId === it.citizen.id')
+      br
+      br
+      router-link.btn.btn-primary(to='/citizen/profile') #[icon(icon='pencil')]&nbsp; Edit Your Profile
 </template>
 
 <script lang="ts">
@@ -90,6 +79,7 @@ export default defineComponent({
         it.value ? `Employment profile for ${citizenName(it.value.citizen)}` : 'Loading Profile...'),
       user,
       retrieveProfile,
+      citizenName,
       it,
       workTypes,
       bioHtml: computed(() => marked(it.value?.profile.biography || '', markedOptions)),
diff --git a/src/JobsJobsJobs/App/src/views/profile/Seeking.vue b/src/JobsJobsJobs/App/src/views/profile/Seeking.vue
index 5091306..ace462d 100644
--- a/src/JobsJobsJobs/App/src/views/profile/Seeking.vue
+++ b/src/JobsJobsJobs/App/src/views/profile/Seeking.vue
@@ -1,47 +1,30 @@
-<template>
-  <article>
-    <page-title title="People Seeking Work" />
-    <h3 class="pb-3">People Seeking Work</h3>
-
-    <p v-if="!searched">
-      Enter one or more criteria to filter results, or just click &ldquo;Search&rdquo; to list all profiles.
-    </p>
-    <collapse-panel headerText="Search Criteria" :collapsed="isCollapsed" @toggle="toggleCollapse">
-      <profile-public-search-form v-model="criteria" @search="doSearch" />
-    </collapse-panel>
-    <error-list :errors="errors">
-      <p v-if="searching">Searching profiles...</p>
-      <template v-else>
-        <template v-if="results.length > 0">
-          <p class="pb-3 pt-3">
-            These profiles match your search criteria. To learn more about these people, join the merry band of human
-            resources in the <a href="https://noagendashow.net" target="_blank">No Agenda</a> tribe!
-          </p>
-          <table class="table table-sm table-hover">
-            <thead>
-              <tr>
-                <th scope="col">Continent</th>
-                <th scope="col" class="text-center">Region</th>
-                <th scope="col" class="text-center">Remote?</th>
-                <th scope="col" class="text-center">Skills</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(profile, idx) in results" :key="idx">
-                <td>{{profile.continent}}</td>
-                <td>{{profile.region}}</td>
-                <td class="text-center">{{yesOrNo(profile.remoteWork)}}</td>
-                <td>
-                  <template v-for="(skill, idx) in profile.skills" :key="idx">{{skill}}<br></template>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </template>
-        <p v-else-if="searched" class="pt-3">No results found for the specified criteria</p>
-      </template>
-    </error-list>
-  </article>
+<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.
+  collapse-panel(headerText='Search Criteria' :collapsed='isCollapsed' @toggle='toggleCollapse')
+    profile-public-search-form(v-model='criteria' @search='doSearch')
+  error-list(:errors='errors')
+    p(v-if='searching') Searching profiles&hellip;
+    template(v-else)
+      template(v-if='results.length > 0')
+        p.pb-3.pt-3.
+          These profiles match your search criteria. To learn more about these people, join the merry band of human
+          resources in the #[a(href='https://noagendashow.net' target='_blank') No Agenda] tribe!
+        table.table.table-sm.table-hover
+          thead: tr
+            th(scope='col') Continent
+            th.text-center(scope='col') Region
+            th.text-center(scope='col') Remote?
+            th.text-center(scope='col') Skills
+          tbody: tr(v-for='(profile, idx) in results' :key='idx')
+            td {{profile.continent}}
+            td {{profile.region}}
+            td.text-center {{yesOrNo(profile.remoteWork)}}
+            td: template(v-for='(skill, idx) in profile.skills' :key='idx') {{skill}}#[br]
+      p.pt-3(v-else-if='searched') No results found for the specified criteria
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/so-long/DeletionOptions.vue b/src/JobsJobsJobs/App/src/views/so-long/DeletionOptions.vue
index 0ce3465..62bd6ec 100644
--- a/src/JobsJobsJobs/App/src/views/so-long/DeletionOptions.vue
+++ b/src/JobsJobsJobs/App/src/views/so-long/DeletionOptions.vue
@@ -1,38 +1,24 @@
-<template>
-  <article>
-    <page-title title="Account Deletion Options" />
-    <h3 class="pb-3">Account Deletion Options</h3>
-
-    <h4 class="pb-3">Option 1 &ndash; Delete Your Profile</h4>
-    <p>
-      Utilizing this option will remove your current employment profile and skills. This will preserve any success
-      stories you may have written, and preserves this application&rsquo;s knowledge of you. This is what you want to
-      use if you want to clear out your profile and start again (and remove the current one from others&rsquo; view).
-    </p>
-    <p class="text-center">
-      <button class="btn btn-danger" @click.prevent="deleteProfile">Delete Your Profile</button>
-    </p>
-
-    <hr>
-
-    <h4 class="pb-3">Option 2 &ndash; Delete Your Account</h4>
-    <p>
-      This option will make it like you never visited this site. It will delete your profile, skills, success stories,
-      and account. This is what you want to use if you want to disappear from this application. Clicking the button
-      below <strong>will not</strong> affect your No Agenda Social account in any way; its effects are limited to Jobs,
-      Jobs, Jobs.
-    </p>
-    <p>
-      <em>
-        (This will not revoke this application&rsquo;s permissions on No Agenda Social; you will have to remove this
-        yourself. The confirmation message has a link where you can do this; once the page loads, find the
-        <strong>Jobs, Jobs, Jobs</strong> entry, and click the <strong>&times; Revoke</strong> link for that entry.)
-      </em>
-    </p>
-    <p class="text-center">
-      <button class="btn btn-danger" @click.prevent="deleteAccount">Delete Your Entire Account</button>
-    </p>
-  </article>
+<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.
+    Utilizing this option will remove your current employment profile and skills. This will preserve any success stories
+    you may have written, and preserves this application&rsquo;s knowledge of you. This is what you want to use if you
+    want to clear out your profile and start again (and remove the current one from others&rsquo; view).
+  p.text-center: button.btn.btn-danger(@click.prevent='deleteProfile') Delete Your Profile
+  hr
+  h4.pb-3 Option 2 &ndash; Delete Your Account
+  p.
+    This option will make it like you never visited this site. It will delete your profile, skills, success stories, and
+    account. This is what you want to use if you want to disappear from this application. Clicking the button below
+    #[strong will not] affect your No Agenda Social account in any way; its effects are limited to Jobs, Jobs, Jobs.
+  p: em.
+    (This will not revoke this application&rsquo;s permissions on No Agenda Social; you will have to remove this
+    yourself. The confirmation message has a link where you can do this; once the page loads, find the
+    #[strong Jobs, Jobs, Jobs] entry, and click the #[strong &times; Revoke] link for that entry.)
+  p.text-center: button.btn.btn-danger(@click.prevent='deleteAccount') Delete Your Entire Account
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/so-long/DeletionSuccess.vue b/src/JobsJobsJobs/App/src/views/so-long/DeletionSuccess.vue
index 102eadf..7632c12 100644
--- a/src/JobsJobsJobs/App/src/views/so-long/DeletionSuccess.vue
+++ b/src/JobsJobsJobs/App/src/views/so-long/DeletionSuccess.vue
@@ -1,15 +1,11 @@
-<template>
-  <article>
-    <page-title title="Account Deletion Success" />
-    <h3 class="pb-3">Account Deletion Success</h3>
-    <p>
-      Your account has been successfully deleted. To revoke the permissions you have previously granted to this
-      application, find it in <a href="https://noagendasocial.com/oauth/authorized_applications">this list</a> and click
-      <strong>&times; Revoke</strong>. Otherwise, clicking &ldquo;Log On&rdquo; in the left-hand menu will create a new,
-      empty account without prompting you further.
-    </p>
-    <p>
-      Thank you for participating, and thank you for your courage. #GitmoNation
-    </p>
-  </article>
+<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
+    application, find it in #[a(href='https://noagendasocial.com/oauth/authorized_applications') this list] and click
+    #[strong &times; Revoke]. Otherwise, clicking &ldquo;Log On&rdquo; in the left-hand menu will create a new, empty
+    account without prompting you further.
+  p Thank you for participating, and thank you for your courage. #GitmoNation
 </template>
diff --git a/src/JobsJobsJobs/App/src/views/success-story/StoryEdit.vue b/src/JobsJobsJobs/App/src/views/success-story/StoryEdit.vue
index 057a454..9376334 100644
--- a/src/JobsJobsJobs/App/src/views/success-story/StoryEdit.vue
+++ b/src/JobsJobsJobs/App/src/views/success-story/StoryEdit.vue
@@ -1,34 +1,21 @@
-<template>
-  <article>
-    <page-title :title="title" />
-    <h3 class="pb-3">{{title}}</h3>
-
-    <load-data :load="retrieveStory">
-      <p v-if="isNew">
-        Congratulations on your employment! Your fellow citizens would enjoy hearing how it all came about; tell us
-        about it below! <em>(These will be visible to other users, but not to the general public.)</em>
-      </p>
-      <form class="row g-3">
-        <div class="col-12">
-          <div class="form-check">
-            <input type="checkbox" id="fromHere" class="form-check-input" v-model="v$.fromHere.$model">
-            <label for="fromHere" class="form-check-label">I found my employment here</label>
-          </div>
-        </div>
-        <markdown-editor id="story" label="The Success Story" v-model:text="v$.story.$model" />
-        <div class="col-12">
-          <button type="submit" class="btn btn-primary" @click.prevent="saveStory(true)">
-            <icon icon="content-save-outline" />&nbsp; Save
-          </button>
-          <p v-if="isNew">
-            <em>(Saving this will set &ldquo;Seeking Employment&rdquo; to &ldquo;No&rdquo; on your profile.)</em>
-          </p>
-        </div>
-      </form>
-    </load-data>
-    <maybe-save :isShown="confirmNavShown" :toRoute="nextRoute" :saveAction="doSave" :validator="v$"
-                @close="confirmClose" />
-  </article>
+<template lang="pug">
+article
+  page-title(:title='title')
+  h3.pb-3 {{title}}
+  load-data(:load='retrieveStory')
+    p(v-if='isNew').
+      Congratulations on your employment! Your fellow citizens would enjoy hearing how it all came about; tell us
+      about it below! #[em (These will be visible to other users, but not to the general public.)]
+    form.row.g-3
+      .col-12: .form-check
+        input.form-check-input(type='checkbox' id='fromHere' v-model='v$.fromHere.$model')
+        label.form-check-label(for='fromHere') I found my employment here
+      markdown-editor(id='story' label='The Success Story' v-model:text='v$.story.$model')
+      .col-12
+        button.btn.btn-primary(type='submit' @click.prevent='saveStory(true)').
+          #[icon(icon='content-save-outline')]&nbsp; Save
+        p(v-if='isNew'): em (Saving this will set &ldquo;Seeking Employment&rdquo; to &ldquo;No&rdquo; on your profile.)
+  maybe-save(:isShown='confirmNavShown' :toRoute='nextRoute' :saveAction='doSave' :validator='v$' @close='confirmClose')
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/success-story/StoryList.vue b/src/JobsJobsJobs/App/src/views/success-story/StoryList.vue
index 670cbab..572e0ce 100644
--- a/src/JobsJobsJobs/App/src/views/success-story/StoryList.vue
+++ b/src/JobsJobsJobs/App/src/views/success-story/StoryList.vue
@@ -1,38 +1,26 @@
-<template>
-  <article>
-    <page-title title="Success Stories" />
-    <h3 class="pb-3">Success Stories</h3>
-    <load-data :load="retrieveStories">
-      <table v-if="stories?.length > 0" class="table table-sm table-hover">
-        <thead>
-          <tr>
-            <th scope="col">Story</th>
-            <th scope="col">From</th>
-            <th scope="col">Found Here?</th>
-            <th scope="col">Recorded On</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="story in stories" :key="story.id">
-            <td>
-              <router-link v-if="story.hasStory" :to="`/success-story/${story.id}/view`">View</router-link>
-              <em v-else>None</em>
-              <template v-if="story.citizenId === user.citizenId">
-                ~ <router-link :to="`/success-story/${story.id}/edit`">Edit</router-link>
-              </template>
-            </td>
-            <td>{{story.citizenName}}</td>
-            <td>
-              <strong v-if="story.fromHere">Yes</strong>
-              <template v-else>No</template>
-            </td>
-            <td><full-date :date="story.recordedOn" /></td>
-          </tr>
-        </tbody>
-      </table>
-      <p v-else>There are no success stories recorded <em>(yet)</em></p>
-    </load-data>
-  </article>
+<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')
+      thead: tr
+        th(scope='col') Story
+        th(scope='col') From
+        th(scope='col') Found Here?
+        th(scope='col') Recorded On
+      tbody: tr(v-for='story in stories' :key='story.id')
+        td
+          router-link(v-if='story.hasStory' :to='`/success-story/${story.id}/view`') View
+          em(v-else) None
+          template(v-if='story.citizenId === user.citizenId')
+            |  ~ #[router-link(:to='`/success-story/${story.id}/edit`') Edit]
+        td {{story.citizenName}}
+        td
+          strong(v-if='story.fromHere') Yes
+          template(v-else) No
+        td: full-date(:date='story.recordedOn')
+    p(v-else) There are no success stories recorded #[em (yet)]
 </template>
 
 <script lang="ts">
diff --git a/src/JobsJobsJobs/App/src/views/success-story/StoryView.vue b/src/JobsJobsJobs/App/src/views/success-story/StoryView.vue
index 18fca91..b757bc7 100644
--- a/src/JobsJobsJobs/App/src/views/success-story/StoryView.vue
+++ b/src/JobsJobsJobs/App/src/views/success-story/StoryView.vue
@@ -1,14 +1,12 @@
-<template>
-  <article>
-  <page-title title="Success Story" />
-    <load-data :load="retrieveStory">
-      <h3 class="pb-3">{{citizenName}}&rsquo;s Success Story</h3>
-      <h4 class="text-muted"><full-date-time :date="story.recordedOn" /></h4>
-      <p v-if="story.fromHere" class="fst-italic"><strong>Found via Jobs, Jobs, Jobs</strong></p>
-      <hr>
-      <div v-if="story.story" v-html="successStory"></div>
-    </load-data>
-  </article>
+<template lang="pug">
+article
+  page-title(title='Success Story')
+  load-data(:load='retrieveStory')
+    h3.pb-3 {{citizenName}}&rsquo;s Success Story
+    h4.text-muted: full-date-time(:date='story.recordedOn')
+    p.fst-italic(v-if='story.fromHere'): strong Found via Jobs, Jobs, Jobs
+    hr
+    div(v-if='story.story' v-html='successStory')
 </template>
 
 <script lang="ts">