From e883cac88860a441c1a06ae78bd59bba267a148d Mon Sep 17 00:00:00 2001
From: rimutaka <max@onebro.me>
Date: Sat, 5 Oct 2024 21:09:51 +1300
Subject: [PATCH] Added PrimeVue components

---
 README.md                         | 12 +++++
 vue/package-lock.json             | 81 ++++++++++++++++++++++++++++++-
 vue/package.json                  |  4 +-
 vue/src/App.vue                   | 14 ++----
 vue/src/assets/main.css           | 16 +++++-
 vue/src/components/HelloWorld.vue | 14 ------
 vue/src/components/TheWelcome.vue | 71 +--------------------------
 vue/src/components/TopHeader.vue  |  6 +++
 vue/src/components/TopMenu.vue    | 53 ++++++++++++++++++++
 vue/src/main.ts                   |  8 +++
 10 files changed, 181 insertions(+), 98 deletions(-)
 delete mode 100644 vue/src/components/HelloWorld.vue
 create mode 100644 vue/src/components/TopHeader.vue
 create mode 100644 vue/src/components/TopMenu.vue

diff --git a/README.md b/README.md
index 09065d8..de18a96 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,10 @@ Technical features:
 
 ## Deployment
 
+### Dev env
+
+* Front-end: `npm run build` + `git push` to let [.github/workflows/deploy.yml] copy the built files to the S3 bucket.
+
 ## Management
 
 ### Adding, editing and removing questions
@@ -51,3 +55,11 @@ Technical features:
 ### Managing learner accounts
 
 ### Viewing stats
+
+## Tech stack and attribution
+
+* Cheese logo nicked from https://www.freepik.com/icon/cheese_4900716
+* Front-end: Vue
+* CSS: https://v2.tailwindcss.com/docs/
+* UI components: https://primevue.org/
+* 
\ No newline at end of file
diff --git a/vue/package-lock.json b/vue/package-lock.json
index 95b1237..03f8fc1 100644
--- a/vue/package-lock.json
+++ b/vue/package-lock.json
@@ -8,6 +8,8 @@
       "name": "vue",
       "version": "0.0.0",
       "dependencies": {
+        "@primevue/themes": "^4.0.7",
+        "primevue": "^4.0.7",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3"
       },
@@ -25,7 +27,7 @@
         "eslint-plugin-vue": "^9.23.0",
         "npm-run-all2": "^6.2.0",
         "postcss": "^8.4.47",
-        "prettier": "^3.2.5",
+        "prettier": "^3.3.3",
         "tailwindcss": "^3.4.13",
         "typescript": "~5.4.0",
         "vite": "^5.3.1",
@@ -1266,6 +1268,68 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
+      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
+      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.7.tgz",
+      "integrity": "sha512-SvWiNBEeR6hm4wjnze+rITUjHMFLwIzpRFlq+GqmJyZmjJy4h8UUksi0EoyqAWCAwKgmwlxY6XNqGJmMVyOguQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.7.tgz",
+      "integrity": "sha512-tj4dfRdV5iN6O0mbkpjhMsGlT3wZTqOPL779ndY5gKuCwN5zcFmKmABWVQmr/ClRivnMkw6Yr1x6gRTV/N0ydg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/themes": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.7.tgz",
+      "integrity": "sha512-ZbDUrpBmtuqdeegNwUaJTubaLDBBJWOc4Z6UoQM3DG2c7EAE19wQbuh+cG9zqA7sT/Xsp+ACC/Z9e4FnfqB55g==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
@@ -4753,6 +4817,21 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/primevue": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.7.tgz",
+      "integrity": "sha512-88qazHqldkqsCxvhjnjO65XMBfJyHQoFW3BQvrJYO6RqPheHB4f7cY61eqtBpJAjnM5x+YKTZiWx/gBuUzqT7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.7",
+        "@primevue/icons": "4.0.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/vue/package.json b/vue/package.json
index 035a9d5..7c632d1 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -13,6 +13,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@primevue/themes": "^4.0.7",
+    "primevue": "^4.0.7",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },
@@ -30,7 +32,7 @@
     "eslint-plugin-vue": "^9.23.0",
     "npm-run-all2": "^6.2.0",
     "postcss": "^8.4.47",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "tailwindcss": "^3.4.13",
     "typescript": "~5.4.0",
     "vite": "^5.3.1",
