feat(web): configure seo

tericcabrel · tericcabrel · Jun 14, 2022 · Jun 11, 2022 · Jun 11, 2022 · Jun 11, 2022
commit 9155ff0a498bb920d48f3f40561c5a9b479a6226
diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -1,3 +1,4 @@
 APP_ENV=development
 NEXT_PUBLIC_GITHUB_CLIENT_ID=<github_client_id_here>
 NEXT_PUBLIC_SERVER_URL=https://localhost:7501/graphql
+NEXT_PUBLIC_APP_URL=https://localhost:7500
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -17,6 +17,7 @@
  "classnames": "^2.3.1",
  "graphql": "^16.3.0",
  "next": "12.1.5",
+ "next-seo": "^5.4.0",
  "react": "17.0.2",
  "react-cookie": "^4.1.1",
  "react-dom": "17.0.2"

diff --git a/apps/web/public/assets/not-found.jpg b/apps/web/public/assets/not-found.jpg
diff --git a/apps/web/public/assets/og.png b/apps/web/public/assets/og.png
diff --git a/apps/web/src/components/seo/seo.tsx b/apps/web/src/components/seo/seo.tsx
@@ -0,0 +1,47 @@
+import { DefaultSeo } from 'next-seo';
+
+const baseUrl = process.env.NEXT_PUBLIC_APP_URL;
+
+const GlobalSeo = () => {
+ const description =
+ 'Easily create and organize your code snippets. Share them with others developers around the world.';
+ const title = 'Sharingan';
+
+ return (
+ <DefaultSeo
+ title={title}
+ description={description}
+ canonical={baseUrl}
+ additionalMetaTags={[
+ { content: 'Eric Cabrel TIOGO', property: 'author' },
+ {
+ content: 'code snippets, sharing code, open-source, coding utilities, snippet tools',
+ property: 'keywords',
+ },
+ ]}
+ openGraph={{
+ description,
+ images: [
+ {
+ alt: 'Homepage image alt',
+ height: 720,
+ url: `${baseUrl}/assets/og.png`,
+ width: 1280,
+ },
+ ],
+ locale: 'en-US',
+ site_name: 'Sharingan',
+ title,
+ type: 'website',
+ url: baseUrl,
+ }}
+ twitter={{
+ cardType: 'summary_large_image',
+ handle: '@sharinganapp',
+ site: '@sharinganapp',
+ }}
+ />
+ );
+};
+
+export default GlobalSeo;
diff --git a/apps/web/src/containers/home/index.tsx b/apps/web/src/containers/home/index.tsx
@@ -1,3 +1,5 @@
+import Head from 'next/head';
+
 import FeatureSection from '@/components/home/feature-section';
 import HeroSection from '@/components/home/hero-section';
 import NewsletterSection from '@/components/home/newsletter/newsletter-section';
@@ -6,6 +8,9 @@ import PublicLayout from '@/components/layout/public/public-layout';
 const Home = () => {
  return (
  <PublicLayout>
+ <Head>
+ <title>Sharingan - Create and share your code snippets with the world</title>
+ </Head>
  <HeroSection />
  <FeatureSection />
  <NewsletterSection />

diff --git a/apps/web/src/containers/page-not-found.tsx b/apps/web/src/containers/page-not-found.tsx
@@ -0,0 +1,49 @@
+import Link from 'next/link';
+
+import Logo from '@/components/icons/logo';
+
+const PageNotFound = () => {
+ return (
+ <div className="min-h-full pt-16 pb-12 flex flex-col bg-red-500">
+ <main className="flex-grow flex flex-col justify-center max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
+ <div className="flex-shrink-0 flex justify-center">
+ <a href="/" className="inline-flex">
+ <span className="sr-only">Workflow</span>
+ <Logo />
+ </a>
+ </div>
+ <div className="py-16">
+ <div className="text-center">
+ <p className="text-sm font-semibold text-indigo-600 uppercase tracking-wide">404 error</p>
+ <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">Page not found.</h1>
+ <p className="mt-2 text-base text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
+ <div className="mt-6">
+ <Link href="/">
+ <a className="text-base font-medium text-indigo-600 hover:text-indigo-500">
+ Go back home<span aria-hidden="true"> &rarr;</span>
+ </a>
+ </Link>
+ </div>
+ </div>
+ </div>
+ </main>
+ <footer className="flex-shrink-0 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
+ <nav className="flex justify-center space-x-4">
+ <Link href="/">
+ <a className="text-sm font-medium text-gray-500 hover:text-gray-600">Contact Support</a>
+ </Link>
+ <span className="inline-block border-l border-gray-300" aria-hidden="true" />
+ <Link href="/">
+ <a className="text-sm font-medium text-gray-500 hover:text-gray-600">Status</a>
+ </Link>
+ <span className="inline-block border-l border-gray-300" aria-hidden="true" />
+ <Link href="/">
+ <a className="text-sm font-medium text-gray-500 hover:text-gray-600">Twitter</a>
+ </Link>
+ </nav>
+ </footer>
+ </div>
+ );
+};
+
+export default PageNotFound;
diff --git a/apps/web/src/pages/404.tsx b/apps/web/src/pages/404.tsx
@@ -0,0 +1,15 @@
+import { NextSeo } from 'next-seo';
+import dynamic from 'next/dynamic';
+
+const PageNotFound = dynamic(() => import('@/containers/page-not-found'));
+
+const NotFoundPage = () => {
+ return (
+ <>
+ <NextSeo title="Sharingan - Page not found" noindex />
+ <PageNotFound />
+ </>
+ );
+};
+
+export default NotFoundPage;
diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { ApolloProvider } from '@apollo/client';
 import type { AppProps } from 'next/app';
 
+import GlobalSeo from '@/components/seo/seo';
 import useApolloClient from '@/utils/apollo';
 import '@/styles/globals.css';
 
@@ -9,6 +10,7 @@ const SharinganApp = ({ Component, pageProps }: AppProps) => {
 
  return (
  <ApolloProvider client={apolloClient}>
+ <GlobalSeo />
  <Component {...pageProps} />
  </ApolloProvider>
  );

diff --git a/yarn.lock b/yarn.lock
@@ -6503,6 +6503,11 @@ [email protected]:
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
+next-seo@^5.4.0:
+ version "5.4.0"
+ resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.4.0.tgz#37a7784b30b3f70cec3fa0d77f9dde5990822d24"
+ integrity sha512-R9DhajPwJnR/lsF2hZ8cN8uqr5CVITsRrCG1AF5+ufcaybKYOvnH8sH9MaH4/hpkps3PQ9H71S7J7SPYixAYzQ==
+
 [email protected]:
  version "12.1.5"
  resolved "https://registry.yarnpkg.com/next/-/next-12.1.5.tgz#7a07687579ddce61ee519493e1c178d83abac063"