add matomo, vuetify, basic topbar

app.vue

@@ -1,17 +1,15 @@
 <template>
   <NuxtLayout>
     <v-app>
-      <div id="top" />
+      <a id="top" />
 
-      <div class="topbar-container">
+      <header>
         <Topbar />
-      </div>
+      </header>
 
-      <div class="body">
-        <NuxtPage />
+      <NuxtPage />
 
-        <BackToTheTop />
-      </div>
+      <BackToTheTop />
 
       <v-footer no-gutters :height="36">
       </v-footer>
@@ -26,7 +24,7 @@ useHead(() => ({
   link: [
     {
       rel: 'canonical',
-      href: 'https://olivier.massot.net' + route.path,
+      href: 'https://olivier-massot.ogene.fr' + route.path,
     },
   ],
 }))
@@ -42,9 +40,13 @@ html {
   color: rgb(var(--v-theme-on-neutral));
 }
 
-.body, .topbar {
-  margin: 0 20%;
-  max-width: 100%;
+.body {
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin: 0 auto;
+  max-width: 1400px;
 
   @media (max-width: 1280px) {
     margin: 0 10%;
@@ -55,14 +57,8 @@ html {
   }
 }
 
-.body {
-  padding: 18px;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
 .topbar-container {
+  padding: 32px 0;
   border-bottom: solid 1px rgba(var(--v-theme-on-neutral), 0.2);
   margin-bottom: 3rem;
   position: sticky;

components/Topbar.vue

@@ -1,145 +1,86 @@
 <template>
   <div class="topbar">
-    <v-btn
-        icon="fas fa-bars"
-        variant="plain"
-        class="smAndDown mr-2"
-        aria-label="Show or hide the website menu"
-        @click="isMenuOpen = !isMenuOpen"
-    />
+    <h1>
+      <nuxt-link to="/">
+        Olivier Massot - Fullstack Developer
+      </nuxt-link>
+    </h1>
 
-    <nuxt-link to="/" class="logo">
-      <v-img src="/logo.png" alt="logo path-php" />
-    </nuxt-link>
+    <v-spacer />
+
+    <div class="icon-links">
+      <ThemeSwitcher />
 
-    <div class="menu mdAndUp">
       <nuxt-link
-          v-for="item in menu" :key="item.label"
-          :to="item.to"
-          active-class="active"
+          href="https://github.com/olinox14"
+          target="_blank"
+          aria-label="Find me on Github"
       >
-        {{ item.label }}
+        <v-icon>fab fa-github</v-icon>
       </nuxt-link>
-    </div>
-    <v-spacer class="smAndDown" />
 
-    <div class="icon-links">
-      <ThemeSwitcher />
+      <nuxt-link
+          href="https://stackoverflow.com/users/4279120/olinox14"
+          target="_blank"
+          aria-label="Find me on Stackoverflow"
+      >
+        <v-icon>fab fa-stack-overflow</v-icon>
+      </nuxt-link>
 
       <nuxt-link
-          href="https://github.com/olinox14/path-php"
+          href="https://www.linkedin.com/in/olivier-massot-60b87b181"
           target="_blank"
-          aria-label="Open the Github page of Path-php"
+          aria-label="Find me on LinkedIn"
       >
-        <v-icon>fab fa-github</v-icon>
+        <v-icon>fab fa-linkedin</v-icon>
       </nuxt-link>
     </div>
-
-    <v-navigation-drawer v-model="isMenuOpen" app temporary>
-      <v-list nav dense aria-label="Menu">
-        <v-list-item
-            v-for="(item, index) in menu"
-            :key="item.label"
-            :to="item.to"
-            class="menuItem"
-        >
-          <v-list-item-title class="d-flex flex-row w-100">
-            <span class="flex-grow-1">
-              {{ item.label }}
-            </span>
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
   import ThemeSwitcher from "~/components/ThemeSwitcher.vue";
   import type {Ref} from "@vue/reactivity";
-
-  const isMenuOpen: Ref<boolean> = ref(false)
-
-  const menu = [
-    {
-      label: "Home",
-      to: "/"
-    },
-    {
-      label: "Get started",
-      to: "/get-started"
-    },
-    {
-      label: "API",
-      to: "api"
-    }
-  ]
 </script>
 
 <style scoped lang="scss">
-
-@media (min-width: 960px) {
-  .smAndDown {
-    display: none;
-  }
-}
-@media (max-width: 960px) {
-  .mdAndUp {
-    display: none;
-  }
-}
-
 .topbar {
   height: 72px;
   display: flex;
   flex-direction: row;
+  margin: 0 15%;
   padding: 18px;
   align-items: center;
 
-  .logo {
-    width: 140px;
-
-    @media (max-width: 960px) {
-      width: 25%;
-      min-width: 30px;
-    }
+  @media (max-width: 1280px) {
+    margin: 0 10%;
   }
 
-  .v-btn {
-    color: rgb(var(--v-theme-on-neutral));
+  @media (max-width: 600px) {
+    margin: 0 5%;
   }
 
-  .menu {
-    margin: 0 auto;
+  h1 {
+    font-size: 22px;
 
     a {
-      text-decoration: none;
       color: rgb(var(--v-theme-on-neutral));
-      padding: 8px;
-      font-weight: bold;
-      margin: 0 18px;
-      font-size: 18px;
-      padding: 8px;
-    }
-
-    a:hover {
-      color: rgb(var(--v-theme-on-neutral--clickable));
+      text-decoration: none;
     }
+  }
 
-    a.active {
-      color: rgb(var(--v-theme-on-neutral--clickable));
-      border-bottom: solid 2px rgb(var(--v-theme-on-neutral--clickable));
-    }
+  .v-btn {
+    color: rgb(var(--v-theme-on-neutral));
   }
 
   .icon-links {
-    color: black;
-    font-size: 20px;
+    font-size: 16px;
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     > * {
-      margin-left: 16px;
+      margin-left: 24px;
     }
 
     a {

nuxt.config.ts

@@ -3,14 +3,14 @@ import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 export default defineNuxtConfig({
   ssr: true,
   target: 'static',
-  title: 'Path-PHP Documentation',
+  title: 'C.V. Olivier Massot',
   devtools: {
     // @see https://github.com/nuxt/devtools
     enabled: true,
   },
   app: {
     head: {
-      title: 'Path-PHP Documentation',
+      title: 'C.V. Olivier Massot',
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -29,9 +29,6 @@ export default defineNuxtConfig({
   hooks: {
     'builder:watch': console.log,
   },
-  css: [
-    'vuetify/lib/styles/main.sass'
-  ],
   modules: [
     async (_, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', (config) =>
@@ -51,11 +48,6 @@ export default defineNuxtConfig({
     '@nuxt/devtools',
     '@nuxtjs/sitemap',
   ],
-  webfontloader: {
-    google: {
-      families: ['Barlow:300,400,500,700&display=swap'],
-    },
-  },
   vite: {
     esbuild: {
       drop: process.env.DEBUG ? [] : ['console', 'debugger'],
@@ -80,6 +72,6 @@ export default defineNuxtConfig({
     },
   },
   site: {
-    url: 'https://path-php.net'
+    url: 'https://olivier-massot.ogene.fr'
   },
 })

plugins/matomo.client.ts

@@ -3,7 +3,7 @@ import VueMatomo from 'vue-matomo'
 
 export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(VueMatomo, {
-        host: 'https://stats.path-php.net',
+        host: 'https://olivier-massot.ogene.fr',
         siteId: 1,
         // Enables automatically registering pageviews on the router
         router: nuxtApp.$router,

plugins/vuetify.ts

@@ -53,10 +53,10 @@ export const lightTheme: Theme = {
     'surface': '#ffffff',
     'on-surface': '#000000',
 
-    'primary': '#515794',
+    'primary': '#334467',
     'on-primary': '#ffffff',
 
-    'primary-alt': '#a9e0d6',
+    'primary-alt': '#657fb3',
     'on-primary-alt': '#777777',
 
     'secondary': '#ced0e4',
@@ -67,7 +67,7 @@ export const lightTheme: Theme = {
 
     'neutral': '#ffffff',
     'on-neutral': '#404040',
-    'on-neutral--clickable': '#515794',
+    'on-neutral--clickable': '#404040',
 
     'neutral-soft': '#ecf0f5',
     'on-neutral-soft': '#464646',
@@ -113,7 +113,7 @@ export const darkTheme: Theme = {
 
     'neutral': '#131a20',
     'on-neutral': '#cccccc',
-    'on-neutral--clickable': '#9ca1c9',
+    'on-neutral--clickable': '#cccccc',
 
     'neutral-soft': '#090c11',
     'on-neutral-soft': '#cccccc',