Merge pull request #18 from wajeshubham/dev

Code refactoring:

Author: wajeshubham

components/Logo.tsx

@@ -2,7 +2,7 @@ import { clsx } from "@/utils";
 import { CommandLineIcon } from "@heroicons/react/24/outline";
 import React from "react";
 
-const isBeta = true;
+const isBeta = false;
 
 const Logo: React.FC<{ size?: "xs" | "sm" | "xl" | "2xl" }> = ({
   size = "xl",
@@ -47,14 +47,14 @@ const Logo: React.FC<{ size?: "xs" | "sm" | "xl" | "2xl" }> = ({
       <CommandLineIcon
         className={clsx("inset-0 mr-2", getIconClassesBySize() || "")}
       />
-      {isBeta ? (
-        <span className="inline-flex items-center">
-          Snippng
+      <span className="inline-flex items-center">
+        Snippng
+        {isBeta ? (
           <span className="inline-flex items-center ml-1.5 rounded-sm dark:bg-indigo-600 bg-indigo-100 h-[15px] py-1.5 px-1 text-[10px] dark:text-indigo-100 text-indigo-600 border-[1px] border-indigo-600">
             Beta
           </span>
-        </span>
-      ) : null}
+        ) : null}
+      </span>
     </h1>
   );
 };

components/SigninButton.tsx

@@ -10,7 +10,7 @@ const SigninButton = () => {
     <>
       <Button data-testid="signin-btn" onClick={loginWithGoogle}>
         <GoogleIcon className="inline-flex mr-2" />
-        Signin
+        Sign in/up
       </Button>
     </>
   );

components/editor/SnippngCodeArea.tsx

@@ -242,14 +242,14 @@ const SnippngCodeArea = () => {
           {uid ? (
             <small className="dark:text-zinc-300 text-left text-zinc-600 py-2 inline-block">
               <InformationCircleIcon className="w-4 h-4 inline-block mr-1 mb-1" />{" "}
-              <strong>Note:</strong> clicking{" "}
-              <em>
-                <strong>Fork snippet</strong>
-              </em>{" "}
-              button will create a copy of the current snippet in your profile
-              with exact same configuration of{" "}
-              <strong>theme, language, code and other settings</strong> that are
-              visible to you right now
+              <strong>Note:</strong> When you click the{" "}
+              <strong>
+                <em>Fork snippet</em>
+              </strong>{" "}
+              button, a copy of the current snippet will be created in your
+              profile <strong>with the same settings</strong>. As a result, if
+              you change something and then forked, the snippet will include the
+              changes you made.
             </small>
           ) : null}
         </NoSSRWrapper>

components/editor/SnippngControlHeader.tsx

@@ -14,7 +14,7 @@ import {
   SparklesIcon,
 } from "@heroicons/react/24/outline";
 import * as htmlToImage from "html-to-image";
-import { Fragment, useState } from "react";
+import { Fragment } from "react";
 import Button from "../form/Button";
 import Checkbox from "../form/Checkbox";
 import Range from "../form/Range";

context/AuthContext.tsx

@@ -9,6 +9,8 @@ import {
 } from "firebase/auth";
 import { auth } from "@/config/firebase";
 import { useToast } from "./ToastContext";
+import Layout from "@/layout/Layout";
+import { Loader } from "@/components";
 
 const GithubProvider = new GithubAuthProvider();
 const GoogleProvider = new GoogleAuthProvider();
@@ -40,6 +42,7 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const { addToast } = useToast();
+  const [signingIn, setSigningIn] = useState(false);
   const [user, setUser] = useState<User | null>(null);
 
   /**
@@ -66,6 +69,7 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const loginWithGoogle = async () => {
     if (!auth) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
+    setSigningIn(true);
     try {
       await signInWithPopup(auth, GoogleProvider);
       addToast({
@@ -74,6 +78,12 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
       });
     } catch (error) {
       console.log("Error while logging in", error);
+      addToast({
+        message: "Error occurred while signing in!",
+        type: "error",
+      });
+    } finally {
+      setSigningIn(false);
     }
   };
 
@@ -100,7 +110,13 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
     <AuthContext.Provider
       value={{ user, loginWithGithub, loginWithGoogle, logout }}
     >
-      {children}
+      {signingIn ? (
+        <Layout>
+          <Loader />
+        </Layout>
+      ) : (
+        children
+      )}
     </AuthContext.Provider>
   );
 };

layout/Layout.tsx

@@ -11,8 +11,8 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Layout: React.FC<Props> = ({
-  title = "Snippng | snippets to png",
-  description = "Create and share beautiful images of your source code.",
+  title = "Snippng | code snippets to image",
+  description = "Write, customize and download gorgeous images of your code snippet.",
   className,
   ...props
 }) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "snippng",
-  "version": "1.0.0-beta",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/_document.tsx

@@ -1,12 +1,11 @@
-import { Html, Head, Main, NextScript } from "next/document";
-import Script from "next/script";
+import { Head, Html, Main, NextScript } from "next/document";
 
 const modeScript = `
   let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 
   updateMode()
   darkModeMediaQuery.addEventListener('change', updateModeWithoutTransitions)
-  window.addEventListener('storage', updateModeWithoutTransitions)
+  window.addEventListener('storage̦', updateModeWithoutTransitions)
 
   function updateMode() {
     let isDarkMode = window.localStorage.isDarkMode === 'true'

pages/_offline.tsx

@@ -2,7 +2,6 @@ import { ErrorText } from "@/components";
 import Layout from "@/layout/Layout";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
-import React from "react";
 
 const OfflinePage = () => {
   const router = useRouter();

pages/index.tsx

@@ -3,8 +3,12 @@ import GithubIcon from "@/components/icons/GithubIcon";
 import Layout from "@/layout/Layout";
 import { LANGUAGES, THEMES } from "@/lib/constants";
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 export default function Home() {
+  const router = useRouter();
+
   const focusOnGenerate = () => {
     let codeArea = document.getElementById("snippng-code-area");
     if (codeArea) {
@@ -13,6 +17,21 @@ export default function Home() {
       });
     }
   };
+
+  useEffect(() => {
+    if (!router.isReady) return;
+    let timer: NodeJS.Timeout;
+    let goToEditor = router.asPath.split("#").includes("snippng-code-area");
+    if (goToEditor) {
+      timer = setTimeout(() => {
+        focusOnGenerate();
+      }, 200);
+    }
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [router.isReady]);
+
   return (
     <Layout>
       <div data-testid="landing-container" className="bg-transparent">
@@ -43,7 +62,7 @@ export default function Home() {
           </svg>
         </div>
         <div className="relative isolate overflow-hidden">
-          <div className="mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:py-20">
+          <div className="mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:py-12">
             <div className="lg:pt-4">
               <div className="mx-auto max-w-2xl">
                 <div className="max-w-lg">
@@ -81,9 +100,10 @@ export default function Home() {
                     Snippng
                   </h1>
                   <p className="mt-6 md:text-lg text-sm dark:text-zinc-300 text-zinc-600">
-                    Create and share beautiful images of your source code. Start
-                    typing or paste a code snippet into the text area to get
-                    started.
+                    Write, customize and download gorgeous images of your code
+                    snippet. Beautifully designed application that helps you
+                    generate beautiful and customizable images of your code
+                    snippets.
                   </p>
                   <div className="mt-10 flex md:flex-row flex-col md:items-center items-start gap-6 ml-1">
                     <Button