✨ Updated dependencies and made some changes

dnrm · Jun 14, 2023 · a164cd6 · a164cd6
1 parent bac4d86
commit a164cd6
Show file tree

Hide file tree

Showing 13 changed files with 731 additions and 2,063 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -4,7 +4,7 @@ const Footer = () => {
   return (
     <footer className="bg-gray-100 p-6 border-gray-300 border-t-2">
       <div className="main">
-        <h3>© Daniel Medina 2021</h3>
+        <h3>© Daniel Medina 2021-{new Date().getFullYear()}</h3>
         <p>
           Made with ❤️ and{" "}
           <a href="https://nextjs.org" className="text-blue-700">

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -20,23 +20,23 @@ const Navbar = () => {
       <ul className="h-22 flex p-4 md:px-8 py-5 justify-between items-center text-gray-700">
         <div className="flex">
           <li className="px-1 md:px-2 tracking-tighter">
-            <Link href="/">
+            <Link href="/" legacyBehavior>
               <a className={`${styles.mono} text-lg font-normal`}>Home</a>
             </Link>
           </li>
           <li className="px-1 md:px-2 tracking-tighter">
-            <Link href="/dashboard">
+            <Link href="/dashboard" legacyBehavior>
               <a className={`${styles.mono} text-lg font-normal`}>Dashboard</a>
             </Link>
           </li>
           <li className="px-1 md:px-2 tracking-tighter">
-            <Link href="/create-post">
+            <Link href="/create-post" legacyBehavior>
               <a className={`${styles.mono} text-lg font-normal`}>Publish</a>
             </Link>
           </li>
         </div>
         {session && (
-          <Link href={`/account`}>
+          <Link href={`/account`} legacyBehavior>
             <a className="flex flex-row justify-between items-center">
               {/* @ts-ignore */}
               <p className="text-sm filter drop-shadow-xl hidden md:block">

diff --git a/components/Post.tsx b/components/Post.tsx
@@ -30,11 +30,12 @@ const Post = ({ src, title, layout, content, id, mode }: Props) => {
     <div
       onMouseEnter={showOptions}
       onMouseLeave={hideOptions}
-      className="rounded-md"
+      className="bg-neutral-100 rounded-xl"
     >
       {isHovered && dashboard == "dashboard" ? (
-        <Link href={`/edit/${id}`}>
-          <a className="cursor-pointer options z-30 bg-white border-2 border-l-2 absolute p-4 rounded-br-md">
+        // LEGACY EDIT BUTTON
+        <Link legacyBehavior href={`/edit/${id}`}>
+          <a className="cursor-pointer options z-30 bg-neutral-100 border-2 border-l-2 absolute p-4 rounded-br-md rounded-tl-md">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               className="h-6 w-6"
@@ -52,14 +53,14 @@ const Post = ({ src, title, layout, content, id, mode }: Props) => {
           </a>
         </Link>
       ) : null}
-      <Link href={`/post/${id}`}>
+      <Link legacyBehavior href={`/post/${id}`}>
         <a className="rounded-md">
           <motion.div
             layout="position"
             transition={{
               duration: 0.3,
             }}
-            className={`border-2 text-black box-border rounded-md ${
+            className={`text-black box-border rounded-md ${
               layout === "row" ? "flex justify-start items-center" : null
             } ${
               layout === "column"
@@ -68,15 +69,13 @@ const Post = ({ src, title, layout, content, id, mode }: Props) => {
             }`}
           >
             <div
-              className={`bg-white pt-3 ${
-                layout === "column" ? "w-full px-3" : "pl-3"
-              }`}
+              className={`${layout === "column" ? "w-full px-5 pt-5" : "p-3"}`}
             >
               {src ? (
                 <div
-                  className={`relative w-full ${
+                  className={`relative ${
                     layout === "row"
-                      ? "mr-2 w-16 h-16 mb-0 pb-3"
+                      ? "w-16 h-16"
                       : "h-56 w-full"
                   } `}
                 >
@@ -85,21 +84,21 @@ const Post = ({ src, title, layout, content, id, mode }: Props) => {
                     blurDataURL="https://via.placeholder.com/100x100?text=+"
                     placeholder="blur"
                     alt=""
-                    layout="fill"
+                    fill
                     className={`object-center rounded-lg object-cover`}
                   />
                 </div>
               ) : null}
             </div>
-            <div className="flex flex-col w-full overflow-hidden p-4">
+            <div className={`flex flex-col w-full overflow-hidden ${layout === "column" ? "p-5" : "py-3 pl-1"}`}>
               <h1
-                className={`font-semibold text-xl leading-8 ${
+                className={`font-bold font-sauce text-xl leading-8 hover:underline ${
                   layout === "row" ? "mr-2 truncate" : "mr-0 truncate "
                 }`}
               >
                 {title}
               </h1>
-              <p className="text-sm truncate max-w-full">{content}</p>
+              <p className="text-sm max-w-full">{content.substring(0, 100)}...</p>
             </div>
           </motion.div>
         </a>

diff --git a/index.d.ts b/index.d.ts
diff --git a/package.json b/package.json
@@ -1,48 +1,29 @@
 {
-  "name": "crystal",
-  "version": "0.1.0",
-  "private": true,
+  "dependencies": {
+    "@next-auth/mongodb-adapter": "^1.1.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "autoprefixer": "^10.4.14",
+    "framer-motion": "^10.12.16",
+    "mongodb": "^5.6.0",
+    "next": "^13.4.5",
+    "next-auth": "^4.22.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-hot-toast": "^2.4.1",
+    "react-markdown": "^8.0.7",
+    "swr": "^2.1.5",
+    "tailwindcss": "^3.3.2"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "postbuild": "next-sitemap"
-  },
-  "dependencies": {
-    "@next-auth/mongodb-adapter": "^1.0.1",
-    "@tailwindcss/typography": "^0.5.7",
-    "@types/formidable": "^1.2.3",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-timeago": "^4.1.3",
-    "autoprefixer": "^10.2.6",
-    "aws-sdk": "^2.946.0",
-    "bson": "^4.5.2",
-    "cloudinary": "^1.27.0",
-    "formidable": "^1.2.2",
-    "framer-motion": "^4.1.17",
-    "mongodb": "^4.4.0",
-    "multer": "^1.4.2",
-    "multiparty": "^4.2.2",
-    "next": "^12.3.0",
-    "next-auth": "^4.2.1",
-    "next-connect": "^0.10.2",
-    "next-sitemap": "^1.6.168",
-    "postcss": "^8.3.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-dropzone": "^11.3.4",
-    "react-hot-toast": "^2.1.1",
-    "react-markdown": "^7.0.1",
-    "react-timeago": "^6.2.1",
-    "react-toast-notifications": "^2.5.1",
-    "react-tooltip": "^4.2.21",
-    "spinners-react": "^1.0.4",
-    "swr": "^1.0.1",
-    "tailwindcss": "^3.1.8"
+    "lint": "next lint"
   },
   "devDependencies": {
-    "@types/multiparty": "^0.0.33",
-    "@types/react": "^18.0.19",
-    "typescript": "4.3.2"
+    "@types/node": "20.3.1",
+    "@types/react": "18.2.12",
+    "typescript": "5.1.3"
   }
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -18,6 +18,10 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
             rel="stylesheet"
           ></link>
+          <link
+            href="https://fonts.cdnfonts.com/css/open-sauce-one"
+            rel="stylesheet"
+          />
         </Head>
         <body>
           <Main />

diff --git a/pages/api/update-post.ts b/pages/api/update-post.ts
@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getSession } from "next-auth/react";
 import { connectToDatabase } from "../../lib/mongodb-old";
-import { ObjectID } from "mongodb";
+import { ObjectId } from "mongodb";
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   const { db } = await connectToDatabase();
@@ -18,7 +18,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     console.log(req.body.content);
     console.log(req.body.id) 
     const response = await db.collection("posts").updateOne(
-      { _id: ObjectID(req.body.id) },
+      { _id: new ObjectId(req.body.id) },
       {
         $set: {
           author: session?.user?.email,

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
@@ -27,7 +27,7 @@ export default function Login() {
         <link
           rel="preconnect"
           href="https://fonts.gstatic.com"
-          crossOrigin={`true`}
+          crossOrigin=""
         />
         <link
           href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
@@ -109,7 +109,7 @@ export default function Login() {
                       </svg>
                     )}
                   </button>
-                  <Link href={`/create-post`}>
+                  <Link legacyBehavior href={`/create-post`}>
                     <a className="py-2 px-4 bg-blue-500 text-white inline-block shadow-sm hover:shadow-xl rounded-xl transition-all duration-200">
                       Create Post
                     </a>
@@ -122,7 +122,7 @@ export default function Login() {
                     layout === "row" ? "grid grid-cols-1 gap-4" : null
                   } ${
                     layout === "column"
-                      ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
+                      ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5"
                       : null
                   }`}
                 >
@@ -146,7 +146,7 @@ export default function Login() {
                   <h1 className="text-4xl font-bold w-full text-center">
                     Create your first post!
                   </h1>
-                  <Link href={`/create-post`}>
+                  <Link legacyBehavior href={`/create-post`}>
                     <a className="py-6 px-20 bg-blue-500 text-white text-xl inline-block shadow-xl hover:shadow-xl rounded-xl transition-all duration-200">
                       Create Post
                     </a>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -42,7 +42,7 @@ export default function Home() {
           </h1>
           <div className="login flex items-center">
             {!session && (
-              <Link href={`/dashboard`}>
+              <Link legacyBehavior href={`/dashboard`}>
                 <div className="flex items-center cursor-pointer">
                   <p className="font-semibold tracking-tighter text-xl md:text-2xl">
                     Login

diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -9,7 +9,6 @@ import Navbar from "../../components/Navbar";
 
 const fetcher = (...args: [any]) => fetch(...args).then((res) => res.json());
 
-
 const Post: React.FC = () => {
   const router = useRouter();
   const { id } = router.query;
@@ -22,24 +21,26 @@ const Post: React.FC = () => {
         <title>{post?.title ? post.title : "Loading..."} | Crystal</title>
       </Head>
       <Navbar />
-      <main className="flex flex-col items-center border-t-2 border-gray-300">
-        <div className="image relative w-full h-[50vh] max-w-3xl mt-2 md:mt-8">
+      <header className="border-t-2 border-gray-300">
+        <div className="image relative h-[50vh] w-screen">
           {post && (
             <Image
               src={post ? post.src : "https://source.unsplash.com/random"}
-              layout="fill"
-              objectFit="contain"
+              fill
+              className="bg-cover object-cover"
               alt=""
             />
           )}
         </div>
+      </header>
+      <main className="flex flex-col items-center">
         <section
           id="post-container"
           className="px-2 md:p-0 w-full flex justify-center items-center max-w-3xl mx-auto"
         >
           <div className="pb-16 pt-8">
             {post ? (
-              <div className="prose max-w-none text-justify">
+              <div className="prose max-w-none text-justify prose-headings:font-sauce prose-headings:font-black prose-headings:text-left prose-headings:text-6xl">
                 <ReactMarkdown>{post.content}</ReactMarkdown>
               </div>
             ) : null}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
     extend: {
       fontFamily: {
         dm: ['"Dm Mono"', "serif"],
+        sauce: ["Open Sauce Sans", "sans-serif"],
       },
       zIndex: {
         "-10": "-10",
@@ -16,18 +17,18 @@ module.exports = {
         neon: {
           DEFAULT: "#61FF00",
         },
-        light: '#f4f4f4',
-        dark: '#192231',
-        gold: '#c0b283',
-        accent: '#d8e2dc'
+        light: "#f4f4f4",
+        dark: "#192231",
+        gold: "#c0b283",
+        accent: "#d8e2dc",
       },
     },
   },
   variants: {
     extend: {
       fontWeight: ["hover", "focus"],
       borderWidth: ["focus"],
-      backgroundColor: ["hover", "disabled"]
+      backgroundColor: ["hover", "disabled"],
     },
   },
   plugins: [require("@tailwindcss/typography")],

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,19 +1,29 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/api/auth/[...nextauth].js"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }