feat: finish extension page

onesoft-sudo · Feb 6, 2024 · 5b377c3 · 5b377c3
1 parent 58171db
commit 5b377c3
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 26 deletions.
diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -0,0 +1,7 @@
+import type { MDXComponents } from "mdx/types";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+    return {
+        ...components,
+    };
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,10 @@
+import mdx from "@next/mdx";
+
+const withMDX = mdx();
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
+};
 
-export default nextConfig;
+export default withMDX(nextConfig);
diff --git a/package.json b/package.json
@@ -12,16 +12,22 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "@mui/material": "^5.15.7",
+    "@next/mdx": "^14.1.0",
+    "@types/mdx": "^2.0.11",
     "date-fns": "^3.3.1",
     "next": "14.1.0",
+    "next-mdx-remote": "^4.4.1",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.0",
     "@commitlint/config-conventional": "^18.6.0",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -33,4 +39,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}
diff --git a/src/app/extension/[id]/page.tsx b/src/app/extension/[id]/page.tsx
@@ -1,9 +1,11 @@
 import ExtensionInfoList from "@/components/Extension/ExtensionInfoList";
 import ExtensionSecurity from "@/components/Extension/ExtensionSecurity";
-import ImageWithSkeleton from "@/components/Image/ImageWithSkeleton";
+import ExtensionIcon from "@/components/Extension/Extensionicon";
+import { Divider } from "@/components/Layout/Divider";
 import { APIExtension } from "@/types/APIExtension";
 import { ServerSidePageProps } from "@/types/ServerSidePageProps";
 import { Button, Container } from "@mui/material";
+import { MDXRemote } from "next-mdx-remote/rsc";
 import { MdDownload } from "react-icons/md";
 
 async function getExtensionInformation(id: string): Promise<APIExtension> {
@@ -24,6 +26,8 @@ async function getExtensionInformation(id: string): Promise<APIExtension> {
         icon: "https://res.cloudinary.com/rakinar2/image/upload/v1707213937/antirickroll_qqvfgg.png",
         security: "safe",
         lastUpdated: new Date("2021-10-05T00:00:00Z"),
+        readmeFileName: "README.md",
+        readmeContents: `# Anti RickRoll\n\nPrevent rickroll links from being sent in your server.\n\n## Installation\n\n1. Go to the [homepage](https://example.com) of the extension.\n2. Click on the "Install" button.\n\n## License\n\nThis extension is licensed under the [GPL-3.0-or-later](https://spdx.org/licenses/GPL-3.0-or-later.html) license.\n\n## Issues\n\nIf you find any issues with the extension, please report them [here](https://example.com).`,
     };
 }
 
