Added PrimeVue components

rimutaka · Oct 5, 2024 · e883cac · e883cac
1 parent 9f072e2
commit e883cac
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -44,10 +44,22 @@ 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
 
 ### 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/
+* 
diff --git a/vue/package-lock.json b/vue/package-lock.json
diff --git 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
@@ -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
@@ -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;
+}
diff --git a/vue/src/components/HelloWorld.vue b/vue/src/components/HelloWorld.vue
diff --git 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
@@ -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
@@ -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
@@ -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')