feat: v2

Replace Gatsby with Vite and Emotion with Tailwind CSS. BREAKING CHANGE: Password Lense no longer supports IE 11. You must use a modern browser instead.
wKovacs64 · Nov 1, 2021 · d7f2355 · d7f2355
1 parent f490f38
commit d7f2355
Show file tree

Hide file tree

Showing 66 changed files with 2,999 additions and 11,247 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -29,7 +29,7 @@ workflows:
           executor: my-cypress-executor
           yarn: true
           start: yarn serve
-          wait-on: '--timeout 120000 http://localhost:8000'
+          wait-on: '--timeout 120000 http://localhost:3000'
       - validate:
           requires:
             - cypress/run

diff --git a/.env.example b/.env.example
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
-.cache/
-/public
+/dist
+/dist-ssr
+index.html
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,4 +5,9 @@ module.exports = {
     'plugin:wkovacs64/typescript',
     'prettier',
   ],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+  },
 };
diff --git a/.gitignore b/.gitignore
@@ -73,7 +73,7 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+.env.local
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
@@ -153,8 +153,9 @@ $RECYCLE.BIN/
 
 # End of https://www.gitignore.io/api/osx,node,linux,windows,visualstudiocode
 
-# Build directory
-/public
+# Build output
+/dist
+/dist-ssr
 
 # npm
 package-lock.json
@@ -164,3 +165,4 @@ package-lock.json
 
 # Cypress
 cypress/screenshots
+cypress/videos
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,3 @@
-.cache/
-/public
+/dist
+/dist-ssr
 package.json
diff --git a/README.md b/README.md
@@ -25,22 +25,9 @@ way to get a more informative view of your password.
 
 [![Deploy to Netlify][deploy-image]][deploy-link]
 
-## FAQ
-
-<details>
-  <summary>Why?</summary>
-  <p>Because a co-worker asked for it.</p>
-</details>
-
-<details>
-  <summary>Isn't Gatsby overkill for this?</summary>
-  <p>
-    <a href="https://twitter.com/jlengstorf/status/1043237435675557888">No</a>,
-    it's <a href="https://twitter.com/kylemathews/status/1043226318978998272">awesome</a>
-    for <a href="https://www.gatsbyjs.org/blog/2018-11-07-gatsby-for-apps/">building
-    apps</a>.
-  </p>
-</details>
+## Why?
+
+Because a co-worker asked for it.
 
 [demo-image]: ./demo.gif
 [deploy-image]: https://www.netlify.com/img/deploy/button.svg

diff --git a/config/build-info.js b/config/build-info.js
diff --git a/config/site.js b/config/site.js
diff --git a/cypress.json b/cypress.json
@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:8000",
+  "baseUrl": "http://localhost:3000",
   "chromeWebSecurity": false,
   "integrationFolder": "cypress/e2e",
   "video": false,

diff --git a/gatsby-browser.js b/gatsby-browser.js
diff --git a/gatsby-config.js b/gatsby-config.js
diff --git a/gatsby-node.js b/gatsby-node.js
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
diff --git a/index.html b/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>Password Lense</title>
+    <meta name="application-name" content="Password Lense" />
+    <meta name="apple-mobile-web-app-title" content="Password Lense" />
+    <meta name="description" content="Reveal character types in a password" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Password Lense" />
+    <meta
+      property="og:description"
+      content="Reveal character types in a password"
+    />
+    <meta
+      property="og:image"
+      content="https://res.cloudinary.com/dfcj3xczu/image/upload/v1538582926/pwl-social-banner.png"
+    />
+    <meta property="og:image:alt" content="Password Lense" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Password Lense" />
+    <meta
+      name="twitter:description"
+      content="Reveal character types in a password"
+    />
+    <meta
+      name="twitter:image"
+      content="https://res.cloudinary.com/dfcj3xczu/image/upload/v1538582926/pwl-social-banner.png"
+    />
+    <meta name="twitter:image:alt" content="Password Lense" />
+    <link rel="icon" sizes="any" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="msapplication-TileColor" content="#1c304a" />
+    <meta name="theme-color" content="#1c304a" />
+  </head>
+  <body
+    class="font-body text-gray-900 dark:text-gray-100 bg-white dark:bg-dark"
+  >
+    <script type="text/javascript">
+      function prefersDark() {
+        const storedPreference = window.localStorage.getItem('darkMode');
+        const hasStoredPreference = typeof storedPreference === 'string';
+        if (hasStoredPreference) return storedPreference === 'true';
+
+        const mediaQuery = '(prefers-color-scheme: dark)';
+        const mql = window.matchMedia(mediaQuery);
+        const hasSystemPreference = typeof mql.matches === 'boolean';
+        if (hasSystemPreference) return mql.matches ? true : false;
+
+        return false;
+      }
+
+      if (prefersDark()) {
+        document.documentElement.classList.add('dark');
+      }
+    </script>
+    <noscript>
+      <p class="p-4">This application requires JavaScript.</p>
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/netlify.toml b/netlify.toml
@@ -1,3 +1,19 @@
 [build]
   command = "npm run build"
-  publish = "public"
+  publish = "dist"
+
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Content-Type-Options = "nosniff"
+    X-Frame-Options = "DENY"
+    X-XSS-Protection = "1; mode=block"
+    Content-Security-Policy = "default-src 'self'; connect-src 'self' https://api.pwnedpasswords.com; img-src data: https:; script-src 'self' 'unsafe-inline'; style-src 'self'; worker-src 'self'; object-src 'none'"
+    Permissions-Policy = "geolocation=(), camera=(), microphone=(), payment=(), usb=()"
+    Referrer-Policy = "no-referrer-when-downgrade"
+    Expect-CT = "enforce, max-age=3600"
+
+[[headers]]
+  for = "/manifest.webmanifest"
+  [headers.values]
+    Content-Type = "application/manifest+json"