diff --git a/components/Logo.tsx b/components/Logo.tsx
index c040d30..2b761a1 100644
--- a/components/Logo.tsx
+++ b/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" }> = ({
- {isBeta ? (
-
- Snippng
+
+ Snippng
+ {isBeta ? (
Beta
-
- ) : null}
+ ) : null}
+
);
};
diff --git a/components/SigninButton.tsx b/components/SigninButton.tsx
index 92d120a..03a25c0 100644
--- a/components/SigninButton.tsx
+++ b/components/SigninButton.tsx
@@ -10,7 +10,7 @@ const SigninButton = () => {
<>
);
diff --git a/components/editor/SnippngCodeArea.tsx b/components/editor/SnippngCodeArea.tsx
index 7b41fb2..951d336 100644
--- a/components/editor/SnippngCodeArea.tsx
+++ b/components/editor/SnippngCodeArea.tsx
@@ -242,14 +242,14 @@ const SnippngCodeArea = () => {
{uid ? (
{" "}
- Note: clicking{" "}
-
- Fork snippet
- {" "}
- button will create a copy of the current snippet in your profile
- with exact same configuration of{" "}
- theme, language, code and other settings that are
- visible to you right now
+ Note: When you click the{" "}
+
+ Fork snippet
+ {" "}
+ button, a copy of the current snippet will be created in your
+ profile with the same settings. As a result, if
+ you change something and then forked, the snippet will include the
+ changes you made.
) : null}
diff --git a/components/editor/SnippngControlHeader.tsx b/components/editor/SnippngControlHeader.tsx
index cd1cb66..e33cbde 100644
--- a/components/editor/SnippngControlHeader.tsx
+++ b/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";
diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
index c2251c0..9acc7c9 100644
--- a/context/AuthContext.tsx
+++ b/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(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 }> = ({
- {children}
+ {signingIn ? (
+
+
+
+ ) : (
+ children
+ )}
);
};
diff --git a/layout/Layout.tsx b/layout/Layout.tsx
index 026679b..436cc9b 100644
--- a/layout/Layout.tsx
+++ b/layout/Layout.tsx
@@ -11,8 +11,8 @@ interface Props extends React.HTMLAttributes {
}
const Layout: React.FC = ({
- 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
}) => {
diff --git a/package.json b/package.json
index 75b11b5..8312aae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "snippng",
- "version": "1.0.0-beta",
+ "version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 074d8aa..1bca189 100644
--- a/pages/_document.tsx
+++ b/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'
diff --git a/pages/_offline.tsx b/pages/_offline.tsx
index a9fbfed..c6acbe0 100644
--- a/pages/_offline.tsx
+++ b/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();
diff --git a/pages/index.tsx b/pages/index.tsx
index 400ca34..506a599 100644
--- a/pages/index.tsx
+++ b/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 (
@@ -43,7 +62,7 @@ export default function Home() {
-
+
@@ -81,9 +100,10 @@ export default function Home() {
Snippng
- 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.