Merge pull request #3 from mrleblanc101/release/2.1

Release/2.1

.eslintrc.cjs

@@ -0,0 +1,37 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        node: true,
+    },
+    parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+    },
+    extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended', 'prettier'],
+    plugins: ['vue', 'prettier'],
+    // add your custom rules here
+    rules: {
+        'no-undef': 'off',
+        'no-unused-vars': 'off',
+        'no-console': 'warn',
+        'vue/no-v-html': 'off',
+        'vue/multi-word-component-names': 'off',
+        'nuxt/no-cjs-in-config': 'off',
+        'vue/html-button-has-type': 'error',
+        'object-shorthand': ['error', 'always'],
+        'vue/no-unused-components': 'warn',
+        'vue/padding-line-between-blocks': ['error', 'always'],
+        'vue/no-multiple-template-root': 'off',
+        'vue/prop-name-casing': 'off',
+        'no-irregular-whitespace': 'off',
+        'vue/one-component-per-file': 'off',
+        'vue/define-macros-order': [
+            'error',
+            {
+                order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots'],
+                defineExposeLast: true,
+            },
+        ],
+    },
+};

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: yarn
       - run: yarn install
-      - run: NUXT_APP_BASE_URL=/neobigben/ yarn generate
+      - run: NUXT_APP_BASE_URL=/neobigben/ COMMIT_SHORT_SHA=$(git rev-parse --short ${{ github.sha }}) COMMIT_TAG=${{ github.ref_name }} yarn generate
       - uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierrc

