highperfocused/open-saas
1
0
Fork 0
mirror of https://github.com/wasp-lang/open-saas.git synced 2025-07-12 14:12:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use webp over png and lazy load images (#314)

Browse Source 
* use webp and lazy load images

* fix hero

* update app_diff

* fix app_diff

* fix head

* remove async decoding
This commit is contained in:
vincanger
2024-11-12 13:38:06 +01:00
committed by GitHub
parent 685e02536c
commit 3bb78654d8
36 changed files with 165 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
opensaas-sh/app_diff/deletions
View File

@ -1,6 +1,6 @@
public/public-banner.png
src/client/static/avatar-placeholder.png
src/client/static/open-saas-banner.png
src/client/static/avatar-placeholder.webp
src/client/static/da-boi.webp
src/client/static/open-saas-banner.webp
src/landing-page/logos/SalesforceLogo.tsx
src/payment/lemonSqueezy/checkoutUtils.ts
src/payment/lemonSqueezy/paymentDetails.ts

70
opensaas-sh/app_diff/main.wasp.diff
View File

@ -1,6 +1,6 @@
--- template/app/main.wasp
+++ opensaas-sh/app/main.wasp
@@ -3,24 +3,24 @@
@@ -3,30 +3,30 @@
version: "^0.15.0"
},
@ -8,35 +8,47 @@
+ title: "Open SaaS",
head: [
"<meta property='og:type' content='website' />",
- "<meta property='og:title' content='My Open SaaS App' />",
+ "<meta property='og:title' content='Open SaaS' />",
"<meta property='og:url' content='https://opensaas.sh' />",
- "<meta property='og:description' content='I made a SaaS App. Buy my stuff.' />",
- "<meta property='og:image' content='https://opensaas.sh/public-banner.png' />",
- "<meta name='twitter:image' content='https://opensaas.sh/public-banner.png' />",
+ "<meta property='og:description' content='Free, open-source SaaS boilerplate starter for React & NodeJS.' />",
+ "<meta property='og:image' content='https://opensaas.sh/banner.png' />",
"<meta charset='utf-8' />",
- "<meta name='description' content='Your apps main description and features.' />",
- "<meta name='author' content='Your (App) Name' />",
- "<meta name='keywords' content='saas, solution, product, app, service' />",
-
+ "<meta name='description' content='Build and launch your SaaS application faster with our free, open-source starter kit. Features include auth, payments, AI example app, and admin dashboard.' />",
+ "<meta name='author' content='Open SaaS' />",
+ "<meta name='keywords' content='saas, starter, boilerplate, free, open source, authentication, payments' />",
+
+ "<meta name=\"twitter:title\" content=\"Open SaaS\" />",
+ "<meta name=\"twitter:text:title\" content=\"Open SaaS\" />",
+ "<meta name='twitter:image' content='https://opensaas.sh/banner.png' />",
+ "<meta name=\"twitter:image:alt\" content=\"Open SaaS\" />",
"<meta name='twitter:image:width' content='800' />",
"<meta name='twitter:image:height' content='400' />",
"<meta name='twitter:card' content='summary_large_image' />",
- // TODO: You can put your Plausible analytics scripts below (https://docs.opensaas.sh/guides/analytics/):
- // NOTE: Plausible does not use Cookies, so you can simply add the scripts here.
- // Google, on the other hand, does, so you must instead add the script dynamically
- // via the Cookie Consent component after the user clicks the "Accept" cookies button.
- "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.js'></script>", // for production
- "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.local.js'></script>", // for development
+ "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.js'></script>",
+ "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.local.js'></script>",
+ "<meta property='og:site_name' content='Open SaaS' />",
"<meta property='og:type' content='website' />",
- "<meta property='og:title' content='Your Open SaaS App' />",
- "<meta property='og:site_name' content='Your Open SaaS App' />",
- "<meta property='og:url' content='https://your-saas-app.com' />",
- "<meta property='og:description' content='Your apps main description and features.' />",
- "<meta property='og:image' content='https://your-saas-app.com/public-banner.webp' />",
- "<meta name='twitter:image' content='https://your-saas-app.com/public-banner.webp' />",
+ "<meta property='og:title' content='Open SaaS' />",
+ "<meta property='og:url' content='https://opensaas.sh' />",
+ "<meta property='og:description' content='Free, open-source SaaS boilerplate starter for React & NodeJS.' />",
+ "<meta property='og:image' content='https://opensaas.sh/public-banner.webp' />",
+
+ "<meta name=\"twitter:title\" content=\"Open SaaS\" />",
+ "<meta name=\"twitter:text:title\" content=\"Open SaaS\" />",
+ "<meta name='twitter:image' content='https://opensaas.sh/public-banner.webp' />",
+ "<meta name=\"twitter:image:alt\" content=\"Open SaaS\" />",
"<meta name='twitter:image:width' content='800' />",
"<meta name='twitter:image:height' content='400' />",
"<meta name='twitter:card' content='summary_large_image' />",
- // TODO: You can put your Plausible analytics scripts below (https://docs.opensaas.sh/guides/analytics/):
- // NOTE: Plausible does not use Cookies, so you can simply add the scripts here.
- // Google, on the other hand, does, so you must instead add the script dynamically
- // via the Cookie Consent component after the user clicks the "Accept" cookies button.
- "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.js'></script>", // for production
- "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.local.js'></script>", // for development
+ "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.js'></script>",
+ "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.local.js'></script>",
],
// 🔐 Auth out of the box! https://wasp-lang.dev/docs/auth/overview
@@ -32,7 +32,7 @@
@@ -38,7 +38,7 @@
email: {
fromField: {
name: "Open SaaS App",
@ -45,7 +57,7 @@
},
emailVerification: {
clientRoute: EmailVerificationRoute,
@@ -44,21 +44,18 @@
@@ -50,21 +50,18 @@
},
userSignupFields: import { getEmailUserFields } from "@src/auth/userSignupFields",
},
@ -79,7 +91,7 @@
},
onAfterSignup: import { onAfterSignup } from "@src/auth/hooks",
onAuthFailedRedirectTo: "/login",
@@ -81,11 +78,11 @@
@@ -87,11 +84,11 @@
// NOTE: "Dummy" provider is just for local development purposes.
// Make sure to check the server logs for the email confirmation url (it will not be sent to an address)!
// Once you are ready for production, switch to e.g. "SendGrid" or "Mailgun" providers. Check out https://docs.opensaas.sh/guides/email-sending/ .
@ -93,7 +105,7 @@
},
},
}
@@ -206,9 +203,9 @@
@@ -212,9 +209,9 @@
}
api paymentsWebhook {

11
opensaas-sh/app_diff/migrations/20241031103046_remove_checkout_session_id/migration.sql.diff Normal file
View File

@ -0,0 +1,11 @@
--- template/app/migrations/20241031103046_remove_checkout_session_id/migration.sql
+++ opensaas-sh/app/migrations/20241031103046_remove_checkout_session_id/migration.sql
@@ -0,0 +1,8 @@
+/*
+ Warnings:
+
+ - You are about to drop the column `checkoutSessionId` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "checkoutSessionId";

2
opensaas-sh/app_diff/src/landing-page/components/Clients.tsx.diff
View File

@ -1,7 +1,7 @@
--- template/app/src/landing-page/components/Clients.tsx
+++ opensaas-sh/app/src/landing-page/components/Clients.tsx
@@ -1,23 +1,64 @@
+import logo from '../../client/static/logo.png';
+import logo from '../../client/static/logo.webp';
import AstroLogo from "../logos/AstroLogo";
-import OpenAILogo from "../logos/OpenAILogo";
import PrismaLogo from "../logos/PrismaLogo";

18
opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff
View File

@ -25,7 +25,7 @@
>
<NavLogo />
- <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
+ <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open Saas</span>
+ <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open SaaS</span>
</a>
</div>
<div className='flex lg:hidden'>
@ -47,6 +47,15 @@
</div>
</Link>
) : (
@@ -78,7 +79,7 @@
<Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-boxdark dark:text-white'>
<div className='flex items-center justify-between'>
<a href='/' className='-m-1.5 p-1.5'>
- <span className='sr-only'>Your SaaS</span>
+ <span className='sr-only'>Open SaaS</span>
<NavLogo />
</a>
<button
@@ -107,8 +108,8 @@
<div className='py-6'>
{isUserLoading ? null : !user ? (
@ -58,13 +67,12 @@
</div>
</Link>
) : (
@@ -125,3 +126,27 @@
@@ -125,3 +126,26 @@
</header>
)
}
+
+const ContestURL =
+ 'https://docs.opensaas.sh/blog/';
+const ContestURL = 'https://x.com/WaspLang';
+
+function Announcement() {
+ return (
@ -75,7 +83,7 @@
+ onClick={() => window.open(ContestURL, '_blank')}
+ className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
+ >
+ Enter here and win prizes! →
+ Vote for the winner here! →
+ </div>
+ <div
+ onClick={() => window.open(ContestURL, '_blank')}

20
opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff
View File

@ -1,7 +1,7 @@
--- template/app/src/landing-page/components/Hero.tsx
+++ opensaas-sh/app/src/landing-page/components/Hero.tsx
@@ -1,7 +1,25 @@
-import openSaasBanner from '../../client/static/open-saas-banner.png';
-import openSaasBannerWebp from '../../client/static/open-saas-banner.webp';
-import { DocsUrl } from '../../shared/common';
+import { useState, useEffect } from 'react';
+import { AiFillGithub } from 'react-icons/ai';
@ -26,9 +26,9 @@
+ }, []);
+
return (
<div className='relative pt-14 w-full '>
<div
@@ -29,30 +47,47 @@
<div className='relative pt-14 w-full'>
<TopGradient />
@@ -9,31 +27,47 @@
<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'>
@ -69,15 +69,17 @@
+ </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'
- className='rounded-md shadow-2xl ring-1 ring-gray-900/10'
- />
+ <div className='mt-14 flow-root sm:mt-14 '>
+ <div className='-m-2 mx-auto rounded-xl lg:-m-4 lg:rounded-2xl lg:p-4'>
+ <iframe
+ className=' mx-auto w-full md:w-[85%] aspect-[4/3] shadow-2xl'

4
opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
View File

@ -2,8 +2,8 @@
+++ opensaas-sh/app/src/landing-page/contentSections.ts
@@ -1,74 +1,131 @@
-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';
+import { DocsUrl, BlogUrl, GithubUrl } from '../shared/common';

6
opensaas-sh/app_diff/tailwind.config.cjs.diff
View File

@ -1,13 +1,15 @@
--- template/app/tailwind.config.cjs
+++ opensaas-sh/app/tailwind.config.cjs
@@ -8,6 +8,7 @@
@@ -8,7 +8,8 @@
theme: {
extend: {
fontFamily: {
- satoshi: ['Satoshi', 'system-ui', 'sans-serif'],
+ sans: ['ui-monospace', 'Liberation Mono', 'Menlo', 'monospace'],
satoshi: ['Satoshi', 'sans-serif'],
+ satoshi: ['Satoshi', 'sans-serif'],
},
colors: {
current: 'currentColor',
@@ -246,6 +247,9 @@
'spin-2': 'spin 2s linear infinite',
'spin-3': 'spin 3s linear infinite',

2
opensaas-sh/blog/astro.config.mjs
View File

@ -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: [

BIN
opensaas-sh/blog/src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
opensaas-sh/blog/src/assets/logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

2
opensaas-sh/blog/src/content/docs/guides/seo.md
View File

@ -22,7 +22,7 @@ app SaaSTemplate {
"<meta property='og:url' content='https://opensaas.sh' />",
"<meta property='og:title' content='Open SaaS' />",
"<meta property='og:description' content='Free, open-source SaaS boilerplate starter for React & NodeJS.' />",
"<meta property='og:image' content='https://opensaas.sh/public-banner.png' />",
"<meta property='og:image' content='https://opensaas.sh/public-banner.webp' />",
//...
],
//...

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

@ -60,7 +60,7 @@ If you are using an older version of the OpenSaaS template with Wasp `v0.13.x` o
.
├── main.wasp # Wasp Config file. You define your app structure here.
├── .wasp/ # Output dir for Wasp. DON'T MODIFY THESE FILES!
├── public/ # Public assets dir, e.g. www.yourdomain.com/banner.png
├── public/ # Public assets dir, e.g. www.yourdomain.com/public-banner.webp
├── src/ # Your code goes here.
│   ├── admin/ # Admin dashboard related pages and components.
│   ├── analytics/ # Logic and background jobs for processing analytics.
@ -320,11 +320,11 @@ But before you start setting up the main features, let's walk through the custom
#### Customizing the Look / Style of the App
- [ ] Update your favicon at `public/favicon.ico`.
- [ ] Update the banner image used when posting links to your site at `public/public-banner.png`.
- [ ] Update the banner image used when posting links to your site at `public/public-banner.webp`.
- [ ] 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 hero banner (`open-saas-banner.webp`) 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