src/JobsJobsJobs/Api/Data.fs

@@ -381,6 +381,16 @@ module Continent =
     withReconn(conn).ExecuteAsync(fun () ->
         r.Table(Table.Continent)
           .RunResultAsync<Continent list> conn)
+  
+  /// Get a continent by its ID
+  let findById (contId : ContinentId) conn = task {
+    let! continent =
+      withReconn(conn).ExecuteAsync(fun () ->
+          r.Table(Table.Continent)
+            .Get(contId)
+            .RunResultAsync<Continent> conn)
+    return toOption continent
+  }
 
 
 /// Job listing data access functions

src/JobsJobsJobs/Api/Handlers.fs

@@ -203,6 +203,29 @@ module Profile =
       | Some profile -> return! json profile next ctx
       | None -> return! Error.notFound next ctx
       }
+
+  // GET: /api/profile/view/[id]
+  let view citizenId : HttpHandler =
+    authorize
+    >=> fun next ctx -> task {
+      let citId  = CitizenId citizenId
+      let dbConn = conn ctx
+      match! Data.Profile.findById citId dbConn with
+      | Some profile ->
+          match! Data.Citizen.findById citId dbConn with
+          | Some citizen ->
+              match! Data.Continent.findById profile.continentId dbConn with
+              | Some continent ->
+                  return!
+                    json {
+                      profile   = profile
+                      citizen   = citizen
+                      continent = continent
+                      } next ctx
+              | None -> return! Error.notFound next ctx
+          | None -> return! Error.notFound next ctx
+      | None -> return! Error.notFound next ctx
+      }
   
   // GET: /api/profile/count
   let count : HttpHandler =
@@ -365,6 +388,7 @@ let allEndpoints = [
         route  ""               Profile.current
         route  "/count"         Profile.count
         routef "/get/%O"        Profile.get
+        routef "/view/%O"       Profile.view
         route  "/public-search" Profile.publicSearch
         route  "/search"        Profile.search
         ]

src/JobsJobsJobs/App/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jobs-jobs-jobs",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1353,6 +1353,12 @@
       "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==",
       "dev": true
     },
+    "@types/marked": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-2.0.4.tgz",
+      "integrity": "sha512-L9VRSe0Id8xbPL99mUo/4aKgD7ZoRwFZqUQScNKHi2pFjF9ZYSMNShUHD6VlMT6J/prQq0T1mxuU25m3R7dFzg==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -8454,6 +8460,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz",
+      "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

src/JobsJobsJobs/App/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@mdi/font": "5.9.55",
     "core-js": "^3.6.5",
+    "marked": "^2.1.3",
     "roboto-fontface": "*",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
@@ -18,6 +19,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/marked": "^2.0.4",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",

src/JobsJobsJobs/App/src/App.vue

@@ -8,7 +8,11 @@
     </v-app-bar>
     <v-main>
       <v-container fluid>
-        <router-view></router-view>
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
       </v-container>
     </v-main>
     <v-footer app>
@@ -29,11 +33,6 @@ export default defineComponent({
     AppFooter,
     AppNav,
     TitleBar
-  },
-  setup () {
-    return {
-      //
-    }
   }
 })
 </script>
@@ -66,4 +65,11 @@ ul
   justify-content: center
 .v-footer
   flex-direction: row-reverse
+// Route transitions
+.fade-enter-active,
+.fade-leave-active
+  transition: opacity 0.125s ease
+.fade-enter-from,
+.fade-leave-to
+  opacity: 0
 </style>

src/JobsJobsJobs/App/src/api/index.ts

