[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic":663,"blog-author-\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic":1393,"i-material-symbols:arrow-back-rounded":1405},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":1380,"buttonUrl":1380,"category":1381,"date":1382,"description":1383,"draft":1384,"editorsPick":1384,"extension":1385,"featured":1384,"image":1386,"imageAlt":1387,"meta":1388,"navigation":32,"ogImage":1380,"ogImageAlt":1380,"path":1389,"seo":1390,"stem":1391,"tags":1380,"__hash__":1392},"blog\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic.md","Building an Event App with Astro & Prismic","Jude Miracle","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuild-crud-task-manager-react-hygraph\u002Fauthor.png","Jude Miracle.","jude-miracle",{"type":671,"value":672,"toc":1357},"minimark",[673,685,688,693,701,704,708,727,731,734,737,746,750,759,766,786,792,795,798,857,863,869,874,884,890,901,907,919,925,929,944,950,962,966,969,979,982,988,991,997,1020,1024,1027,1052,1055,1061,1068,1074,1077,1083,1087,1098,1104,1117,1121,1127,1133,1144,1151,1157,1161,1168,1174,1192,1196,1199,1206,1212,1223,1229,1235,1241,1251,1257,1261,1272,1278,1300,1306,1310,1325,1331,1343,1347,1350],[674,675,676,677,684],"p",{},"Previously, traditional CMS provided us with the ability to have all our content, such as images, videos, templates, and custom code, in a single environment. However, as the web grew and became more complex, the need to scale increased, and the past approach was no longer adequate. The introduction of the ",[678,679,683],"a",{"href":680,"rel":681},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FHeadless_content_management_system",[682],"nofollow","headless CMS"," brought about how our content serves as data over an API. A headless CMS makes it easy to distribute data across different platforms and devices on the internet.",[674,686,687],{},"In this article, we’ll talk about Prismic and learn how to set it up with Astro. In addition, we’ll learn to source data from Prismic to a frontend – Astro. Also, we’ll build an event manager app with Astro and a Prismic headless CMS.",[689,690,692],"h2",{"id":691},"what-is-prismic","What Is Prismic?",[674,694,695,700],{},[678,696,699],{"href":697,"rel":698},"https:\u002F\u002Fprismic.io\u002F",[682],"Prismic"," is a CMS backend for websites and apps that’s designed to increase developer productivity and includes a visual builder for creating posts and pages. Prismic is specifically a headless, API-based, hosted, proprietary CMS for technical independence that allows developers to use their preferred framework & programming language.",[674,702,703],{},"Major companies, such as Spotify, DigitalOcean, and Netflix, use Prismic as their CMS. Prismic allows users to create websites and apps with instantly updatable content and custom designs.",[689,705,707],{"id":706},"the-benefits-of-using-prismic","The Benefits of Using Prismic",[709,710,711,715,718,721,724],"ul",{},[712,713,714],"li",{},"Prismic allows developers to use nearly any programming language or framework to build websites and apps. It can be used with React, Vue, Angular, Rails, Node and Laravel.",[712,716,717],{},"Prismic allows users to create branded page sections and components that are reusable.",[712,719,720],{},"It provides a simple, feature-rich admin panel that allows content managers to update content on websites and apps instantly and independently.",[712,722,723],{},"Prismic allows content creators and developers to focus on creating content, managing resources, and developing a more efficient and beautiful user interface. Meanwhile, the Prismic team maintains its content infrastructure in the cloud.",[712,725,726],{},"Thanks to their partnership with Imgix, Primsic allows users to customize images. They also make it easy to create and schedule releases, as well as pull content from third parties into integration fields.",[689,728,730],{"id":729},"what-is-astro","What Is Astro?",[674,732,733],{},"Astro is a web framework designed for building fast, content-rich websites. Astro lets us develop faster websites with less client-side Javascript. It leverages server-side rendering over client-side rendering and supports code splitting, file-based routing, asset handling, build process, bundling, optimization and data fetching. Astro has built-in support for popular web frameworks and tools such as React, Solid, Vue, Typescript, Markdown and more.",[674,735,736],{},"Also, Astro integrates partial hydration into websites and applications, which increases site performance.",[674,738,739,740,745],{},"To learn more about Astro, see the article ",[678,741,744],{"href":742,"rel":743},"https:\u002F\u002Fastro.build\u002F",[682],"here",".",[689,747,749],{"id":748},"setting-up-a-prismic-headless-cms","Setting up a Prismic Headless CMS",[674,751,752,753,758],{},"To set up Prismic, we first need to create an ",[678,754,757],{"href":755,"rel":756},"https:\u002F\u002Fprismic.io\u002Fdashboard\u002Fsignup",[682],"account",". After creating an account, we’ll be directed to the dashboard. Next, we click on “create a new repository with another framework**.”**",[674,760,761],{},[762,763],"img",{"alt":764,"src":765},"Creating a repository with Prismic.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-001.png",[674,767,768,769,773,774,777,778,781,782,785],{},"After creating a new repository, we’ll be directed to the admin dashboard, where we’ll create and define our ",[770,771,772],"strong",{},"Custom Types",". In this case, we want to create ",[770,775,776],{},"Events"," under ",[770,779,780],{},"Documents",", so we click on ",[770,783,784],{},"Custom Types."," We’ll start by creating our Events custom type. Fill out the form as shown below:",[674,787,788],{},[762,789],{"alt":790,"src":791},"Creating a custom template.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-002.png",[674,793,794],{},"Once this is created, we’ll be directed to a new page where we’ll define our custom type.",[674,796,797],{},"Next, we’ll be using the drag-and-drop feature that Prismic offers to create our custom type. We use the drag-and-drop editor to fill out the following:",[709,799,800,812,821,830,839,847],{},[712,801,802,803,807,808,811],{},"A ",[804,805,806],"code",{},"title"," field with the value ",[770,809,810],{},"title -"," the title of the event**.**",[712,813,802,814,807,817,820],{},[804,815,816],{},"rich text",[770,818,819],{},"description -"," the description of the event.",[712,822,802,823,807,826,829],{},[804,824,825],{},"date",[770,827,828],{},"date -"," the date of the event**.**",[712,831,802,832,807,835,838],{},[804,833,834],{},"number",[770,836,837],{},"duration -"," the time duration of the event.",[712,840,802,841,807,843,846],{},[804,842,834],{},[770,844,845],{},"price -"," the price to attend events**.**",[712,848,849,850,807,853,856],{},"An ",[804,851,852],{},"image",[770,854,855],{},"image -"," the event’s featured image**.**",[674,858,859,860,745],{},"After defining custom types, click on ",[770,861,862],{},"save",[674,864,865],{},[762,866],{"alt":867,"src":868},"Defining custom types.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-003.png",[870,871,873],"h3",{"id":872},"adding-contents","Adding Contents",[674,875,876,877,879,880,883],{},"Next, let’s add some content to our custom types. On our admin dashboard, we first select ",[770,878,780],{}," and click on ",[770,881,882],{},"Create New."," We’ll be prompted to create an entry, but start by adding content for the Events:",[674,885,886],{},[762,887],{"alt":888,"src":889},"Creating a new entry.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-004.png",[674,891,892,893,896,897,900],{},"We also added the tags ",[770,894,895],{},"tech-hangout"," and ",[770,898,899],{},"live-coding"," as shown in the image below**.** We will be using the tags to filter our Events.",[674,902,903],{},[762,904],{"alt":905,"src":906},"The tags that have been added to the event.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-005.png",[674,908,909,910,912,913,915,916],{},"Here, we can fill out our desired information in the fields created earlier. We can add as many ",[770,911,776],{}," as desired by clicking on ",[770,914,882],{}," After filling out the entry, we then click ",[770,917,918],{},"Save & Publish.",[674,920,921],{},[762,922],{"alt":923,"src":924},"All of the live events in the app.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-006.png",[870,926,928],{"id":927},"setting-up-roles-permissions","Setting up Roles & Permissions",[674,930,931,932,935,936,939,940,943],{},"Before we can access our data through the API endpoint, we need to grant access to our API by navigating to ",[770,933,934],{},"Settings"," on our admin dashboard and clicking on ",[770,937,938],{},"API & Security."," We’ll see an API endpoint automatically generated by Primsic**.** Next, we copy and save this API endpoint. Finally, we try accessing ",[804,941,942],{},"https:\u002F\u002Fyour-repo-name.cdn.prismic.io\u002Fapi\u002Fv2"," to see all of our content returned in our browser.",[674,945,946],{},[762,947],{"alt":948,"src":949},"The roles and permissions in the event app.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-007.png",[709,951,952],{},[712,953,954],{},[955,956,957,958,961],"em",{},"In order to use the Prismic preview feature, we have to make the ",[770,959,960],{},"API access token"," private.",[689,963,965],{"id":964},"setting-up-our-frontend-with-astro","Setting up Our Frontend with Astro",[674,967,968],{},"In this section, we’ll install and set up Astro, and build the event app user interface. So let’s get started by installing Astro. In our terminal, we run the following command:",[970,971,976],"pre",{"className":972,"code":974,"language":975},[973],"language-text","# Yarn  yarn create astro\n","text",[804,977,974],{"__ignoreMap":978},"",[674,980,981],{},"The above command will bootstrap the application configuration for the project. We’ll be asked to make some choices based on how we want the project to run on Astro. Our selection should look like the one in the image below:",[674,983,984],{},[762,985],{"alt":986,"src":987},"The commands to set up an Astro repository.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-008.png",[674,989,990],{},"After selecting the configuration for the project, we change it to the project directory. Then, we’ll start the application with the command below:",[970,992,995],{"className":993,"code":994,"language":975},[973],"cd event-app && yarn dev\n",[804,996,994],{"__ignoreMap":978},[709,998,999],{},[712,1000,1001,1004,1005,1004,1008,1004,1011,1018],{},[955,1002,1003],{},"As we look through the Astro folder structure, we’ll notice that every Astro component makes use of the"," ",[804,1006,1007],{},".astro",[955,1009,1010],{},"extension. It also allows us to integrate any web framework. If we're using VS Code, we can add IntelliSense support for it by installing this",[678,1012,1015],{"href":1013,"rel":1014},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=astro-build.astro-vscode",[682],[955,1016,1017],{},"extension",[955,1019,745],{},[870,1021,1023],{"id":1022},"configuring-our-dependencies","Configuring Our Dependencies",[674,1025,1026],{},"Before we start developing our application, let's install and configure some dependencies:",[709,1028,1029,1037,1046],{},[712,1030,1031,1036],{},[678,1032,1035],{"href":1033,"rel":1034},"https:\u002F\u002Ftailwindcss.com\u002F",[682],"Tailwind"," – a utility-first CSS framework for styling our application.",[712,1038,1039,1004,1042,1045],{},[804,1040,1041],{},"@prismicio\u002Fclient",[770,1043,1044],{},"–"," a package responsible for handling requests to our Prismic endpoint. It is also used in creating web apps with Prismic and Javascript.",[712,1047,1048,1051],{},[804,1049,1050],{},"@prismicio\u002Fhelpers"," – a package that helps us work with data from Prismic.",[674,1053,1054],{},"Let’s start by installing and configuring Tailwind into our project by running this command:",[970,1056,1059],{"className":1057,"code":1058,"language":975},[973],"yarn astro add tailwind react\n",[804,1060,1058],{"__ignoreMap":978},[674,1062,1063,1064,1067],{},"We’ll see the Astro CLI add Tailwind and React dependencies to our project. Next, we’ll go to ",[804,1065,1066],{},"astro.config.mjs",", where we’ll see that Astro has automatically included these codes into our project. Astro allows us to integrate with any frontend framework.",[970,1069,1072],{"className":1070,"code":1071,"language":975},[973],"\u002F\u002F astro.config.mjs\nimport { defineConfig } from 'astro\u002Fconfig';\nimport tailwind from \"@astrojs\u002Ftailwind\";\nimport react from \"@astrojs\u002Freact\";\n\u002F\u002F https:\u002F\u002Fastro.build\u002Fconfig\nexport default defineConfig({\n  integrations: [tailwind(), react()]\n});\n",[804,1073,1071],{"__ignoreMap":978},[674,1075,1076],{},"After installing Tailwind and React into our project, we’ll install libraries that will help us fetch data from Prismic into our project. In our terminal, we run the command below to install the dependencies:",[970,1078,1081],{"className":1079,"code":1080,"language":975},[973],"yarn add @prismicio\u002Fclient @prismicio\u002Fhelpers\n",[804,1082,1080],{"__ignoreMap":978},[689,1084,1086],{"id":1085},"connecting-prismic-to-astro","Connecting Prismic to Astro",[674,1088,1089,1090,1093,1094,1097],{},"Next, in our ",[804,1091,1092],{},"src"," folder, we create a ",[804,1095,1096],{},"prismic.js"," file and add the code below:",[970,1099,1102],{"className":1100,"code":1101,"language":975},[973],"import Prismic from '@prismicio\u002Fclient';\nconst API_ENDPOINT = process.env.ASTRO_PUBLIC_PRISMIC_URL;\nconst Client = Prismic.createClient(API_ENDPOINT);\n",[804,1103,1101],{"__ignoreMap":978},[674,1105,1106,1107,1109,1110,1112,1113,1116],{},"First, we imported ",[804,1108,699],{}," from ",[804,1111,1041],{}," then initialized our API endpoint, and passed it to ",[804,1114,1115],{},"prismic.createClient()"," to generate a client object. The client object contains a collection of properties and methods to help us query the Prismic API. With this done, we can start writing our query.",[870,1118,1120],{"id":1119},"adding-a-query-to-our-prismic-client","Adding a Query to Our Prismic Client",[674,1122,1123,1124,1126],{},"Inside our ",[804,1125,1096],{}," file, we’ll add the code below:",[970,1128,1131],{"className":1129,"code":1130,"language":975},[973],"export function getAllCategories(tag) {\n return Client.getByTag(tag)\n}\nexport function getAllEvents() {\n return Client.getAllByType(\"event\")\n}\n",[804,1132,1130],{"__ignoreMap":978},[674,1134,1135,1136,1139,1140,1143],{},"We’ll use methods to write our query that are provided by the client object. The ",[804,1137,1138],{},"getAllEvents"," query will help us request our Events, and the ",[804,1141,1142],{},"getAllCategories"," will filter our query request.",[674,1145,1146,1147,1150],{},"Before we start building our layouts, let’s create a ",[804,1148,1149],{},".env"," in our root folder and paste it into our Prismic URL API:",[970,1152,1155],{"className":1153,"code":1154,"language":975},[973],"ASTRO_PUBLIC_PRISMIC_URL=\"your api url\"\n",[804,1156,1154],{"__ignoreMap":978},[870,1158,1160],{"id":1159},"building-our-application-ui-with-astro","Building Our Application UI with Astro",[674,1162,1163,1164,1167],{},"We’ll start by creating our app layout. The layout of Astro allows us to create reusable components. We’ll create a navigation layout for all the pages in our application. First, replace the content inside ",[804,1165,1166],{},"layouts\u002Flayout.astro"," in the src folder with the code snippet below:",[970,1169,1172],{"className":1170,"code":1171,"language":975},[973],"---\nexport interface Props {\n    title: string;\n}\nconst { title } = Astro.props;\n---\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n   \u003Cmeta charset=\"UTF-8\" \u002F>\n   \u003Cmeta name=\"viewport\" content=\"width=device-width\" \u002F>\n   \u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\" \u002F>\n   \u003Cmeta name=\"generator\" content={Astro.generator} \u002F>\n   \u003Ctitle>{title}\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n   \u003Cnav class=\"bg-indigo-600 border-gray-200 dark:bg-gray-900\">\n   \u003Cdiv class=\"flex flex-wrap justify-between items-center mx-auto max-w-screen-xl px-4 md:px-6 py-2.5\">\n     \u003Ca href=\"\u002F\" class=\"flex items-center\">\n       \u003Cspan class=\"self-center text-xl font-semibold whitespace-nowrap text-white\">Event-App\u003C\u002Fspan>\n     \u003C\u002Fa>\n     \u003Cdiv class=\"flex md:order-2\">\n     \u003Cbutton type=\"button\" data-collapse-toggle=\"navbar-search\" aria-controls=\"navbar-search\" aria-expanded=\"false\" class=\"md:hidden text-gray-500 bg-white dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1\" >\n       \u003Csvg class=\"w-5 h-5\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\u003Cpath fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\">\u003C\u002Fpath>\u003C\u002Fsvg>\n       \u003Cspan class=\"sr-only\">Search\u003C\u002Fspan>\n     \u003C\u002Fbutton>\n   \u003Cdiv class=\"hidden relative md:block \">\n     \u003Cdiv class=\"flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none\">\n       \u003Csvg class=\"w-5 h-5 text-gray-500\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\u003Cpath fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\">\u003C\u002Fpath>\u003C\u002Fsvg>\n       \u003Cspan class=\"sr-only\">Search icon\u003C\u002Fspan>\n     \u003C\u002Fdiv>\n     \u003Cinput type=\"text\" id=\"search-navbar\" class=\"block p-2 pl-10 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\" placeholder=\"Search...\">\n   \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\u003Cnav class=\"bg-gray-50 dark:bg-gray-700\">\n  \u003Cdiv class=\"py-3 px-4 mx-auto max-w-screen-xl md:px-6\">\n    \u003Cdiv class=\"flex items-center\">\n      \u003Cul class=\"flex flex-row mt-0 mr-6 space-x-8 text-sm font-medium\">\n       \u003Cli>\n        \u003Ca href=\"\u002F\" class=\"text-gray-900 dark:text-white hover:underline\" aria-current=\"page\">Home\u003C\u002Fa>\n       \u003C\u002Fli>\n       \u003Cli>\n        \u003Ca href=\"\u002FliveCoding\" class=\"text-gray-900 dark:text-white hover:underline\">Live Coding\u003C\u002Fa>\n       \u003C\u002Fli>\n       \u003Cli>\n        \u003Ca href=\"\u002FtechHangout\" class=\"text-gray-900 dark:text-white hover:underline\">Tech Hangout\u003C\u002Fa>\n       \u003C\u002Fli>\n     \u003C\u002Ful>\n   \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n \u003C\u002Fnav>\n\u003Cslot \u002F>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[804,1173,1171],{"__ignoreMap":978},[674,1175,1176,1177,1180,1181,1184,1185,1188,1189,1191],{},"Astro allows JavaScript and TypeScript to be written inside the ",[804,1178,1179],{},"---"," block. The area is called the ",[770,1182,1183],{},"Component Script."," Astro also uses ",[804,1186,1187],{},"Astro.props"," to pass data to components in Astro and make it available to use throughout the component. Below the ",[804,1190,1179],{}," block is where we structure the UI. Astro allows us to insert child elements from other files into the component template by using the element as a placeholder for external HTML information.",[689,1193,1195],{"id":1194},"displaying-our-events","Displaying Our Events",[674,1197,1198],{},"In this section, we’ll request Prismic. Once we get back our desired data, we’ll populate the home page with the different events received from Prismic. However, before doing this, we need to create a card component that we can reuse to display our event data.",[674,1200,1201,1202,1205],{},"In the components folder, we’ll create the ",[804,1203,1204],{},"Card"," component, and add the following:",[970,1207,1210],{"className":1208,"code":1209,"language":975},[973],"---\nexport interface Props {\n    event: any\n}\nconst { event } = Astro.props;\nconst id = 'events\u002F'+event.id;\n---\n\u003Cdiv class=\"max-w-md bg-white rounded-md border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700\">\n \u003Ca href={id}>\n   \u003Cimg class=\"rounded-t-lg\" src={event.data.image.url} alt={event.data.title[0].text}>\n \u003C\u002Fa>\n \u003Cdiv class=\"p-5\">\n   \u003Ca href={id}>\n    \u003Ch5 class=\"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white\">{event.data.title[0].text}\u003C\u002Fh5>\n   \u003C\u002Fa>\n   \u003Cp class=\"mb-3 font-normal text-gray-700 dark:text-gray-400\">{event.data.datetime}\u003C\u002Fp>\n   \u003Ca href={id} class=\"inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\">\n            Read more\n   \u003Csvg aria-hidden=\"true\" class=\"ml-2 -mr-1 w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\u003Cpath fill-rule=\"evenodd\" d=\"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z\" clip-rule=\"evenodd\">\u003C\u002Fpath>\u003C\u002Fsvg>\n   \u003C\u002Fa>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[804,1211,1209],{"__ignoreMap":978},[674,1213,1214,1215,1218,1219,1222],{},"Here, we have passed an ",[804,1216,1217],{},"event"," prop into this component. The prop is an array of events passed down from the home page ",[804,1220,1221],{},"pages\u002Findex.astro",". We added styles using TailwindCSS, and added the necessary information to be displayed on the card, thanks to the prop. We also noticed some kind of dynamic routing for when we click on an event:",[970,1224,1227],{"className":1225,"code":1226,"language":975},[973],"const id = 'events\u002F'+event.id;\n",[804,1228,1226],{"__ignoreMap":978},[674,1230,1231,1232,1234],{},"Now that we’ve created our components, let’s replace the content in the ",[804,1233,1221],{}," file with the code snippet below:",[970,1236,1239],{"className":1237,"code":1238,"language":975},[973],"---\nimport Layout from '..\u002Flayouts\u002FLayout.astro';\nimport Card from '..\u002Fcomponents\u002FCard.astro';\nimport { getAllEvents } from '..\u002Fprismic.js';\nconst events = await getAllEvents();\n---\n\u003CLayout title=\"Event App.\">\n \u003Cmain>\n \u003Cdiv class=\"md:flex md:justify-evenly md:items-center flex-wrap mt-8 px-4 overflow-hidden\">\n            {events.map(event => \u003CCard event={event}>\u003C\u002FCard>)}\n \u003C\u002Fdiv>\n \u003C\u002Fmain>\n\u003C\u002FLayout>\n",[804,1240,1238],{"__ignoreMap":978},[674,1242,1243,1244,1246,1247,1250],{},"Each file with the ",[804,1245,1007],{}," extension in the ",[804,1248,1249],{},"src\u002Fpages"," folder will be a page on our site due to Astro’s routing mechanism called “file-based routing.”",[674,1252,1253],{},[762,1254],{"alt":1255,"src":1256},"All of the events displayed on the app.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fimg-009.png",[870,1258,1260],{"id":1259},"displaying-a-particular-event","Displaying a Particular Event",[674,1262,1263,1264,1267,1268,1271],{},"In this section, we’ll be displaying a particular Event. In our ",[804,1265,1266],{},"pages"," folder, we create an ",[804,1269,1270],{},"events\u002F[id].astro"," file:",[970,1273,1276],{"className":1274,"code":1275,"language":975},[973],"---\nimport Layout from \"..\u002F..\u002Flayouts\u002FLayout.astro\";\nimport { PrismicRichText } from '@prismicio\u002Freact'\nimport {getAllEvents} from '..\u002F..\u002Fprismic';\n\nexport async function getStaticPaths() {\n const events = await getAllEvents();\n return events.map((event) => {\n return {\n params: { id: event.id },\n      props: { event }\n    };\n  });\n}\nconst { id } = Astro.params;\nconst { event } = Astro.props;\n---\n\u003CLayout title={event.uid}>\n    \u003Cdiv class=\"container mx-auto px-80 mb-8 space-y-6 py-3\">\n        \u003Ch1 class=\"text-4xl\">{event.data.title[0].text}\u003C\u002Fh1>\n        \u003Cfigure class=\"relative overflow-hidden shadow-md mb-10\">\n            \u003Cimg src={event.data.image.url} alt={event.data.title[0].text} class='object-top h-full w-full object-cover shadow-lg rounded-t-lg lg:rounded-lg' \u002F>\n        \u003C\u002Ffigure>\n        \u003Ch1 class=\"text-4xl\">Duration - {`${event.data.duration}mins`}\u003C\u002Fh1>\n        \u003Ch1 class=\"text-4xl\">Price - {`${event.data.price}$`}\u003C\u002Fh1>\n        \u003CPrismicRichText field={event.data.description} \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002FLayout>\n",[804,1277,1275],{"__ignoreMap":978},[674,1279,1280,1281,1284,1285,1288,1289,1291,1292,1295,1296,1299],{},"Using the integrated ",[804,1282,1283],{},"getStaticPaths()"," function, Astro enables us to execute dynamic routing. We can render the pages specified in params, which is our ",[804,1286,1287],{},"id",", using ",[804,1290,1283],{},". To be able to render the Rich Text and Title fields as React components, we need to install and use the component from ",[804,1293,1294],{},"@prismicio\u002Freact",". The",[804,1297,1298],{},"PrismicRichText"," component can be customized to our taste.",[970,1301,1304],{"className":1302,"code":1303,"language":975},[973],"yarn add @prismicio\u002Freact\n",[804,1305,1303],{"__ignoreMap":978},[870,1307,1309],{"id":1308},"filtering-events","Filtering Events",[674,1311,1312,1313,896,1316,1319,1320,1322,1323,1271],{},"In this section, we’ll filter our Events based on the tags. We want each tag to be displayed on its page. First, we create a ",[804,1314,1315],{},"techHangout.astro",[804,1317,1318],{},"liveCoding.astro"," file in the ",[804,1321,1249],{}," folder. Next, we add the code below to our ",[804,1324,1318],{},[970,1326,1329],{"className":1327,"code":1328,"language":975},[973],"---\nimport Layout from '..\u002Flayouts\u002FLayout.astro';\nimport Card from '..\u002Fcomponents\u002FCard.astro';\nimport { getAllCategories } from '..\u002Fprismic.js';\n\nconst events = await getAllCategories('livecoding');\n---\n\u003CLayout title={events.results[0].tags[0]}>\n \u003Cmain>\n \u003Cdiv class=\"md:flex md:justify-evenly md:items-center space-y-2 mt-8 px-4 overflow-hidden\">\n            {events.results.map(event => \u003CCard event={event}>\u003C\u002FCard>)}\n \u003C\u002Fdiv>\n \u003C\u002Fmain>\n\u003C\u002FLayout>\n",[804,1330,1328],{"__ignoreMap":978},[674,1332,1333,1334,896,1336,1338,1339,1342],{},"We have two tags for our events: ",[804,1335,895],{},[804,1337,899],{},". We want each tag to be displayed on its page. From our query, we filter events based on each tag, and display them on their respective pages. After we do the same for the ",[804,1340,1341],{},"techHangout"," event page, everything should work fine.",[689,1344,1346],{"id":1345},"conclusion","Conclusion",[674,1348,1349],{},"In this article, we demonstrated how to set up Prismic, and fetch data from Prismic using Astro and RESTful API. In the process, we created an event custom type to build the application. We also looked at how to write queries using the Prismic client object to help query the Prismic API. Lastly, we created a page that displays information about each event, and we filtered the events based on their tags to enable easy navigation.",[674,1351,1352,1353,745],{},"All code for this article can be found on ",[678,1354,37],{"href":1355,"rel":1356},"https:\u002F\u002Fgithub.com\u002Fam-miracle\u002Fevent-app",[682],{"title":978,"searchDepth":1358,"depth":1358,"links":1359},2,[1360,1361,1362,1363,1368,1371,1375,1379],{"id":691,"depth":1358,"text":692},{"id":706,"depth":1358,"text":707},{"id":729,"depth":1358,"text":730},{"id":748,"depth":1358,"text":749,"children":1364},[1365,1367],{"id":872,"depth":1366,"text":873},3,{"id":927,"depth":1366,"text":928},{"id":964,"depth":1358,"text":965,"children":1369},[1370],{"id":1022,"depth":1366,"text":1023},{"id":1085,"depth":1358,"text":1086,"children":1372},[1373,1374],{"id":1119,"depth":1366,"text":1120},{"id":1159,"depth":1366,"text":1160},{"id":1194,"depth":1358,"text":1195,"children":1376},[1377,1378],{"id":1259,"depth":1366,"text":1260},{"id":1308,"depth":1366,"text":1309},{"id":1345,"depth":1358,"text":1346},null,"Software Development","2022-10-12T00:00:00.000Z","Let's learn how to build an event manager app with Astro and Prismic headless CMS. This tutorial is easy to follow and will help you add to your portfolio.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic\u002Fhero.jpeg","A smartphone with an illuminated screen next to a laptop keyboard.",{},"\u002Fblog\u002Fbuilding-an-event-app-with-astro-prismic",{"title":665,"description":1383},"blog\u002Fbuilding-an-event-app-with-astro-prismic","eXQpO7zPdVzqKrfAsIiNOMboEmgEUSHdS52cDkF2Zbo",{"id":1394,"title":666,"body":1395,"description":978,"draft":1384,"extension":1385,"meta":1399,"navigation":32,"path":1400,"photo":1401,"photoAlt":1380,"seo":1402,"stem":1403,"__hash__":1404},"authors\u002Fauthors\u002Fjude-miracle.md",{"type":671,"value":1396,"toc":1397},[],{"title":978,"searchDepth":1358,"depth":1358,"links":1398},[],{},"\u002Fauthors\u002Fjude-miracle","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fjude-miracle.jpg",{"title":666,"description":978},"authors\u002Fjude-miracle","ulvEZJgJ78pdy0UIdxijTf2zwj7EA0CDHd9ajwUZ5Lc",{"left":1406,"top":1406,"width":1407,"height":1407,"rotate":1406,"vFlip":1384,"hFlip":1384,"body":1408},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]