Updates docs, loader list, react lint and remove commented code

src/components/Results/DomainLookup.tsx

@@ -11,7 +11,7 @@ span.val {
 `;
 
 const DomainLookupCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
-  const domain = props.data;
+  const domain = props.data.internicData || {};
   return (
     <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       { domain.Domain_Name && <Row lbl="Registered Domain" val={domain.Domain_Name} /> }
@@ -25,13 +25,6 @@ const DomainLookupCard = (props: { data: any, title: string, actionButtons: any
         <span className="val"><a href={domain.Registrar_URL || '#'}>{domain.Registrar}</a></span>
       </Row> }
       { domain.Registrar_IANA_ID && <Row lbl="Registrar IANA ID" val={domain.Registrar_IANA_ID} /> }
-
-      {/* <Row lbl="" val="">
-        <span className="lbl">Is Up?</span>
-        { serverStatus.isUp ? <span className="val up">✅ Online</span> : <span className="val down">❌ Offline</span>}
-      </Row>
-      <Row lbl="Status Code" val={serverStatus.responseCode} />
-      { serverStatus.responseTime && <Row lbl="Response Time" val={`${Math.round(serverStatus.responseTime)}ms`} /> } */}
     </Card>
   );
 }

src/components/Results/Rank.tsx

@@ -39,6 +39,23 @@ const makeChartData = (data: {date: string, rank: number }[]) => {
   });
 };
 
+function Chart(chartData: { date: string; uv: number; }[], data: any) {
+  return <ResponsiveContainer width="100%" height={100}>
+    <AreaChart width={400} height={100} data={chartData}>
+      <defs>
+        <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="20%" stopColor="#0f1620" stopOpacity={0.8} />
+          <stop offset="80%" stopColor="#0f1620" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      <CartesianGrid strokeDasharray="4" strokeWidth={0.25} verticalPoints={[50, 100, 150, 200, 250, 300, 350]} horizontalPoints={[25, 50, 75]} />
+      <Tooltip contentStyle={{ background: colors.background, color: colors.textColor, borderRadius: 4 }}
+        labelFormatter={(value) => ['Date : ', data[value].date]} />
+      <Area type="monotone" dataKey="uv" stroke="#9fef00" fillOpacity={1} name="Rank" fill={`${colors.backgroundDarker}a1`} />
+    </AreaChart>
+  </ResponsiveContainer>;
+}
+
 const RankCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
   const data = props.data.ranks || [];
   const { average, percentageChange } = makeRankStats(data);
@@ -49,42 +66,12 @@ const RankCard = (props: { data: any, title: string, actionButtons: any }): JSX.
       <Row lbl="Change since Yesterday" val={`${percentageChange > 0 ? '+':''} ${percentageChange.toFixed(2)}%`} />
       <Row lbl="Historical Average Rank" val={average.toLocaleString()} />
       <div className="chart-container">
-        <ResponsiveContainer width="100%" height={100}>
-          <AreaChart width={400} height={100} data={chartData}>
-            <defs>
-              <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="20%" stopColor="#0f1620" stopOpacity={0.8}/>
-                <stop offset="80%" stopColor="#0f1620" stopOpacity={0}/>
-              </linearGradient>
-            </defs>
-            <CartesianGrid strokeDasharray="4" strokeWidth={0.25} verticalPoints={[50,100,150,200,250,300,350]} horizontalPoints={[25,50,75]} />
-            <Tooltip contentStyle={{background: colors.background, color: colors.textColor, borderRadius: 4 }}
-                labelFormatter={(value) => ['Date : ', data[value].date]}/>
-            <Area type="monotone" dataKey="uv" stroke="#9fef00" fillOpacity={1} name="Rank" fill={`${colors.backgroundDarker}a1`} />
-          </AreaChart>
-        </ResponsiveContainer>
+        {Chart(chartData, data)}
       </div>
-
-      {/* { domain.Domain_Name && <Row lbl="Registered Domain" val={domain.Domain_Name} /> }
-      { domain.Creation_Date && <Row lbl="Creation Date" val={domain.Creation_Date} /> }
-      { domain.Updated_Date && <Row lbl="Updated Date" val={domain.Updated_Date} /> }
-      { domain.Registry_Expiry_Date && <Row lbl="Registry Expiry Date" val={domain.Registry_Expiry_Date} /> }
-      { domain.Registry_Domain_ID && <Row lbl="Registry Domain ID" val={domain.Registry_Domain_ID} /> }
-      { domain.Registrar_WHOIS_Server && <Row lbl="Registrar WHOIS Server" val={domain.Registrar_WHOIS_Server} /> }
-      { domain.Registrar && <Row lbl="" val="">
-        <span className="lbl">Registrar</span>
-        <span className="val"><a href={domain.Registrar_URL || '#'}>{domain.Registrar}</a></span>
-      </Row> }
-      { domain.Registrar_IANA_ID && <Row lbl="Registrar IANA ID" val={domain.Registrar_IANA_ID} /> } */}
-
-      {/* <Row lbl="" val="">
-        <span className="lbl">Is Up?</span>
-        { serverStatus.isUp ? <span className="val up">✅ Online</span> : <span className="val down">❌ Offline</span>}
-      </Row>
-      <Row lbl="Status Code" val={serverStatus.responseCode} />
-      { serverStatus.responseTime && <Row lbl="Response Time" val={`${Math.round(serverStatus.responseTime)}ms`} /> } */}
     </Card>
   );
 }
 
 export default RankCard;
+
+

src/components/misc/AdditionalResources.tsx

@@ -45,11 +45,13 @@ img {
 p, a {
   margin: 0;
 }
-a.resource-link {
+.resource-link {
   color: ${colors.primary};
   opacity: 0.75;
   font-size: 0.9rem;
   transition: all 0.2s ease-in-out;
+  text-decoration: underline;
+  cursor: pointer;
 }
 .resource-title {
   font-weight: bold;
@@ -214,10 +216,12 @@ const AdditionalResources = (props: { url?: string }): JSX.Element => {
       {
         resources.map((resource, index) => {
           return (
-            <li>
-              <a className="resource-wrap" href={makeLink(resource, props.url)}>
+            <li key={index}>
+              <a className="resource-wrap" target="_blank" rel="noreferrer" href={makeLink(resource, props.url)}>
                 <p className="resource-title">{resource.title}</p>
-                <a className="resource-link" href={resource.link} target="_blank" rel="noreferrer">{new URL(resource.link).hostname}</a>
+                <span className="resource-link" onClick={()=> window.open(resource.link, '_blank')} title={`Open: ${resource.link}`}>
+                  {new URL(resource.link).hostname}
+                </span>
                 <div className="resource-lower">
                   <img src={resource.icon} alt="" />
                   <div className="resource-details">

src/components/misc/ProgressBar.tsx

@@ -215,6 +215,8 @@ const jobNames = [
   'trace-route',
   'firewall',
   'http-security',
+  'rank',
+  'archives',
 ] as const;
 
 export const initialJobs = jobNames.map((job: string) => {

src/utils/docs.ts

@@ -449,7 +449,18 @@ const docs: Doc[] = [
     resources: [
       { title: 'Wayback Machine', link: 'https://archive.org/web/'},
     ],
-    screenshot: '',
+    screenshot: 'https://i.ibb.co/nB9szT1/Screenshot-from-2023-08-14-22-31-16.png',
+  },
+  {
+    id: 'rank',
+    title: 'Global Ranking',
+    description: 'This check shows the global rank of the requested site. This is only accurate for websites which are in the top 100 million list. We\'re using data from the Tranco project (see below), which collates the top sites on the web from Umbrella, Majestic, Quantcast, the Chrome User Experience Report and Cloudflare Radar.',
+    use: 'Knowing a websites overall global rank can be useful for understanding the scale of the site, and for comparing it to other sites. It can also be useful for understanding the relative popularity of a site, and for identifying potential trends.',
+    resources: [
+      { title: 'Tranco List', link: 'https://tranco-list.eu/' },
+      { title: 'Tranco Research Paper', link: 'https://tranco-list.eu/assets/tranco-ndss19.pdf'},
+    ],
+    screenshot: 'https://i.ibb.co/nkbczgb/Screenshot-from-2023-08-14-22-02-40.png',
   },
   // {
   //   id: '',