@beyondcorp/beyond-ui 1.2.55 → 1.2.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
|
+
import ReactMarkdown from 'react-markdown';
|
|
4
|
+
import remarkGfm from 'remark-gfm';
|
|
3
5
|
import { CodeHighlight } from '../CodeHighlight/CodeHighlight.js';
|
|
4
6
|
import { ChevronLeft, Tag, Calendar, Clock, Eye, Twitter, Facebook, Linkedin, Link, Heart, MessageCircle, Share2 } from 'lucide-react';
|
|
5
7
|
import { Button } from '../Button/Button.js';
|
|
@@ -12,8 +14,6 @@ import { useBlogNavigation } from './hooks/useBlogNavigation.js';
|
|
|
12
14
|
import { BlogCommentSection } from './BlogCommentSection.js';
|
|
13
15
|
import { BlogSidebar } from './BlogSidebar.js';
|
|
14
16
|
import { sampleBlogPosts } from './data/sampleData.js';
|
|
15
|
-
import { Markdown } from '../../node_modules/react-markdown/lib/index.js';
|
|
16
|
-
import remarkGfm from '../../node_modules/remark-gfm/lib/index.js';
|
|
17
17
|
|
|
18
18
|
const SingleBlogView = ({ postId = '1', onBackClick, className = '', }) => {
|
|
19
19
|
const { generateTableOfContents } = useBlogNavigation();
|
|
@@ -55,7 +55,7 @@ const SingleBlogView = ({ postId = '1', onBackClick, className = '', }) => {
|
|
|
55
55
|
day: 'numeric',
|
|
56
56
|
});
|
|
57
57
|
};
|
|
58
|
-
return (jsxs("div", { className: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 ${className}`, children: [jsxs("div", { className: "mb-4 sm:mb-6 lg:mb-8", children: [jsxs(Button, { variant: "ghost", onClick: onBackClick, className: "mb-2 sm:mb-4 p-2 sm:p-3", children: [jsx(ChevronLeft, { className: "h-4 w-4 mr-1 sm:mr-2" }), jsx("span", { className: "text-sm sm:text-base", children: "Back to Blog" })] }), isAbove('md') && (jsxs("nav", { className: "flex items-center space-x-2 text-sm text-gray-600", children: [jsx("a", { href: "/", className: "hover:text-primary-600 transition-colors", children: "Home" }), jsx("span", { children: "/" }), jsx("a", { href: "/blog", className: "hover:text-primary-600 transition-colors", children: "Blog" }), jsx("span", { children: "/" }), jsx("a", { href: `/blog/category/${post.category.toLowerCase()}`, className: "hover:text-primary-600 transition-colors", children: post.category }), jsx("span", { children: "/" }), jsx("span", { className: "text-gray-900 truncate max-w-xs", children: post.title })] }))] }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 lg:gap-8", children: [isAbove('lg') && (jsx("div", { className: "lg:col-span-3", children: jsx(BlogSidebar, { type: "navigation", currentPost: post, relatedPosts: relatedPosts }) })), jsxs("div", { className: "lg:col-span-6", children: [jsxs("article", { className: "prose prose-sm sm:prose-base lg:prose-lg max-w-none", children: [jsxs("header", { className: "mb-6 sm:mb-8 not-prose", children: [jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4", children: [jsx(Badge, { variant: "default", className: "text-xs sm:text-sm", style: { backgroundColor: post.category === 'Design' ? '#8b5cf6' : '#3b82f6' }, children: post.category }), post.featured && (jsx(Badge, { variant: "warning", className: "text-xs sm:text-sm", children: "Featured" })), post.tags.slice(0, isBelow('sm') ? 1 : 2).map(tag => (jsxs(Badge, { variant: "outline", className: "text-xs", children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag)))] }), jsx("h1", { className: "text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4 sm:mb-6 leading-tight", children: post.title }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 pb-4 sm:pb-6 border-b border-gray-200 space-y-4 sm:space-y-0", children: [jsxs("div", { className: "flex items-center space-x-3 sm:space-x-4", children: [jsxs(Avatar, { size: isBelow('sm') ? 'sm' : 'lg', children: [jsx(AvatarImage, { src: post.author.avatar }), jsx(AvatarFallback, { children: post.author.name[0] })] }), jsxs("div", { children: [jsx("p", { className: "font-semibold text-gray-900 text-sm sm:text-base", children: post.author.name }), jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600", children: [jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Calendar, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsx("span", { children: formatDate(post.publishedAt) })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Clock, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsxs("span", { children: [post.readingTime, " min read"] })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Eye, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsxs("span", { children: [post.stats.views.toLocaleString(), " views"] })] })] })] })] }), jsxs("div", { className: "flex items-center space-x-1 sm:space-x-2", children: [jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('twitter'), className: "p-2", children: jsx(Twitter, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('facebook'), className: "p-2", children: jsx(Facebook, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('linkedin'), className: "p-2", children: jsx(Linkedin, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('copy'), className: "p-2", children: jsx(Link, { className: "h-4 w-4" }) })] })] }), post.seoMeta.ogImage && (jsx("div", { className: "aspect-video sm:aspect-[16/9] lg:aspect-video bg-gray-100 rounded-lg mb-6 sm:mb-8 overflow-hidden", children: jsx("img", { src: post.seoMeta.ogImage, alt: post.title, className: "w-full h-full object-cover" }) }))] }), jsx("div", { className: "prose prose-sm sm:prose-base lg:prose-lg max-w-none prose-headings:scroll-mt-20", children: jsx(
|
|
58
|
+
return (jsxs("div", { className: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 ${className}`, children: [jsxs("div", { className: "mb-4 sm:mb-6 lg:mb-8", children: [jsxs(Button, { variant: "ghost", onClick: onBackClick, className: "mb-2 sm:mb-4 p-2 sm:p-3", children: [jsx(ChevronLeft, { className: "h-4 w-4 mr-1 sm:mr-2" }), jsx("span", { className: "text-sm sm:text-base", children: "Back to Blog" })] }), isAbove('md') && (jsxs("nav", { className: "flex items-center space-x-2 text-sm text-gray-600", children: [jsx("a", { href: "/", className: "hover:text-primary-600 transition-colors", children: "Home" }), jsx("span", { children: "/" }), jsx("a", { href: "/blog", className: "hover:text-primary-600 transition-colors", children: "Blog" }), jsx("span", { children: "/" }), jsx("a", { href: `/blog/category/${post.category.toLowerCase()}`, className: "hover:text-primary-600 transition-colors", children: post.category }), jsx("span", { children: "/" }), jsx("span", { className: "text-gray-900 truncate max-w-xs", children: post.title })] }))] }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 lg:gap-8", children: [isAbove('lg') && (jsx("div", { className: "lg:col-span-3", children: jsx(BlogSidebar, { type: "navigation", currentPost: post, relatedPosts: relatedPosts }) })), jsxs("div", { className: "lg:col-span-6", children: [jsxs("article", { className: "prose prose-sm sm:prose-base lg:prose-lg max-w-none", children: [jsxs("header", { className: "mb-6 sm:mb-8 not-prose", children: [jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4", children: [jsx(Badge, { variant: "default", className: "text-xs sm:text-sm", style: { backgroundColor: post.category === 'Design' ? '#8b5cf6' : '#3b82f6' }, children: post.category }), post.featured && (jsx(Badge, { variant: "warning", className: "text-xs sm:text-sm", children: "Featured" })), post.tags.slice(0, isBelow('sm') ? 1 : 2).map(tag => (jsxs(Badge, { variant: "outline", className: "text-xs", children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag)))] }), jsx("h1", { className: "text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4 sm:mb-6 leading-tight", children: post.title }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 pb-4 sm:pb-6 border-b border-gray-200 space-y-4 sm:space-y-0", children: [jsxs("div", { className: "flex items-center space-x-3 sm:space-x-4", children: [jsxs(Avatar, { size: isBelow('sm') ? 'sm' : 'lg', children: [jsx(AvatarImage, { src: post.author.avatar }), jsx(AvatarFallback, { children: post.author.name[0] })] }), jsxs("div", { children: [jsx("p", { className: "font-semibold text-gray-900 text-sm sm:text-base", children: post.author.name }), jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600", children: [jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Calendar, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsx("span", { children: formatDate(post.publishedAt) })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Clock, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsxs("span", { children: [post.readingTime, " min read"] })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Eye, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsxs("span", { children: [post.stats.views.toLocaleString(), " views"] })] })] })] })] }), jsxs("div", { className: "flex items-center space-x-1 sm:space-x-2", children: [jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('twitter'), className: "p-2", children: jsx(Twitter, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('facebook'), className: "p-2", children: jsx(Facebook, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('linkedin'), className: "p-2", children: jsx(Linkedin, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('copy'), className: "p-2", children: jsx(Link, { className: "h-4 w-4" }) })] })] }), post.seoMeta.ogImage && (jsx("div", { className: "aspect-video sm:aspect-[16/9] lg:aspect-video bg-gray-100 rounded-lg mb-6 sm:mb-8 overflow-hidden", children: jsx("img", { src: post.seoMeta.ogImage, alt: post.title, className: "w-full h-full object-cover" }) }))] }), jsx("div", { className: "prose prose-sm sm:prose-base lg:prose-lg max-w-none prose-headings:scroll-mt-20", children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
|
|
59
59
|
h1: ({ children, ...props }) => (jsx("h1", { id: String(children).toLowerCase().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-'), className: "scroll-mt-20", ...props, children: children })),
|
|
60
60
|
h2: ({ children, ...props }) => (jsx("h2", { id: String(children).toLowerCase().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-'), className: "scroll-mt-20", ...props, children: children })),
|
|
61
61
|
h3: ({ children, ...props }) => (jsx("h3", { id: String(children).toLowerCase().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-'), className: "scroll-mt-20", ...props, children: children })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleBlogView.js","sources":["../../../src/components/Blog/SingleBlogView.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { CodeHighlight } from '../CodeHighlight/CodeHighlight';\nimport { \n Calendar, \n Clock, \n User, \n Tag, \n Share2, \n Heart, \n MessageCircle,\n Eye,\n ChevronLeft,\n Facebook,\n Twitter,\n Linkedin,\n Link as LinkIcon\n} from 'lucide-react';\nimport { Button } from '../Button';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { showToast } from '../Toast';\nimport { useBlogNavigation } from './hooks/useBlogNavigation';\nimport { BlogCommentSection } from './BlogCommentSection';\nimport { BlogSidebar } from './BlogSidebar';\nimport type { BlogPost } from './types';\nimport { sampleBlogPosts } from './data/sampleData';\n\ninterface SingleBlogViewProps {\n postId?: string;\n onBackClick?: () => void;\n className?: string;\n}\n\nexport const SingleBlogView: React.FC<SingleBlogViewProps> = ({\n postId = '1',\n onBackClick,\n className = '',\n}) => {\n const { generateTableOfContents } = useBlogNavigation();\n const { isAbove, isBelow } = useBreakpoint();\n \n // Get blog post data (in real app, this would come from API)\n const post = sampleBlogPosts.find(p => p.id === postId) || sampleBlogPosts[0];\n const relatedPosts = sampleBlogPosts.filter(p => \n p.id !== post.id && \n (p.category === post.category || p.tags.some(tag => post.tags.includes(tag)))\n ).slice(0, 3);\n\n useEffect(() => {\n generateTableOfContents(post.content);\n }, [post.content, generateTableOfContents]);\n\n const handleShare = (platform: string) => {\n const url = window.location.href;\n const title = post.title;\n \n let shareUrl = '';\n switch (platform) {\n case 'twitter':\n shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`;\n break;\n case 'facebook':\n shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;\n break;\n case 'linkedin':\n shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;\n break;\n case 'copy':\n navigator.clipboard.writeText(url);\n showToast.success('Link copied to clipboard!');\n return;\n }\n \n if (shareUrl) {\n window.open(shareUrl, '_blank', 'width=600,height=400');\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n });\n };\n\n return (\n <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 ${className}`}>\n {/* Back Navigation - Mobile optimized */}\n <div className=\"mb-4 sm:mb-6 lg:mb-8\">\n <Button variant=\"ghost\" onClick={onBackClick} className=\"mb-2 sm:mb-4 p-2 sm:p-3\">\n <ChevronLeft className=\"h-4 w-4 mr-1 sm:mr-2\" />\n <span className=\"text-sm sm:text-base\">Back to Blog</span>\n </Button>\n \n {/* Breadcrumb - Hidden on mobile, visible on tablet+ */}\n {isAbove('md') && (\n <nav className=\"flex items-center space-x-2 text-sm text-gray-600\">\n <a href=\"/\" className=\"hover:text-primary-600 transition-colors\">Home</a>\n <span>/</span>\n <a href=\"/blog\" className=\"hover:text-primary-600 transition-colors\">Blog</a>\n <span>/</span>\n <a href={`/blog/category/${post.category.toLowerCase()}`} className=\"hover:text-primary-600 transition-colors\">\n {post.category}\n </a>\n <span>/</span>\n <span className=\"text-gray-900 truncate max-w-xs\">{post.title}</span>\n </nav>\n )}\n </div>\n\n {/* Responsive Layout: Mobile stacked, Desktop with sidebars */}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 lg:gap-8\">\n {/* Left Sidebar - Hidden on mobile/tablet, fixed on desktop */}\n {isAbove('lg') && (\n <div className=\"lg:col-span-3\">\n <BlogSidebar \n type=\"navigation\"\n currentPost={post}\n relatedPosts={relatedPosts}\n />\n </div>\n )}\n\n {/* Main Content - Full width on mobile, centered on desktop */}\n <div className=\"lg:col-span-6\">\n <article className=\"prose prose-sm sm:prose-base lg:prose-lg max-w-none\">\n {/* Article Header */}\n <header className=\"mb-6 sm:mb-8 not-prose\">\n <div className=\"flex flex-wrap items-center gap-2 mb-4\">\n <Badge \n variant=\"default\"\n className=\"text-xs sm:text-sm\"\n style={{ backgroundColor: post.category === 'Design' ? '#8b5cf6' : '#3b82f6' }}\n >\n {post.category}\n </Badge>\n {post.featured && (\n <Badge variant=\"warning\" className=\"text-xs sm:text-sm\">Featured</Badge>\n )}\n {post.tags.slice(0, isBelow('sm') ? 1 : 2).map(tag => (\n <Badge key={tag} variant=\"outline\" className=\"text-xs\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n \n <h1 className=\"text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4 sm:mb-6 leading-tight\">\n {post.title}\n </h1>\n \n {/* Author and Meta Info - Responsive layout */}\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 pb-4 sm:pb-6 border-b border-gray-200 space-y-4 sm:space-y-0\">\n <div className=\"flex items-center space-x-3 sm:space-x-4\">\n <Avatar size={isBelow('sm') ? 'sm' : 'lg'}>\n <AvatarImage src={post.author.avatar} />\n <AvatarFallback>{post.author.name[0]}</AvatarFallback>\n </Avatar>\n <div>\n <p className=\"font-semibold text-gray-900 text-sm sm:text-base\">{post.author.name}</p>\n <div className=\"flex flex-wrap items-center gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600\">\n <div className=\"flex items-center space-x-1\">\n <Calendar className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{formatDate(post.publishedAt)}</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Clock className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{post.readingTime} min read</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Eye className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{post.stats.views.toLocaleString()} views</span>\n </div>\n </div>\n </div>\n </div>\n\n {/* Social Sharing - Responsive button sizes */}\n <div className=\"flex items-center space-x-1 sm:space-x-2\">\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('twitter')}\n className=\"p-2\"\n >\n <Twitter className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('facebook')}\n className=\"p-2\"\n >\n <Facebook className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('linkedin')}\n className=\"p-2\"\n >\n <Linkedin className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('copy')}\n className=\"p-2\"\n >\n <LinkIcon className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n\n {/* Featured Image - Responsive aspect ratio */}\n {post.seoMeta.ogImage && (\n <div className=\"aspect-video sm:aspect-[16/9] lg:aspect-video bg-gray-100 rounded-lg mb-6 sm:mb-8 overflow-hidden\">\n <img\n src={post.seoMeta.ogImage}\n alt={post.title}\n className=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </header>\n\n {/* Article Content with Enhanced Syntax Highlighting */}\n <div className=\"prose prose-sm sm:prose-base lg:prose-lg max-w-none prose-headings:scroll-mt-20\">\n <ReactMarkdown\n remarkPlugins={[remarkGfm]}\n components={{\n h1: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h1\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h1>\n ),\n h2: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h2\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h2>\n ),\n h3: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h3\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h3>\n ),\n code: (props: { inline?: boolean; className?: string; children?: React.ReactNode }) => {\n const { inline, className, children } = props;\n if (inline) {\n return (\n <code\n className=\"bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono border\"\n {...props}\n >\n {children}\n </code>\n );\n }\n // Extract language from className (e.g. language-js)\n const match = /language-(\\w+)/.exec(className || '');\n return (\n <div className=\"relative group\">\n <CodeHighlight\n code={String(children).replace(/\\n$/, '')}\n language={match ? match[1] : 'javascript'}\n />\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-800 hover:bg-gray-700 text-gray-300 border border-gray-600\"\n onClick={() => {\n navigator.clipboard.writeText(String(children));\n showToast.success('Code copied to clipboard!');\n }}\n >\n Copy\n </Button>\n </div>\n );\n },\n }}\n >\n {post.content}\n </ReactMarkdown>\n </div>\n\n {/* Article Footer */}\n <footer className=\"mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 not-prose\">\n {/* Tags */}\n <div className=\"mb-6\">\n <h3 className=\"text-base sm:text-lg font-semibold text-gray-900 mb-3\">Tags</h3>\n <div className=\"flex flex-wrap gap-2\">\n {post.tags.map(tag => (\n <Badge key={tag} variant=\"outline\" className=\"cursor-pointer hover:bg-primary-50 text-xs sm:text-sm\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n </div>\n\n {/* Author Bio */}\n <Card className=\"mb-6 sm:mb-8\">\n <CardContent className=\"p-4 sm:p-6\">\n <div className=\"flex flex-col sm:flex-row sm:items-start space-y-4 sm:space-y-0 sm:space-x-4\">\n <Avatar size={isBelow('sm') ? 'md' : 'lg'} className=\"mx-auto sm:mx-0\">\n <AvatarImage src={post.author.avatar} />\n <AvatarFallback>{post.author.name[0]}</AvatarFallback>\n </Avatar>\n <div className=\"flex-1 text-center sm:text-left\">\n <h3 className=\"font-semibold text-gray-900 mb-2 text-sm sm:text-base\">About {post.author.name}</h3>\n <p className=\"text-gray-600 mb-4 text-sm sm:text-base\">\n {post.author.bio || 'Passionate writer and developer sharing insights about modern web development.'}\n </p>\n <div className=\"flex justify-center sm:justify-start space-x-2 sm:space-x-4\">\n <Button variant=\"outline\" size=\"sm\">Follow</Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Twitter className=\"h-4 w-4\" />\n </Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Linkedin className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n </CardContent>\n </Card>\n\n {/* Article Stats - Responsive layout */}\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-8 p-4 sm:p-6 bg-gray-50 rounded-lg space-y-4 sm:space-y-0\">\n <div className=\"flex items-center justify-center sm:justify-start space-x-4 sm:space-x-6\">\n <div className=\"flex items-center space-x-2\">\n <Heart className=\"h-4 w-4 sm:h-5 sm:w-5 text-red-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.likes}</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <MessageCircle className=\"h-4 w-4 sm:h-5 sm:w-5 text-blue-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.comments}</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <Share2 className=\"h-4 w-4 sm:h-5 sm:w-5 text-green-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.shares}</span>\n </div>\n </div>\n <Button \n variant=\"primary\" \n size={isBelow('sm') ? 'sm' : 'md'}\n onClick={() => showToast.success('Post liked!')}\n className=\"w-full sm:w-auto\"\n >\n <Heart className=\"h-4 w-4 mr-2\" />\n Like this post\n </Button>\n </div>\n </footer>\n </article>\n\n {/* Comments Section */}\n <BlogCommentSection postId={post.id} />\n </div>\n\n {/* Right Sidebar - Table of Contents (Desktop only) */}\n {isAbove('lg') && (\n <div className=\"lg:col-span-3\">\n <BlogSidebar \n type=\"tableOfContents\"\n currentPost={post}\n />\n </div>\n )}\n </div>\n\n {/* Mobile Navigation Sidebar - Show categories on mobile */}\n {isBelow('lg') && (\n <div className=\"mt-8 sm:mt-12\">\n <BlogSidebar \n type=\"navigation\"\n currentPost={post}\n relatedPosts={relatedPosts}\n />\n </div>\n )}\n\n {/* Related Posts - Responsive grid */}\n {relatedPosts.length > 0 && (\n <div className=\"mt-12 sm:mt-16\">\n <h2 className=\"text-xl sm:text-2xl font-bold text-gray-900 mb-6 sm:mb-8\">Related Posts</h2>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6\">\n {relatedPosts.map(relatedPost => (\n <Card key={relatedPost.id} className=\"hover:shadow-lg transition-shadow cursor-pointer\">\n <div className=\"aspect-video bg-gray-100 rounded-t-lg overflow-hidden\">\n <img\n src={relatedPost.seoMeta.ogImage || 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=400'}\n alt={relatedPost.title}\n className=\"w-full h-full object-cover hover:scale-105 transition-transform duration-300\"\n />\n </div>\n <CardContent className=\"p-4\">\n <Badge variant=\"outline\" className=\"mb-2 text-xs\">\n {relatedPost.category}\n </Badge>\n <h3 className=\"font-semibold text-gray-900 mb-2 line-clamp-2 text-sm sm:text-base\">\n {relatedPost.title}\n </h3>\n <p className=\"text-gray-600 text-xs sm:text-sm mb-3 line-clamp-2\">\n {relatedPost.excerpt}\n </p>\n <div className=\"flex items-center justify-between text-xs sm:text-sm text-gray-500\">\n <span>{formatDate(relatedPost.publishedAt)}</span>\n <span>{relatedPost.readingTime} min read</span>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};"],"names":["_jsxs","_jsx","LinkIcon","ReactMarkdown"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SingleBlogView.js","sources":["../../../src/components/Blog/SingleBlogView.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { CodeHighlight } from '../CodeHighlight/CodeHighlight';\nimport { \n Calendar, \n Clock, \n User, \n Tag, \n Share2, \n Heart, \n MessageCircle,\n Eye,\n ChevronLeft,\n Facebook,\n Twitter,\n Linkedin,\n Link as LinkIcon\n} from 'lucide-react';\nimport { Button } from '../Button';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { showToast } from '../Toast';\nimport { useBlogNavigation } from './hooks/useBlogNavigation';\nimport { BlogCommentSection } from './BlogCommentSection';\nimport { BlogSidebar } from './BlogSidebar';\nimport type { BlogPost } from './types';\nimport { sampleBlogPosts } from './data/sampleData';\n\ninterface SingleBlogViewProps {\n postId?: string;\n onBackClick?: () => void;\n className?: string;\n}\n\nexport const SingleBlogView: React.FC<SingleBlogViewProps> = ({\n postId = '1',\n onBackClick,\n className = '',\n}) => {\n const { generateTableOfContents } = useBlogNavigation();\n const { isAbove, isBelow } = useBreakpoint();\n \n // Get blog post data (in real app, this would come from API)\n const post = sampleBlogPosts.find(p => p.id === postId) || sampleBlogPosts[0];\n const relatedPosts = sampleBlogPosts.filter(p => \n p.id !== post.id && \n (p.category === post.category || p.tags.some(tag => post.tags.includes(tag)))\n ).slice(0, 3);\n\n useEffect(() => {\n generateTableOfContents(post.content);\n }, [post.content, generateTableOfContents]);\n\n const handleShare = (platform: string) => {\n const url = window.location.href;\n const title = post.title;\n \n let shareUrl = '';\n switch (platform) {\n case 'twitter':\n shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`;\n break;\n case 'facebook':\n shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;\n break;\n case 'linkedin':\n shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;\n break;\n case 'copy':\n navigator.clipboard.writeText(url);\n showToast.success('Link copied to clipboard!');\n return;\n }\n \n if (shareUrl) {\n window.open(shareUrl, '_blank', 'width=600,height=400');\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n });\n };\n\n return (\n <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 ${className}`}>\n {/* Back Navigation - Mobile optimized */}\n <div className=\"mb-4 sm:mb-6 lg:mb-8\">\n <Button variant=\"ghost\" onClick={onBackClick} className=\"mb-2 sm:mb-4 p-2 sm:p-3\">\n <ChevronLeft className=\"h-4 w-4 mr-1 sm:mr-2\" />\n <span className=\"text-sm sm:text-base\">Back to Blog</span>\n </Button>\n \n {/* Breadcrumb - Hidden on mobile, visible on tablet+ */}\n {isAbove('md') && (\n <nav className=\"flex items-center space-x-2 text-sm text-gray-600\">\n <a href=\"/\" className=\"hover:text-primary-600 transition-colors\">Home</a>\n <span>/</span>\n <a href=\"/blog\" className=\"hover:text-primary-600 transition-colors\">Blog</a>\n <span>/</span>\n <a href={`/blog/category/${post.category.toLowerCase()}`} className=\"hover:text-primary-600 transition-colors\">\n {post.category}\n </a>\n <span>/</span>\n <span className=\"text-gray-900 truncate max-w-xs\">{post.title}</span>\n </nav>\n )}\n </div>\n\n {/* Responsive Layout: Mobile stacked, Desktop with sidebars */}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 lg:gap-8\">\n {/* Left Sidebar - Hidden on mobile/tablet, fixed on desktop */}\n {isAbove('lg') && (\n <div className=\"lg:col-span-3\">\n <BlogSidebar \n type=\"navigation\"\n currentPost={post}\n relatedPosts={relatedPosts}\n />\n </div>\n )}\n\n {/* Main Content - Full width on mobile, centered on desktop */}\n <div className=\"lg:col-span-6\">\n <article className=\"prose prose-sm sm:prose-base lg:prose-lg max-w-none\">\n {/* Article Header */}\n <header className=\"mb-6 sm:mb-8 not-prose\">\n <div className=\"flex flex-wrap items-center gap-2 mb-4\">\n <Badge \n variant=\"default\"\n className=\"text-xs sm:text-sm\"\n style={{ backgroundColor: post.category === 'Design' ? '#8b5cf6' : '#3b82f6' }}\n >\n {post.category}\n </Badge>\n {post.featured && (\n <Badge variant=\"warning\" className=\"text-xs sm:text-sm\">Featured</Badge>\n )}\n {post.tags.slice(0, isBelow('sm') ? 1 : 2).map(tag => (\n <Badge key={tag} variant=\"outline\" className=\"text-xs\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n \n <h1 className=\"text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4 sm:mb-6 leading-tight\">\n {post.title}\n </h1>\n \n {/* Author and Meta Info - Responsive layout */}\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 pb-4 sm:pb-6 border-b border-gray-200 space-y-4 sm:space-y-0\">\n <div className=\"flex items-center space-x-3 sm:space-x-4\">\n <Avatar size={isBelow('sm') ? 'sm' : 'lg'}>\n <AvatarImage src={post.author.avatar} />\n <AvatarFallback>{post.author.name[0]}</AvatarFallback>\n </Avatar>\n <div>\n <p className=\"font-semibold text-gray-900 text-sm sm:text-base\">{post.author.name}</p>\n <div className=\"flex flex-wrap items-center gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600\">\n <div className=\"flex items-center space-x-1\">\n <Calendar className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{formatDate(post.publishedAt)}</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Clock className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{post.readingTime} min read</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Eye className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{post.stats.views.toLocaleString()} views</span>\n </div>\n </div>\n </div>\n </div>\n\n {/* Social Sharing - Responsive button sizes */}\n <div className=\"flex items-center space-x-1 sm:space-x-2\">\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('twitter')}\n className=\"p-2\"\n >\n <Twitter className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('facebook')}\n className=\"p-2\"\n >\n <Facebook className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('linkedin')}\n className=\"p-2\"\n >\n <Linkedin className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('copy')}\n className=\"p-2\"\n >\n <LinkIcon className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n\n {/* Featured Image - Responsive aspect ratio */}\n {post.seoMeta.ogImage && (\n <div className=\"aspect-video sm:aspect-[16/9] lg:aspect-video bg-gray-100 rounded-lg mb-6 sm:mb-8 overflow-hidden\">\n <img\n src={post.seoMeta.ogImage}\n alt={post.title}\n className=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </header>\n\n {/* Article Content with Enhanced Syntax Highlighting */}\n <div className=\"prose prose-sm sm:prose-base lg:prose-lg max-w-none prose-headings:scroll-mt-20\">\n <ReactMarkdown\n remarkPlugins={[remarkGfm]}\n components={{\n h1: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h1\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h1>\n ),\n h2: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h2\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h2>\n ),\n h3: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h3\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h3>\n ),\n code: (props: { inline?: boolean; className?: string; children?: React.ReactNode }) => {\n const { inline, className, children } = props;\n if (inline) {\n return (\n <code\n className=\"bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono border\"\n {...props}\n >\n {children}\n </code>\n );\n }\n // Extract language from className (e.g. language-js)\n const match = /language-(\\w+)/.exec(className || '');\n return (\n <div className=\"relative group\">\n <CodeHighlight\n code={String(children).replace(/\\n$/, '')}\n language={match ? match[1] : 'javascript'}\n />\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-800 hover:bg-gray-700 text-gray-300 border border-gray-600\"\n onClick={() => {\n navigator.clipboard.writeText(String(children));\n showToast.success('Code copied to clipboard!');\n }}\n >\n Copy\n </Button>\n </div>\n );\n },\n }}\n >\n {post.content}\n </ReactMarkdown>\n </div>\n\n {/* Article Footer */}\n <footer className=\"mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 not-prose\">\n {/* Tags */}\n <div className=\"mb-6\">\n <h3 className=\"text-base sm:text-lg font-semibold text-gray-900 mb-3\">Tags</h3>\n <div className=\"flex flex-wrap gap-2\">\n {post.tags.map(tag => (\n <Badge key={tag} variant=\"outline\" className=\"cursor-pointer hover:bg-primary-50 text-xs sm:text-sm\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n </div>\n\n {/* Author Bio */}\n <Card className=\"mb-6 sm:mb-8\">\n <CardContent className=\"p-4 sm:p-6\">\n <div className=\"flex flex-col sm:flex-row sm:items-start space-y-4 sm:space-y-0 sm:space-x-4\">\n <Avatar size={isBelow('sm') ? 'md' : 'lg'} className=\"mx-auto sm:mx-0\">\n <AvatarImage src={post.author.avatar} />\n <AvatarFallback>{post.author.name[0]}</AvatarFallback>\n </Avatar>\n <div className=\"flex-1 text-center sm:text-left\">\n <h3 className=\"font-semibold text-gray-900 mb-2 text-sm sm:text-base\">About {post.author.name}</h3>\n <p className=\"text-gray-600 mb-4 text-sm sm:text-base\">\n {post.author.bio || 'Passionate writer and developer sharing insights about modern web development.'}\n </p>\n <div className=\"flex justify-center sm:justify-start space-x-2 sm:space-x-4\">\n <Button variant=\"outline\" size=\"sm\">Follow</Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Twitter className=\"h-4 w-4\" />\n </Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Linkedin className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n </CardContent>\n </Card>\n\n {/* Article Stats - Responsive layout */}\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-8 p-4 sm:p-6 bg-gray-50 rounded-lg space-y-4 sm:space-y-0\">\n <div className=\"flex items-center justify-center sm:justify-start space-x-4 sm:space-x-6\">\n <div className=\"flex items-center space-x-2\">\n <Heart className=\"h-4 w-4 sm:h-5 sm:w-5 text-red-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.likes}</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <MessageCircle className=\"h-4 w-4 sm:h-5 sm:w-5 text-blue-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.comments}</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <Share2 className=\"h-4 w-4 sm:h-5 sm:w-5 text-green-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.shares}</span>\n </div>\n </div>\n <Button \n variant=\"primary\" \n size={isBelow('sm') ? 'sm' : 'md'}\n onClick={() => showToast.success('Post liked!')}\n className=\"w-full sm:w-auto\"\n >\n <Heart className=\"h-4 w-4 mr-2\" />\n Like this post\n </Button>\n </div>\n </footer>\n </article>\n\n {/* Comments Section */}\n <BlogCommentSection postId={post.id} />\n </div>\n\n {/* Right Sidebar - Table of Contents (Desktop only) */}\n {isAbove('lg') && (\n <div className=\"lg:col-span-3\">\n <BlogSidebar \n type=\"tableOfContents\"\n currentPost={post}\n />\n </div>\n )}\n </div>\n\n {/* Mobile Navigation Sidebar - Show categories on mobile */}\n {isBelow('lg') && (\n <div className=\"mt-8 sm:mt-12\">\n <BlogSidebar \n type=\"navigation\"\n currentPost={post}\n relatedPosts={relatedPosts}\n />\n </div>\n )}\n\n {/* Related Posts - Responsive grid */}\n {relatedPosts.length > 0 && (\n <div className=\"mt-12 sm:mt-16\">\n <h2 className=\"text-xl sm:text-2xl font-bold text-gray-900 mb-6 sm:mb-8\">Related Posts</h2>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6\">\n {relatedPosts.map(relatedPost => (\n <Card key={relatedPost.id} className=\"hover:shadow-lg transition-shadow cursor-pointer\">\n <div className=\"aspect-video bg-gray-100 rounded-t-lg overflow-hidden\">\n <img\n src={relatedPost.seoMeta.ogImage || 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=400'}\n alt={relatedPost.title}\n className=\"w-full h-full object-cover hover:scale-105 transition-transform duration-300\"\n />\n </div>\n <CardContent className=\"p-4\">\n <Badge variant=\"outline\" className=\"mb-2 text-xs\">\n {relatedPost.category}\n </Badge>\n <h3 className=\"font-semibold text-gray-900 mb-2 line-clamp-2 text-sm sm:text-base\">\n {relatedPost.title}\n </h3>\n <p className=\"text-gray-600 text-xs sm:text-sm mb-3 line-clamp-2\">\n {relatedPost.excerpt}\n </p>\n <div className=\"flex items-center justify-between text-xs sm:text-sm text-gray-500\">\n <span>{formatDate(relatedPost.publishedAt)}</span>\n <span>{relatedPost.readingTime} min read</span>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};"],"names":["_jsxs","_jsx","LinkIcon"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import vscDarkPlus from '
|
|
2
|
+
import { Prism } from 'react-syntax-highlighter';
|
|
3
|
+
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
|
4
4
|
|
|
5
5
|
const CodeHighlight = ({ code, language = "javascript", className = "", }) => {
|
|
6
|
-
return (jsx(
|
|
6
|
+
return (jsx(Prism, { language: language, style: vscDarkPlus, customStyle: {
|
|
7
7
|
borderRadius: "0.5rem",
|
|
8
8
|
padding: "1rem",
|
|
9
9
|
fontFamily: "monospace",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlight.js","sources":["../../../src/components/CodeHighlight/CodeHighlight.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\r\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\r\n\r\nexport interface CodeHighlightProps {\r\n code: string;\r\n language?: string;\r\n className?: string;\r\n}\r\n\r\nexport const CodeHighlight: React.FC<CodeHighlightProps> = ({\r\n code,\r\n language = \"javascript\",\r\n className = \"\",\r\n}) => {\r\n return (\r\n <SyntaxHighlighter\r\n language={language}\r\n style={vscDarkPlus}\r\n customStyle={{\r\n borderRadius: \"0.5rem\",\r\n padding: \"1rem\",\r\n fontFamily: \"monospace\",\r\n background: \"var(--color-primary-50, #2d2d2d)\",\r\n color: \"var(--color-primary-700, #f8f8f2)\",\r\n overflowX: \"auto\",\r\n }}\r\n className={className}\r\n showLineNumbers={false}\r\n wrapLongLines={true}\r\n >\r\n {code}\r\n </SyntaxHighlighter>\r\n );\r\n};\r\n\r\nCodeHighlight.displayName = \"CodeHighlight\";"],"names":["_jsx","SyntaxHighlighter"],"mappings":";;;;AAUO,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,SAAS,GAAG,EAAE,GACf,KAAI;AACH,IAAA,QACEA,GAAA,CAACC,
|
|
1
|
+
{"version":3,"file":"CodeHighlight.js","sources":["../../../src/components/CodeHighlight/CodeHighlight.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\r\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\r\n\r\nexport interface CodeHighlightProps {\r\n code: string;\r\n language?: string;\r\n className?: string;\r\n}\r\n\r\nexport const CodeHighlight: React.FC<CodeHighlightProps> = ({\r\n code,\r\n language = \"javascript\",\r\n className = \"\",\r\n}) => {\r\n return (\r\n <SyntaxHighlighter\r\n language={language}\r\n style={vscDarkPlus}\r\n customStyle={{\r\n borderRadius: \"0.5rem\",\r\n padding: \"1rem\",\r\n fontFamily: \"monospace\",\r\n background: \"var(--color-primary-50, #2d2d2d)\",\r\n color: \"var(--color-primary-700, #f8f8f2)\",\r\n overflowX: \"auto\",\r\n }}\r\n className={className}\r\n showLineNumbers={false}\r\n wrapLongLines={true}\r\n >\r\n {code}\r\n </SyntaxHighlighter>\r\n );\r\n};\r\n\r\nCodeHighlight.displayName = \"CodeHighlight\";"],"names":["_jsx","SyntaxHighlighter"],"mappings":";;;;AAUO,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,SAAS,GAAG,EAAE,GACf,KAAI;AACH,IAAA,QACEA,GAAA,CAACC,KAAiB,EAAA,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE;AACX,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,WAAW;AACvB,YAAA,UAAU,EAAE,kCAAkC;AAC9C,YAAA,KAAK,EAAE,mCAAmC;AAC1C,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,IAAI,EAAA,QAAA,EAElB,IAAI,EAAA,CACa;AAExB;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
|