chore: optimize security & seo

natainditama · May 9, 2024 · 67d7ba3 · 67d7ba3
1 parent 62e0970
commit 67d7ba3
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 43 deletions.
diff --git a/.github/screnshot.png b/.github/screnshot.png
diff --git a/index.html b/index.html
@@ -1,46 +1,114 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- Primary Meta Tags -->
     <title>Calcway - Stunning calculator app website built with React</title>
-    <meta name="title" content="Calcway - Stunning calculator app website built with React">
-    <meta name="keywords" content="Stunning calculator, App website, React, Elegant design, Seamless user interface, Mathematical calculations, Web application, Calculator app, React framework, Beautiful UI, User-friendly calculator, Advanced calculations, Responsive design, Interactive interface, Front-end development, Modern calculator, Efficient calculations, Interactive user experience, Customizable calculator, React components">
-    <meta name="description"
-    content="Experience the elegance of a stunning calculator app website, crafted with React, offering a seamless and visually captivating user interface for effortless mathematical calculations">
-    <link rel="canonical" href="https://calcway.pages.dev/">
-    <link rel="shortcut icon" href="/vite.svg">
-
+    <meta
+      name="title"
+      content="Calcway - Stunning calculator app website built with React"
+    />
+    <meta
+      name="keywords"
+      content="Stunning calculator, App website, React, Elegant design, Seamless user interface, Mathematical calculations, Web application, Calculator app, React framework, Beautiful UI, User-friendly calculator, Advanced calculations, Responsive design, Interactive interface, Front-end development, Modern calculator, Efficient calculations, Interactive user experience, Customizable calculator, React components"
+    />
+    <meta
+      name="description"
+      content="Experience the elegance of a stunning calculator app website, crafted with React, offering a seamless and visually captivating user interface for effortless mathematical calculations"
+    />
+    <link rel="canonical" href="https://calcway.pages.dev/" />
+    <link rel="shortcut icon" href="/vite.svg" />
+
     <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://calcway.pages.dev/">
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://calcway.pages.dev/" />
     <meta property="og:locale" content="en" />
-    <meta property="og:title" content="Calcway - Stunning calculator app website built with React">
-    <meta property="og:description"
-      content="Experience the elegance of a stunning calculator app website, crafted with React, offering a seamless and visually captivating user interface for effortless mathematical calculations">
-    <meta property="og:image"
-      content="https://github.com/natainditama/calcway/raw/main/design/desktop-design-theme-2.jpg">
-
+    <meta
+      property="og:title"
+      content="Calcway - Stunning calculator app website built with React"
+    />
+    <meta
+      property="og:description"
+      content="Experience the elegance of a stunning calculator app website, crafted with React, offering a seamless and visually captivating user interface for effortless mathematical calculations"
+    />
+    <meta
+      property="og:image"
+      content="https://github.com/natainditama/calcway/raw/main/design/desktop-design-theme-2.jpg"
+    />
+
     <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:url" content="https://calcway.pages.dev/">
-    <meta property="twitter:title" content="Calcway - Stunning calculator app website built with React">
-    <meta property="twitter:description"
-      content="Experience the elegance of a stunning calculator app website, crafted with React, offering a seamless and visually captivating user interface for effortless mathematical calculations">
-    <meta property="twitter:image"
-      content="https://github.com/natainditama/calcway/raw/main/design/desktop-design-theme-2.jpg">
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://calcway.pages.dev/" />
+    <meta
+      property="twitter:title"
+      content="Calcway - Stunning calculator app website built with React"
+    />
+    <meta
+      property="twitter:description"
+      content="Experience the elegance of a stunning calculator app website, crafted with React, offering a seamless and visually captivating user interface for effortless mathematical calculations"
+    />
+    <meta
+      property="twitter:image"
+      content="https://github.com/natainditama/calcway/raw/main/design/desktop-design-theme-2.jpg"
+    />
 
     <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap"
-      rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root">
       <noscript>You need to enable JavaScript to run this app</noscript>
