Julien local dev & summary option

README.md

@@ -116,6 +116,7 @@ Technologies used for **multi-site** are the followiing :
 - [Dotenv](https://www.npmjs.com/package/dotenv) - js library to load env variables  ;
 - [Gray matter](https://www.npmjs.com/package/gray-matter) - js library to transform yaml or markdown data into js objects  ;
 - [vue-Showdown](https://vue-showdown.js.org/) - js plugin to transform markdown into html  ;
+- [highlight.js](https://highlightjs.org/) - to apply css to code blocks (nice colors for every languages) ;
 
 ---
 

assets/custom-styles.scss

@@ -1,6 +1,9 @@
-// Import Bulma's core
+
 @import "~bulma/sass/utilities/_all";
 
+// Import Bulma's core
+@import "~highlight.js/styles/default";
+
 // h1 {
 //   font-size: 2em;
 //   font-weight: bold;

components/contents/ContentsSkeleton.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="mb-5 mt-3">
+  <div
+    class="content-skeleton mb-5 mt-3">
 
     <!-- DEBUG -->
     <div 
@@ -31,47 +32,48 @@
 
     <LogoAnimated
       v-if="section.component === 'LogoAnimated' && sectionData"
-      :sectionIndex="sectionIndex"
-      :sectionData="sectionData"
-      :sectionOptions="sectionOptions"
+      :section-index="sectionIndex"
+      :section-data="sectionData"
+      :section-options="sectionOptions"
       :debug="false"
     />
 
     <TextComponent
       v-if="section.component === 'TextComponent' && sectionData"
-      :sectionIndex="sectionIndex"
-      :sectionData="sectionData"
-      :sectionOptions="sectionOptions"
+      class="TextComponent"
+      :section-index="sectionIndex"
+      :section-data="sectionData"
+      :section-options="sectionOptions"
       :debug="false"
     />
 
     <DataGrid
       v-if="section.component === 'DataGrid' && sectionData"
-      :sectionIndex="sectionIndex"
-      :sectionData="sectionData"
-      :sectionOptions="sectionOptions"
+      :section-index="sectionIndex"
+      :section-data="sectionData"
+      :section-options="sectionOptions"
       :debug="false"
     />
 
     <TextDataComponent
       v-if="section.component === 'TextDataComponent' && sectionData"
-      :sectionIndex="sectionIndex"
-      :sectionData="sectionData"
-      :sectionOptions="sectionOptions"
+      :section-index="sectionIndex"
+      :section-data="sectionData"
+      :section-options="sectionOptions"
       :debug="false"
     />
 
     <ButtonsComponent
       v-if="section.component === 'ButtonsComponent'"
-      :sectionIndex="sectionIndex"
-      :sectionOptions="sectionOptions"
+      :section-index="sectionIndex"
+      :section-options="sectionOptions"
       :debug="false"
     />
 
     <WidgetComponent
       v-if="section.component === 'WidgetComponent'"
-      :sectionIndex="sectionIndex"
-      :sectionOptions="sectionOptions"
+      :section-index="sectionIndex"
+      :section-options="sectionOptions"
       :debug="true"
     />
 
@@ -86,11 +88,6 @@ import { mapState, mapGetters } from 'vuex'
 
 export default {
   name: 'ContentsSkeleton',
-  props: [
-    'section',
-    'sectionIndex',
-    'debug'
-  ],
   components: {
     LogoAnimated: () => import(/* webpackChunkName: "LogoAnimated" */ '~/components/contents/LogoAnimated.vue'),
     TextComponent: () => import(/* webpackChunkName: "TextComponent" */ '~/components/contents/TextComponent.vue'),
@@ -99,20 +96,11 @@ export default {
     ButtonsComponent: () => import(/* webpackChunkName: "ButtonsComponent" */ '~/components/buttons/ButtonsComponent.vue'),
     WidgetComponent: () => import(/* webpackChunkName: "WidgetComponent" */ '~/components/advanced/WidgetComponent.vue'),
   },
-  async mounted() {
-    // console.log('-C- ContentsSkeleton > mounted > this.section :', this.section)
-    if (this.section.files) {
-      await this.getFileData()
-    }
-  },
-  watch: {
-    async locale(next) {
-      // console.log('-C- ContentsSkeleton > watch > locale > next :', next)
-      if (this.section.files) {
-        await this.getFileData()
-      }
-    }
-  },
+  props: [
+    'section',
+    'sectionIndex',
+    'debug'
+  ],
   data() {
     return {
       sectionData: undefined,
@@ -144,11 +132,26 @@ export default {
       return this.section.options
     }
   },
+  watch: {
+    async locale(next) {
+      // console.log('-C- ContentsSkeleton > watch > locale > next :', next)
+      if (this.section.files) {
+        await this.getFileData()
+      }
+    }
+  },
+  async mounted() {
+    // console.log('\n-C- ContentsSkeleton > mounted > this.section :', this.section)
+    if (this.section.files) {
+      await this.getFileData()
+    }
+  },
   methods: {
     async getFileData() {
       const urlRaw = this.convertUrl
-      // console.log('-C- ContentsSkeleton > getFileData > urlRaw :', urlRaw)
+      // console.log('\n-C- ContentsSkeleton > getFileData > urlRaw :', urlRaw)
       const req = await this.$axios.get(urlRaw)
+      // console.log('-C- ContentsSkeleton > getFileData > req.data :', req.data)
       const fileData = matter(req.data)
       this.sectionData = {
         data: fileData.data,

components/contents/TextComponent.vue

@@ -57,6 +57,7 @@
         :markdown="content"
         :flavor="showdownOptions.flavor"
         :options="showdownOptions.options"
+        :extensions="showdownOptions.extensions"
       />
 
       <!-- render columns with options -->
@@ -73,6 +74,7 @@
             :markdown="splitContent"
             :flavor="showdownOptions.flavor"
             :options="showdownOptions.options"
+            :extensions="showdownOptions.extensions"
           />
         </div>
       </div>

layouts/default.vue

@@ -44,22 +44,6 @@ export default {
     FooterComponent: () => import(/* webpackChunkName: "FooterComponent" */ '~/components/footer/FooterComponent.vue'),
     CreditsFooter: () => import(/* webpackChunkName: "CreditsFooter" */ '~/components/footer/CreditsFooter.vue'),
   },
-  data() {
-    return {
-      // items: [
-      //   {
-      //     title: 'Home',
-      //     icon: 'home',
-      //     to: { name: 'index' },
-      //   },
-      //   {
-      //     title: 'Inspire',
-      //     icon: 'lightbulb',
-      //     to: { name: 'inspire' },
-      //   },
-      // ],
-    }
-  },
   computed: {
     ...mapState({
       log: (state) => state.log,

middleware/buildFooter.js

@@ -26,7 +26,6 @@ export default async function ({
         store.dispatch('updateFooter', footerObject)
       })
 
-
   }
 
 }

middleware/buildNavbar.js

@@ -21,15 +21,15 @@ export default async function ({
     // console.log( '-MW- buildNavbar > urlNavbarFile : ', urlNavbarFile )
 
     await $axios.get(urlNavbarFile)
-      .then( resp => {
-        // convert string to json object
-        const navbarObject = matter(resp.data)
-        // console.log( '-MW- buildNavbar > navbarObject : ', navbarObject ) 
-        
-        // save to store
-        store.dispatch('updateNavbar', navbarObject)
-      })
-  
+    .then( resp => {
+      // convert string to json object
+      const navbarObject = matter(resp.data)
+      // console.log( '-MW- buildNavbar > navbarObject : ', navbarObject ) 
+
+      // save to store
+      store.dispatch('updateNavbar', navbarObject)
+    })
+
   }
 
 }

middleware/buildRoutes.js

@@ -25,8 +25,7 @@ export default async function ({
         // save to store
         store.dispatch('updateRoutes', routesObject)
       })
-
-
+
   }
 
 }

middleware/getConfig.js

@@ -1,6 +1,8 @@
+
 import matter from 'gray-matter'
 
 import { extractGitInfos } from '~/utils/utilsGitUrl'
+// import { GetFileObjectFromURL } from '~/utils/utilsFiles'
 
 export default async function ({
   store, 
@@ -19,11 +21,12 @@ export default async function ({
 
     // extract git infos
     const gitInfos = extractGitInfos(urlConfigFile)
-    // console.log( '-MW- getConfig > gitInfos : \n', gitInfos ) 
     store.dispatch('updateGitInfos', gitInfos)
+    // console.log( '-MW- getConfig > gitInfos : \n', gitInfos ) 
 
     const urlConfigFileRaw = `${gitInfos.gitRawRoot}${gitInfos.remainingString}`
-
+    // console.log( '-MW- getConfig > urlConfigFileRaw : \n', urlConfigFileRaw ) 
+
     await $axios.get(urlConfigFileRaw)
       .then( resp => {
 
@@ -34,7 +37,7 @@ export default async function ({
         // save to store
         return store.dispatch('updateConfig', configObject)
       })
-  
+
   }
 
 }

nuxt.config.js

@@ -1,19 +1,19 @@
-const dotenv = require('dotenv')
-
-import axios from 'axios'
+// import axios from 'axios'
 
 import { 
   logAllowed,
-  configApp
+  ConfigApp
 } from './utils/utilsConfig'
 
+const dotenv = require('dotenv')
+
 // loads .env file(s)
 dotenv.config()
 // dotenv.config({ path: 'production.env' })
 
 const RUN_MODE = process.env.NUXT_ENV_RUN_MODE || process.env.NUXT_ENV_RUN_MODE_OVERIDE
 
-const config = new configApp(RUN_MODE, process.env)
+const config = new ConfigApp(RUN_MODE, process.env)
 console.log('>>> nuxt.config.js (start) / config : ', config)
 
 
@@ -87,8 +87,9 @@ export default {
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
     // 'bulma',
-    '@/assets/custom-styles.scss',
+    '@/assets/custom-styles.scss'
     // '~/assets/custom-styles.scss',
+    // '~/highlight.js/scss/default.scss'
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins