Implement redesign (#524)

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>

Author: Mrtenz

gatsby-config.ts

@@ -36,7 +36,7 @@ const config: GatsbyConfig = {
         name: 'MetaMask Snaps Directory',
         start_url: '/',
         display: 'standalone',
-        icon: 'src/assets/favicon.svg',
+        icon: 'src/assets/fox.svg',
         background_color: '#ffffff',
         theme_color: '#ffffff',
         /* eslint-enable @typescript-eslint/naming-convention */

gatsby-node.ts

@@ -29,10 +29,10 @@ import { NormalModuleReplacementPlugin } from 'webpack';
 import { getLatestSnapVersion } from './src/utils';
 import type { Fields } from './src/utils';
 import {
-  generateCategoryImage,
-  generateInstalledImage,
-  generateSnapImage,
-} from './src/utils/images';
+  createCategoryImage,
+  createInstalledImage,
+  createSnapImage,
+} from './src/utils/seo';
 
 type Description = {
   description: string;
@@ -351,12 +351,12 @@ export const sourceNodes: GatsbyNode[`sourceNodes`] = async ({
 
   const snaps = getNodesByType('Snap') as unknown as Fields<
     Queries.Snap,
-    'icon' | 'lastUpdated'
+    'name' | 'icon' | 'lastUpdated'
   >[];
 
   // The SEO banner that is used on the main `/installed` page. This is
   // statically queried by the name.
-  const installedImage = await generateInstalledImage(snaps);
+  const installedImage = await createInstalledImage(snaps);
   await createFileNodeFromBuffer({
     buffer: installedImage,
     name: 'main-installed-banner',
@@ -369,7 +369,7 @@ export const sourceNodes: GatsbyNode[`sourceNodes`] = async ({
 
   // The SEO banner that is used on the main `/latest` page. This is
   // statically queried by the name.
-  const latestImage = await generateCategoryImage(
+  const latestImage = await createCategoryImage(
     [...snaps].sort((a, b) => b.lastUpdated - a.lastUpdated).slice(0, 6),
     6,
   );
@@ -450,7 +450,7 @@ export const onCreateNode: GatsbyNode[`onCreateNode`] = async ({
     >;
 
     const { createNode, createNodeField } = actions;
-    const banner = await generateSnapImage(
+    const banner = await createSnapImage(
       snapNode.name,
       snapNode.author?.name,
       snapNode.icon,
@@ -486,7 +486,7 @@ export const onCreateNode: GatsbyNode[`onCreateNode`] = async ({
       (snap) => snap.category === name,
     ) as unknown as Fields<Queries.Snap, keyof Queries.Snap>[];
 
-    const banner = await generateCategoryImage(snaps);
+    const banner = await createCategoryImage(snaps);
     const bannerNode = await createFileNodeFromBuffer({
       buffer: banner,
       name: 'banner',
@@ -504,7 +504,7 @@ export const onCreateNode: GatsbyNode[`onCreateNode`] = async ({
       value: bannerNode.id,
     });
 
-    const installedBanner = await generateInstalledImage(snaps);
+    const installedBanner = await createInstalledImage(snaps);
     const installedBannerNode = await createFileNodeFromBuffer({
       buffer: installedBanner,
       name: 'installed-banner',

package.json

@@ -60,7 +60,6 @@
     "@lingui/core": "^4.4.2",
     "@lingui/macro": "^4.4.2",
     "@lingui/react": "^4.4.2",
-    "@metamask/logo": "^3.1.1",
     "@metamask/providers": "^17.1.2",
     "@metamask/snaps-controllers": "^9.17.0",
     "@metamask/snaps-sdk": "^6.15.0",