Merging latest changes from dev

README.md

@@ -1,50 +1,42 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+## Domain Lookup Tool  
+
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/Nickslabcode/domain-info-lookup)
+[![Website](https://img.shields.io/badge/website-live-green)](https://domain-lookup.your-website.com)
+
+A production app to streamline domain and site information retrieval for hosting support professionals.  
+
+<!-- End of Section -->
+
+## Tech Stack  
+
+- **Front-end**: React, TypeScript, Axios, HttpYac, TailwindCSS, DaisyUI.  
+- **Proxy**: Cloudflare Worker (TypeScript).  
+- **Back-end**: Express, AWS Lambda.  Check back-end repo [here](https://github.com/Nickslabcode/api-domain-lookup).  
+
+- **Additional Features**:  
+  - GitHub Actions workflows for automated deployment & for semantic versioning for changelogs.  
+
+<!-- End of Section -->
+
+## Key Features  
+
+- **WHOIS, SSL, and DNS Lookup**  
+  Retrieve essential domain information, including WHOIS records, SSL details, and DNS configurations in a single search.
+  ![Results view](https://domain-lookup.nikola-nenovski.info/images/results.png)  
+
+- **CDN and WordPress Detection**  
+  Detect active CDN services by analyzing response headers and identify if a site is running WordPress (In progress).  
+
+- **Search History**  
+  Maintain a history of recent lookups for quick reference and repeated searches.  
+  ![Search History](https://domain-lookup.nikola-nenovski.info/images/search-history-2.gif)  
+
+- **Changelog Viewer**  
+  Access app version details and updates seamlessly by fetching the project's changelog from the GitHub API.
+  ![Changelog Viewer](https://domain-lookup.nikola-nenovski.info/images/changelog.png)  
+
+- **Shortcuts**  
+  Enhanced with shortcuts for a more efficient workflow.
+  ![Shortcuts](https://domain-lookup.nikola-nenovski.info/images/shortcuts.png)  
+
+<!-- End of Section -->

package.json

@@ -12,28 +12,29 @@
     "acp": "git add . && npm run commit && git push origin dev",
     "dev:domainlookup": "npx wrangler dev --config workers/domainlookup/wrangler.toml",
     "deploy:domainlookup": "npx wrangler deploy --config workers/domainlookup/wrangler.toml",
-    "semantic-release": "semantic-release --branches dev"
+    "semantic-release": "semantic-release --branches main"
   },
   "dependencies": {
     "@types/axios": "^0.14.4",
     "@types/dotenv": "^8.2.3",
     "@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-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.28.0",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@types/autoprefixer": "^10.2.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/semantic-release": "^20.0.6",
     "@types/tailwindcss": "^3.1.0",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",

src/components/AppVersion.tsx

@@ -35,14 +35,17 @@ const AppVersion = () => {
       >
         <IoGitBranch size={18} />
         <span className="font-semibold">{version}</span>
-        <span className="bg-primary text-primary-content text-xs py-0.5 px-1 rounded-md">
+        <span className="bg-primary text-primary-content font-semibold text-xs px-1 rounded">
           beta
         </span>
       </div>
       <dialog id="my_modal_2" className="modal backdrop-blur-sm" ref={modalRef}>
         <div className="modal-box text-start h-1/2 max-w-2xl">
           {changelog.map((data: Record<string, string>) => (
-            <MarkdownRenderedComponent content={data.body} />
+            <MarkdownRenderedComponent
+              content={data.body}
+              key={data.tag_name}
+            />
           ))}
           <form method="dialog">
             <button className=" btn-sm btn-circle absolute right-2 top-2 hover:text-secondary-content">

src/components/Markers.tsx

@@ -0,0 +1,118 @@
+import { FaCheck } from 'react-icons/fa';
+import { IoClose } from 'react-icons/io5';
+import { DnsRecordAnswer } from '../types/DnsRecordAnswer';
+import { useSearchParams } from 'react-router-dom';
+import { useMemo } from 'react';
+
+interface MarkersPropsType {
+  AAAA: DnsRecordAnswer[] | string | undefined;
+  hasWp: boolean;
+  hasWwwRecord: boolean;
+  dnssec: string | undefined;
+  wwwSsl: boolean;
+}
+
+const Markers: React.FC<MarkersPropsType> = ({
+  AAAA,
+  hasWp,
+  hasWwwRecord,
+  dnssec,
+  wwwSsl,
+}) => {
+  return (
+    <div className="mb-5 bg-base-200 py-2 px-4 rounded-lg text-secondary cursor-default">
+      <ul className="flex gap-6 text-xs items-center">
+        <li className="flex items-center gap-2">
+          <h3 className="font-semibold">NO AAAA</h3>
+          {Array.isArray(AAAA) ? (
+            <div className="bg-error text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+              <IoClose size={12} />
+            </div>
+          ) : typeof AAAA === 'string' ? (
+            <div className="bg-success text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+              <FaCheck size={8} />
+            </div>
+          ) : (
+            <span className="bg-secondary text-neutral font-semibold text-xs px-1 rounded">
+              N/A
+            </span>
+          )}
+        </li>
+        <li className="flex items-center gap-2">
+          <h3 className="font-semibold">WWW DNS</h3>
+          {hasWwwRecord ? (
+            <div className="bg-success text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+              <FaCheck size={8} />
+            </div>
+          ) : (
+            <div className="bg-error text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+              <IoClose size={12} />
+            </div>
+          )}
+        </li>
+        <div className="bg-secondary w-0.5 h-3 rounded-full"></div>
+        <li className="flex items-center gap-2">
+          <h3 className="font-semibold">DNSSEC</h3>
+          {!dnssec ? (
+            <span className="bg-secondary text-neutral font-semibold text-xs px-1 rounded">
+              N/A
+            </span>
+          ) : dnssec === 'unsigned' ? (
+            <span className="bg-success text-neutral font-semibold text-xs px-1 rounded">
+              unsigned
+            </span>
+          ) : (
+            <span className="bg-error text-neutral font-semibold text-xs px-1 rounded">
+              active
+            </span>
+          )}
+        </li>
+        <li className="flex gap-2">
+          <h3 className="font-semibold">STATUS</h3>
+          <span className="bg-success text-neutral font-semibold text-xs px-1 rounded">
+            active
+          </span>
+        </li>
+        <li className="flex gap-2">
+          <h3 className="font-semibold">TRANSFER</h3>
+          <span className="bg-error text-neutral font-semibold text-xs px-1 rounded">
+            locked
+          </span>
+        </li>
+        <div className="bg-secondary w-0.5 h-3 rounded-full"></div>
+        <li className="flex gap-2">
+          <h3 className="font-semibold">HAS CDN</h3>
+          <div className="bg-success text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+            <FaCheck size={8} />
+          </div>
+        </li>
+        <li className="flex gap-2">
+          <h3 className="font-semibold">WWW SSL</h3>
+          {wwwSsl ? (
+            <div className="bg-success text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+              <FaCheck size={8} />
+            </div>
+          ) : (
+            <div className="bg-error text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+              <IoClose size={12} />
+            </div>
+          )}
+        </li>
+        <li className="flex gap-2">
+          <h3 className="font-semibold">HAS WP</h3>
+          {hasWp ? (
+            <div className="bg-success text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+              <FaCheck size={8} />
+            </div>
+          ) : (
+            <div className="bg-error text-neutral w-4 h-4 rounded-full font-semibold flex justify-center items-center">
+              <IoClose size={12} />
+            </div>
+          )}
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Markers;

src/components/ProgressBar.tsx

@@ -7,7 +7,7 @@ const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => {
       <progress
         className="progress progress-primary w-56"
         value={progress}
-        max="3"
+        max="5"
       ></progress>
     </>
   );

src/components/SslTable.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import { H1 } from '../hoc/H1';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const SslTable: React.FC<{ content: Record<string, any> }> = ({ content }) => {
   return (
-    <div className="flex h-full max-h-screen flex-col break-words shadow-md p-4 rounded-lg cursor-default overflow-y-auto">
+    <div className="flex h-full max-h-screen flex-col break-words shadow-md p-4 rounded-lg cursor-default overflow-y-auto border border-neutral">
       {!content ? (
-        <h1>No SSL certificate found.</h1>
+        <H1>No SSL certificate found.</H1>
       ) : (
         <table className="table table-xs">
           <tbody>

src/components/Table.tsx

@@ -8,8 +8,8 @@ const Table: React.FC<{
 }> = ({ content, type }) => {
   return (
     typeof content !== 'string' && (
-      <div className="flex max-w-xl lg:max-w-full flex-col break-words cursor-default shadow-md p-4 rounded-lg">
-        <h1 className="font-semibold">{type.toUpperCase()}</h1>
+      <div className="flex max-w-xl lg:max-w-full flex-col break-words cursor-default shadow-md p-4 rounded-lg border border-neutral">
+        <h2 className="font-semibold">{type.toUpperCase()}</h2>
         <table className="table table-xs cursor-default">
           <thead>
             <tr>