Add serverActions experimental feature, update

dependencies, and improve code formatting
thebkht · Nov 4, 2023 · 0b37c8b · 0b37c8b
1 parent 686e9bf
commit 0b37c8b
Show file tree

Hide file tree

Showing 7 changed files with 295 additions and 31 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -318,9 +318,6 @@
   @apply prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto text-foreground;
 }
 
-.markdown-body span {
-  @apply text-foreground text-sm;
-}
 
 .markdown-body p {
   @apply mb-4 text-sm md:text-base text-foreground;
@@ -392,16 +389,31 @@
 }
 
 .markdown-body pre {
-  @apply my-4 rounded-sm bg-card text-card-foreground;
+  @apply !my-4 !rounded-sm !text-card-foreground p-0;
+  background: hsl(220 12% 9.8%) !important;
+}
+
+.markdown-body p pre {
+  @apply my-4 !rounded-sm !text-card-foreground !px-2.5 !py-0.5 w-fit inline-flex;
+  background: hsl(220 12% 9.8%) !important;
 }
 
+.markdown-body pre code {
+  background: hsl(220 12% 9.8%) !important;
+} 
+
 .markdown-body code {
-  @apply py-1.5 px-1.5 rounded-sm bg-card text-card-foreground;
+  @apply py-1.5 px-1.5 !rounded-sm text-card-foreground;
   font-family: var(--font-geist-mono)
 }
 
 .markdown-body pre code {
-  @apply py-0 px-0 rounded-sm bg-card text-card-foreground;
+  @apply py-0 px-0 !rounded-sm text-card-foreground;
+}
+
+.markdown-body pre code.lang-text {
+  @apply py-1.5 px-1.5 !rounded-sm text-card-foreground;
+  font-family: var(--font-geist-mono)
 }
 
 .markdown-body hr {
@@ -552,4 +564,8 @@
     width: 8%;
     background: linear-gradient(90deg, rgba(var(--overlay), 0) 0%, rgba(var(--overlay), 0.75) 25%, rgba(var(--overlay), 0.9) 50%, rgb(var(--overlay)) 75%);
     z-index: 1;
+}
+
+pre code.lang-python {
+  color: #3572A5;
 }
diff --git a/components/blog/post.tsx b/components/blog/post.tsx
@@ -16,28 +16,28 @@ import PostTabs from "./navbar";
 import { dateFormat } from "@/lib/format-date";
 import { useRouter } from "next/navigation";
 import { Icons } from "../icon";
-
-const formatDate = (dateString: string | number | Date) => {
-     const date = new Date(dateString)
-     const currentYear = new Date().getFullYear()
-     const year = date.getFullYear()
-     const formattedDate = date.toLocaleDateString("en-US", {
-          month: "short",
-          day: "numeric",
-          hour12: true,
-     })
-     if (year !== currentYear) {
-          return date.toLocaleDateString("en-US", {
-               year: "numeric",
-               month: "short",
-               day: "numeric",
-               hour12: true,
-          })
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus, vs, prism, oneLight, oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import readingTime from "reading-time";
+
+const components = {
+     code({ className, children, }: { className: string, children: any }) {
+          let lang = 'text'; // default monospaced text
+          if (className && className.startsWith('lang-')) {
+               lang = className.replace('lang-', '');
+          }
+          console.log(lang);
+          return (
+               <SyntaxHighlighter style={oneDark} language={lang} >
+                    {children}
+               </SyntaxHighlighter>
+          )
      }
-     return formattedDate
 }
 
 export default function Post({ post: initialPost, author, sessionUser, tags }: { post: any, author: any, sessionUser: any, tags: any }) {
+
      const [isFollowing, setIsFollowing] = useState<boolean>(author.Followers?.some((follower: any) => follower.followerId === sessionUser?.id));
      const [isFollowingLoading, setIsFollowingLoading] = useState<boolean>(false);
      const { status } = useSession();
@@ -68,7 +68,7 @@ export default function Post({ post: initialPost, author, sessionUser, tags }: {
                     }
                     await fetch(`/api/revalidate?page=/${author?.username}/${post?.url}`, {
                          method: "GET",
-                         }).then((res) => res.json());
+                    }).then((res) => res.json());
                     router.refresh();
                     setIsFollowingLoading(false);
                } catch (error) {
@@ -79,6 +79,7 @@ export default function Post({ post: initialPost, author, sessionUser, tags }: {
                return null;
           }
      }
+     const stats = readingTime(post?.content);
      return (
           <>
                <div className="article max-w-[650px] lg:max-w-[680px] mx-auto">
@@ -157,8 +158,17 @@ export default function Post({ post: initialPost, author, sessionUser, tags }: {
                          </div>
 
                          <PostTabs post={post} session={session} author={author} className="mt-8" />
-                         <article className="article__content markdown-body !max-w-full prose lg:prose-xl">
-                              <Markdown>{post?.content}</Markdown>
+                         <article className="article__content prose-neutral markdown-body dark:prose-invert prose-img:rounded-xl prose-a:text-primary prose-code:bg-muted prose-pre:bg-muted prose-code:text-foreground prose-pre:text-foreground !max-w-full prose lg:prose-xl">
+                              {/* <Markdown>{post?.content}</Markdown> */}
+                              <Markdown options={{
+                                   overrides: {
+                                        code: {
+                                             component: components.code,
+                                        },
+                                   },
+                              }}>
+                                   {post?.content}
+                              </Markdown>
                               {/* <div dangerouslySetInnerHTML={{ __html: post?.content }} className="markdown-body" /> */}
                          </article>
 
@@ -182,9 +192,14 @@ export default function Post({ post: initialPost, author, sessionUser, tags }: {
                               )
                          }
 
-                         <div className="sticky top-0 w-full left-0 mt-8">
-                              <PostTabs post={post} session={session} author={author} className="border-none" />
-                         </div>
+                         {
+                              // if post word count is greater than 1000 show the stats
+                              stats?.words > 1000 && (
+                                   <div className="sticky top-0 w-full left-0 mt-8">
+                                        <PostTabs post={post} session={session} author={author} className="border-none" />
+                                   </div>
+                              )
+                         }
                     </div>
                </div>
           </>

diff --git a/lib/format-date.ts b/lib/format-date.ts
@@ -11,7 +11,7 @@ export function dateFormat(dateString: string | number | Date) {
          const differenceInMinutes = differenceInTime / (1000 * 60);
          if (differenceInMinutes < 1) {
            const differenceInSeconds = differenceInTime / 1000;
-           return `${Math.floor(differenceInSeconds)} seconds ago`;
+           return differenceInSeconds < 1 ? 'Just now': `${Math.floor(differenceInSeconds)} seconds ago`;
          }
          return `${Math.floor(differenceInMinutes)} minutes ago`;
        }

diff --git a/next.config.js b/next.config.js
@@ -2,6 +2,9 @@ const { edges } = require('slate');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    serverActions: true,
+  },
   images: {
     remotePatterns: [
       {