features/seo-improve (#10)

* added cover and default meta tags

* update default meta tags

* added custom next seo to relevant pages

* refactor canonical urls with UrlService

* fix back route

deploy-web/README.md

@@ -1,4 +1,4 @@
-# Cloudmos Deploy
+# Cloudmos
 
 - [How to run](#how-to-run)
 - [Environment Variables](#environment-variables)

deploy-web/src/components/deploymentDetail/DeploymentDetailTopBar.tsx

@@ -18,6 +18,7 @@ import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { DeploymentDto } from "@src/types/deployment";
+import { usePreviousRoute } from "@src/hooks/usePreviousRoute";
 
 const useStyles = makeStyles()(theme => ({
   title: {
@@ -57,9 +58,14 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
   const [isDepositingDeployment, setIsDepositingDeployment] = useState(false);
   const storageDeploymentData = getDeploymentData(deployment?.dseq);
   const deploymentName = getDeploymentName(deployment?.dseq);
+  const previousRoute = usePreviousRoute();
 
   function handleBackClick() {
-    router.back();
+    if (previousRoute !== router.asPath) {
+      router.back();
+    } else {
+      router.push(UrlService.deploymentList());
+    }
   }
 
   const onCloseDeployment = async () => {

deploy-web/src/components/deploymentDetail/DeploymentLeaseShell.tsx

@@ -113,7 +113,7 @@ export const DeploymentLeaseShell: React.FunctionComponent<Props> = ({ leases })
         if (!isConnectionEstablished) {
           // Welcome message
           terminalRef.current.reset();
-          terminalRef.current.write("Welcome to Cloudmos Deploy Shell! ☁️");
+          terminalRef.current.write("Welcome to Cloudmos Shell! ☁️");
           terminalRef.current.write("\n\r");
           terminalRef.current.write("You're now connected just as ssh to your docker instance.");
           terminalRef.current.write("\n\r");
@@ -271,7 +271,7 @@ export const DeploymentLeaseShell: React.FunctionComponent<Props> = ({ leases })
               <ViewPanel stickToBottom style={{ overflow: "hidden" }}>
                 {isConnectionClosed && (
                   <Alert variant="standard" severity="warning" sx={{ borderRadius: 0 }}>
-                    The connection to your Cloudmos Deploy Shell was lost.
+                    The connection to your Cloudmos Shell was lost.
                   </Alert>
                 )}
                 <XTerm ref={terminalRef} onKey={onTerminalKey} onTerminalPaste={onTerminalPaste} />

deploy-web/src/components/layout/Footer.tsx

@@ -168,11 +168,11 @@ export const Footer: React.FunctionComponent<IFooterProps> = ({}) => {
                 <TwitterIcon className={classes.socialIcon} />
               </a>
             </li>
-            {/* <li>
+            <li>
               <a href="https://github.com/akash-network/cloudmos" target="_blank" className={classes.socialLink}>
                 <GitHubIcon className={classes.socialIcon} />
               </a>
-            </li> */}
+            </li>
           </ul>
 
           <Box sx={{ margin: { xs: ".5rem 0 1rem", sm: 0 }, display: "flex", alignItems: "center" }}>

deploy-web/src/components/layout/Layout.tsx

@@ -163,7 +163,7 @@ const Loading: React.FunctionComponent<{ text: string }> = ({ text }) => {
   return (
     <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", width: "100%", flexDirection: "column", padding: "3rem 0" }}>
       <Box sx={{ paddingBottom: "1rem" }}>
-        <CircularProgress size="3rem" color="secondary" />
+        <CircularProgress size="5rem" color="secondary" />
       </Box>
       <div>
         <Typography variant="h5">{text}</Typography>

deploy-web/src/components/layout/PageHead.tsx

@@ -16,19 +16,29 @@ const PageHead: React.FunctionComponent<Props> = ({}) => {
       </Head>
 
       <DefaultSeo
+        title="Cloudmos"
         titleTemplate="%s | Cloudmos"
-        description="Cloudmos is the #1 platform to deploy docker containers on the Akash Network, a decentralized cloud compute marketplace. Explore, deploy and track all in one place!"
-        // openGraph={{
-        //   type: "website",
-        //   locale: "en_IE",
-        //   url: "https://www.url.ie/",
-        //   site_name: "SiteName"
-        // }}
-        // twitter={{
-        //   handle: "@handle",
-        //   site: "@site",
-        //   cardType: "summary_large_image"
-        // }}
+        description="Cloudmos is the #1 platform to deploy docker containers on the Akash Network, a decentralized super cloud compute marketplace. Explore, deploy and track all in one place!"
+        openGraph={{
+          type: "website",
+          locale: "en_US",
+          url: "https://cloudmos.io/",
+          site_name: "Cloudmos",
+          description: "Deploy docker containers on the decentralized supercloud Akash Network.",
+          images: [
+            {
+              url: 'https://www.cloudmos.io/cloudmos-cover.png',
+              width: 1600,
+              height: 529,
+              alt: 'Cloudmos Cover Image',
+            }
+          ],
+        }}
+        twitter={{
+          handle: "@cloudmosio",
+          site: "@cloudmosio",
+          cardType: "summary_large_image"
+        }}
       />
     </>
   );

deploy-web/src/components/layout/Sidebar.tsx

@@ -19,6 +19,7 @@ import { LinkTo } from "../shared/LinkTo";
 import YouTubeIcon from "@mui/icons-material/YouTube";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import LaunchIcon from "@mui/icons-material/Launch";
+import GitHubIcon from "@mui/icons-material/GitHub";
 import { DiscordIcon } from "../shared/icons";
 import { NodeStatusBar } from "./NodeStatusBar";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
@@ -280,11 +281,11 @@ export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDr
                     <TwitterIcon className={classes.socialIcon} />
                   </LinkTo>
                 </li>
-                {/* <li>
+                <li>
                   <LinkTo onClick={() => window.open("https://github.com/akash-network/cloudmos", "_blank")} className={classes.socialLinks}>
                     <GitHubIcon className={classes.socialIcon} />
                   </LinkTo>
-                </li> */}
+                </li>
               </ul>
 
               {version}

deploy-web/src/components/layout/WelcomeModal.tsx

@@ -23,7 +23,7 @@ export const WelcomeModal = ({ open, onClose }) => {
         </Typography>
         <Paper elevation={2} sx={{ padding: "1rem", margin: "1rem 0 0", backgroundColor: theme.palette.mode === "dark" ? "" : theme.palette.grey[200] }}>
           <Typography variant="body2" color="textSecondary">
-            Thank you for choosing Cloudmos Deploy!
+            Thank you for choosing Cloudmos!
           </Typography>
           <br />
           <Typography variant="body2" color="textSecondary">
@@ -43,7 +43,7 @@ export const WelcomeModal = ({ open, onClose }) => {
             discovered yet. As with any BETA product, use at your own discretion.
             <br />
             <br />
-            We appreciate your understanding and support as we work to make Cloudmos Deploy even better. If you encounter any problems or have suggestions for
+            We appreciate your understanding and support as we work to make Cloudmos even better. If you encounter any problems or have suggestions for
             improvement, please don't hesitate to reach out to us. We're here to help!
           </Typography>
         </Paper>

deploy-web/src/components/newDeploymentWizard/CreateLease.tsx

@@ -34,14 +34,15 @@ import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils";
 import { Snackbar } from "../shared/Snackbar";
 import { deploymentData } from "@src/utils/deploymentData";
 import { UrlService } from "@src/utils/urlUtils";
-import { NextSeo } from "next-seo";
 import { LinearLoadingSkeleton } from "../shared/LinearLoadingSkeleton";
 import ViewPanel from "../shared/ViewPanel";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { CustomTooltip } from "../shared/CustomTooltip";
 import { BidDto } from "@src/types/deployment";
 import { BidCountdownTimer } from "./BidCountdownTimer";
+import { CustomNextSeo } from "../shared/CustomNextSeo";
+import { RouteStepKeys } from "@src/utils/constants";
 
 const yaml = require("js-yaml");
 
@@ -269,7 +270,10 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
 
   return (
     <>
-      <NextSeo title="Create Deployment - Create Lease" />
+      <CustomNextSeo
+        title="Create Deployment - Create Lease"
+        url={`https://deploy.cloudmos.io${UrlService.newDeployment({ step: RouteStepKeys.createLeases })}`}
+      />
 
       <Box>
         {!isLoadingBids && bids.length > 0 && !allClosed && (

deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx

@@ -9,7 +9,7 @@ import { useRouter } from "next/router";
 import { Timer } from "@src/utils/timer";
 import { defaultInitialDeposit, RouteStepKeys } from "@src/utils/constants";
 import { deploymentData } from "@src/utils/deploymentData";
-import { NextSeo } from "next-seo";
+import { CustomNextSeo } from "../shared/CustomNextSeo";
 import { LinkTo } from "../shared/LinkTo";
 import { DynamicMonacoEditor } from "../shared/DynamicMonacoEditor";
 import ViewPanel from "../shared/ViewPanel";
@@ -221,7 +221,10 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
 
   return (
     <>
-      <NextSeo title="Create Deployment - Manifest Edit" />
+      <CustomNextSeo
+        title="Create Deployment - Manifest Edit"
+        url={`https://deploy.cloudmos.io${UrlService.newDeployment({ step: RouteStepKeys.editDeployment })}`}
+      />
 
       <Box
         sx={{

deploy-web/src/components/newDeploymentWizard/TemplateList.tsx

@@ -7,15 +7,15 @@ import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import { makeStyles } from "tss-react/mui";
 import { useRouter } from "next/router";
 import { UrlService } from "@src/utils/urlUtils";
-import { NextSeo } from "next-seo";
 import { RouteStepKeys } from "@src/utils/constants";
 import { useTemplates } from "@src/context/TemplatesProvider";
 import { TemplateBox } from "../templates/TemplateBox";
 import { DeployOptionBox } from "./DeployOptionBox";
 import Link from "next/link";
 import { BuildCircleTwoTone } from "@mui/icons-material";
 import { TemplateCreation } from "@src/types";
-import { emptyTemplate, helloWorldTemplate, sdlBuilderTemplate, ubuntuTemplate } from "@src/utils/templates";
+import { emptyTemplate, helloWorldTemplate, ubuntuTemplate } from "@src/utils/templates";
+import { CustomNextSeo } from "../shared/CustomNextSeo";
 
 const useStyles = makeStyles()(theme => ({}));
 
@@ -83,7 +83,10 @@ export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTempla
 
   return (
     <>
-      <NextSeo title="Create Deployment - Template List" />
+      <CustomNextSeo
+        title="Create Deployment - Template List"
+        url={`https://deploy.cloudmos.io${UrlService.newDeployment({ step: RouteStepKeys.chooseTemplate })}`}
+      />
 
       <Typography variant="h1" sx={{ marginBottom: "2rem", fontSize: "2rem", marginTop: "2rem" }}>
         <strong>What do you want to deploy?</strong>

deploy-web/src/components/providers/ProviderDetailLayout.tsx

@@ -14,6 +14,7 @@ import { ProviderSummary } from "./ProviderSummary";
 import { ProviderDetail } from "@src/types/provider";
 import Link from "next/link";
 import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { usePreviousRoute } from "@src/hooks/usePreviousRoute";
 
 export enum ProviderDetailTabs {
   DETAIL = 1,
@@ -50,6 +51,7 @@ const ProviderDetailLayout: React.FunctionComponent<Props> = ({ children, page,
   const { classes } = useStyles();
   const router = useRouter();
   const { address: walletAddress } = useKeplr();
+  const previousRoute = usePreviousRoute();
 
   const handleTabChange = (event: React.SyntheticEvent, newValue: ProviderDetailTabs) => {
     switch (newValue) {
@@ -67,7 +69,11 @@ const ProviderDetailLayout: React.FunctionComponent<Props> = ({ children, page,
   };
 
   function handleBackClick() {
-    router.back();
+    if (previousRoute !== router.asPath) {
+      router.back();
+    } else {
+      router.push(UrlService.providers());
+    }
   }
 
   return (

deploy-web/src/components/shared/CustomNextSeo.tsx

@@ -0,0 +1,26 @@
+import { NextSeo } from "next-seo";
+import { OpenGraphMedia } from "next-seo/lib/types";
+import React from "react";
+
+type Props = {
+  title: string;
+  description?: string;
+  url: string;
+  images?: OpenGraphMedia[];
+};
+
+export const CustomNextSeo: React.FunctionComponent<Props> = ({ title, description = "", url, images }) => {
+  return (
+    <NextSeo
+      title={title}
+      description={description}
+      canonical={url}
+      openGraph={{
+        url,
+        title,
+        description,
+        images
+      }}
+    />
+  );
+};

deploy-web/src/context/SettingsProvider/SettingsProviderContext.tsx

@@ -310,18 +310,6 @@ export const SettingsProvider = ({ children }) => {
       }}
     >
       {children}
-      {/* {isSettingsInit ? (
-        children
-      ) : (
-        <Box display="flex" alignItems="center" justifyContent="center" height="100%" width="100%" flexDirection="column">
-          <Box paddingBottom="1rem">
-            <CircularProgress size="3rem" color="secondary" />
-          </Box>
-          <div>
-            <Typography variant="h5">Loading settings...</Typography>
-          </div>
-        </Box>
-      )} */}
     </SettingsProviderContext.Provider>
   );
 };

deploy-web/src/hooks/usePreviousRoute.ts

@@ -0,0 +1,14 @@
+import { useRouter } from "next/router";
+import { useEffect, useRef } from "react";
+
+export const usePreviousRoute = () => {
+  const { asPath } = useRouter();
+
+  const ref = useRef<string | null>(null);
+
+  useEffect(() => {
+    ref.current = asPath;
+  }, [asPath]);
+
+  return ref.current;
+};

deploy-web/src/hooks/useWalletBalance.ts

@@ -56,7 +56,6 @@ export const useDenomData = (denom: string) => {
         default:
           break;
       }
-      console.log(walletBalances, denom, depositData);
 
       setDepositData(depositData);
     }

deploy-web/src/pages/_app.tsx

@@ -15,7 +15,6 @@ import { KeplrWalletProvider } from "@src/context/KeplrWalletProvider";
 import { PricingProvider } from "@src/context/PricingProvider/PricingProvider";
 import Head from "next/head";
 import { BackgroundTaskProvider } from "@src/context/BackgroundTaskProvider";
-import { useMediaQuery } from "@mui/material";
 import { SettingsProvider } from "@src/context/SettingsProvider";
 import { CertificateProvider } from "@src/context/CertificateProvider";
 import { AkashProvider } from "@src/context/AkashProvider";
@@ -26,6 +25,7 @@ import { GoogleAnalytics } from "nextjs-google-analytics";
 import { UserProvider } from "@auth0/nextjs-auth0/client";
 import { AddressBookProvider } from "@src/context/AddressBookProvider";
 import { Provider } from "jotai";
+import { usePreviousRoute } from "@src/hooks/usePreviousRoute";
 
 interface Props extends AppProps {
   emotionCache?: EmotionCache;
@@ -44,7 +44,7 @@ Router.events.on("routeChangeError", () => NProgress.done());
 const clientSideEmotionCache = createEmotionCache();
 
 const App: React.FunctionComponent<Props> = ({ Component, pageProps, emotionCache = clientSideEmotionCache }) => {
-  const isMobile = useMediaQuery("(max-width:600px)");
+  usePreviousRoute();
 
   useEffect(() => {
     // Remove the server-side injected CSS.
@@ -63,7 +63,7 @@ const App: React.FunctionComponent<Props> = ({ Component, pageProps, emotionCach
   return (
     <>
       <Head>
-        <title>Cloudmos Deploy</title>
+        <title>Cloudmos</title>
       </Head>
 
       <CacheProvider value={emotionCache}>

deploy-web/src/pages/addresses/[address]/deployments.tsx

@@ -3,7 +3,6 @@ import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import { useTheme } from "@mui/material/styles";
 import Layout from "@src/components/layout/Layout";
-import { NextSeo } from "next-seo";
 import {
   CircularProgress,
   FormControl,
@@ -23,6 +22,8 @@ import { useAddressDeployments } from "@src/queries/useTransactionsQuery";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
 import AddressLayout from "@src/components/address/AddressLayout";
 import { DeploymentRow } from "@src/components/deployment/DeploymentRow";
+import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 type Props = {
   address: string;
@@ -58,7 +59,7 @@ const AddressDeploymentsPage: React.FunctionComponent<Props> = ({ address }) =>
 
   return (
     <Layout>
-      <NextSeo title={`Account ${address} deployments`} />
+      <CustomNextSeo title={`Account ${address} deployments`} url={`https://deploy.cloudmos.io${UrlService.addressDeployments(address)}`} />
 
       <AddressLayout page="deployments" address={address}>
         <Box sx={{ mt: "1rem" }}>