auto theme switch for comment

app/admission/page.tsx

@@ -24,6 +24,14 @@ export default function Admission() {
         <form onSubmit={handleSumbit} className="bg-white dark:bg-gray-950">
           <div className="mdx-content mb-8 font-sm text-gray-500 dark:text-gray-300">
             <BS />
+            <p>
+              <a
+                className="underline-animation font-semibold"
+                href="https://youtu.be/dQw4w9WgXcQ"
+              >
+                Watch the campus tour video
+              </a>
+            </p>
           </div>
           <div className="mb-4">
             <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">

app/components/comment.tsx

@@ -1,21 +1,27 @@
 "use client";
 import { useEffect, useState, useRef } from "react";
+import { useTheme } from "next-themes";
+
 {
   /* <script src="https://utteranc.es/client.js" repo="WildChickenUniversity/wcu-nextjs" issue-term="title"
         label="ADMISSION COMMENT" theme="github-light" crossorigin="anonymous" async>
         </script> */
 }
 
 export default function Comment() {
-  const [isClient, setIsClient] = useState(false);
+  const { systemTheme, theme, setTheme } = useTheme();
+  const currentTheme = theme === "system" ? systemTheme : theme;
+  const commentTheme =
+    currentTheme === "light" ? "github-light" : "github-dark";
+  const ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    setIsClient(true);
-  }, []);
+    if (!ref.current) {
+      return;
+    }
 
-  const ref = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
     const scriptElement = document.createElement("script");
+
     scriptElement.async = true;
     scriptElement.crossOrigin = "anonymous";
     scriptElement.src = "https://utteranc.es/client.js";
@@ -26,10 +32,26 @@ export default function Comment() {
       "repo",
       "WildChickenUniversity/WildChickenUniversity"
     );
-    scriptElement.setAttribute("theme", "github-light");
+    scriptElement.setAttribute("theme", commentTheme);
 
     ref.current?.appendChild(scriptElement);
-  }, []);
+  }, [commentTheme]);
+
+  useEffect(() => {
+    if (document.querySelector(".utterances-frame")) {
+      const iframe =
+        document.querySelector<HTMLIFrameElement>(".utterances-frame");
+
+      if (!iframe) {
+        return;
+      }
+
+      iframe?.contentWindow?.postMessage(
+        { type: "set-theme", theme: commentTheme },
+        "https://utteranc.es"
+      );
+    }
+  }, [commentTheme]);
 
   return <div ref={ref} />;
 }

app/diploma/page.tsx

@@ -27,7 +27,7 @@ export default function Diploma() {
       <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
         <NavPath path="certificate" />
         <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">
-          Too old for universities?
+          Too OLD for Universities?
         </h2>
         <form onSubmit={handleSumbit} className="bg-white dark:bg-gray-950">
           <div className="mb-8 font-sm text-gray-500 dark:text-gray-300 ">
@@ -54,6 +54,14 @@ export default function Diploma() {
                 <a href="https://en.wikipedia.org/wiki/Diploma">src</a>
               </sup>
             </p>
+            <p>
+              <a
+                className="mt-2 underline-animation font-semibold"
+                href="https://youtu.be/dQw4w9WgXcQ"
+              >
+                Watch the campus tour video
+              </a>
+            </p>
           </div>
           <div className="mb-4 ">
             <label className="block mb-2  text-sm font-medium text-gray-900 dark:text-gray-300">

app/globals.css

@@ -141,4 +141,8 @@ home {
     font-size: 15px;
     /* Smaller font size for mobile */
   }
+}
+
+.mdx-content p {
+  @apply mt-1 mt-2
 }

app/pages/about/page.mdx

@@ -30,9 +30,30 @@ One of our Chicklumni created this [game](https://cianokias.itch.io/wild-chicken
 
         <iframe frameborder="0" src="https://itch.io/embed/1361579" width="552" height="167"><a href="https://cianokias.itch.io/wild-chicken-university">野鸡大学 by Ziduan</a></iframe>
 
-## Enough BS, WTF is wcu?
+## Why Wild Chicken University?
 
-Wild Chicken University (also known as a diploma mill or degree mill) is an organization that awards academic degrees and diplomas with substandard or no academic study and without recognition by official educational accrediting bodies. The purchaser can then claim to hold an academic degree, and the organization is motivated by making a profit. These degrees are often awarded based on vaguely construed life experience. Some such organizations claim accreditation by non-recognized/unapproved accrediting bodies set up for the purposes of providing a veneer of authenticity. While the terms "degree mill" and "diploma mill" are commonly used interchangeably, within the academic community a distinction is sometimes drawn: 
+note: some of the content is copied from an actual application essay submitted to MIT. 
+
+When my friends first stumbled upon this website, they laughed aloud. 
+A project as a parody to the college application system and a domain name to match is, perhaps, ludicrous. 
+
+The college application season generates considerable anxiety among students who are waiting to have 
+their futures decided by an admissions board, people who you never met/talked to before. Wild Chicken University 
+was created shortly after one of our member got rejected by their early decision university. The idea behind it was simply 
+to add levity to a stressful process, and make fun of the broken system. 
+
+[Not everyone can get an SAT score of 1669 and a 4.69/4.0 GPA.](https://youtu.be/DFia7FhVmuM)
+
+
+## Why the name?
+
+Wild Chicken University (known as a diploma mill or degree mill in Chiense 野雞大學) is an organization that awards academic degrees 
+and diplomas with substandard or no academic study and without recognition by official educational accrediting bodies. 
+The purchaser can then claim to hold an academic degree, and the organization is motivated by making a profit. 
+These degrees are often awarded based on vaguely construed life experience. 
+Some such organizations claim accreditation by non-recognized/unapproved accrediting bodies set up for the purposes of providing 
+a veneer of authenticity. While the terms "degree mill" and "diploma mill" are commonly used interchangeably, within 
+the academic community a distinction is sometimes drawn: 
 
 - A "degree mill" issues "real" diplomas from non regionally accredited "universities", which may be legal in some states but are generally illegitimate universities. 
 - A "diploma mill" issues counterfeit diplomas which bear the names of legitimate universities. 

app/pages/privacy/page.mdx

@@ -1,6 +1,30 @@
+import NavPath from "../../components/nav-path"
 
+        <NavPath path="privacy" />
 
-# Possible things made impossible
+# Privacy Policy
 
-Wild Chicken University is a FRONT-END ONLY project. We cannot see any of your information.
-We CANNOT upload any of your data to our servers(actually, we don't even have any servers lmfao) 
+## <s>Chicken don't need privacy, they want to exchange privacy for convience.</s> 
+
+Are you expecting something like: Wild Chicken University fully respects your right to privacy, and will not collect or publish any personal information about you through this website without your clear permission.
+Or something like Google's pages long, nobody reads policy?
+
+Control over your privacy inside most apps is an illusion. 
+It's a shiny dashboard with all sorts of choices you can make about your data, but rarely the choices you're looking for, 
+like "only use my data to help me." 
+This type of control is meant to make you feel guilty about your choices, that you "had the choice" to make the 
+apps you use more private, and you chose not to. So we make things simple for you, **Wild Chicken University** is a FRONT-END ONLY project. We cannot see any of your information.
+We CANNOT upload any of your data to our servers (actually, we don't even have any servers) 
+
+## Log Data
+
+Wild Chicken University does not log, write or retain any data.
+
+## Information Collected and use
+
+Wild Chicken University does not collect any personal information.
+
+## However
+
+Please review the [privacy policy](https://github.com/utterance/utterances/blob/master/PRIVACY-POLICY.md) 
+of utterance (the comment section provider) before you post to the comment section.