From abc0f306cae66a1850051998eac7c4b24f9ea066 Mon Sep 17 00:00:00 2001
From: mateuszmiko <dmastah92@gmail.com>
Date: Thu, 21 Sep 2023 14:59:56 +0200
Subject: [PATCH] Style/add tailwind typography and font
---
.gitlab-ci.yml | 6 +++---
next.config.js | 9 +++++++--
package-lock.json | 16 ++++++++++++++++
package.json | 2 ++
src/components/SPA/MinervaSPA.component.tsx | 11 ++++++++++-
src/styles/index.css | 18 ++++++++++++++++++
tailwind.config.ts | 3 +++
7 files changed, 59 insertions(+), 6 deletions(-)
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index db18e8a0..b427861a 100644
--- a/.gitlab-ci.yml
+++ b/.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
diff --git a/next.config.js b/next.config.js
index 767719fc..254ffd6c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,9 @@
/** @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;
diff --git a/package-lock.json b/package-lock.json
index 3a292695..32205168 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index d99ca0ae..b4864fbb 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/SPA/MinervaSPA.component.tsx b/src/components/SPA/MinervaSPA.component.tsx
index 72989e4f..c4b61c47 100644
--- a/src/components/SPA/MinervaSPA.component.tsx
+++ b/src/components/SPA/MinervaSPA.component.tsx
@@ -1,8 +1,17 @@
+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>
diff --git a/src/styles/index.css b/src/styles/index.css
index 50ca338a..258eff2b 100644
--- a/src/styles/index.css
+++ b/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;
+ }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 40ed5308..18b85c28 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -26,6 +26,9 @@ const config: Config = {
'white-pearl': '#ffffff',
},
},
+ fontFamily: {
+ manrope: ['var(--font-manrope)'],
+ },
},
plugins: [],
};
--
GitLab