docu version 1.8.5

app/blog/page.tsx

@@ -4,6 +4,8 @@ import { formatDate2, stringToDate } from "@/lib/utils";
 import { getMetadata } from "@/app/layout";
 import Image from "next/image";
 import Link from "next/link";
+import { AuroraText } from "@/components/ui/aurora";
+import { ShineBorder } from "@/components/ui/shine-border";
 import docuConfig from "@/docu.json";
 
 export const metadata = getMetadata({
@@ -16,16 +18,17 @@ export default async function BlogIndexPage() {
     (a, b) => stringToDate(b.date).getTime() - stringToDate(a.date).getTime()
   );
   return (
-    <div className="w-full mx-auto flex flex-col gap-1 sm:min-h-[91vh] min-h-[88vh] py-2">
-      <div className="mb-7 flex flex-col gap-2">
-        <h1 className="text-2xl font-extrabold">
-          Blog Posts
+    <div className="flex flex-col items-center justify-center px-2 py-8 text-center sm:py-36">
+      <div className="w-full max-w-[800px] pb-8">
+        <AuroraText className="text-lg"># Stay Informed, Stay Ahead</AuroraText>
+        <h1 className="mb-4 text-2xl font-bold sm:text-5xl">
+            Blog Posts
         </h1>
-        <p className="text-lg text-muted-foreground mt-2">
-          Discover the latest updates, tutorials, and insights on {meta.title}.
+        <p className="mb-8 sm:text-xl text-muted-foreground">
+            Explore updates, tips, and deep dives from the {meta.title}.
         </p>
-      </div>
-      <div className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 sm:gap-8 gap-4 mb-5">
+       </div>
+      <div className="text-left grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 sm:gap-8 gap-4 my-6">
         {blogs.map((blog) => (
           <BlogCard {...blog} slug={blog.slug} key={blog.slug} />
         ))}
@@ -45,9 +48,8 @@ function BlogCard({
   return (
     <Link
       href={`/blog/${slug}`}
-      className="flex flex-col gap-2 items-start border rounded-md py-5 px-3 min-h-[400px]"
+      className="flex flex-col gap-2 items-start border rounded-md max-h-[420px] min-h-[420px]"
     >
-      <h3 className="text-md font-semibold -mt-1 pr-7">{title}</h3>
       <div className="w-full">
         <Image
           src={cover}
@@ -55,11 +57,14 @@ function BlogCard({
           width={400}
           height={150}
           quality={80}
-          className="w-full rounded-md object-cover h-[180px] border"
+          className="w-full rounded-md object-cover h-[200px]"
         />
       </div>
-      <p className="text-sm text-muted-foreground">{description}</p>
-      <div className="flex items-center justify-between w-full mt-auto">
+      <div className="flex flex-col items-start px-3 py-3 gap-2 mb-auto">
+        <h3 className="text-md font-semibold line-clamp-2">{title}</h3>
+        <p className="text-sm text-muted-foreground line-clamp-3">{description}</p>
+      </div>
+      <div className="flex items-center justify-between w-full px-3 mb-6">
         <p className="text-[13px] text-muted-foreground">
           Published on {formatDate2(date)}
         </p>

app/changelog/page.tsx

@@ -2,42 +2,23 @@ import { Suspense } from "react";
 import { getChangelogEntries } from "@/lib/changelog";
 import { VersionEntry } from "@/components/changelog/version-entry";
 import { VersionToc } from "@/components/changelog/version-toc";
-import { getMetadata } from "@/app/layout";
-import docuConfig from "@/docu.json";
 import { FloatingVersionToc } from "@/components/changelog/floating-version";
 
-export const metadata = getMetadata({
-  title: "Changelog",
-  description: "Latest updates and improvements to DocuBook",
-  image: "release-note.png",
-});
-
 export default async function ChangelogPage() {
   const entries = await getChangelogEntries();
-  const { meta } = docuConfig;
-  return (
-    <div className="flex flex-col w-full">
-      <div className="border-b">
-        <div className="py-8">
-          <h1 className="text-2xl font-extrabold">Changelog</h1>
-            <p className="text-lg text-muted-foreground mt-2">
-            Latest updates and improvements to {meta.title}
-           </p>
-        </div>
-      </div>
 
-      <div className="md:container py-8">
-        <div className="flex items-start gap-8">
-          <Suspense fallback={<div className="lg:flex hidden flex-[1.5] min-w-[238px]" />}>
+  return (
+    <div className="flex items-start">
+          <Suspense fallback={<div className="lg:flex hidden flex-[1.5]" />}>
             <VersionToc
               versions={entries.map(({ version, date }) => ({ version, date }))}
             />
           </Suspense>
 
-          <main className="flex-1 lg:flex-[5.25] min-w-0">
+          <main className="flex-1 md:flex-[5.25] min-w-0 max-w-[800px]">
             <div className="relative">
-              <div className="absolute left-0 top-0 h-full w-px bg-border lg:block hidden" />
-              <div className="lg:pl-12 pl-0 lg:pt-8">
+              <div className="absolute left-0 top-0 h-full w-px bg-border md:block hidden" />
+              <div className="md:px-12 md:py-8 max-md:py-10">
                 {entries.map((entry, index) => (
                     <section
                         id={`version-${entry.version}`}
@@ -50,8 +31,6 @@ export default async function ChangelogPage() {
               </div>
             </div>
           </main>
-        </div>
-      </div>
           {/* Floating TOC for smaller screens */}
             {entries.length > 0 && (
             <FloatingVersionToc

app/docs/[[...slug]]/page.tsx

@@ -87,14 +87,18 @@ export default async function DocsPage({ params: { slug = [] } }: PageProps) {
           <h1 className="text-3xl !-mt-0.5">{title}</h1>
           <p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
           <div>{res.content}</div>
-          <div className="my-8 flex justify-end items-center border-b-2 border-x-muted-foreground">
+          <div
+            className={`my-8 flex items-center border-b-2 border-dashed border-x-muted-foreground ${
+                docuConfig.repository?.editLink ? "justify-between" : "justify-end"
+            }`}
+            >
+            {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
             {date && (
-              <p className="text-[13px] text-muted-foreground">
+                <p className="text-[13px] text-muted-foreground">
                 Published on {formatDate2(date)}
-              </p>
+                </p>
             )}
-            {/* <EditThisPage filePath={filePath} /> */}
-          </div>
+            </div>
           <Pagination pathname={pathName} />
         </Typography>
         <ScrollToTop />

app/page.tsx

@@ -47,6 +47,7 @@ export default function Home() {
         </Link>
         <Link
           href="https://www.youtube.com/channel/UC5H-2U68EuVAH9Ehz5eYHNg?sub_confirmation=1"
+          target="_blank"
           className={buttonVariants({
             variant: "secondary",
             className: "px-6 bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",

app/playground/page.tsx

@@ -187,23 +187,24 @@ export default function PlaygroundPage() {
     }
   };
 
-  const insertAtCursor = (textArea: HTMLTextAreaElement, text: string) => {
+    const insertAtCursor = (textArea: HTMLTextAreaElement, text: string) => {
     const start = textArea.selectionStart;
     const end = textArea.selectionEnd;
     const before = markdown.substring(0, start);
     const after = markdown.substring(end);
 
-    // Menambahkan satu baris kosong sebelum dan sesudah komponen
-    const newText = `${before}${text}\n${after}`;
+    const needsLeadingNewline = before && !before.endsWith('\n\n') ? '\n\n' : '';
+    const needsTrailingNewline = after && !after.startsWith('\n\n') ? '\n\n' : '';
+
+    const newText = `${before}${needsLeadingNewline}${text}${needsTrailingNewline}${after}`;
     setMarkdown(newText);
 
     requestAnimationFrame(() => {
-      textArea.focus();
-      const newPosition = start + text.length + 1;
-      textArea.setSelectionRange(newPosition, newPosition);
+        textArea.focus();
+        const newPosition = before.length + needsLeadingNewline.length + text.length + 1;
+        textArea.setSelectionRange(newPosition, newPosition);
     });
-  };
-
+    };
 
   if (isMobile) {
     return <MobileMessage />;