Landing: 🚚 Move blog to index page and update URLs (#2825)

shepherd-pro · May 24, 2024 · b4338f7 · b4338f7
1 parent 42b3389
commit b4338f7
Show file tree

Hide file tree

Showing 20 changed files with 419 additions and 412 deletions.
diff --git a/README.md b/README.md
@@ -46,9 +46,9 @@ Unlock additional capabilities and more full featured Journeys.
 
 # Demo
 See Shepherd Live on our docs website by clicking on the image:
-<a href="https://shepherdjs.dev/demo">
+<a href="https://blog.shepherdpro.com/demo">
   <img 
-    src="https://shepherdjs.dev/img/demo.png" 
+    src="https://blog.shepherdpro.com/img/demo.png" 
     alt="Guide your users through a tour of your app" 
     style="height: auto; max-width: 800px; width: 100%;"/>
 </a>
@@ -82,8 +82,8 @@ If you have an idea or project in mind and would like to engage our team to buil
 ## Resources
 
 - [Website](https://shepherdpro.com/)
-- [Documentation](https://shepherdjs.dev/docs/)
-- [Demo](https://shepherdjs.dev/demo/)
+- [Documentation](https://docs.shepherdpro.com/)
+- [Demo](https://blog.shepherdpro.com/demo/)
 - If you have any questions about our projects you can email [hello@shepherdpro.com](mailto:hello@shepherdpro.com)
 
 

diff --git a/app/api/src/functions/auth.ts b/app/api/src/functions/auth.ts
@@ -1,5 +1,5 @@
 import type { APIGatewayProxyEvent, Context } from 'aws-lambda';
-
+import { PostHog } from 'posthog-node';
 import { DbAuthHandler } from '@redwoodjs/auth-dbauth-api';
 import type {
   DbAuthHandlerOptions,
@@ -11,7 +11,7 @@ import { db } from 'src/lib/db';
 import { generateAPIKey } from 'src/lib/utils';
 import {
   createSubscription,
-  getSubscriptionCheckoutUrl,
+  // getSubscriptionCheckoutUrl,
 } from 'src/services/subscriptions/subscriptions';
 import { sendResetEmail, sendWelcomeEmail } from 'src/services/emails';
 
@@ -20,6 +20,10 @@ interface UserAttributes {
   plan?: string;
 }
 
+const phDefaultClient = new PostHog(process.env.POSTHOG_API_KEY, {
+  host: 'https://us.posthog.com',
+});
+
 export const handler = async (
   event: APIGatewayProxyEvent,
   context: Context
@@ -144,7 +148,11 @@ export const handler = async (
         },
       });
 
-      const userPlan = 'alpha-usd-monthly';
+      // Chargebee plan ID for test site defaulted to caps and can't be edited
+      const userPlan =
+        process.env.NODE_ENV === 'development'
+          ? 'Alpha-USD-Monthly'
+          : 'alpha-usd-monthly';
 
       if (newUser) {
         sendWelcomeEmail({
@@ -162,6 +170,21 @@ export const handler = async (
           },
         });
 
+        phDefaultClient.capture({
+          distinctId: `shepherd-user-${newUser.id}`,
+          event: `Shepherd Signup`,
+          properties: {
+            $set: {
+              email: username,
+              name: userAttributes?.name,
+              plan: userPlan,
+            },
+          },
+          groups: {
+            account: newAccount.id,
+          },
+        });
+
         // TODO: Uncomment this when we are ready to start charging users
         // const { url } = await getSubscriptionCheckoutUrl({
         //   planId: userPlan,

diff --git a/app/api/src/mail/DemoRequest/DemoRequest.tsx b/app/api/src/mail/DemoRequest/DemoRequest.tsx
@@ -39,7 +39,7 @@ export function DemoRequest({ description, from, name, title, when }) {
       >
         <Body className="bg-offwhite font-sans text-base">
           <Img
-            src={`https://shepherdjs.dev/_astro/shepherd-head-wink.4Hb0MKKJ.svg`}
+            src={`https://blog.shepherdpro.com/_astro/shepherd-head-wink.4Hb0MKKJ.svg`}
             width="184"
             height="75"
             alt="Shepherd Pro logo"

diff --git a/app/api/src/mail/ResetPassword/ResetPassword.tsx b/app/api/src/mail/ResetPassword/ResetPassword.tsx
@@ -40,7 +40,7 @@ export function ResetPassword({ resetLink }) {
       >
         <Body className="bg-offwhite font-sans text-base">
           <Img
-            src={`https://shepherdjs.dev/_astro/shepherd-head-wink.4Hb0MKKJ.svg`}
+            src={`https://blog.shepherdpro.com/_astro/shepherd-head-wink.4Hb0MKKJ.svg`}
             width="184"
             height="75"
             alt="Shepherd Pro logo"

diff --git a/app/api/src/mail/Welcome/Welcome.tsx b/app/api/src/mail/Welcome/Welcome.tsx
@@ -40,7 +40,7 @@ export function WelcomeEmail() {
       >
         <Body className="bg-offwhite font-sans text-base">
           <Img
-            src={`https://shepherdjs.dev/_astro/shepherd-head-wink.4Hb0MKKJ.svg`}
+            src={`https://blog.shepherdpro.com/_astro/shepherd-head-wink.4Hb0MKKJ.svg`}
             width="184"
             height="75"
             alt="Shepherd Pro logo"

diff --git a/app/api/src/services/subscriptions/subscriptions.ts b/app/api/src/services/subscriptions/subscriptions.ts
@@ -66,12 +66,21 @@ export const createSubscription: MutationResolvers['createSubscription'] =
     } catch (error) {
       logger.error(`Error creating subscription: ${error.message}`);
     }
-    return db.subscription.create({
+    const newSub = await db.subscription.create({
       data: {
         ...input,
         chargeBeeCustomerId,
       },
     });
+
+    return db.user.update({
+      data: {
+        subscriptionId: newSub.id,
+      },
+      where: {
+        id: input.userId,
+      },
+    });
   };
 
 export const updateSubscriptionViaWebhook: MutationResolvers['updateSubscriptionViaWebhook'] =

diff --git a/app/web/src/components/DemoDialog/DemoDialog.tsx b/app/web/src/components/DemoDialog/DemoDialog.tsx
@@ -35,14 +35,16 @@ const DemoDialog = () => {
     // close the dialog and send the request regardless of response
     closeDialog();
 
-    const response = await requestDemo({ variables: { input: {
+    const response = await requestDemo({
+      variables: {
+        input: {
           description: data.description,
           from: data.email,
           name: data.name,
           subject: 'Shepherd Demo Request',
           title: data.title,
-        }
-      }
+        },
+      },
     });
     if (response.errors) {
       toast(response.errors[0].message);
@@ -120,16 +122,16 @@ const DemoDialog = () => {
             </div>
             <div className="mb-4">
               <label
-                className="mb-1 block text-md font-bold text-gray-800"
+                className="text-md mb-1 block font-bold text-gray-800"
                 htmlFor="description"
               >
                 How can we help you? What are your goals?
               </label>
               <TextAreaField
                 className="w-full border border-solid border-gray-300 p-[10px] font-bold shadow-default outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
                 name="description"
+                validation={{ required: true }}
               />
-
             </div>
             <div className="flex justify-center">
               <button

diff --git a/app/web/src/components/Footer/index.tsx b/app/web/src/components/Footer/index.tsx
@@ -13,9 +13,9 @@ const categories = [
     title: 'Shepherd',
     items: [
       { route: 'https://github.com/shepherd-pro/shepherd', title: 'Github' },
-      { route: 'https://shepherdjs.dev', title: 'Open Source Demo' },
+      { route: 'https://blog.shepherdpro.com/demo', title: 'Open Source Demo' },
       { route: 'https://docs.shepherdpro.com/', title: 'Open Source Docs' },
-      { route: 'https://shepherdjs.dev/blog', title: 'Blog' },
+      { route: 'https://blog.shepherdpro.com', title: 'Blog' },
     ],
   },
   // {

diff --git a/app/web/src/components/Navigation/UnAuthNav.tsx b/app/web/src/components/Navigation/UnAuthNav.tsx
@@ -67,6 +67,14 @@ export default function UnAuthNav() {
                     ★ on Github
                   </a>
                 </li>
+                <li>
+                  <a
+                    className="button w-full whitespace-nowrap border-2 border-navy bg-white p-4 text-navy"
+                    href="https://blog.shepherdpro.com"
+                  >
+                    Blog
+                  </a>
+                </li>
               </menu>
             </div>
           </div>
@@ -82,6 +90,15 @@ export default function UnAuthNav() {
             </a>
           </div>
 
+          <div className="mb-4 inline-block bg-navy lg:mr-4">
+            <a
+              className="star w-full whitespace-nowrap border-none bg-white p-4"
+              href="https://blog.shepherdpro.com"
+            >
+              Blog
+            </a>
+          </div>
+
           <div className="mb-4 inline-block bg-navy lg:mr-4">
             <button
               className="w-full whitespace-nowrap border-none bg-white p-4"

diff --git a/app/web/src/pages/PricingPage/PricingPage.tsx b/app/web/src/pages/PricingPage/PricingPage.tsx
@@ -74,7 +74,7 @@ const PricingPage = () => {
     <>
       <Metadata title="Pricing" description="Pricing for Shepherd Pro" />
 
-      <section className="relative mx-auto mb-20 flex w-full flex-col items-center 2xl:max-w-7xl">
+      <section className="relative mx-auto mb-20 flex w-full flex-col items-center 2xl:max-w-5xl">
         <div className="mx-auto w-full border-b-2 border-black">
           <div className="relative mx-auto max-w-3xl items-center justify-center p-8 text-center lg:p-12 2xl:px-0">
             <h1 className="font-heading text-3xl tracking-tight text-black lg:text-5xl">
@@ -109,11 +109,11 @@ const PricingPage = () => {
               <span className="italic">{`(15% discounts on annual)`}</span>
             </div> */}
           </div>
-          <div className="grid grid-cols-1 gap-0.5 border-2 border-black bg-black lg:grid-cols-2">
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
             {pricingPlans.map((plan, index) => (
               <div
                 key={index}
-                className={`flex flex-col justify-start ${plan.backgroundColor} gap-12 p-8 lg:p-12`}
+                className={`flex flex-col justify-start ${plan.backgroundColor} gap-12 border-2 border-black p-8 lg:p-12`}
               >
                 <div className="h-full rounded-3xl border-2 border-black bg-white p-8 shadow">
                   <div className="inline-flex w-full items-center justify-between font-semibold">
@@ -129,16 +129,21 @@ const PricingPage = () => {
                           {annual ? plan.annualPrice : plan.monthlyPrice}
                         </span>
                         <span className="text-base font-medium tracking-wide">
-                          {annual ? '(billed annually)' : '/m'}
+                          {annual ? '(billed annually)' : '/month'}
                         </span>
                       </>
                     ) : (
                       <span>Custom</span>
                     )}
                   </div>
-                  <p className="mt-8 text-sm tracking-wide lg:text-xl">
-                    {plan.description}
-                  </p>
+                  <button
+                    className="focus:ring-lila-700 hover:text-lila-800 inline-flex h-16 w-full transform items-center justify-center rounded-lg border-2 border-black bg-white px-6 py-3 text-center text-lg font-semibold text-black transition-all duration-100 ease-in-out focus:translate-y-1 focus:bg-black focus:text-white focus:shadow-none focus:outline-none sm:w-auto"
+                    onClick={() => {
+                      plan.buttonLink('alpha-monthly');
+                    }}
+                  >
+                    {plan.buttonText}
+                  </button>
                 </div>
                 <ul className="mt-2 space-y-8 text-base leading-6 tracking-wide">
                   {plan.features.map((feature, idx) => (
@@ -163,15 +168,9 @@ const PricingPage = () => {
                     </li>
                   ))}
                 </ul>
-
-                <button
-                  className="focus:ring-lila-700 hover:text-lila-800 inline-flex h-16 w-full transform items-center justify-center rounded-lg border-2 border-black bg-white px-6 py-3 text-center text-lg font-semibold text-black transition-all duration-100 ease-in-out focus:translate-y-1 focus:bg-black focus:text-white focus:shadow-none focus:outline-none sm:w-auto"
-                  onClick={() => {
-                    plan.buttonLink('alpha-monthly');
-                  }}
-                >
-                  {plan.buttonText}
-                </button>
+                <p className="mt-8 text-sm tracking-wide lg:text-xl">
+                  {plan.description}
+                </p>
               </div>
             ))}
           </div>

diff --git a/docs-src/src/content/docs/recipes/cookbook.md b/docs-src/src/content/docs/recipes/cookbook.md
@@ -59,7 +59,7 @@ const tour = new Shepherd.Tour({
 Using the already exposed API, you could add a progress indicator of your choosing
 for each step to let your users know how far into a tour they may be.
 
-The example below uses the [Step](https://shepherdjs.dev/docs/Step.html) `options`
+The example below uses the [Step](https://docs.shepherdpro.com/api/step/classes/step/) `options`
 object and adds to `when` on the `show` event. Within that, we create an element
 to render in the header with text of what step out of all potential steps is now
 being show.

diff --git a/landing/astro.config.mjs b/landing/astro.config.mjs
@@ -6,9 +6,8 @@ import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [
-    mdx(),
-    sitemap(),
-    tailwind()
-  ]
+  integrations: [mdx(), sitemap(), tailwind()],
+  redirects: {
+    '/blog': '/'
+  }
 });
diff --git a/landing/package.json b/landing/package.json
@@ -17,6 +17,7 @@
     "@astrojs/sitemap": "^3.1.2",
     "@astrojs/tailwind": "^5.0.3",
     "astro": "^4.8.4",
+    "shepherd.js": "workspace:*",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   },