Style/add tailwind typography and font

.gitlab-ci.yml

@@ -58,6 +58,6 @@ deploy_staging:
     - development
   script:
     - npm install --global vercel
-    - vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
-    - vercel build --token=$VERCEL_TOKEN
-    - vercel deploy --prebuilt  --token=$VERCEL_TOKEN
+    - vercel pull --yes --environment=production --token=$VERCEL_TOKEN
+    - vercel build --prod --token=$VERCEL_TOKEN
+    - vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

next.config.js

 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  reactStrictMode: true,
+  experimental: {
+    fontLoaders: [{ loader: '@next/font/google', options: { subsets: ['latin'] } }],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@next/font": "^13.5.2",
         "@types/node": "20.6.2",
         "@types/react": "18.2.21",
         "@types/react-dom": "18.2.7",
@@ -18,6 +19,7 @@
         "postcss": "8.4.29",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "tailwind-merge": "^1.14.0",
         "tailwindcss": "3.3.3"
       },
       "devDependencies": {
@@ -1955,6 +1957,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@next/font": {
+      "version": "13.5.2",
+      "resolved": "https://registry.npmjs.org/@next/font/-/font-13.5.2.tgz",
+      "integrity": "sha512-c9EXqdXMEErMLrC71wZvpcOnNVkEEufZOO3EjgQJcKQUwPISvnkgIj9GKFIop0rX2dLNdzL3OC/4nrcAqWqUsg=="
+    },
     "node_modules/@next/swc-darwin-arm64": {
       "version": "13.4.19",
       "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.19.tgz",
@@ -11623,6 +11630,15 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",

package.json

@@ -27,6 +27,7 @@
     ]
   },
   "dependencies": {
+    "@next/font": "^13.5.2",
     "@types/node": "20.6.2",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
@@ -36,6 +37,7 @@
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {

src/components/SPA/MinervaSPA.component.tsx

+import { Manrope } from '@next/font/google';
+import { twMerge } from 'tailwind-merge';
 import { Map } from '@/components/Map';
 import { FunctionalArea } from '@/components/FunctionalArea';
 
+const manrope = Manrope({
+  variable: '--font-manrope',
+  display: 'swap',
+  weight: ['400', '700'],
+  subsets: ['latin'],
+});
+
 export const MinervaSPA = (): JSX.Element => (
-  <div className="relative">
+  <div className={twMerge('relative', manrope.variable)}>
     <FunctionalArea />
     <Map />
   </div>

src/styles/index.css

@@ -43,3 +43,21 @@ embed,
 object {
   display: inline;
 }
+
+@layer base {
+  h1 {
+    @apply text-xl;
+  }
+  h2 {
+    @apply text-base;
+  }
+  button {
+    @apply text-xs;
+  }
+  body {
+    @apply text-sm;
+  }
+  caption {
+    @apply text-xs;
+  }
+}

tailwind.config.ts

@@ -26,6 +26,9 @@ const config: Config = {
         'white-pearl': '#ffffff',
       },
     },
+    fontFamily: {
+      manrope: ['var(--font-manrope)'],
+    },
   },
   plugins: [],
 };