11 add index meta

package.json

@@ -17,13 +17,15 @@
   "dependencies": {
     "@types/axios": "^0.14.4",
     "@types/dotenv": "^8.2.3",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-icons": "^3.0.0",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.28.0",

src/App.tsx

@@ -1,25 +1,17 @@
-import { ThemeProvider } from './providers/ThemeProvider';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import AppContainer from './hoc/AppContainer';
 import Home from './views/Home';
 import Results from './views/Results';
-import { HistoryProvider } from './providers/HistoryProvider';
-import HistoryModal from './components/HistoryModal';
+import Layout from './hoc/Layout';
 
 const App = () => {
   return (
     <BrowserRouter>
-      <ThemeProvider>
-        <HistoryProvider>
-          <AppContainer>
-            <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/results" element={<Results />} />
-            </Routes>
-            <HistoryModal />
-          </AppContainer>
-        </HistoryProvider>
-      </ThemeProvider>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/results" element={<Results />} />
+        </Routes>
+      </Layout>
     </BrowserRouter>
   );
 };

src/constants/meta.ts

@@ -0,0 +1,4 @@
+export const BASE_URL = 'https://domain-lookup.nikola-nenovski.info';
+export const DESCRIPTION =
+  'A single-page application for fetching DNS, SSL, WHOIS data, and other useful information for a domain, such as active CDN and WordPress instances.';
+export const TYPE = 'website';

src/hoc/Layout.tsx

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import AppContainer from './AppContainer';
+import { HistoryProvider } from '../providers/HistoryProvider';
+import { ThemeProvider } from '../providers/ThemeProvider';
+import HistoryModal from '../components/HistoryModal';
+
+const Layout: React.FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <ThemeProvider>
+      <HistoryProvider>
+        <AppContainer>{children}</AppContainer>
+        <HistoryModal />
+      </HistoryProvider>
+    </ThemeProvider>
+  );
+};
+
+export default Layout;

src/hoc/Meta.tsx

@@ -0,0 +1,53 @@
+import { Helmet } from 'react-helmet';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { BASE_URL, DESCRIPTION, TYPE } from '../constants/meta';
+import { useEffect, useState } from 'react';
+
+const spinnerFrames = ['◐', '◓', '◑', '◒'];
+
+const Meta = ({ loading }: { loading?: boolean }) => {
+  const [searchParams, _setSearchParams] = useSearchParams();
+  const { pathname, search } = useLocation();
+  const [currentSpinnerFrame, setCurrentSpinnerFrame] = useState(
+    () => spinnerFrames[0]
+  );
+
+  const domain = searchParams.get('domain');
+
+  const title = `${loading ? currentSpinnerFrame + ' - ' : ''}  ${
+    domain ? `${domain} - ` : ''
+  }DomainLookup`;
+  const currentUrl = BASE_URL + pathname + search;
+
+  useEffect(() => {
+    if (!loading) return;
+    const spinnerInterval = setInterval(() => {
+      setCurrentSpinnerFrame(prev => {
+        const nextIndex =
+          (spinnerFrames.indexOf(prev) + 1) % spinnerFrames.length;
+
+        console.log(nextIndex);
+        return spinnerFrames[nextIndex];
+      });
+    }, 200);
+
+    return () => clearInterval(spinnerInterval);
+  }, [loading]);
+
+  return (
+    <Helmet>
+      <meta charSet="UTF-8" />
+      <link rel="icon" type="image/svg+xml" href="/dl-logo.png" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>{title}</title>
+      <meta name="description" content={DESCRIPTION} />
+      <meta name="og:title" content={title} />
+      <meta name="og:type" content={TYPE} />
+      <meta name="og:description" content={DESCRIPTION} />
+      <meta name="og:image" content={`${BASE_URL}/og-dl.png`} />
+      <meta name="og:url" content={currentUrl} />
+    </Helmet>
+  );
+};
+
+export default Meta;

src/views/Home.tsx

@@ -4,6 +4,7 @@ import SearchForm from '../components/SearchForm';
 import Logo from '../components/Logo';
 import { useSearchParams } from 'react-router-dom';
 import { useEffect } from 'react';
+import Meta from '../hoc/Meta';
 
 const Home = () => {
   const [_searchParams, setSearchParams] = useSearchParams();
@@ -14,6 +15,7 @@ const Home = () => {
 
   return (
     <>
+      <Meta />
       <ViewContainer>
         <Logo />
         <SearchForm />

src/views/Results.tsx

@@ -17,6 +17,7 @@ import { H1 } from '../hoc/H1';
 import Markers from '../components/Markers';
 import { isWordpressInstalled } from '../services/wpCheck.service';
 import { isCdnActive } from '../services/cdnCheck.service';
+import Meta from '../hoc/Meta';
 
 interface WhoIsData {
   result?: Record<string, any>;
@@ -42,6 +43,7 @@ const Results = () => {
     );
   }, [sslData, searchParams]);
 
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isWhoIsLoading, setIsWhoisLoading] = useState<boolean>(false);
   const [isDnsLoading, setIsDnsLoading] = useState<boolean>(false);
   const [isSslLoading, setIsSslLoading] = useState<boolean>(false);
@@ -51,7 +53,7 @@ const Results = () => {
   useEffect(() => {
     const domain = searchParams.get('domain');
     if (!domain) return;
-
+    setIsLoading(true);
     setIsWhoisLoading(true);
     setIsSslLoading(true);
     setIsDnsLoading(true);
@@ -89,6 +91,7 @@ const Results = () => {
         ];
 
         await Promise.all(tasks);
+        setIsLoading(false);
       };
 
       fetchData();
@@ -99,6 +102,7 @@ const Results = () => {
 
   return (
     <>
+      <Meta loading={isLoading} />
       <Navbar />
       <ViewContainer className="p-4 mt-10">
         <H1 className="my-5 text-2xl">