@@ -34,18 +38,34 @@ export default async function ExtensionPage({ params }: ServerSidePageProps) {
     return (
         <Container>
             <main className="my-5 lg:my-10">
-                <div className="grid grid-cols-[1fr_3fr_1fr] gap-5">
-                    <ImageWithSkeleton
-                        component="img"
-                        src={extension.icon ?? ""}
-                        skeleton={!extension.icon}
-                        alt="Extension icon"
-                        className="rounded-lg"
-                        height={200}
-                        width={200}
-                    />
-                    <ExtensionInfoList extension={extension} />
-                    <div className="flex justify-end items-start">
+                <div className="grid grid-cols-[80px_auto] md:grid-cols-[1fr_3fr_1fr] gap-3 md:gap-5">
+                    <ExtensionIcon icon={extension.icon} />
+
+                    <div className="relative md:hidden">
+                        <h1 className="text-2xl md:text-3xl lg:text-4xl">
+                            {extension.name}
+                        </h1>
+                        <p className="text-[#555] dark:text-[#999] text-sm md:text-base break-all pr-2 max-w-[100%]">
+                            <code className="font-mono">{extension.id}</code>
+                        </p>
+                    </div>
+                    <div>
+                        <div className="relative hidden md:block">
+                            <h1 className="text-2xl md:text-3xl lg:text-4xl">
+                                {extension.name}
+                            </h1>
+                            <p className="text-[#555] dark:text-[#999] text-sm md:text-base break-all pr-2 max-w-[100%]">
+                                <code className="font-mono">
+                                    {extension.id}
+                                </code>
+                            </p>
+                        </div>
+                        <ExtensionInfoList
+                            className="hidden md:block"
+                            extension={extension}
+                        />
+                    </div>
+                    <div className="hidden md:flex md:justify-end items-start">
                         {extension.security === "unsafe" ? (
                             <div className="flex px-2 py-2 items-center gap-2 cursor-not-allowed text-[#555] dark:text-[#999]">
                                 <MdDownload className="inline" />
@@ -57,11 +77,56 @@ export default async function ExtensionPage({ params }: ServerSidePageProps) {
                     </div>
                 </div>
 
+                <div className="md:hidden">
+                    <ExtensionInfoList extension={extension} />
+                    <br />
+                    <div className="flex md:justify-end items-start">
+                        {extension.security === "unsafe" ? (
+                            <div className="flex text-center px-2 py-2 items-center gap-2 cursor-not-allowed text-[#555] dark:text-[#999]">
+                                <MdDownload className="inline" />
+                                Install
+                            </div>
+                        ) : (
+                            <Button fullWidth startIcon={<MdDownload />}>
+                                Install
+                            </Button>
+                        )}
+                    </div>
+                </div>
+
                 <br />
                 <p>{extension.description}</p>
                 <br />
 
                 <ExtensionSecurity extension={extension} />
+
+                {extension.readmeFileName && extension.readmeContents && (
+                    <>
+                        <h2 className="text-3xl font-bold mt-8">
+                            {extension.readmeFileName}
+                        </h2>
+
+                        <Divider />
+
+                        <div className="prose dark:prose-invert prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h4:text-base prose-h5:text-base prose-h6:text-base prose-h6:uppercase">
+                            <MDXRemote
+                                source={extension.readmeContents}
+                                options={{
+                                    mdxOptions: {
+                                        format: "md",
+                                    },
+                                }}
+                            />
+                        </div>
+                    </>
+                )}
+                <Divider />
+
+                <p className="text-[#555] dark:text-[#999] text-sm text-center">
+                    Copyright &copy; OSN Inc, {new Date().getFullYear()}. Not
+                    affiliated with Discord, Inc. Copyright of the extensions go
+                    to their respective owners.
+                </p>
             </main>
         </Container>
     );

diff --git a/src/components/Extension/ExtensionInfoList.tsx b/src/components/Extension/ExtensionInfoList.tsx
@@ -16,19 +16,16 @@ import ExtensionAuthor from "./ExtensionAuthor";
 
 interface ExtensionInfoListProps {
     extension: APIExtension;
+    className?: string;
 }
 
-const ExtensionInfoList: FC<ExtensionInfoListProps> = ({ extension }) => {
+const ExtensionInfoList: FC<ExtensionInfoListProps> = ({
+    extension,
+    className,
+}) => {
     return (
-        <div>
-            <h1 className="text-2xl md:text-3xl lg:text-4xl">
-                {extension.name}
-            </h1>
+        <div className={className}>
             <ul className="list-none text-[#555] dark:text-[#999]">
-                <li className="">
-                    <code className="font-mono">{extension.id}</code>
-                </li>
-
                 <li className="mt-2 flex items-center gap-[0.4em]">
                     <Tooltip title="Author">
                         <MdAccountCircle className="inline" />

diff --git a/src/components/Extension/Extensionicon.tsx b/src/components/Extension/Extensionicon.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import useIsDesktop from "@/hooks/useIsDesktop";
+import ImageWithSkeleton from "../Image/ImageWithSkeleton";
+
+const ExtensionIcon = ({ icon }: { icon: string | undefined | null }) => {
+    const isDesktop = useIsDesktop();
+    return (
+        <ImageWithSkeleton
+            component="img"
+            src={icon ?? ""}
+            skeleton={!icon}
+            alt="Extension icon"
+            className="rounded-lg"
+            height={isDesktop ? 200 : 80}
+            width={isDesktop ? 200 : 80}
+        />
+    );
+};
+
+export default ExtensionIcon;
diff --git a/src/components/Layout/Divider.tsx b/src/components/Layout/Divider.tsx
@@ -0,0 +1,3 @@
+export const Divider = () => (
+    <hr className="my-5 w-[100%] block border-none [border-top:1px_solid_rgba(0,0,0,0.2)] dark:[border-top:1px_solid_rgba(255,255,255,0.2)]" />
+);
diff --git a/src/types/APIExtension.ts b/src/types/APIExtension.ts
@@ -16,4 +16,6 @@ export interface APIExtension {
     issues?: string;
     security: "safe" | "unsafe" | "unknown";
     lastUpdated: Date;
+    readmeFileName?: string;
+    readmeContents?: string;
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -15,6 +15,6 @@ const config: Config = {
             },
         },
     },
-    plugins: [],
+    plugins: [require("@tailwindcss/typography")],
 };
 export default config;