From dbb6fb17f1328cdf85a6719c176f36c4540de432 Mon Sep 17 00:00:00 2001
From: Fatih Kalifa <fatihkalifa@gmail.com>
Date: Thu, 5 Oct 2023 09:20:07 +0700
Subject: [PATCH] add canonical link

---
 components/Header.tsx | 3 +++
 pages/arsip/[num].tsx | 1 +
 pages/arsip/index.tsx | 1 +
 pages/lawan.tsx       | 5 ++++-
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index f375c59..da4582e 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -18,6 +18,7 @@ interface Props {
   onShowHelp?: () => void;
   onShowSettings?: () => void;
   onSendEmoji?: (emoji: string) => void;
+  path?: string;
 }
 
 export default function Header(props: Props) {
@@ -52,6 +53,7 @@ export default function Header(props: Props) {
     isLiveMode,
     themeColor = "#15803D",
     showLiarOption,
+    path = "/",
   } = props;
 
   return (
@@ -66,6 +68,7 @@ export default function Header(props: Props) {
         <meta property="og:description" content={description} />
         <meta property="og:keywords" content={keywords.join(", ")} />
         <meta property="og:image" content={ogImage} />
+        <link rel="canonical" href={"https://katla.id" + path} />
 
         <meta name="twitter:card" content="summary_large_image" />
         <meta property="twitter:domain" content="katla.vercel.app" />
diff --git a/pages/arsip/[num].tsx b/pages/arsip/[num].tsx
index 61ac97a..6a1f0e9 100644
--- a/pages/arsip/[num].tsx
+++ b/pages/arsip/[num].tsx
@@ -50,6 +50,7 @@ export default function Arsip(props: Props) {
   const headerProps: ComponentProps<typeof Header> = {
     title: `Katla | Arsip #${props.num}`,
     customHeading: <HeadingWithNum num={props.num} />,
+    path: `/arsip/${props.num}`,
     ogImage: "https://katla.vercel.app/og-arsip.png",
     themeColor: game.state.enableHighContrast ? "#f5793a" : "#15803D",
     onShowHelp: () => setModalState("help"),
diff --git a/pages/arsip/index.tsx b/pages/arsip/index.tsx
index abc63fa..0226230 100644
--- a/pages/arsip/index.tsx
+++ b/pages/arsip/index.tsx
@@ -30,6 +30,7 @@ export default function Arsip() {
   return (
     <Container>
       <Header
+        path="/arsip"
         title="Katla | Arsip"
         keywords={[
           "arsip",
diff --git a/pages/lawan.tsx b/pages/lawan.tsx
index 2860872..49aaa25 100644
--- a/pages/lawan.tsx
+++ b/pages/lawan.tsx
@@ -149,7 +149,9 @@ export default function Lawan({ words }: Props) {
 }
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
-  const words = await fetcher("https://cdn.statically.io/gh/pveyes/makna/main/words.json");
+  const words = await fetcher(
+    "https://cdn.statically.io/gh/pveyes/makna/main/words.json"
+  );
   return {
     props: {
       words,
@@ -195,6 +197,7 @@ function Main({ words, config }: MainProps) {
   );
 
   const headerProps: ComponentProps<typeof Header> = {
+    path: "/lawan",
     onSendEmoji: others.count > 0 ? handleSendEmoji : undefined,
     customHeading: (
       <div className="dark:text-gray-300 text-gray-700 flex relative">