Merge pull request #2 from Demetory/develop

Package update

Author: Demetory

README.md

@@ -8,6 +8,7 @@
 
 - Full configured and ready
 - No complex || heavy dependencies
+- Google Lighthouse Reports are 100% in green zone
 - Atomic Design Patter
 - Pre-configured HTML index page (including SEO-metatags and No-Script section)
 - Prepared public folder (icons, robots.txt, htaccess, humans.txt, etc)
@@ -25,13 +26,14 @@
 <br/>
 <br/>
 ![image](/public/cover.jpg)
+![image](/public/images/lighthouse.png)
 
 <br/><br/>
 
 ## Requirements
 
-- [Node.js](https://nodejs.org/en/): >= 16.11.0
-- [npm](https://www.npmjs.com/): >= 6.32.4
+- [Node.js](https://nodejs.org/en/): >= 16.17.0
+- [npm](https://www.npmjs.com/): >= 9.2.0
   <br/><br/>
 
 ## Recommended IDE

package-lock.json

@@ -1,10 +1,23 @@
 {
   "name": "dim-vue3-template",
-  "version": "0.0.1",
+  "description": "Vue3 Starter Template",
+  "author": "Demetory",
+  "version": "0.0.3",
   "engines": {
-    "node": ">= 16.11.0",
-    "npm": ">= 6.32.4"
+    "node": ">= 16.17.0",
+    "npm": ">= 9.2.0"
   },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",

package.json

@@ -4,7 +4,7 @@
 Demetrey <demetrey.ru>
 
 /* SITE */
-Last update: 2022/11/24
+Last update: 2023/01/25
 Standards: HTML5, CSS3/SCSS, TypeScript, Script Setup SFC
 Components: Vite3, Vue3, Pinia, ESlint, Prettier, VueUse, Axios
 Software: VSCode

public/humans.txt

@@ -17,7 +17,7 @@ $font-selection: #fff;
 $font-grey: #dbdbdb;
 
 // Links
-$link-main: #00bd6f;
+$link-main: #00663c;
 $link-main-hover: #3f3f46;
 $link-main-active: #000;
 

public/images/lighthouse.png

@@ -22,7 +22,7 @@ const edges = [
           :key="`edge-${index}`"
           :class="['cube-edge', `cube-${edge.name}`, `cube-${edge.className}`]"
         >
-          <img alt="Dim Vue 3 Template" :src="useImage(edge.img)" />
+          <img alt="Dim Vue 3 Template" :src="useImage(edge.img)" width="100" height="100" />
         </span>
       </div>
     </router-link>

src/assets/scss/_vars/_var.colors.scss

@@ -4,13 +4,11 @@ import { computed } from "vue";
 
 // Modules
 import { useExamplePiniaStore } from "@/stores/examplePinia";
+import { useDateTZ, useDateToRoman } from "@/composables/useDate";
 
 // Components
 import AtomLink from "@/components/atom/AtomLink.vue";
 
-// Composables
-import { useDateTZ, useDateToRoman } from "@/composables/useDate";
-
 // Data
 const examplePiniaStore = useExamplePiniaStore();
 const date: Date = new Date();

src/components/atom/AtomCube.vue

@@ -42,8 +42,10 @@ function useDateToRoman(num: number) {
     "IX",
   ];
 
-  // @ts-expect-error: wrong type info
-  while (iterations--) result = (key[+digits.pop() + iterations * 10] || "") + result;
+  while (iterations--) {
+    const digit: string | undefined = digits!.pop();
+    result = (key[+digit! + iterations * 10] || "") + result;
+  }
 
   return Array(+digits.join("") + 1).join("M") + result;
 }

src/components/molecule/MoleculeCopyright.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-// Modules
-
 // Components
 import OrganismExampleAxios from "@/components/organism/OrganismExampleAxios.vue";
 import OrganismExamplePinia from "@/components/organism/OrganismExamplePinia.vue";

src/composables/useDate.ts

@@ -1,11 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "playwright.config.*"
-  ],
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
     "types": ["node"]