Migrate to Astro base

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,43 +0,0 @@
-import { Route, Routes } from 'react-router-dom';
-import Styled from 'styled-components';
-import * as Sentry from '@sentry/react';
-
-import Home from 'pages/Home';
-import Results from 'pages/Results';
-import About from 'pages/About';
-import NotFound from 'pages/NotFound';
-import colors from 'styles/colors';
-
-const Container = Styled.main`
-  background: ${colors.background};
-  color: ${colors.textColor};
-  width: 100vw;
-  margin: 0;
-`;
-
-Sentry.init({
-  dsn: 'https://30eb6135d37643fb95c7da4e77a46142@glitch.as93.net/1',
-  beforeSend(event) { // Check if error logging is disabled
-    const ignoredHosts = ['localhost', '127.0.0.1'];
-    const disableErrors = process.env.REACT_APP_DISABLE_ERROR_LOGGING;
-    if (disableErrors || ignoredHosts.includes(window.location.hostname)) {
-        return null;
-    }
-    return event;
-  }
-});
-
-function App() {
-  return (
-    <Container>
-      <Routes>
-        <Route path="*" element={<NotFound />} />
-        <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/results/:address" element={<Results />} />
-      </Routes>
-    </Container>
-  );
-}
-
-export default App;

src/components/Demo.tsx

@@ -1,7 +0,0 @@
-interface Props {
-  message: string,
-};
-
-const Demo = ({ message }: Props): JSX.Element => <div>{message}</div>;
-
-export default Demo;

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/pages/check/[...target].astro

@@ -0,0 +1,19 @@
+---
+import Main from "../../v1-check/views/main.tsx"
+import '../../v1-check/styles/index.css';
+
+export const prerender = false;
+
+const { pathname } = new URL(Astro.request.url)
+
+---
+
+<html>
+  <head>
+    <title>Results</title>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <Main {pathname} client:load />
+  </body>
+</html>

src/pages/index.astro

@@ -0,0 +1,16 @@
+---
+
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>TODO: Web Check</h1>
+	</body>
+</html>

src/pages/test.astro

@@ -0,0 +1,16 @@
+---
+
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>TEST</h1>
+	</body>
+</html>

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/styles/globals.ts

@@ -1,14 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-import PTMono from 'assets/fonts/PTMono.ttf';
-
-export const GlobalStyles = createGlobalStyle`
-  @font-face {
-    font-family: PTMono;
-    font-style: normal;
-    font-weight: 400;
-    src: url(${PTMono});
-  }
-  body { font-family: PTMono; }
-`;
-
-export default GlobalStyles;

src/utils/get-keys.ts

@@ -1,7 +0,0 @@
-
-const keys = {
-  shodan: process.env.REACT_APP_SHODAN_API_KEY,
-  whoApi: process.env.REACT_APP_WHO_API_KEY,
-};
-
-export default keys;

src/v1-check/components/Form/Button.tsx

