optimisation mobile + filtres des monstres + seo

docs/.vuepress/config.js

@@ -93,7 +93,28 @@ module.exports = {
       '@vuepress/pwa',
       {
         serviceWorker: true,
-        updatePopup: true
+        updatePopup: true,
+        generateSWConfig: {
+          cacheId: 'hddrs',
+          globIgnores: ['**/*.js', '**/*.css', '**/*.html']
+        }
+      }
+    ],
+    [
+      'seo',
+      {
+        siteTitle: (_, $site) => $site.title,
+        title: ($page, $site) => $page.title + ' | ' + $site.title,
+        description: $page => $page.frontmatter.description,
+        // author: (_, $site) => $site.themeConfig.author,
+        // tags: $page => $page.frontmatter.tags,
+        twitterCard: _ => 'summary_large_image',
+        type: $page => 'website',
+        url: (_, $site, path) => ($site.themeConfig.domain || '') + path,
+        // image: ($page, $site) => $page.frontmatter.image && (($site.themeConfig.domain || '') + $page.frontmatter.image),
+        image: ($page, $site) => $site.themeConfig.domain + '/social-logo.png',
+        // publishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date),
+        // modifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated),
       }
     ],
   ],
@@ -115,6 +136,7 @@ module.exports = {
     }
   },
   themeConfig: {
+    domain: 'https://staging.heros-et-dragons.fr',
     repository: 'https://github.com/em-squared/heros-et-dragons-drs',
     kofi: 'https://ko-fi.com/S6S410PB8',
     primaryColor: '#563f5a', // Hero

docs/.vuepress/public/manifest.json

@@ -4,7 +4,7 @@
   "name" : "Héros & Dragons DRS",
   "scope" : "/",
   "display" : "standalone",
-  "start_url" : "https://staging.heros-et-dragons.fr/",
+  "start_url" : "/index.html",
   "short_name" : "H&D DRS",
   "theme_color" : "#563f5a",
   "description" : "Document de référence système pour le jeu de rôle Héros & Dragons",
@@ -12,12 +12,12 @@
   "background_color" : "#ffffff",
   "icons" : [
     {
-        "src": "https://staging.heros-et-dragons.fr/android-chrome-192x192.png",
+        "src": "/android-chrome-192x192.png",
         "type": "image/png",
         "sizes": "192x192"
     },
     {
-        "src": "https://staging.heros-et-dragons.fr/android-chrome-512x512.png",
+        "src": "/android-chrome-512x512.png",
         "type": "image/png",
         "sizes": "512x512"
     }

docs/.vuepress/store/index.js

@@ -21,6 +21,7 @@ export default new Vuex.Store({
     hasRightDrawer: false,
     inRightDrawer: null,
     isThemeDark: false,
+    isOpenAboutDialog: false,
   },
 
   getters: {
@@ -30,6 +31,7 @@ export default new Vuex.Store({
     hasRightDrawer: state => state.hasRightDrawer,
     inRightDrawer: state => state.inRightDrawer,
     isThemeDark: state => state.isThemeDark,
+    isOpenAboutDialog: state => state.isOpenAboutDialog,
   },
 
   actions: {
@@ -51,6 +53,9 @@ export default new Vuex.Store({
     isThemeDark: ({ commit }, payload) => {
       commit('setIsThemeDark', payload)
     },
+    isOpenAboutDialog: ({ commit }, payload) => {
+      commit('setIsOpenAboutDialog', payload)
+    },
   },
 
   mutations: {
@@ -72,5 +77,8 @@ export default new Vuex.Store({
     setIsThemeDark: (state, payload) => {
       state.isThemeDark = payload
     },
+    setIsOpenAboutDialog: (state, payload) => {
+      state.isOpenAboutDialog = payload
+    },
   },
 })

docs/.vuepress/store/modules/monsterFilters.js

@@ -29,7 +29,7 @@ export default {
       { label: "Très grand", abbr:"TG", value: false },
       { label: "Gigantesque", abbr:"Gig", value: false },
     ],
-    environements: [
+    environments: [
       { label: "Arctique / Subarctique", value: false },
       { label: "Bois / Forêt", value: false },
       { label: "Collines / Vallées", value: false },

docs/.vuepress/theme/components/Monster.vue

@@ -139,7 +139,8 @@ import {
   getModifier,
   displayAbilityScore,
   getProficiencyBonus,
-  displayChallenge
+  displayChallenge,
+  displayMonsterTypeSizeAlignment
 } from '@theme/util/monsterHelpers'
 
 import {stats} from '../../data/stats.js'
@@ -184,22 +185,7 @@ export default {
     getProficiencyBonus () { return getProficiencyBonus(this.monster.challenge) },
 
     displayMonsterTypeSizeAlignment () {
-      let result = ''
+      return displayMonsterTypeSizeAlignment(this.monster)
-      if (this.monster.isSwarm) {
-        result = 'Nuée de taille '+ this.monster.size + ' composée ' + stats.monsterTypes[this.monster.type].swarm
-        if (this.monster.subtype) {
-          result += ' (' + this.monster.subtype + ')'
-        }
-        result += ' de taille ' + this.monster.swarmSize
-      } else {
-        result = this.monster.type
-        if (this.monster.subtype) {
-          result += ' (' + this.monster.subtype + ')'
-        }
-        result += ' de taille ' + this.monster.size
-      }
-      result += ', ' + this.monster.alignment
-      return result
     },
 
     displaySavingThrowBonus (ability) {

docs/.vuepress/theme/components/MonsterFilters.vue

@@ -28,7 +28,21 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
 
+      <v-expansion-panel>
+        <v-expansion-panel-header>Environnements</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetEnvironments" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(environment, idx) in environments" v-model="environment.value" :label="environment.label" dense class="ma-0" @change="switchEnvironment" color="accent"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
 
+      <v-expansion-panel>
+        <v-expansion-panel-header>Types de donjons</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetDungeonTypes" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(dungeonType, idx) in dungeonTypes" v-model="dungeonType.value" :label="dungeonType.label" dense class="ma-0" @change="switchDungeonType" color="accent"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
 
     </v-expansion-panels>
 
@@ -75,6 +89,24 @@ export default {
         this.$store.commit('monsterFilters/setSizes', newValue)
       }
     },
+
+    environments: {
+      get () {
+        return this.$store.state.monsterFilters.environments
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setEnvironments', newValue)
+      }
+    },
+
+    dungeonTypes: {
+      get () {
+        return this.$store.state.monsterFilters.dungeonTypes
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setDungeonTypes', newValue)
+      }
+    },
   },
 
   methods: {
@@ -96,7 +128,27 @@ export default {
           list.push(this.sizes[i].label)
         }
       }
-      setUrlParams('raretes', list)
+      setUrlParams('tailles', list)
+    },
+
+    switchEnvironment () {
+      let list = []
+      for (var i = 0; i < this.environments.length; i++) {
+        if (this.environments[i].value) {
+          list.push(this.environments[i].label)
+        }
+      }
+      setUrlParams('environnements', list)
+    },
+
+    switchDungeonType () {
+      let list = []
+      for (var i = 0; i < this.dungeonTypes.length; i++) {
+        if (this.dungeonTypes[i].value) {
+          list.push(this.dungeonTypes[i].label)
+        }
+      }
+      setUrlParams('donjons', list)
     },
 
     setColor (value, compare, color) {
@@ -115,16 +167,30 @@ export default {
       this.$store.commit('monsterFilters/resetSizes')
       this.switchSize()
     },
+
+    resetEnvironments () {
+      this.$store.commit('monsterFilters/resetEnvironments')
+      this.switchEnvironment()
+    },
+
+    resetDungeonTypes () {
+      this.$store.commit('monsterFilters/resetDungeonTypes')
+      this.switchDungeonType()
+    },
   },
 
   mounted () {
     this.$store.dispatch('monsterFilters/reset')
 
-    let selectedSizes = getUrlParameter(window.location.href, "raretes").split(",")
+    let selectedSizes = getUrlParameter(window.location.href, "tailles").split(",")
     let selectedTypes = getUrlParameter(window.location.href, "types").split(",")
+    let selectedEnvironments = getUrlParameter(window.location.href, "environnements").split(",")
+    let selectedDungeonTypes = getUrlParameter(window.location.href, "donjons").split(",")
 
     setListMutation(selectedTypes, this.$store, 'monsterFilters/setTypesFromList')
     setListMutation(selectedSizes, this.$store, 'monsterFilters/setSizesFromList')
+    setListMutation(selectedEnvironments, this.$store, 'monsterFilters/setEnvironmentsFromList')
+    setListMutation(selectedDungeonTypes, this.$store, 'monsterFilters/setDungeonTypesFromList')
   }
 }
 </script>

docs/.vuepress/theme/components/NavDrawer.vue

@@ -71,6 +71,16 @@
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+      <v-list-item v-if="$vuetify.breakpoint.mdAndDown" @click.stop="$store.commit('setIsOpenAboutDialog', true)">
+        <v-list-item-icon>
+          <v-icon>mdi-information</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title>
+            À propos
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
     </v-list>
   </v-navigation-drawer>
 </template>

docs/.vuepress/theme/components/Navbar.vue

@@ -7,12 +7,12 @@
     <SRDSearchBox v-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
     <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" class="hidden-sm-and-down" /> -->
     <v-spacer />
-    <v-btn @click.stop="aboutDialog = true" icon><v-icon>mdi-information</v-icon></v-btn>
+    <v-btn v-if="$vuetify.breakpoint.lgAndUp" @click.stop="$store.commit('setIsOpenAboutDialog', true)" icon><v-icon>mdi-information</v-icon></v-btn>
     <v-btn @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
       <v-icon>{{ rightDrawerIcon }}</v-icon>
     </v-btn>
 
-    <v-dialog v-model="aboutDialog" max-width="600">
+    <v-dialog v-model="$store.state.isOpenAboutDialog" max-width="600">
       <v-card>
         <v-card-title class="headline">À propos de H&D DRS</v-card-title>
 
@@ -30,7 +30,6 @@
 
 <script>
 import SRDSearchBox from '@theme/components/search/SRDSearchBox.vue'
-// import NavLinks from '@theme/components/NavLinks.vue'
 
 export default {
   name: 'Navbar',
@@ -62,7 +61,7 @@ export default {
     rightDrawerIcon() {
       if (this.inRightDrawer == 'pageToc') {
         return 'mdi-format-list-bulleted'
-      } else if (this.inRightDrawer == 'spellFilters' || this.inRightDrawer == 'magicItemFilters') {
+      } else if (this.inRightDrawer == 'spellFilters' || this.inRightDrawer == 'monsterFilters' || this.inRightDrawer == 'magicItemFilters') {
         return 'mdi-filter-variant'
       }
       return 'mdi-menu'

docs/.vuepress/theme/components/search/SRDSearchBox.vue

@@ -34,6 +34,7 @@
 import matchQuery from './match-query'
 import { displaySchoolLevel } from '@theme/util/spellHelpers'
 import { displayItemMeta } from '@theme/util/magicItemHelpers'
+import { displayMonsterTypeSizeAlignment } from '@theme/util/monsterHelpers'
 
 /* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
 export default {
@@ -118,6 +119,12 @@ export default {
               title: p.title,
               path: p.path
             }))
+          } else if (p.pid && p.pid == 'monster') {
+            res.push(Object.assign({}, p, {
+              subtitle: displayMonsterTypeSizeAlignment(p.frontmatter, true, false),
+              title: p.title,
+              path: p.path
+            }))
           } else {
             res.push(p)
           }

docs/.vuepress/theme/layouts/MagicItemsLayout.vue

@@ -12,6 +12,7 @@
       item-key="key"
       :sort-by.sync="sortBy"
       :sort-desc.sync="sortDesc"
+      must-sort
       :search="search"
     >
 

docs/.vuepress/theme/layouts/MonstersLayout.vue

@@ -12,6 +12,8 @@
       item-key="key"
       :sort-by.sync="sortBy"
       :sort-desc.sync="sortDesc"
+      must-sort
+      :search="search"
     >
 
       <template v-slot:item.title="{ item }">
@@ -65,6 +67,8 @@ export default {
       search: state => state.monsterFilters.search,
       types: state => state.monsterFilters.types,
       sizes: state => state.monsterFilters.sizes,
+      environments: state => state.monsterFilters.environments,
+      dungeonTypes: state => state.monsterFilters.dungeonTypes,
     }),
 
     monsters() {
@@ -96,6 +100,52 @@ export default {
         })
       }
 
+      // Filter environments
+      let selectedEnvironments = []
+      for (var i = 0; i < this.environments.length; i++) {
+        if (this.environments[i].value) {
+          selectedEnvironments.push(this.environments[i].label)
+        }
+      }
+      if (selectedEnvironments.length) {
+        let classFiltered = []
+        for (var i = 0; i < selectedEnvironments.length; i++) {
+          for (var j = 0; j < results.length; j++) {
+            if (results[j].frontmatter.environments) {
+              if (results[j].frontmatter.environments.indexOf(selectedEnvironments[i]) > -1) {
+                if (classFiltered.indexOf(results[j]) < 0) {
+                  classFiltered.push(results[j])
+                }
+              }
+            }
+          }
+        }
+        results = classFiltered
+      }
+
+      // Filter dungeon types
+      let selectedDungeonTypes = []
+      for (var i = 0; i < this.dungeonTypes.length; i++) {
+        if (this.dungeonTypes[i].value) {
+          selectedDungeonTypes.push(this.dungeonTypes[i].label)
+        }
+      }
+      if (selectedDungeonTypes.length) {
+        let classFiltered = []
+        for (var i = 0; i < selectedDungeonTypes.length; i++) {
+          for (var j = 0; j < results.length; j++) {
+            if (results[j].frontmatter.dungeonTypes) {
+              if (results[j].frontmatter.dungeonTypes.indexOf(selectedDungeonTypes[i]) > -1) {
+                if (classFiltered.indexOf(results[j]) < 0) {
+                  classFiltered.push(results[j])
+                }
+              }
+            }
+          }
+        }
+        results = classFiltered
+      }
+
       return results
     }
   },

docs/.vuepress/theme/layouts/SpellsLayout.vue

@@ -10,6 +10,7 @@
       item-key="key"
       :sort-by.sync="sortBy"
       :sort-desc.sync="sortDesc"
+      must-sort
       :search="search"
     >
 

docs/.vuepress/theme/styles/_tables.scss

@@ -22,7 +22,7 @@
 
 .v-data-table-header-mobile {
   th {
-    display: none;
+    background-color: #fff;
   }
 }
 

docs/.vuepress/theme/util/monsterHelpers.js

@@ -39,3 +39,28 @@ export function displayChallenge (challenge, xp = false) {
   }
   return challenge
 }
+
+// Affiche le type, la taille et l'alignement
+export function displayMonsterTypeSizeAlignment (monster, hideAlignment = false, showChallenge = false) {
+  let result = ''
+  if (monster.isSwarm) {
+    result = 'Nuée de taille '+ monster.size + ' composée ' + stats.monsterTypes[monster.type].swarm
+    if (monster.subtype) {
+      result += ' (' + monster.subtype + ')'
+    }
+    result += ' de taille ' + monster.swarmSize
+  } else {
+    result = monster.type
+    if (monster.subtype) {
+      result += ' (' + monster.subtype + ')'
+    }
+    result += ' de taille ' + monster.size
+  }
+  if (!hideAlignment) {
+    result += ', ' + monster.alignment
+  }
+  if (showChallenge) {
+    result += ', Dangerosité : ' + displayChallenge(monster.challenge)
+  }
+  return result
+}

package.json

@@ -22,6 +22,7 @@
     "vuepress": "^1.4.0",
     "vuepress-plugin-clean-urls": "^1.1.1",
     "vuepress-plugin-dehydrate": "^1.1.3",
+    "vuepress-plugin-seo": "^0.1.2",
     "vuepress-plugin-sitemap": "^2.3.1",
     "vuetify": "^2.2.19",
     "vuex": "^3.1.3"

yarn.lock

@@ -8384,6 +8384,11 @@ vuepress-plugin-mailchimp@^1.4.1:
     jsonp "^0.2.1"
     query-string "^6.9.0"
 
+vuepress-plugin-seo@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/vuepress-plugin-seo/-/vuepress-plugin-seo-0.1.2.tgz#132e656274bfaffce72e816fb8450951f3f6cc13"
+  integrity sha512-Tv3ihNl3pDX5krqq9r2X9rFKUVR8ssLvcKcu1P4ABP8/b3vC06St/UTe5QucgKzuphlIJkbRSOQ7n7yf6jMCRw==
+
 vuepress-plugin-sitemap@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/vuepress-plugin-sitemap/-/vuepress-plugin-sitemap-2.3.1.tgz#51298aca77a5de96396fdbd1103e1637dd61ae6a"