From 91d362897afeb350e11f31c69b9bda3cb25c4b49 Mon Sep 17 00:00:00 2001 From: Adrian Polak Date: Tue, 6 Dec 2022 12:47:14 +0100 Subject: [PATCH] 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 --- apps/app/next.config.js | 1 + apps/app/package.json | 1 + apps/app/src/app/layout.tsx | 13 ++++++++++++- .../src/components/Header/ActiveNagivationLink.tsx | 10 +++++----- apps/app/src/components/Header/HeaderNavigation.tsx | 2 +- apps/app/tailwind.config.js | 6 ++++++ pnpm-lock.yaml | 12 +++++++++--- 7 files changed, 35 insertions(+), 10 deletions(-) diff --git a/apps/app/next.config.js b/apps/app/next.config.js index d13dc0e6..15f03366 100644 --- 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 index 9ae40b19..b4e4e0da 100644 --- 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 index f5fc77a3..b6642072 100644 --- a/apps/app/src/app/layout.tsx +++ b/apps/app/src/app/layout.tsx @@ -1,3 +1,4 @@ +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"; @@ -5,9 +6,19 @@ 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 ( - +
diff --git a/apps/app/src/components/Header/ActiveNagivationLink.tsx b/apps/app/src/components/Header/ActiveNagivationLink.tsx index b70ab51a..8974b97e 100644 --- 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, - "className" | "activeClassName" ->; +type ActiveNavigationLinkProps = Readonly<{ + href: string; + children: ReactNode; +}>; export const ActiveNavigationLink = (props: ActiveNavigationLinkProps) => ( diff --git a/apps/app/src/components/Header/HeaderNavigation.tsx b/apps/app/src/components/Header/HeaderNavigation.tsx index 1f18b1ad..f184fbd0 100644 --- 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 }) => {