feat(app): add font (#381)

* refactor(app): simplify ActiveNavigationLink props * feat(app): add font * feat(app): add default fonts * feat(app): add latin-ext subset * refactor(app): change font weight * feat(app): change navigation font size
typeofweb-org · Dec 6, 2022 · 91d3628 · 91d3628
1 parent a02777a
commit 91d3628
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 10 deletions.
diff --git a/apps/app/next.config.js b/apps/app/next.config.js
@@ -6,6 +6,7 @@ const nextConfig = {
 		appDir: true,
 		transpilePackages: [],
 		esmExternals: true,
+		fontLoaders: [{ loader: "@next/font/google", options: { subsets: ["latin", "latin-ext"] } }],
 	},
 	webpack(config) {
 		config.module.rules.push({

diff --git a/apps/app/package.json b/apps/app/package.json
@@ -13,6 +13,7 @@
 		"build-storybook": "storybook build"
 	},
 	"dependencies": {
+		"@next/font": "13.0.6",
 		"next": "13.0.4",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",

diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx
@@ -1,13 +1,24 @@
+import { Fira_Sans, Fira_Code } from "@next/font/google";
 import { AnalyticsWrapper } from "../components/analytics";
 import { CtaHeader } from "../components/CtaHeader";
 import { Header } from "../components/Header/Header";
 import { Footer } from "../components/Footer";
 
 import "../styles/globals.css";
 
+const firaSans = Fira_Sans({
+	weight: ["200", "400", "700"],
+	variable: "--font-fira-sans",
+});
+
+const firaCode = Fira_Code({
+	weight: "variable",
+	variable: "--font-fira-code",
+});
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
 	return (
-		<html lang="pl">
+		<html lang="pl" className={`${firaSans.variable} ${firaCode.variable}`}>
 			<body>
 				<Header />
 				<CtaHeader />

diff --git a/apps/app/src/components/Header/ActiveNagivationLink.tsx b/apps/app/src/components/Header/ActiveNagivationLink.tsx
@@ -1,10 +1,10 @@
-import type { ComponentProps } from "react";
+import type { ReactNode } from "react";
 import { ActiveLink } from "../ActiveLink";
 
-type ActiveNavigationLinkProps = Omit<
-	ComponentProps<typeof ActiveLink>,
-	"className" | "activeClassName"
->;
+type ActiveNavigationLinkProps = Readonly<{
+	href: string;
+	children: ReactNode;
+}>;
 
 export const ActiveNavigationLink = (props: ActiveNavigationLinkProps) => (
 	<ActiveLink className="border-b border-transparent" activeClassName="border-white" {...props} />

diff --git a/apps/app/src/components/Header/HeaderNavigation.tsx b/apps/app/src/components/Header/HeaderNavigation.tsx
@@ -19,7 +19,7 @@ export const HeaderNavigation = ({ children }: { children: ReactNode }) => {
 			<nav
 				id="header-navigation"
 				className={twMerge(
-					"fixed top-0 left-0 z-10 h-full w-full flex-col items-center justify-center gap-5 bg-violet-600 uppercase",
+					"fixed top-0 left-0 z-10 h-full w-full flex-col items-center justify-center gap-5 bg-violet-600 text-sm uppercase",
 					"sm:relative sm:flex sm:h-fit sm:w-fit sm:flex-row",
 					isOpen ? "flex" : "hidden",
 				)}

diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
@@ -1,3 +1,5 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 const violet = {
 	50: "oklch(95.27% 0.017 295)",
 	100: "oklch(87.14% 0.047 295)",
@@ -24,6 +26,10 @@ module.exports = {
 				"yellow-branding-dark": "oklch(78.94% 0.16 80)",
 				violet,
 			},
+			fontFamily: {
+				sans: ["var(--font-fira-sans)", ...defaultTheme.fontFamily.sans],
+				mono: ["var(--font-fira-code)", ...defaultTheme.fontFamily.mono],
+			},
 		},
 	},
 	plugins: [],

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml