diff --git a/mdx-components.tsx b/mdx-components.tsx new file mode 100644 index 0000000..c6b9d07 --- /dev/null +++ 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 index 4678774..a2fdb47 100644 --- 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 index fcf0960..ebd671d 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,14 @@ "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" @@ -22,6 +27,7 @@ "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" } -} \ No newline at end of file +} diff --git a/src/app/extension/[id]/page.tsx b/src/app/extension/[id]/page.tsx index 0ec9184..294ff53 100644 --- 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 { @@ -24,6 +26,8 @@ async function getExtensionInformation(id: string): Promise { 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 (
-
- - -
+
+ + +
+

+ {extension.name} +

+

+ {extension.id} +

+
+
+
+

+ {extension.name} +

+

+ + {extension.id} + +

+
+ +
+
{extension.security === "unsafe" ? (
@@ -57,11 +77,56 @@ export default async function ExtensionPage({ params }: ServerSidePageProps) {
+
+ +
+
+ {extension.security === "unsafe" ? ( +
+ + Install +
+ ) : ( + + )} +
+
+

{extension.description}


+ + {extension.readmeFileName && extension.readmeContents && ( + <> +

+ {extension.readmeFileName} +

+ + + +
+ +
+ + )} + + +

+ Copyright © OSN Inc, {new Date().getFullYear()}. Not + affiliated with Discord, Inc. Copyright of the extensions go + to their respective owners. +

); diff --git a/src/components/Extension/ExtensionInfoList.tsx b/src/components/Extension/ExtensionInfoList.tsx index c71dcc9..67432f3 100644 --- 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 = ({ extension }) => { +const ExtensionInfoList: FC = ({ + extension, + className, +}) => { return ( -
-

- {extension.name} -

+
    -
  • - {extension.id} -
    • -
  • diff --git a/src/components/Extension/Extensionicon.tsx b/src/components/Extension/Extensionicon.tsx new file mode 100644 index 0000000..db493b3 --- /dev/null +++ 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 ( + + ); +}; + +export default ExtensionIcon; diff --git a/src/components/Layout/Divider.tsx b/src/components/Layout/Divider.tsx new file mode 100644 index 0000000..ae34652 --- /dev/null +++ b/src/components/Layout/Divider.tsx @@ -0,0 +1,3 @@ +export const Divider = () => ( +
    +); diff --git a/src/types/APIExtension.ts b/src/types/APIExtension.ts index e02f5ae..f0749aa 100644 --- 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 index 2541a08..dbf4b9f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -15,6 +15,6 @@ const config: Config = { }, }, }, - plugins: [], + plugins: [require("@tailwindcss/typography")], }; export default config;