Merge pull request #133 from SJSUCSClub/132-improve-privacy-policy-to…

…s-robotsts-and-ui-tweaks

[Improve] privacy policy, tos, robots.ts, and UI tweaks + bump down react to 18

app/(main)/courses/(page)/@featured/page.tsx

@@ -14,9 +14,9 @@ export default async function Page() {
 
   return (
     <>
-      <div className="py-lg text-h2-mobile lg:text-h2-desktop">
+      <h1 className="pb-md pt-xl max-lg:text-h2-mobile lg:text-h2-desktop">
         <span className="text-primary">Top Rated</span> Courses
-      </div>
+      </h1>
 
       <div className="flex w-full flex-row flex-wrap items-center justify-around gap-[20px]">
         {data.highest_rated.map(

app/(main)/courses/(page)/@name/page.tsx

@@ -34,10 +34,9 @@ export default async function Page() {
 
   return (
     <>
-      <div className="py-lg text-h2-mobile lg:text-h2-desktop">
+      <h1 className="pb-md pt-xl max-lg:text-h2-mobile lg:text-h2-desktop">
         Courses <span className="text-primary">by Department</span>
-      </div>
-
+      </h1>
       <div className="flex flex-col gap-[20px]">
         {components.map(({ letter, departments }) => (
           <Card key={letter} className="flex flex-col gap-[20px] p-[20px]">

app/(main)/privacy/page.tsx

@@ -0,0 +1,27 @@
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import React from 'react';
+
+export default async function Page() {
+  const res = await fetch(
+    process.env.NEXT_PUBLIC_BASE_URL + '/privacy-policy.md',
+  );
+  const markdown = await res.text();
+  return (
+    <main>
+      <section className="mx-auto flex w-full max-w-content-width items-stretch px-md">
+        <div className="flex w-full flex-col items-center justify-between gap-xxl py-xxl">
+          <div>
+            <h1 className="pb-sm max-lg:text-h3-mobile lg:text-h3-desktop">
+              Privacy Policy
+            </h1>
+          </div>
+          <div>
+            <article className="prose dark:prose-invert">
+              <MDXRemote source={markdown} />
+            </article>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

app/(main)/professors/(page)/@featured/page.tsx

@@ -14,10 +14,9 @@ export default async function Page() {
 
   return (
     <>
-      <div className="py-lg text-h2-mobile lg:text-h2-desktop">
+      <h1 className="pb-md pt-xl max-lg:text-h2-mobile lg:text-h2-desktop">
         <span className="text-primary">Top Rated</span> Professors
-      </div>
-
+      </h1>
       <div className="flex w-full flex-row flex-wrap items-center justify-around gap-[20px]">
         {data.highest_rated.map(({ name, id, avg_rating, total_reviews }) => (
           <Card key={name} className="h-[150px] w-[300px] lg:h-[300px]">

app/(main)/professors/(page)/@name/page.tsx

@@ -16,10 +16,9 @@ export default function Page() {
   }
   return (
     <>
-      <div className="py-lg text-h2-mobile lg:text-h2-desktop">
+      <h1 className="pb-md pt-xl max-lg:text-h2-mobile lg:text-h2-desktop">
         Professors <span className="text-primary">by Last Name</span>
-      </div>
-
+      </h1>
       <div className="flex flex-col">
         <SWRConfigProvider>
           <div className="flex flex-col gap-[20px]">{components}</div>

app/(main)/terms/page.tsx

@@ -0,0 +1,27 @@
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import React from 'react';
+
+export default async function Page() {
+  const res = await fetch(
+    process.env.NEXT_PUBLIC_BASE_URL + '/terms-of-service.md',
+  );
+  const markdown = await res.text();
+  return (
+    <main>
+      <section className="mx-auto flex w-full max-w-content-width items-stretch px-md">
+        <div className="flex w-full flex-col items-center justify-between gap-xxl py-xxl">
+          <div>
+            <h1 className="pb-sm max-lg:text-h3-mobile lg:text-h3-desktop">
+              Terms of Service
+            </h1>
+          </div>
+          <div>
+            <article className="prose dark:prose-invert">
+              <MDXRemote source={markdown} />
+            </article>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

app/robots.ts

@@ -0,0 +1,24 @@
+import type { MetadataRoute } from 'next';
+import { generateSitemaps as generateCoursesSitemaps } from '@/app/(main)/courses/sitemap';
+import { generateSitemaps as generateProfessorsSitemaps } from '@/app/(main)/professors/sitemap';
+
+export default async function robots(): Promise<MetadataRoute.Robots> {
+  const coursesSitemaps = (await generateCoursesSitemaps()).map(
+    (_, index) => `${process.env.NEXT_PUBLIC_BASE_URL}/courses/${index}.xml`,
+  );
+  const professorsSitemaps = (await generateProfessorsSitemaps()).map(
+    (_, index) => `${process.env.NEXT_PUBLIC_BASE_URL}/professors/${index}.xml`,
+  );
+  const bridgeSitemaps = coursesSitemaps.concat(professorsSitemaps);
+
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/profile',
+    },
+    sitemap: [`${process.env.NEXT_PUBLIC_BASE_URL}/sitemap.xml`].concat(
+      bridgeSitemaps,
+    ),
+  };
+}

app/sitemap.ts

@@ -20,5 +20,23 @@ export default function sitemap(): MetadataRoute.Sitemap {
       // changeFrequency: 'monthly',
       priority: 0.8,
     },
+    {
+      url: `${process.env.NEXT_PUBLIC_BASE_URL}/compare`,
+      lastModified: new Date().toISOString(),
+      // changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: `${process.env.NEXT_PUBLIC_BASE_URL}/privacy`,
+      lastModified: new Date().toISOString(),
+      // changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: `${process.env.NEXT_PUBLIC_BASE_URL}/terms`,
+      lastModified: new Date().toISOString(),
+      // changeFrequency: 'monthly',
+      priority: 0.8,
+    },
   ];
 }

components/organisms/footer/component.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import ACMCSLogo from '@/assets/acm-cs-logo.svg';
 import { ColorModePicker } from '@/components/molecules';
+import { LinkBtn } from '@/components/atoms';
 
 export const Footer: React.FC = () => {
   return (
@@ -11,10 +12,23 @@ export const Footer: React.FC = () => {
         alt="acm-cs-logo"
       />
       <div className="flex flex-col items-center">
-        <p className="text-center">
+        <p className="pb-sm text-center">
           Brought to you by ACM-CS@SJSU © 2024. All Rights Reserved.
         </p>
-        <p className="text-center">Room MQH 227</p>
+        <LinkBtn
+          variant="tertiary"
+          className="hover-underline rounded-sm p-0 pb-xs font-normal text-inherit"
+          href="/privacy"
+        >
+          Privacy Policy
+        </LinkBtn>
+        <LinkBtn
+          variant="tertiary"
+          className="hover-underline rounded-sm p-0 font-normal text-inherit"
+          href="/terms"
+        >
+          Terms of Service
+        </LinkBtn>
       </div>
       <ColorModePicker />
     </footer>

components/organisms/schedule/component.tsx

@@ -62,7 +62,7 @@ export const Schedule: React.FC<Props> = (props) => (
             </span>
           ))}
         </div>
-        <div className="flex flex-col items-end justify-center">
+        <div className="flex flex-col justify-center max-lg:items-center lg:items-end">
           <p className="text-small-lg font-bold">
             {props.times.split('-').join(' - ')}
           </p>