diff --git a/app/src/client/app/GptPage.tsx b/app/src/client/app/GptPage.tsx index 642967a..3fb69d4 100644 --- a/app/src/client/app/GptPage.tsx +++ b/app/src/client/app/GptPage.tsx @@ -19,7 +19,7 @@ export default function GptPage() { const response = await generateGptResponse({ instructions, command, temperature }); if (response) { setResponse(response.split('\n')); - console.log(response) + console.log(response); } } catch (error: any) { alert(error.message); @@ -138,7 +138,7 @@ export default function GptPage() { } mt-4 mx-6 flex justify-center rounded-lg border border-dashed border-gray-900/25 sm:w-[90%] md:w-[50%] mx-auto mt-12 px-6 py-10`} >
- {response.length > 0 ? response.map((str) =>

{str}

) :

GPT Response will load here

} + {response.length > 0 ? response.map((str) =>

{str}

) :

GPT Response will load here

}
diff --git a/app/src/client/components/DropdownUser.tsx b/app/src/client/components/DropdownUser.tsx index 4e98e98..61b1d51 100644 --- a/app/src/client/components/DropdownUser.tsx +++ b/app/src/client/components/DropdownUser.tsx @@ -11,7 +11,6 @@ const DropdownUser = ({ user } : { user: Partial }) => { const toggleDropdown = () => setDropdownOpen((prev) => !prev); - // close on click outside useEffect(() => { const clickHandler = ({ target }: MouseEvent) => { if (!dropdown.current) return @@ -62,7 +61,7 @@ const DropdownUser = ({ user } : { user: Partial }) => { - {/* */} + {/* */}
}) => { >
- {/* */} ); }; diff --git a/app/src/client/landing-page/LandingPage.tsx b/app/src/client/landing-page/LandingPage.tsx index 6ad486b..85d695c 100644 --- a/app/src/client/landing-page/LandingPage.tsx +++ b/app/src/client/landing-page/LandingPage.tsx @@ -1,6 +1,6 @@ -import { useState, useEffect } from 'react'; +import { useState } from 'react'; import { Dialog } from '@headlessui/react'; -import { AiFillCloseCircle } from 'react-icons/ai'; +import { AiFillCloseCircle, AiFillGithub } from 'react-icons/ai'; import { HiBars3 } from 'react-icons/hi2'; import { BiLogIn } from 'react-icons/bi'; import { Link } from '@wasp/router'; @@ -8,54 +8,19 @@ import logo from '../static/logo.png'; import openSaasBanner from '../static/open-saas-banner.png'; import { features, navigation, faqs, footerNavigation, testimonials } from './contentSections'; import DropdownUser from '../components/DropdownUser'; -import { DOCS_URL } from '@wasp/shared/constants'; +import { DOCS_URL, GITHUB_URL } from '@wasp/shared/constants'; import { UserMenuItems } from '../components/UserMenuItems'; import useAuth from '@wasp/auth/useAuth'; export default function LandingPage() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); - const [isDemoInfoVisible, setIsDemoInfoVisible] = useState(false); const { data: user, isLoading: isUserLoading } = useAuth(); - useEffect(() => { - try { - if (localStorage.getItem('isDemoInfoVisible') === 'false') { - // do nothing - } else { - setIsDemoInfoVisible(true); - } - } catch (error) { - console.error(error); - } - }, []); - - const handleDemoInfoClose = () => { - try { - localStorage.setItem('isDemoInfoVisible', 'false'); - setIsDemoInfoVisible(false); - } catch (error) { - console.error(error); - } - }; - const NavLogo = () => Open SaaS App; return (
- {/* Floating Demo Announcement */} - {isDemoInfoVisible && ( -
-
- - This demo app is the SaaS template. Feel free to play around! - - -
-
- )} {/* Header */}
@@ -269,11 +236,7 @@ export default function LandingPage() {
- +

- All the important stuff + 100% Open-Source

- We've pre-built the important stuff. -
Wasp does the boilerplate stuff. -
You get to do the fun stuff. + No vendor lock-in. +
Deploy anywhere.

@@ -316,7 +278,9 @@ export default function LandingPage() {
-

Testimonials

+

+ What Our Users Say +

{testimonials.map((testimonial) => (
@@ -348,6 +312,11 @@ export default function LandingPage() {
{faq.question}

{faq.answer}

+ {faq.href && ( + + Learn more β†’ + + )}
))} @@ -361,7 +330,7 @@ export default function LandingPage() { -
+

App

    diff --git a/app/src/client/landing-page/contentSections.ts b/app/src/client/landing-page/contentSections.ts index f3a9e78..82ff87d 100644 --- a/app/src/client/landing-page/contentSections.ts +++ b/app/src/client/landing-page/contentSections.ts @@ -1,4 +1,4 @@ -import { DOCS_URL, BLOG_URL } from '@wasp/shared/constants'; +import { DOCS_URL, BLOG_URL, GITHUB_URL } from '@wasp/shared/constants'; import daBoiAavatar from '../static/da-boi.png'; export const navigation = [ @@ -10,58 +10,68 @@ export const features = [ { name: 'Open-Source Philosophy', description: - "Forever free and open-source. Create an issue, make a PR, and together let's make the best SaaS template ever!", + 'The repo and framework are 100% open-source, and so are the services wherever possible. Still missing something? Contribute!', icon: '🀝', + href: DOCS_URL, }, { - name: 'Auto-magic Auth', - description: - 'Not only is full-stack Auth pre-configured, but you can integrate more providers with just a few lines of code.', + name: 'DIY Auth, Done For You', + description: 'Pre-configured full-stack Auth that you own. No 3rd-party services or hidden fees.', icon: 'πŸ”', + href: DOCS_URL + '/guides/authentication/', }, { name: 'Full-stack Type Safety', description: - 'Because Wasp understands your app, it provides end-to-end type safety out of the box. Nothing to configure!', + 'Full support for TypeScript with auto-generated types that span the whole stack. Nothing to configure!', icon: 'πŸ₯ž', + href: DOCS_URL, }, { name: 'Stripe Integration', description: "No SaaS is complete without payments. That's why subscriptions and the necessary webhooks are built-in.", icon: 'πŸ’Έ', + href: DOCS_URL + '/guides/stripe-integration/', }, { name: 'Admin Dashboard', description: 'Graphs! Tables! Analytics w/ Plausible or Google! All in one place. Ooooooooooh.', icon: 'πŸ“ˆ', + href: DOCS_URL + '/general/admin-dashboard/', }, { name: 'Blog w/ Astro', - description: 'Built-in blog with the Astro framework. Write your posts in Markdown, and watch your SEO performance take off.', + description: + 'Built-in blog with the Astro framework. Write your posts in Markdown, and watch your SEO performance take off.', icon: 'πŸ“', + href: DOCS_URL + '/start/guided-tour/', }, { name: 'Email Sending', description: - "Email sending built-in and pre-configured. Combine it with Wasp's cron jobs feature to easily send emails to your customers.", + 'Email sending built-in. Combine it with the cron jobs feature to easily send emails to your customers.', icon: 'πŸ“§', + href: DOCS_URL + '/guides/email-sending/', }, { name: 'OpenAI API Implemented', - description: "Technology is changing rapidly. Ship your new AI-powered app before it's already obsolete!", + description: 'Have a sweet AI-powered app concept? Get your idea shipped to potential customers in days!', icon: 'πŸ€–', + href: DOCS_URL, }, { name: 'Deploy Anywhere. Easily.', description: - 'You own all your code, and can deploy wherever & however you want. Or just let Wasp deploy it for you with a single command.', + 'No vendor lock-in because you own all your code. Deploy yourself, or let Wasp deploy it for you with a single command.', icon: 'πŸš€ ', + href: DOCS_URL + '/guides/deploying/', }, { name: 'Complete Documentation & Support', - description: "We don't leave you hanging. We have tons of docs, and a Discord community to help!", + description: "We don't leave you hanging. We have detailed docs and a Discord community to help!", icon: 'πŸ«‚', + href: DOCS_URL, }, ]; export const testimonials = [ @@ -114,23 +124,25 @@ export const testimonials = [ export const faqs = [ { id: 1, - question: 'Why is this amazing SaaS Template free and open-source?', - answer: 'Because open-source is cool, and we love you ❀️', + question: 'Why is this SaaS Template free and open-source?', + answer: + 'We believe the best product is made when the community puts their heads together. We also believe a quality starting point for a web app should be free and available to everyone. Our hope is that together we can create the best SaaS template out there and bring our ideas to customers quickly.', }, { id: 2, question: "What's Wasp?", - answer: - "It's the fastest way to develop full-stack React + NodeJS + Prisma apps. It's what gives this template superpowers.", + href: 'https://wasp-lang.dev', + answer: "It's the fastest way to develop full-stack React + NodeJS + Prisma apps and it's what gives this template superpowers. Wasp relies on React, NodeJS, and Prisma to define web components and server queries and actions. Wasp's secret sauce is its compiler which takes the client, server code, and config file and outputs the client app, server app and deployment code, supercharging the development experience. Combined with this template, you can build a SaaS app in record time.", }, ]; export const footerNavigation = { app: [ + { name: 'Github', href: GITHUB_URL }, { name: 'Documentation', href: DOCS_URL }, { name: 'Blog', href: BLOG_URL }, ], company: [ - { name: 'About', href: '#' }, + { name: 'About', href: 'https://wasp-lang.dev' }, { name: 'Privacy', href: '#' }, { name: 'Terms of Service', href: '#' }, ], diff --git a/app/src/shared/constants.ts b/app/src/shared/constants.ts index 18d98be..6295dd9 100644 --- a/app/src/shared/constants.ts +++ b/app/src/shared/constants.ts @@ -6,6 +6,7 @@ export enum TierIds { export const DOCS_URL = 'https://docs.opensaas.sh'; export const BLOG_URL = 'https://docs.opensaas.sh/blog'; +export const GITHUB_URL = 'https://github.com/wasp-lang/open-saas'; //get this link at https://dashboard.stripe.com/test/settings/billing/portal const isDev = process.env.NODE_ENV !== 'production'; diff --git a/blog/astro.config.mjs b/blog/astro.config.mjs index 48236b4..27ec2c2 100644 --- a/blog/astro.config.mjs +++ b/blog/astro.config.mjs @@ -63,7 +63,7 @@ export default defineConfig({ label: 'General', items: [ { label: 'Admin Dashboard', link: '/general/admin-dashboard/' }, - { label: 'User Permissions', link: '/general/user-permissions/' }, + { label: 'User Overview', link: '/general/user-overview/' }, ], }, ], diff --git a/blog/src/content/docs/general/user-permissions.md b/blog/src/content/docs/general/user-overview.md similarity index 98% rename from blog/src/content/docs/general/user-permissions.md rename to blog/src/content/docs/general/user-overview.md index de16ea9..e64a78d 100644 --- a/blog/src/content/docs/general/user-permissions.md +++ b/blog/src/content/docs/general/user-overview.md @@ -1,8 +1,8 @@ --- -title: User Permissions +title: User Overview --- -This reference will help you understand how the user permissions work in this template. +This reference will help you understand how the User entity works in this template. This includes the user roles, subscription tiers and statuses, and how to authorize access to certain pages and components. ## User Entity diff --git a/blog/src/content/docs/start/getting-started.md b/blog/src/content/docs/start/getting-started.md index e497264..e2c436d 100644 --- a/blog/src/content/docs/start/getting-started.md +++ b/blog/src/content/docs/start/getting-started.md @@ -12,9 +12,14 @@ Install Wasp by running this command in your terminal: ```sh curl -sSL https://get.wasp-lang.dev/installer.sh | sh ``` -Also install the [Wasp extension for VSCode](https://marketplace.visualstudio.com/items?itemName=wasp-lang.wasp) to get the best DX (syntax highlighting, code scaffolding, autocomplete, etc.) -### Clone the repo +:::tip +Make sure to install the Wasp VSCode extension to get the best DX, e.g. syntax highlighting, code scaffolding, autocomplete, etc: + +🐝 [Wasp VSCode Extension](https://marketplace.visualstudio.com/items?itemName=wasp-lang.wasp) πŸ§‘β€πŸ’» +::: + +### Clone the OpenSaaS repo Clone this repo by running this command in your terminal: ```sh @@ -37,11 +42,10 @@ wasp start db ``` This will start and connect your app to a Postgres database for you. No need to do anything else! 🀯 -Then, in a new terminal window/tab, run: +Whenever you make any changes to your schema, you can migrate them with: ```sh wasp db migrate-dev ``` -This will run the migrations for you and create the tables in your DB. If you want to see or manage your DB via Prisma's DB Studio GUI, run: ```sh @@ -57,11 +61,11 @@ This will install all dependencies and start the client and server for you :) Go to `localhost:3000` in your browser to view it (your NodeJS server will be running on port `3001`) -### Further info -Check the files for comments containing specific instructions. - +### More Help/Further Info For more info on Wasp as a full-stack React, NodeJS, Prisma framework, check out the [Wasp docs](https://wasp-lang.dev/docs/). +If you get stuck or need help, join the [Wasp Discord](https://discord.gg/aCamt5wCpS). + #### Run Blog and Docs This SaaS app comes with a docs and blog section built with the [Starlight template on top of the Astro](https://starlight.astro.build) framework. You can use this as a starting point for your own blog and documentation, if necessary. diff --git a/blog/src/content/docs/start/guided-tour.md b/blog/src/content/docs/start/guided-tour.md index 99e920b..af0776c 100644 --- a/blog/src/content/docs/start/guided-tour.md +++ b/blog/src/content/docs/start/guided-tour.md @@ -17,7 +17,7 @@ At the root of our project, you will see two folders: `app` contains the Wasp project files, which is your full-stack React + NodeJS + Prisma app along with a Wasp config file, which will be explained in more detail below. -`blog` contains the Astro Starlight template for the blog and documentation section. +`blog` contains the [Astro Starlight template](https://starlight.astro.build/) for the blog and documentation section. Let's check out what's in the `app` folder in more detail: ```sh @@ -35,9 +35,11 @@ Let's check out what's in the `app` folder in more detail: ### The Wasp Config file -The `main.wasp` file is where you define your app structure. +This template at its core is a Wasp template, where [Wasp](https://wasp-lang.dev) is a full-stack web app framework that let’s you write your app in React, NodeJS, and Prisma and will manage the "boilerplatey" work for you, allowing you to just take care of the fun stuff! -In this template, we've already defined a number of things in the config file for you, including: +[Wasp's secret sauce](https://wasp-lang.dev/docs) is its use of a config file (`main.wasp`) and compiler which takes your code and outputs the client app, server app and deployment code for you. + +In this template, we've already defined a number of things in the `main.wasp` config file, including: - Auth - Routes and Pages @@ -46,7 +48,7 @@ In this template, we've already defined a number of things in the config file fo - Background Jobs - Email Sending -By defining these things in the config file, Wasp continuously handles the boilerplate necessary with putting all these features together. You just need to focus on the business logic of your app! +By defining these things in the config file, Wasp continuously handles the boilerplate necessary with putting all these features together. You just need to focus on the business logic of your app. Wasp abstracts away some things that you would normally be used to doing during development, so don't be surprised if you don't see some of the things you're used to seeing.