diff --git a/apps/website/app/Components/Blog/BlogLists.tsx b/apps/website/app/Components/Blog/BlogLists.tsx index 28a32e33..db7f0efb 100644 --- a/apps/website/app/Components/Blog/BlogLists.tsx +++ b/apps/website/app/Components/Blog/BlogLists.tsx @@ -12,7 +12,18 @@ export interface Blog { slug: string; author: { name: string; + avatar: { + formats: { + large: { + url: string; + } + } + } }; + category: { + name: string; + slug: string; + } cover: { name: string; documentId: string; @@ -37,8 +48,10 @@ export interface Blog { updatedAt: string; publishedAt: string; blocks: Block[]; -} -interface Block { + RelatedData: Blog[] ; + } + +export interface Block { __component: string; id: number; body: string; diff --git a/apps/website/app/Components/Blog/BlogPage.tsx b/apps/website/app/Components/Blog/BlogPage.tsx index 81ad2ad9..cfc9eb66 100644 --- a/apps/website/app/Components/Blog/BlogPage.tsx +++ b/apps/website/app/Components/Blog/BlogPage.tsx @@ -7,12 +7,14 @@ import Flow from '@/public/Flow.png' import ProfIcon from '@/public/ProfIcon.png' import Paragraph from './Paragraph' import CodeBlock from '../CodeBlock' -import { Blog } from './BlogLists' +import { Block, Blog } from './BlogLists' import ReactMarkdown from 'react-markdown'; +import Breadcrumb from './BreadCrumb' +import Link from 'next/link' -const BlogPage = ({blog}:{blog:Blog}) => { +const BlogPage = ({blog}:{blog:Blog}) => { const Code = `// Imports import mongoose, { Schema } from 'untitled' @@ -33,37 +35,108 @@ const schema = new Schema({ // Model export default untitled.model(collection, schema, collection)`; + + const calculateReadingTimeFromBlocks = (blocks:Block[])=> { + const wordsPerMinute = 200; // Average reading speed + let totalWords = 0; - const RelatedArticleCard = () => ( -

- A New Tab Model + if(blocks.length === 0) return 1; + + // Extract and combine all body content + const combinedText = blocks + .map(block => block.body) + .filter(Boolean) + .join(" "); + + // Count words + totalWords = combinedText.split(/\s+/).filter(word => word.length > 0).length; + + return Math.ceil(totalWords / wordsPerMinute); // Round up + } + + const GlossaryContents = (blocks: Block[]) => { + const headings: { id: string; title: string }[] = []; + let insideCodeBlock = false; + + blocks.forEach((block) => { + const lines = block.body.split("\n"); + + lines.forEach((line) => { + if (line.startsWith("```")) { + insideCodeBlock = !insideCodeBlock; + } + if (insideCodeBlock) return; + + if (line.startsWith("# ")) { + let title = line.replace("# ", "").trim(); + title = title.replace(/^(\d+\.?\s*)/, ""); + if (title) { + const id = title + .toLowerCase() + .replace(/[^a-z0-9]+/g, "-") + .replace(/(^-|-$)/g, ""); + + headings.push({ id, title }); + } + } + }); + }); + + return headings; + }; + + const formatDate = (dateString: string): string => { + const date = new Date(dateString); + return date.toLocaleDateString('en-US', { + month: 'long', + day: 'numeric', + year: 'numeric' + }); + }; + + const RelatedArticleCard = ({Data }: { Data: Blog }) => ( + +

+ {Data.title}

- Announcing the next-generation Cursor Tab model. +

+ {Data.description}

By Phillip

3 minutes read

By {Data.author.name}

{calculateReadingTimeFromBlocks(Data.blocks)} min read

+ ); + const slugify = (text: string) => { + return text + .toLowerCase() + .trim() + .replace(/[^\w\s-]/g, "") // Remove special characters + .replace(/\s+/g, "-") // Replace spaces with hyphens + .replace(/-+/g, "-"); // Remove multiple hyphens + }; + + + const Contents = GlossaryContents(blog.blocks); + return (

{/* Background Vector */} @@ -77,49 +150,36 @@ export default untitled.model(collection, schema, collection)`;

{/* Sidebar Navigation */} -

Glossary

- -

{" "} - Introduction - - - {" "} - Code +

+ + + + Introduction + + { + Contents.map(({ id, title }) => ( + + + + {title} + + + )) + }

{/* Main Content */} -

{/* Breadcrumb Navigation */} -

- -

Blog

- Customers -

{/* Article Header */}

@@ -128,13 +188,13 @@ export default untitled.model(collection, schema, collection)`;

{/* Hero Image */} -

@@ -144,20 +204,23 @@ export default untitled.model(collection, schema, collection)`; -

3 min read

{calculateReadingTimeFromBlocks(blog.blocks)} min read

Nov 27, 2024

{formatDate(blog.publishedAt)}

{blog.author.name}

@@ -165,27 +228,50 @@ export default untitled.model(collection, schema, collection)`;

{blog.blocks.map((block) => (

{children}

, + h1: ({ children }) =>

{children}

, h2: ({ children }) =>

{children}

, p: ({ children }) => {children}, + pre: ({ children }) => { + const codeString = + children && typeof children === "object" && "props" in children + ? children.props.children + : children; + + return ; + }, + a: ({ href, children }) => ( + + {children} + + ), img: ({ src, alt }) => ( -

), - ul: ({ children }) =>

{children}, + ul: ({ children }) =>

{children}, } } className='ds-gap-16 ds-flex ds-flex-col' @@ -225,15 +311,6 @@ export default untitled.model(collection, schema, collection)`;

*/} - {/* - Founded 30 years ago, this top global retailer has established itself as a leader in the sportswear and apparel industry. With a diverse product range that includes athletic performance gear, footwear, accessories, and casual apparel, the company is renowned for its commitment to innovation and quality. Listed on the NYSE, the retailer reported a revenue of almost 6 billion in 2024 and employs approximately 16,000 people worldwide. Despite a challenging retail environment, it continues to excel in ecommerce, showcasing a 3% growth in direct-to-consumer revenue to 2.3 billion, with ecommerce accounting for 41% of this segment. - */} - - {/*

Code for integration

- -

*/} - {/*

Flow of Code

- - Founded 30 years ago, this top global retailer has established itself as a leader in the sportswear and apparel industry. With a diverse product range that includes athletic performance gear, footwear, accessories, and casual apparel, the company is renowned for its commitment to innovation and quality. Listed on the NYSE, the retailer reported a revenue of almost 6 billion in 2024 and employs approximately 16,000 people worldwide. Despite a challenging retail environment, it continues to excel in ecommerce, showcasing a 3% growth in direct-to-consumer revenue to 2.3 billion, with ecommerce accounting for 41% of this segment. - */} +

*/}

{/* Related Articles Section */}

- - - + { blog.RelatedData.map((article) => ( + + ))}

); diff --git a/apps/website/app/Components/Blog/List.tsx b/apps/website/app/Components/Blog/List.tsx index 7e462ce5..573c3831 100644 --- a/apps/website/app/Components/Blog/List.tsx +++ b/apps/website/app/Components/Blog/List.tsx @@ -1,17 +1,33 @@ import Image from "next/image"; import React from "react"; -import { Blog } from "./BlogLists"; +import { Block, Blog } from "./BlogLists"; import Link from "next/link"; interface listProps { blog: Blog; } +function calculateReadingTimeFromBlocks(blocks: Block[]) { + const wordsPerMinute = 200; // Average reading speed + let totalWords = 0; + + // Extract and combine all body content + if (blocks.length == 0) return 1; + const combinedText = blocks + .map(block => block.body) + .filter(Boolean) + .join(" "); + + // Count words + totalWords = combinedText.split(/\s+/).filter(word => word.length > 0).length; + + return Math.ceil(totalWords / wordsPerMinute); +} + const List = ({ blog }: listProps) => { return ( -

@@ -24,7 +40,7 @@ const List = ({ blog }: listProps) => { />

@@ -32,7 +48,7 @@ const List = ({ blog }: listProps) => { - 6 MIN READ + {calculateReadingTimeFromBlocks(blog.blocks)} MIN READ

@@ -51,8 +67,7 @@ const List = ({ blog }: listProps) => { {blog.description}

- Read more @@ -70,9 +85,9 @@ const List = ({ blog }: listProps) => { /> - +

+ ); }; diff --git a/apps/website/app/Components/Blog/Paragraph.tsx b/apps/website/app/Components/Blog/Paragraph.tsx index 04cc945e..b83ab224 100644 --- a/apps/website/app/Components/Blog/Paragraph.tsx +++ b/apps/website/app/Components/Blog/Paragraph.tsx @@ -6,7 +6,7 @@ interface ParagraphProps { const Paragraph: React.FC = ({ children }) => { return ( -

{children}

); diff --git a/apps/website/app/Components/CodeBlock.tsx b/apps/website/app/Components/CodeBlock.tsx index b9d1eb23..dc6a0a66 100644 --- a/apps/website/app/Components/CodeBlock.tsx +++ b/apps/website/app/Components/CodeBlock.tsx @@ -1,12 +1,13 @@ "use client"; -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import Prism from "prismjs"; import "prismjs/themes/prism.css"; // Default theme -import "prismjs/components/prism-javascript"; // JavaScript syntax -import "prismjs/components/prism-typescript"; // TypeScript syntax -import "prismjs/components/prism-jsx"; // JSX syntax -import "prismjs/components/prism-tsx"; // TSX syntax +import "prismjs/components/prism-javascript"; +import "prismjs/components/prism-typescript"; +import "prismjs/components/prism-python"; +import "prismjs/components/prism-jsx"; +import "prismjs/components/prism-tsx"; interface CodeBlockProps { code: string; @@ -14,76 +15,81 @@ interface CodeBlockProps { } const CodeBlock = ({ code, language }: CodeBlockProps) => { + const [expanded, setExpanded] = useState(false); const lines = code.split("\n"); + const visibleLines = expanded ? lines : lines.slice(0, 6); const lineNumbers = lines.map((_, index) => `${index + 1}`.padStart(3, " ")); - - const codeWithLineNumbers = lines - .map((line, index) => { - return `${lineNumbers[index]} | ${line}`; - }) - .join("\n"); + const visibleLineNumbers = expanded ? lineNumbers : lineNumbers.slice(0, 6); useEffect(() => { if (typeof window !== "undefined") { Prism.highlightAll(); } - }, [code]); - - const formattedLanguage = language.toLowerCase(); + }, [code, expanded]); return (

- {/* Line numbers on the left */} -

- {lineNumbers.map((lineNumber) => ( -

{lineNumber}

- ))} -

- - {/* Code block with syntax highlighting */} -

-        
-


+        >
+          {visibleLineNumbers.map((lineNumber) => (
+            {lineNumber}
+          ))}
+


+        +          
+            {visibleLines.join("\n")}
+          
+        
+


+      {lines.length > 6 && (
+        
+          
+        
+      )}


   );
 };
 
-export default CodeBlock;
+export default CodeBlock;
\ No newline at end of file
diff --git a/apps/website/app/blog/[slug]/page.tsx b/apps/website/app/blog/[slug]/page.tsx
index e0310907..a9699aad 100644
--- a/apps/website/app/blog/[slug]/page.tsx
+++ b/apps/website/app/blog/[slug]/page.tsx
@@ -7,9 +7,9 @@ import React from 'react'
 
 const API_URL = process.env.NEXT_PUBLIC_STRAPI_URL || "https://better-paradise-b47df9e607.strapiapp.com";
 
-async function getBlogPosts(slug: string) { 
+const getBlogPosts = async (slug: string) => { 
   try {
-    const response = await axios.get(`${API_URL}/api/articles?filters[slug][$eq]=${slug}&populate=*`);
+    const response = await axios.get(`${API_URL}/api/articles?filters[slug][$eq]=${slug}&populate=blocks&populate=author.avatar&populate=category&populate=cover`);
     return response.data.data[0];
   }catch(error){
     console.error('Error fetching blog data:', error);
@@ -17,19 +17,31 @@ async function getBlogPosts(slug: string) {
   }
 }
 
+const GetRelatedData = async (slug:string) => {
+  try {
+    const response = await axios.get(`${API_URL}/api/articles?filters[slug][$ne]=${slug}&populate=author.avatar&populate=blocks&pagination[limit]=3`);
+    return response.data.data;
+  } catch (error) {
+    return [];
+  }
+}
+
 const RichTextToMark = ({ content }: { content: string }) => {
   const cleanMarkdown = content.replace(/\n\s*\+/g, '').trim();
   return cleanMarkdown;
 }
 
+
 export default async function BlogPostPage({
   params,
 }: {
   params: Promise<{ slug: string }>
   }) {
   const { slug } = await params;
-  const data: Blog = await getBlogPosts(slug);
+  let data: Blog;
+  data = await getBlogPosts(slug);
 
+  data.RelatedData = await GetRelatedData(data.slug);
   data.blocks = data.blocks.map((block) => ({
     ...block,
     body: RichTextToMark({ content: block.body })
diff --git a/apps/website/app/blog/page.tsx b/apps/website/app/blog/page.tsx
index dfaf7a95..9d2ef264 100644
--- a/apps/website/app/blog/page.tsx
+++ b/apps/website/app/blog/page.tsx
@@ -31,7 +31,7 @@ const API_URL =
 async function getBlogPosts() {
   try {
     const response = await axios.get(
-      `${API_URL}/api/articles?populate=cover&populate=author`
+      `${API_URL}/api/articles?populate=*&sort=createdAt:desc`
     );
     return response.data.data;
   } catch (error) {
@@ -40,13 +40,10 @@ async function getBlogPosts() {
   }
 }
 
-
-
 export default async function BlogPage() {
   let data: Blog[] = [];
-
   try {
-    data = await getBlogPosts();
+      data = await getBlogPosts();
   } catch (error) {
     console.error("Failed to load blog posts:", error);
     data = [];