Adds Svelte, Framer and starts work on homepage

2024-11-21 15:53:31 +01:00 · 2024-05-26 22:15:29 +01:00 · 2024-05-26 22:15:29 +01:00 · ca3f8a4235
commit ca3f8a4235
parent 322ef5e0ea
11 changed files with 274 additions and 31 deletions
--- a/.env
+++ b/.env
@ -12,6 +12,13 @@ TRANCO_USERNAME=''
 TRANCO_API_KEY=''
 CLOUDMERSIVE_API_KEY=''

+GOOGLE_CLOUD_API_KEY='AIzaSyB4bvds3nkHhw29X5_xX549LULaRYm_2iU'
+TORRENT_IP_API_KEY='385915166ab8461fbec188995e256dcf'
+REACT_APP_SHODAN_API_KEY='WB6B7tRAskjlmpVUrYfnU1CVGCIpUs1t'
+REACT_APP_WHO_API_KEY='0d49be5b3417cd42bd60712b139c730d'
+SECURITY_TRAILS_API_KEY='cakw8TzsKJisdQX1QBd1ejpHm04SQa3F'
+BUILT_WITH_API_KEY='6f6e1906-0c2a-4406-9d10-d7b5f2b21f25'
+
 # API Keys for external services (frontend)
 REACT_APP_SHODAN_API_KEY=''
 REACT_APP_WHO_API_KEY=''
@ -24,3 +31,4 @@ REACT_APP_WHO_API_KEY=''
 # API_CORS_ORIGIN='*'             # Enable CORS, by setting your allowed hostname(s) here
 # API_ENABLE_RATE_LIMIT='true'    # Enable rate limiting for the API
 # REACT_APP_API_ENDPOINT='/api'   # The endpoint for the API (can be local or remote)
+# ENABLE_ANALYTICS='false'        # Enable Plausible hit counter for the frontend
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,7 +1,7 @@
 import { defineConfig } from 'astro/config';

 // Integrations
-// import svelte from '@astrojs/svelte';
+import svelte from '@astrojs/svelte';
 import react from "@astrojs/react";
 import partytown from '@astrojs/partytown';
 import sitemap from '@astrojs/sitemap';
@ -35,7 +35,7 @@ const base = unwrapEnvVar('BASE_URL', '/');
 const isBossServer = unwrapEnvVar('BOSS_SERVER', false);

 // Initialize Astro integrations
