1const e=`import React from 'react'; 2import { useQuery } from '@tanstack/react-query'; 3import { base44 } from '@/api/base44Client'; 4import { Link } from 'react-router-dom'; 5import { createPageUrl } from '@/utils'; 6import { Button } from "@/components/ui/button"; 7import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; 8import { 9 Music2, 10 Sparkles, 11 Download, 12 Settings, 13 Library, 14 FileText, 15 Image, 16 Palette, 17 Users, 18 Star 19} from 'lucide-react'; 20import NavBar from '@/components/NavBar'; 21 22export default function UserGuide() { 23 const { data: currentUser } = useQuery({ 24 queryKey: ['currentUser'], 25 queryFn: () => base44.auth.me() 26 }); 27 const sections = [ 28 { 29 title: "Getting Started", 30 icon: Music2, 31 content: [ 32 { 33 subtitle: "What is SongSlide?", 34 steps: [ 35 "SongSlide helps worship teams build lyric slide presentations for PowerPoint, image-based PPTX, and HTML export", 36 "Your songs are organized in a personal Library, and each song becomes a multi-slide presentation with a title slide followed by lyric slides", 37 "When you first log in you will see the Home page where you can create a new presentation from scratch" 38 ] 39 } 40 ] 41 }, 42 { 43 title: "Pages Overview", 44 icon: Music2, 45 content: [ 46 { 47 subtitle: "Main Pages", 48 steps: [ 49 "ð Home â Create a new song presentation by typing or pasting lyrics, choosing lines per slide, and generating slides", 50 "ð Library â Your saved songs. Browse, search, sort, preview, download, and manage all your saved presentations", 51 "ð Catalog â Browse 200 pre-loaded worship songs. Select one or many to send to the Catalog Workspace for editing before saving to your Library", 52 "ð Catalog Workspace â Staging area for songs selected from the Catalog. Edit lyrics and lines-per-slide for up to 20 songs before sending each one to the Library", 53 "ðµ Song Preview â Full-page preview of any saved Library song. Navigate slides, adjust text size, change backgrounds, edit slide text, and export", 54 "âï¸ Settings â Configure typography, colors, backgrounds, and slide layout defaults", 55 "âï¸ Messages â View sent email history", 56 "ð User Guide â You are here" 57 ] 58 } 59 ] 60 }, 61 { 62 title: "Creating a New Presentation", 63 icon: Sparkles, 64 content: [ 65 { 66 subtitle: "Home Page Steps", 67 steps: [ 68 "Click New Presentation from any page header, or go to the Home page", 69 "Enter the Song Title and Artist", 70 "Paste your lyrics into the text area. Use [-] on its own line to mark section breaks (verse, chorus, bridge, etc.) â SongSlide will keep those breaks clean in the output", 71 "Choose Lines per Slide (2â6) from the dropdown", 72 "Optionally choose a Week label and Sermon Date", 73 "Click Generate Slides to preview your presentation", 74 "Navigate slides using the arrow buttons or dot indicators", 75 "Adjust Text Size using the â and + controls", 76 "Click Assign Background to pick from your Favorites or enter a URL", 77 "When satisfied, click Save to Library" 78 ] 79 } 80 ] 81 }, 82 { 83 title: "Lyric Formatting Tips", 84 icon: FileText, 85 content: [ 86 { 87 subtitle: "How to Format Lyrics", 88 steps: [ 89 "Use [-] on its own line between sections (verse, chorus, bridge) to create clean slide breaks", 90 "Each [-] starts a new slide group â lines will not bleed across section breaks", 91 "If a line is very long, SongSlide will attempt to wrap it intelligently to keep text on screen", 92 "You can manually add line breaks in the text editor to control exactly where lines split", 93 "The Lines per Slide setting controls how many lyric lines appear per slide (not counting the title slide)" 94 ] 95 } 96 ] 97 }, 98 { 99 title: "The Worship Song Catalog", 100 icon: Library, 101 content: [ 102 { 103 subtitle: "Browse & Add Songs", 104 steps: [ 105 "The Catalog contains 200 pre-formatted worship songs ready to add to your Library", 106 "Use Search to find songs by title or artist", 107 "Use Filter by Artist to browse by worship artist", 108 "The Lines per Slide dropdown on the Catalog page sets the default for all songs you send to the Workspace", 109 "Click Add on a single song, or check multiple songs and click Add Selected, to send them to the Catalog Worksp
109ace", 110 "Songs already in your Library show an In Library badge instead of an Add button", 111 "Use the Import button to upload your own JSON-formatted song batch file" 112 ] 113 } 114 ] 115 }, 116 { 117 title: "Catalog Workspace", 118 icon: Sparkles, 119 content: [ 120 { 121 subtitle: "Staging Area for Batch Editing", 122 steps: [ 123 "The Catalog Workspace is a staging area between the Catalog and your Library â up to 20 songs at a time", 124 "Each song gets its own editing card with the full lyric text editor and lines-per-slide selector", 125 "Edit the raw lyric text freely â fix line breaks, add [-] section breaks, or adjust wording", 126 "A live slide count estimate updates as you edit", 127 "When a song is ready, click â Add to Library on that card â it processes and saves that song immediately", 128 "Use Add All Remaining to Library at the bottom to batch-save all pending songs", 129 "Cards that have been saved show a green Saved â badge", 130 "Click the â on any card to remove it from the queue without saving" 131 ] 132 } 133 ] 134 }, 135 { 136 title: "Your Song Library", 137 icon: Library, 138 content: [ 139 { 140 subtitle: "Song Library Tab", 141 steps: [ 142 "View all your saved songs as cards (grid) or a list", 143 "Each card shows the song's assigned background thumbnail, title, artist, slide count, date, and week label", 144 "Sort by Title, Date, or Week using the sort buttons", 145 "Search by title or artist", 146 "Filter by Artist, Week, or Sermon Date", 147 "Each card has quick-action buttons: Text Preview, Image Preview, PPTX Text, PPTX Image, and Change Background", 148 "Click any song title or the preview buttons to open the Song Preview page" 149 ] 150 }, 151 { 152 subtitle: "Song Sets Tab", 153 steps: [ 154 "Group songs together into a Song Set (e.g. for a specific Sunday service)", 155 "Create a set with a name, date, and notes, then select songs to include", 156 "Download all songs in a set as a single bulk PPTX" 157 ] 158 } 159 ] 160 }, 161 { 162 title: "Song Preview Page", 163 icon: Image, 164 content: [ 165 { 166 subtitle: "Full-Page Song Preview", 167 steps: [ 168 "â Back to Library returns you to the Library", 169 "Text / Image toggle switches between text-only PPTX mode and image-capture slide mode", 170 "Text Size â / + adjusts font size. Changes are saved per-song automatically", 171 "Assign Background lets you pick a background from your Favorites or enter a URL. The note 'Using assigned background' appears when a song has its own saved background", 172 "Navigate slides using the left/right arrow buttons or the dot indicators below the slide", 173 "Edit Slide Position â drag and reposition the text block on the slide, and scale the text size for that slide independently", 174 "Edit Slide Text â directly edit the lyric text for the current slide only. Changes are saved as slide-level overrides without altering the original lyric data", 175 "Bottom action bar: PPTX (Text), PPTX (Image), HTML, Delete Song" 176 ] 177 } 178 ] 179 }, 180 { 181 title: "Backgrounds & Favorites", 182 icon: Palette, 183 content: [ 184 { 185 subtitle: "Managing Backgrounds", 186 steps: [ 187 "Assign a background to any song via Assign Background or Change Background", 188 "Backgrounds can be image URLs or AI-generated prompts", 189 "Your team's Favorite Backgrounds are shared across all members of your organization (tenant)", 190 "Save any background to Favorites using the â star button in the background picker", 191 "Favorites are managed in Settings (TenantAdmin only can add/remove shared favorites)", 192 "Each song remembers its last used background â it will appear automatically when you reopen that song in the Preview page" 193 ] 194 } 195 ] 196 }, 197 { 198 title: "Exporting Your Presentation", 199 icon: Download, 200 content: [ 201 { 202 subtitle: "Three Export Formats", 203 steps: [
204 "PPTX (Text) â PowerPoint file with text-based slides. Editable in PowerPoint", 205 "PPTX (Image) â PowerPoint file where each slide is a captured image (background + text baked in). Best for worship display screens", 206 "HTML â A standalone HTML file you can open in any browser as a fullscreen presentation", 207 "All three formats are available from the Song Preview page and Library cards", 208 "For Song Sets, use the Download All PPTX button on the Song Set card to generate a combined presentation for all songs in the set" 209 ] 210 } 211 ] 212 }, 213 { 214 title: "Settings", 215 icon: Settings, 216 content: [ 217 { 218 subtitle: "Customize Defaults", 219 steps: [ 220 "Settings apply as defaults for all new presentations", 221 "Typography â choose font family", 222 "Colors â text color, accent color, background color", 223 "Background â set a default background image URL or AI prompt", 224 "Layout â default lines per slide, slide layout style", 225 "Business Logo â upload your church/organization logo (TenantAdmin only). The logo appears on the title slide of every presentation" 226 ] 227 } 228 ] 229 }, 230 { 231 title: "Multi-Tenant / Organization", 232 icon: Users, 233 content: [ 234 { 235 subtitle: "Team Collaboration", 236 steps: [ 237 "SongSlide supports organizations (tenants) so your whole worship team can share a library", 238 "A TenantAdmin creates and manages the organization", 239 "Members are invited by email and join with a role of Member or Admin", 240 "All members of an organization share the same Song Library, Song Sets, Favorite Backgrounds, and Settings", 241 "The business Logo is set by the TenantAdmin and appears on all presentations for the organization" 242 ] 243 } 244 ] 245 }, 246 { 247 title: "Tips & Shortcuts", 248 icon: FileText, 249 content: [ 250 { 251 subtitle: "Pro Tips", 252 steps: [ 253 "ð¡ Use [-] liberally â it keeps choruses and bridges on their own clean slides", 254 "ð¡ The Catalog Workspace lets you preview slide counts before committing to the Library", 255 "ð¡ Song Sets are great for planning a full Sunday service and downloading everything at once", 256 "ð¡ PPTX (Image) format is the most reliable for worship display software like ProPresenter or EasyWorship", 257 "ð¡ If slides look crowded, reduce Lines per Slide or use the Edit Slide Text feature to manually wrap long lines", 258 "ð¡ The Edit Slide Position tool lets you move text to the bottom third of the slide for a lower-third worship look" 259 ] 260 } 261 ] 262 } 263 ]; 264 265 return ( 266 <div className="min-h-screen dark:bg-gradient-to-br dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 bg-gradient-to-br from-slate-50 via-white to-slate-100"> 267 <NavBar user={currentUser} /> 268 269 <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pt-8"> 270 <div className="mb-8"> 271 <h2 className="text-4xl font-bold text-white mb-2">ð SongSlide User Guide</h2> 272 <p className="text-slate-300 text-lg"> 273 Everything you need to know to create beautiful worship presentations 274 </p> 275 </div> 276 277 <div className="space-y-6"> 278 {sections.map((section, index) => ( 279 <Card key={index} className="border-slate-800 bg-slate-900/50"> 280 <CardHeader> 281 <CardTitle className="flex items-center gap-3 text-white"> 282 <div className="p-2 bg-sky-500/20 rounded-lg"> 283 <section.icon className="h-5 w-5 text-sky-400" /> 284 </div> 285 {section.title} 286 </CardTitle> 287 </CardHeader> 288 <CardContent className="space-y-6"> 289 {section.content.map((item, itemIndex) => ( 290 <div key={itemIndex}> 291 <h4 className="font-semibold text-slate-200 mb-3">{item.subtitle}</h4> 292 <ul className="space-y-2 text-slate-400"> 293 {item.steps.map((step, stepIndex) => ( 294 <li key={stepIndex} className="flex items-start gap-2">
295 <span className="text-sky-400 mt-1">â¢</span> 296 <span className="whitespace-pre-line">{step}</span> 297 </li> 298 ))} 299 </ul> 300 </div> 301 ))} 302 </CardContent> 303 </Card> 304 ))} 305 </div> 306 307 {/* Quick Links */} 308 <Card className="border-slate-800 bg-slate-900/50 mt-8"> 309 <CardHeader> 310 <CardTitle className="text-white">Quick Links</CardTitle> 311 </CardHeader> 312 <CardContent className="flex flex-wrap gap-3"> 313 <Link to={createPageUrl('Home')}> 314 <Button variant="outline" className="border-slate-700 text-slate-300 hover:bg-slate-800"> 315 <Music2 className="h-4 w-4 mr-2" /> 316 Create Presentation 317 </Button> 318 </Link> 319 <Link to={createPageUrl('Library')}> 320 <Button variant="outline" className="border-slate-700 text-slate-300 hover:bg-slate-800"> 321 <Library className="h-4 w-4 mr-2" /> 322 My Library 323 </Button> 324 </Link> 325 <Link to={createPageUrl('Settings')}> 326 <Button variant="outline" className="border-slate-700 text-slate-300 hover:bg-slate-800"> 327 <Settings className="h-4 w-4 mr-2" /> 328 Settings 329 </Button> 330 </Link> 331 </CardContent> 332 </Card> 333 </main> 334 335 {/* Footer */} 336 <footer className="border-t border-slate-800/50 mt-12 py-6"> 337 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> 338 <p className="text-sm text-slate-500"> 339 Powered by <a href="https://SoKoolMedia.com" target="_blank" rel="noopener noreferrer" className="text-sky-400 hover:text-sky-300">SoKoolMedia.com</a> 340 </p> 341 </div> 342 </footer> 343 </div> 344 ); 345}`;export{e as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.