@@ -73,6 +73,7 @@ export default function PlaygroundPage() {
7373 const [ output , setOutput ] = useState < 'preview' | 'ast' | 'errors' > ( 'preview' ) ;
7474 const [ result , setResult ] = useState ( '' ) ;
7575 const [ isExporting , setIsExporting ] = useState ( false ) ;
76+ const apiBase = ( process . env . NEXT_PUBLIC_OSF_API_BASE || '' ) . replace ( / \/ $ / , '' ) ;
7677
7778 const handleParse = ( ) => {
7879 try {
@@ -92,14 +93,26 @@ export default function PlaygroundPage() {
9293 const handleExport = async ( format : 'pdf' | 'docx' | 'pptx' | 'xlsx' ) => {
9394 setIsExporting ( true ) ;
9495 try {
95- const response = await fetch ( `/api/convert/${ format } ` , {
96+ const apiUrl = apiBase
97+ ? `${ apiBase } /api/convert/${ format } `
98+ : `/api/convert/${ format } ` ;
99+ const response = await fetch ( apiUrl , {
96100 method : 'POST' ,
97101 headers : { 'Content-Type' : 'application/json' } ,
98102 body : JSON . stringify ( { osfCode : code , theme : 'corporate' } )
99103 } ) ;
100104
101105 if ( ! response . ok ) {
102- throw new Error ( `Export failed: ${ response . statusText } ` ) ;
106+ let message = response . statusText ;
107+ try {
108+ const data = await response . json ( ) ;
109+ if ( data ?. error ) {
110+ message = data . error ;
111+ }
112+ } catch {
113+ // ignore parse errors
114+ }
115+ throw new Error ( `Export failed: ${ message } ` ) ;
103116 }
104117
105118 const blob = await response . blob ( ) ;
@@ -128,27 +141,23 @@ export default function PlaygroundPage() {
128141 < p className = "text-sm text-gray-600 font-mono" > Experiment with OSF syntax and see live preview</ p >
129142 </ div >
130143
131- { /* Coming Soon Banner */ }
132- < div className = "bg-yellow -100 border-2 border-yellow-500 p-6 m-6" >
133- < h2 className = "font-mono font-bold text-xl text-yellow -900 mb-3" >
134- 🚧 Export Functionality: Coming Soon
144+ { /* Export Status Banner */ }
145+ < div className = "bg-green -100 border-2 border-green-600 p-6 m-6" >
146+ < h2 className = "font-mono font-bold text-xl text-green -900 mb-3" >
147+ ✅ Export Functionality: Enabled
135148 </ h2 >
136- < p className = "font-mono text-sm text-yellow-800 mb-3" >
137- The playground currently shows < strong > live preview and AST output only</ strong > .
138- Server-side export to PDF/DOCX/PPTX/XLSX requires deployment to Vercel/Netlify.
149+ < p className = "font-mono text-sm text-green-900 mb-3" >
150+ Server-side export is live. You can now export OSF to PDF/DOCX/PPTX/XLSX directly from the playground.
139151 </ p >
140- < div className = "bg-yellow -200 p-3 border border-yellow-600 " >
141- < p className = "font-mono text-xs text-yellow -900 font-bold mb-2" >
142- ✅ GET FULL EXPORT NOW - Use the CLI :
152+ < div className = "bg-green -200 p-3 border border-green-700 " >
153+ < p className = "font-mono text-xs text-green -900 font-bold mb-2" >
154+ API Endpoint :
143155 </ p >
144- < pre className = "font-mono text-xs bg-black text-green-400 p-2 mb-2" >
145- npm install -g omniscript-cli
146- </ pre >
147156 < pre className = "font-mono text-xs bg-black text-green-400 p-2" >
148- osf render document.osf -- format pdf
157+ { apiBase || '/api/convert/{ format}' }
149158 </ pre >
150159 < a href = "/docs/getting-started/installation" className = "font-mono text-xs text-blue-600 hover:underline font-bold" >
151- → View installation guide
160+ → CLI still supported for batch exports
152161 </ a >
153162 </ div >
154163 </ div >
0 commit comments