diff --git a/vue/src/App.vue b/vue/src/App.vue
index 10059c3..88bff2a 100644
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -1,19 +1,13 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import TopMenu from './components/TopMenu.vue'
+import TopHeader from './components/TopHeader.vue';
 </script>
 
 <template>
   <header>
-    <img alt="Bite-sized Learning Logo" class="p-2 w-24 h-24" src="@/assets/logo.svg" />
-<h1>Bite-sized Learning for busy devs</h1>
-<h3>Learn new skills in 2-min long email lessons, get certified, get a better job.</h3>
-    <div class="wrapper">
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
+    <TopMenu />
+    <TopHeader />
   </header>
 
   <RouterView />
diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css
index 9db1bb4..a42fdf5 100644
--- a/vue/src/assets/main.css
+++ b/vue/src/assets/main.css
@@ -3,9 +3,21 @@
 @tailwind utilities;
 
 body {
-  @apply flex items-center justify-center h-screen;
+  @apply flex items-center justify-center w-full;
 }
 
 #app {
-  @apply max-w-screen-lg mx-auto my-auto p-8;
+  @apply max-w-screen-lg mx-auto my-auto p-2;
 }
+
+img {
+  @apply inline-flex;
+}
+
+h1 {
+  @apply text-4xl font-bold;
+}
+
+h3 {
+  @apply text-xl;
+}
\ No newline at end of file
diff --git a/vue/src/components/HelloWorld.vue b/vue/src/components/HelloWorld.vue
deleted file mode 100644
index 249f474..0000000
--- a/vue/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      Learn new skills in 2-min long email lessons, get certified, get a better job.
-    </h3>
-  </div>
-</template>
diff --git a/vue/src/components/TheWelcome.vue b/vue/src/components/TheWelcome.vue
index 49d8f73..2397bf0 100644
--- a/vue/src/components/TheWelcome.vue
+++ b/vue/src/components/TheWelcome.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
+
 </script>
 
 <template>
@@ -19,70 +16,4 @@ import SupportIcon from './icons/IconSupport.vue'
     provides you with all information you need to get started.
   </WelcomeItem>
 
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
-      >Cypress Component Testing</a
-    >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
 </template>
diff --git a/vue/src/components/TopHeader.vue b/vue/src/components/TopHeader.vue
new file mode 100644
index 0000000..99998a3
--- /dev/null
+++ b/vue/src/components/TopHeader.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1 class="mt-4">Bite-Sized Learning for Busy Devs</h1>
+    <h3 class="my-4">Learn new skills in 2-min long email lessons, get certified, get a better job.</h3>
+  </div>
+</template>
diff --git a/vue/src/components/TopMenu.vue b/vue/src/components/TopMenu.vue
new file mode 100644
index 0000000..8da5d01
--- /dev/null
+++ b/vue/src/components/TopMenu.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="w-full mb-4">
+    <Menubar :model="items">
+      <template #start>
+        <img alt="Bite-sized Learning Logo" class="h-12 w-12" src="@/assets/logo.svg" />
+      </template>
+      <template #item="{ item, props, hasSubmenu }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+          <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+          </a>
+        </router-link>
+        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+          <span :class="item.icon" />
+          <span class="ml-2">{{ item.label }}</span>
+          <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
+        </a>
+      </template>
+      <template #end>
+        <div class="flex items-center gap-2">
+          <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />
+          <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+        </div>
+      </template>
+    </Menubar>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+import Menubar from 'primevue/menubar';
+
+const items = ref([
+  {
+    label: 'Home',
+    icon: 'pi pi-home',
+    route: '/'
+  },
+  {
+    label: 'About',
+    icon: 'pi pi-star',
+    route: '/about'
+  },
+  {
+    label: 'Contact',
+    icon: 'pi pi-envelope',
+    badge: 3,
+    url: 'mailto:max@onebro.me'
+  }
+]);
+</script>
diff --git a/vue/src/main.ts b/vue/src/main.ts
index 5a5dbdb..ca042f5 100644
--- a/vue/src/main.ts
+++ b/vue/src/main.ts
@@ -3,9 +3,17 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import PrimeVue from "primevue/config";
+import Aura from '@primevue/themes/aura';
 
 const app = createApp(App)
 
 app.use(router)
 
+app.use(PrimeVue, {
+  theme: {
+      preset: Aura
+  }
+})
+
 app.mount('#app')