use webp and lazy load images

opensaas-sh/blog/astro.config.mjs

@@ -14,7 +14,7 @@ export default defineConfig({
       description: 'Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.',
       customCss: ['./src/styles/tailwind.css'],
       logo: {
-        src: '/src/assets/logo.png',
+        src: '/src/assets/logo.webp',
         alt: 'Open SaaS',
       },
       head: [

opensaas-sh/blog/src/content/docs/start/guided-tour.md

@@ -324,7 +324,7 @@ But before you start setting up the main features, let's walk through the custom
   - [ ] Update the URL for this banner at `og:image` and `twitter:image` in `app.head` of the `main.wasp` file.
 - [ ] Make changes to your landing page, `landingPage.tsx`.
   - [ ] Customize the `navBar`, `features`, `testimonials`, and `faqs` in the `contentSections.ts` file.
-  - [ ] Change/rename the `logo.png` and main banner (`open-saas-banner.png`) in the `static` folder.
+  - [ ] Change/rename the `logo.webp` and main banner (`open-saas-banner.png`) in the `static` folder.
 - [ ] If you want to make changes to the global styles of the app, you can do so in `tailwind.config.cjs`. **Be aware that the current custom global styles defined already are mostly used in the app's Admin Dashboard!**
 
 #### Customizing the Analytics & Admin Dashboard

template/app/src/admin/layout/Sidebar.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
-import Logo from '../../client/static/logo.png';
+import Logo from '../../client/static/logo.webp';
 import SidebarLinkGroup from './SidebarLinkGroup';
 import { cn } from '../../client/cn';
 

template/app/src/client/App.tsx

@@ -3,7 +3,7 @@ import { updateCurrentUser } from 'wasp/client/operations';
 import './Main.css';
 import AppNavBar from './components/AppNavBar';
 import CookieConsentBanner from './components/cookie-consent/Banner';
-import { useMemo, useEffect, ReactNode } from 'react';
+import { useMemo, useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
 /**

template/app/src/client/Main.css

@@ -31,6 +31,7 @@
   src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 /* third-party libraries CSS */

template/app/src/client/components/AppNavBar.tsx

@@ -5,7 +5,7 @@ import { Dialog } from '@headlessui/react';
 import { BiLogIn } from 'react-icons/bi';
 import { AiFillCloseCircle } from 'react-icons/ai';
 import { HiBars3 } from 'react-icons/hi2';
-import logo from '../static/logo.png';
+import logo from '../static/logo.webp';
 import DropdownUser from '../../user/DropdownUser';
 import { UserMenuItems } from '../../user/UserMenuItems';
 import { DocsUrl, BlogUrl } from '../../shared/common';
@@ -19,7 +19,7 @@ const navigation = [
   { name: 'Blog', href: BlogUrl },
 ];
 
-const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
+const NavLogo = () => <img className='h-8 w-8' src={logo} decoding='async' alt='Your SaaS App' />;
 
 export default function AppNavBar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

template/app/src/landing-page/LandingPage.tsx

@@ -1,10 +1,4 @@
-import {
-  features,
-  navigation,
-  faqs,
-  footerNavigation,
-  testimonials
-} from './contentSections';
+import { features, navigation, faqs, footerNavigation, testimonials } from './contentSections';
 import Header from './components/Header';
 import Hero from './components/Hero';
 import Clients from './components/Clients';

template/app/src/landing-page/components/Header.tsx

@@ -5,7 +5,7 @@ import { AiFillCloseCircle } from 'react-icons/ai';
 import { Dialog } from '@headlessui/react';
 import { Link } from 'wasp/client/router';
 import { useAuth } from 'wasp/client/auth';
-import logo from '../../client/static/logo.png';
+import logo from '../../client/static/logo.webp';
 import DarkModeSwitcher from '../../client/components/DarkModeSwitcher';
 import DropdownUser from '../../user/DropdownUser';
 import { UserMenuItems } from '../../user/UserMenuItems';

template/app/src/landing-page/components/Hero.tsx

@@ -1,31 +1,12 @@
-import openSaasBanner from '../../client/static/open-saas-banner.png';
+import openSaasBannerWebp from '../../client/static/open-saas-banner.webp';
 import { DocsUrl } from '../../shared/common';
 
 export default function Hero() {
   return (
-    <div className='relative pt-14 w-full '>
-      <div
-        className='absolute top-0 right-0 -z-10 transform-gpu overflow-hidden w-full blur-3xl sm:top-0 '
-        aria-hidden='true'
-      >
-        <div
-          className='aspect-[1020/880] w-[55rem] flex-none sm:right-1/4 sm:translate-x-1/2 dark:hidden bg-gradient-to-tr from-amber-400 to-purple-300 opacity-40'
-          style={{
-            clipPath: 'polygon(80% 20%, 90% 55%, 50% 100%, 70% 30%, 20% 50%, 50% 0)',
-          }}
-        />
-      </div>
-      <div
-        className='absolute inset-x-0 top-[calc(100%-40rem)] sm:top-[calc(100%-65rem)] -z-10 transform-gpu overflow-hidden blur-3xl'
-        aria-hidden='true'
-      >
-        <div
-          className='relative aspect-[1020/880] sm:-left-3/4 sm:translate-x-1/4 dark:hidden bg-gradient-to-br from-amber-400 to-purple-300  opacity-50 w-[72.1875rem]'
-          style={{
-            clipPath: 'ellipse(80% 30% at 80% 50%)',
-          }}
-        />
-      </div>
+    <div className='relative pt-14 w-full'>
+      {/* <BackgroundGradient1 />
+      <BackgroundGradient2 /> */}
+
       <div className='py-24 sm:py-32'>
         <div className='mx-auto max-w-8xl px-6 lg:px-8'>
           <div className='lg:mb-18 mx-auto max-w-3xl text-center'>
@@ -44,13 +25,15 @@ export default function Hero() {
               </a>
             </div>
           </div>
-          <div className='mt-14 flow-root sm:mt-14 '>
-            <div className='-m-2 rounded-xl  lg:-m-4 lg:rounded-2xl lg:p-4'>
+          <div className='mt-14 flow-root sm:mt-14'>
+            <div className='-m-2  flex justify-center rounded-xl lg:-m-4 lg:rounded-2xl lg:p-4'>
               <img
-                src={openSaasBanner}
+                src={openSaasBannerWebp}
                 alt='App screenshot'
-                width={2432}
-                height={1442}
+                width={1000}
+                height={530}
+                loading='lazy'
+                decoding='async'
                 className='rounded-md shadow-2xl ring-1 ring-gray-900/10'
               />
             </div>
@@ -60,3 +43,4 @@ export default function Hero() {
     </div>
   );
 }
+

template/app/src/landing-page/components/Testimonials.tsx

@@ -22,7 +22,7 @@ export default function Testimonials({ testimonials }: { testimonials: Testimoni
                 </blockquote>
                 <figcaption className='mt-6 text-base text-white'>
                   <a href={testimonial.socialUrl} className='flex items-center gap-x-2'>
-                    <img src={testimonial.avatarSrc} className='h-12 w-12 rounded-full' />
+                    <img src={testimonial.avatarSrc} loading='lazy' decoding='async' className='h-12 w-12 rounded-full' />
                     <div>
                       <div className='font-semibold hover:underline'>{testimonial.name}</div>
                       <div className='mt-1'>{testimonial.role}</div>

template/app/src/landing-page/contentSections.ts

@@ -1,6 +1,6 @@
 import { DocsUrl, BlogUrl } from '../shared/common';
-import daBoiAvatar from '../client/static/da-boi.png';
-import avatarPlaceholder from '../client/static/avatar-placeholder.png';
+import daBoiAvatar from '../client/static/da-boi.webp';
+import avatarPlaceholder from '../client/static/avatar-placeholder.webp';
 import { routes } from 'wasp/client/router';
 
 export const navigation = [

template/app/tailwind.config.cjs

@@ -8,7 +8,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        satoshi: ['Satoshi', 'sans-serif'],
+        satoshi: ['Satoshi', 'system-ui', 'sans-serif'],
       },
       colors: {
         current: 'currentColor',

template/blog/astro.config.mjs

@@ -14,7 +14,7 @@ export default defineConfig({
       customCss: ['./src/styles/tailwind.css'],
       description: 'Documentation for your SaaS.',
       logo: {
-        src: '/src/assets/logo.png',
+        src: '/src/assets/logo.webp',
         alt: 'Your SaaS',
       },
       head: [