fix(dev): fix dev component

README.adoc

@@ -52,7 +52,8 @@ If you are interested in the FSXA check this link:https://docs.e-spirit.com/modu
 .. xref:docs/modules/ROOT/pages/WorkingWithImages.adoc#resolutions-in-firstspirit[Resolutions in FirstSpirit]
 .. xref:docs/modules/ROOT/pages/WorkingWithImages.adoc#responsiveness[Responsiveness]
 .. xref:docs/modules/ROOT/pages/WorkingWithImages.adoc#lazy-loading[Lazy Loading]
-. xref:docs/modules/ROOT/pages/CustomSitemap.adoc#sitemap[Creating a Sitemap]
+. xref:docs/modules/ROOT/pages/CustomSitemap.adoc[Creating a Sitemap]
+. xref:docs/modules/ROOT/pages/MetaTags.adoc[Meta Tags]
 
 == Legal Notices
 

components/AppLayout/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed top-0 z-50 h-16 w-full border-b bg-white p-2 lg:h-20"
+    class="fixed top-0 z-40 h-16 w-full border-b bg-white p-2 lg:h-20"
     data-testid="layoutHeader"
   >
     <div class="container mx-auto flex items-center">

components/Dev.vue

@@ -62,16 +62,16 @@
         <button
           class="rounded-t p-2 font-bold capitalize text-white"
           :class="{
-            'bg-gray-800 ': activeItem === 'page',
-            'bg-gray-600 ': activeItem !== 'page',
+            'bg-gray-800 ': activeItem === 'content',
+            'bg-gray-600 ': activeItem !== 'content',
           }"
-          @click="activeItem = 'page'"
+          @click="activeItem = 'content'"
         >
           {{ componentName }} Data
         </button>
 
         <button
-          v-if="dataset && isContentProjection"
+          v-if="currentDataset && isContentProjection"
           class="rounded-t p-2 font-bold text-white"
           :class="{
             'bg-gray-800 ': activeItem === 'dataset',
@@ -93,6 +93,17 @@
         >
           Products
         </button>
+
+        <button
+          class="rounded-t p-2 font-bold text-white"
+          :class="{
+            'bg-gray-800 ': activeItem === 'currentPage',
+            'bg-gray-600 ': activeItem !== 'currentPage',
+          }"
+          @click="activeItem = 'currentPage'"
+        >
+          Current Page
+        </button>
       </div>
 
       <div
@@ -111,30 +122,48 @@
 </template>
 
 <script setup lang="ts">
-import { Dataset } from "fsxa-api";
-
 const props = defineProps<{
   content: unknown;
-  dataset?: Dataset | null;
   componentName?: string;
 }>();
 
 const { activeNavigationItem } = useNavigationData();
-const { findCachedProductsByRoute } = useContent();
+const {
+  findCachedProductsByRoute,
+  findCachedPageByRoute,
+  findCachedDatasetByRoute,
+} = useContent();
 
 const devComponentVisible = ref(false);
 
-const activeItem = ref<"page" | "dataset" | "products">("page");
+const activeItem = ref<"content" | "dataset" | "products" | "currentPage">(
+  "content"
+);
 
 const devContent = computed(() => {
   if (activeItem.value === "dataset") {
-    return props.dataset;
+    return currentDataset.value;
   } else if (activeItem.value === "products") {
     return products.value;
+  } else if (activeItem.value === "currentPage") {
+    return currentPage.value;
   } else return props.content;
 });
 
-const products = computed(() => findCachedProductsByRoute(useRoute().path));
+const products = computed(() => {
+  const route = decodeURIComponent(useRoute().path);
+  return findCachedProductsByRoute(route);
+});
+
+const currentPage = computed(() => {
+  const route = decodeURIComponent(useRoute().path);
+  return findCachedPageByRoute(route);
+});
+
+const currentDataset = computed(() => {
+  const route = decodeURIComponent(useRoute().path);
+  return findCachedDatasetByRoute(route);
+});
 
 const isContentProjection = computed(
   () => activeNavigationItem.value?.seoRouteRegex !== null

components/Page/Body.vue

@@ -10,7 +10,6 @@
         <Dev
           v-if="showDev"
           :content="pageBodyContent"
-          :dataset="currentDataset"
           class="hidden group-hover:block"
           component-name="section"
         />
@@ -28,7 +27,6 @@ import { PageBody, PageBodyContent } from "fsxa-api";
 
 defineProps<{ pageBody: PageBody }>();
 
-const { currentDataset } = useContent();
 const { showDev } = useDev();
 
 function getComponentFromPageBodyContent(pageBodyContent: PageBodyContent) {

docs/modules/ROOT/pages/DevMode.adoc

@@ -53,10 +53,10 @@ image:DevMode/DevMode_products.png[Infobox Products]
 
 === Page info
 
-To get general information about the page that is loaded you need to click the question mark that is displayed in the top right corner on every page, if the `devMode` is enabled.
+To get general information about the page that is loaded click on a question mark that is displayed in the top right corner on any section of the page, if the `devMode` is enabled.
 
-image:DevMode/Questionmark_page.png[Question Mark Page]
+image:DevMode/Questionmark.png[Questionmark]
 
-Inside the infobox you can then get general information about what content is in the page and what layout the page should be displayed in.
+Inside the infobox you can then get general information about what content is in the page by clicking on the "Current Page" tab. Here you can also find information about what layout the page should be displayed in.
 
 image:DevMode/DevMode_page.png[Infobox Page]

docs/modules/ROOT/pages/GettingStarted/MyFirstTemplate.adoc

@@ -37,7 +37,7 @@ To enable the development mode, the variable `devMode` must be set to `true` in
 
 If you are in development mode and a component on the page has not been developed yet, you will get an unknown component which shows where a component is missing and what information in the component can be addressed.
 
-image:Missing_Component.png[Missing Layout]
+image:Missing_component.png[Missing Layout]
 
 If you are in development mode and you have already implemented the component, then you will see question marks when hovering over the element.
 

pages/[...slug].vue

@@ -8,11 +8,6 @@
       v-if="currentPage"
       :page="currentPage"
     />
-    <DevOnly>
-      <div v-if="showDev" class="fixed top-0 right-0 z-30">
-        <Dev v-if="currentPage" :content="currentPage" component-name="page" />
-      </div>
-    </DevOnly>
   </div>
 </template>
 
@@ -30,8 +25,6 @@ const { activeLocale } = useLocale();
 const { activeNavigationItem } = useNavigationData();
 const currentRoute = decodeURIComponent(useRoute().path);
 
-const { showDev } = useDev();
-
 // fetch page and dataset
 const { pending } = useAsyncData(async () => {
   // This state should not be possible.