initial-commit

components/Content.vue

@@ -0,0 +1,25 @@
+<template>
+    <div id="page-container">
+        <div
+            id="page-content"
+            style="padding: 20px; padding-bottom: 50px; min-height: 100vh"
+        >
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style>
+/* Page Transition Animation */
+body.page-transition #page-content {
+    opacity: 0;
+}
+</style>
+
+<style scoped>
+/* Page Transition Animation */
+#page-content {
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+}
+</style>

components/Counter.vue

@@ -0,0 +1,11 @@
+<template>
+    <button type="button" @click="state.count++">
+        Counter {{ state.count }}
+    </button>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const state = reactive({ count: 0 })
+</script>

components/Link.vue

@@ -0,0 +1,27 @@
+<template>
+    <a :class="{ active: isActive }">
+        <slot />
+    </a>
+</template>
+
+<script lang="ts" setup>
+import { usePageContext } from 'vike-vue/usePageContext'
+import { computed, useAttrs } from 'vue'
+
+const pageContext = usePageContext()
+const { href } = useAttrs()
+const isActive = computed(() => {
+    const { urlPathname } = pageContext
+    return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
+})
+</script>
+
+<style scoped>
+a {
+    padding: 2px 10px;
+    margin-left: -10px;
+}
+a.active {
+    background-color: #eee;
+}
+</style>

components/Logo.vue

@@ -0,0 +1,7 @@
+<template>
+    <div style="margin-top: 20px; margin-bottom: 10px">
+        <a href="/">
+            <img src="../assets/logo.svg" height="64" width="64" />
+        </a>
+    </div>
+</template>

components/Sidebar.vue

@@ -0,0 +1,15 @@
+<template>
+    <div
+        id="sidebar"
+        style="
+            padding: 20px;
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+            line-height: 1.8em;
+            border-right: 2px solid #eee;
+        "
+    >
+        <slot />
+    </div>
+</template>