Merge pull request #22 from contentstack/feat/ECO-809_dynamic_page_generation

feat: dynamic page generation

Author: karantalapalli

package-lock.json

@@ -15,13 +15,14 @@
     "@contentstack/live-preview-utils": "^1.0.1",
     "@contentstack/utils": "^1.1.1",
     "contentstack": "^3.15.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.2",
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.27",
     "vue-json-pretty": "^1.8.2",
     "vue-json-tree-viewer": "^1.0.2",
     "vue-meta": "^2.4.0",
     "vue-router": "^4.0.12",
+    "vue-skeletor": "^1.0.6",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
@@ -68,6 +69,7 @@
     "not dead"
   ],
   "prettier": {
-    "singleQuote": true
+    "singleQuote": true,
+    "endOfLine": "auto"
   }
 }

package.json

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header />
-    <router-view />
+    <router-view :key="$route.path" />
     <Footer />
   </div>
 </template>

src/App.vue

@@ -66,6 +66,20 @@ export default {
         contentTypeUid: 'footer',
         jsonRtePath: ['copyright']
       });
+      let responsePages = await Stack.getEntries({
+        contentTypeUid: 'page'
+      });
+      let navFooterList = response[0].navigation.link;
+      if (responsePages.length !== response.length) {
+        responsePages.forEach(entry => {
+          const fFound = response[0].navigation.link.find(
+            link => link.title === entry.title
+          );
+          if (!fFound) {
+            navFooterList.push({ title: entry.title, href: entry.url });
+          }
+        });
+      }
       this.data = response[0];
       this.$store.dispatch('setFooter', response[0]);
     }

src/components/Footer.vue

@@ -75,6 +75,24 @@ export default {
         referenceFieldPath: `navigation_menu.page_reference`,
         jsonRtePath: ['notification_bar.announcement_text']
       });
+      let responsePages = await Stack.getEntries({
+        contentTypeUid: 'page'
+      });
+      let navHeaderList = response[0].navigation_menu;
+      if (responsePages.length !== response.length) {
+        responsePages.forEach(entry => {
+          const hFound = response[0].navigation_menu.find(
+            navLink => navLink.label === entry.title
+          );
+
+          if (!hFound) {
+            navHeaderList.push({
+              label: entry.title,
+              page_reference: [{ title: entry.title, url: entry.url }]
+            });
+          }
+        });
+      }
       this.data = response[0];
       this.$store.dispatch('setHeader', response[0]);
     }

src/components/Header.vue

@@ -13,12 +13,21 @@
         {{ data.banner_description }}
       </p>
       <template v-if="title === 'home-content'">
-        <router-link aria-current="page" class="btn tertiary-btn" to="/">
+        <router-link
+          v-if="data.call_to_action.title && data.call_to_action.href"
+          aria-current="page"
+          class="btn tertiary-btn"
+          to="/"
+        >
           Read more
         </router-link>
       </template>
     </div>
-    <img :src="data.banner_image.url" :alt="data.banner_image.title" />
+    <img
+      v-if="data.banner_image"
+      :src="data.banner_image.url"
+      :alt="data.banner_image.title"
+    />
   </div>
 </template>
 

src/components/HeroBanner.vue

@@ -16,7 +16,7 @@
         :data="component.hero_banner"
       />
       <HeroBanner
-        v-if="component.hero_banner && page === 'About Us'"
+        v-if="component.hero_banner && page !== 'Home'"
         :key="index"
         title="about-content"
         :data="component.hero_banner"
@@ -41,8 +41,8 @@
         :key="index"
         :data="component.section_with_buckets"
       />
-      <AboutSectionBucket
-        v-if="component.section_with_buckets && page === 'About Us'"
+      <SectionWithBuckets
+        v-if="component.section_with_buckets && page !== 'Home'"
         :key="index"
         :data="component.section_with_buckets"
       />
@@ -56,6 +56,11 @@
         :key="index"
         :data="component.section_with_html_code"
       />
+      <SectionWithEmbedObject
+        v-if="component.section_with_html_code && page !== 'Contact Us'"
+        :key="index"
+        :data="component.section_with_html_code"
+      />
     </template>
   </main>
 </template>
@@ -67,15 +72,13 @@ import SectionWithCards from '../components/SectionWithCards';
 import TeamSection from '../components/TeamSection';
 import SectionWithEmbedObject from '../components/SectionWithEmbedObject';
 import SectionWithBuckets from '../components/SectionWithBuckets';
