🔧 Add dynamic links for easier access

package.json

@@ -43,6 +43,7 @@
     "react-tag-input": "^6.8.1",
     "react-toastify": "^9.1.3",
     "tailwind-merge": "^1.12.0",
+    "unsplash-js": "^7.0.18",
     "uuidv4": "^6.2.13",
     "youtube-transcript": "^1.0.6"
   },

src/components/UnsplashApi.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) 2023 Yağız Işkırık
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+import { createApi } from 'unsplash-js';
+
+export default function Unsplash() {
+  const unsplash = createApi({
+    accessKey: process.env.UNSPLASH_API_KEY || '',
+  });
+  const results = unsplash.search.getPhotos({
+    query: 'cat',
+    page: 1,
+    perPage: 10,
+  });
+  return <p>{JSON.stringify(results)}</p>;
+}

src/components/articleCard.tsx

@@ -55,6 +55,15 @@ export default function ArticleCard({
               <Link
                 className='text-neutral-900 dark:text-neutral-100'
                 href={'/' + postOrDraft + '/' + id}
+                as={
+                  postOrDraft === 'posts'
+                    ? `/posts/${encodeURIComponent(
+                        header
+                          .replace(/[^a-zA-Z0-9 - _ . ~]/g, '')
+                          .replace(/ /g, '-')
+                      ).toLowerCase()}`
+                    : `/${postOrDraft}/${id}`
+                }
               >
                 {header}
               </Link>

src/pages/drafts/[id].tsx

@@ -27,6 +27,7 @@ import Interval from '@/components/Autosave';
 import Button from '@/components/buttons/Button';
 import IconButton from '@/components/buttons/IconButton';
 import Editor from '@/components/Editor';
+import Unsplash from '@/components/UnsplashApi';
 import Wrapper from '@/components/wrapper';
 
 type DraftType = {
@@ -285,6 +286,7 @@ export default function Draft({ draft }: DraftType) {
               autocomplete
             />
           </div>
+          <Unsplash />
           <Editor content={content} setContent={setContentFunc} />
           <div className='mt-24 flex justify-end gap-2 md:mt-14'>
             <Button

src/pages/posts/[id].tsx

@@ -230,14 +230,34 @@ export default function Posts({ post }: DraftType) {
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const selId = ctx.query.id as string;
-  const post = await prisma.post.findUnique({
+  let post = await prisma.post.findUnique({
     where: {
       id: selId,
     },
     include: {
       user: true,
     },
   });
+  if (!post) {
+    const posts = await prisma.post.findMany({
+      include: {
+        user: true,
+      },
+    });
+    for (let i = 0; i < posts.length; i++) {
+      if (
+        encodeURIComponent(
+          posts[i].header
+            .replace(/[^a-zA-Z0-9 - _ . ~]/g, '')
+            .replace(/ /g, '-')
+            .toLowerCase()
+        ) === selId
+      ) {
+        post = posts[i];
+        break;
+      }
+    }
+  }
   if (post && post.published) {
     return {
       props: { post: JSON.parse(JSON.stringify(post)) },