Updates result components, adds card docs

src/components/Form/Card.tsx

@@ -12,6 +12,8 @@ export const StyledCard = styled.section<{ styles?: string}>`
   padding: 1rem;
   position: relative;
   margin 0.5rem;
+  max-height: 64rem;
+  overflow: auto;
   ${props => props.styles}
 `;
 

src/components/Results/DnsServer.tsx

@@ -19,7 +19,7 @@ const DnsServerCard = (props: {data: any, title: string, actionButtons: any }):
     <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       {dnsSecurity.dns.map((dns: any, index: number) => {
         return (<>
-          <Heading as="h4" size="small" color={colors.primary}>DNS Server #{index+1}</Heading>
+          { dnsSecurity.dns.length > 1 && <Heading as="h4" size="small" color={colors.primary}>DNS Server #{index+1}</Heading> }
           <Row lbl="IP Address" val={dns.address} />
           <Row lbl="Hostname" val={dns.hostname} />
           <Row lbl="DoH Support" val={dns.dohDirectSupports ? '✅ Yes*' : '❌ No*'} />

src/components/Results/Sitemap.tsx

@@ -19,7 +19,6 @@ const cardStyles = `
 `;
 
 const SitemapCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {
-  console.log(props.data);
   const normalSiteMap = props.data.url ||  props.data.urlset?.url || null;
   const siteMapIndex = props.data.sitemapindex?.sitemap || null;
 
@@ -32,8 +31,12 @@ const SitemapCard = (props: {data: any, title: string, actionButtons: any }): JS
   };
 
   const getPathFromUrl = (url: string) => {
-    const urlObj = new URL(url);
-    return urlObj.pathname;
+    try {
+      const urlObj = new URL(url);
+      return urlObj.pathname;
+    } catch (e) {
+      return url;
+    }    
   };
 
   return (

src/components/Results/TechStack.tsx

@@ -62,8 +62,9 @@ h4 {
   }
 }
 .tech-icon {
-  width: 2.5rem;
+  min-width: 2.5rem;
   border-radius: 4px;
+  margin: 0.5rem 0;
 }
 &:not(:last-child) {
   border-bottom: 1px solid ${colors.primary};

src/components/Results/TxtRecords.tsx

@@ -5,6 +5,7 @@ import Row from 'components/Form/Row';
 const cardStyles = `
 grid-column: span 2;
 span.val { max-width: 32rem !important; }
+span { overflow: hidden; }
 `;
 
 const TxtRecordCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {

src/components/misc/ProgressBar.tsx

@@ -187,12 +187,11 @@ const jobNames = [
   'domain',
   'dns',
   'dns-server',
-  'domain-lookup',
   'tech-stack',
   'hosts',
   'quality',
   'cookies',
-  'server-info',
+  // 'server-info',
   'redirects',
   'robots-txt',
   'dnssec',

src/utils/docs.ts

@@ -92,7 +92,7 @@ const docs: Doc[] = [
     screenshot: 'https://i.ibb.co/t3xcwP1/wc-headers.png',
   },
   {
-    id: "lighthouse",
+    id: "quality",
     title: "Quality Report",
     description:
       "The Headers task involves extracting and interpreting the HTTP headers sent by the target website during the request-response cycle. HTTP headers are key-value pairs sent at the start of an HTTP response, or before the actual data. Headers contain important directives for how to handle the data being transferred, including cache policies, content types, encoding, server information, security policies, and more.",
@@ -303,6 +303,45 @@ const docs: Doc[] = [
     ],
     screenshot: 'https://i.ibb.co/k253fq4/Screenshot-from-2023-07-17-20-10-52.png',
   },
+  {
+    id: 'screenshot',
+    title: 'Screenshot',
+    description: 'This check takes a screenshot of webpage that the requested URL / IP resolves to, and displays it.',
+    use: 'This may be useful to see what a given website looks like, free of the constraints of your browser, IP, or location.',
+    resources: [],
+  },
+  {
+    id: 'dns-server',
+    title: 'DNS Server',
+    description: 'This check determines the DNS server(s) that the requested URL / IP resolves to. Also fires off a rudimentary check to see if the DNS server supports DoH, and weather it\'s vulnerable to DNS cache poisoning.',
+    use: '',
+    resources: [],
+  },
+  {
+    id: 'tech-stack',
+    title: 'Tech Stack',
+    description: 'Checks what technologies a site is built with.'
+    + 'This is done by fetching and parsing the site, then comparing it against a bit list of RegEx maintained by Wappalyzer to identify the unique fingerprints that different technologies leave.',
+    use: 'Identifying a website\'s tech stack aids in evaluating its security by exposing potential vulnerabilities, '
+    + 'informs competitive analyses and development decisions, and can guide tailored marketing strategies. '
+    + 'Ethical application of this knowledge is crucial to avoid harmful activities like data theft or unauthorized intrusion.',
+    resources: [
+      'https://builtwith.com/',
+      'https://github.com/wappalyzer/wappalyzer/tree/master/src/technologies'
+    ],
+  },
+  {
+    id: 'sitemap',
+    title: 'Sitemap',
+    description: 'This job finds and parses a site\'s listed sitemap. This file lists public sub-pages on the site, which the author wishes to be crawled by search engines. Sitemaps help with SEO, but are also useful for seeing all a sites public content at a glance.',
+    use: 'Understand the structure of a site\'s public-facing content, and for site-owners, check that you\'re site\'s sitemap is accessible, parsable and contains everything you wish it to.',
+    resources: [
+      'https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview',
+      'https://www.sitemaps.org/protocol.html',
+      'https://www.conductor.com/academy/xml-sitemap/',
+    ],
+    screenshot: 'https://i.ibb.co/GtrCQYq/Screenshot-from-2023-07-21-12-28-38.png',
+  },
 ];
 
 export const about = [