From f61c81c7149428ca5f7e2c74d3479bbf1aea0204 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@figureslibres.io>
Date: Mon, 5 Aug 2024 21:08:09 +0200
Subject: [PATCH] vue router pour l'history

---
 package-lock.json                             | 334 ++++++++++++++++++
 package.json                                  |   5 +
 web/themes/custom/caravane/assets/js/main.js  |   3 +-
 .../caravane/assets/js/router/router.js       |  14 +
 .../caravane/assets/js/stores/content.js      |   4 +
 .../caravane/assets/js/vuejs/Modale.vue       |  78 ++--
 web/themes/custom/caravane/caravane.theme     |  14 +-
 .../custom/caravane/templates/page.html.twig  |   2 +-
 8 files changed, 419 insertions(+), 35 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 web/themes/custom/caravane/assets/js/router/router.js

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..b83371f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,334 @@
+{
+  "name": "src",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "vue-router": "^4.4.2"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
+      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/types": "^7.25.2"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
+      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.35.tgz",
+      "integrity": "sha512-gKp0zGoLnMYtw4uS/SJRRO7rsVggLjvot3mcctlMXunYNsX+aRJDqqw/lV5/gHK91nvaAAlWFgdVl020AW1Prg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.35",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.35.tgz",
+      "integrity": "sha512-pWIZRL76/oE/VMhdv/ovZfmuooEni6JPG1BFe7oLk5DZRo/ImydXijoZl/4kh2406boRQ7lxTYzbZEEXEhj9NQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.4.35",
+        "@vue/shared": "3.4.35"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.35.tgz",
+      "integrity": "sha512-xacnRS/h/FCsjsMfxBkzjoNxyxEyKyZfBch/P4vkLRvYJwe5ChXmZZrj8Dsed/752H2Q3JE8kYu9Uyha9J6PgA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.35",
+        "@vue/compiler-dom": "3.4.35",
+        "@vue/compiler-ssr": "3.4.35",
+        "@vue/shared": "3.4.35",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.10",
+        "postcss": "^8.4.40",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.35.tgz",
+      "integrity": "sha512-7iynB+0KB1AAJKk/biENTV5cRGHRdbdaD7Mx3nWcm1W8bVD6QmnH3B4AHhQQ1qZHhqFwzEzMwiytXm3PX1e60A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.4.35",
+        "@vue/shared": "3.4.35"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
+      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.35.tgz",
+      "integrity": "sha512-Ggtz7ZZHakriKioveJtPlStYardwQH6VCs9V13/4qjHSQb/teE30LVJNrbBVs4+aoYGtTQKJbTe4CWGxVZrvEw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/shared": "3.4.35"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.35.tgz",
+      "integrity": "sha512-D+BAjFoWwT5wtITpSxwqfWZiBClhBbR+bm0VQlWYFOadUUXFo+5wbe9ErXhLvwguPiLZdEF13QAWi2vP3ZD5tA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "3.4.35",
+        "@vue/shared": "3.4.35"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.35.tgz",
+      "integrity": "sha512-yGOlbos+MVhlS5NWBF2HDNgblG8e2MY3+GigHEyR/dREAluvI5tuUUgie3/9XeqhPE4LF0i2wjlduh5thnfOqw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "3.4.35",
+        "@vue/runtime-core": "3.4.35",
+        "@vue/shared": "3.4.35",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.35.tgz",
+      "integrity": "sha512-iZ0e/u9mRE4T8tNhlo0tbA+gzVkgv8r5BX6s1kRbOZqfpq14qoIvCZ5gIgraOmYkMYrSEZgkkojFPr+Nyq/Mnw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-ssr": "3.4.35",
+        "@vue/shared": "3.4.35"
+      },
+      "peerDependencies": {
+        "vue": "3.4.35"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.35.tgz",
+      "integrity": "sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/postcss": {
+      "version": "8.4.40",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
+      "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.35.tgz",
+      "integrity": "sha512-+fl/GLmI4GPileHftVlCdB7fUL4aziPcqTudpTGXCT8s+iZWuOCeNEB5haX6Uz2IpRrbEXOgIFbe+XciCuGbNQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.4.35",
+        "@vue/compiler-sfc": "3.4.35",
+        "@vue/runtime-dom": "3.4.35",
+        "@vue/server-renderer": "3.4.35",
+        "@vue/shared": "3.4.35"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.2.tgz",
+      "integrity": "sha512-1qNybkn2L7QsLzaXs8nvlQmRKp8XF8DCxZys/Jr1JpQcHsKUxTKzTxCVA1G7NfBfwRIBgCJPoujOG5lHCCNUxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..04e9743
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vue-router": "^4.4.2"
+  }
+}
diff --git a/web/themes/custom/caravane/assets/js/main.js b/web/themes/custom/caravane/assets/js/main.js
index 62f07cc..14d296d 100644
--- a/web/themes/custom/caravane/assets/js/main.js
+++ b/web/themes/custom/caravane/assets/js/main.js
@@ -4,6 +4,7 @@ import '../scss/main.scss'
 import Modale from './vuejs/Modale.vue'
 
 import { useContentStore } from './stores/content';
+import router from './router/router';
 
 // Working with the history API
 // https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