@@ -1,12 +1,15 @@
-import styled, { keyframes } from 'styled-components';
-import colors from 'styles/colors';
-import { InputSize, applySize } from 'styles/dimensions';
+import { type ReactNode, type MouseEventHandler } from 'react';
+
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+import colors from 'v1-check/styles/colors';
+import { type InputSize, applySize } from 'v1-check/styles/dimensions';
 
 type LoadState = 'loading' | 'success' | 'error';
 
 interface ButtonProps {
-  children: React.ReactNode;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  children: ReactNode;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
   size?: InputSize,
   bgColor?: string,
   fgColor?: string,

src/v1-check/components/Form/Card.tsx

@@ -1,12 +1,13 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-import ErrorBoundary from 'components/misc/ErrorBoundary';
-import Heading from 'components/Form/Heading';
-import colors from 'styles/colors';
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+import ErrorBoundary from 'v1-check/components/misc/ErrorBoundary';
+import Heading from 'v1-check/components/Form/Heading';
+import colors from 'v1-check/styles/colors';
 
 export const StyledCard = styled.section<{ styles?: string}>`
   background: ${colors.backgroundLighter};
+  color: ${colors.textColor};
   box-shadow: 4px 4px 0px ${colors.bgShadowColor};
   border-radius: 8px;
   padding: 1rem;
@@ -18,7 +19,7 @@ export const StyledCard = styled.section<{ styles?: string}>`
 `;
 
 interface CardProps {
-  children: React.ReactNode;
+  children: ReactNode;
   heading?: string,
   styles?: string;
   actionButtons?: ReactNode | undefined;

src/v1-check/components/Form/Heading.tsx

@@ -1,6 +1,7 @@
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { TextSizes } from 'styles/typography';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { TextSizes } from 'v1-check/styles/typography';
+import type { ReactNode } from 'react';
 
 interface HeadingProps {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
@@ -8,7 +9,7 @@ interface HeadingProps {
   color?: string;
   size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
   inline?: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
   id?: string;
   className?: string;
 };

src/v1-check/components/Form/Input.tsx

@@ -1,7 +1,7 @@
-import { InputHTMLAttributes } from 'react';
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { InputSize, applySize } from 'styles/dimensions';
+import { type InputHTMLAttributes } from 'react';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { type InputSize, applySize } from 'v1-check/styles/dimensions';
 
 type Orientation = 'horizontal' | 'vertical';
 

src/v1-check/components/Form/Modal.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import Button from 'components/Form/Button';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import Button from 'v1-check/components/Form/Button';
 
 interface ModalProps {
-  children: React.ReactNode;
+  children: ReactNode;
   isOpen: boolean;
   closeModal: () => void;
 }

src/v1-check/components/Form/Nav.tsx

@@ -1,9 +1,9 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
 
-import { StyledCard } from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
-import colors from 'styles/colors';
-import { ReactNode } from 'react';
+import { StyledCard } from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
+import colors from 'v1-check/styles/colors';
 
 const Header = styled(StyledCard)`
   margin: 1rem auto;

src/v1-check/components/Form/Row.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import Heading from 'components/Form/Heading';
+import type { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import Heading from 'v1-check/components/Form/Heading';
 
 export interface RowProps {
   lbl: string,
@@ -20,6 +20,7 @@ export const StyledRow = styled.div`
   justify-content: space-between;
   flex-wrap: wrap;
   padding: 0.25rem;
+  &li { border-bottom: 1px dashed ${colors.primaryTransparent} !important; }
   &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
   span.lbl { font-weight: bold; }
   span.val {
@@ -33,10 +34,6 @@ export const StyledRow = styled.div`
   }  
 `;
 
-const StyledExpandableRow = styled(StyledRow).attrs({
-  as: "summary"
-})``;
-
 export const Details = styled.details`
   transition: all 0.2s ease-in-out;
   summary {
@@ -61,12 +58,6 @@ const SubRowList = styled.ul`
   background: ${colors.primaryTransparent};
 `;
 
-const SubRow = styled(StyledRow).attrs({
-  as: "li"
-})`
-  border-bottom: 1px dashed ${colors.primaryTransparent} !important;
-`;
-
 const PlainText = styled.pre`
   background: ${colors.background};
   width: 95%;
@@ -150,15 +141,15 @@ export const ExpandableRow = (props: RowProps) => {
   const { lbl, val, title, rowList, open } = props;
   return (
     <Details open={open}>
-      <StyledExpandableRow key={`${lbl}-${val}`}>
+      <StyledRow as="summary" key={`${lbl}-${val}`}>
         <span className="lbl" title={title?.toString()}>{lbl}</span>
         <span className="val" title={val?.toString()}>{val.toString()}</span>
-      </StyledExpandableRow>
+      </StyledRow>
       { rowList &&
         <SubRowList>
           { rowList?.map((row: RowProps, index: number) => {
             return (
-              <SubRow key={`${row.lbl}-${index}`}>
+              <StyledRow as="li" key={`${row.lbl}-${index}`}>
                 <span className="lbl" title={row.title?.toString()}>{row.lbl}</span>
                 <span className="val" title={row.val} onClick={() => copyToClipboard(row.val)}>
                   {formatValue(row.val)}
@@ -169,7 +160,7 @@ export const ExpandableRow = (props: RowProps) => {
                     <li key={listItem}>{snip(listItem)}</li>
                   ))}
                 </List>)}
-              </SubRow>
+              </StyledRow>
             )
           })}
         </SubRowList>

src/v1-check/components/Results/Archives.tsx

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const Note = styled.small`
 opacity: 0.5;

src/v1-check/components/Results/BlockLists.tsx

@@ -1,6 +1,6 @@
 
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const BlockListsCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {
   const blockLists = props.data.blocklists;

src/v1-check/components/Results/BuiltWith.tsx

@@ -1,9 +1,9 @@
 
-import styled from 'styled-components';
-import { TechnologyGroup, Technology } from 'utils/result-processor';
-import colors from 'styles/colors';
-import Card from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
+import styled from '@emotion/styled';
+import type { TechnologyGroup, Technology } from 'v1-check/utils/result-processor';
+import colors from 'v1-check/styles/colors';
+import Card from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
 
 const Outer = styled(Card)`
   grid-row: span 2

src/v1-check/components/Results/CarbonFootprint.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
-import colors from 'styles/colors';
+import styled from '@emotion/styled';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
+import colors from 'v1-check/styles/colors';
 
 const LearnMoreInfo = styled.p`
 font-size: 0.8rem;

src/v1-check/components/Results/ContentLinks.tsx

@@ -1,7 +1,7 @@
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
-import Heading from 'components/Form/Heading';
-import colors from 'styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
+import Heading from 'v1-check/components/Form/Heading';
+import colors from 'v1-check/styles/colors';
 
 const cardStyles = `
   small { margin-top: 1rem; opacity: 0.5; }

src/v1-check/components/Results/Cookies.tsx

@@ -1,6 +1,6 @@
-import { Card } from 'components/Form/Card';
-import { ExpandableRow } from 'components/Form/Row';
-import { Cookie } from 'utils/result-processor';
+import { Card } from 'v1-check/components/Form/Card';
+import { ExpandableRow } from 'v1-check/components/Form/Row';
+import type { Cookie } from 'v1-check/utils/result-processor';
 
 export const parseHeaderCookies = (cookiesHeader: string[]): Cookie[] => {
   if (!cookiesHeader || !cookiesHeader.length) return [];

src/v1-check/components/Results/DnsRecords.tsx

@@ -1,5 +1,5 @@
-import { Card } from 'components/Form/Card';
-import Row, { ListRow }  from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Row, { ListRow }  from 'v1-check/components/Form/Row';
 
 const styles = `
   grid-row: span 2;

src/v1-check/components/Results/DnsSec.tsx

@@ -1,7 +1,7 @@
-import { Card } from 'components/Form/Card';
-import Row, { ExpandableRow, RowProps } from 'components/Form/Row';
-import Heading from 'components/Form/Heading';
-import colors from 'styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row, { ExpandableRow, type RowProps } from 'v1-check/components/Form/Row';
+import Heading from 'v1-check/components/Form/Heading';
+import colors from 'v1-check/styles/colors';
 
 
 

src/v1-check/components/Results/DnsServer.tsx

@@ -1,8 +1,8 @@
 
-import { Card } from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
-import Row from 'components/Form/Row';
-import colors from 'styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
+import Row from 'v1-check/components/Form/Row';
+import colors from 'v1-check/styles/colors';
 
 const cardStyles = `
   small {

src/v1-check/components/Results/DomainLookup.tsx

@@ -1,7 +1,7 @@
 
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const cardStyles = `
 span.val {

src/v1-check/components/Results/Firewall.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import styled from '@emotion/styled';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const Note = styled.small`
 opacity: 0.5;

src/v1-check/components/Results/Headers.tsx

@@ -1,6 +1,6 @@
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
-import { ReactNode } from 'react';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
+import type { ReactNode } from 'react';
 
 const HeadersCard = (props: { data: any, title: string, actionButtons: ReactNode }): JSX.Element => {
   const headers = props.data;

src/v1-check/components/Results/HostNames.tsx

@@ -1,9 +1,9 @@
 
-import styled from 'styled-components';
-import { HostNames } from 'utils/result-processor';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
+import styled from '@emotion/styled';
+import type { HostNames } from 'v1-check/utils/result-processor';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
 
 const Row = styled.div`
   display: flex;

src/v1-check/components/Results/Hsts.tsx

@@ -1,6 +1,6 @@
 
-import { Card } from 'components/Form/Card';
-import Row, { RowProps } from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Row, { type RowProps } from 'v1-check/components/Form/Row';
 
 const cardStyles = '';
 

src/v1-check/components/Results/HttpSecurity.tsx

@@ -1,5 +1,5 @@
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const HttpSecurityCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
   const data = props.data;

src/v1-check/components/Results/Lighthouse.tsx

@@ -1,5 +1,5 @@
-import { Card } from 'components/Form/Card';
-import { ExpandableRow } from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import { ExpandableRow } from 'v1-check/components/Form/Row';
 
 const processScore = (percentile: number) => {
   return `${Math.round(percentile * 100)}%`;

src/v1-check/components/Results/MailConfig.tsx

@@ -1,8 +1,8 @@
 
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
-import Heading from 'components/Form/Heading';
-import colors from 'styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
+import Heading from 'v1-check/components/Form/Heading';
+import colors from 'v1-check/styles/colors';
 
 const cardStyles = ``;
 

src/v1-check/components/Results/OpenPorts.tsx

@@ -1,5 +1,5 @@
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const cardStyles = `
   small { margin-top: 1rem; opacity: 0.5; }

src/v1-check/components/Results/Rank.tsx

@@ -1,8 +1,8 @@
 
 import { AreaChart, Area, Tooltip, CartesianGrid, ResponsiveContainer } from 'recharts';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const cardStyles = `
 span.val {

src/v1-check/components/Results/Redirects.tsx

@@ -1,6 +1,6 @@
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const cardStyles = `
   div {

src/v1-check/components/Results/RobotsTxt.tsx

@@ -1,6 +1,6 @@
 
-import { Card } from 'components/Form/Card';
-import Row, { RowProps }  from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Row, { type RowProps }  from 'v1-check/components/Form/Row';
 
 const cardStyles = `
   grid-row: span 2;

src/v1-check/components/Results/Screenshot.tsx

@@ -1,4 +1,4 @@
-import { Card } from 'components/Form/Card';
+import { Card } from 'v1-check/components/Form/Card';
 
 const cardStyles = `
   overflow: auto;

src/v1-check/components/Results/SecurityTxt.tsx

@@ -1,7 +1,7 @@
 
-import { Card } from 'components/Form/Card';
-import Row, { Details } from 'components/Form/Row';
-import colors from 'styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row, { Details } from 'v1-check/components/Form/Row';
+import colors from 'v1-check/styles/colors';
 
 const cardStyles = `
 small {

src/v1-check/components/Results/ServerInfo.tsx

@@ -1,6 +1,6 @@
-import { ServerInfo } from 'utils/result-processor';
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import type { ServerInfo } from 'v1-check/utils/result-processor';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const ServerInfoCard = (props: { data: ServerInfo, title: string, actionButtons: any }): JSX.Element => {
   const info = props.data;

src/v1-check/components/Results/ServerLocation.tsx

@@ -1,11 +1,11 @@
 
-import styled from 'styled-components';
-import { ServerLocation } from 'utils/result-processor';
-import { Card } from 'components/Form/Card';
-import LocationMap from 'components/misc/LocationMap';
-import Flag from 'components/misc/Flag';
-import { TextSizes } from 'styles/typography';
-import Row, { StyledRow } from 'components/Form/Row';
+import styled from '@emotion/styled';
+import type { ServerLocation } from 'v1-check/utils/result-processor';
+import { Card } from 'v1-check/components/Form/Card';
+import LocationMap from 'v1-check/components/misc/LocationMap';
+import Flag from 'v1-check/components/misc/Flag';
+import { TextSizes } from 'v1-check/styles/typography';
+import Row, { StyledRow } from 'v1-check/components/Form/Row';
 
 const cardStyles = '';
 

src/v1-check/components/Results/ServerStatus.tsx

@@ -1,7 +1,7 @@
 
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const cardStyles = `
 span.val {

src/v1-check/components/Results/SiteFeatures.tsx

@@ -1,7 +1,7 @@
-import { Card } from 'components/Form/Card';
-import colors from 'styles/colors';
-import Row from 'components/Form/Row';
-import Heading  from 'components/Form/Heading';
+import { Card } from 'v1-check/components/Form/Card';
+import colors from 'v1-check/styles/colors';
+import Row from 'v1-check/components/Form/Row';
+import Heading  from 'v1-check/components/Form/Heading';
 
 const styles = `
   .content {

src/v1-check/components/Results/Sitemap.tsx

@@ -1,7 +1,7 @@
 
-import { Card } from 'components/Form/Card';
-import Row, { ExpandableRow } from 'components/Form/Row';
-import colors from 'styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row, { ExpandableRow } from 'v1-check/components/Form/Row';
+import colors from 'v1-check/styles/colors';
 
 const cardStyles = `
   max-height: 50rem;

src/v1-check/components/Results/SocialTags.tsx

@@ -1,7 +1,7 @@
 
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
-import colors from 'styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
+import colors from 'v1-check/styles/colors';
 
 const cardStyles = `
   .banner-image img {

src/v1-check/components/Results/SslCert.tsx

@@ -1,8 +1,8 @@
 
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
 
 const Row = styled.div`
   display: flex;

src/v1-check/components/Results/TechStack.tsx

@@ -1,8 +1,8 @@
 
-import styled from 'styled-components';
-import { Card } from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
-import colors from 'styles/colors';
+import styled from '@emotion/styled';
+import { Card } from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
+import colors from 'v1-check/styles/colors';
 
 const cardStyles = `
   grid-row: span 2;

src/v1-check/components/Results/Threats.tsx

@@ -1,8 +1,8 @@
 
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Row, { ExpandableRow } from 'components/Form/Row';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Row, { ExpandableRow } from 'v1-check/components/Form/Row';
 
 const Expandable = styled.details`
 margin-top: 0.5rem;

src/v1-check/components/Results/TlsCipherSuites.tsx

@@ -1,8 +1,8 @@
 
 import { useState, useEffect } from 'react';
-import { Card } from 'components/Form/Card';
-import Button from 'components/Form/Button';
-import { ExpandableRow } from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Button from 'v1-check/components/Form/Button';
+import { ExpandableRow } from 'v1-check/components/Form/Row';
 
 const makeCipherSuites = (results: any) => {
   if (!results || !results.connection_info || (results.connection_info.ciphersuite || [])?.length === 0) {

src/v1-check/components/Results/TlsClientSupport.tsx

@@ -1,8 +1,8 @@
 
 import { useState, useEffect } from 'react';
-import { Card } from 'components/Form/Card';
-import Button from 'components/Form/Button';
-import { ExpandableRow } from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Button from 'v1-check/components/Form/Button';
+import { ExpandableRow } from 'v1-check/components/Form/Row';
 
 const makeClientSupport = (results: any) => {
   if (!results?.analysis) return [];

src/v1-check/components/Results/TlsIssueAnalysis.tsx

@@ -1,10 +1,10 @@
 
 import { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Button from 'components/Form/Button';
-import Row, { ExpandableRow } from 'components/Form/Row';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Button from 'v1-check/components/Form/Button';
+import Row, { ExpandableRow } from 'v1-check/components/Form/Row';
 
 const Expandable = styled.details`
 margin-top: 0.5rem;

src/v1-check/components/Results/TraceRoute.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
 
 const RouteRow = styled.div`
   text-align: center;

src/v1-check/components/Results/TxtRecords.tsx

@@ -1,6 +1,6 @@
 
-import { Card } from 'components/Form/Card';
-import Row from 'components/Form/Row';
+import { Card } from 'v1-check/components/Form/Card';
+import Row from 'v1-check/components/Form/Row';
 
 const cardStyles = `
 grid-column: span 2;

src/v1-check/components/Results/WhoIs.tsx

@@ -1,9 +1,9 @@
 
-import styled from 'styled-components';
-import { Whois } from 'utils/result-processor';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
+import styled from '@emotion/styled';
+import type { Whois } from 'v1-check/utils/result-processor';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
 
 const Row = styled.div`
   display: flex;

src/v1-check/components/misc/ActionButtons.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import Button from 'components/Form/Button';
-import colors from 'styles/colors';
+import styled from '@emotion/styled';
+import Button from 'v1-check/components/Form/Button';
+import colors from 'v1-check/styles/colors';
 
 const ActionButtonContainer = styled.div`
   position: absolute;

src/v1-check/components/misc/AdditionalResources.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
 
 const ResourceListOuter = styled.ul`
 list-style: none;

src/v1-check/components/misc/DocContent.tsx

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
-import docs, { type Doc } from 'utils/docs';
-import colors from 'styles/colors';
-import Heading from 'components/Form/Heading';
+import styled from '@emotion/styled';
+import docs, { type Doc } from 'v1-check/utils/docs';
+import colors from 'v1-check/styles/colors';
+import Heading from 'v1-check/components/Form/Heading';
 
 const JobDocsContainer = styled.div`
 p.doc-desc, p.doc-uses, ul {

src/v1-check/components/misc/ErrorBoundary.tsx

@@ -1,8 +1,8 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
-import styled from 'styled-components';
-import Card from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
-import colors from 'styles/colors';
+import React, { Component, type ErrorInfo, type ReactNode } from "react";
+import styled from '@emotion/styled';
+import Card from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
+import colors from 'v1-check/styles/colors';
 
 interface Props {
   children: ReactNode;

src/v1-check/components/misc/FancyBackground.tsx

@@ -340,7 +340,7 @@ const FancyBackground = (): JSX.Element => {
   
 
   return (
-  <div className='ui' id='fancy-background'>
+  <div id='fancy-background'>
     <p><span className='dead'>0</span></p>
     <p><span className='alive'>0</span></p>
     <p><span className='drawn'>0</span></p>

src/v1-check/components/misc/Footer.tsx

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import colors from 'styles/colors';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
 
 const StyledFooter = styled.footer`
   bottom: 0;

src/v1-check/components/misc/Loader.tsx

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-import { StyledCard } from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
-import colors from 'styles/colors';
+import { StyledCard } from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
+import colors from 'v1-check/styles/colors';
 
 const LoaderContainer = styled(StyledCard)`
   margin: 0 auto 1rem auto;

src/v1-check/components/misc/LocationMap.tsx

@@ -5,8 +5,8 @@ import {
   Annotation,
 } from 'react-simple-maps';
 
-import colors from 'styles/colors';
-import MapFeatures from 'assets/data/map-features.json';
+import colors from 'v1-check/styles/colors';
+import MapFeatures from 'v1-check/assets/data/map-features.json';
 
 interface Props {
   lat: number,

src/v1-check/components/misc/ProgressBar.tsx

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import Card from 'components/Form/Card';
-import Heading from 'components/Form/Heading';
-import { useState, useEffect, ReactNode } from 'react';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import Card from 'v1-check/components/Form/Card';
+import Heading from 'v1-check/components/Form/Heading';
+import { useState, useEffect, type ReactNode } from 'react';
 
 
 const LoadCard = styled(Card)`

src/v1-check/components/misc/SelfScanMsg.tsx

@@ -1,7 +1,7 @@
 
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { StyledCard } from 'components/Form/Card';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { StyledCard } from 'v1-check/components/Form/Card';
 
 const StyledSelfScanMsg = styled(StyledCard)`
   margin: 0px auto 1rem;

src/v1-check/components/misc/ViewRaw.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
-import colors from 'styles/colors';
-import { Card } from 'components/Form/Card';
-import Button from 'components/Form/Button';
+import styled from '@emotion/styled';
+import colors from 'v1-check/styles/colors';
+import { Card } from 'v1-check/components/Form/Card';
+import Button from 'v1-check/components/Form/Button';
 
 const CardStyles = `
 margin: 0 auto 1rem auto;

src/v1-check/hooks/motherOfAllHooks.ts

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-import { LoadingState } from 'components/misc/ProgressBar';
-import { AddressType } from 'utils/address-type-checker';
+import type { LoadingState } from 'v1-check/components/misc/ProgressBar';
+import type { AddressType } from 'v1-check/utils/address-type-checker';
 
 interface UseIpAddressProps<ResultType = any> {
   // Unique identifier for this job type

src/v1-check/styles/globals.tsx

@@ -0,0 +1,17 @@
+import { Global, css } from '@emotion/react';
+
+const GlobalStyles = () => (
+  <Global
+    styles={css`
+    @font-face {
+      font-family: PTMono;
+      font-style: normal;
+      font-weight: 400;
+      src: url('/fonts/PTMono.ttf') format('ttf');
+    }
+    body { font-family: PTMono; }
+    `}
+  />
+);
+
+export default GlobalStyles;

src/v1-check/styles/index.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'PTMono';
-  src: url('assets/fonts/PTMono-Regular.ttf') format('truetype');
+  src: url('/fonts/PTMono-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
@@ -17,6 +17,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: #141d2b;
+  color: #fff;
 }
 
 code {
@@ -44,3 +45,7 @@ svg.rsm-svg {
   --toastify-color-warning: #f6f000 !important;
   --toastify-color-error: #f80363 !important;
 }
+
+#fancy-background {
+  position: absolute;
+}

src/v1-check/utils/get-keys.ts

@@ -0,0 +1,14 @@
+
+const keys = {
+  shodan: import.meta.env.REACT_APP_SHODAN_API_KEY || "default_value_if_not_set",
+  whoApi: import.meta.env.REACT_APP_WHO_API_KEY || "default_value_if_not_set",
+};
+// const keys = process && process.env ? {
+//   shodan: process.env.REACT_APP_SHODAN_API_KEY,
+//   whoApi: process.env.REACT_APP_WHO_API_KEY,
+// } : {
+//   shodan: import.meta.env.REACT_APP_SHODAN_API_KEY || "default_value_if_not_set",
+//   whoApi: import.meta.env.REACT_APP_WHO_API_KEY || "default_value_if_not_set",
+// };
+
+export default keys;

src/v1-check/utils/result-processor.ts

@@ -1,4 +1,4 @@
-import { RowProps }  from 'components/Form/Row';
+import type { RowProps }  from 'v1-check/components/Form/Row';
 
 export interface ServerLocation {
   city: string,

src/v1-check/views/About.tsx

@@ -1,13 +1,13 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-import colors from 'styles/colors';
-import Heading from 'components/Form/Heading';
-import Footer from 'components/misc/Footer';
-import Nav from 'components/Form/Nav';
-import Button from 'components/Form/Button';
-import AdditionalResources from 'components/misc/AdditionalResources';
-import { StyledCard } from 'components/Form/Card';
-import docs, { about, featureIntro, license, fairUse, supportUs } from 'utils/docs';
+import colors from 'v1-check/styles/colors';
+import Heading from 'v1-check/components/Form/Heading';
+import Footer from 'v1-check/components/misc/Footer';
+import Nav from 'v1-check/components/Form/Nav';
+import Button from 'v1-check/components/Form/Button';
+import AdditionalResources from 'v1-check/components/misc/AdditionalResources';
+import { StyledCard } from 'v1-check/components/Form/Card';
+import docs, { about, featureIntro, license, fairUse, supportUs } from 'v1-check/utils/docs';
 
 const AboutContainer = styled.div`
 width: 95vw;

src/v1-check/views/App.tsx

@@ -0,0 +1,24 @@
+import { Routes, Route, Outlet } from "react-router-dom";
+
+import Home from 'v1-check/views/Home.tsx';
+import Results from 'v1-check/views/Results.tsx';
+import About from 'v1-check/views/About.tsx';
+import NotFound from 'v1-check/views/NotFound.tsx';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/check" element={<Layout />}>
+        <Route index element={<Home />} />
+        <Route path="home" element={<Home />} />
+        <Route path="about" element={<About />} />
+        <Route path=":urlToScan" element={<Results />} />
+        <Route path="*" element={<NotFound />} />
+      </Route>
+    </Routes>
+  );
+}
+
+function Layout() {
+  return (<Outlet />);
+}

src/v1-check/views/Home.tsx

@@ -1,17 +1,17 @@
-import styled from 'styled-components';
-import { ChangeEvent, FormEvent, useState } from 'react';
-import { useNavigate, NavigateOptions } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { type ChangeEvent, type FormEvent, useState } from 'react';
+import { useNavigate, type NavigateOptions } from 'react-router-dom';
 
-import Heading from 'components/Form/Heading';
-import Input from 'components/Form/Input'
-import Button from 'components/Form/Button';
-import { StyledCard } from 'components/Form/Card';
-import Footer from 'components/misc/Footer';
-import FancyBackground from 'components/misc/FancyBackground';
+import Heading from 'v1-check/components/Form/Heading';
+import Input from 'v1-check/components/Form/Input'
+import Button from 'v1-check/components/Form/Button';
+import { StyledCard } from 'v1-check/components/Form/Card';
+import Footer from 'v1-check/components/misc/Footer';
+import FancyBackground from 'v1-check/components/misc/FancyBackground';
 
-import docs from 'utils/docs';
-import colors from 'styles/colors';
-import { determineAddressType } from 'utils/address-type-checker';
+import docs from 'v1-check/utils/docs';
+import colors from 'v1-check/styles/colors';
+import { determineAddressType } from 'v1-check/utils/address-type-checker';
 
 const HomeContainer = styled.section`
   display: flex;
@@ -120,6 +120,7 @@ const SiteFeaturesWrapper = styled(StyledCard)`
     list-style: none;
     padding: 0 1rem;
     font-size: 0.9rem;
+    color: ${colors.textColor};
     li {
       margin: 0.1rem 0;
       text-indent: -1.2rem;
@@ -159,7 +160,7 @@ const Home = (): JSX.Element => {
         address = 'https://' + address;
       }
       const resultRouteParams: NavigateOptions = { state: { address, addressType } };
-      navigate(`/results/${encodeURIComponent(address)}`, resultRouteParams);
+      navigate(`/check/${encodeURIComponent(address)}`, resultRouteParams);
     }
   };
   
@@ -252,7 +253,7 @@ const Home = (): JSX.Element => {
           <a target="_blank" rel="noreferrer" href="https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/web-check" title="Deploy your own private or public instance of Web-Check to Netlify">
             <Button>Deploy your own</Button>
           </a>
-          <a href="/about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
+          <a href="about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
             <Button>API Docs</Button>
           </a>
         </div>

src/v1-check/views/NotFound.tsx

@@ -1,12 +1,12 @@
 
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-import colors from 'styles/colors';
-import Heading from 'components/Form/Heading';
-import Footer from 'components/misc/Footer';
-import Nav from 'components/Form/Nav';
-import Button from 'components/Form/Button';
-import { StyledCard } from 'components/Form/Card';
+import colors from 'v1-check/styles/colors';
+import Heading from 'v1-check/components/Form/Heading';
+import Footer from 'v1-check/components/misc/Footer';
+import Nav from 'v1-check/components/Form/Nav';
+import Button from 'v1-check/components/Form/Button';
+import { StyledCard } from 'v1-check/components/Form/Card';
 
 const AboutContainer = styled.div`
   width: 95vw;

src/v1-check/views/Results.tsx

@@ -1,72 +1,72 @@
-import { useState, useEffect, useCallback, ReactNode } from 'react';
+import { useState, useEffect, useCallback, type ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { ToastContainer } from 'react-toastify';
 import Masonry from 'react-masonry-css'
 
-import colors from 'styles/colors';
-import Heading from 'components/Form/Heading';
-import Modal from 'components/Form/Modal';
-import Footer from 'components/misc/Footer';
-import Nav from 'components/Form/Nav';
-import { RowProps }  from 'components/Form/Row';
+import colors from 'v1-check/styles/colors';
+import Heading from 'v1-check/components/Form/Heading';
+import Modal from 'v1-check/components/Form/Modal';
+import Footer from 'v1-check/components/misc/Footer';
+import Nav from 'v1-check/components/Form/Nav';
+import type { RowProps }  from 'v1-check/components/Form/Row';
 
-import Loader from 'components/misc/Loader';
-import ErrorBoundary from 'components/misc/ErrorBoundary';
-import SelfScanMsg from 'components/misc/SelfScanMsg';
-import DocContent from 'components/misc/DocContent';
-import ProgressBar, { LoadingJob, LoadingState, initialJobs } from 'components/misc/ProgressBar';
-import ActionButtons from 'components/misc/ActionButtons';
-import AdditionalResources from 'components/misc/AdditionalResources';
-import ViewRaw from 'components/misc/ViewRaw';
+import Loader from 'v1-check/components/misc/Loader';
+import ErrorBoundary from 'v1-check/components/misc/ErrorBoundary';
+import SelfScanMsg from 'v1-check/components/misc/SelfScanMsg';
+import DocContent from 'v1-check/components/misc/DocContent';
+import ProgressBar, { type LoadingJob, type LoadingState, initialJobs } from 'v1-check/components/misc/ProgressBar';
+import ActionButtons from 'v1-check/components/misc/ActionButtons';
+import AdditionalResources from 'v1-check/components/misc/AdditionalResources';
+import ViewRaw from 'v1-check/components/misc/ViewRaw';
 
-import ServerLocationCard from 'components/Results/ServerLocation';
-import ServerInfoCard from 'components/Results/ServerInfo';
-import HostNamesCard from 'components/Results/HostNames';
-import WhoIsCard from 'components/Results/WhoIs';
-import LighthouseCard from 'components/Results/Lighthouse';
-import ScreenshotCard from 'components/Results/Screenshot';
-import SslCertCard from 'components/Results/SslCert';
-import HeadersCard from 'components/Results/Headers';
-import CookiesCard from 'components/Results/Cookies';
-import RobotsTxtCard from 'components/Results/RobotsTxt';
-import DnsRecordsCard from 'components/Results/DnsRecords';
-import RedirectsCard from 'components/Results/Redirects';
-import TxtRecordCard from 'components/Results/TxtRecords';
-import ServerStatusCard from 'components/Results/ServerStatus';
-import OpenPortsCard from 'components/Results/OpenPorts';
-import TraceRouteCard from 'components/Results/TraceRoute';
-import CarbonFootprintCard from 'components/Results/CarbonFootprint';
-import SiteFeaturesCard from 'components/Results/SiteFeatures';
-import DnsSecCard from 'components/Results/DnsSec';
-import HstsCard from 'components/Results/Hsts';
-import SitemapCard from 'components/Results/Sitemap';
-import DomainLookup from 'components/Results/DomainLookup';
-import DnsServerCard from 'components/Results/DnsServer';
-import TechStackCard from 'components/Results/TechStack';
-import SecurityTxtCard from 'components/Results/SecurityTxt';
-import ContentLinksCard from 'components/Results/ContentLinks';
-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 RankCard from 'components/Results/Rank';
-import BlockListsCard from 'components/Results/BlockLists';
-import ThreatsCard from 'components/Results/Threats';
-import TlsCipherSuitesCard from 'components/Results/TlsCipherSuites';
-import TlsIssueAnalysisCard from 'components/Results/TlsIssueAnalysis';
-import TlsClientSupportCard from 'components/Results/TlsClientSupport';
+import ServerLocationCard from 'v1-check/components/Results/ServerLocation';
+import ServerInfoCard from 'v1-check/components/Results/ServerInfo';
+import HostNamesCard from 'v1-check/components/Results/HostNames';
+import WhoIsCard from 'v1-check/components/Results/WhoIs';
+import LighthouseCard from 'v1-check/components/Results/Lighthouse';
+import ScreenshotCard from 'v1-check/components/Results/Screenshot';
+import SslCertCard from 'v1-check/components/Results/SslCert';
+import HeadersCard from 'v1-check/components/Results/Headers';
+import CookiesCard from 'v1-check/components/Results/Cookies';
+import RobotsTxtCard from 'v1-check/components/Results/RobotsTxt';
+import DnsRecordsCard from 'v1-check/components/Results/DnsRecords';
+import RedirectsCard from 'v1-check/components/Results/Redirects';
+import TxtRecordCard from 'v1-check/components/Results/TxtRecords';
+import ServerStatusCard from 'v1-check/components/Results/ServerStatus';
+import OpenPortsCard from 'v1-check/components/Results/OpenPorts';
+import TraceRouteCard from 'v1-check/components/Results/TraceRoute';
+import CarbonFootprintCard from 'v1-check/components/Results/CarbonFootprint';
+import SiteFeaturesCard from 'v1-check/components/Results/SiteFeatures';
+import DnsSecCard from 'v1-check/components/Results/DnsSec';
+import HstsCard from 'v1-check/components/Results/Hsts';
+import SitemapCard from 'v1-check/components/Results/Sitemap';
+import DomainLookup from 'v1-check/components/Results/DomainLookup';
+import DnsServerCard from 'v1-check/components/Results/DnsServer';
+import TechStackCard from 'v1-check/components/Results/TechStack';
+import SecurityTxtCard from 'v1-check/components/Results/SecurityTxt';
+import ContentLinksCard from 'v1-check/components/Results/ContentLinks';
+import SocialTagsCard from 'v1-check/components/Results/SocialTags';
+import MailConfigCard from 'v1-check/components/Results/MailConfig';
+import HttpSecurityCard from 'v1-check/components/Results/HttpSecurity';
+import FirewallCard from 'v1-check/components/Results/Firewall';
+import ArchivesCard from 'v1-check/components/Results/Archives';
+import RankCard from 'v1-check/components/Results/Rank';
+import BlockListsCard from 'v1-check/components/Results/BlockLists';
+import ThreatsCard from 'v1-check/components/Results/Threats';
+import TlsCipherSuitesCard from 'v1-check/components/Results/TlsCipherSuites';
+import TlsIssueAnalysisCard from 'v1-check/components/Results/TlsIssueAnalysis';
+import TlsClientSupportCard from 'v1-check/components/Results/TlsClientSupport';
 
-import keys from 'utils/get-keys';
-import { determineAddressType, AddressType } from 'utils/address-type-checker';
-import useMotherHook from 'hooks/motherOfAllHooks';
+import keys from 'v1-check/utils/get-keys';
+import { determineAddressType, type AddressType } from 'v1-check/utils/address-type-checker';
+import useMotherHook from 'v1-check/hooks/motherOfAllHooks';
 import {
-  getLocation, ServerLocation,
-  Cookie,
-  applyWhoIsResults, Whois,
-  parseShodanResults, ShodanResults
-} from 'utils/result-processor';
+  getLocation, type ServerLocation,
+  type Cookie,
+  applyWhoIsResults, type Whois,
+  parseShodanResults, type ShodanResults
+} from 'v1-check/utils/result-processor';
 
 const ResultsOuter = styled.div`
   display: flex;
@@ -151,11 +151,14 @@ const FilterButtons = styled.div`
   }
 `;
 
-const Results = (): JSX.Element => {
+const Results = (props: { address?: string } ): JSX.Element => {
   const startTime = new Date().getTime();
 
+  const { urlToScan } = useParams();
+  const address = props.address || urlToScan || '';
+
   const [ addressType, setAddressType ] = useState<AddressType>('empt');
-  const { address } = useParams();
+
 
   const [loadingJobs, setLoadingJobs] = useState<LoadingJob[]>(initialJobs);
   const [modalOpen, setModalOpen] = useState(false);
@@ -247,7 +250,8 @@ const Results = (): JSX.Element => {
 
   const urlTypeOnly = ['url'] as AddressType[]; // Many jobs only run with these address types
 
-  const api = process.env.REACT_APP_API_ENDPOINT || '/api'; // Where is the API hosted?
+  // const api = process.env.REACT_APP_API_ENDPOINT || '/api'; // Where is the API hosted?
+  const api = '/api'; // Where is the API hosted?
 
   // Fetch and parse IP address for given URL
   const [ipAddress, setIpAddress] = useMotherHook({
@@ -876,7 +880,7 @@ const Results = (): JSX.Element => {
         }
       </Nav>
       <ProgressBar loadStatus={loadingJobs} showModal={showErrorModal} showJobDocs={showInfo} />
-      { address?.includes(window?.location?.hostname || 'web-check.xyz') && <SelfScanMsg />}
+      {/* { address?.includes(window?.location?.hostname || 'web-check.xyz') && <SelfScanMsg />} */}
       <Loader show={loadingJobs.filter((job: LoadingJob) => job.state !== 'loading').length < 5} />
       <FilterButtons>{ showFilters ? <>
         <div className="one-half">

src/v1-check/views/main.tsx

@@ -0,0 +1,10 @@
+import { BrowserRouter } from "react-router-dom";
+import { StaticRouter } from "react-router-dom/server";
+import App from "./App.tsx";
+// import "./App.css";
+
+export default ({ pathname }: { pathname: string }) => (
+    import.meta.env.SSR
+        ? <StaticRouter location={pathname}><App/></StaticRouter>
+        : <BrowserRouter><App/></BrowserRouter>
+)