feat(docs): add plugin store

users can submit plugins and/or view plugins made by the community

Author: DuroCodes

apps/docs/.env.example

@@ -0,0 +1,4 @@
+DISCORD_CLIENT_ID=<CLIENT ID>
+DISCORD_CLIENT_SECRET=<CLIENT SECRET>
+DATABASE_URL=<MONGODB DATABASE>
+NEXTAUTH_SECRET=<NEXTAUTH SECRET TOKEN>

apps/docs/next.config.js renamed to apps/docs/next.config.mjs

@@ -1,14 +1,28 @@
-const withNextra = require('nextra')({
+import nextra from 'nextra';
+
+const withNextra = nextra({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.js',
   unstable_flexsearch: true,
   unstable_staticImage: true,
 });
 
+/**
+ * @type {import('next').Config}
+ */
 const nextConfig = withNextra({
   reactStrictMode: true,
   experimental: {
     legacyBrowsers: false,
+    topLevelAwait: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'cdn.discordapp.com',
+      },
+    ],
   },
   async redirects() {
     return [
@@ -21,4 +35,4 @@ const nextConfig = withNextra({
   },
 });
 
-module.exports = nextConfig;
+export default nextConfig;

apps/docs/package.json

@@ -13,15 +13,31 @@
   "license": "MIT",
   "dependencies": {
     "@heroicons/react": "1.0.6",
+    "@hookform/resolvers": "^2.9.10",
+    "@prisma/client": "^4.7.1",
     "@react-aria/ssr": "3.3.0",
+    "@tanstack/react-query": "^4.20.4",
+    "@trpc/client": "^10.6.0",
+    "@trpc/next": "^10.6.0",
+    "@trpc/react-query": "^10.6.0",
+    "@trpc/server": "^10.6.0",
     "copy-to-clipboard": "3.3.2",
     "next": "12.3.1",
+    "next-auth": "^4.18.6",
+    "next-mdx-remote": "^4.2.0",
     "nextra": "2.0.0-beta.32",
     "nextra-theme-docs": "2.0.0-beta.28",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-hook-form": "^7.41.0",
     "react-hot-toast": "2.4.0",
-    "swr": "1.3.0"
+    "rehype-add-classes": "^1.0.0",
+    "rehype-pretty-code": "^0.6.0",
+    "remark-gfm": "^3.0.1",
+    "shiki": "^0.12.1",
+    "superjson": "^1.12.1",
+    "swr": "1.3.0",
+    "zod": "^3.20.2"
   },
   "devDependencies": {
     "@babel/core": "7.19.3",
@@ -34,6 +50,7 @@
     "eslint-config-prettier": "8.5.0",
     "gray-matter": "4.0.3",
     "postcss": "8.4.18",
+    "prisma": "^4.7.1",
     "tailwindcss": "3.1.8",
     "typescript": "4.8.4"
   },

apps/docs/prisma/schema.prisma

@@ -0,0 +1,24 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "mongodb"
+  url      = env("DATABASE_URL")
+}
+
+model Plugin {
+  id          String   @id @default(auto()) @map("_id") @db.ObjectId
+  name        String
+  description String?
+  author      Author
+  createdAt   DateTime @default(now())
+}
+
+type Author {
+  name  String
+  image String
+}

apps/docs/src/components/Callout.tsx

@@ -35,8 +35,8 @@ export default function Callout({
   icon,
 }: {
   children: ReactNode;
-  type: keyof typeof THEMES;
-  icon: ReactElement;
+  type?: keyof typeof THEMES;
+  icon?: ReactElement;
 }) {
   return (
     <div className={`${THEMES[type].classes} flex rounded-lg callout mt-6`}>

apps/docs/src/components/Container.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type Props = {
   children?: ReactNode;

apps/docs/src/components/Feature.tsx

@@ -1,12 +1,12 @@
 import Link from 'next/link';
-import type { Feature as Feat } from '~/content/features';
+import { Feature as Feat } from '~/content/features';
 
 type FeatureProps = {
   feature: Omit<Feat, 'page'>;
   detailed?: boolean;
 };
 
-const DetailedFeatureInner = (props: { feature: FeatureProps['feature'] }) => {
+const DetailedFeatureInner = (props: { feature: FeatureProps['feature']; }) => {
   const { Icon, name, description } = props.feature;
   return (
     <>
@@ -41,11 +41,11 @@ export const DetailedFeatureLink = (props: {
   href: string;
   feature: FeatureProps['feature'];
 }) => (
-    <Link href={props.href}>
-      <a className={featureWrapperClasses}>
-        <DetailedFeatureInner feature={props.feature}></DetailedFeatureInner>
-      </a>
-    </Link>
+  <Link href={props.href}>
+    <a className={featureWrapperClasses}>
+      <DetailedFeatureInner feature={props.feature}></DetailedFeatureInner>
+    </a>
+  </Link>
 );
 
 export default function Feature(props: FeatureProps) {

apps/docs/src/components/Features.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { DOCS_FEATURES, HOME_FEATURES } from '~/content/features';
 import Feature from './Feature';
 
 export function DetailedFeaturesGrid({
   children,
 }: {
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) {
   return (
     <div className="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-12">
@@ -30,7 +30,7 @@ export function HomeFeatures() {
 
 export function DocsFeatures({ detailed = true }: { detailed?: boolean; }) {
   return (
-    <div className="grid grid-cols-2 gap-6 my-12 sm:grid-cols-3 ">
+    <div className="grid grid-cols-2 gap-6 my-12 sm:grid-cols-3">
       {DOCS_FEATURES.map((feature) => (
         <Feature
           key={feature.name.split(' ').join('-')}

apps/docs/src/components/Footer.tsx

@@ -7,7 +7,7 @@ export function Footer() {
         Footer
       </h2>
       <div className="md:flex md:items-center md:justify-between">
-        <p className="text-xs text-gray-500 ">
+        <p className="text-xs text-gray-500">
           <SparkLogo height={48} />
           &copy; {new Date().getFullYear()} Spark. All rights reserved.
         </p>

apps/docs/src/components/Plugin.tsx

@@ -0,0 +1,79 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import Callout from './Callout';
+import { trpc } from '~/utils/trpc';
+
+interface Author {
+  name: string;
+  image: string;
+}
+
+interface PluginProps {
+  name: string;
+  id: string;
+  author: Author;
+}
+
+export function PluginCard({ plugin }: { plugin: PluginProps; }) {
+  return (
+    <a href={`/plugins/${plugin.id}`} className="relative block overflow-hidden p-10 bg-white shadow-lg rounded-xl dark:bg-opacity-5 no-underline text-black dark:text-white">
+      <h3 className="m-0 text-lg font-semibold leading-6 tracking-tight text-gray-900 dark:text-white">
+        {plugin.name}
+      </h3>
+      <div className="text-base font-medium text-gray-400 dark:text-gray-500 flex items-center mt-2">
+        <div className="w-8 h-8 mr-2">
+          <Image className="rounded-full"
+            src={plugin.author.image}
+            height={128}
+            width={128}
+            objectFit="cover"
+          />
+        </div>
+        {plugin.author.name}
+      </div>
+      <style jsx global>{`
+      html.dark .icon-circle {
+        background: linear-gradient(180deg, rgba(50, 134, 241, 0.2) 0%, rgba(195, 58, 195, 0.2) 100%);
+      }
+    `}</style>
+    </a>
+  );
+}
+
+export function PluginShowcase() {
+  const { data: plugins, status } = trpc.plugins.findAll.useQuery();
+
+  if (status === 'error') {
+    return (
+      <Callout type="error">An error occured. Please refresh and try again.</Callout>
+    );
+  }
+
+  if (status === 'loading') {
+    return (
+      <div className="flex items-center justify-center">
+        <div style={{ borderTopColor: 'transparent' }} className="w-8 h-8 border-4 border-gray-400 rounded-full animate-spin" />
+        <h1 className="ml-2 font-extrabold text-lg">Loading Plugins...</h1>
+      </div>
+    );
+  }
+
+  const sortedPlugins = plugins.sort(
+    (a, b) => a.createdAt.getMilliseconds() - b.createdAt.getMilliseconds(),
+  );
+
+  return (
+    <>
+      <Link href="/plugins/new">
+        <a className="flex items-center justify-center w-full px-8 py-3 text-base font-medium text-white no-underline bg-black border border-transparent rounded-md dark:bg-white dark:text-black betterhover:dark:hover:bg-gray-300 betterhover:hover:bg-gray-700 md:py-3 md:text-lg md:px-10 md:leading-6 mt-6">
+          Submit Plugin →
+        </a>
+      </Link>
+      <div className="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:gap-x-8 lg:gap-y-12">
+        {sortedPlugins.map((plugin: PluginProps) => (
+          <PluginCard plugin={plugin} key={plugin.id} />
+        ))}
+      </div>
+    </>
+  );
+}