@@ -47,7 +48,7 @@ import { useContentStore } from './stores/content';
     }
 
     function initVueContentModale(){
-      const app = createApp(Modale).use(createPinia());
+      const app = createApp(Modale).use(createPinia()).use(router);
       const store = useContentStore();
       app.mount('#content-modale');
 
diff --git a/web/themes/custom/caravane/assets/js/router/router.js b/web/themes/custom/caravane/assets/js/router/router.js
new file mode 100644
index 0000000..d867ab2
--- /dev/null
+++ b/web/themes/custom/caravane/assets/js/router/router.js
@@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import ModaleView from '../vuejs/Modale.vue';
+
+const routes = [
+    { path: '/node/:id', component: ModaleView, name: 'modale' },
+    { path: '/', component: ModaleView, name: 'home' },
+  ];
+  
+  const router = createRouter({
+    history: createWebHistory(),
+    routes,
+  });
+  
+  export default router;
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js
index 32d1ce9..cb09e4a 100644
--- a/web/themes/custom/caravane/assets/js/stores/content.js
+++ b/web/themes/custom/caravane/assets/js/stores/content.js
@@ -92,6 +92,10 @@ export const useContentStore = defineStore('content', {
           this.loading = false;
         }
       },
+      emptyAll() {
+        this.etape = {};
+        this.page = {};
+      },
     },
   });
 
diff --git a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue
index a7d3ed7..01c1ce6 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue
@@ -1,6 +1,6 @@
 <template>
   <Transition>
-    <div v-if="etape.etape_number">
+    <div v-if="isEtapeValid">
       <header>
         <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
         <h2>{{etape.title}}</h2>
@@ -16,10 +16,7 @@
           <p v-html="partie.text"></p>
         </div>
       </main>
-  
-  
-  
-  
+
   <!--     
       <div v-if="loading">Loading...</div>
       <div v-if="error">{{ error }}</div>
@@ -40,7 +37,7 @@
     </div>
   </Transition>
   <Transition>
-    <div v-if="page.title">
+    <div v-if="isPageValid">
       <header>
         <h1>{{ page.title }}</h1>
       </header>
@@ -52,25 +49,66 @@
 </template>
 
 <script setup>
-  import { watch } from 'vue';
-  import { storeToRefs } from 'pinia';
-  import { useContentStore } from '../stores/content';
+import { ref, computed, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useContentStore } from '../stores/content';
+import { useRoute, useRouter } from 'vue-router';
 
-  const store = useContentStore();
+const router = useRouter();
+const store = useContentStore();
+const route = useRoute();
 
-  const { 
-    loading, error,
-    href,
-    etape,
-    page,
+const { loading, error, href, etape, page } = storeToRefs(store);
 
-  } = storeToRefs(store);
+watch(() => route.params.id, (newId) => {
+  store.fetchEtapeData(newId);
+  if (!etape.value.data) {
+    store.fetchStaticData(newId);
+  }
+});
 
-  watch(() => href.value, (newHref) => {
-    if (newHref) {
-      history.pushState(null, '', newHref);
+watch(() => href.value, (newHref) => {
+  const relativePath = newHref.split('.fr')[1];
+  if (relativePath && (relativePath !== '' || relativePath !== '/')) {
+    router.push(relativePath);
+  } else {
+    store.emptyAll();
+  }
+});
+
+
+const isEtapeValid = computed(() => {
+  return etape.value && !isObjectEmpty(etape.value);
+});
+
+const isPageValid = computed(() => {
+  return page.value && !isObjectEmpty(page.value);
+});
+
+// Utility function to check if an object and its children are empty
+function isObjectEmpty(obj) {
+  if (obj === null || obj === undefined || typeof obj !== 'object') {
+    return true;
+  }
+  for (const key in obj) {
+    if (Object.hasOwnProperty.call(obj, key)) {
+      const value = obj[key];
+      if (Array.isArray(value)) {
+        if (value.length > 0) {
+          return false;
+        }
+      } else if (typeof value === 'object') {
+        if (!isObjectEmpty(value)) {
+          return false;
+        }
+      } else if (value !== null && value !== undefined && value !== '') {
+        return false;
+      }
     }
-  });
+  }
+  return true;
+}
+
 </script>
 
 <style>
diff --git a/web/themes/custom/caravane/caravane.theme b/web/themes/custom/caravane/caravane.theme
index 7d0703b..bde9983 100644
--- a/web/themes/custom/caravane/caravane.theme
+++ b/web/themes/custom/caravane/caravane.theme
@@ -37,17 +37,5 @@ function caravane_preprocess_node(&$variables) {
 }
 
 function your_theme_preprocess_block(&$variables) {
-$t = 0;
-}
-// function A(){
-//   $attr = 6;
-//   B($attr);
-//   print($attr);
-// }
 
-// function B($attr){
-//   $attr = 3;
-//   print($attr);
-// }
-
-// A();
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/themes/custom/caravane/templates/page.html.twig b/web/themes/custom/caravane/templates/page.html.twig
index 0a9519c..0caa18a 100644
--- a/web/themes/custom/caravane/templates/page.html.twig
+++ b/web/themes/custom/caravane/templates/page.html.twig
@@ -64,7 +64,7 @@
     <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
     <div class="layout-content">
-      {{ page.content }}
+     {{ page.content }}
     </div>{# /.layout-content #}
 
     {% if page.sidebar_first %}