-import AboutSectionBucket from '../components/AboutSectionBucket';
 import BlogSection from '../components/BlogSection';
 import Devtools from '../components/Devtools.vue';
 export default {
   components: {
     HeroBanner,
     Section,
     SectionWithBuckets,
-    AboutSectionBucket,
     SectionWithCards,
     TeamSection,
     BlogSection,

src/components/RenderComponents.vue

@@ -7,7 +7,12 @@
         <p>
           {{ data.description }}
         </p>
-        <router-link aria-current="page" class="btn secondary-btn" to="/">
+        <router-link
+          v-if="data.call_to_action.title"
+          aria-current="page"
+          class="btn secondary-btn"
+          to="/"
+        >
           {{ data.call_to_action.title }}
         </router-link>
       </div>
@@ -18,7 +23,12 @@
         <p>
           {{ data.description }}
         </p>
-        <router-link aria-current="page" class="btn secondary-btn" to="/">
+        <router-link
+          v-if="data.call_to_action.title"
+          aria-current="page"
+          class="btn secondary-btn"
+          to="/"
+        >
           {{ data.call_to_action.title }}
         </router-link>
       </div>

src/components/Section.vue

@@ -9,7 +9,10 @@
         <img :src="index.icon.url" :alt="index.icon.title" />
         <h3>{{ index.title_h3 }}</h3>
         <p v-html="index.description" />
-        <router-link :to="index.call_to_action.href">
+        <router-link
+          v-if="index.call_to_action.href"
+          :to="index.call_to_action.href"
+        >
           {{ index.call_to_action.title }}--&gt;
         </router-link>
       </div>

src/components/SectionWithBuckets.vue

@@ -3,9 +3,7 @@
     <span data-bs-toggle="modal" data-bs-target="#staticBackdrop"
       ><img src="/json.svg" alt="JSON Preview icon"
     /></span>
-    <div class="Tooltip-top" ref="toolTipRef">
-      JSON Preview
-    </div>
+    <div class="Tooltip-top" ref="toolTipRef">JSON Preview</div>
   </div>
 </template>
 

src/components/Tooltip.vue

@@ -1,7 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Home from './views/Home.vue';
-import About from './views/About.vue';
-import Contact from './views/Contact.vue';
 import Blog from './views/Blog.vue';
 import BlogPost from './views/BlogPost.vue';
 import NotFound from './views/404.vue';
@@ -12,12 +10,8 @@ const routes = [
     component: Home
   },
   {
-    path: '/about-us',
-    component: About
-  },
-  {
-    path: '/contact-us',
-    component: Contact
+    path: '/:page',
+    component: Home
   },
   {
     path: '/blog',

src/router.js

@@ -3,9 +3,7 @@
     <div class="error-page">
       <h1>404: Not Found</h1>
       <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-      <router-link to="/">
-        Navigate to home page
-      </router-link>
+      <router-link to="/">Navigate to home page</router-link>
     </div>
   </div>
 </template>

src/views/404.vue

@@ -46,17 +46,21 @@
       </div>
     </div>
   </main>
+  <Skeletor v-else height="100vh" />
 </template>
 
 <script>
 import moment from 'moment';
 import Stack from '../plugins/contentstack';
 import BlogBanner from '../components/BlogBanner';
 import { onEntryChange } from '../plugins/contentstack';
+import 'vue-skeletor/dist/vue-skeletor.css';
+import { Skeletor } from 'vue-skeletor';
 
 export default {
   components: {
-    BlogBanner
+    BlogBanner,
+    Skeletor
   },
   data() {
     return {

src/views/About.vue

@@ -6,17 +6,24 @@
     :entryUid="data.uid"
     :locale="data.locale"
   />
+  <NotFound v-else-if="data !== null" />
+  <Skeletor v-else height="100vh" />
 </template>
 
 <script>
 import Stack from '../plugins/contentstack';
 import RenderComponent from '../components/RenderComponents';
 import { onEntryChange } from '../plugins/contentstack';
+import NotFound from './404.vue';
+import 'vue-skeletor/dist/vue-skeletor.css';
+import { Skeletor } from 'vue-skeletor';
 
 export default {
   name: 'Home',
   components: {
-    RenderComponent
+    RenderComponent,
+    NotFound,
+    Skeletor
   },
   data() {
     return {