@@ -1,4 +1,5 @@
-import { Citizen, Continent, Count, LogOnSuccess, Profile } from './types'
+import { MarkedOptions } from 'marked'
+import { Citizen, Continent, Count, LogOnSuccess, Profile, ProfileForView } from './types'
 
 /**
  * Create a URL that will access the API
@@ -24,6 +25,31 @@ const reqInit = (method : string, user : LogOnSuccess) : RequestInit => {
   }
 }
 
+/**
+ * Retrieve a result for an API call
+ *
+ * @param resp The response received from the API
+ * @param action The action being performed (used in error messages)
+ * @returns The expected result (if found), undefined (if not found), or an error string
+ */
+async function apiResult<T> (resp : Response, action : string) : Promise<T | undefined | string> {
+  if (resp.status === 200) return await resp.json() as T
+  if (resp.status === 404) return undefined
+  return `Error ${action} - ${await resp.text()}`
+}
+
+/**
+ * Run an API action that does not return a result
+ *
+ * @param resp The response received from the API call
+ * @param action The action being performed (used in error messages)
+ * @returns Undefined (if successful), or an error string
+ */
+const apiAction = async (resp : Response, action : string) : Promise<string | undefined> => {
+  if (resp.status === 200) return undefined
+  return `Error ${action} - ${await resp.text()}`
+}
+
 export default {
 
   /** API functions for citizens */
@@ -48,11 +74,8 @@ export default {
      * @param user The currently logged-on user
      * @returns The citizen, or an error
      */
-    retrieve: async (id : string, user : LogOnSuccess) : Promise<Citizen | string> => {
-      const resp = await fetch(apiUrl(`citizen/get/${id}`), reqInit('GET', user))
-      if (resp.status === 200) return await resp.json() as Citizen
-      return `Error retrieving citizen ${id} - ${await resp.text()}`
-    },
+    retrieve: async (id : string, user : LogOnSuccess) : Promise<Citizen | string | undefined> =>
+      apiResult<Citizen>(await fetch(apiUrl(`citizen/get/${id}`), reqInit('GET', user)), `retrieving citizen ${id}`),
 
     /**
      * Delete the current citizen's entire Jobs, Jobs, Jobs record
@@ -60,11 +83,8 @@ export default {
      * @param user The currently logged-on user
      * @returns Undefined if successful, an error if not
      */
-    delete: async (user : LogOnSuccess) : Promise<string | undefined> => {
-      const resp = await fetch(apiUrl('citizen'), reqInit('DELETE', user))
-      if (resp.status === 200) return undefined
-      return `Error deleting citizen - ${await resp.text()}`
-    }
+    delete: async (user : LogOnSuccess) : Promise<string | undefined> =>
+      apiAction(await fetch(apiUrl('citizen'), reqInit('DELETE', user)), 'deleting citizen')
   },
 
   /** API functions for continents */
@@ -75,11 +95,8 @@ export default {
      *
      * @returns All continents, or an error
      */
-    all: async () : Promise<Continent[] | string> => {
-      const resp = await fetch(apiUrl('continent/all'), { method: 'GET' })
-      if (resp.status === 200) return await resp.json() as Continent[]
-      return `Error retrieving continents - ${await resp.text()}`
-    }
+    all: async () : Promise<Continent[] | string | undefined> =>
+      apiResult<Continent[]>(await fetch(apiUrl('continent/all'), { method: 'GET' }), 'retrieving continents')
   },
 
   /** API functions for profiles */
@@ -99,6 +116,16 @@ export default {
       if (resp.status !== 204) return `Error retrieving profile - ${await resp.text()}`
     },
 
+    /**
+     * Retrieve a profile for viewing
+     *
+     * @param id The ID of the profile to retrieve for viewing
+     * @param user The currently logged-on user
+     * @returns The profile (if found), undefined (if not found), or an error string
+     */
+    retreiveForView: async (id : string, user : LogOnSuccess) : Promise<ProfileForView | string | undefined> =>
+      apiResult<ProfileForView>(await fetch(apiUrl(`profile/view/${id}`), reqInit('GET', user)), 'retrieving profile'),
+
     /**
      * Count profiles in the system
      *
@@ -120,12 +147,15 @@ export default {
      * @param user The currently logged-on user
      * @returns Undefined if successful, an error if not
      */
-    delete: async (user : LogOnSuccess) : Promise<string | undefined> => {
-      const resp = await fetch(apiUrl('profile'), reqInit('DELETE', user))
-      if (resp.status === 200) return undefined
-      return `Error deleting profile - ${await resp.text()}`
-    }
+    delete: async (user : LogOnSuccess) : Promise<string | undefined> =>
+      apiAction(await fetch(apiUrl('profile'), reqInit('DELETE', user)), 'deleting profile')
   }
 }
 
