AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add seo title and favicon respecting basePath

Browse Source
This commit is contained in:
Mathias Schopmans
2024-02-13 11:44:03 +01:00
committed by Mathias Schopmans
parent 57d7e85331
commit 554607a58d
7 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

7
src/lib/format.ts Normal file
View File

@@ -0,0 +1,7 @@
// Format the title of the page
import { getAppName } from "@/lib/data";
export function formatTitle(title: string = ""): string {
if (!title) return getAppName();
return `${title} | ${getAppName()}`;
}

7
src/lib/utils.ts
View File

@@ -1,5 +1,12 @@
import { type ClassValue, clsx } from "clsx"; import { type ClassValue, clsx } from "clsx";
import config from "../../next.config.mjs";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return clsx(inputs); return clsx(inputs);
} }
export function assetUrl(path: string) {
if (!config.basePath) return path;
return `${config.basePath}${path}`;
}

7
src/pages/[quadrant]/index.tsx
View File

@@ -2,15 +2,20 @@ import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { getQuadrant, getQuadrants } from "@/lib/data"; import { getQuadrant, getQuadrants } from "@/lib/data";
import { formatTitle } from "@/lib/format";
import { CustomPage } from "@/pages/_app"; import { CustomPage } from "@/pages/_app";
const QuadrantPage: CustomPage = () => { const QuadrantPage: CustomPage = () => {
const { query } = useRouter(); const { query } = useRouter();
const quadrant = getQuadrant(query.quadrant as string); const quadrant = getQuadrant(query.quadrant as string);
if (!quadrant) return null;
return ( return (
<> <>
<Head> <Head>
<title>Quadrant Page</title> <title>{formatTitle(quadrant.title)}</title>
<meta name="description" content={quadrant.description} />
</Head> </Head>
<h1>Quadrant: {query.quadrant}</h1> <h1>Quadrant: {query.quadrant}</h1>

10
src/pages/_app.tsx
View File

@@ -1,7 +1,10 @@
import { NextPage } from "next"; import { NextPage } from "next";
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
import Head from "next/head";
import { Layout, type LayoutClass } from "@/components/Layout/Layout"; import { Layout, type LayoutClass } from "@/components/Layout/Layout";
import { formatTitle } from "@/lib/format";
import { assetUrl } from "@/lib/utils";
import "@/styles/globals.css"; import "@/styles/globals.css";
export type CustomPage<P = {}, IP = P> = NextPage<P, IP> & { export type CustomPage<P = {}, IP = P> = NextPage<P, IP> & {
@@ -14,8 +17,15 @@ type CustomAppProps = AppProps & {
export default function App({ Component, pageProps, router }: CustomAppProps) { export default function App({ Component, pageProps, router }: CustomAppProps) {
return ( return (
<>
<Head>
<title>{formatTitle()}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href={assetUrl("/favicon.ico")} />
</Head>
<Layout layoutClass={Component.layoutClass}> <Layout layoutClass={Component.layoutClass}>
<Component {...pageProps} key={router.asPath} /> <Component {...pageProps} key={router.asPath} />
</Layout> </Layout>
</>
); );
} }

5
src/pages/help-and-about-tech-radar.tsx
View File

@@ -1,14 +1,13 @@
import Head from "next/head"; import Head from "next/head";
import { formatTitle } from "@/lib/format";
import { CustomPage } from "@/pages/_app"; import { CustomPage } from "@/pages/_app";
const HelpAndAbout: CustomPage = () => { const HelpAndAbout: CustomPage = () => {
return ( return (
<> <>
<Head> <Head>
<title>Help and About</title> <title>{formatTitle("Help and About")}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head> </Head>
<h1>Help and about</h1> <h1>Help and about</h1>

15
src/pages/index.tsx
View File

@@ -1,20 +1,7 @@
import Head from "next/head";
import { CustomPage } from "@/pages/_app"; import { CustomPage } from "@/pages/_app";
const Home: CustomPage = () => { const Home: CustomPage = () => {
return ( return <h1>Hello world.</h1>;
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>Hello world.</h1>
</>
);
}; };
export default Home; export default Home;