update page content

src/components/ClickCounter.delete.test.ts

@@ -1,7 +1,7 @@
 import { mount, config } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 
-import ClickCounter from './ClickCounter.vue'
+import ClickCounter from './ClickCounter.delete.vue'
 
 describe('clickCounter', () => {
   const wrapper = mount(ClickCounter)

src/components/PageShell.vue

@@ -1,66 +1,5 @@
 <template>
   <v-app>
-    <v-container>
+    <slot />
-      <div class="layout">
-        <div class="navigation">
-          <a href="/" class="logo">
-            <img :src="Logo" height="64" width="64" alt="logo" />
-          </a>
-          <VikeLink href="/">Home</VikeLink>
-          <VikeLink href="/about">About</VikeLink>
-        </div>
-        <div class="content"><slot /></div>
-      </div>
-    </v-container>
   </v-app>
 </template>
-
-<script lang="ts" setup>
-import Logo from '#assets/it4c-logo2-clean-bg_alpha-128x128.png'
-
-import VikeLink from './VikeLink.vue'
-</script>
-
-<style>
-body {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-a {
-  text-decoration: none;
-}
-</style>
-
-<style scoped>
-.layout {
-  display: flex;
-  max-width: 900px;
-  margin: auto;
-}
-
-.content {
-  min-height: 100vh;
-  padding: 20px;
-  padding-bottom: 50px;
-  border-left: 2px solid #eee;
-}
-
-.navigation {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  align-items: center;
-  padding: 20px;
-  line-height: 1.8em;
-}
-
-.logo {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-</style>

src/components/VikeBtn.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-btn :variant="isRoutSelected($attrs.href as string) ? 'tonal' : 'flat'">
+    <slot />
+  </v-btn>
+</template>
+<script lang="ts" setup>
+import { usePageContext } from '#context/usePageContext'
+
+const pageContext = usePageContext()
+
+const isRoutSelected = (href: string) => {
+  if (href === '/app') {
+    return pageContext.urlPathname.indexOf(href) === 0
+  }
+  return pageContext.urlPathname === href
+}
+</script>

src/components/VikeLink.vue

@@ -1,19 +0,0 @@
-<template>
-  <a :class="{ active: pageContext.urlPathname === $attrs.href }">
-    <slot />
-  </a>
-</template>
-<script lang="ts" setup>
-import { usePageContext } from '#context/usePageContext'
-
-const pageContext = usePageContext()
-</script>
-<style scoped>
-a {
-  padding: 3px 10px;
-}
-
-a.active {
-  background-color: #eee;
-}
-</style>

src/components/menu/LogoAvatar.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-avatar color="#333" class="ma-2 pa-1" :image="Logo" size="48" />
+</template>
+
+<script lang="ts" setup>
+import Logo from '#assets/it4c-logo2-clean-bg_alpha-128x128.png'
+</script>

src/components/menu/TopMenu.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-app-bar flat>
+    <LogoAvatar />
+    <v-container class="mx-auto d-flex align-center justify-center">
+      <VikeBtn href="/">Home</VikeBtn>
+      <VikeBtn href="/app">App</VikeBtn>
+      <VikeBtn href="/about">About</VikeBtn>
+    </v-container>
+  </v-app-bar>
+</template>
+
+<script lang="ts" setup>
+import VikeBtn from '#components/VikeBtn.vue'
+
+import LogoAvatar from './LogoAvatar.vue'
+</script>

src/layouts/DefaultLayout.vue

@@ -0,0 +1,28 @@
+<template>
+  <TopMenu />
+  <v-main class="bg-grey-lighten-3">
+    <v-container>
+      <v-row>
+        <v-col v-if="slots.sidemenu" cols="2">
+          <v-sheet rounded>
+            <slot name="sidemenu"></slot>
+          </v-sheet>
+        </v-col>
+
+        <v-col>
+          <v-sheet rounded class="pa-3">
+            <slot />
+          </v-sheet>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script lang="ts" setup>
+import { useSlots } from 'vue'
+
+import TopMenu from '#components/menu/TopMenu.vue'
+
+const slots = useSlots()
+</script>

src/pages/about/index.page.vue

@@ -1,13 +1,20 @@
 <template>
-  <h1>About</h1>
+  <DefaultLayout>
-  <p>Example of app using Vike.</p>
+    <h1>About</h1>
+    <p>
+      To find out more about this boilerplate you can look at the sources:
+      <a href="https://github.com/IT4Change/boilerplate-frontend/" target="_blank"
+        >github.com/IT4Change/boilerplate-frontend</a
+      >.
+    </p>
+    <br />
+    <p>
+      Want to get in touch? Find out how on our
+      <a href="https://it4c.dev" target="_blank">website</a>
+    </p>
+  </DefaultLayout>
 </template>
 
-<style>
+<script lang="ts" setup>
-code {
+import DefaultLayout from '#layouts/DefaultLayout.vue'
-  padding: 3px 5px;
+</script>
-  font-family: monospace;
-  background-color: #eaeaea;
-  border-radius: 4px;
-}
-</style>

src/pages/app/index.page.route.ts

@@ -0,0 +1,18 @@
+import { resolveRoute } from 'vike/routing'
+
+import { PageContext } from '#types/PageContext'
+
+export default (pageContext: PageContext) => {
+  {
+    const result = resolveRoute('/app', pageContext.urlPathname)
+    if (result.match) {
+      return result
+    }
+  }
+
+  const result = resolveRoute('/app/@id', pageContext.urlPathname)
+  if (!['inc', 'reset'].includes(result.routeParams.id)) {
+    return false
+  }
+  return result
+}

src/pages/app/index.page.vue

@@ -0,0 +1,43 @@
+<template>
+  <DefaultLayout>
+    <template #sidemenu>
+      <v-list rounded>
+        <v-list-item link title="Value" :active="page === undefined" href="/app"></v-list-item>
+        <v-list-item link title="Increase" :active="page === 'inc'" href="/app/inc"></v-list-item>
+
+        <v-divider class="my-2"></v-divider>
+
+        <v-list-item link title="Reset" :active="page === 'reset'" href="/app/reset"></v-list-item>
+      </v-list>
+    </template>
+
+    <template #default>
+      <div v-if="page === undefined">
+        <h1>The Counter</h1>
+        <p>
+          The current value of the counter is: <b>{{ counter.count }}</b>
+        </p>
+      </div>
+      <div v-else-if="page === 'inc'">
+        <h1>Increase the Counter</h1>
+        <v-btn elevation="2" @click="counter.increment()">{{ counter.count }}</v-btn>
+      </div>
+      <div v-else-if="page === 'reset'">
+        <h1>Reset the Counter</h1>
+        <v-btn elevation="2" @click="counter.reset()">{{ counter.count }}</v-btn>
+      </div>
+    </template>
+  </DefaultLayout>
+</template>
+
+<script lang="ts" setup>
+import { usePageContext } from '#context/usePageContext'
+import DefaultLayout from '#layouts/DefaultLayout.vue'
+import { useCounterStore } from '#stores/counter'
+
+const counter = useCounterStore()
+
+const {
+  routeParams: { id: page },
+} = usePageContext()
+</script>

src/pages/index/index.page.vue

@@ -1,12 +1,19 @@
 <template>
-  <h1>Welcome</h1>
+  <DefaultLayout>
-  This page is:
+    <h1>IT4C Frontend Boilerplate</h1>
-  <ul>
+    <p>Welcome to this minimal starter for frontends.</p>
-    <li>Rendered to HTML.</li>
+    <br />
-    <li>Interactive. <ClickCounter /></li>
+    <p>This is just a basic example to demonstrate things - nothing fancy.</p>
-  </ul>
+    <br />
+    <p>In the App Section you will find a counter example utilizing the local storage.</p>
+    <br />
+    <p>Happy Coding <v-icon icon="mdi-heart" color="red" /></p>
+    <br />
+    <p>Sincerly</p>
+    <p>Your IT Team For Change</p>
+  </DefaultLayout>
 </template>
 
 <script lang="ts" setup>
-import ClickCounter from '#components/ClickCounter.vue'
+import DefaultLayout from '#layouts/DefaultLayout.vue'
 </script>