diff --git a/packages/site/gatsby-config.ts b/packages/site/gatsby-config.ts
index 8296b9f..5992176 100644
--- a/packages/site/gatsby-config.ts
+++ b/packages/site/gatsby-config.ts
@@ -1,5 +1,6 @@
import { GatsbyConfig } from 'gatsby';
import dotenv from 'dotenv';
+import { SEO_DATA } from './seo-data';
dotenv.config({
path: `.env.${process.env.NODE_ENV}`,
@@ -13,13 +14,6 @@ const config: GatsbyConfig = {
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
'gatsby-plugin-postcss',
- // {
- // resolve: 'gatsby-plugin-sri',
- // options: {
- // hash: 'sha512',
- // crossorigin: false,
- // },
- // },
{
resolve: 'gatsby-plugin-csp',
options: {
@@ -44,7 +38,7 @@ const config: GatsbyConfig = {
{
resolve: 'gatsby-plugin-manifest',
options: {
- name: 'Template Snap',
+ name: 'RSS3 Social Notifier Snap',
icon: 'src/assets/RSS3.svg',
theme_color: '#0072FF',
background_color: '#FFFFFF',
@@ -52,6 +46,7 @@ const config: GatsbyConfig = {
},
},
],
+ siteMetadata: SEO_DATA,
};
export default config;
diff --git a/packages/site/seo-data.ts b/packages/site/seo-data.ts
new file mode 100644
index 0000000..87c5d23
--- /dev/null
+++ b/packages/site/seo-data.ts
@@ -0,0 +1,44 @@
+const site =
+ process.env.NODE_ENV === 'production'
+ ? 'https://snap.rss3.io'
+ : 'http://localhost:8000';
+
+export const SEO_DATA = {
+ title: 'RSS3 Snap - The Open Information Snap',
+ description:
+ "RSS3 Snap for MetaMask offers a quick and easy way to stay on top of your frens' social activities.",
+ language: 'en-US',
+ url: site,
+ image: `${site}/images/og.png`,
+ logo: 'https://rss3.io/images/logo.svg',
+ twitter: '@rss3_',
+ website: {
+ context: 'https://schema.org',
+ type: 'WebSite',
+ name: 'RSS3',
+ url: 'https://rss3.io',
+ },
+ organization: {
+ context: 'https://schema.org',
+ type: 'Organization',
+ name: 'RSS3',
+ url: 'https://rss3.io/',
+ logo: 'https://rss3.io/images/logo.svg',
+ sameAs: ['https://twitter.com/rss3_'],
+ },
+ keywords: [
+ 'blockchain',
+ 'notifier',
+ 'RSS3 Notifier',
+ 'decentralization',
+ 'RSS3 Metamask snap',
+ 'Metamask snap',
+ 'Open Information',
+ 'Open Information Layer',
+ 'Open Web',
+ 'RSS3',
+ 'RSS3 Explorer',
+ 'web3',
+ 'web3 activities',
+ ],
+};
diff --git a/packages/site/src/components/SEO.tsx b/packages/site/src/components/SEO.tsx
new file mode 100644
index 0000000..1443f79
--- /dev/null
+++ b/packages/site/src/components/SEO.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { useSiteMetadata } from '@/hooks/use-site-metadata';
+
+export type ISEOProps = {
+ title?: string;
+ description?: string;
+ pathname?: string;
+};
+export const SEO = ({
+ title = '',
+ description = '',
+ pathname = '',
+ children,
+}: React.PropsWithChildren & ISEOProps) => {
+ const {
+ title: defaultTitle,
+ description: defaultDescription,
+ language,
+ url,
+ image,
+ logo,
+ twitter,
+ website,
+ organization,
+ keywords,
+ } = useSiteMetadata();
+
+ const seo = {
+ title: title || defaultTitle,
+ description: description || defaultDescription,
+ language,
+ url: `${url}${pathname}`,
+ image,
+ logo,
+ twitter,
+ website,
+ organization,
+ keywords,
+ };
+
+ return (
+ <>
+ {seo.title}
+
+
+
+ {/* Twitter Card */}
+
+
+
+
+
+
+
+
+ {/* Open Graph */}
+
+
+
+
+ {/** Icons */}
+
+
+
+
+ {/** Other */}
+
+
+
+ {/** ld json */}
+
+
+
+ {children}
+
+ );
+};
diff --git a/packages/site/src/hooks/use-site-metadata.ts b/packages/site/src/hooks/use-site-metadata.ts
new file mode 100644
index 0000000..6e79a6b
--- /dev/null
+++ b/packages/site/src/hooks/use-site-metadata.ts
@@ -0,0 +1,55 @@
+import { graphql, useStaticQuery } from 'gatsby';
+import { SEO_DATA } from '../../seo-data';
+
+export type TSEO_DATA = typeof SEO_DATA;
+export const useSiteMetadata = () => {
+ const data = useStaticQuery<{ site: { siteMetadata: TSEO_DATA } }>(graphql`
+ query {
+ site {
+ siteMetadata {
+ title
+ description
+ language
+ url
+ image
+ logo
+ twitter
+ website {
+ context
+ type
+ name
+ url
+ }
+ organization {
+ context
+ type
+ name
+ url
+ logo
+ sameAs
+ }
+ keywords
+ }
+ }
+ }
+ `);
+
+ const { website, organization } = data.site.siteMetadata;
+ return {
+ ...data.site.siteMetadata,
+ website: {
+ '@content': website.context,
+ '@type': website.type,
+ name: website.name,
+ url: website.url,
+ },
+ organization: {
+ '@content': organization.context,
+ '@type': organization.type,
+ name: organization.name,
+ url: organization.url,
+ logo: organization.logo,
+ sameAs: organization.sameAs,
+ },
+ };
+};
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
index 1e6d6c8..0606b22 100644
--- a/packages/site/src/pages/index.tsx
+++ b/packages/site/src/pages/index.tsx
@@ -1,32 +1,24 @@
import { useContext } from 'react';
import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
import { navigate } from 'gatsby';
-import { MetamaskActions, MetaMaskContext } from '../hooks';
import {
- // addOwnWalletAddress,
connectSnap,
getSnap,
isLocalSnap,
sendClearState,
- // sendGetState,
- // sendSetState,
shouldDisplayReconnectButton,
- // showAlert,
- // showAllActivities,
- // showAllMonitoredAddresses,
- // showLastUpdated,
testImage,
-} from '../utils';
+} from '@/utils';
import {
ConnectButton,
InstallFlaskButton,
ReconnectButton,
ResetButton,
-} from '../components';
-import { defaultSnapOrigin, isProduction } from '../config';
+} from '@/components';
+import { defaultSnapOrigin, isProduction } from '@/config';
+import { MetamaskActions, MetaMaskContext } from '@/hooks';
import {
Card,
- // CardContent,
CardDescription,
CardFooter,
CardHeader,
@@ -34,6 +26,7 @@ import {
} from '@/components/ui/card';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
+import { SEO } from '@/components/SEO';
const Index = () => {
const [state, dispatch] = useContext(MetaMaskContext);
@@ -253,3 +246,5 @@ const Index = () => {
};
export default Index;
+
+export const Head = () => ;
diff --git a/packages/site/static/images/og.png b/packages/site/static/images/og.png
new file mode 100644
index 0000000..ed83832
Binary files /dev/null and b/packages/site/static/images/og.png differ