Merge pull request #239 from yocxo/srizvi/issue232

chore: optimize static files #232

apps/coco/src/app/manifest.ts

@@ -0,0 +1,23 @@
+import type { MetadataRoute } from 'next';
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'cocoGPT',
+    short_name: 'cocoGPT',
+    icons: [
+      {
+        src: '/icon3.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/icon4.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+    theme_color: '#f5c000',
+    background_color: '#f5c000',
+    display: 'standalone',
+  };
+}

apps/coco/src/config/site.ts

@@ -35,7 +35,7 @@ export const siteConfig: SiteConfig = {
     'cocoGPT is an experimental wrapper by Yo! CXO. Powered by Vercel AI and forked from their Chat repo. We added a little something something of our own. 🍌🍌',
   url: siteUrl,
   image: {
-    url: `${siteUrl}/opengraph-image.gif`,
+    url: `/opengraph-image.gif`,
     width: 1200,
     height: 630,
     alt: 'Loading screen animation with pulsing text that spells out "Loading..." with the Yo! CXO logo (a silhouette of a French Bulldog and lower case text) in the top left.',

apps/mai/src/app/manifest.ts

@@ -0,0 +1,23 @@
+import type { MetadataRoute } from 'next';
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Mai',
+    short_name: 'Mai',
+    icons: [
+      {
+        src: '/icon3.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/icon4.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+    theme_color: '#09090b',
+    background_color: '#09090b',
+    display: 'standalone',
+  };
+}

apps/mai/src/config/site.ts

@@ -11,40 +11,26 @@ interface Image {
 
 interface SiteConfig {
   company: string;
-  companyLogo: Image;
   companyUrl: string;
   description: string;
   keyword: string;
   image: Image;
   name: string;
-  logo: Image;
   url: string;
 }
 
 export const siteConfig: SiteConfig = {
   company: 'BRIL.LA, LLC.',
-  companyLogo: {
-    url: `${siteUrl}/brilla-logo.png`,
-    width: 1639,
-    height: 821,
-    alt: "A lowercased logomark spelling brilla (rhymes with see ya) in a plain color with an icon consistent of a colon and two forward slashes representing the i and l's in the name.",
-  },
   companyUrl: 'https://bril.la',
   description:
     "Mai by Yo! CXO is an exploration in generative UI interfaces with a Perplexity AI like UX. It's AI for business that helps get work done. A fork of morphic.sh.",
   image: {
-    url: `${siteUrl}/opengraph-image.gif`,
+    url: `/opengraph-image.gif`,
     width: 1200,
     height: 630,
     alt: 'Loading screen animation with pulsing text that spells out "Loading..." with an M icon in the shape of a cute dog face in the top left and the Yo! CXO logo in the top right.',
   },
   keyword: 'AI for work',
-  logo: {
-    url: `${siteUrl}/icon.png`,
-    width: 1000,
-    height: 1000,
-    alt: 'A representation of an M with a cute little nose, shaped to look like a negative spaced dog.',
-  },
   name: 'I AM MAI',
   url: siteUrl,
 };

apps/mai/src/data/screens.ts

@@ -1,67 +1,85 @@
+import type { StaticImageData } from 'next/image';
+
+import image1 from '#/images/1.jpg';
+import image2 from '#/images/2.jpg';
+import image3 from '#/images/3.jpg';
+import image4 from '#/images/4.jpg';
+import image5 from '#/images/5.jpg';
+import image6 from '#/images/6.jpg';
+import image7 from '#/images/7.jpg';
+import image8 from '#/images/8.jpg';
+import image9 from '#/images/9.jpg';
+import image10 from '#/images/10.jpg';
+import image11 from '#/images/11.jpg';
+import image12 from '#/images/12.jpg';
+import image13 from '#/images/13.jpg';
+import image16 from '#/images/16.jpg';
+import image17 from '#/images/17.jpg';
+
 export interface Screen {
   title: string;
-  thumbnail: string;
+  thumbnail: StaticImageData;
 }
 
 export const screens: Screen[] = [
   {
     title: 'Increased engagement',
-    thumbnail: '/screens/1.jpg',
+    thumbnail: image1,
   },
   {
     title: 'Time saved',
-    thumbnail: '/screens/2.jpg',
+    thumbnail: image2,
   },
   {
     title: 'Targeted messaging',
-    thumbnail: '/screens/3.jpg',
+    thumbnail: image3,
   },
   {
     title: 'Credibility built',
-    thumbnail: '/screens/4.jpg',
+    thumbnail: image4,
   },
   {
     title: 'Audiences captivated',
-    thumbnail: '/screens/5.jpg',
+    thumbnail: image5,
   },
   {
     title: 'Strategies optimized',
-    thumbnail: '/screens/6.jpg',
+    thumbnail: image6,
   },
   {
     title: 'Workflow streamlined',
-    thumbnail: '/screens/17.jpg',
+    thumbnail: image17,
   },
   {
     title: 'Conversions boosted',
-    thumbnail: '/screens/7.jpg',
+    thumbnail: image7,
   },
   {
     title: 'ROI maximized',
-    thumbnail: '/screens/8.jpg',
+    thumbnail: image8,
   },
   {
     title: 'Trends capitalized',
-    thumbnail: '/screens/9.jpg',
+    thumbnail: image9,
   },
   {
     title: 'Clients satisfied',
-    thumbnail: '/screens/10.jpg',
+    thumbnail: image10,
   },
   {
     title: 'Goals achieved',
-    thumbnail: '/screens/16.jpg',
+    thumbnail: image16,
   },
   {
     title: 'Needs met',
-    thumbnail: '/screens/11.jpg',
+    thumbnail: image11,
   },
   {
     title: 'Connections formed',
-    thumbnail: '/screens/12.jpg',
+    thumbnail: image12,
   },
   {
     title: 'Briefs nailed',
-    thumbnail: '/screens/13.jpg',
+    thumbnail: image13,
   },
 ];

apps/mai/src/types/custom.d.ts

@@ -0,0 +1,6 @@
+import type { StaticImageData } from 'next/image';
+
+declare module '#/images/*' {
+  const src: StaticImageData;
+  export default src;
+}

apps/mai/src/ui/hero-parallax.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import type { StaticImageData } from 'next/image';
+
 import React from 'react';
 import Link from 'next/link';
 
@@ -21,7 +23,7 @@ export const HeroParallax = ({
 }: {
   screens: {
     title: string;
-    thumbnail: string;
+    thumbnail: StaticImageData;
   }[];
 }) => {
   const firstRow = screens.slice(0, 5);

apps/mai/src/ui/screenshot.tsx

@@ -1,4 +1,5 @@
 import type { MotionValue } from 'framer-motion';
+import type { StaticImageData } from 'next/image';
 
 import Image from 'next/image';
 
@@ -12,7 +13,7 @@ export const Screenshot = ({
 }: {
   screen: {
     title: string;
-    thumbnail: string;
+    thumbnail: StaticImageData;
   };
   translate: MotionValue<number>;
 }) => {

apps/web/src/app/(site)/blog/page.tsx

@@ -130,27 +130,11 @@ export async function generateMetadata(): Promise<Metadata> {
       type: 'website',
       title: blogPageData.meta.title,
       description: blogPageData.meta.description,
-      images: [
-        {
-          url: siteConfig.image.url,
-          width: siteConfig.image.width,
-          height: siteConfig.image.height,
-          alt: siteConfig.image.alt,
-        },
-      ],
       url: `${SITE_URL}/blog`,
     },
     twitter: {
       title: blogPageData.meta.title,
       description: blogPageData.meta.description,
-      images: [
-        {
-          url: siteConfig.image.url,
-          width: siteConfig.image.width,
-          height: siteConfig.image.height,
-          alt: siteConfig.image.alt,
-        },
-      ],
     },
   };