Latest posts highlighting (#143)

Author: MAHcodes

app/NoteDisplay.tsx

@@ -65,7 +65,7 @@ const NoteDisplay = ({ event }: any) => {
             />
             <div className="grow">
               <CodeEditor
-                className={`w-full focus:border focus:border-blue-500 p-3 outline-none min-h-full "note-cursor-text"`}
+                className="w-full focus:border focus:border-blue-500 p-3 outline-none min-h-full note-cursor-text"
                 value={event.content}
                 language={event.tags[0][1]}
                 autoCapitalize="none"

app/Posts.tsx

@@ -1,39 +1,18 @@
 import { HTMLAttributes, ReactNode, useContext } from "react";
-import Button from "./Button";
-import { PostDirContext } from "./context/post-dir-provider";
-import { CardCol, CardRow } from "./icons";
 
 interface PostsProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
   title: string;
-  noPosts?: boolean;
 }
 
-const Posts = ({
-  title,
-  noPosts,
-  children,
-  className,
-  ...props
-}: PostsProps) => {
-  const { isCol, togglePostDir } = useContext(PostDirContext);
+const Posts = ({ title, children, className, ...props }: PostsProps) => {
   return (
     <div
       className={`flex flex-col justify-center gap-3 px-2 w-full max-w-[50rem] mx-auto ${className}`}
       {...props}
     >
       <div className="flex items-center justify-between gap-4">
         <h1 className="text-3xl">{title}</h1>
-        {noPosts ? null : (
-          <Button
-            className="hidden md:block"
-            color="neutralLight"
-            variant="ghost"
-            size="sm"
-            icon={isCol ? <CardCol /> : <CardRow />}
-            onClick={() => togglePostDir()}
-          />
-        )}
       </div>
       {children}
     </div>

app/context/post-dir-provider.tsx

@@ -5,16 +5,13 @@ import KeysProvider from "./keys-provider.jsx";
 import { CustomThemeProvider } from "./theme-provider";
 import { NostrProvider } from "nostr-react";
 import { RELAYS } from "../utils/constants";
-import PostDirProvider from "./post-dir-provider";
 
 export default function Providers({ children }) {
   return (
     <NostrProvider relayUrls={RELAYS} debug={false}>
       <EventProvider>
         <KeysProvider>
-          <PostDirProvider>
-            <CustomThemeProvider>{children}</CustomThemeProvider>
-          </PostDirProvider>
+          <CustomThemeProvider>{children}</CustomThemeProvider>
         </KeysProvider>
       </EventProvider>
     </NostrProvider>

app/context/providers.jsx

@@ -1,19 +1,14 @@
 import Link from "next/link";
+import dynamic from "next/dynamic";
 import { useProfile } from "nostr-react";
 import { Event, nip19 } from "nostr-tools";
-import {
-  DetailedHTMLProps,
-  FC,
-  LiHTMLAttributes,
-  ReactNode,
-  useContext,
-} from "react";
+import { DetailedHTMLProps, FC, LiHTMLAttributes, ReactNode } from "react";
 import { BsFillFileEarmarkCodeFill, BsFillTagFill } from "react-icons/bs";
 import { FaCalendarAlt } from "react-icons/fa";
 import { DUMMY_PROFILE_API } from "../../utils/constants";
 import { shortenHash } from "../../lib/utils";
-import { PostDirContext } from "../../context/post-dir-provider";
 import { getTagValues } from "../../lib/utils";
+import "@uiw/react-textarea-code-editor/dist.css";
 
 interface NoteProps
   extends DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
@@ -22,51 +17,49 @@ interface NoteProps
   dateOnly?: boolean;
 }
 
+const CodeEditor = dynamic(
+  () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
+  { ssr: true }
+);
+
 const Card: FC<NoteProps> = ({
   event,
   profile = false,
   dateOnly = false,
   ...props
 }) => {
   const { tags, content, created_at: createdAt, id: noteId } = event;
-  const { isCol } = useContext(PostDirContext);
 
   const { data } = useProfile({
     pubkey: event.pubkey,
   });
 
   const npub = nip19.npubEncode(event.pubkey);
 
-  // let actualTags: any = getTagValues("tags");
+  const title = getTagValues("subject", tags);
+  const filetype = getTagValues("filetype", tags);
+  const actualTags = getTagValues("tags", tags);
 
-  // if (actualTags) {
-  //   actualTags = actualTags.split(",");
-  // }
+  function setupMarkdown(content: string) {
+    var md = require("markdown-it")();
+    var result = md.render(content);
+    return result;
+  }
 
-  const title = getTagValues("subject", tags);
-  const markdownImageContent =
-    /!\[[^\]]*\]\((?<filename>.*?)(?=\"|\))(?<title>\".*\")?\)/g.exec(content);
+  const MAX_LENGTH = 300;
+
+  const markdown =
+    content.length > MAX_LENGTH
+      ? setupMarkdown(content.slice(0, MAX_LENGTH)).concat("...read more")
+      : setupMarkdown(content.slice(0, MAX_LENGTH));
 
   return (
     <li
       className="rounded-md hover:shadow-sm hover:scale-101 transition-transform hover:shadow-accent bg-secondary text-accent text-left"
       {...props}
     >
-      <Link
-        href={`/${nip19.noteEncode(noteId!)}`}
-        className={`p-5 flex gap-4 justify-between flex-col-reverse ${
-          isCol ? "" : "md:flex-row"
-        }`}
-      >
-        <div
-          className={`flex flex-col gap-3
-              ${
-                markdownImageContent?.groups?.filename && !isCol
-                  ? "md:max-w-[65%] flex-[.75]"
-                  : "max-w-full"
-              }
-          `}
-        >
+      <Link href={`/${nip19.noteEncode(noteId!)}`} className="p-5 block">
+        <div className="flex flex-col gap-3 w-full">
           {title ? (
             <h3 className="text-2xl font-semibold text-light twolines">
               {title}
@@ -90,22 +83,33 @@ const Card: FC<NoteProps> = ({
               </div>
             ) : null}
             <DatePosted dateOnly={dateOnly} timestamp={createdAt} />
-            <FileType type={getTagValues("filetype", tags)} />
-            {/* {actualTags.length > 1 ? <NoteTags tags={actualTags} /> : null} */}
+            <FileType type={filetype} />
+          </div>
+          <div>
+            {actualTags.length > 1 ? (
+              <NoteTags tags={actualTags.split(",")} />
+            ) : null}
           </div>
-          <div className="flex flex-col sm:flex-row gap-5 opacity-70">
-            <div className="twolines opacity-70">{content}</div>
+          <div className="flex flex-col sm:flex-row gap-5 w-full bg-primary max-h-[50vh] overflow-hidden rounded-md">
+            {filetype === "markdown" ? (
+              <div className="w-full max-w-full p-4 prose prose-sm prose-invert prose-img:h-[20vh] prose-img:w-auto prose-img:object-cover prose-img:mx-auto">
+                <div dangerouslySetInnerHTML={{ __html: markdown }} />
+              </div>
+            ) : (
+              <CodeEditor
+                className="w-full outline-none min-h-full pointer-events-none"
+                value={content}
+                language={filetype}
+                autoCapitalize="none"
+                disabled
+                padding={25}
+                style={{
+                  fontSize: 15,
+                }}
+              />
+            )}
           </div>
         </div>
-        {markdownImageContent?.groups?.filename ? (
-          <img
-            className={`rounded-md self-center w-full h-auto object-cover flex-[.25] ${
-              isCol ? "" : "md:w-1/3"
-            }`}
-            src={markdownImageContent?.groups?.filename}
-            alt={markdownImageContent?.groups?.title}
-          />
-        ) : null}
       </Link>
     </li>
   );

app/icons/CardCol.tsx

@@ -38,7 +38,6 @@ export default function LatestNotes({ profilePubkey, name }: any) {
           ? `${name ? `${name}'s l` : "L"}atest notes`
           : `${name ? `${name} has no notes yet` : "No notes yet"}`
       }
-      noPosts={events.length === 0}
     >
       <ul className="flex flex-col gap-4 text-center md:text-start">
         {slicedEvents.map((event) => (