General tweaks to the site (#6)

Author: carletex

packages/nextjs/app/faqs/page.tsx

@@ -1,8 +1,5 @@
-import Link from "next/link";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
-// ToDo:
-// - Review the existing FAQs
-// - Talk about the deployed network (Optimism?) / real ETH
 const faqs = [
   {
     id: 1,
@@ -16,7 +13,7 @@ const faqs = [
     question: "How should I complete the challenges?",
     answer:
       "Advanced players may use any means necessary to progress through the challenges. We recommend that beginners use this Scaffold ETH extension that contains everything you need to play the game and test your solutions locally:",
-    link: "https://github.com/buidlguidl/ctf-devcon",
+    link: "https://github.com/buidlguidl/ctf.buidlguidl.com/tree/extension",
   },
   {
     id: 3,
@@ -28,7 +25,7 @@ const faqs = [
     id: 4,
     question: "What chain/network is this game on?",
     answer:
-      "The challenges are deployed on Optimism mainnet. You will need to use real ETH on Optimism in order to complete the challenges.",
+      "The challenges are deployed on Optimism mainnet. You will need to use real ETH on Optimism in order to complete the challenges. But you can always play locally!",
   },
   {
     id: 5,
@@ -51,6 +48,11 @@ const faqs = [
   },
 ];
 
+export const metadata = getMetadata({
+  title: "FAQs",
+  description: "Check out the FAQs for the BuidlGuidl CTF",
+});
+
 export default function FaqsPage() {
   return (
     <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
@@ -65,9 +67,9 @@ export default function FaqsPage() {
               <dd className="mt-2 text-base/7 text-gray-200">
                 {faq.answer}{" "}
                 {faq.link && (
-                  <Link className="text-primary link" href={faq.link}>
+                  <a className="text-primary link" href={faq.link} target="_blank">
                     {faq.link}
-                  </Link>
+                  </a>
                 )}
               </dd>
             </div>

packages/nextjs/app/profile/[address]/page.tsx

@@ -1,13 +1,23 @@
 import Image from "next/image";
 import { UserData } from "~~/components/UserData";
 import { getChallenges } from "~~/utils/getChallenges";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
 interface ProfilePageProps {
   params: {
     address: string;
   };
 }
 
+export async function generateMetadata({ params }: ProfilePageProps) {
+  const { address } = params;
+  const displayAddress = address?.slice(0, 4) + "..." + address?.slice(-4);
+  return getMetadata({
+    title: `${displayAddress} Profile`,
+    description: `Check out ${address} progress in the BuidlGuidl CTF`,
+  });
+}
+
 export default async function ProfilePage({ params }: ProfilePageProps) {
   const { address } = params;
   const challenges = await getChallenges();

packages/nextjs/app/stats/layout.tsx

@@ -0,0 +1,10 @@
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({
+  title: "Stats",
+  description: "Check out the stats for the BuidlGuidl CTF",
+});
+
+export default function StatsLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

packages/nextjs/data/challenges/1.md

@@ -10,14 +10,12 @@ Try to complete as many challenges as possible and get all the flags back from t
 
 ## Player Progress
 
-Check your progress by visiting `/profile/{YourRegisteredAddress}`.
-
-You may also connect your registered Ethereum address to this website and view your progress by clicking on "My Flags".
+Check your progress by connecting your Ethereum Wallet with the address you are using to play the game and click on "My Flags" at the top of the page.
 
 ## Hints
 
 - You can use the [/debug](/debug) page or [ABI Ninja](https://abi.ninja/) to interact with the contract
-- We recommend beginners use this [Scaffold ETH extension](https://github.com/buidlguidl/ctf.buidlguidl.com/tree/ctf-extension) that contains everything you need to play the game and test your solutions locally. Advanced players may use any means necessary to progress.
+- We recommend beginners use this [Scaffold ETH CTF extension](https://github.com/buidlguidl/ctf.buidlguidl.com/tree/extension) that contains everything you need to play the game and test your solutions locally. Advanced players may use any means necessary to progress.
 - After Challenge #1, you may complete the other challenges in any order.
 
 ## FAQs