Update node and yarn, start on about us page (#293)

* temp push

* upgraded yarn, node, fixed i18n build

* about page progress

.nvmrc

@@ -1 +1 @@
-18.18.0
+21.3.0

.yarnrc.yml

@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

app.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="h-screen flex flex-col font-sans text-primary-text bg-primary-bg theme-violet">
+    <div class="h-screen flex flex-col font-sans text-primary-text bg-primary-bg">
         <TopNav />
         <NuxtPage class="flex flex-1" />
         <Footer />

i18n.options.ts

@@ -0,0 +1,9 @@
+import i18n from './i18n/index.js'
+
+//@ts-ignore-next-line
+export default defineI18nConfig(() => ({
+    legacy: false,
+    locale: 'en',
+    fallbackLocale: 'en-US',
+    messages: i18n
+}))

nuxt.config.js

@@ -113,11 +113,7 @@ export default defineNuxtConfig({
         fallbackLocale: 'en',
         defaultLocal: 'en',
         strategy: 'no_prefix',
-        vueI18n: {
-            legacy: false,
-            locale: 'en',
-            messages: i18n
-        }
+        vueI18n: './i18n.options.ts'
     },
     pinia: {
         autoImports: [

package.json

@@ -5,65 +5,67 @@
     "scripts": {
         "prepare": "husky install",
         "dev": "yarn && nuxi dev",
-        "build": "nuxi generate",
         "generate": "graphql-codegen --config ./typesgeneratorconfig.ts",
         "lint": "eslint  . -c .eslintrc.js --ext .vue,.js,.ts,.json --ignore-path .gitignore && stylelint **/*.{vue,css,scss} --ignore-path .gitignore",
         "lint:ci": "eslint . --config .eslintrc.js --ext .js,.jsx,.ts,.tsx,.vue --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif --ignore-path .gitignore",
         "lint:css": "stylelint '**/*.{vue,css,scss}' --ignore-path .gitignore -f verbose",
+        "prod:build": "yarn generate && nuxi generate",
+        "prod:start": "nuxi start",
         "prepare:ci": "nuxi prepare",
-        "start": "nuxi start",
         "start:test": "start-server-and-test 'yarn start' 3000 'yarn test:e2e'",
         "test:pinia": "vitest",
         "test:pinia:coverage": "vitest run --coverage",
         "test:e2e": "cypress run --e2e --browser chrome"
     },
-    "packageManager": "yarn@3.6.4",
+    "packageManager": "yarn@4.0.2",
     "engines": {
-        "node": ">=16.0.0"
+        "node": ">=21.3.0"
     },
+    "type": "module",
     "dependencies": {
-        "@pinia/nuxt": "^0.4.11",
-        "pinia": "^2.0.28",
-        "vue": "^3.2.45",
+        "@apollo/client": "^3.8.8",
+        "@pinia/nuxt": "^0.5.1",
+        "graphql": "^16.8.1",
+        "pinia": "^2.1.7",
+        "vue": "^3.3.9",
         "vue-gtag": "^2.0.1",
-        "vue-server-renderer": "^2.7.14",
-        "vue-template-compiler": "^2.7.14",
+        "vue-router": "^4.2.5",
+        "vue-server-renderer": "^2.7.15",
+        "vue-template-compiler": "^2.7.15",
         "vue3-google-map": "^0.15.0"
     },
     "devDependencies": {
         "@graphql-codegen/cli": "^3.0.0",
         "@graphql-codegen/typescript": "^3.0.0",
         "@graphql-codegen/typescript-resolvers": "^3.0.0",
         "@microsoft/eslint-formatter-sarif": "^3.0.0",
-        "@nuxt/types": "^2.15.8",
+        "@nuxt/types": "^2.17.2",
         "@nuxtjs/i18n": "next",
         "@testing-library/vue": "^6.6.1",
-        "@typescript-eslint/eslint-plugin": "^5.46.1",
-        "@typescript-eslint/parser": "^5.46.1",
-        "@vitejs/plugin-vue": "^4.0.0",
+        "@typescript-eslint/eslint-plugin": "^6.13.1",
+        "@typescript-eslint/parser": "^6.13.1",
+        "@vitejs/plugin-vue": "^4.5.1   ",
         "@vue/test-utils": "^2.2.6",
         "all-contributors-cli": "^6.24.0",
-        "autoprefixer": "^10.4.13",
-        "cypress": "^10.11.0",
-        "eslint": "^8.30.0",
-        "eslint-plugin-cypress": "^2.12.1",
+        "autoprefixer": "^10.4.16",
+        "cypress": "^13.6.0",
+        "eslint": "^8.55.0",
+        "eslint-plugin-cypress": "^2.15.1",
         "eslint-plugin-json": "^3.1.0",
-        "eslint-plugin-vue": "^9.8.0",
-        "graphql": "^16.6.0",
-        "husky": "^8.0.2",
-        "jsdom": "^21.0.0",
-        "nuxt": "^3.0.0",
-        "postcss": "^8.4.20",
+        "eslint-plugin-vue": "^9.19.2",
+        "husky": "^8.0.3",
+        "jsdom": "^23.0.1",
+        "nuxt": "^3.8.2",
+        "postcss": "^8.4.32",
         "postcss-html": "^1.5.0",
         "start-server-and-test": "^2.0.0",
         "stylelint": "^15.0.0",
         "stylelint-config-recommended-vue": "^1.4.0",
         "stylelint-config-standard-scss": "^7.0.0",
         "stylelint-order": "^6.0.0",
-        "tailwindcss": "^3.2.4",
-        "ts-jest": "^29.0.3",
-        "typescript": "^4.9.4",
-        "vitest": "^0.34.0",
-        "webpack": "^5.75.0"
+        "tailwindcss": "^3.3.5",
+        "typescript": "^5.3.2",
+        "vitest": "^0.34.6",
+        "webpack": "^5.89.0"
     }
 }

pages/about.vue

@@ -1,13 +1,81 @@
 <template>
-    <div class="h-full">
-        <div class="flex flex-col md:flex-row h-full">
-            <h1>About us!</h1>
-            <p>Coming soon</p>
+    <div class="flex h-full flex-col w-full">
+        <div class="flex flex-col items-center mx-32">
+            <svg role="img" alt="search icon" title="search icon"
+                class="heart-plus-icon w-24 h-24 mr-1 fill-primary-text-inverted">
+                <use xlink:href="../assets/images/heart-plus.svg#heart-plus-svg" />
+            </svg>
+            <h1 class="mb-12 font-bold text-4xl">About Find a Doc, Japan</h1>
+            <p class="text-2xl">Connecting people in Japan to the healthcare</p>
+            <p class="mb-12 text-2xl">services they need, in the languages they need.</p>
+            <p class="mb-6 text-md text-primary-text-muted">At Find a Doc, Japan, <span class="font-bold">our mission is to
+                    foster a healthier and more inclusive society by providing free, accessible, and quality healthcare
+                    information in multiple languages to both foreigners and medical professionals residing in
+                    Japan.</span>We envision a Japan where everyone, regardless of nationality or language, can confidently
+                navigate the healthcare system, find the right doctors, and receive the care they need with ease.</p>
+            <p class="text-md text-primary-text-muted">As an NPO, we remain driven by the belief that a healthier and
+                happier society is achieved when healthcare information is made universally available. Our actions are
+                guided by compassion, cultural sensitivity, and the pursuit of excellence, working hand in hand with our
+                beneficiaries to enrich lives and contribute positively to the welfare of Japan's multicultural landscape.
+                By delivering healthcare information in multiple languages, we envision a Japan that embodies inclusivity,
+                compassion, and prosperity for all.</p>
+        </div>
+        <div id="members" class="flex flex-col items-center mx-32 my-14">
+            <div id="members-header" class="flex">
+                <div class="h-px w-32 border-currentColor/70 border inline-block self-center"></div>
+                <div class="text-primary/80 text-xl font-bold inline-block mx-4 whitespace-nowrap">Our Team</div>
+                <div class="h-px w-32 border-currentColor/70 border inline-block self-center"></div>
+            </div>
+            <div class="members-list flex flex-row" :key="index" v-for="(member, index) in members">
+                <div class="member flex flex-col">
+                    <img :href="member.avatarImg" />
+                    <div class="member-name text-xl font-bold">{{ member.name }}</div>
+                    <div class="member-title text-md text-primary-text-muted">{{ member.title }}</div>
+                    <div class="member-social flex flex-row">
+                        <a :href="member.linkedInUrl" target="_blank" rel="noopener noreferrer">
+                            <svg role="img" alt="linkedin icon" title="linkedin icon"
+                                class="social-icon w-12 h-12 mr-1 fill-primary-text-muted">
+                                <use xlink:href="../assets/images/social-linkedin.svg#social-linkedin-svg" />
+                            </svg>
+                        </a>
+                        <a :href="member.githubUrl" target="_blank" rel="noopener noreferrer">
+                            <svg role="img" alt="github icon" title="github icon"
+                                class="social-icon w-12 h-12 mr-1 fill-primary-text-muted">
+                                <use xlink:href="../assets/images/social-github.svg#social-github-svg" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({})
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const members = ref([
+    {
+        avatarImg: '../assets/images/avatars/lashawntoyoda.jpg',
+        name: 'LaShawn Toyoda',
+        title: 'Founder & Executive Director',
+        linkedInUrl: 'https://www.linkedin.com/in/lashawn-toyoda/',
+        githubUrl: 'https://github.com/theyokohamalife/'
+    },
+    {
+        avatarImg: '../assets/images/avatars/philipermish.jpg',
+        name: 'Philip Ermish',
+        title: 'Tech Lead',
+        linkedInUrl: 'https://www.linkedin.com/in/philipermish',
+        githubUrl: 'https://github.com/ermish'
+    },
+    {
+        avatarImg: '../assets/images/avatars/russellmiller.jpg',
+        name: 'Russell Miller',
+        title: 'Healthcare Content Lead',
+        linkedInUrl: 'https://www.linkedin.com/in/russellmiller',
+        githubUrl: 'https://github.com/ermish'
+    },
+
+])
 </script>