Merge branch 'develop' into 1071-video-player-page-for-courses

app/(app)/alpha/new/[[...postIdArr]]/_client.tsx

@@ -10,7 +10,6 @@ import {
 } from "@headlessui/react";
 import { ChevronUpIcon } from "@heroicons/react/20/solid";
 import Editor from "@/components/editor/editor";
-import RenderPost from "@/components/editor/editor/RenderPost";
 import useCreatePage from "@/hooks/useCreatePage";
 import { usePrompt } from "@/components/PromptService";
 
@@ -214,69 +213,57 @@ const Create = () => {
             <div className="z-60 absolute bottom-0 left-0 right-0 top-0 bg-black opacity-25" />
           </div>
         )}
-        <div className="bg-black">
-          <div className="mx-auto w-full max-w-7xl flex-grow text-black lg:flex xl:px-8">
-            {/* Left sidebar & main wrapper */}
-            <div className="min-w-0 flex-1 xl:flex">
-              <div className="lg:min-w-0 lg:flex-1">
-                <div className="h-full min-h-[40rem] px-4 py-0 sm:px-6 lg:px-4 lg:py-6">
-                  {/* Start main area*/}
-                  <div className="relative h-full">
-                    <div className="bg-neutral-900 text-white shadow-xl">
-                      <div className="bg-neutral-900 px-4 py-6 sm:p-6 lg:pb-8">
-                        {!body && (
-                          <Controller
-                            name="body"
-                            control={control}
-                            render={({ field }) => (
-                              <Editor {...field} initialValue={"{}"} />
-                            )}
-                          />
-                        )}
-                        {body && body.length > 0 && (
-                          <Controller
-                            name="body"
-                            control={control}
-                            render={({ field }) => (
-                              <Editor {...field} initialValue={body} />
-                            )}
-                          />
-                        )}
+        <div className="mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl">
+          <div className="prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg">
+            {!body && (
+              <Controller
+                name="body"
+                control={control}
+                render={({ field }) => (
+                  <Editor {...field} initialValue={"{}"} />
+                )}
+              />
+            )}
+            {body && body.length > 0 && (
+              <Controller
+                name="body"
+                control={control}
+                render={({ field }) => (
+                  <Editor {...field} initialValue={body} />
+                )}
+              />
+            )}
 
-                        <div className="flex items-center justify-between">
-                          <>
-                            {saveStatus === "loading" && <p>Auto-saving...</p>}
-                            {saveStatus === "error" && savedTime && (
-                              <p className="text-xs text-red-600 lg:text-sm">
-                                {`Error saving, last saved: ${savedTime.toString()}`}
-                              </p>
-                            )}
-                            {saveStatus === "success" && savedTime && (
-                              <p className="text-xs text-neutral-400 lg:text-sm">
-                                {`Saved: ${savedTime.toString()}`}
-                              </p>
-                            )}
-                          </>
-                          <div />
-
-                          <div className="flex">
-                            <button
-                              type="button"
-                              disabled={isDisabled}
-                              className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:opacity-50"
-                              onClick={() => setOpen(true)}
-                            >
-                              {!data?.published && "Publish"}
-                              {data?.published && "Save Changes"}
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  {/* End main area */}
-                </div>
+            <div className="flex items-center justify-between">
+              <div>
+                {saveStatus === "loading" && (
+                  <p className="text-xs lg:text-sm">Auto-saving...</p>
+                )}
+                {saveStatus === "error" && savedTime && (
+                  <p className="text-xs text-red-600 lg:text-sm">
+                    Error saving, last saved: {savedTime.toString()}
+                  </p>
+                )}
+                {saveStatus === "success" && savedTime && (
+                  <p className="text-xs text-neutral-400 lg:text-sm">
+                    Saved: {savedTime.toString()}
+                  </p>
+                )}
               </div>
+
+              <button
+                type="button"
+                disabled={isDisabled}
+                className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:opacity-50"
+                onClick={() => setOpen(true)}
+                aria-label={
+                  data?.published
+                    ? "Save changes to document"
+                    : "Publish document"
+                }
+              >
+                {data?.published ? "Save Changes" : "Publish"}
+              </button>
             </div>
           </div>
         </div>

app/(app)/articles/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { RenderableTreeNode } from "@markdoc/markdoc";
 import Markdoc from "@markdoc/markdoc";
 import Link from "next/link";
 import BioBar from "@/components/BioBar/BioBar";
@@ -13,6 +14,10 @@ import ArticleAdminPanel from "@/components/ArticleAdminPanel/ArticleAdminPanel"
 import { type Metadata } from "next";
 import { getPost } from "@/server/lib/posts";
 import { getCamelCaseFromLower } from "@/utils/utils";
+import { generateHTML } from "@tiptap/html";
+import { TiptapExtensions } from "@/components/editor/editor/extensions";
+import DOMPurify from "isomorphic-dompurify";
+import type { JSONContent } from "@tiptap/core";
 
 type Props = { params: { slug: string } };
 
