From 25d21234f05494c2c9700b2023d42b04f6ecefd7 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 23 Nov 2023 04:58:54 +0100
Subject: [PATCH] update page content

---
 ...er.test.ts => ClickCounter.delete.test.ts} |  2 +-
 ...ickCounter.vue => ClickCounter.delete.vue} |  0
 src/components/PageShell.vue                  | 63 +------------------
 src/components/VikeBtn.vue                    | 17 +++++
 src/components/VikeLink.vue                   | 19 ------
 src/components/menu/LogoAvatar.vue            |  7 +++
 src/components/menu/TopMenu.vue               | 16 +++++
 src/layouts/DefaultLayout.vue                 | 28 +++++++++
 src/pages/about/index.page.vue                | 27 +++++---
 src/pages/app/index.page.route.ts             | 18 ++++++
 src/pages/app/index.page.vue                  | 43 +++++++++++++
 src/pages/index/index.page.vue                | 21 ++++---
 12 files changed, 162 insertions(+), 99 deletions(-)
 rename src/components/{ClickCounter.test.ts => ClickCounter.delete.test.ts} (91%)
 rename src/components/{ClickCounter.vue => ClickCounter.delete.vue} (100%)
 create mode 100644 src/components/VikeBtn.vue
 delete mode 100644 src/components/VikeLink.vue
 create mode 100644 src/components/menu/LogoAvatar.vue
 create mode 100644 src/components/menu/TopMenu.vue
 create mode 100644 src/layouts/DefaultLayout.vue
 create mode 100644 src/pages/app/index.page.route.ts
 create mode 100644 src/pages/app/index.page.vue

diff --git a/src/components/ClickCounter.test.ts b/src/components/ClickCounter.delete.test.ts
similarity index 91%
rename from src/components/ClickCounter.test.ts
rename to src/components/ClickCounter.delete.test.ts
index af9a354..42166d6 100644
--- a/src/components/ClickCounter.test.ts
+++ b/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)
diff --git a/src/components/ClickCounter.vue b/src/components/ClickCounter.delete.vue
similarity index 100%
rename from src/components/ClickCounter.vue
rename to src/components/ClickCounter.delete.vue
diff --git a/src/components/PageShell.vue b/src/components/PageShell.vue
index 25a5adb..bd6f8c9 100644
--- a/src/components/PageShell.vue
+++ b/src/components/PageShell.vue
@@ -1,66 +1,5 @@
 <template>
   <v-app>
-    <v-container>
-      <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>
+    <slot />
   </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>
diff --git a/src/components/VikeBtn.vue b/src/components/VikeBtn.vue
new file mode 100644
index 0000000..3d86407
--- /dev/null
+++ b/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>
diff --git a/src/components/VikeLink.vue b/src/components/VikeLink.vue
deleted file mode 100644
index f79f032..0000000
--- a/src/components/VikeLink.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/menu/LogoAvatar.vue b/src/components/menu/LogoAvatar.vue
new file mode 100644
index 0000000..1c8d85e
--- /dev/null
+++ b/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>
diff --git a/src/components/menu/TopMenu.vue b/src/components/menu/TopMenu.vue
new file mode 100644
index 0000000..c809d96
--- /dev/null
+++ b/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>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
new file mode 100644
index 0000000..675b81a
--- /dev/null
+++ b/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>
diff --git a/src/pages/about/index.page.vue b/src/pages/about/index.page.vue
index 3ace64b..3e74b4d 100644
--- a/src/pages/about/index.page.vue
+++ b/src/pages/about/index.page.vue
@@ -1,13 +1,20 @@
 <template>
-  <h1>About</h1>
-  <p>Example of app using Vike.</p>
+  <DefaultLayout>
+    <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>
-code {
-  padding: 3px 5px;
-  font-family: monospace;
-  background-color: #eaeaea;
-  border-radius: 4px;
-}
-</style>
+<script lang="ts" setup>
+import DefaultLayout from '#layouts/DefaultLayout.vue'
+</script>
diff --git a/src/pages/app/index.page.route.ts b/src/pages/app/index.page.route.ts
new file mode 100644
index 0000000..77cea0f
--- /dev/null
+++ b/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
+}
diff --git a/src/pages/app/index.page.vue b/src/pages/app/index.page.vue
new file mode 100644
index 0000000..c6f25f5
--- /dev/null
+++ b/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>
diff --git a/src/pages/index/index.page.vue b/src/pages/index/index.page.vue
index 113e994..b66529c 100644
--- a/src/pages/index/index.page.vue
+++ b/src/pages/index/index.page.vue
@@ -1,12 +1,19 @@
 <template>
-  <h1>Welcome</h1>
-  This page is:
-  <ul>
-    <li>Rendered to HTML.</li>
-    <li>Interactive. <ClickCounter /></li>
-  </ul>
+  <DefaultLayout>
+    <h1>IT4C Frontend Boilerplate</h1>
+    <p>Welcome to this minimal starter for frontends.</p>
+    <br />
+    <p>This is just a basic example to demonstrate things - nothing fancy.</p>
+    <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>