feat: ✨ add next seo, custom document, and some code improvements

avneesh0612 · Mar 14, 2022 · 2e7055a · 2e7055a · vercel · Mar 14, 2022
1 parent 95d405d
commit 2e7055a
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 32 deletions.
diff --git a/web/components/Sections/Working/Card.tsx b/web/components/Sections/Working/Card.tsx
@@ -0,0 +1,28 @@
+import { FC } from "react";
+import { Box, Text } from "@chakra-ui/react";
+
+interface Props {
+  title: string;
+  desc: string;
+}
+
+const Card: FC<Props> = ({ title, desc }) => {
+  return (
+    <Box
+      py="16"
+      px="12"
+      w="80"
+      rounded="md"
+      bgColor="#010101"
+      textColor="white"
+    >
+      <Text fontSize="xl">{title}</Text>
+
+      <Text fontSize="lg" fontFamily="sen" fontWeight="400" mt="1">
+        {desc}
+      </Text>
+    </Box>
+  );
+};
+
+export default Card;
diff --git a/web/components/Sections/Working.section.tsx → web/components/Sections/Working/Index.tsx b/web/components/Sections/Working.section.tsx → web/components/Sections/Working/Index.tsx
@@ -1,6 +1,7 @@
 import { FC } from "react";
 
 import { Box, Text } from "@chakra-ui/react";
+import Card from "./Card";
 
 const Working: FC = () => {
   return (
@@ -23,7 +24,7 @@ const Working: FC = () => {
         my="16"
         fontSize="3xl"
       >
-        <Text>how it&nbsp;</Text>
+        <Text>How it&nbsp;</Text>
         <Text bgGradient="linear(to-r, #7f00ff, #e100ff)" bgClip="text">
           works
         </Text>
@@ -36,25 +37,15 @@ const Working: FC = () => {
         alignItems="center"
         gap="20"
       >
-        <Box py="16" px="12" rounded="md" bgColor="#010101" textColor="white">
-          <Text fontSize="xl">1. installation</Text>
+        <Card
+          title="1. Installation"
+          desc="You can install our extension through VSCode Marketplace"
+        />
 
-          <Text fontSize="lg" fontFamily="sen" fontWeight="400">
-            You can install our <br />
-            extension through VSCode <br />
-            Marketplace
-          </Text>
-        </Box>
-
-        <Box py="16" px="12" rounded="md" bgColor="#010101" textColor="white">
-          <Text fontSize="xl">2. usage</Text>
-
-          <Text fontSize="lg" fontFamily="sen" fontWeight="400">
-            once installed, reload your <br />
-            IDE and you&apos;re good to
-            <br /> go!
-          </Text>
-        </Box>
+        <Card
+          title="2. Usage"
+          desc="Once installed, reload your IDE and you're good to go!"
+        />
       </Box>
     </Box>
   );

diff --git a/web/components/index.ts b/web/components/index.ts
@@ -1,3 +1,3 @@
 export { default as Header } from "./Navigation/Header.component";
 export { default as Hero } from "./Sections/Hero.section";
-export { default as Working } from "./Sections/Working.section";
+export { default as Working } from "./Sections/Working/Index";
diff --git a/web/package.json b/web/package.json
@@ -17,6 +17,7 @@
     "@fontsource/syncopate": "^4.5.3",
     "framer-motion": "^6",
     "next": "12.1.0",
+    "next-seo": "^5.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-icons": "^4.3.1",

diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
@@ -12,14 +12,31 @@ import "@fontsource/syncopate/700.css";
 
 import "@fontsource/sen/400.css";
 import "@fontsource/sen/700.css";
+import { NextSeo } from "next-seo";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <>
-      <ChakraProvider theme={theme}>
-        <Component {...pageProps} />
-      </ChakraProvider>
-    </>
+    <ChakraProvider theme={theme}>
+      <NextSeo
+        title="ThirdSnips"
+        titleTemplate="ThirdSnips"
+        defaultTitle="ThirdSnips"
+        description="Stop writing thirdweb snippets! Use thirdsnips to make it all snap. All the code snippets from thirdweb portal, packed in an vscode extension."
+        canonical="https://www.avneesh.tech/"
+        openGraph={{
+          url: "https://www.avneesh.tech/",
+          title: "ThirdSnips",
+          description:
+            "Stop writing thirdweb snippets! Use thirdsnips to make it all snap. All the code snippets from thirdweb portal, packed in an vscode extension.",
+        }}
+        twitter={{
+          handle: "@avneesh0612",
+          site: "@avneesh0612",
+          cardType: "summary_large_image",
+        }}
+      />
+      <Component {...pageProps} />
+    </ChakraProvider>
   );
 }
 

diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
@@ -0,0 +1,15 @@
+import { Html, Main, NextScript, Head } from "next/document";
+
+const Document = () => {
+  return (
+    <Html lang="en">
+      <Head></Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+};
+
+export default Document;
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
@@ -10,7 +10,7 @@ const Home: NextPage = () => {
         h="100vh"
         w="100vw"
         overflowX="hidden"
-        bgImage="https://www.buildspacein.xyz/section1/background_gradient.svg"
+        bgImage="https://res.cloudinary.com/didkcszrq/image/upload/v1647222804/background_gradient_mwbieb.svg"
         backgroundSize="cover"
       >
         <Header />

diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -1,20 +1,30 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true
+    "jsx": "preserve"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -2127,6 +2127,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+next-seo@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.1.0.tgz#aa9fd6249a11bf93e6da06fa2a6bc89268936edf"
+  integrity sha512-ampuQfNTOi1x+xtRIb6CZGunIo6rQXtMo2Tyu861d5GjJFIwfOXsA4lzCa4+e2rLkyXDyVpavNNUZWa3US9ELw==
+
 next@12.1.0:
   version "12.1.0"
   resolved "https://registry.yarnpkg.com/next/-/next-12.1.0.tgz#c33d753b644be92fc58e06e5a214f143da61dd5d"