@@ -57,6 +62,20 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
+const parseJSON = (str: string): JSONContent | null => {
+  try {
+    return JSON.parse(str);
+  } catch (e) {
+    return null;
+  }
+};
+
+const renderSanitizedTiptapContent = (jsonContent: JSONContent) => {
+  const rawHtml = generateHTML(jsonContent, [...TiptapExtensions]);
+  // Sanitize the HTML
+  return DOMPurify.sanitize(rawHtml);
+};
+
 const ArticlePage = async ({ params }: Props) => {
   const session = await getServerAuthSession();
   const { slug } = params;
@@ -66,11 +85,24 @@ const ArticlePage = async ({ params }: Props) => {
   const post = await getPost({ slug });
 
   if (!post) {
-    notFound();
+    return notFound();
   }
 
-  const ast = Markdoc.parse(post.body);
-  const content = Markdoc.transform(ast, config);
+  const parsedBody = parseJSON(post.body);
+  const isTiptapContent = parsedBody?.type === "doc";
+
+  let renderedContent: string | RenderableTreeNode;
+
+  if (isTiptapContent && parsedBody) {
+    const jsonContent = parsedBody;
+    renderedContent = renderSanitizedTiptapContent(jsonContent);
+  } else {
+    const ast = Markdoc.parse(post.body);
+    const transformedContent = Markdoc.transform(ast, config);
+    renderedContent = Markdoc.renderers.react(transformedContent, React, {
+      components: markdocComponents,
+    }) as unknown as string;
+  }
 
   return (
     <>
@@ -83,10 +115,16 @@ const ArticlePage = async ({ params }: Props) => {
       />
       <div className="mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl">
         <article className="prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg">
-          <h1>{post.title}</h1>
-          {Markdoc.renderers.react(content, React, {
-            components: markdocComponents,
-          })}
+          {!isTiptapContent && <h1>{post.title}</h1>}
+
+          {isTiptapContent ? (
+            <div
+              dangerouslySetInnerHTML={{ __html: renderedContent }}
+              className="tiptap-content"
+            />
+          ) : (
+            <div>{renderedContent}</div>
+          )}
         </article>
         {post.tags.length > 0 && (
           <section className="flex flex-wrap gap-3">

app/(app)/get-started/_client.tsx

@@ -39,7 +39,10 @@ const GetStarted: NextPage = () => {
           </h2>
           <p className="mt-2 text-center text-base text-neutral-500">
             Or{" "}
-            <Link className="fancy-link font-medium" href="/">
+            <Link
+              className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text font-medium tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              href="/"
+            >
               return home
             </Link>
           </p>

app/(editor)/create/[[...paramsArr]]/_client.tsx

@@ -794,7 +794,7 @@ const Create = ({ session }: { session: Session | null }) => {
                       href="https://www.markdownguide.org/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="fancy-link"
+                      className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
                     >
                       this
                     </a>{" "}
@@ -803,7 +803,7 @@ const Create = ({ session }: { session: Session | null }) => {
                       href="https://www.markdownguide.org/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="fancy-link"
+                      className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
                     >
                       markdownguide
                     </a>

components/ArticleMenu/ArticleMenu.tsx

@@ -139,7 +139,7 @@ const ArticleMenu = ({
               }}
             >
               <HeartIcon
-                className={`w-6 h-6${
+                className={`h-6 w-6 ${
                   data?.currentUserLiked
                     ? "fill-red-400"
                     : "fill-neutral-400 dark:fill-neutral-600"
@@ -162,7 +162,7 @@ const ArticleMenu = ({
             }}
           >
             <BookmarkIcon
-              className={`w-6 h-6${
+              className={`h-6 w-6 ${
                 data?.currentUserBookmarked
                   ? "fill-blue-400"
                   : "fill-neutral-400 dark:fill-neutral-600"

components/ArticlePreview/ArticlePreview.tsx

@@ -158,7 +158,7 @@ const ArticlePreview: NextPage<Props> = ({
       <div className="flex w-full content-center justify-between">
         <div className="flex w-full items-center justify-between">
           <Link
-            className="fancy-link semibold text-lg"
+            className="semibold cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-lg tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
             href={`/articles/${slug}`}
           >
             Read full article
@@ -181,7 +181,7 @@ const ArticlePreview: NextPage<Props> = ({
                 }
               >
                 <BookmarkIcon
-                  className={`w-6 h-6${
+                  className={`h-6 w-6 ${
                     bookmarked
                       ? "fill-blue-400"
                       : "fill-neutral-400 dark:fill-neutral-600"

components/Comments/CommentsArea.tsx

@@ -505,11 +505,17 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
             <p className="mb-2">Hey! 👋</p>
             <p className="mb-2">Got something to say?</p>
             <p>
-              <button onClick={() => signIn()} className="fancy-link">
+              <button
+                onClick={() => signIn()}
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              >
                 Sign in
               </button>{" "}
               or{" "}
-              <button onClick={() => signIn()} className="fancy-link">
+              <button
+                onClick={() => signIn()}
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              >
                 sign up
               </button>{" "}
               to leave a comment.

components/EditorHints/EditorHints.tsx

@@ -29,7 +29,7 @@ const EditorHints = () => {
                 href="https://www.markdownguide.org/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="fancy-link"
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
               >
                 this
               </a>{" "}
@@ -38,7 +38,7 @@ const EditorHints = () => {
                 href="https://www.markdownguide.org/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="fancy-link"
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
               >
                 markdownguide
               </a>

components/editor/editor/RenderPost.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { TiptapExtensions } from "./extensions";
 import { EditorContent, useEditor } from "@tiptap/react";
+import SlashCommand from "./extensions/slash-command";
 
 interface RenderPostProps {
   json: string;
@@ -11,7 +12,7 @@ const RenderPost = ({ json }: RenderPostProps) => {
 
   const editor = useEditor({
     editable: false,
-    extensions: [...TiptapExtensions],
+    extensions: [...TiptapExtensions, SlashCommand],
     content,
   });
 

components/editor/editor/extensions/index.tsx

@@ -138,7 +138,6 @@ export const TiptapExtensions = [
       return "type / to see a list of formatting features";
     },
   }),
-  SlashCommand,
   TextStyle,
   Link.configure({
     HTMLAttributes: {