feature/whatsapp and readjust structure folder (#11)

* refactor: remove unused components

* refactor: remove favicon ico useless

* refactor: change go public robot txt false setting

* refactor: update favicon ico

* feat: default seo configuration

* feat: whatsapp chat at footer

next-seo.config.ts

@@ -0,0 +1,31 @@
+import { DefaultSeoProps } from "next-seo";
+
+const config: DefaultSeoProps = {
+  description: 'Software Developer and Frontend Enthusiast that deliver user-centric interfaces for web and mobile applications that exceed client expectations',
+  defaultTitle: 'Roby Setiawan (Software Developer and Frontend Enthusiast)',
+  canonical: 'https://robysetiawan.vercel.app',
+  additionalLinkTags: [
+    {
+      rel: 'icon',
+      href: 'https://robysetiawan.vercel.app/favicon.ico'
+    }
+  ],
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: 'https://robysetiawan.vercel.app',
+    title: 'Roby Setiawan (Software Developer and Frontend Enthusiast)',
+    siteName: 'Roby Setiawan (Software Developer and Frontend Enthusiast)',
+    description: 'Software Developer and Frontend Enthusiast that deliver user-centric interfaces for web and mobile applications that exceed client expectations',
+    images: [
+      {
+        url: 'https://robysetiawan.vercel.app/static/home-image-preview.jpg',
+        alt: 'Islem Maboud Portfolio',
+        type: 'image/jpg',
+        secureUrl: 'https://robysetiawan.vercel.app/static/home-image-preview.jpg'
+      }
+    ]
+  }
+}
+
+export default config;

public/favicons/browserconfig.xml → public/browserconfig.xml

@@ -2,8 +2,8 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/favicons/mstile-150x150.png"/>
-            <TileColor>#ffffff</TileColor>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/robots.txt

@@ -1,3 +1,3 @@
 # As soon as you are ready to go public, change the `Disallow: /` to `Allow: /`
 User-agent: *
-Disallow: /
+Allow: /

public/favicons/site.webmanifest → public/site.webmanifest

@@ -3,13 +3,13 @@
     "short_name": "",
     "icons": [
         {
-            "src": "/favicons/android-chrome-192x192.png",
+            "src": "/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/favicons/android-chrome-384x384.png",
-            "sizes": "384x384",
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
             "type": "image/png"
         }
     ],

src/components/modules/sections/FooterSection.tsx

@@ -1,60 +1,82 @@
 import Link from 'next/link';
 import React from 'react';
-import { FaRegCopyright } from 'react-icons/fa6';
+import { FaRegCopyright, FaWhatsapp } from 'react-icons/fa6';
 
 export default function FooterSection() {
+  const handleClick = async () => {
+    // Check if WhatApp installed, if yes open whatsapp else open whatsapp web
+    const teks =
+      '&text=Halo+Roby%2C%0ASaya+ingin+diskusi+untuk+tahu+lebih+lanjut+tentang+tentang+anda&type=phone_number&app_absent=0';
+    if (navigator.userAgent.includes('WhatsApp')) {
+      // WhatsApp is installed
+      window.open(`whatsapp://send?phone=6281273067776${teks}`);
+    } else {
+      // WhatsApp is not installed, open WhatsApp Web
+      window.open(`https://web.whatsapp.com/send?phone=6281273067776${teks}`, '_blank');
+    }
+  };
+
   return (
-    <footer className="border-color flex w-full flex-col items-center justify-between border-t py-10 text-sm sm:flex-row dark:text-gray-100">
-      <div className="mb-6 flex gap-3 sm:mb-0">
-        <Link
-          href="/"
-          className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
-          rel="noopener noreferrer"
-        >
-          /me
-        </Link>
-        <Link
-          href="/about"
-          className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
-          rel="noopener noreferrer"
-        >
-          /about
-        </Link>
-        <Link
-          href="/projects"
-          className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
-          rel="noopener noreferrer"
-        >
-          /projects
-        </Link>
-        <Link
-          href="/stories"
-          className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
-          rel="noopener noreferrer"
-        >
-          /stories
-        </Link>
-        <Link
-          href="/blog"
-          className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
-          rel="noopener noreferrer"
-        >
-          /blog
-        </Link>
-        <Link
-          href="/uses"
-          className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
-          rel="noopener noreferrer"
-        >
-          /uses
-        </Link>
-      </div>
-      <div className="flex items-center space-x-1">
-        <FaRegCopyright />
-        <span className="text-gray-600 dark:text-gray-300">
-          {new Date().getFullYear()} by Roby Setiawan
-        </span>
+    <>
+      <div
+        className="fixed bottom-10 right-4 w-min cursor-pointer
+          rounded-full bg-green-600 p-2 md:right-8"
+        onClick={handleClick}
+      >
+        <FaWhatsapp color="white" className="h-7 w-7 md:h-10 md:w-10" />
       </div>
-    </footer>
+      <footer className="border-color flex w-full flex-col items-center justify-between border-t py-10 text-sm sm:flex-row dark:text-gray-100">
+        <div className="mb-6 flex gap-3 sm:mb-0">
+          <Link
+            href="/"
+            className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
+            rel="noopener noreferrer"
+          >
+            /me
+          </Link>
+          <Link
+            href="/about"
+            className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
+            rel="noopener noreferrer"
+          >
+            /about
+          </Link>
+          <Link
+            href="/projects"
+            className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
+            rel="noopener noreferrer"
+          >
+            /projects
+          </Link>
+          <Link
+            href="/stories"
+            className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
+            rel="noopener noreferrer"
+          >
+            /stories
+          </Link>
+          <Link
+            href="/blog"
+            className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
+            rel="noopener noreferrer"
+          >
+            /blog
+          </Link>
+          <Link
+            href="/uses"
+            className="no-underline underline-offset-2 transition-colors hover:text-gray-800 hover:underline dark:hover:text-gray-100"
+            rel="noopener noreferrer"
+          >
+            /uses
+          </Link>
+        </div>
+        <div className="flex items-center space-x-1">
+          <FaRegCopyright />
+          <span className="text-gray-600 dark:text-gray-300">
+            {new Date().getFullYear()} by Roby Setiawan
+          </span>
+        </div>
+      </footer>
+    </>
   );
 }

src/pages/_app.page.tsx

@@ -4,6 +4,8 @@ import { Router } from 'next/router';
 import NProgress from 'nprogress';
 import '@src/styles/globals.css';
 import { ThemeProvider } from '@src/context/ThemeContext';
+import config from 'next-seo.config';
+import { DefaultSeo } from 'next-seo';
 
 Router.events.on('routeChangeStart', () => NProgress.start());
 Router.events.on('routeChangeComplete', () => NProgress.done());
@@ -13,6 +15,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider>
       <main>
+        <DefaultSeo {...config} />
         <Component {...pageProps} />
         <SpeedInsights />
       </main>

src/pages/_document.page.tsx

@@ -6,14 +6,14 @@ export default function Document() {
   return (
     <Html lang="en">
       <Head>
-        <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
-        <link rel="manifest" href="/favicons/site.webmanifest" />
-        <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
-        <link rel="shortcut icon" href="/favicons/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+        <link rel="shortcut icon" href="/favicon.ico" />
         <meta name="msapplication-TileColor" content="#ffffff" />
-        <meta name="msapplication-config" content="/favicons/browserconfig.xml" />
+        <meta name="msapplication-config" content="/browserconfig.xml" />
         <meta name="theme-color" content="#ffffff" />
         <meta name="google-site-verification" content={googleSiteVerification} />
       </Head>