+/** The standard Jobs, Jobs, Jobs options for `marked` (GitHub-Flavo(u)red Markdown (GFM) with smart quotes) */
+export const markedOptions : MarkedOptions = {
+  gfm: true,
+  smartypants: true
+}
+
 export * from './types'

src/JobsJobsJobs/App/src/api/types.ts

@@ -71,6 +71,16 @@ export interface Profile {
   skills : Skill[]
 }
 
+/** The data required to show a viewable profile */
+export interface ProfileForView {
+  /** The profile itself */
+  profile : Profile
+  /** The citizen to whom the profile belongs */
+  citizen : Citizen
+  /** The continent for the profile */
+  continent : Continent
+}
+
 /** A count */
 export interface Count {
   /** The count being returned */

src/JobsJobsJobs/App/src/components/MarkdownEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <nav class="nav nav-pills">
-    <a href="#" class="nav-link @MarkdownClass" @click.prevent="showMarkdown">Markdown</a>
-    <a href="#" class="nav-link @PreviewClass" @click.prevent="showPreview">Preview</a>
+    <v-btn rounded="pill" :color="sourceColor" @click="showMarkdown">Markdown</v-btn> &nbsp;
+    <v-btn rounded="pill" :color="previewColor" @click="showPreview">Preview</v-btn>
   </nav>
   <section v-if="preview" class="preview" v-html="previewHtml">
   </section>
@@ -10,7 +10,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+import marked from 'marked'
+import { markedOptions } from '../api'
+
 export default defineComponent({
   name: 'MarkdownEditor',
   props: {
@@ -32,12 +35,13 @@ export default defineComponent({
     const previewHtml = ref('')
 
     /** Show the Markdown source */
-    const showMarkdown = () => { preview.value = false }
+    const showMarkdown = () => {
+      preview.value = false
+    }
 
     /** Show the Markdown preview */
     const showPreview = () => {
-      // TODO: render markdown as HTML
-      previewHtml.value = props.text
+      previewHtml.value = marked(props.text, markedOptions)
       preview.value = true
     }
 
@@ -45,8 +49,15 @@ export default defineComponent({
       preview,
       previewHtml,
       showMarkdown,
-      showPreview
+      showPreview,
+      sourceColor: computed(() => preview.value ? '' : 'primary'),
+      previewColor: computed(() => preview.value ? 'primary' : '')
     }
   }
 })
 </script>
+
+<style lang="sass" scoped>
+textarea
+  width: 100%
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <p v-if="false"></p>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue'
+
+export default defineComponent({
+  name: 'PageTitle',
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  setup (props) {
+    /** The name of the application */
+    const appName = 'Jobs, Jobs, Jobs'
+
+    /** Set the page title based on the input title attribute */
+    const setTitle = () => {
+      if (props.title === '') {
+        document.title = appName
+      } else {
+        document.title = `${props.title} | ${appName}`
+      }
+    }
+
+    onMounted(setTitle)
+
+    return {
+      setTitle
+    }
+  },
+  watch: {
+    title: 'setTitle'
+  }
+})
+</script>

src/JobsJobsJobs/App/src/main.ts

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

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

@@ -4,8 +4,11 @@ import api, { Continent, LogOnSuccess } from '../api'
 
 /** The state tracked by the application */
 export interface State {
+  /** The currently logged-on user */
   user: LogOnSuccess | undefined
+  /** The state of the log on process */
   logOnState: string
+  /** All continents (use `ensureContinents` action) */
   continents: Continent[]
 }
 
@@ -26,13 +29,13 @@ export default createStore({
     }
   },
   mutations: {
-    setUser (state, user: LogOnSuccess) {
+    setUser (state, user : LogOnSuccess) {
       state.user = user
     },
     clearUser (state) {
       state.user = undefined
     },
-    setLogOnState (state, message) {
+    setLogOnState (state, message : string) {
       state.logOnState = message
     },
     setContinents (state, continents : Continent[]) {

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

@@ -1,14 +1,17 @@
 <template>
-  <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>
+    <page-title title="Welcome!" />
+    <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>
 
 <script lang="ts">

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

@@ -1,79 +1,83 @@
 <template>
-  <h3>How It Works</h3>
+  <article>
+    <page-title title="How It Works" />
+    <h3>How It Works</h3>
 
-  <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>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</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>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</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>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</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>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>
+    <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>
 </template>

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

@@ -1,411 +1,414 @@
 <template>
+  <article>
+    <page-title title="Privacy Policy" />
+    <h3>Privacy Policy</h3>
+    <p><em>(as of February 6<sup>th</sup>, 2021)</em></p>
 
-  <h3>Privacy Policy</h3>
-  <p><em>(as of February 6<sup>th</sup>, 2021)</em></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>
+    <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>
-  <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>
+    <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</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>
+    <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>
 
-  <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?</h4>
+    <p>
+      We collect information from you when you visit our website, register on our site, or fill out a form.
+    </p>
 
-  <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>
+    <ul>
+      <li>Name / Username</li>
+      <li>Coarse Geographic Location</li>
+      <li>Employment History</li>
+      <li>No Agenda Social Account Name / Profile</li>
+    </ul>
 
-  <ul>
-    <li>Name / Username</li>
-    <li>Coarse Geographic Location</li>
-    <li>Employment History</li>
-    <li>No Agenda Social Account Name / Profile</li>
-  </ul>
+    <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>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 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>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>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>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>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>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>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>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 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 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 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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>Cookies</h4>
+    <p>{{name}} does not use Cookies.</p>
 
-  <h4>Cookies</h4>
-  <p>{{name}} does not use Cookies.</p>
+    <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>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>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>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>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>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>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>
 
-  <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>
+    <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>
 
-  <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>
+    <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>
 
-  <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>
+    <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>
 
-  <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>
+    <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>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>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>
 
-  <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>
+    <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 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>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>
+    <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>
 </template>
 
 <script lang="ts">

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

@@ -1,40 +1,43 @@
 <template>
-  <h3>Terms of Service</h3>
-  <p><em>(as of February 6<sup>th</sup>, 2021)</em></p>
+  <article>
+    <page-title title="Terms of Service" />
+    <h3>Terms of Service</h3>
+    <p><em>(as of February 6<sup>th</sup>, 2021)</em></p>
 
-  <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</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>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</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>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</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>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</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>
 
-  <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>
+    <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>
 </template>

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

@@ -1,5 +1,8 @@
 <template>
-  <p>{{message}}</p>
+  <article>
+    <page-title title="Logging on..." />
+    <p>{{message}}</p>
+  </article>
 </template>
 
 <script lang="ts">

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

@@ -1,35 +1,39 @@
 <template>
-  <h3>Welcome, {{user.name}}</h3>
-  <load-data :load="retrieveData">
-    <template v-if="profile">
+  <article>
+    <page-title title="Dashboard" />
+    <h3>Welcome, {{user.name}}</h3>
+    <load-data :load="retrieveData">
+      <template v-if="profile">
+        <p>
+          Your employment profile was last updated {{profile.lastUpdatedOn}}. Your profile currently lists
+          {{profile.skills.length}} skill<span v-if="profile.skills.length !== 1">s</span>.
+        </p>
+        <p><router-link :to="'/profile/view/' + user.citizenId">View Your Employment Profile</router-link></p>
+        <p v-if="profile.seekingEmployment">
+          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>
+        </p>
+      </template>
+      <template v-else>
+        <p>
+          You do not have an employment profile established; click &ldquo;Edit Profile&rdquo; in the menu to get
+          started!
+        </p>
+      </template>
+      <hr>
       <p>
-        Your employment profile was last updated {{profile.lastUpdatedOn}}. Your profile currently lists
-        {{profile.skills.length}} skill<span v-if="profile.skills.length !== 1">s</span>.
+        There <template v-if="profileCount === 1">is</template><template v-else>are</template>&nbsp;
+        <template v-if="profileCount === 0">no</template><template v-else>{{profileCount}}</template>
+        employment profile<template v-if="profileCount !== 1">s</template> from citizens of Gitmo Nation.
+        <template v-if="profileCount > 0">Take a look around and see if you can help them find work!</template>
       </p>
-      <p><router-link :to="'/profile/view/' + user.citizenId">View Your Employment Profile</router-link></p>
-      <p v-if="profile.seekingEmployment">
-        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>
-      </p>
-    </template>
-    <template v-else>
-      <p>
-        You do not have an employment profile established; click &ldquo;Edit Profile&rdquo; in the menu to get
-        started!
-      </p>
-    </template>
+    </load-data>
     <hr>
     <p>
-      There <span v-if="profileCount === 1">is</span><span v-else>are</span> <span v-if="profileCount === 0">no</span><span v-else>{{profileCount}}</span>
-      employment profile<span v-if="profileCount !== 1">s</span> from citizens of Gitmo Nation.
-      <span v-if="profileCount > 0">Take a look around and see if you can help them find work!</span>
+      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>
-  </load-data>
-  <hr>
-  <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>
 
 <script lang="ts">

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

@@ -1,112 +1,116 @@
 <template>
-  <h3>Employment Profile</h3>
-
-  <load-data :load="retrieveData">
-    <form>
-      <v-container>
-        <v-row>
-          <v-col cols="12" sm="10" md="8" lg="6">
-            <label for="realName">Real Name</label>
-            <input type="text" id="realName" v-model="realName" maxlength="255"
-                   placeholder="Leave blank to use your NAS display name">
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <label>
-              <input type="checkbox" v-model="profile.seekingEmployment">
-              I am currently seeking employment
-            </label>
-            <em v-if="profile?.seekingEmployment">&nbsp; &nbsp; If you have found employment, consider
-              <router-link to="/success-story/add">telling your fellow citizens about it</router-link>
-            </em>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12" sm="6" md="4">
-            <label for="continentId" class="jjj-required">Continent</label>
-            <select id="continentId">
-              <option v-for="c in continents" :key="c.id" :value="c.id"
-                      :selected="c.id === profile?.continentId ? 'selected' : null">{{c.name}}</option>
-            </select>
-          </v-col>
-          <v-col cols="12" sm="6" md="8">
-            <label for="region" class="jjj-required">Region</label>
-            <input type="text" id="region" v-model="profile.region" maxlength="255"
-                   placeholder="Country, state, geographic area, etc.">
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <label for="bio" class="jjj-required">Professional Biography</label>
-            <markdown-editor id="bio" v-model:text="profile.biography" />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12" sm="12" offset-md="2" md="4">
-            <label>
-              <input type="checkbox" v-model="profile.remoteWork">
-              I am looking for remote work
-            </label>
-          </v-col>
-          <v-col cols="12" sm="12" md="4">
-            <label>
-              <input type="checkbox" v-model="profile.fullTime">
-              I am looking for full-time work
-            </label>
-          </v-col>
-        </v-row>
-        <hr>
-        <h4>
-          Skills &nbsp;
-          <button type="button" class="btn btn-outline-primary" @onclick="AddNewSkill">Add a Skill</button>
-        </h4>
-        @foreach (var skill in ProfileForm.Skills)
-        {
-          [SkillEdit Skill=@skill OnRemove=@RemoveSkill /]
-        }
-        <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>
-        <v-row>
-          <v-col>
-            <markdown-editor id="experience" v-model:text="profile.experience" />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <label>
-              <input type="checkbox" v-model="profile.isPublic">
-              Allow my profile to be searched publicly (outside NA Social)
-            </label>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <br>
-            <button type="submit" class="btn btn-outline-primary">Save</button>
-          </v-col>
-        </v-row>
-      </v-container>
-    </form>
-    <p v-if="!isNew">
-      <br><router-link :to="`/profile/view/${user.citizenId}`"><v-icon icon="file-account-outline" /> View Your User
-      Profile</router-link>
+  <article>
+    <page-title title="Edit Profile" />
+    <h3>Employment Profile</h3>
+    <load-data :load="retrieveData">
+      <form>
+        <v-container>
+          <v-row>
+            <v-col cols="12" sm="10" md="8" lg="6">
+              <label for="realName">Real Name</label>
+              <input type="text" id="realName" v-model="realName" maxlength="255"
+                    placeholder="Leave blank to use your NAS display name">
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <label>
+                <input type="checkbox" v-model="profile.seekingEmployment">
+                I am currently seeking employment
+              </label>
+              <em v-if="profile?.seekingEmployment">&nbsp; &nbsp; If you have found employment, consider
+                <router-link to="/success-story/add">telling your fellow citizens about it</router-link>
+              </em>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" sm="6" md="4">
+              <label for="continentId" class="jjj-required">Continent</label>
+              <select id="continentId">
+                <option v-for="c in continents" :key="c.id" :value="c.id"
+                        :selected="c.id === profile?.continentId ? 'selected' : null">{{c.name}}</option>
+              </select>
+            </v-col>
+            <v-col cols="12" sm="6" md="8">
+              <label for="region" class="jjj-required">Region</label>
+              <input type="text" id="region" v-model="profile.region" maxlength="255"
+                    placeholder="Country, state, geographic area, etc.">
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <label for="bio" class="jjj-required">Professional Biography</label>
+              <markdown-editor id="bio" v-model:text="profile.biography" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" sm="12" offset-md="2" md="4">
+              <label>
+                <input type="checkbox" v-model="profile.remoteWork">
+                I am looking for remote work
+              </label>
+            </v-col>
+            <v-col cols="12" sm="12" md="4">
+              <label>
+                <input type="checkbox" v-model="profile.fullTime">
+                I am looking for full-time work
+              </label>
+            </v-col>
+          </v-row>
+          <hr>
+          <h4>
+            Skills &nbsp;
+            <button type="button" class="btn btn-outline-primary" @onclick="AddNewSkill">Add a Skill</button>
+          </h4>
+          @foreach (var skill in ProfileForm.Skills)
+          {
+            [SkillEdit Skill=@skill OnRemove=@RemoveSkill /]
+          }
+          <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>
+          <v-row>
+            <v-col>
+              <markdown-editor id="experience" v-model:text="profile.experience" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <label>
+                <input type="checkbox" v-model="profile.isPublic">
+                Allow my profile to be searched publicly (outside NA Social)
+              </label>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <br>
+              <v-btn text color="primary">Save</v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+      </form>
+      <p v-if="!isNew">
+        <br>
+        <v-btn color="primary" @click="viewProfile">
+          <v-icon icon="mdi-file-account-outline" />&nbsp; View Your User Profile
+        </v-btn>
+      </p>
+    </load-data>
+    <p>
+      <br>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>
-  </load-data>
-  <p>
-    <br>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>
-
+  </article>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, Ref, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import api, { LogOnSuccess, Profile } from '../../api'
 import MarkdownEditor from '../../components/MarkdownEditor.vue'
 import LoadData from '../../components/shared/LoadData.vue'
@@ -120,6 +124,7 @@ export default defineComponent({
   },
   setup () {
     const store = useStore()
+    const router = useRouter()
 
     /** The currently logged-on user */
     const user = store.state.user as LogOnSuccess
@@ -148,7 +153,7 @@ export default defineComponent({
       const nameResult = await api.citizen.retrieve(user.citizenId, user)
       if (typeof nameResult === 'string') {
         errors.push(nameResult)
-      } else {
+      } else if (typeof nameResult !== 'undefined') {
         realName.value = nameResult.realName || ''
       }
     }
@@ -159,7 +164,8 @@ export default defineComponent({
       isNew,
       profile,
       realName,
-      continents: computed(() => store.state.continents)
+      continents: computed(() => store.state.continents),
+      viewProfile: () => router.push(`/profile/view/${user.citizenId}`)
     }
   }
 })

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

@@ -1,5 +1,8 @@
 <template>
-  <p>Logging off&hellip;</p>
+  <article>
+    <page-title title="Logging off..." />
+    <p>Logging off&hellip;</p>
+  </article>
 </template>
 
 <script lang="ts">

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

@@ -1,19 +1,103 @@
 <template>
-  <p>TODO: convert this template</p>
+  <article>
+    <page-title :title="pageTitle" />
+    <load-data :load="retrieveProfile">
+      <h2><a :href="it.citizen.profileUrl" target="_blank">{{citizenName}}</a></h2>
+      <h4>{{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>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>Experience / Employment History</h4>
+        <div v-html="expHtml"></div>
+      </template>
+
+      <template v-if="user.citizenId === it.citizen.id">
+        <br><br>
+        <v-btn color="primary" @click="editProfile"><v-icon icon="mdi-pencil" />&nbsp; Edit Your Profile</v-btn>
+      </template>
+    </load-data>
+  </article>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, defineComponent, ref, Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import marked from 'marked'
+import LoadData from '../../components/shared/LoadData.vue'
+import { useStore } from '../../store'
+import api, { LogOnSuccess, markedOptions, ProfileForView } from '../../api'
 
 export default defineComponent({
   name: 'ProfileEdit',
+  components: { LoadData },
   setup () {
+    const store = useStore()
     const route = useRoute()
-    const profileId = route.params.id
+    const router = useRouter()
+
+    /** The currently logged-on user */
+    const user = store.state.user as LogOnSuccess
+
+    /** The requested profile */
+    const it : Ref<ProfileForView | undefined> = ref(undefined)
+
+    /** The citizen's name (real, display, or NAS, whichever is found first) */
+    const citizenName = computed(() => {
+      const c = it.value?.citizen
+      return c?.realName || c?.displayName || c?.naUser || ''
+    })
+
+    /** The work types for the top of the page */
+    const workTypes = computed(() => {
+      const parts : string[] = []
+      if (it.value) {
+        const p = it.value.profile
+        if (p.seekingEmployment) {
+          parts.push('<strong><em>CURRENTLY SEEKING EMPLOYMENT</em></strong>')
+        } else {
+          parts.push('Not actively seeking employment')
+        }
+        parts.push(`${p.fullTime ? 'I' : 'Not i'}nterested in full-time employment`)
+        parts.push(`${p.remoteWork ? 'I' : 'Not i'}nterested in remote opportunities`)
+      }
+      return parts.join(' &bull; ')
+    })
+
+    /** Retrieve the profile and supporting data */
+    const retrieveProfile = async (errors : string[]) => {
+      const profileResp = await api.profile.retreiveForView(route.params.id as string, user)
+      if (typeof profileResp === 'string') {
+        errors.push(profileResp)
+      } else if (typeof profileResp === 'undefined') {
+        errors.push('Profile not found')
+      } else {
+        it.value = profileResp
+      }
+    }
 
     return {
-      profileId
+      pageTitle: computed(() => it.value ? `Employment profile for ${citizenName.value}` : 'Loading Profile...'),
+      user,
+      retrieveProfile,
+      it,
+      workTypes,
+      citizenName,
+      bioHtml: computed(() => marked(it.value?.profile.biography || '', markedOptions)),
+      expHtml: computed(() => marked(it.value?.profile.experience || '', markedOptions)),
+      editProfile: () => router.push('/citizen/profile')
     }
   }
 })

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

@@ -1,37 +1,40 @@
 <template>
-  <h3>Account Deletion Options</h3>
+  <article>
+    <page-title title="Account Deletion Options" />
+    <h3>Account Deletion Options</h3>
 
-  <p v-if="error !== ''">{{error}}</p>
+    <p v-if="error !== ''">{{error}}</p>
 
-  <h4>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="deleteProfile">Delete Your Profile</button>
-  </p>
+    <h4>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">
+      <v-btn color="error" @click="deleteProfile">Delete Your Profile</v-btn>
+    </p>
 
-  <hr>
+    <hr>
 
-  <h4>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="deleteAccount">Delete Your Entire Account</button>
-  </p>
+    <h4>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">
+      <v-btn color="error" @click="deleteAccount">Delete Your Entire Account</v-btn>
+    </p>
+  </article>
 </template>
 
 <script lang="ts">

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

@@ -1,12 +1,15 @@
 <template>
-  <h3>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>
+    <page-title title="Account Deletion Success" />
+    <h3>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>

src/JobsJobsJobs/Domain/SharedTypes.fs

@@ -122,6 +122,17 @@ type ProfileSearchResult = {
   }
 
 
+/// The data required to show a viewable profile
+type ProfileForView = {
+  /// The profile itself
+  profile : Profile
+  /// The citizen to whom the profile belongs
+  citizen : Citizen
+  /// The continent for the profile
+  continent : Continent
+}
+
+
 /// The parameters for a public job search
 type PublicSearch = {
   /// Retrieve citizens from this continent