@@ -1,5 +1,7 @@
 {
-    "plugins": ["prettier-plugin-tailwindcss"],
+    "plugins": [
+        "./node_modules/prettier-plugin-tailwindcss/dist/index.mjs"
+    ],
     "printWidth": 120,
     "tabWidth": 4,
     "semi": true,

nuxt.config.ts

@@ -1,12 +1,38 @@
 import ViteSvgLoader from 'vite-svg-loader';
 
+const vueFireConfig =
+    process.env.NODE_ENV === 'development'
+        ? {
+              apiKey: 'AIzaSyDYaC0AbDjuzAsQ4t2-QzbYgYMIWHNWHmc',
+              authDomain: 'neobigben-dev.firebaseapp.com',
+              projectId: 'neobigben-dev',
+              storageBucket: 'neobigben-dev.appspot.com',
+              messagingSenderId: '325271235170',
+              appId: '1:325271235170:web:398500c92cc2664e44bf3b',
+          }
+        : {
+              apiKey: 'AIzaSyArKefxLB6DdSkXhewC3_EzcOplCGGhuRs',
+              authDomain: 'neobigben.firebaseapp.com',
+              projectId: 'neobigben',
+              storageBucket: 'neobigben.appspot.com',
+              messagingSenderId: '681397227646',
+              appId: '1:681397227646:web:fdc164818213b9f80cc82f',
+          };
+
 export default defineNuxtConfig({
     srcDir: 'src/',
 
     devtools: { enabled: true },
 
     ssr: false,
 
+    runtimeConfig: {
+        public: {
+            commitTag: process.env.COMMIT_TAG,
+            commitShortSha: process.env.COMMIT_SHORT_SHA,
+        },
+    },
+
     modules: [
         '@nuxtjs/i18n',
         '@nuxtjs/tailwindcss',
@@ -21,14 +47,7 @@ export default defineNuxtConfig({
         auth: {
             enabled: true,
         },
-        config: {
-            apiKey: 'AIzaSyArKefxLB6DdSkXhewC3_EzcOplCGGhuRs',
-            authDomain: 'neobigben.firebaseapp.com',
-            projectId: 'neobigben',
-            storageBucket: 'neobigben.appspot.com',
-            messagingSenderId: '681397227646',
-            appId: '1:681397227646:web:fdc164818213b9f80cc82f',
-        },
+        config: vueFireConfig,
     },
 
     i18n: {
@@ -51,10 +70,6 @@ export default defineNuxtConfig({
         ],
     },
 
-    piniaPersistedstate: {
-        storage: 'localStorage',
-    },
-
     googleFonts: {
         download: true,
         families: {
@@ -107,4 +122,6 @@ export default defineNuxtConfig({
             }),
         ],
     },
+
+    compatibilityDate: '2024-07-31',
 });

package.json

@@ -1,11 +1,13 @@
 {
     "private": true,
     "scripts": {
+        "get-git-env": "COMMIT_SHORT_SHA=`git rev-parse --short HEAD` COMMIT_TAG=`git describe --tags $(git rev-list --tags --max-count=1)`",
+        "dev": "yarn run get-git-env nuxt dev",
         "build": "nuxt build",
-        "dev": "nuxt dev",
         "generate": "nuxt generate",
         "preview": "nuxt preview",
-        "postinstall": "nuxt prepare"
+        "postinstall": "nuxt prepare",
+        "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore ./src"
     },
     "devDependencies": {
         "@nuxtjs/color-mode": "^3.2.0",
@@ -17,25 +19,31 @@
         "@vueuse/components": "^10.3.0",
         "@vueuse/core": "^10.3.0",
         "@vueuse/nuxt": "^10.3.0",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-vue": "^9.26.0",
         "nuxt": "^3.8.0",
-        "postcss-import": "^15.1.0",
-        "prettier": "^3.0.3",
-        "prettier-plugin-tailwindcss": "^0.5.5",
-        "vite-svg-loader": "^4.0.0"
+        "postcss-import": "^16.0.1",
+        "prettier": "^3.3.3",
+        "prettier-eslint": "^16.3.0",
+        "prettier-plugin-tailwindcss": "^0.6.5",
+        "vite-svg-loader": "^5.1.0",
+        "vue-eslint-parser": "^9.4.3"
     },
     "dependencies": {
         "@pinia/nuxt": "^0.5.1",
         "@tailwindcss/forms": "^0.5.3",
-        "@types/node": "^20.5.0",
+        "@types/node": "^22.0.0",
         "@vueform/multiselect": "^2.5.8",
         "firebase": "^10.4.0",
         "inputmask": "^5.0.7",
         "linkify-string": "^4.1.0",
         "linkifyjs": "^4.1.0",
         "moment": "^2.29.4",
         "moment-duration-format": "^2.3.2",
-        "nuxt-vuefire": "^0.4.0",
-        "vue-draggable-next": "^2.1.1",
+        "nuxt-vuefire": "^1.0.2",
+        "vuedraggable": "^4.1.0",
         "vuefire": "^3.1.17"
     }
 }

src/app.vue

@@ -19,13 +19,15 @@ useHead({
             href: '/neobigben/favicon.svg',
             type: 'image/svg+xml',
         },
-        {
-            rel: 'manifest',
-            href: '/neobigben/manifest.json',
-        },
+        process.env.NODE_ENV !== 'development'
+            ? {
+                  rel: 'manifest',
+                  href: '/neobigben/manifest.json',
+              }
+            : {},
     ],
     bodyAttrs: {
-        class: 'antialiased overflow-x-clip text-gray-700 leading-normal bg-stone-50 dark:bg-gray-900 dark:text-gray-300',
+        class: 'antialiased overflow-x-clip text-slate-700 leading-normal bg-stone-50 dark:bg-slate-900 dark:text-slate-300',
     },
 });
 </script>

src/assets/css/form.css

@@ -1,13 +1,13 @@
 .form-control {
-    @apply h-9 placeholder-gray-400 dark:placeholder-gray-600;
+    @apply h-9 placeholder-slate-400 dark:placeholder-slate-600;
     line-height: normal;
     box-sizing: border-box;
 }
 .form-input,
 .form-select {
     @apply appearance-none;
-    @apply bg-stone-50 dark:bg-gray-900 px-3 text-gray-600 dark:text-gray-400 rounded;
-    @apply dark:focus:bg-gray-900 focus:outline-none focus:ring !ring-primary-200 dark:!ring-gray-600;
+    @apply bg-white dark:bg-slate-900 px-3 text-slate-600 dark:text-slate-400 rounded;
+    @apply dark:focus:bg-slate-900 focus:outline-none focus-visible:ring !ring-primary-200 dark:!ring-slate-600;
     @apply text-sm;
 }
 .form-select {
@@ -21,8 +21,8 @@
 }
 .form-input-bordered,
 .form-select-bordered {
-    @apply border border-gray-300 focus:border-primary-300;
-    @apply dark:border-gray-700 dark:focus:border-gray-500;
+    @apply border border-slate-200 focus:border-primary-300;
+    @apply dark:border-slate-700 dark:focus:border-slate-500;
 }
 .dark .form-input,
 .dark .form-select,
@@ -31,7 +31,7 @@
 }
 /* placeholder text style */
 input[type='date']::-webkit-datetime-edit {
-    @apply text-gray-600;
+    @apply text-slate-600;
 }
 /* regular text style */
 input[type='date'].has-value::-webkit-datetime-edit {

src/components/AppHeader.vue

@@ -1,17 +1,17 @@
 <template>
-    <header class="fixed top-0 z-40 w-full border-b bg-stone-50 dark:border-gray-800 dark:bg-gray-900">
+    <header class="fixed top-0 z-40 w-full border-b bg-stone-50 dark:border-slate-800 dark:bg-slate-900">
         <div class="flex h-16 items-center justify-between px-4 lg:px-8">
             <button
                 type="button"
-                class="-m-2 flex rounded p-2 text-2xl font-black ring-primary-200 focus:outline-none focus:ring dark:ring-gray-600"
+                class="-m-2 flex rounded p-2 text-2xl font-black ring-primary-200 focus:outline-none focus-visible:ring dark:ring-slate-600"
                 @click="selectedDay = $moment().format('YYYY-MM-DD')"
             >
                 <Logo />
             </button>
             <div class="relative flex items-center gap-1 sm:gap-2">
                 <button
                     type="button"
-                    class="inline-flex h-10 flex-shrink-0 items-center justify-center gap-1 rounded bg-primary-500 px-2 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 dark:text-gray-800 dark:ring-gray-600 md:px-3"
+                    class="inline-flex h-10 flex-shrink-0 items-center justify-center gap-1 rounded bg-primary-500 px-2 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600 md:px-3"
                     @click.stop="is_summary_open = !is_summary_open"
                 >
                     <IClock class="h-5" />
@@ -21,17 +21,17 @@
 
                 <button
                     type="button"
-                    class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 bg-cover font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 dark:text-gray-800 dark:ring-gray-600"
-                    :style="{ backgroundImage: `url('${user?.photoURL}')` }"
+                    class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 bg-cover font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600"
+                    :style="{ backgroundImage: `url('${user?.photo_url}')` }"
                     @click.stop="is_user_menu_open = !is_user_menu_open"
                 >
-                    <IUser v-if="!user?.photoURL" class="h-6" />
+                    <IUser v-if="!user?.photo_url" class="h-6" />
                 </button>
                 <UserMenu v-model:is_open="is_user_menu_open" />
 
                 <button
                     type="button"
-                    class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring active:bg-primary-600 dark:text-gray-800 dark:ring-gray-600 xl:hidden"
+                    class="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-primary-500 font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring active:bg-primary-600 dark:text-slate-800 dark:ring-slate-600 xl:hidden"
                     @click.stop="menuOpened = !menuOpened"
                 >
                     <IHamburger v-if="!menuOpened" class="h-4 w-4" />
@@ -51,9 +51,8 @@ import IUser from '@/assets/svg/user.svg?component';
 import { useIndexStore } from '@/stores/index';
 import { storeToRefs } from 'pinia';
 
-const user = useCurrentUser();
 const store = useIndexStore();
-const { weekRemaining, selectedDay, menuOpened } = storeToRefs(store);
+const { weekRemaining, selectedDay, menuOpened, user } = storeToRefs(store);
 
 const is_summary_open = ref(false);
 const is_user_menu_open = ref(false);

src/components/ColorSwitcher.vue

@@ -1,7 +1,7 @@
 <template>
     <button
         type="button"
-        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded bg-primary-500 px-3 py-2 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-900 dark:ring-gray-600"
+        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded bg-primary-500 px-3 py-2 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
         @click="onClick"
     >
         <ColorScheme placeholder="...">

src/components/LanguageSwitcher.vue

@@ -1,7 +1,7 @@
 <template>
     <button
         type="button"
-        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded bg-primary-500 px-3 py-2 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus:ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-900 dark:ring-gray-600"
+        class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded bg-primary-500 px-3 py-2 text-sm font-bold text-white shadow ring-primary-200 transition hover:bg-primary-400 focus:outline-none focus-visible:ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-900 dark:ring-slate-600"
         @click="setLocale(nextLocale.code)"
     >
         {{ nextLocale.name }}