chore: adding achievement documentation

along with this, i added brand new `lastUpdated` and `folder` fields for the docs 👀

contentlayer.config.js

@@ -1,6 +1,6 @@
 import { defineDocumentType, makeSource } from "contentlayer/source-files";
 import rehypeSlug from "rehype-slug";
-import GithubSlugger from "github-slugger"
+import GithubSlugger from "github-slugger";
 
 export const Docs = defineDocumentType(() => ({
 	name: "Docs",
@@ -11,6 +11,14 @@ export const Docs = defineDocumentType(() => ({
 			type: "string",
 			required: true,
 		},
+		folder: {
+			type: "string",
+			required: false,
+		},
+		lastUpdated: {
+			type: "string",
+			required: false,
+		},
 	},
 	computedFields: {
 		url: {
@@ -21,7 +29,7 @@ export const Docs = defineDocumentType(() => ({
 			type: "json",
 			resolve: async (doc) => {
 				const headingsRegex = /\n(?<flag>#{1,6})\s+(?<content>.+)/g;
-        const slugger = new GithubSlugger()
+				const slugger = new GithubSlugger();
 				const headings = Array.from(doc.body.raw.matchAll(headingsRegex)).map(
 					({ groups }) => {
 						const flag = groups?.flag;
@@ -29,9 +37,9 @@ export const Docs = defineDocumentType(() => ({
 						return {
 							level: flag.length,
 							text: content,
-              slug: content ? slugger.slug(content) : undefined
+							slug: content ? slugger.slug(content) : undefined,
 						};
-          }
+					},
 				);
 				return headings;
 			},
@@ -39,4 +47,8 @@ export const Docs = defineDocumentType(() => ({
 	},
 }));
 
-export default makeSource({ contentDirPath: "docs", documentTypes: [Docs], mdx: {rehypePlugins: [rehypeSlug]} });
+export default makeSource({
+	contentDirPath: "docs",
+	documentTypes: [Docs],
+	mdx: { rehypePlugins: [rehypeSlug] },
+});

docs/advanced/achievements.mdx

@@ -1,10 +1,34 @@
 ---
 title: "Achievement Collection"
+folder: "Advanced"
 ---
 
+import { formalNames } from "@/config/achievements"
+
 # Achievements
 Achievements are a page that every server gets which contains certain requirements which could be embedded in an servers history.
 
 <Separator/>
 
-Achievements are *not* collected instantly, and are actually collected every 12 hours. (this is not timezone dependent) There are currently 5 possible achievements to get, ranging from easiest to hardest.
+These achievements are accessable using the "Achievements" tab on the left of any server page.
+Achievements are *not* collected instantly, and are collected every 12 hours when the server is online (this is not timezone dependent).
+There are currently {Object.keys(formalNames).length} possible achievements to get, ranging from easiest to hardest.
+
+## 1 thousand favorites achievement
+After getting 1 thousand favorites on MHSF, and your server is online during the achievement collection, *you will get this achievement showing* when you got **1,000 users to favorite your server**.
+<AchievementPreview title="has1kFavorites"/>
+
+## 1 thousand total joins achievement
+After getting 1 thousand total joins on Minehut, and your server is online during the achievement collection, *you will get this achievement showing* when you got **1,000 users to join your server**.
+<br/> Here is a preview:
+<AchievementPreview title="has1kTotalJoins"/>
+
+## 100 thousand favorites achievement
+After getting 100 thousand favorites on MHSF, and your server is online during the achievement collection, *you will get this achievement showing* when you got **100 thousand users to favorite your server**.
+<br/> Here is a preview:
+<AchievementPreview title="has100kFavorites"/>
+
+## 1 thousand total joins achievement
+After getting 100 thousand total joins on Minehut, and your server is online during the achievement collection, *you will get this achievement showing* when you got **100 thousand users to join your server**.
+<br/> Here is a preview:
+<AchievementPreview title="has100kTotalJoins"/>

docs/advanced/command-bar.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Using the Command-bar"
+folder: "Advanced"
 ---
 
 # Using the Command-bar

docs/advanced/external.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Troubleshooting: Making external servers on Minehut"
+folder: "Advanced"
 ---
 
 # External Servers on Minehut

docs/advanced/tech-stack.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Tech-stack"
+folder: "Advanced"
 ---
 
 # Teck Stack of MHSF

docs/getting-started.mdx

@@ -16,7 +16,7 @@ Wrappers usually communicate using an API that was provided by the service its s
 ## Why to use MHSF
 
 - **Faster response times** MHSF is completely ad-free, and as a result of being open-source, constantly tries to cut down on unnecessary things slowing down the page.
-- **Open-source & no tracking** As a result of being open-source, MHSF will never track or sell your to advertisers. Anybody can look at the code, and can be verified to be completely secure.
+- **Open-source & no tracking** As a result of being open-source, MHSF will never track or sell your data to advertisers. Anybody can look at the code, and can be verified to be completely secure.
 - **Make your server stand out** Server owners can configure after appropriate verification banners, Discord widgets, descriptions & color schemes.
 - **Customize your experience** Filters, sorts & different spacing settings can make your experience just how you like it while you are browsing servers.
 - **Better & more intuitive UX/UI** UI is a big point for MHSF, using UI designed to be more user friendly, and to be more straight-forward then Minehut's

docs/guides/customization.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Customization"
+folder: "Guides"
 ---
 
 # Customize your server

docs/guides/linking.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Linking your account"
+folder: "Guides"
 ---
 
 # Linking your Minecraft account

docs/guides/owning-a-server.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Own a server"
+folder: "Guides"
 ---
 
 # Owning a server

docs/guides/reporting-server.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Reporting a server"
+folder: "Guides"
 ---
 
 # Reporting a server

docs/legal/external-content-agreement.mdx

@@ -1,5 +1,7 @@
 ---
 title: "External Content Agreement"
+folder: "Legal"
+lastUpdated: "Sep. 10th 2024"
 ---
 
 # External Content Agreement (ECA)

src/app/docs/[[...slug]]/page.tsx

@@ -36,6 +36,8 @@ const PostLayout = ({ params }: { params: { slug: string[] } }) => {
     <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
       <div className="mx-auto w-full min-w-0">
         <div className="pb-12 pt-8 prose dark:prose-invert">
+          {doc.folder && <span>{doc.folder}</span>}{" "}
+          {doc.lastUpdated && <span> - last updated {doc.lastUpdated}</span>}{" "}
           <MDXContent
             components={{
               Separator,

src/components/feat/AchievementList.tsx

@@ -3,9 +3,9 @@ import type { Achievement } from "@/lib/types/achievement";
 import { useEffectOnce } from "@/lib/useEffectOnce";
 import { useState } from "react";
 import { Card, CardContent } from "../ui/card";
-import { Medal, Sparkle, Sparkles, Users } from "lucide-react";
 import { Skeleton } from "../ui/skeleton";
 import A from "../misc/Link";
+import { formalNames } from "@/config/achievements";
 
 export default function AchievementList({ server }: { server: string }) {
   const [achievements, setAchievements] = useState<
@@ -79,44 +79,7 @@ export default function AchievementList({ server }: { server: string }) {
   );
 }
 
-const formalNames = {
-  mostJoined: {
-    title:
-      "At one time, <b>this server had the most players on the platform!</b>",
-    description:
-      "This is awarded to servers that had the number 1 permission at the time of the achievements getting resolved.",
-    color: "#9aedff",
-    icon: Medal,
-  },
-  has1kFavorites: {
-    title: "This server has more than <b>1,000 favorites on MHSF!</b>",
-    description:
-      "This is awarded to servers that had 1,000 favorites at the time of the achievements getting resolved.",
-    color: "#d064ff",
-    icon: Sparkle,
-  },
-  has1kTotalJoins: {
-    title: "This server has more than <b>1,000 total joins on Minehut!</b>",
-    description:
-      "This is awarded to servers that had 1,000 total joins at the time of the achievements getting resolved.",
-    color: "#aefa1f",
-    icon: Users,
-  },
-  has100kFavorites: {
-    title: "This server has more than <b>100,000 favorites on MHSF!</b>",
-    description:
-      "This is awarded to servers that had 100,000 favorites at the time of the achievements getting resolved.",
-    color: "#fa5b07",
-    icon: Sparkles,
-  },
-  has100kTotalJoins: {
-    title: "This server has more than <b>100,000 total joins on Minehut!</b>",
-    description:
-      "This is awarded to servers that had 100,000 total joins at the time of the achievements getting resolved.",
-    color: "#bdcffa",
-    icon: Users,
-  },
-};
+
 
 type WithInterval<K> = K & {
   interval: number;

src/components/misc/MDXElements.tsx

@@ -1,5 +1,7 @@
 import { Book, ExternalLink, NotebookText } from "lucide-react";
 import type { SVGProps } from "react";
+import { Card, CardContent } from "../ui/card";
+import { formalNames } from "@/config/achievements";
 
 type MDXElementType = {
   [key: string]: (props: any) => JSX.Element;
@@ -21,9 +23,40 @@ const Discord = (props: SVGProps<SVGSVGElement>) => (
     />
   </svg>
 );
+function AchievementPreview({ title }: { title: string }) {
+  const Icon = formalNames[title].icon;
+  return (
+    <div>
+      <Card>
+        <CardContent className="pt-4">
+          <span
+            className="flex items-center"
+            style={{ color: formalNames[title].color }}
+          >
+            <Icon size={16} className="mr-2" />
+            <span
+              dangerouslySetInnerHTML={{
+                __html: formalNames[title].title,
+              }}
+            />
+          </span>
+          <p>{formalNames[title].description}</p>
+          <span className="text-sm text-muted-foreground">
+            Achieved on {new Date().getMonth()}/{new Date().getDate()}/
+            {new Date().getFullYear()}{" "}
+            <span className="text-muted-foreground/70">
+              {new Date().toLocaleTimeString()}
+            </span>
+          </span>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
 
 export const MDXElements: MDXElementType = {
   Discord,
+  AchievementPreview,
   Book: (props) => <Book {...props} />,
   Notebook: (props) => <NotebookText {...props} />,
   ExternalLink: (props) => <ExternalLink {...props} />,

src/config/achievements.ts

@@ -0,0 +1,57 @@
+import {
+	type LucideProps,
+	Medal,
+	Sparkle,
+	Sparkles,
+	Users,
+} from "lucide-react";
+import type { ForwardRefExoticComponent, RefAttributes } from "react";
+
+export const formalNames: FormalNames = {
+	mostJoined: {
+		title:
+			"At one time, <b>this server had the most players on the platform!</b>",
+		description:
+			"This is awarded to servers that had the number 1 permission at the time of the achievements getting resolved.",
+		color: "#9aedff",
+		icon: Medal,
+	},
+	has1kFavorites: {
+		title: "This server has more than <b>1,000 favorites on MHSF!</b>",
+		description:
+			"This is awarded to servers that had 1,000 favorites at the time of the achievements getting resolved.",
+		color: "#d064ff",
+		icon: Sparkle,
+	},
+	has1kTotalJoins: {
+		title: "This server has more than <b>1,000 total joins on Minehut!</b>",
+		description:
+			"This is awarded to servers that had 1,000 total joins at the time of the achievements getting resolved.",
+		color: "#aefa1f",
+		icon: Users,
+	},
+	has100kFavorites: {
+		title: "This server has more than <b>100,000 favorites on MHSF!</b>",
+		description:
+			"This is awarded to servers that had 100,000 favorites at the time of the achievements getting resolved.",
+		color: "#fa5b07",
+		icon: Sparkles,
+	},
+	has100kTotalJoins: {
+		title: "This server has more than <b>100,000 total joins on Minehut!</b>",
+		description:
+			"This is awarded to servers that had 100,000 total joins at the time of the achievements getting resolved.",
+		color: "#bdcffa",
+		icon: Users,
+	},
+};
+interface FormalNames {
+	[key: string]: {
+		title: string;
+		description: string;
+		color: string;
+		icon: ForwardRefExoticComponent<
+			Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
+		>;
+	};
+}