Release v2.0.0

Rewrite the site in *TypeScript*

.gitignore

@@ -30,3 +30,7 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -28,7 +28,7 @@ To run this website, you will need to add the following environment variables to
 
 * `HCAPTCHA_SECRET` **optional** - hCaptcha Secret for verifying the response
 
-* `NEXT_PUBLIC_GOOGLE_ANALYTICS_ID` **optional** - Google Analytics Tracking ID
+* `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID` **optional** - Google Tag Manager Tracking ID
 
 * Enviorment variables for notifing contact request from [Telegram Bot](https://telegram.me/BotFather):
   * `BOT_TOKEN` **required** - Telegram Bot token obtained in [@BotFather](https://telegram.me/BotFather)

components/Footer.tsx

@@ -0,0 +1,104 @@
+// Website of jayantkageri, NextJS Site for jayantkageri.in
+// Copyright (C) 2021 - 2022 Jayant Hegde Kageri <https://github.com/jayantkageri>
+
+// This file is part of Website of jayantkageri.
+
+// Website of jayantkageri is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Website of jayantkageri is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+
+// You should have received a copy of the GNU Affero General Public License
+// along with Website of jayantkageri.  If not, see <https://www.gnu.org/licenses/>.
+
+import React from "react";
+import Link from "next/link";
+import FooterLink from "./FooterLink";
+
+export default function Footer() {
+  return (
+    <>
+      <footer className="flex flex-col items-center justify-between px-6 py-4 border-t bg-gray-900 border-gray-700 sm:flex-row select-none">
+        <Link href={"/"}>
+          <a
+            className="text-xl font-bold text-white hover:text-indigo-600 transition-all"
+            tabIndex={-1}
+          >
+            Jayant Hegde Kageri
+          </a>
+        </Link>
+
+        <p className="py-2 text-white sm:py-0">
+          ©️{" "}
+          {new Date().getFullYear() === 2021
+            ? 2021
+            : `2021 - ${new Date().getFullYear()}`}{" "}
+          All Rights Reserved
+        </p>
+
+        <div className="flex -mx-2">
+          <FooterLink
+            title={"Source Code"}
+            link="https://links.jayantkageri.in/source-code"
+            svg={
+              "M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.075 14.841a1.13 1.13 0 0 0 .401.823c.13.108.288.192.478.252.19.061.411.091.665.091.338 0 .624-.053.858-.158.237-.105.416-.252.54-.44a1.17 1.17 0 0 0 .187-.656c0-.224-.045-.41-.135-.56a1.001 1.001 0 0 0-.375-.357 2.027 2.027 0 0 0-.565-.21l-.621-.144a.97.97 0 0 1-.405-.176.37.37 0 0 1-.143-.299c0-.156.061-.284.184-.384.125-.101.296-.152.513-.152.143 0 .266.023.37.068a.624.624 0 0 1 .245.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.199-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.552.05-.776.15-.225.099-.4.24-.528.421-.127.182-.19.395-.19.639 0 .201.04.376.123.524.082.149.199.27.351.367.153.095.332.167.54.213l.618.144c.207.049.36.113.462.193a.387.387 0 0 1 .153.326.512.512 0 0 1-.085.29.559.559 0 0 1-.255.193c-.111.047-.249.07-.413.07-.117 0-.224-.013-.32-.04a.837.837 0 0 1-.248-.115.578.578 0 0 1-.255-.384h-.765ZM0 14.791c0 .165.027.32.082.466.055.147.136.277.243.39.11.113.245.202.407.267.164.062.354.093.569.093.42 0 .748-.115.984-.346.238-.23.358-.565.358-1.004v-2.725h-.791v2.745c0 .201-.046.357-.138.466-.092.11-.233.164-.422.164a.499.499 0 0 1-.454-.246.576.576 0 0 1-.073-.27H0Zm8.907-2.859H9.8l-1.274 2.007L9.78 15.93h-.908l-.85-1.415h-.035l-.853 1.415h-.861l1.24-2.016-1.228-1.983h.931l.832 1.438h.036l.823-1.438Z"
+            }
+          />
+
+          <FooterLink
+            title={"GitHub"}
+            link="https://links.jayantkageri.in/github"
+            svg={
+              "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+            }
+          />
+
+          <FooterLink
+            title={"Telegram"}
+            link="https://links.jayantkageri.in/telegram"
+            svg={
+              "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
+            }
+          />
+
+          <FooterLink
+            title={"Instagram"}
+            link="https://links.jayantkageri.in/instagram"
+            svg={
+              "M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
+            }
+          />
+
+          <FooterLink
+            title={"Facebook"}
+            link="https://links.jayantkageri.in/facebook"
+            svg={
+              "M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"
+            }
+          />
+
+          <FooterLink
+            title={"Twitter"}
+            link="https://links.jayantkageri.in/twitter"
+            svg={
+              "M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
+            }
+          />
+
+          <FooterLink
+            title={"Mail"}
+            link="mailto:[email protected]"
+            svg={
+              "M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"
+            }
+          />
+        </div>
+      </footer>
+    </>
+  );
+}

components/FooterLink.tsx

@@ -0,0 +1,48 @@
+// Website of jayantkageri, NextJS Site for jayantkageri.in
+// Copyright (C) 2021 - 2022 Jayant Hegde Kageri <https://github.com/jayantkageri>
+
+// This file is part of Website of jayantkageri.
+
+// Website of jayantkageri is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Website of jayantkageri is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+
+// You should have received a copy of the GNU Affero General Public License
+// along with Website of jayantkageri.  If not, see <https://www.gnu.org/licenses/>.
+
+import React from "react";
+
+export default function FooterLink(props: {
+  title: string,
+  link: string,
+  svg: string | string[],
+}) {
+  return (
+    <a
+      href={props.link}
+      target={"_blank"}
+      rel="noreferrer"
+      className="mx-2 text-gray-300 hover:text-indigo-600 transition-colors"
+      aria-label={props.title}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="w-5 h-5 fill-current"
+        viewBox="0 0 16 16"
+      >
+        <title>{props.title}</title>
+        {typeof props.svg === "string" ? (
+          <path d={props.svg} />
+        ) : (
+          props.svg.map((d: string, index: number) => <path key={index} d={d} />)
+        )}
+      </svg>
+    </a>
+  );
+}

components/Heading.tsx

@@ -0,0 +1,39 @@
+// Website of jayantkageri, NextJS Site for jayantkageri.in
+// Copyright (C) 2021 - 2022 Jayant Hegde Kageri <https://github.com/jayantkageri>
+
+// This file is part of Website of jayantkageri.
+
+// Website of jayantkageri is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Website of jayantkageri is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+
+// You should have received a copy of the GNU Affero General Public License
+// along with Website of jayantkageri.  If not, see <https://www.gnu.org/licenses/>.
+
+import React from "react";
+
+export default function Heading(props: {title: string}) {
+  return (
+    <div className="w-full mx-auto flex justify-center">
+      <div>
+        <h1 className="text-3xl font-semibold capitalize lg:text-4xl text-white text-center">
+          {props.title}
+          <br />
+          Jayant Hegde Kageri
+        </h1>
+
+        <div className="mt-4 mx-auto flex justify-center">
+          <span className="inline-block w-40 h-1 rounded-full bg-blue-500" />
+          <span className="inline-block w-3 h-1 ml-1 rounded-full bg-blue-500" />
+          <span className="inline-block w-1 h-1 ml-1 rounded-full bg-blue-500" />
+        </div>
+      </div>
+    </div>
+  );
+}

components/Meta.tsx

@@ -0,0 +1,179 @@
+// Website of jayantkageri, NextJS Site for jayantkageri.in
+// Copyright (C) 2021 - 2022 Jayant Hegde Kageri <https://github.com/jayantkageri>
+
+// This file is part of Website of jayantkageri.
+
+// Website of jayantkageri is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Website of jayantkageri is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+
+// You should have received a copy of the GNU Affero General Public License
+// along with Website of jayantkageri.  If not, see <https://www.gnu.org/licenses/>.
+
+import Head from "next/head";
+import Script from "next/script";
+import React from "react";
+
+export default function Meta(props: {page: string|null}) {
+  const page = props.page
+    ? `${props.page} - Jayant Hegde Kageri`
+    : "Jayant Hegde Kageri - Developer";
+
+  const description =
+    "Nothing is Easy in life when you aren't interested. | Developer from India";
+
+  const keywords =
+    "jayant, hegde, kageri, jayantkageri, @jayantkageri, developer, kageri250, jayant hegde kageri, jayant kageri, jayant hegde, nothing is easy in life when you aren't interested, nothing is easy in life when you are not interested.";
+
+  return (
+    <>
+    <Head>
+      <title>{page}</title>
+      <meta content="" name={description} />
+      <meta content="" name={keywords} />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+
+      <meta name="author" content="Jayant Hegde Kageri" />
+      <meta name="keywords" content={keywords} />
+      <meta name="description" content={description} />
+
+      <meta property="og:title" content={page} />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content="https://jayantkageri.in" />
+      <meta property="og:description" content={description} />
+      <meta property="og:locale" content="en_IN" />
+      <meta property="og:site_name" content="Jayant Hegde Kageri" />
+      <meta
+        property="article:author"
+        content="https://github.com/jayantkageri"
+      />
+      <meta property="article:publisher" content="https://jayantkageri.in" />
+      <meta
+        property="og:image"
+        content="/assets/img/favicons/android-icon-192x192.png"
+      />
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@jayantkageri" />
+      <meta name="twitter:creator" content="@jayantkageri" />
+      <meta name="twitter:title" content={page} />
+      <meta name="twitter:description" content={description} />
+      <meta
+        name="twitter:image"
+        content="/assets/img/favicons/android-icon-192x192.png"
+      />
+
+      <link
+        rel="icon"
+        href="/assets/img/favicons/android-icon-192x192.png"
+        type="image/x-icon"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="57x57"
+        href="/assets/img/favicons/apple-icon-57x57.png"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="60x60"
+        href="/assets/img/favicons/apple-icon-60x60.png"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="72x72"
+        href="/assets/img/favicons/apple-icon-72x72.png"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="76x76"
+        href="/assets/img/favicons/apple-icon-76x76.png"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="114x114"
+        href="/assets/img/favicons/apple-icon-114x114.png"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="120x120"
+        href="/assets/img/favicons/apple-icon-120x120.png"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="144x144"
+        href="/assets/img/favicons/apple-icon-144x144.png"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="152x152"
+        href="/assets/img/favicons/apple-icon-152x152.png"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/assets/img/favicons/apple-icon-180x180.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="192x192"
+        href="/assets/img/favicons/android-icon-192x192.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/assets/img/favicons/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="96x96"
+        href="/assets/img/favicons/favicon-96x96.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/assets/img/favicons/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/assets/img/favicons/manifest.json" />
+
+      <meta name="msapplication-TileColor" content="#111827" />
+      <meta
+        name="msapplication-TileImage"
+        content="/assets/img/favicons/ms-icon-144x144.png"
+      />
+      <meta name="theme-color" content="#111827" />
+    </Head>
+
+    {/* Google Tag Manager */}
+    {/* eslint-disable-next-line @next/next/next-script-for-ga */}
+    <Script
+      id="gtag-script"
+      dangerouslySetInnerHTML={{
+        __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}');`,
+      }}
+    />
+    {/* End Google Tag Manager */}
+
+    {/* Google Tag Manager (noscript) */}
+    <noscript
+      dangerouslySetInnerHTML={{
+        __html: `<iframe id="gtag" src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+      }}
+    />
+    {/* End Google Tag Manager (noscript) */}
+    </>
+  );
+}