-const integrations = [react(), partytown(), sitemap()];
+const integrations = [svelte(), react(), partytown(), sitemap()];

 // Set the appropriate adapter, based on the deploy target
 function getAdapter(target) {
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "express-rate-limit": "^7.2.0",
+    "framer-motion": "^11.2.6",
    "got": "^14.2.1",
    "pm2": "^5.3.1",
    "psl": "^1.9.0",
@ -42,6 +43,7 @@
    "react-simple-maps": "^3.0.0",
    "react-toastify": "^10.0.5",
    "recharts": "^2.12.6",
+    "svelte": "^4.2.17",
    "traceroute": "^1.0.0",
    "typescript": "^5.4.5",
    "unzipper": "^0.11.5",
--- a/src/components/HomeBackground.tsx
+++ b/src/components/HomeBackground.tsx
@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import styled from '@emotion/styled';
+
+const dotSpacing = 32;
+
+const Meteor = styled(motion.div)`
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #9fef00;
+  box-shadow: 0 0 15px 3px #9fef00;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -100px;
+    left: 0;
+    width: 2px;
+    height: 100px;
+    background: linear-gradient(to bottom, #9fef00, transparent);
+  }
+`;
+
+const StyledSvg = styled.svg`
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+  fill: rgba(100, 100, 100, 0.5);
+`;
+
+const StyledRect = styled.rect`
+  width: 100%;
+  height: 100%;
+  stroke-width: 0;
+`;
+
+const generateMeteor = (id: number, gridSizeX: number, gridSizeY: number) => {
+  const column = Math.floor(Math.random() * gridSizeX);
+  const startRow = Math.floor(Math.random() * (gridSizeY - 12));
+  const travelDistance = 5 + Math.floor(Math.random() * 10); // Between 5 and 15 spaces
+  const duration = 1.5 + Math.random(); // 1.5 to 2.5 seconds duration
+
+  return {
+    id,
+    column,
+    startRow,
+    endRow: startRow + travelDistance,
+    duration,
+    key: Math.random() + Math.random(),
+  };
+};
+
+const DotPattern = ({ className }: { className?: string }) => {
+  const countOfMeteors = 6;
+  const [gridSizeX, setGridSizeX] = useState(Math.floor(window.innerWidth / dotSpacing));
+  const [gridSizeY, setGridSizeY] = useState(Math.floor(window.innerHeight / dotSpacing));
+  const [meteors, setMeteors] = useState(() => Array.from({ length: countOfMeteors }, (_, index) => generateMeteor(index, gridSizeX, gridSizeY)));
+
+  const handleAnimationComplete = (id: number) => {
+    setMeteors(current =>
+      current.map(meteor => {
+        if (meteor.id === id) {
+          return generateMeteor(id, gridSizeX, gridSizeY);
+        }
+        return meteor;
+      })
+    );
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setGridSizeX(Math.floor(window.innerWidth / dotSpacing));
+      setGridSizeY(Math.floor(window.innerHeight / dotSpacing));
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <>
+      <StyledSvg className={className}>
+        <defs>
+          <pattern id="dot-pattern" width={dotSpacing} height={dotSpacing} patternUnits="userSpaceOnUse">
+            <circle cx={1} cy={1} r={2} />
+          </pattern>
+        </defs>
+        <StyledRect fill="url(#dot-pattern)" />
+      </StyledSvg>
+
+      {meteors.map(({ id, column, startRow, endRow, duration, key }) => (
+        <Meteor
+          key={key}
+          initial={{
+            x: column * dotSpacing,
+            y: startRow * dotSpacing,
+            opacity: 1
+          }}
+          animate={{
+            y: endRow * dotSpacing,
+            opacity: 0
+          }}
+          transition={{
+            duration,
+            // ease: "easeInOut"
+            ease: [0.7, 0.75, 0.75, 1]
+          }}
+          onAnimationComplete={() => handleAnimationComplete(id)}
+        />
+      ))}
+    </>
+  );
+};
+
+export default DotPattern;
--- a/src/pages/account/index.astro
+++ b/src/pages/account/index.astro
@ -0,0 +1,44 @@
+---
+import BaseLayout from '@layouts/Base.astro';
+import Nav from '@components/Nav.astro';
+
+---
+
+<BaseLayout>
+  <main>
+    <Nav />
+  </main>
+</BaseLayout>
+
+<style lang="scss">
+  main {
+    height: 100vh;
+    padding: 1rem 0;
+    background: rgb(20,29,43);
+    background: radial-gradient(circle,#141d2b 0%,#0d1521 75%,#141d2b 100%);
+
+    h2 {
+      font-weight: 300;
+    }
+
+    .screenshot {
+      transform:
+        rotate3d(.5,-.866,0,15deg)
+        rotate(1deg);
+      box-shadow:
+        2em 4em 6em -2em rgba(0,0,0,.5),
+        1em 2em 3.5em -2.5em rgba(0,0,0,.5);
+      transition:
+        transform .4s ease,
+        box-shadow .4s ease;
+      border-radius: .5em;
+
+      &:hover {
+        transform:
+          rotate3d(0,0,0,0deg)
+          rotate(0deg);
+      }
+    }
+  }
+
+</style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
--- a/src/web-check-live/App.tsx
+++ b/src/web-check-live/App.tsx
@ -8,6 +8,15 @@ import NotFound from 'web-check-live/views/NotFound.tsx';
 import ErrorBoundary from 'web-check-live/components/boundaries/PageError.tsx';
 import GlobalStyles from './styles/globals.tsx';

+const Layout = () => {
+  return (
+  <>
+    <GlobalStyles />
+    <Outlet />
+  </>
+  );
+}
+
 export default function App() {
  return (
    <ErrorBoundary>
@ -23,12 +32,3 @@ export default function App() {
    </ErrorBoundary>
  );
 }
-
-function Layout() {
-  return (
-  <>
-    <GlobalStyles />
-    <Outlet />
-  </>
-  );
-}
--- a/src/web-check-live/components/Results/TlsClientSupport.tsx
+++ b/src/web-check-live/components/Results/TlsClientSupport.tsx
@ -5,7 +5,7 @@ import Button from 'web-check-live/components/Form/Button';
 import { ExpandableRow } from 'web-check-live/components/Form/Row';

 const makeClientSupport = (results: any) => {
-  if (!results?.analysis) return [];
+  if (!results?.analysis || results.analysis.length <1) return [];
  const target = results.target;
  const sslLabsClientSupport = (
      results.analysis.find((a: any) => a.analyzer === 'sslLabsClientSupport')
--- a/src/web-check-live/styles/globals.tsx
+++ b/src/web-check-live/styles/globals.tsx
@ -13,6 +13,9 @@ const GlobalStyles = () => (
      font-family: PTMono;
      color: #fff;
    }
+    #fancy-background p span {
+      color: transparent;
+    }
    `}
  />
 );
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -2,7 +2,7 @@
 # yarn lockfile v1


-"@ampproject/remapping@^2.2.0":
+"@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.2.1":
  version "2.3.0"
  resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz"
  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
@ -1114,7 +1114,7 @@
    "@jridgewell/resolve-uri" "^3.0.3"
    "@jridgewell/sourcemap-codec" "^1.4.10"

-"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+"@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
  version "0.3.25"
  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@ -1641,7 +1641,7 @@
  dependencies:
    "@types/ms" "*"

-"@types/estree@1.0.5", "@types/estree@^1.0.0":
+"@types/estree@*", "@types/estree@1.0.5", "@types/estree@^1.0.0", "@types/estree@^1.0.1":
  version "1.0.5"
  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
@ -1903,7 +1903,7 @@ acorn-walk@^8.2.0:
  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.2.tgz#7703af9415f1b6db9315d6895503862e231d34aa"
  integrity sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==

-acorn@^8.11.3, acorn@^8.6.0, acorn@^8.8.0:
+acorn@^8.10.0, acorn@^8.11.3, acorn@^8.6.0, acorn@^8.8.0, acorn@^8.9.0:
  version "8.11.3"
  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
@ -2594,6 +2594,17 @@ clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1:
  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==

+code-red@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/code-red/-/code-red-1.0.4.tgz#59ba5c9d1d320a4ef795bc10a28bd42bfebe3e35"
+  integrity sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+    "@types/estree" "^1.0.1"
+    acorn "^8.10.0"
+    estree-walker "^3.0.3"
+    periscopic "^3.1.0"
+
 color-convert@^1.9.0:
  version "1.9.3"
  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@ -2817,6 +2828,14 @@ css-select@^5.1.0:
    domutils "^3.0.1"
    nth-check "^2.0.1"

+css-tree@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
+  integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
+  dependencies:
+    mdn-data "2.0.30"
+    source-map-js "^1.0.1"
+
 css-what@^6.1.0:
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@ -3455,7 +3474,7 @@ estree-walker@^0.6.1:
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==

-estree-walker@^3.0.3:
+estree-walker@^3.0.0, estree-walker@^3.0.3:
  version "3.0.3"
  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz"
  integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
@ -3717,6 +3736,13 @@ forwarded@0.2.0:
  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==

+framer-motion@^11.2.6:
+  version "11.2.6"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.2.6.tgz#ab693b24d1f6cf34ef83494ab2df59fd39b7c87e"
+  integrity sha512-XUrjjBt57e5YoHQtjwc3eNchFBuHvIgN/cS8SC4oIaAn2J/0+bLanUxXizidJKZVeHJam/JrmMnPRjYMglVn5g==
+  dependencies:
+    tslib "^2.4.0"
+
 fresh@0.5.2:
  version "0.5.2"
  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@ -4343,6 +4369,13 @@ is-plain-obj@^4.0.0:
  resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz"
  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==

+is-reference@^3.0.0, is-reference@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-3.0.2.tgz#154747a01f45cd962404ee89d43837af2cba247c"
+  integrity sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==
+  dependencies:
+    "@types/estree" "*"
+
 is-stream@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz"
@ -4498,6 +4531,11 @@ load-yaml-file@^0.2.0:
    pify "^4.0.1"
    strip-bom "^3.0.0"

+locate-character@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-character/-/locate-character-3.0.0.tgz#0305c5b8744f61028ef5d01f444009e00779f974"
+  integrity sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==
+
 locate-path@^5.0.0:
  version "5.0.0"
  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
@ -4590,7 +4628,7 @@ magic-string@^0.25.3:
  dependencies:
    sourcemap-codec "^1.4.8"

-magic-string@^0.30.10, magic-string@^0.30.9:
+magic-string@^0.30.10, magic-string@^0.30.4, magic-string@^0.30.9:
  version "0.30.10"
  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz"
  integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==
@ -4755,6 +4793,11 @@ mdast-util-to-string@^4.0.0:
  dependencies:
    "@types/mdast" "^4.0.0"

+mdn-data@2.0.30:
+  version "2.0.30"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
+  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
+
 media-typer@0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@ -5625,6 +5668,15 @@ pend@~1.2.0:
  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
  integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==

+periscopic@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/periscopic/-/periscopic-3.1.0.tgz#7e9037bf51c5855bd33b48928828db4afa79d97a"
+  integrity sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^3.0.0"
+    is-reference "^3.0.0"
+
 picocolors@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
@ -6666,7 +6718,7 @@ socks@^2.7.1:
    ip-address "^9.0.5"
    smart-buffer "^4.2.0"

-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0:
  version "1.2.0"
  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz"
  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@ -6884,6 +6936,26 @@ svelte2tsx@^0.6.27:
    dedent-js "^1.0.1"
    pascal-case "^3.1.1"

+svelte@^4.2.17:
+  version "4.2.17"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.17.tgz#e8f4d70be8cac6bf4dbfa89ca2fcb1a99445933f"
+  integrity sha512-N7m1YnoXtRf5wya5Gyx3TWuTddI4nAyayyIWFojiWV5IayDYNV5i2mRp/7qNGol4DtxEYxljmrbgp1HM6hUbmQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    "@types/estree" "^1.0.1"
+    acorn "^8.9.0"
+    aria-query "^5.3.0"
+    axobject-query "^4.0.0"
+    code-red "^1.0.3"
+    css-tree "^2.3.1"
+    estree-walker "^3.0.3"
+    is-reference "^3.0.1"
+    locate-character "^3.0.0"
+    magic-string "^0.30.4"
+    periscopic "^3.1.0"
+
 systeminformation@^5.7:
  version "5.22.8"
  resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-5.22.8.tgz#403126772defa1d2a2e4cf039e9f6d57d3f1f3ba"