feat: update mvc documentation

Author: mychidarko

.vitepress/config/sidebar.ts

@@ -50,7 +50,6 @@ const sidebar = [
     // collapsed: true,
     items: [
       { text: 'Basic Routing', link: '/docs/routing/' },
-      { text: 'Routing in Leaf MVC', link: '/docs/routing/mvc' },
       { text: 'Route Groups', link: '/docs/routing/route-groups' },
       { text: 'Dynamic routing', link: '/docs/routing/dynamic' },
       { text: 'Middleware', link: '/docs/routing/middleware/' },
@@ -148,14 +147,13 @@ const sidebar = [
     ],
   },
   {
-    text: 'Leaf MVC',
+    text: 'Building to scale',
     // collapsible: true,
     // collapsed: true,
     items: [
       { text: 'Leaf + MVC', link: '/docs/mvc/' },
-      { text: 'MVC Config', link: '/docs/mvc/config' },
       { text: 'Controllers', link: '/docs/mvc/controllers' },
-      { text: 'Views', link: '/docs/frontend/mvc' },
+      // { text: 'Views', link: '/docs/frontend/mvc' },
       { text: 'Models', link: '/docs/database/models' },
       { text: 'Migrations', link: '/docs/database/migrations' },
       { text: 'Schema', link: '/docs/database/schema' },

.vitepress/theme/components/shared/Banner.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core';
+import { ref, watchEffect } from 'vue';
+
+defineProps<{
+  version: string;
+}>();
+
+const el = ref<HTMLElement>();
+const { height } = useElementSize(el);
+
+watchEffect(() => {
+  if (height.value) {
+    document.documentElement.style.setProperty(
+      '--vp-layout-top-height',
+      `${height.value + 16}px`
+    );
+  }
+});
+
+const dismiss = () => {
+  localStorage.setItem(
+    'leaf-version-banner',
+    (Date.now() + 8.64e7 * 1).toString() // current time + 1 day
+  );
+
+  document.documentElement.classList.add('banner-dismissed');
+};
+</script>
+
+<template>
+  <div ref="el" class="banner">
+    <div class="text">
+      WARNING You're browsing the documentation for an upcoming version of Leaf. The documentation and features of this release are subject to change.
+    </div>
+
+    <button type="button" @click="dismiss">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path
+          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style>
+.banner-dismissed {
+  --vp-layout-top-height: 0px !important;
+}
+
+html {
+  --vp-layout-top-height: 88px;
+}
+
+@media (min-width: 375px) {
+  html {
+    --vp-layout-top-height: 64px;
+  }
+}
+
+@media (min-width: 768px) {
+  html {
+    --vp-layout-top-height: 40px;
+  }
+}
+</style>
+
+<style scoped>
+.banner-dismissed .banner {
+  display: none;
+}
+
+.banner {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: var(--vp-z-index-layout-top);
+  padding: 8px;
+  text-align: center;
+  background: var(--vp-c-banner);
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+}
+
+.text {
+  flex: 1;
+  font-size: 14px;
+}
+
+a {
+  text-decoration: underline;
+}
+
+svg {
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+}
+</style>

.vitepress/theme/index.ts

@@ -3,11 +3,18 @@ import { VueWriter } from 'vue-writer';
 
 import 'virtual:group-icons.css';
 import './styles/index.css';
+import { defineAsyncComponent, h } from 'vue';
 
 /** @type {import('vitepress').Theme} */
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }: any) {
     app.component('vue-writer', VueWriter);
   },
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'layout-top': () =>
+        h(defineAsyncComponent(() => import('./components/shared/Banner.vue'))),
+    });
+  },
 };

.vitepress/theme/styles/index.css

@@ -10,6 +10,7 @@
     #3077c6,
     #3eaf7c
   );
+  --vp-c-banner: var(--vp-c-brand-1);
   --vp-home-hero-name-background: #3eaf7c;
   --vp-c-brand-1: #3eaf7c;
   --vp-c-brand-2: #07c16b;
@@ -35,6 +36,7 @@
 }
 
 html.dark {
+  --vp-c-banner: var(--vp-c-bg-soft);
   --vp-code-color: #3eaf7c;
   --vp-c-bg: #001e26;
   --vp-c-bg-alt: #001318;
@@ -132,3 +134,15 @@ html.dark {
 .VPContent.is-home + .VPFooter {
   background-color: var(--vp-c-bg-alt);
 }
+
+.VPSidebar .group, .VPNavBarTitle.has-sidebar a {
+  @apply !border-none;
+}
+
+.VPNavBarTitle.has-sidebar a {
+  @apply !text-lg;
+}
+
+.VPNavBarTitle.has-sidebar img {
+  @apply !w-8 !h-8;
+}

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.22",
+    "@vueuse/core": "^11.1.0",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",