Updated App.vue

Added image gallery component
Moved helper functions to Helper.js

src/App.vue

@@ -55,27 +55,9 @@
     </section>
 
     <section class="prose">
-      <h2>Musculature</h2>
+      <h2>Muscle Reference</h2>
-      <img-p imgPos="left" imgSrc="/img/chest-ref.jpg"
+      <p>Sebin loves working out! As a result his body is very muscular.</p>
-        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo
+      <gallery :images="muscleRefs"></gallery>
-        quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente
-        soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p
-      >
-      <img-p imgPos="right" imgSrc="/img/muscle-ref1.jpg"
-        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo
-        quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente
-        soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p
-      >
-      <img-p imgPos="bottom" imgSrc="/img/muscle-ref2.jpg"
-        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo
-        quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente
-        soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p
-      >
-      <img-p imgPos="bottom" imgSrc="/img/iu-17.jpeg"
-        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo
-        quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente
-        soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p
-      >
     </section>
 
     <section class="prose">
@@ -110,7 +92,6 @@
         bottomless briefs. He is vers, with a preference to top.
       </p>
     </section>
-    <gallery :images="images"></gallery>
   </div>
 </template>
 
@@ -118,7 +99,9 @@
 import DataTable from "./components/DataTable.vue";
 import ImgP from "./components/ImageParagraph.vue";
 import Gallery from "./components/Gallery.vue";
+
 import Sebin from "./mixins/Sebin.js";
+import Helper from "./mixins/Helper.js";
 
 export default {
   name: "app",
@@ -129,10 +112,10 @@ export default {
   },
   data() {
     return {
-      images: []
+      muscleRefs: this.getMuscleRefPics(17)
     };
   },
-  mixins: [Sebin]
+  mixins: [Sebin, Helper]
 };
 </script>
 

src/mixins/Helper.js

@@ -0,0 +1,46 @@
+export default {
+  methods: {
+    getMuscleRefPics(count) {
+      let muscles = [];
+
+      for (let i = 0; i < count; i++) {
+        let imgNum = (i + 1).toString().padStart(2, "0");
+        muscles.push(`/img/muscle-ref/muscle-ref${imgNum}.JPG`);
+      }
+
+      return muscles;
+    },
+
+    getClientLocale() {
+      if (navigator.language) {
+        return navigator.languages[0];
+      } else if (navigator.userLanguage) {
+        return navigator.userLanguage; // IE < 11
+      } else if (navigator.browserLanguage) {
+        return navigator.userLanguage;
+      } else if (navigator.systemLanguage) {
+        return navigator.systemLanguage;
+      }
+      // return navigator.language ? navigator.languages[0] : navigator.language;
+    },
+
+    toImperial(cm) {
+      const realFeet = (cm * 0.3937) / 12;
+      const feet = Math.floor(realFeet);
+      const inches = Math.round((realFeet - feet) * 12);
+
+      return `${feet}'${inches}"`;
+    },
+
+    toInch(cm) {
+      return `${Math.round(cm / 2.45)} in`;
+    },
+
+    toLbs(kg) {
+      const nearExact = kg / 0.45359237;
+      const lbs = Math.floor(nearExact);
+
+      return lbs;
+    }
+  }
+};