+      <h1>Calcway</h1>
+      <p>
+        Welcome to Calcway, your ultimate destination for a stunning calculator
+        app experience built with React. Here at Calcway, we pride ourselves on
+        delivering not just a functional calculator, but an elegant and seamless
+        user interface that makes mathematical calculations a breeze.
+      </p>
+      <p style="visibility: hidden; display: none; opacity: 0">
+        With Calcway, gone are the days of clunky, outdated calculator
+        interfaces. Our app is meticulously crafted with React, a powerful and
+        versatile JavaScript library, ensuring optimal performance and
+        responsiveness across all devices. Whether you're on a desktop, tablet,
+        or smartphone, Calcway adapts flawlessly to your screen size, providing
+        a consistent and enjoyable user experience.
+      </p>
+      <p style="visibility: hidden; display: none; opacity: 0">
+        What sets Calcway apart is not just its technical prowess, but its
+        dedication to design excellence. Our team has poured countless hours
+        into refining every aspect of the user interface, from the layout to the
+        color scheme to the typography. The result? A visually captivating
+        calculator app that not only gets the job done but does so with style.
+      </p>
+      <p style="visibility: hidden; display: none; opacity: 0">
+        But Calcway isn't just about looks—it's about functionality too. Behind
+        the sleek exterior lies a powerful engine capable of handling a wide
+        range of mathematical calculations. Whether you're crunching numbers for
+        simple arithmetic or tackling more complex equations, Calcway has you
+        covered. Plus, with its intuitive interface, even the most advanced
+        calculations feel effortless.
+      </p>
+      <p style="visibility: hidden; display: none; opacity: 0">
+        Calcway isn't just for professionals either. It's designed with everyone
+        in mind, from students to professionals to anyone who needs to do quick
+        calculations on the go. Whether you're balancing your budget,
+        calculating tips at a restaurant, or solving math problems for homework,
+        Calcway is the perfect companion.
+      </p>
+      <p style="visibility: hidden; display: none; opacity: 0">
+        So why settle for a basic calculator when you can have Calcway?
+        Experience the elegance and efficiency of Calcway today and
+        revolutionize the way you crunch numbers. Join the thousands of
+        satisfied users who have made Calcway their go-to calculator app. Try it
+        now and see the difference for yourself!
+      </p>
     </div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/screenshot.png b/screenshot.png
diff --git a/src/components/Keypad/Keypad.tsx b/src/components/Keypad/Keypad.tsx
@@ -8,7 +8,7 @@ export type KeypadProps = {
   onKeyDown: (event: KeyboardEvent) => void;
 };
 
-function Keypad({ updateCalc, deleteCalc, clear, calculate}: KeypadProps) {
+function Keypad({ updateCalc, deleteCalc, clear, calculate }: KeypadProps) {
   return (
     <section className="keypad">
       <button
@@ -68,7 +68,12 @@ function Keypad({ updateCalc, deleteCalc, clear, calculate}: KeypadProps) {
       <button className="reset" id="reset-key" value="reset" onClick={clear}>
         RESET
       </button>
-      <button className="equals-key" id="equals-key" value="=" onClick={calculate}>
+      <button
+        className="equals-key"
+        id="equals-key"
+        value="="
+        onClick={calculate}
+      >
         =
       </button>
     </section>

diff --git a/src/components/Screen/Screen.tsx b/src/components/Screen/Screen.tsx
@@ -4,10 +4,12 @@ export type ScreenProps = {
   calc: string;
 };
 
-const Screen = forwardRef(({ calc }: ScreenProps, ref: ForwardedRef<HTMLParagraphElement>) => (
-  <section className="screen">
-    <p ref={ref}>{calc ?? "0"}</p>
-  </section>
-));
+const Screen = forwardRef(
+  ({ calc }: ScreenProps, ref: ForwardedRef<HTMLParagraphElement>) => (
+    <section className="screen">
+      <p ref={ref}>{calc ?? "0"}</p>
+    </section>
+  ),
+);
 
 export default Screen;
diff --git a/src/components/Seo/DefaultSeo.tsx b/src/components/Seo/DefaultSeo.tsx
@@ -3,10 +3,10 @@ import Helmet from "react-helmet";
 import seoDefaults from "@/utils/constants/seo";
 
 function DefaultSeo() {
-  const baseUrl = import.meta.env.BASE_URL;
+  const baseUrl = import.meta.env.BASE_URL || "";
 
   return (
-    <Helmet base={baseUrl} {...seoDefaults}>
+    <Helmet base={{ href: baseUrl }} {...seoDefaults}>
       <link rel="canonical" href={baseUrl} />
     </Helmet>
   );

diff --git a/src/components/ThemeButtons/ThemeButtons.tsx b/src/components/ThemeButtons/ThemeButtons.tsx
@@ -22,7 +22,11 @@ export default function ThemeButtons({ handleThemeChange }: ThemeButtonsProps) {
       <section className="theme-number">
         {themes.map(function (theme: ThemeProps, index: number) {
           return (
-            <label htmlFor={theme.name} className="theme-number" key={theme.name}>
+            <label
+              htmlFor={theme.name}
+              className="theme-number"
+              key={theme.name}
+            >
               {index + 1}
             </label>
           );

diff --git a/src/utils/constants/seo.tsx → src/utils/constants/seo.ts b/src/utils/constants/seo.tsx → src/utils/constants/seo.ts
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,17 +1,15 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
-import { VitePWA } from 'vite-plugin-pwa';
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "",
-  plugins: [
-    react(),
-     VitePWA({ registerType: 'autoUpdate' })
-  ],
+  appType: "mpa",
+  plugins: [react(), VitePWA({ registerType: "autoUpdate" })],
   build: {
-    manifest: true
+    manifest: true,
   },
   resolve: {
     alias: [
@@ -21,4 +19,11 @@ export default defineConfig({
       },
     ],
   },
+  server: {
+    headers: {
+      "x-frame-options": "SAMEORIGIN",
+      "x-xss-protection": "1; mode=block",
+      "cache-control": "max-age=31536000,immutable",
+    },
+  },
 });