Initalize

node_modules/@lando/vitepress-theme-default-plus/components/VPLLayout.vue

@@ -0,0 +1,97 @@
+<template>
+  <Layout :class="headerClass">
+    <template #layout-top>
+      <Alert
+        v-if="alert"
+        :key="alertKey"
+        :content="alert.content"
+        :closeable="alert.closeable"
+        :type="alert.type"
+      />
+    </template>
+
+    <template #sidebar-nav-after>
+      <div
+        v-if="sidebarEnder !== false"
+        class="sidebar-end"
+      >
+        <VPSideBarItem
+          :depth="0"
+          :item="sidebarEnder"
+        />
+      </div>
+    </template>
+
+    <template #doc-before>
+      <div
+        v-if="header !== ''"
+        class="collection-header"
+      >
+        <PostHeader v-if="header === 'post'" />
+        <CollectionHeader v-else />
+      </div>
+    </template>
+
+    <template #aside-ads-before>
+      <Tags :key="tagsKey" />
+      <Jobs :key="jobsKey" />
+      <Sponsors :key="sponsorsKey" />
+    </template>
+
+    <template #doc-footer-before>
+      <Tags
+        v-if="header === 'post'"
+        :key="tagsKey"
+      />
+      <div
+        v-if="mailchimp"
+        class="newsletter-wrapper"
+      >
+        <MailChimp v-bind="mailchimp" />
+      </div>
+    </template>
+  </Layout>
+</template>
+
+<script setup>
+import {useData} from 'vitepress';
+import {computed, ref, watch} from 'vue';
+
+import DefaultTheme from 'vitepress/theme';
+import VPSideBarItem from 'vitepress/dist/client/theme-default/components/VPSidebarItem.vue';
+
+import Alert from './VPLAlert.vue';
+import CollectionHeader from './VPLCollectionHeader.vue';
+import MailChimp from './VPLMailChimp.vue';
+import PostHeader from './VPLPostHeader.vue';
+import Tags from './VPLCollectionItemTags.vue';
+
+const {Layout} = DefaultTheme;
+
+let alertKey = ref(0);
+let jobsKey = ref(0);
+let sponsorsKey = ref(0);
+let tagsKey = ref(0);
+const {frontmatter, page, theme} = useData();
+
+const alert = computed(() => frontmatter.value.alert ?? theme.value.alert ?? false);
+const header = computed(() => frontmatter.value.collection || '');
+const headerClass = computed(() => frontmatter.value.collection ? `collection-${frontmatter.value.collection}` : '');
+const mailchimp = computed(() => frontmatter.value?.mailchimp?.action ? frontmatter.value.mailchimp : false);
+const sidebarEnder = computed(() => theme.value.sidebarEnder ?? false);
+
+watch(() => page.value.relativePath, () => {
+  alertKey = page.value.relativePath;
+  jobsKey = page.value.relativePath;
+  sponsorsKey = page.value.relativePath;
+  tagsKey = page.value.relativePath;
+});
+
+</script>
+
+<style lang="scss" scoped>
+.newsletter-wrapper {
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 16px 0 ;
+}
+</style>