move layout concerns out of app.vue

packages/content/layouts/article.vue

@@ -1,17 +1,34 @@
+<script setup>
+const sidebar = useSidebar()
+</script>
+
 <template lang="pug">
-article
-  ContentDoc
-    template(#default="{ doc }")
-      h1 {{ doc.title }}
-      Breadcrumbs(v-if="doc.breadcrumbs !== false")
-      Byline(v-if="doc.authors" :authors="doc.authors")
-      TagLists(:page="doc" :exclude="['authors']")
-      Toc(v-if="doc.toc === true")
-      .hidden-title
-        slot/
-      PrevNext(v-if="doc.prevnext !== false")
-    template(#empty)
-      slot/
-    template(#not-found)
-      slot/
+.flex.h-screen.overflow-hidden
+  AppSidebar(
+    class="w-80 transition-all duration-300"
+    :class="sidebar ? 'ml-0' : '-ml-80'"
+  )
+
+  .flex-1.overflow-y-auto
+    AppHeader
+
+    main
+      .tnt-container
+        article.prose
+          ContentDoc
+            template(#default="{ doc }")
+              h1 {{ doc.title }}
+              Breadcrumbs(v-if="doc.breadcrumbs !== false")
+              Byline(v-if="doc.authors" :authors="doc.authors")
+              TagLists(:page="doc" :exclude="['authors']")
+              Toc(v-if="doc.toc === true")
+              .hidden-title
+                slot/
+              PrevNext(v-if="doc.prevnext !== false")
+            template(#empty)
+              slot/
+            template(#not-found)
+              slot/
+
+    AppFooter
 </template>

packages/content/layouts/form.vue

@@ -1,18 +1,36 @@
+<script setup>
+const sidebar = useSidebar()
+</script>
+
 <template lang="pug">
-div
-  ContentDoc
-    template(#default="{ doc }")
-      h1 {{ doc.title }}
+.flex.h-screen.overflow-hidden
+  AppSidebar(
+    class="w-80 transition-all duration-300"
+    :class="sidebar ? 'ml-0' : '-ml-80'"
+  )
+
+  .flex-1.overflow-y-auto
+    AppHeader
+
+    main
+      .tnt-container
+        .prose
+          ContentDoc
+            template(#default="{ doc }")
+              h1 {{ doc.title }}
 
-      TntForm.space-y-5(
-        :action="doc.action"
-        :method="doc.method"
-        :fullErrors="doc.fullErrors"
-        :body="doc.body"
-        :schema="doc.schema"
-      )
+              TntForm.space-y-5(
+                :action="doc.action"
+                :method="doc.method"
+                :fullErrors="doc.fullErrors"
+                :body="doc.body"
+                :schema="doc.schema"
+              )
+
+    AppFooter
 </template>
 
+
 <!--
   TODO: Support markdown. Maybe by adding a <slot /> to TntForm as alternative to :body
 -->

packages/content/layouts/list.vue

@@ -1,30 +1,45 @@
 <script setup>
+const sidebar = useSidebar()
+
 const route = useRoute()
 const { data: page } = await useAsyncData(`tnt-list-${route.path}`, () => queryContent(route.path).findOne())
 </script>
 
 <template lang="pug">
-article
-  ContentDoc
-    template(#default="{ doc }")
-      h1 {{ doc.title }}
-      Breadcrumbs(v-if="doc.breadcrumbs !== false")
-      TagLists
-      Toc(v-if="doc.toc === true")
-      .hidden-title
-        slot/
-      ArticleList(:sort="doc.sort")
-      PrevNext(v-if="doc.prevnext")
+.flex.h-screen.overflow-hidden
+  AppSidebar(
+    class="w-80 transition-all duration-300"
+    :class="sidebar ? 'ml-0' : '-ml-80'"
+  )
+
+  .flex-1.overflow-y-auto
+    AppHeader
+
+    main
+      .tnt-container
+        article.prose
+          ContentDoc
+            template(#default="{ doc }")
+              h1 {{ doc.title }}
+              Breadcrumbs(v-if="doc.breadcrumbs !== false")
+              TagLists
+              Toc(v-if="doc.toc === true")
+              .hidden-title
+                slot/
+              ArticleList(:sort="doc.sort")
+              PrevNext(v-if="doc.prevnext")
+
+            template(#empty)
+              h1 {{ page.title }}
+              Breadcrumbs(v-if="page.breadcrumbs !== false")
+              TagLists
+              ArticleList(:sort="page.sort")
+              PrevNext(v-if="page.prevnext")
 
-    template(#empty)
-      h1 {{ page.title }}
-      Breadcrumbs(v-if="page.breadcrumbs !== false")
-      TagLists
-      ArticleList(:sort="page.sort")
-      PrevNext(v-if="page.prevnext")
+            template(#not-found)
+              h1 {{ _startCase(path.split('/').pop()) }}
+              Breadcrumbs
+              ArticleList
 
-    template(#not-found)
-      h1 {{ _startCase(path.split('/').pop()) }}
-      Breadcrumbs
-      ArticleList
+    AppFooter
 </template>

packages/content/layouts/redirect.vue

@@ -1,19 +1,36 @@
 <script setup>
+const sidebar = useSidebar()
+
 const route = useRoute()
 const { data: page } = await useAsyncData(`tnt-redirect-${route.path}`, () => queryContent(route.path).findOne())
 
 useHead({
   title: `Redirecting to ${page.value.title}...`,
-  meta: [{ "http-equiv": "refresh", content: `0; URL=${page.value.link}` }],
-  link: [{ rel: "canonical", href: page.value.link }]
+})
+
+navigateTo(page.value.link, {
+  external: /^https?:\/\//i.test(page.value.link)
 })
 </script>
 
 <template lang="pug">
-div
-  h1 Redirecting to {{ page.title }}...
-  p
-    | If you are not redirected automatically, click here:
-    |
-    NuxtLink(:to="page.link") {{ page.link }}
+.flex.h-screen.overflow-hidden
+  AppSidebar(
+    class="w-80 transition-all duration-300"
+    :class="sidebar ? 'ml-0' : '-ml-80'"
+  )
+
+  .flex-1.overflow-y-auto
+    AppHeader
+
+    main
+      .tnt-container
+        .prose
+          h1 Redirecting to {{ page.title }}...
+          p
+            | If you are not redirected automatically, click here:
+            |
+            NuxtLink(:to="page.link") {{ page.link }}
+
+    AppFooter
 </template>

packages/content/layouts/tags.vue

@@ -1,4 +1,6 @@
 <script setup>
+const sidebar = useSidebar()
+
 const { path, params } = useRoute()
 
 // Get taxonomy and tag name from route params
@@ -26,16 +28,29 @@ if (page && page.title) {
 </script>
 
 <template lang="pug">
-article
-  template(v-if="page")
-    h1 {{ page.title }}
-    Breadcrumbs(v-if="page.breadcrumbs !== false")
-    ContentRenderer(:value="page")
-      template(#empty)
-        // Empty
-  template(v-else)
-    h1 {{ _startCase(tag) }}
-    Breadcrumbs
-
-  ArticleList(path="/", :query="{ where: { [taxonomy]: { $or: orConditions } } }")
+.flex.h-screen.overflow-hidden
+  AppSidebar(
+    class="w-80 transition-all duration-300"
+    :class="sidebar ? 'ml-0' : '-ml-80'"
+  )
+
+  .flex-1.overflow-y-auto
+    AppHeader
+
+    main
+      .tnt-container
+        article.prose
+          template(v-if="page")
+            h1 {{ page.title }}
+            Breadcrumbs(v-if="page.breadcrumbs !== false")
+            ContentRenderer(:value="page")
+              template(#empty)
+                // Empty
+          template(v-else)
+            h1 {{ _startCase(tag) }}
+            Breadcrumbs
+
+          ArticleList(path="/", :query="{ where: { [taxonomy]: { $or: orConditions } } }")
+
+    AppFooter
 </template>

packages/content/layouts/taxonomy.vue

@@ -1,4 +1,6 @@
 <script setup>
+const sidebar = useSidebar()
+
 const { path, params } = useRoute()
 
 const taxonomy = params.tag[0]
@@ -11,15 +13,28 @@ const tags = _uniq(contentQuery.map((c) => c[taxonomy]).flat())
 </script>
 
 <template lang="pug">
-article
-  template(v-if="page")
-    h1 {{ page.title }}
-    Breadcrumbs(v-if="page.breadcrumbs !== false")
-    ContentRenderer(:value="page")
-      template(#empty)
-        // Empty
-  template(v-else)
-    h1 {{ _startCase(taxonomy) }}
-    Breadcrumbs
-  TaxonomyTagList(:taxonomy="taxonomy" :tags="tags")
+.flex.h-screen.overflow-hidden
+  AppSidebar(
+    class="w-80 transition-all duration-300"
+    :class="sidebar ? 'ml-0' : '-ml-80'"
+  )
+
+  .flex-1.overflow-y-auto
+    AppHeader
+
+    main
+      .tnt-container
+        article.prose
+          template(v-if="page")
+            h1 {{ page.title }}
+            Breadcrumbs(v-if="page.breadcrumbs !== false")
+            ContentRenderer(:value="page")
+              template(#empty)
+                // Empty
+          template(v-else)
+            h1 {{ _startCase(taxonomy) }}
+            Breadcrumbs
+          TaxonomyTagList(:taxonomy="taxonomy" :tags="tags")
+
+    AppFooter
 </template>

packages/content/pages/[...slug].vue

@@ -22,10 +22,9 @@ if (contentHead) {
 </script>
 
 <template lang="pug">
-.prose
-  NuxtLayout(:name="page?.layout || layout || 'default'")
-    ContentRenderer(v-if="page" :key="page._id" :value="page")
-      template(#empty="{ value }")
-        DocumentDrivenEmpty(:value="value")/
-    DocumentDrivenNotFound(v-else)/
+NuxtLayout(:name="page?.layout || layout || 'default'")
+  ContentRenderer(v-if="page" :key="page._id" :value="page")
+    template(#empty="{ value }")
+      DocumentDrivenEmpty(:value="value")/
+  DocumentDrivenNotFound(v-else)/
 </template>

packages/content/pages/search.vue

@@ -3,7 +3,6 @@ const { layout } = useAppConfig()
 </script>
 
 <template lang="pug">
-.prose
-  NuxtLayout(:name="layout || 'default'")
-    ContentSearch
+NuxtLayout(:name="layout || 'default'")
+  ContentSearch
 </template>

packages/content/pages/~[...tag].vue

@@ -16,7 +16,6 @@ if (taxonomies.includes(taxonomy) && tag) {
 </script>
 
 <template lang="pug">
-.prose
-  NuxtLayout(:name="layout || defaultLayout || 'default'")
-    //- Rendering handled by layout.
+NuxtLayout(:name="layout || defaultLayout || 'default'")
+  //- Rendering handled by layout.
 </template>

packages/core/app.vue

@@ -13,8 +13,6 @@ const bodyClass = computed(() => {
   return klasses.join(' ')
 })
 
-const sidebar = useSidebar()
-
 useHead({
   titleTemplate: (titleChunk) => {
     return titleChunk ? `${titleChunk} - ${name}` : name
@@ -26,21 +24,8 @@ useHead({
 </script>
 
 <template lang="pug">
-.flex.h-screen.overflow-hidden
-  AppSidebar(
-    class="w-80 transition-all duration-300"
-    :class="sidebar ? 'ml-0' : '-ml-80'"
-  )
-
-  .flex-1.flex.flex-col
-    AppHeader
-
-    .flex-1.overflow-y-auto
-      main
-        .tnt-container
-          NuxtPage(:page-key="route => route.fullPath")
-
-      AppFooter
+div
+  NuxtPage(:page-key="route => route.fullPath")
 
   ToastStack
 </template>

packages/core/layouts/default.vue

@@ -1,4 +1,21 @@
+<script setup>
+const sidebar = useSidebar()
+</script>
+
 <template lang="pug">
-div
-  slot
+.flex.h-screen.overflow-hidden
+  AppSidebar(
+    class="w-80 transition-all duration-300"
+    :class="sidebar ? 'ml-0' : '-ml-80'"
+  )
+
+  .flex-1.overflow-y-auto
+    AppHeader
+
+    main
+      .tnt-container
+        .prose
+          slot
+
+    AppFooter
 </template>