From b3632a99e597cce5ba0469de686332efeac700e4 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Fri, 12 Jul 2024 20:20:11 +0430 Subject: [PATCH 01/13] add boilerplate docs --- .prettierignore | 3 +- boilerplate/404.mdx | 15 + boilerplate/analytics.mdx | 23 ++ boilerplate/auth.mdx | 15 + boilerplate/authentication.mdx | 55 ++++ boilerplate/blog.mdx | 25 ++ boilerplate/cta.mdx | 25 ++ boilerplate/customer-support.mdx | 29 ++ boilerplate/database.mdx | 49 +++ boilerplate/deploy.mdx | 71 ++++ boilerplate/error.mdx | 15 + boilerplate/faq.mdx | 25 ++ boilerplate/features.mdx | 25 ++ boilerplate/footer.mdx | 25 ++ boilerplate/google-auth-button.mdx | 25 ++ boilerplate/header.mdx | 25 ++ boilerplate/hero.mdx | 25 ++ boilerplate/home.mdx | 47 +++ boilerplate/installation.mdx | 99 ++++++ boilerplate/magic-link-auth.mdx | 25 ++ boilerplate/payments.mdx | 47 +++ boilerplate/pricing.mdx | 25 ++ boilerplate/profile-dropdown.mdx | 25 ++ boilerplate/seo.mdx | 33 ++ boilerplate/stats.mdx | 25 ++ boilerplate/stripe-checkout-button.mdx | 25 ++ boilerplate/testimonial.mdx | 25 ++ pages/boilerplate/docs/[...slug].tsx | 307 ++++++++++++++++++ public/boilerplate/404-page.png | Bin 0 -> 145977 bytes public/boilerplate/auth-page.png | Bin 0 -> 139344 bytes public/boilerplate/blog.png | Bin 0 -> 3075938 bytes public/boilerplate/cta.png | Bin 0 -> 900189 bytes public/boilerplate/error-page.png | Bin 0 -> 126214 bytes public/boilerplate/faq.png | Bin 0 -> 1496791 bytes public/boilerplate/features.png | Bin 0 -> 1903556 bytes public/boilerplate/footer.png | Bin 0 -> 924358 bytes public/boilerplate/google-auth-button.png | Bin 0 -> 257917 bytes public/boilerplate/header.png | Bin 0 -> 428140 bytes public/boilerplate/hero.png | Bin 0 -> 1407890 bytes public/boilerplate/home-page.png | Bin 0 -> 2478995 bytes public/boilerplate/magic-link-auth.png | Bin 0 -> 291603 bytes public/boilerplate/pricing.png | Bin 0 -> 1512595 bytes public/boilerplate/profile-dropdown.png | Bin 0 -> 229435 bytes public/boilerplate/stats.png | Bin 0 -> 1283263 bytes public/boilerplate/stripe-checkout-button.png | Bin 0 -> 105536 bytes public/boilerplate/testimonial.png | Bin 0 -> 1373662 bytes routes/boilerplate.routes.ts | 135 ++++++++ widgets/code-preview.tsx | 15 +- widgets/layout/page-map.tsx | 152 +++++---- widgets/layout/sidenav.tsx | 10 +- 50 files changed, 1399 insertions(+), 71 deletions(-) create mode 100644 boilerplate/404.mdx create mode 100644 boilerplate/analytics.mdx create mode 100644 boilerplate/auth.mdx create mode 100644 boilerplate/authentication.mdx create mode 100644 boilerplate/blog.mdx create mode 100644 boilerplate/cta.mdx create mode 100644 boilerplate/customer-support.mdx create mode 100644 boilerplate/database.mdx create mode 100644 boilerplate/deploy.mdx create mode 100644 boilerplate/error.mdx create mode 100644 boilerplate/faq.mdx create mode 100644 boilerplate/features.mdx create mode 100644 boilerplate/footer.mdx create mode 100644 boilerplate/google-auth-button.mdx create mode 100644 boilerplate/header.mdx create mode 100644 boilerplate/hero.mdx create mode 100644 boilerplate/home.mdx create mode 100644 boilerplate/installation.mdx create mode 100644 boilerplate/magic-link-auth.mdx create mode 100644 boilerplate/payments.mdx create mode 100644 boilerplate/pricing.mdx create mode 100644 boilerplate/profile-dropdown.mdx create mode 100644 boilerplate/seo.mdx create mode 100644 boilerplate/stats.mdx create mode 100644 boilerplate/stripe-checkout-button.mdx create mode 100644 boilerplate/testimonial.mdx create mode 100644 pages/boilerplate/docs/[...slug].tsx create mode 100644 public/boilerplate/404-page.png create mode 100644 public/boilerplate/auth-page.png create mode 100644 public/boilerplate/blog.png create mode 100644 public/boilerplate/cta.png create mode 100644 public/boilerplate/error-page.png create mode 100644 public/boilerplate/faq.png create mode 100644 public/boilerplate/features.png create mode 100644 public/boilerplate/footer.png create mode 100644 public/boilerplate/google-auth-button.png create mode 100644 public/boilerplate/header.png create mode 100644 public/boilerplate/hero.png create mode 100644 public/boilerplate/home-page.png create mode 100644 public/boilerplate/magic-link-auth.png create mode 100644 public/boilerplate/pricing.png create mode 100644 public/boilerplate/profile-dropdown.png create mode 100644 public/boilerplate/stats.png create mode 100644 public/boilerplate/stripe-checkout-button.png create mode 100644 public/boilerplate/testimonial.png create mode 100644 routes/boilerplate.routes.ts diff --git a/.prettierignore b/.prettierignore index 5614e9945..dcd43e77e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,2 @@ -documentation \ No newline at end of file +documentation +boilerplate \ No newline at end of file diff --git a/boilerplate/404.mdx b/boilerplate/404.mdx new file mode 100644 index 000000000..bcda8f6ef --- /dev/null +++ b/boilerplate/404.mdx @@ -0,0 +1,15 @@ +--- +title: Material Tailwind Boilerplate - 404 Page +description: Learn how to use Material Tailwind Boilerplate 404 page. +navigation: [] +github: 404 +next: deploy +--- + +# Material Tailwind Boilerplate - 404 Page + +This page is used to show an error message if the user tries to access a page that does not exist. The 404 page is located in the `app/not-found.tsx` file. + +Below you can see a preview of the 404 page. + +404 \ No newline at end of file diff --git a/boilerplate/analytics.mdx b/boilerplate/analytics.mdx new file mode 100644 index 000000000..b9d271c91 --- /dev/null +++ b/boilerplate/analytics.mdx @@ -0,0 +1,23 @@ +--- +title: Material Tailwind Boilerplate - Analytics +description: Learn how to setup Material Tailwind Boilerplate Analytics with Google Analytics. +navigation: + ["setup-analytics"] +github: analytics +next: header +--- + +# Material Tailwind Boilerplate - Analytics + +Material Tailwind Boilerplate comes with built-in analytics feature that you can use to track your website traffic and user behavior, we used Google Analytics as the analytics provider. + +
+
+ + +## Setup Google Analytics + + +To setup analytics in the Material Tailwind Boilerplate, you only need to add your Google Analytics ID for GOOGLE_ANALYTICS_ID on the .env file. + +You can also add Google Tag Manager in the boilerplate by adding your Google Tag Manager ID for NEXT_PUBLIC_GOOGLE_TAG_ID on the .env file. diff --git a/boilerplate/auth.mdx b/boilerplate/auth.mdx new file mode 100644 index 000000000..14f32a739 --- /dev/null +++ b/boilerplate/auth.mdx @@ -0,0 +1,15 @@ +--- +title: Material Tailwind Boilerplate - Auth Page +description: Learn how to use Material Tailwind Boilerplate Auth page. +navigation: [] +github: auth +next: error +--- + +# Material Tailwind Boilerplate - Auth Page + +The home page is the first page that the user uses to sign up or sign in to your website. The auth page is located in the app/auth/page.tsx file. + +The auth page contains the authentication method for Google and Magic Link, below you can see a preview of the auth page. + +auth-page \ No newline at end of file diff --git a/boilerplate/authentication.mdx b/boilerplate/authentication.mdx new file mode 100644 index 000000000..07d3f0717 --- /dev/null +++ b/boilerplate/authentication.mdx @@ -0,0 +1,55 @@ +--- +title: Material Tailwind Boilerplate - Authentication +description: Learn how to setup and use Material Tailwind Boilerplate authentication with Supabase Auth. +navigation: + ["google-auth", "magic-link"] +github: authentication +next: payments +--- + +# Material Tailwind Boilerplate - Authentication + +We used Supabase auth as authentication method for the boilerplate, in this section we will guide you on how to setup the Google Auth and Magic Link based on Supabase. + +
+
+ + +## Google Auth + + +To setup authentication with Google + Supabase follow the steps below: + +1: Go to the [Google Developers Console](https://console.cloud.google.com). + +2: Then go to the **APIs & Services**. + +3: Then go to the **OAuth Consent Screen** and fill in the required fields. + +4: Once you've setup the OAuth Consent Screen, go to the **Credentials** click on **Create Credentials** and select **OAuth client ID**. + +5: Then select the application type to **Web Application**. + + +6: Then go to the Supabase Dashboard -> Authentication -> Providers and click on the **Google**, enable it and Copy/Paste the **Client ID** and **Client Secret** from the Google Developers Console to the Supabase Google Auth and save it. + +--- + + +## Magic Link + + +We use [Resend](https://resend.com/) for Magic Link Authentication, follow the link [Resend + Supabase](https://resend.com/blog/how-to-configure-supabase-to-send-emails-from-your-domain) to setup Resend with Supabase for sending Magic Link Authentication. \ No newline at end of file diff --git a/boilerplate/blog.mdx b/boilerplate/blog.mdx new file mode 100644 index 000000000..6b3814381 --- /dev/null +++ b/boilerplate/blog.mdx @@ -0,0 +1,25 @@ +--- +title: Material Tailwind Boilerplate - Blog +description: Learn how to use Material Tailwind Boilerplate Blog Component. +navigation: [] +github: blog +next: google-auth-button +--- + +# Material Tailwind Boilerplate - Blog + +The blog component is a section that displays the blog posts. It's an important part of a website where you can share your thoughts, ideas, and knowledge with your audience. The blog component is located in the components/blog-simple.tsx file. + +Below is the code snippet of the blog component. + +
+ +}> +```tsx +import { BlogSimple } from "@/components"; + +export default function Page() { + return +} +``` + diff --git a/boilerplate/cta.mdx b/boilerplate/cta.mdx new file mode 100644 index 000000000..d2e2116bd --- /dev/null +++ b/boilerplate/cta.mdx @@ -0,0 +1,25 @@ +--- +title: Material Tailwind Boilerplate - CTA +description: Learn how to use Material Tailwind Boilerplate CTA Component. +navigation: [] +github: cta +next: testimonial +--- + +# Material Tailwind Boilerplate - CTA + +The cta component is used to display the call to action for subscribing or buying the product on the website. The cta component is located in the components/cta.tsx file. + +Below is the code snippet of the cta component. + +
+ +}> +```tsx +import { Cta } from "@/components"; + +export default function Page() { + return +} +``` + diff --git a/boilerplate/customer-support.mdx b/boilerplate/customer-support.mdx new file mode 100644 index 000000000..1bc3b68e3 --- /dev/null +++ b/boilerplate/customer-support.mdx @@ -0,0 +1,29 @@ +--- +title: Material Tailwind Boilerplate - Customers Support +description: Learn how to setup and use Material Tailwind Boilerplate customers support with GaliChat. +navigation: + ["setup-galichat", "add-galichat-hash"] +github: customer-support +next: seo +--- + +# Material Tailwind Boilerplate - Customers Support + +We used GaliChat for the customers support in the boilerplate, GaliChat is a AI support assistant that you can use to provide support to your customers. + +
+
+ + +## Setup GaliChat + + +To setup and configure GaliChat, follow the link [Setup GaliChat](https://www.galichat.com/getting-started#5---embed-the-chatbot-on-your-website). + +--- + + +## Add GaliChat Hash + + +Once you have setup GaliChat, you will get a hash code that you need to add in the `.env` file. diff --git a/boilerplate/database.mdx b/boilerplate/database.mdx new file mode 100644 index 000000000..4b3865141 --- /dev/null +++ b/boilerplate/database.mdx @@ -0,0 +1,49 @@ +--- +title: Material Tailwind Boilerplate - Database +description: Learn how to setup and use Material Tailwind Boilerplate database with Supabase. +navigation: + ["setup-subscriptions-table", "add-rls-policy"] +github: database +next: authentication +--- + +# Material Tailwind Boilerplate - Database + +We used Supabase as database for the Material Tailwind Boilerplate, in this section we will guide you on how to setup the database for the project. + +
+
+ + +## Setup Subscriptions Table + + +There is only one table that you need to create in the Supabase database, the table is called subscriptions, use the schema below in the Supabase SQL editor to create the table. + +```sql +create table public.subscriptions ( + email text not null, + created_at timestamptz not null default now(), + customer_id text, + subscription_id text, + ended_at timestamptz, + is_canceled boolean default false, + primary key (email) +); + +alter table public.subscriptions enable row level security; +``` + +--- + + +## Add RLS Policy + + +After you create the table you need to add a row level security policy to the table, use the schema below in the Supabase SQL editor to add the policy the table. + +```sql +create policy "Enable read access for all users" on public.demo for +select + using (true); +``` \ No newline at end of file diff --git a/boilerplate/deploy.mdx b/boilerplate/deploy.mdx new file mode 100644 index 000000000..e71d30253 --- /dev/null +++ b/boilerplate/deploy.mdx @@ -0,0 +1,71 @@ +--- +title: Material Tailwind Boilerplate - Deploy to Production +description: Learn how to deploy Material Tailwind Boilerplate to production. +navigation: ["setting-up-supabase", "setting-up-authentication", "setting-up-stripe", "conclusion"] +github: deploy +--- + +# Material Tailwind Boilerplate - Deploy to Production + +In this section, you will learn how to deploy Material Tailwind Boilerplate to production using [Vercel](https://vercel.com/). You can also deploy the boilerplate to other platforms like Netlify or other hosting providers that supports Next.js. + +
+
+ + +## Setting up Supabase + + +Before deploying the Material Tailwind Boilerplate to production, you need to prepare Supabase in order to work in production. + +For Supabase we only need to change the site url on the Supabase dashboard, you can do this by going to the **Authentication** -> **URL Configuration** and change the site url from {`http://localhost:3000`} to your domain. + +Once you update the site url on the Supabase dashboard, you also need to update the NEXT_PUBLIC_SITE_URL from {`http://localhost:3000`} to your domain in the .env file. + +--- + + +## Setting up Authentication + + +Before deploying the Material Tailwind Boilerplate to production, you need to prepare Google OAuth in order to work in production. + +Follow the steps below to set up Google OAuth for production: + +1: Go to the **OAuth Consent Screen** on the Google Developers Console and click on the **Edit App** button. + +2: Then upload your **App Logo** and fill in the **App Domain** fields and click on the **Save and Continue** button. + +3: Then click on the **Publish App** button. + +To verify your app for Google Search Console you can follow the link [Verify your app for Google Search Console](https://support.google.com/cloud/answer/13463073). + +--- + + +## Setting up Strip + + +Before deploying the Material Tailwind Boilerplate to production, you need to prepare Stripe in order to work in production. + +Follow the steps below to set up Stripe for production: + +1: If your Stripe business account is already verified the you're go to go, if not you need to verify your Stripe business account. + +2: Then go to the **Settings** -> **Business** -> **Public Details** and fill in the fields. + +3: Then go to the **Settings** -> **Business** -> **Branding** and add your Logo, Icon and brand color. + +4: Then go to the **Settings** -> **Business** -> **Customer Emails** and on the **Payments** category turn on the **Successful Payments** and **Refunds** options. + +5: Finally go to the **Developers** -> **Webhooks** and on the **Hosted Endpoints** section click the **+ Add endpoint** button, then add an endpoint following the format {`https://your-domain/api/webhooks/stripe`} and click on the **Add endpoint** button. + +--- + + +## Conclusion + + +Now your Material Tailwind Boilerplate is ready to deploy to production, you can deploy the boilerplate to Vercel, simply push your code to your Github account and connect your Github account to Vercel, then deploy the boilerplate simply by clicking on the **Deploy** button. + +You can also use the link [Deploying to Vercel](https://www.google.com/search?q=deploying+next.js+to+vercel&sourceid=chrome&ie=UTF-8#fpstate=ive&vld=cid:a76a9b1f,vid:AiiGjB2AxqA,st:0) to learn more about deploying Next.js App to Vercel. \ No newline at end of file diff --git a/boilerplate/error.mdx b/boilerplate/error.mdx new file mode 100644 index 000000000..aa065d9e1 --- /dev/null +++ b/boilerplate/error.mdx @@ -0,0 +1,15 @@ +--- +title: Material Tailwind Boilerplate - Error Page +description: Learn how to use Material Tailwind Boilerplate Error page. +navigation: [] +github: error +next: 404 +--- + +# Material Tailwind Boilerplate - Error Page + +This page is used to gracefully handle unexpected runtime errors. The error page is located in the `app/error.tsx` file. + +Below you can see a preview of the error page. + +error \ No newline at end of file diff --git a/boilerplate/faq.mdx b/boilerplate/faq.mdx new file mode 100644 index 000000000..f621af5eb --- /dev/null +++ b/boilerplate/faq.mdx @@ -0,0 +1,25 @@ +--- +title: Material Tailwind Boilerplate - FAQ +description: Learn how to use Material Tailwind Boilerplate FAQ Component. +navigation: [] +github: faq +next: cta +--- + +# Material Tailwind Boilerplate - FAQ + +The faq component is used to display the frequently asked questions and answers about the product on the website. The faq component is located in the components/faq.tsx file. + +Below is the code snippet of the faq component. + +
+ +}> +```tsx +import { Faq } from "@/components"; + +export default function Page() { + return +} +``` + diff --git a/boilerplate/features.mdx b/boilerplate/features.mdx new file mode 100644 index 000000000..86e376e00 --- /dev/null +++ b/boilerplate/features.mdx @@ -0,0 +1,25 @@ +--- +title: Material Tailwind Boilerplate - Features +description: Learn how to use Material Tailwind Boilerplate Features Component. +navigation: [] +github: features +next: pricing +--- + +# Material Tailwind Boilerplate - Features + +The features component is used to display the features and benefits of the product in the website. The features component is located in the components/features.tsx file. + +Below is the code snippet of the features component. + +
+ +}> +```tsx +import { Features } from "@/components"; + +export default function Page() { + return +} +``` + diff --git a/boilerplate/footer.mdx b/boilerplate/footer.mdx new file mode 100644 index 000000000..ccb83df7a --- /dev/null +++ b/boilerplate/footer.mdx @@ -0,0 +1,25 @@ +--- +title: Material Tailwind Boilerplate - Footer +description: Learn how to use Material Tailwind Boilerplate Footer Component. +navigation: [] +github: footer +next: home +--- + +# Material Tailwind Boilerplate - Footer + +The footer component is used to display the footer of the website, like the company name, contact information, social media links, etc. The footer component is located in the components/footer.tsx file. + +Below is the code snippet of the footer component. + +
+ +}> +```tsx +import { Footer } from "@/components"; + +export default function Page() { + return