chore: metadata, fixes and prettier

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "singleQuote": false,
+  "semi": false,
+  "importOrder": ["^[./]"],
+  "importOrderMergeDuplicateImports": true,
+  "importOrderBuiltinModulesToTop": true,
+  "importOrderCombineTypeAndValueImports": true,
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "pluginSearchDirs": false
+}

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

app/components/Homepage.tsx → app/_components/Homepage.tsx

@@ -1,12 +1,12 @@
 import { Button } from "@components/ui"
-import { Footer } from "app/layout/components"
+import { Footer } from "app/layout/_components"
 import { TrustedBy } from "./TrustedBy"
 
 export function Homepage() {
   return (
     <div className="overflow-hidden">
       <div className="relative isolate pt-14">
-        <div className="absolute inset-x-0 overflow-hidden -top-40 -z-10 transform-gpu blur-3xl sm:-top-80">
+        <div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
           <svg
             className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
             viewBox="0 0 1155 678"
@@ -31,13 +31,13 @@ export function Homepage() {
             </defs>
           </svg>
         </div>
-        <div className="pt-24 pb-16 sm:pt-32">
-          <div className="px-6 mx-auto max-w-7xl lg:px-8">
-            <div className="max-w-2xl mx-auto text-center">
+        <div className="pb-16 pt-24 sm:pt-32">
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            <div className="mx-auto max-w-2xl text-center">
               <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
                 PR-Codex
               </h1>
-              <p className="max-w-[40rem] mx-auto mt-6 text-lg leading-8 text-gray-300">
+              <p className="mx-auto mt-6 max-w-[40rem] text-lg leading-8 text-gray-300">
                 A github app to summarize code diffs in pull requests. Powered
                 by ChatGPT.
               </p>

app/components/TrustedBy.tsx → app/_components/TrustedBy.tsx

@@ -4,8 +4,8 @@ export const revalidate = 60 * 60 * 3 // 3 hours
 
 export function TrustedBy() {
   return (
-    <div className="max-w-lg px-4 pt-24 pb-16 mx-auto md:max-w-screen-xl md:px-8">
-      <h2 className="mb-12 text-2xl font-bold tracking-tight text-center text-gray-400">
+    <div className="mx-auto max-w-lg px-4 pb-16 pt-24 md:max-w-screen-xl md:px-8">
+      <h2 className="mb-12 text-center text-2xl font-bold tracking-tight text-gray-400">
         Trusted by
       </h2>
       {/* @ts-expect-error Async Server Component */}

app/components/TrustedByList.tsx → app/_components/TrustedByList.tsx

@@ -1,10 +1,10 @@
+import Fork from "@components/icons/Fork"
+import Star from "@components/icons/Star"
+import { ListIterator } from "@components/ui"
 import { getInstallations } from "@utils/github/getInstallations"
 import { getRepositories } from "@utils/github/getRepositories"
-import Image from "next/image"
 import { githubColors } from "@utils/githubColors"
-import Star from "@components/icons/Star"
-import Fork from "@components/icons/Fork"
-import { ListIterator } from "@components/ui"
+import Image from "next/image"
 
 export async function TrustedByList() {
   const installations = await getInstallations()
@@ -53,14 +53,14 @@ export async function TrustedByList() {
     <ListIterator initItems={6}>
       {topUsersRepos.map((repo) => (
         <a
-          className="w-full p-4 border border-gray-700 rounded-md bg-[#0d1117] hover:bg-gray-800/60 h-48 flex flex-col justify-between"
+          className="flex h-48 w-full flex-col justify-between rounded-md border border-gray-700 bg-[#0d1117] p-4 hover:bg-gray-800/60"
           key={repo.id}
           target="_blank"
           rel="noreferrer"
           href={repo.html_url}
         >
           <div>
-            <div className="flex items-center mb-4">
+            <div className="mb-4 flex items-center">
               <div
               //target="_blank" rel="noreferrer" href={repo.owner.html_url}
               >
@@ -76,15 +76,15 @@ export async function TrustedByList() {
                 {repo.full_name}
               </p>
             </div>
-            <p className="text-sm text-gray-400 line-clamp-3">
+            <p className="line-clamp-3 text-sm text-gray-400">
               {repo.description}
             </p>
           </div>
           <div className="flex items-center gap-5">
             {repo.language && (
               <div className="flex items-center">
                 <div
-                  className="w-4 h-4 mr-2 rounded-full bg-red-50"
+                  className="mr-2 h-4 w-4 rounded-full bg-red-50"
                   style={{
                     backgroundColor: githubColors[repo.language]?.color
                   }}

app/github/route.ts

@@ -1,8 +1,8 @@
-export const fetchCache = "force-no-store"
-
-import { NextRequest, NextResponse } from "next/server"
-import { summarizePullRequest } from "@lib/summarizePullRequest"
 import { handleGithubAuth } from "@lib/handleGithubAuth"
+import { summarizePullRequest } from "@lib/summarizePullRequest"
+import { NextRequest, NextResponse } from "next/server"
+
+export const fetchCache = "force-no-store"
 
 export async function POST(req: NextRequest) {
   const payload = await req.json()

app/layout/components/AppLayout/AppLayout.tsx → app/layout/_components/AppLayout/AppLayout.tsx

@@ -3,7 +3,7 @@ import { Footer, Modal, Navbar } from ".."
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <div className="relative flex flex-col justify-between min-h-screen">
+      <div className="relative flex min-h-screen flex-col justify-between">
         {/* <Navbar /> */}
         {children}
         {/* <Footer /> */}

app/layout/components/Container/Container.tsx → app/layout/_components/Container/Container.tsx

@@ -13,8 +13,8 @@ export default function Container({
     <div
       className={`${
         size ? size : "max-w-screen-lg"
-      } w-full mx-auto px-4 md:px-8 ${
-        page && "pt-16 pb-10 text-center sm:pt-24 sm:pb-12"
+      } mx-auto w-full px-4 md:px-8 ${
+        page && "pb-10 pt-16 text-center sm:pb-12 sm:pt-24"
       }`}
     >
       {children}

app/layout/components/DropdownMenu/DropdownMenu.tsx → app/layout/_components/DropdownMenu/DropdownMenu.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { DropdownMenuElement } from "../"
 import { Dispatch, SetStateAction, useEffect, useRef } from "react"
+import { DropdownMenuElement } from ".."
+
 // import { useTheme } from "next-themes"
 // import nightwind from "nightwind/helper"
 // import Nightwind from "@components/icons/Nightwind"
@@ -38,15 +39,15 @@ export default function DropdownMenu({
   }, [dropdownRef, setShowDropdown])
 
   return (
-    <div className="absolute top-0 right-0" ref={dropdownRef}>
+    <div className="absolute right-0 top-0" ref={dropdownRef}>
       <div
-        className={`z-20 absolute text-sm top-0 right-0 w-56 mt-20 border border-gray-200 space-y-1 bg-white rounded-sm shadow-base`}
+        className={`shadow-base absolute right-0 top-0 z-20 mt-20 w-56 space-y-1 rounded-sm border border-gray-200 bg-white text-sm`}
       >
         <div onClick={() => setShowDropdown(false)}>
           <DropdownMenuElement
             href="/"
             image={
-              <div className="w-5 h-5 border-2 border-blue-600 rounded-full group-hover:border-white" />
+              <div className="h-5 w-5 rounded-full border-2 border-blue-600 group-hover:border-white" />
             }
             label="My profile"
           />

app/layout/components/Footer/Footer.tsx → app/layout/_components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import { Container, Social } from "../"
+import { Container, Social } from ".."
 
 export default function Footer() {
   return (

app/layout/_components/Metadata/Metadata.tsx

@@ -0,0 +1,46 @@
+import { Metadata } from "next"
+import {
+  appDescription,
+  appName,
+  appTitle,
+  appUrl,
+  twitterAccount
+} from "./MetadataConfig"
+
+export const baseMetadata: Metadata = {
+  metadataBase: new URL(appUrl),
+  title: { default: appTitle, template: `%s | ${appName}` },
+  description: appDescription,
+  openGraph: {
+    title: appTitle,
+    description: appDescription,
+    url: "/",
+    siteName: appName,
+    locale: "en-US",
+    type: "website"
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: appTitle,
+    description: appDescription,
+    site: twitterAccount,
+    creator: twitterAccount
+  },
+  robots: {
+    index: false,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: false,
+      noimageindex: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1
+    }
+  },
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" }
+  ]
+}

app/layout/_components/Metadata/MetadataConfig.tsx

@@ -0,0 +1,9 @@
+import { accounts } from "app/layout/_components/Social/Social"
+
+export const appName = "PR-Codex"
+export const appTitle = "PR-Codex"
+export const appDescription =
+  "An AI bot that summarizes PR code diffs, directly on Github. Powered by ChatGPT"
+export const appUrl = process.env.NEXT_PUBLIC_APP_URL
+export const twitterAccount = accounts.twitter.split("twitter.com/").pop()
+export const domain = appUrl.split("//").pop()

app/layout/_components/Metadata/index.ts

@@ -0,0 +1,2 @@
+export * from "./Metadata"
+export * from "./MetadataConfig"

app/layout/components/Modal/Modal.tsx → app/layout/_components/Modal/Modal.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { useEffect, useRef } from "react"
-import { NETWORK_VIEW } from "@lib/content/modals"
 import Cross from "@components/icons/Cross"
-import { useAppContext } from "app/layout/context"
+import { NETWORK_VIEW } from "@lib/content/modals"
+import { useAppContext } from "app/layout/_context"
+import { useEffect, useRef } from "react"
 
 const Modal = () => {
   const { modalView, setModalView } = useAppContext()
@@ -37,20 +37,20 @@ const Modal = () => {
 
   return (
     modalView.name && (
-      <div className="fixed top-0 z-50 w-screen h-screen py-12 overflow-y-scroll xs:py-20 background-modal">
-        <div className="absolute w-full h-full mt-[-3rem] xs:mt-[-5rem]" />
+      <div className="xs:py-20 background-modal fixed top-0 z-50 h-screen w-screen overflow-y-scroll py-12">
+        <div className="xs:mt-[-5rem] absolute mt-[-3rem] h-full w-full" />
         <div
           className="flex items-center justify-center"
           style={{ minHeight: "100%" }}
         >
           <div
-            className="relative w-full max-w-screen-md px-2 py-16 mx-2 bg-white border border-gray-200 rounded-sm shadow-xl xs:py-20 xs:px-8"
+            className="xs:py-20 xs:px-8 relative mx-2 w-full max-w-screen-md rounded-sm border border-gray-200 bg-white px-2 py-16 shadow-xl"
             ref={modalRef}
           >
             {cross && (
-              <div className="absolute top-[24px] right-[24px]">
+              <div className="absolute right-[24px] top-[24px]">
                 <Cross
-                  className="text-right cursor-pointer hover:text-red-500"
+                  className="cursor-pointer text-right hover:text-red-500"
                   onClick={() => setModalView({ name: "" })}
                 />
               </div>

app/layout/components/Navbar/Navbar.tsx → app/layout/_components/Navbar/Navbar.tsx

@@ -1,8 +1,8 @@
-import Link from "next/link"
-import { Container } from "../"
 import Logo from "@components/icons/Logo"
-import { appName } from "../DefaultHead/DefaultHead"
 import UserIcon from "@components/icons/UserIcon"
+import Link from "next/link"
+import { Container, appName } from ".."
+
 // import Nightwind from "@components/icons/Nightwind"
 
 export default function Navbar() {
@@ -11,14 +11,14 @@ export default function Navbar() {
   return (
     <header className="shadow-sm">
       <Container>
-        <nav className="relative sm:px-6 h-[4.25rem] items-center mx-auto flex justify-between">
+        <nav className="relative mx-auto flex h-[4.25rem] items-center justify-between sm:px-6">
           <div className="flex items-center space-x-7 sm:space-x-10">
-            <Link href="/" className="w-7 h-7" aria-label={`${appName} logo`}>
+            <Link href="/" className="h-7 w-7" aria-label={`${appName} logo`}>
               <Logo />
             </Link>
           </div>
 
-          <div className="relative z-10 flex items-center space-x-6 sm:space-x-8 xs:space-x-6">
+          <div className="xs:space-x-6 relative z-10 flex items-center space-x-6 sm:space-x-8">
             {/* <div className="hidden xs:block xs:mr-2">
               <Nightwind size="h-[24px]" />
             </div> */}

app/layout/components/Social/Social.tsx → app/layout/_components/Social/Social.tsx

@@ -54,7 +54,7 @@ export default function Social({ wrapperClassName, altAccounts }: Props) {
         return (
           <a
             key={key}
-            className={`${componentColor} h-6 mx-[18px]`}
+            className={`${componentColor} mx-[18px] h-6`}
             href={accountsToDisplay[accountsKey]}
             target="_blank"
             rel="noreferrer"

app/layout/components/index.ts → app/layout/_components/index.ts

@@ -1,7 +1,7 @@
 export { default as AppLayout } from "./AppLayout"
 export { default as BackgroundImage } from "./BackgroundImage"
 export { default as Container } from "./Container"
-export { default as DefaultHead } from "./DefaultHead"
+export * from "./Metadata"
 export { default as DropdownMenu } from "./DropdownMenu"
 export { default as DropdownMenuElement } from "./DropdownMenuElement"
 export { default as Footer } from "./Footer"

app/layout/context/AppContext/AppContext.tsx → app/layout/_context/AppContext/AppContext.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { View } from "@lib/content/modals"
 import {
   createContext,
   Dispatch,
@@ -8,7 +9,7 @@ import {
   useEffect,
   useState
 } from "react"
-import { View } from "@lib/content/modals"
+
 type Context = {
   modalView: View
   setModalView: Dispatch<SetStateAction<View>>