https://code-flow-marcello888.replit.app/assets/blog-post-BGTV8Ymy.js

1import{r as w,j as e}from"./vendor-react-HdTIWlXF.js";import{E as Z,u as re,U as ae,B as b,k as A,L as B,q as W,j as U}from"./index-B2zqG137.js";import{u as V,b as K}from"./vendor-tanstack-B4DG7WkQ.js";import{T as oe}from"./textarea--SSjchYY.js";import{I as O}from"./input-DhZaKDib.js";import{S as le}from"./SEOHead-9UraMqHt.js";import{a as ie}from"./SchemaMarkup-1Xv5DqBb.js";import{P as ne}from"./PublicNav-DDytMmYO.js";import{c as de,g as ce,f as Q,i as me,b as he}from"./icononly_1767595675944-omZCvkBl.js";import{A as T}from"./arrow-left-1M9PpeQa.js";import{C as ge}from"./calendar-CZUqL24L.js";import{C as xe}from"./clock-BLhrQzj4.js";import{H as pe,T as be}from"./twitter-DcqUvneX.js";import{M as G}from"./message-circle-DMi4yRxu.js";import{S as ue}from"./send-Bt5Y04Xa.js";import{A as X}from"./arrow-right-DPHgf7Ne.js";import"./vendor-monaco-COeXZpBc.js";import"./vendor-posthog-DOLZbfys.js";import"./vendor-radix-z1AaiOpL.js";/**
2 * @license lucide-react v0.447.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const Y=Z("Linkedin",[["path",{d:"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z",key:"c2jq9f"}],["rect",{width:"4",height:"12",x:"2",y:"9",key:"mk3on5"}],["circle",{cx:"4",cy:"4",r:"2",key:"bt5ra8"}]]);/**
7 * @license lucide-react v0.447.0 - ISC
8 *
9 * This source code is licensed under the ISC license.
10 * See the LICENSE file in the root directory of this source tree.
11 */const ye=Z("Share2",[["circle",{cx:"18",cy:"5",r:"3",key:"gq8acd"}],["circle",{cx:"6",cy:"12",r:"3",key:"w7nqdw"}],["circle",{cx:"18",cy:"19",r:"3",key:"1xt0gg"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49",key:"47mynk"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49",key:"1n3mei"}]]);function fe(){const h="codeflow_visitor_id";let g=localStorage.getItem(h);return g||(g="v_"+Math.random().toString(36).substring(2,15)+Date.now().toString(36),localStorage.setItem(h,g)),g}function ze(){var z,R;const[,h]=re(),[,g]=ae("/blog/:slug"),i=g==null?void 0:g.slug,[y,J]=w.useState(""),[k,D]=w.useState(""),[E,ee]=w.useState(""),[N,F]=w.useState("");w.useEffect(()=>{J(fe())},[]);const t=i?de(i):void 0,C=ce(),f=t?C.findIndex(r=>r.slug===t.slug):-1,S=f>=0&&f<C.length-1?C[f+1]:void 0,L=f>0?C[f-1]:void 0,{data:n}=V({queryKey:["/api/blog",i,"likes",y],queryFn:async()=>(await fetch(`/api/blog/${i}/likes?visitorId=${y}`)).json(),enabled:!!i&&!!y}),{data:d}=V({queryKey:["/api/blog",i,"comments"],queryFn:async()=>(await fetch(`/api/blog/${i}/comments`)).json(),enabled:!!i}),q=K({mutationFn:async()=>U("POST",`/api/blog/${i}/likes`,{visitorId:y}),onSuccess:()=>{W.invalidateQueries({queryKey:["/api/blog",i,"likes",y]})}}),_=K({mutationFn:async()=>U("POST",`/api/blog/${i}/comments`,{visitorId:y,authorName:k,authorEmail:E,content:N}),onSuccess:()=>{F(""),W.invalidateQueries({queryKey:["/api/blog",i,"comments"]})}}),te=r=>{r.preventDefault(),k.trim()&&N.trim()&&_.mutate()};return t?e.jsxs("div",{className:"min-h-screen bg-white dark:bg-gray-950",children:[e.jsx(le,{title:`${t.title} | CodeFlow Lab Blog`,description:t.excerpt,keywords:t.tags.join(", "),canonicalUrl:`https://code-flow-lab.com/blog/${t.slug}`}),e.jsx(ie,{schema:{headline:t.title,description:t.excerpt,url:`https://code-flow-lab.com/blog/${t.slug}`,datePublished:t.publishedAt,authorName:t.author.name,publisherName:"CodeFlow Lab",publisherLogoUrl:"https://code-flow-lab.com/og-image.jpg",...t.banner?{imageUrl:t.banner}:{},keywords:t.tags}}),e.jsx(ne,{activePage:"blog"}),e.jsxs("div",{className:"w-full h-[50vh] min-h-[400px] max-h-[600px] relative overflow-hidden bg-gray-900","data-testid":"hero-banner",children:[t.banner?e.jsx("img",{src:t.banner,alt:t.title,className:"absolute inset-0 w-full h-full object-cover","data-testid":"hero-banner-image"}):e.jsxs("div",{className:"absolute inset-0 bg-gradient-to-br from-indigo-600 via-blue-500 to-purple-600",children:[e.jsx("div",{className:"absolute inset-0 opacity-30",style:{backgroundImage:`url("data:image/svg+xml,%3Csvg width='60' height='60' viewB

11ox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`}}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("img",{src:Q,alt:"CodeFlow Lab",className:"h-24 opacity-40"})})]}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-white/80 dark:from-gray-950/80 via-transparent to-transparent"})]}),e.jsxs("article",{className:"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 -mt-48 relative z-10",children:[e.jsxs("div",{className:"bg-white dark:bg-gray-900 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-800 p-8 sm:p-12",children:[e.jsxs(b,{variant:"outline",size:"sm",onClick:()=>h("/blog"),className:"mb-6 -ml-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-indigo-950","data-testid":"button-back",children:[e.jsx(T,{className:"h-4 w-4 mr-2"}),"Back to Blog"]}),e.jsx(A,{className:"mb-4 bg-blue-600 hover:bg-blue-700 text-white",children:t.category}),e.jsx("h1",{className:"text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6 leading-tight whitespace-pre-line",children:t.title}),e.jsxs("div",{className:"flex flex-wrap items-center gap-6 text-sm text-gray-500 dark:text-gray-400 mb-8 pb-8 border-b border-gray-200 dark:border-gray-800",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("img",{src:me,alt:"CodeFlow Lab",className:"w-10 h-10 rounded-full"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-medium text-gray-900 dark:text-white",children:t.author.name}),e.jsx("p",{className:"text-gray-500 dark:text-gray-400",children:t.author.role})]})]}),e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(ge,{className:"h-4 w-4"}),he(t.publishedAt)]}),e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(xe,{className:"h-4 w-4"}),t.readTime]})]}),e.jsx("div",{className:`prose prose-lg dark:prose-invert max-w-none
12              prose-headings:font-bold prose-headings:text-gray-900 dark:prose-headings:text-white
13              prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4
14              prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3
15              prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-p:leading-relaxed prose-p:mb-6
16              prose-li:text-gray-600 dark:prose-li:text-gray-300
17              prose-strong:text-gray-900 dark:prose-strong:text-white
18              prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm
19              prose-pre:bg-gray-900 dark:prose-pre:bg-gray-800 prose-pre:rounded-xl
20              prose-table:border-collapse prose-th:bg-gray-50 dark:prose-th:bg-gray-800 prose-th:p-3 prose-td:p-3 prose-td:border prose-td:border-gray-200 dark:prose-td:border-gray-700
21              prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline
22            `,"data-testid":"blog-content",children:(()=>{const r=t.content.split(`
23`),l=[];let j=!1,m=[],I=!1,$=[],M="";const se=a=>a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),u=a=>{const x=a.split(/`/);let s="";for(let o=0;o<x.length;o++)o%2===0?s+=x[o].replace(/\*\*(.*?)\*\*/g,"<strong>$1</strong>"):s+=`<code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono">${se(x[o])}</code>`;return s};for(let a=0;a<r.length;a++){const x=r[a],s=x.trim();if(s.startsWith("```")){if(!I)I=!0,M=s.slice(3).trim(),$=[];else{const o=$.join(`
24`);l.push(e.jsxs("div",{className:"not-prose my-6 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm",children:[M&&e.jsx("div",{className:"bg-gray-100 dark:bg-gray-800 px-4 py-1.5 text-xs font-mono font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700 uppercase tracking-wide",children:M}),e.jsx("pre",{style:{margin:0,background:"#030712",padding:"1.25rem",overflowX:"auto"},children:e.jsx("code",{style:{color:"#f3f4f6",fontFamily:"ui-monospace, monospace",fontSize:"0.875rem",lineHeight:"1.6",whiteSpace:"pre"},children:o})})]},`code-${a}`)),I=!1,$=[],M=""}continue}if(I){$.push(x);continue}if(s!==""){if(s.startsWith("|")&&s.endsWith("|")){if(j||(j=!0,m=[]),!s.includes("---")){const o=s.slice(1,-1).split("|").map(c=>c.trim());m.push(o)}continue}else if(j){if(m.length>0){const o=m[0],c=m.slice(1);l.push(e.jsxs("table",{className:"w-full border-collapse my-6",children:[e.jsx("thead",{children:e.jsx("tr",{className:"bg-gray-50 dark:bg-gray-800",children:o.map((p,v)=>e.jsx("th",{className:"p-3 text-left font-semibold border border-gray-200 dark:border-gray-700",dangerouslySetInnerHTML:{__html:u(p)}},v))})}),e.jsx("tbody",{children:c.map((p,v)=>e.jsx("tr",{children:p.map((H,P)=>e.jsx("td",{className:"p-3 border border-gray-200 dark:border-gray-700",dangerouslySetInnerHTML:{__html:u(H)}},P))},v))})]},`table-${a}`))}j=!1,m=[]}if(s==="---")l.push(e.jsx("hr",{className:"my-8 border-gray-200 dark:border-gray-700"},a));else if(s.startsWith("<img ")){const o=s.match(/src="([^"]+)"/),c=s.match(/alt="([^"]+)"/),p=s.match(/caption="([^"]+)"/);if(o){const v=o[1],H=c?c[1]:"",P=p?p[1]:"";l.push(e.jsxs("figure",{className:"my-8",children:[e.jsx("img",{src:v,alt:H,className:"w-full rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm","data-testid":`blog-image-${a}`}),P&&e.jsx("figcaption",{className:"text-center text-sm text-gray-500 dark:text-gray-400 mt-3 italic",children:P})]},a))}}else if(s.startsWith("<video>")&&s.endsWith("</video>")){const c=s.slice(7,-8).trim().match(/loom\.com\/share\/([a-zA-Z0-9]+)/);c&&l.push(e.jsx("div",{className:"my-8 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm",children:e.jsx("div",{className:"relative w-full",style:{paddingBottom:"56.25%"},children:e.jsx("iframe",{src:`https://www.loom.com/embed/${c[1]}`,className:"absolute inset-0 w-full h-full",frameBorder:"0",allowFullScreen:!0,title:"Video demo","data-testid":"embed-loom"})})},a))}else s.startsWith("## ")?l.push(e.jsx("h2",{children:s.slice(3)},a)):s.startsWith("### ")?l.push(e.jsx("h3",{children:s.slice(4)},a)):s.startsWith("- ")?l.push(e.jsx("li",{dangerouslySetInnerHTML:{__html:u(s.slice(2))}},a)):s.match(/^\d+\.\s/)?l.push(e.jsx("li",{dangerouslySetInnerHTML:{__html:u(s.replace(/^\d+\.\s/,""))}},a)):l.push(e.jsx("p",{dangerouslySetInnerHTML:{__html:u(s)}},a))}}if(j&&m.length>0){const a=m[0],x=m.slice(1);l.push(e.jsxs("table",{className:"w-full border-collapse my-6",children:[e.jsx("thead",{children:e.jsx("tr",{className:"bg-gray-50 dark:bg-gray-800",children:a.map((s,o)=>e.jsx("th",{className:"p-3 text-left font-semibold border border-gray-200 dark:border-gray-700",dangerouslySetInnerHTML:{__html:u(s)}},o))})}),e.jsx("tbody",{children:x.map((s,o)=>e.jsx("tr",{children:s.map((c,p)=>e.jsx("td",{className:"p-3 border border-gray-200 dark:border-gray-700",dangerouslySetInnerHTML:{__html:u(c)}},p))},o))})]},"table-end"))}return l})()}),e.jsxs("div",{className:"mt-12 pt-8 border-t border-gray-200 dark:border-gray-800",children:[e.jsx("div",{className:"flex flex-wrap gap-2 mb-8",children:t.tags.map(r=>e.jsx(A,{variant:"outline",className:"text-gray-600 dark:text-gray-400",children:r},r))}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs(b,{variant:n!=null&&n.hasLiked?"default":"outline",size:"sm",onClick:()=>q.mutate(),disabled:q.isPending,className:`gap-2 ${n!=null&&n.hasLiked?"bg-red-500 hover:bg-red-600 text-white":""}`,"data-testid":"button-like",children:[e.jsx(pe,{className:`h-4 w-4 ${n!=null&&n.hasLiked?"fill-current":""}`}),(n==null?void 0:n.count)||0]}),e.jsxs("span",{className:"text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1",children:[e.jsx(G,{className:"h-4 w-4"}),((z=d==null?void 0:d.comments)==null?void 0:z.length)||0," comments"]})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(b,{variant:"outline",size:"icon","data-testid":"button-share-twitter",onClick:()=>{const r=encodeURIComponent(`https://code-flow-lab.com/blog/${t.slug}`),l=encodeURIComponent(t.title);window.open(`https://twitter.com/intent/tweet?url=${r}&text=${l}`,"_blank","noopener,noreferrer")},children:e.jsx(be,{className:"h-4 w-4"})}),e.jsx(b,{variant:"outline",size:"icon","data-testid":"button-share-linkedin",onClick:()=>{const r=encodeURIComponent(`https://code-flow-lab.com/blog/${t.slug}`);window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${r}`,"_blank","noopener,noreferrer")},children:e.jsx(Y,{className:"h-4 w-4"})}),e.jsx(b,{variant:"outline",size:"icon","data-testid":"button-share",onClick:async()=>{const r=`https://code-flow-lab.com/blog/${t.slug}`;if(navigator.share)try{await navigator.share({title:t.title,text:t.excerpt,url:r})}catch{}else await navigator.clipboard.writeText(r),alert("Link copied to clipboard!")},children:e.jsx(ye,{className:"h-4 w-4"})})]})]})]}),e.jsxs("div",{className:"mt-12 pt-8 border-t border-gray-200 dark:border-gray-800",children:[e.jsxs("h3",{className:"text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2",children:[e.jsx(G,{className:"h-5 w-5"}),"Comments (",((R=d==null?void 0:d.comments)==null?void 0:R.length)||0,")"]}),e.jsxs("form",{onSubmit:te,className:"mb-8 space-y-4","data-testid":"form-comment",children:[e.jsxs("div",{className:"grid sm:grid-cols-2 gap-4",children:[e.jsx(O,{placeholder:"Your name *",value:k,onChange:r=>D(r.target.value),required:!0,"data-testid":"input-comment-name"}),e.jsx(O,{type:"email",placeholder:"Email (optional)",value:E,onChange:r=>ee(r.target.value),"data-testid":"input-comment-email"})]}),e.jsx(oe,{placeholder:"Write your comment...",value:N,onChange:r=>F(r.target.value),required:!0,rows:4,"data-testid":"input-comment-content"}),e.jsxs(b,{type:"submit",disabled:_.isPending||!k.trim()||!N.trim(),className:"gap-2","data-testid":"button-submit-comment",children:[e.jsx(ue,{className:"h-4 w-4"}),_.isPending?"Posting...":"Post Comment"]})]}),d!=null&&d.comments&&d.comments.length>0?e.jsx("div",{className:"space-y-6",children:d.comments.map(r=>e.jsxs("div",{className:"bg-gray-50 dark:bg-gray-800 rounded-lg p-4","data-testid":`comment-${r.id}`,children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("p",{className:"font-medium text-gray-900 dark:text-white",children:r.authorName}),e.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:new Date(r.createdAt).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})})]}),e.jsx("p",{className:"text-gray-600 dark:text-gray-300",children:r.content})]},r.id))}):e.jsx("p",{className:"text-gray-500 dark:text-gray-400 text-center py-8",children:"No comments yet. Be the first to share your thoughts!"})]})]}),(L||S)&&e.jsxs("div",{className:"grid md:grid-cols-2 gap-6 mt-8 mb-16",children:[L?e.jsxs("div",{className:"bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-blue-200 dark:hover:border-blue-800 transition-all cursor-pointer",onClick:()=>h(`/blog/${L.slug}`),"data-testid":"card-prev-post",children:[e.jsxs("p",{className:"text-sm text-gray-500 dark:text-gray-400 mb-2 flex items-center gap-1",children:[e.jsx(T,{className:"h-4 w-4"}),"Previous Article"]}),e.jsx("h3",{className:"font-semibold text-gray-900 dark:text-white line-clamp-2",children:L.title})]}):e.jsx("div",{}),S&&e.jsxs("div",{className:"bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-blue-200 dark:hover:border-blue-800 transition-all cursor-pointer text-right",onClick:()=>h(`/blog/${S.slug}`),"data-testid":"card-next-post",children:[e.jsxs("p",{className:"text-sm text-gray-500 dark:text-gray-400 mb-2 flex items-center gap-1 justify-end",children:["Next Article",e.jsx(X,{className:"h-4 w-4"})]}),e.jsx("h3",{className:"font-semibold text-gray-900 dark:text-white line-clamp-2",children:S.title})]})]})]}),e.jsx("section",{className:"py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 to-purple-600",children:e.jsxs("div",{className:"max-w-4xl mx-auto text-center",children:[e.jsx("h2",{className:"text-3xl font-bold text-white mb-4",children:"Ready to Try De

24sign-to-Code?"}),e.jsx("p",{className:"text-blue-100 mb-8 text-lg",children:"Convert your Figma designs with 85% fidelity. Start free today."}),e.jsxs(b,{size:"lg",variant:"secondary",onClick:()=>h("/register"),className:"gap-2","data-testid":"button-cta-signup",children:["Get Started Free ",e.jsx(X,{className:"h-5 w-5"})]})]})}),e.jsx("footer",{className:"py-12 px-4 sm:px-6 lg:px-8 bg-gray-900 text-gray-400",children:e.jsxs("div",{className:"max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6",children:[e.jsx("div",{className:"flex items-center",children:e.jsx("img",{src:Q,alt:"CodeFlow Lab",className:"h-8"})}),e.jsxs("div",{className:"flex gap-6 text-sm",children:[e.jsx(B,{href:"/",className:"hover:text-white transition-colors","data-testid":"link-footer-home",children:"Home"}),e.jsx(B,{href:"/blog",className:"hover:text-white transition-colors","data-testid":"link-footer-blog",children:"Blog"}),e.jsx(B,{href:"/docs",className:"hover:text-white transition-colors","data-testid":"link-footer-docs",children:"Documentation"}),e.jsx(B,{href:"/privacy",className:"hover:text-white transition-colors","data-testid":"link-footer-privacy",children:"Privacy"}),e.jsxs("a",{href:"https://www.linkedin.com/company/codeflow-lab1",target:"_blank",rel:"noopener noreferrer",className:"hover:text-white transition-colors flex items-center gap-1","data-testid":"link-footer-linkedin",children:[e.jsx(Y,{className:"h-4 w-4"})," LinkedIn"]})]}),e.jsx("p",{className:"text-sm",children:"© 2024 CodeFlow Lab. All rights reserved."})]})})]}):e.jsx("div",{className:"min-h-screen bg-white dark:bg-gray-950 flex items-center justify-center",children:e.jsxs("div",{className:"text-center",children:[e.jsx("h1",{className:"text-4xl font-bold text-gray-900 dark:text-white mb-4",children:"Post Not Found"}),e.jsx("p",{className:"text-gray-600 dark:text-gray-400 mb-8",children:"The article you're looking for doesn't exist."}),e.jsxs(b,{onClick:()=>h("/blog"),"data-testid":"button-back-to-blog",children:[e.jsx(T,{className:"h-4 w-4 mr-2"}),"Back to Blog"]})]})})}export{ze as default};