Display results from the Wayback Machine

src/components/Results/Archives.tsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import { Card } from 'components/Form/Card';
+import Row from 'components/Form/Row';
+
+const Note = styled.small`
+opacity: 0.5;
+display: block;
+margin-top: 0.5rem;
+a {
+  color: ${colors.primary};
+}
+`;
+
+const ArchivesCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const data = props.data;
+  return (
+    <Card heading={props.title} actionButtons={props.actionButtons}>
+      <Row lbl="First Scan" val={data.firstScan} />
+      <Row lbl="Last Scan" val={data.lastScan} />
+      <Row lbl="Total Scans" val={data.totalScans} />
+      <Row lbl="Change Count" val={data.changeCount} />
+      <Row lbl="Avg Size" val={`${data.averagePageSize} bytes`} />
+      { data.scanFrequency?.scansPerDay > 1 ?
+        <Row lbl="Avg Scans Per Day" val={data.scanFrequency.scansPerDay} /> :
+        <Row lbl="Avg Days between Scans" val={data.scanFrequency.daysBetweenScans} />
+      }
+
+      <Note>
+        View historical versions of this page <a rel="noreferrer" target="_blank" href={`https://web.archive.org/web/*/${data.scanUrl}`}>here</a>,
+        via the Internet Archive's Wayback Machine.
+      </Note>
+    </Card>
+  );
+}
+
+export default ArchivesCard;

src/pages/Results.tsx

@@ -50,6 +50,7 @@ import SocialTagsCard from 'components/Results/SocialTags';
 import MailConfigCard from 'components/Results/MailConfig';
 import HttpSecurityCard from 'components/Results/HttpSecurity';
 import FirewallCard from 'components/Results/Firewall';
+import ArchivesCard from 'components/Results/Archives';
 
 import keys from 'utils/get-keys';
 import { determineAddressType, AddressType } from 'utils/address-type-checker';
@@ -423,6 +424,14 @@ const Results = (): JSX.Element => {
     fetchRequest: () => fetch(`${api}/http-security?url=${address}`).then(res => parseJson(res)),
   });
 
+  // Get list of archives from the Wayback Machine
+  const [archivesResults, updateArchivesResults] = useMotherHook({
+    jobId: 'archives',
+    updateLoadingJobs,
+    addressInfo: { address, addressType, expectedAddressTypes: urlTypeOnly },
+    fetchRequest: () => fetch(`${api}/archives?url=${address}`).then(res => parseJson(res)),
+  });
+
   /* Cancel remaining jobs after  10 second timeout */
   useEffect(() => {
     const checkJobs = () => {
@@ -471,6 +480,7 @@ const Results = (): JSX.Element => {
     { id: 'screenshot', title: 'Screenshot', result: screenshotResult || lighthouseResults?.fullPageScreenshot?.screenshot, Component: ScreenshotCard, refresh: updateScreenshotResult },
     { id: 'mail-config', title: 'Email Configuration', result: mailConfigResults, Component: MailConfigCard, refresh: updateMailConfigResults },
     { id: 'hsts', title: 'HSTS Check', result: hstsResults, Component: HstsCard, refresh: updateHstsResults },
+    { id: 'archives', title: 'Archive History', result: archivesResults, Component: ArchivesCard, refresh: updateArchivesResults },
     { id: 'whois', title: 'Domain Info', result: whoIsResults, Component: WhoIsCard, refresh: updateWhoIsResults },
     { id: 'dns-server', title: 'DNS Server', result: dnsServerResults, Component: DnsServerCard, refresh: updateDnsServerResults },
     { id: 'linked-pages', title: 'Linked Pages', result: linkedPagesResults, Component: ContentLinksCard, refresh: updateLinkedPagesResults },

src/utils/docs.ts

@@ -441,6 +441,16 @@ const docs: Doc[] = [
     ],
     screenshot: 'https://i.ibb.co/LP05HMV/Screenshot-from-2023-08-12-15-40-28.png',
   },
+  {
+    id: 'archives',
+    title: 'Archive History',
+    description: 'Fetches full history of archives from the Wayback machine',
+    use: 'This is useful for understanding the history of a site, and how it has changed over time. It can also be useful for finding old versions of a site, or for finding content that has been removed.',
+    resources: [
+      { title: 'Wayback Machine', link: 'https://archive.org/web/'},
+    ],
+    screenshot: '',
+  },
   // {
   //   id: '',
   //   title: '',