feat: improve seo and add pwa support

.env.sample

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_URL=http://localhost:4000/v1
 UMAMI_URL=<your-umami-url>
 UMAMI_WEBSITE_ID=<your-umami-website-id>
+PROD_DOMAIN=<your-production-domain>

.gitignore

@@ -43,3 +43,5 @@ next-env.d.ts
 
 *storybook.log
 storybook-static
+
+certificates

src/app/(app)/exchange/layout.tsx

@@ -0,0 +1,48 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Exchange | Pombo",
+  description:
+    "Don't like your schedule? Easily swap classes with other students",
+  openGraph: {
+    url: "/exchange",
+    type: "website",
+    title: "Exchange | Pombo",
+    description:
+      "Don't like your schedule? Easily swap classes with other students",
+    images: [
+      {
+        url: "/images/og.png",
+        width: 1200,
+        height: 630,
+        alt: process.env.PROD_DOMAIN,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Exchange | Pombo",
+    description:
+      "Don't like your schedule? Easily swap classes with other students",
+    images: [
+      {
+        url: "/images/og.png",
+        width: 1200,
+        height: 630,
+        alt: process.env.PROD_DOMAIN,
+      },
+    ],
+  },
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+export default function ExchangeLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return children;
+}

src/app/(app)/exchange/page.tsx

@@ -1,11 +1,6 @@
 import MainSection from "@/components/exchange/main-section";
 import SideSection from "@/components/exchange/side-section";
 import { AuthCheck } from "@/components/auth-check";
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Pombo | Exchange",
-};
 
 export default function Exchange() {
   return (

src/app/(app)/layout.tsx

@@ -1,5 +1,43 @@
+import { Metadata } from "next";
 import { AuthCheck } from "@/components/auth-check";
 import Navbar from "@/components/navbar";
+import { InstallPromptProvider } from "@/contexts/install-prompt-provider";
+
+export const metadata: Metadata = {
+  title: "Calendar | Pombo",
+  description: "Keep track of your calendar and don't miss a single deadline",
+  openGraph: {
+    url: "/",
+    type: "website",
+    title: "Calendar | Pombo",
+    description: "Keep track of your calendar and don't miss a single deadline",
+    images: [
+      {
+        url: "/images/og.png",
+        width: 1200,
+        height: 630,
+        alt: process.env.PROD_DOMAIN,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Calendar | Pombo",
+    description: "Keep track of your calendar and don't miss a single deadline",
+    images: [
+      {
+        url: "/images/og.png",
+        width: 1200,
+        height: 630,
+        alt: process.env.PROD_DOMAIN,
+      },
+    ],
+  },
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
 
 export default function AppLayout({
   children,
@@ -8,12 +46,14 @@ export default function AppLayout({
 }>) {
   return (
     <AuthCheck shouldBeLoggedIn>
-      <div className="flex h-dvh flex-col">
-        <Navbar />
-        <main className="min-h-0 flex-1 px-5 pt-3.5 pb-7.5 antialiased md:px-7.5">
-          {children}
-        </main>
-      </div>
+      <InstallPromptProvider>
+        <div className="flex h-dvh flex-col">
+          <Navbar />
+          <main className="min-h-0 flex-1 px-5 pt-3.5 pb-7.5 antialiased md:px-7.5">
+            {children}
+          </main>
+        </div>
+      </InstallPromptProvider>
     </AuthCheck>
   );
 }

src/app/(app)/page.tsx

@@ -1,16 +1,10 @@
-import { Metadata } from "next";
 import EventsCalendar from "@/components/events-calendar";
 import CalendarOptions from "@/components/calendar-options";
 
-export const metadata: Metadata = {
-  title: "Pombo | Calendar",
-};
-
 export default function Home() {
   return (
     <div className="flex h-full flex-col-reverse gap-5 md:flex-row md:gap-8">
       <CalendarOptions />
-
       <EventsCalendar />
     </div>
   );

src/app/(app)/schedule/layout.tsx

@@ -0,0 +1,45 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Schedule | Pombo",
+  description: "Keep track of your timetable and don't miss a single class",
+  openGraph: {
+    url: "/schedule",
+    type: "website",
+    title: "Schedule | Pombo",
+    description: "Keep track of your timetable and don't miss a single class",
+    images: [
+      {
+        url: "/images/og.png",
+        width: 1200,
+        height: 630,
+        alt: process.env.PROD_DOMAIN,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Schedule | Pombo",
+    description: "Keep track of your timetable and don't miss a single class",
+    images: [
+      {
+        url: "/images/og.png",
+        width: 1200,
+        height: 630,
+        alt: process.env.PROD_DOMAIN,
+      },
+    ],
+  },
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+export default function ScheduleLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return children;
+}

src/app/(app)/schedule/page.tsx

@@ -1,14 +1,8 @@
-import { Metadata } from "next";
 import ScheduleCalendar from "@/components/schedule-calendar";
-
 import { ScheduleProvider } from "@/contexts/schedule-provider";
 import CalendarOptions from "@/components/calendar-options";
 import { AuthCheck } from "@/components/auth-check";
 
-export const metadata: Metadata = {
-  title: "Pombo | Schedule",
-};
-
 export default function Schedule() {
   return (
     <AuthCheck userTypes={["student"]}>

src/app/(app)/settings/account/page.tsx

@@ -102,87 +102,92 @@ export default function Account() {
   const changePassword = useChangePassword();
 
   return (
-    <SettingsWrapper title="Account and profile">
-      <div className="flex flex-col items-center md:items-start">
-        <title>Pombo | Account</title>
-
-        <div className="w-full max-w-md space-y-5 md:max-w-none md:space-y-10">
-          <section className="flex items-center justify-center gap-5 md:items-start md:justify-start md:gap-7.5">
-            <Avatar
-              name={user.data?.name}
-              className="size-25 md:size-30 lg:size-35"
-            />
-            <div className="space-y-1 md:pt-3.5">
-              <h2 className="text-dark text-xl font-semibold sm:text-2xl lg:text-3xl">
-                {firstLastName(user.data?.name)}
-              </h2>
-              <p className="text-sm font-semibold md:text-base">
-                {user.data?.email}
-              </p>
-            </div>
-          </section>
-
-          <section className="flex flex-col items-center gap-3.5 md:items-start">
-            <h2 className="text-xl font-semibold md:text-2xl">Information</h2>
-            <div className="flex w-full max-w-3xl flex-col gap-1.5">
-              <InputLine
-                disabled
-                label="Full Name"
-                value={user.data?.name || "user name"}
+    <>
+      <title>Account | Pombo</title>
+      <SettingsWrapper title="Account and profile">
+        <div className="flex flex-col items-center md:items-start">
+          <div className="w-full max-w-md space-y-5 md:max-w-none md:space-y-10">
+            <section className="flex items-center justify-center gap-5 md:items-start md:justify-start md:gap-7.5">
+              <Avatar
+                name={user.data?.name}
+                className="size-25 md:size-30 lg:size-35"
               />
-              <InputLine
-                disabled
-                label="Email"
-                value={user.data?.email || "user email"}
-              />
-              <form onSubmit={handleSubmit(onSubmit)} className="space-y-1.5">
-                <InputLine
-                  id="current_password"
-                  type="password"
-                  className="mt-6"
-                  label="Current password"
-                  value={"current_password"}
-                  placeholder="Current password"
-                  {...register("current_password", { required: true })}
-                  errorMessage={errors.current_password?.message}
-                />
+              <div className="space-y-1 md:pt-3.5">
+                <h2 className="text-dark text-xl font-semibold sm:text-2xl lg:text-3xl">
+                  {firstLastName(user.data?.name)}
+                </h2>
+                <p className="text-sm font-semibold md:text-base">
+                  {user.data?.email}
+                </p>
+              </div>
+            </section>
+
+            <section className="flex flex-col items-center gap-3.5 md:items-start">
+              <h2 className="text-xl font-semibold md:text-2xl">Information</h2>
+              <div className="flex w-full max-w-3xl flex-col gap-1.5">
                 <InputLine
-                  id="password"
-                  type="password"
-                  label="New password"
-                  value={"password"}
-                  placeholder="New password"
-                  {...register("password", { required: true })}
-                  errorMessage={errors.password?.message}
+                  disabled
+                  label="Full Name"
+                  value={user.data?.name || "user name"}
                 />
                 <InputLine
-                  id="password_confirmation"
-                  type="password"
-                  label="Confirm password"
-                  value={"password_confirmation"}
-                  placeholder="Confirm password"
-                  {...register("password_confirmation", { required: true })}
-                  errorMessage={errors.password_confirmation?.message}
+                  disabled
+                  label="Email"
+                  value={user.data?.email || "user email"}
                 />
-                <button
-                  type="submit"
-                  className="bg-primary-400 hover:bg-primary-400/95 mt-6 cursor-pointer rounded-lg px-4 py-2 font-semibold text-white transition-all duration-200 hover:scale-98 md:w-1/3"
-                >
-                  Change Password
-                </button>
-
-                {changePassword.isSuccess && (
-                  <p className="text-dark/50">Password Changed Successfully</p>
-                )}
-
-                {changePassword.isError && (
-                  <p className="text-dark/50">{changePassword.error.message}</p>
-                )}
-              </form>
-            </div>
-          </section>
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-1.5">
+                  <InputLine
+                    id="current_password"
+                    type="password"
+                    className="mt-6"
+                    label="Current password"
+                    value={"current_password"}
+                    placeholder="Current password"
+                    {...register("current_password", { required: true })}
+                    errorMessage={errors.current_password?.message}
+                  />
+                  <InputLine
+                    id="password"
+                    type="password"
+                    label="New password"
+                    value={"password"}
+                    placeholder="New password"
+                    {...register("password", { required: true })}
+                    errorMessage={errors.password?.message}
+                  />
+                  <InputLine
+                    id="password_confirmation"
+                    type="password"
+                    label="Confirm password"
+                    value={"password_confirmation"}
+                    placeholder="Confirm password"
+                    {...register("password_confirmation", { required: true })}
+                    errorMessage={errors.password_confirmation?.message}
+                  />
+                  <button
+                    type="submit"
+                    className="bg-primary-400 hover:bg-primary-400/95 mt-6 cursor-pointer rounded-lg px-4 py-2 font-semibold text-white transition-all duration-200 hover:scale-98 md:w-1/3"
+                  >
+                    Change Password
+                  </button>
+
+                  {changePassword.isSuccess && (
+                    <p className="text-dark/50">
+                      Password Changed Successfully
+                    </p>
+                  )}
+
+                  {changePassword.isError && (
+                    <p className="text-dark/50">
+                      {changePassword.error.message}
+                    </p>
+                  )}
+                </form>
+              </div>
+            </section>
+          </div>
         </div>
-      </div>
-    </SettingsWrapper>
+      </SettingsWrapper>
+    </>
   );
 }