[{"data":1,"prerenderedAt":294},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-dropbox-paper-as-a-headless-cms-i18n-slugs":134,"language-blog-slug-en-dropbox-paper-as-a-headless-cms":141},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","dropbox-paper-as-a-headless-cms",{"locale":139,"value":140},"nl","dropbox-paper-als-headless-cms",{"page":142},{"slug":137,"i18nSlugs":143,"social":146,"title":147,"subtitle":79,"isArchived":151,"headerIllustration":152,"date":153,"authors":154,"introTitle":163,"items":164,"pivots":241,"relatedBlogPosts":252,"tags":253,"onMountedScript":157,"onUnmountedScript":157},[144,145],{"locale":136,"value":137},{"locale":139,"value":140},{"title":147,"description":148,"image":149},"Dropbox Paper as a headless CMS","We turned Dropbox Paper into a headless CMS and use it to publish our content elsewhere.",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548357635-imagepreview-1.png",false,null,"2019-01-25T01:00:00.000+01:00",[155],{"name":156,"lastName":157,"slug":158,"image":159},"Jasper","","jasper",{"url":160,"alt":152,"width":161,"height":162},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,"We turned Dropbox Paper into a headless CMS and use it to publish our content elsewhere. ",[165,169,180,184,191,194,198,203,206,210,216,219,223,230,233,237],{"__typename":166,"id":167,"title":157,"body":168},"TextSectionRecord","642328","\u003Cp>Why? Dropbox Paper is great for editing. We can write in markdown, add rich media, organise documents in folders, content is automatically versioned and others can give feedback in comments. This makes Paper a perfect CMS candidate for document collections like our company playbook. However the Paper UI isn’t ideal for reading, browsing and navigating and a folder with documents doesn’t feel like it’s \u003Cem>our playbook\u003C\u002Fem>. So this is what we came up with:\u003C\u002Fp>",{"__typename":170,"id":171,"image":172,"caption":177,"fullWidth":178,"captionPosition":179},"ImageRecord","642329",{"url":173,"alt":174,"width":175,"height":176},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548359071-dropbox-paper-as-headless-cms-diagram.png","Documents on Dropbox Paper and code on GitHub build and deployed to Netlify",1686,808,"Documents on Dropbox Paper and code on GitHub build and deployed to Netlify ",true,"bottom",{"__typename":166,"id":181,"title":182,"body":183},"642330","Organise and edit content on Dropbox Paper","\u003Cp>\u003Cspan>We start our project content-first. Through the familiar Dropbox Paper UI (\u003C\u002Fspan>\u003Ca href=\"\u002F\">dropbox.paper.com\u003C\u002Fa>\u003Cspan>) we write our content in Paper documents and organise them in folders:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":185,"image":186,"caption":188,"fullWidth":151,"captionPosition":179},"642331",{"url":187,"alt":188,"width":189,"height":190},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548358259-dropbox-paper-folders-and-document.jpg","Folders and document in edit mode on Dropbox Paper",2164,676,{"__typename":166,"id":192,"title":157,"body":193},"642332","\u003Cp>From the URL of our root folder (\u003Ccode>https:\u002F\u002Fpaper.dropbox.com\u002Ffolder\u002Fshow\u002FPlaybook-e.1g...Mxe\u003C\u002Fcode>), we extract its \u003Ccode>DIRECTORY_ID\u003C\u002Fcode> (in our case \u003Ccode>e.1g...Mxe\u003C\u002Fcode>), so we can access it programmatically through the API.\u003C\u002Fp>",{"__typename":166,"id":195,"title":196,"body":197},"642340","Gather content through the Paper API","\u003Cp>We use the \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper\">Dropbox Paper API\u003C\u002Fa> to retrieve the folders, documents and their metadata:\u003C\u002Fp>\n\u003Col>\n\u003Cli>We start by \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper-docs-list\">listing all documents\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper-docs-get_folder_info\">getting all folders\u003C\u002Fa> within our project root folder, filtering by our \u003Ccode>DIRECTORY_ID\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>We then \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fpaper-api-alpha#paper-docs-get_metadata\">get the meta data\u003C\u002Fa> of each document to filter out “deleted” documents and gather useful meta data like “date last updated”.\u003C\u002Fli>\n\u003Cli>Finally we \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper-docs-download\">download the contents\u003C\u002Fa> of each document as markdown.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>We write the data from the API into a folder structure, with a markdown file for each document containing the content plus the meta data as Front Matter (data in YAML format in between triple dashed lines) at the top. For example a document written to \u003Ccode>playbook\u002Fvoorhoede-events\u002Fmeetups.md\u003C\u002Fcode> would look like:\u003C\u002Fp>",{"__typename":199,"id":200,"language":201,"body":202},"CodeBlockRecord","642341","markdown","---\ndoc_id: \"rzWK0vA059CSQcQdmKydy\"\nlast_updated_date: \"2019-01-08T15:24:33Z\"\n---\n\n# Meetups\n\nWe love sharing our learnings and experiences with others ...",{"__typename":166,"id":204,"title":157,"body":205},"642342","\u003Cp>The full \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Fplaybook\u002Fblob\u002Fmaster\u002Fsrc\u002Ffetch-papers.js\">source of the Paper API integration is on GitHub\u003C\u002Fa>.\u003C\u002Fp>",{"__typename":166,"id":207,"title":208,"body":209},"642343","Build and deploy as a static site","\u003Cp>With our content from Dropbox Paper written to our filesystem we can do with it whatever we like. Markdown files with Front Matter are a popular input format for static site generators. We’re already using \u003Ca href=\"https:\u002F\u002Fvuepress.vuejs.org\u002F\">VuePress\u003C\u002Fa>, so we’re using this to publish our documents as a static site. The code of our project, including the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Fplaybook\u002Ftree\u002Fmaster\u002Fdocs\u002F.vuepress\">VuePress setup\u003C\u002Fa> and Paper API integration, are on GitHub. We’re using Netlify to build and deploy a new version of our site on every code change. And this is the result:\u003C\u002Fp>",{"__typename":170,"id":211,"image":212,"caption":214,"fullWidth":151,"captionPosition":179},"642344",{"url":213,"alt":214,"width":189,"height":215},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548359153-playbook-cover-and-content-page.jpg","Playbook site with home and content page side-by-side",652,{"__typename":166,"id":217,"title":157,"body":218},"642345","\u003Cp>You can view a \u003Ca href=\"https:\u002F\u002Fplaybook-demo.netlify.com\u002F\">simplified live demo version of our Playbook\u003C\u002Fa>.\u003C\u002Fp>",{"__typename":166,"id":220,"title":221,"body":222},"642346","\u002Fpublish from Slack","\u003Cp>While our site is automatically updated on \u003Cem>code\u003C\u002Fem> changes, it doesn’t update on \u003Cem>content\u003C\u002Fem> changes. 😕 Unfortunately Paper has no means to notify us programmatically when content changes. This means we can’t automatically trigger a new publication. So as developers, we came up with something else close to home: a custom ‘slash command’ to trigger a publication directly from Slack using \u003Ccode>\u002Fplaybook\u003C\u002Fcode>:\u003C\u002Fp>",{"__typename":170,"id":224,"image":225,"caption":227,"fullWidth":151,"captionPosition":179},"642347",{"url":226,"alt":227,"width":228,"height":229},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548359205-publish-playbook-from-slack.jpg","Publish Playbook using Slack slash command",1600,389,{"__typename":166,"id":231,"title":157,"body":232},"642348","\u003Cp>And that’s it, we’re using Paper as a CMS with a mechanism to publish our content in a custom site, with the look-and-feel we want.\u003C\u002Fp>",{"__typename":166,"id":234,"title":235,"body":236},"642349","Paper API limitations and drawbacks","\u003Cp>During our development we ran into a few limitations of the Paper API:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>The Paper API only returns documents opened at least once by the account the API token belongs to.\u003C\u002Fli>\n\u003Cli>Paper’s RPC API is very hard to use compared to all the friendly REST and GraphQL APIs out there today.\u003C\u002Fli>\n\u003Cli>The Paper API returns documents in a “last accessed\u002Fmodified\u002Fcreated” order which isn’t very useful to us.\u003C\u002Fli>\n\u003Cli>Paper has no \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWebhook\">webhooks\u003C\u002Fa> or other mechanism to trigger a new publication on document changes.\u003C\u002Fli>\n\u003Cli>Paper has no “team token” to use for authentication. We ended up creating a Dropbox user (~€300\u002Fyear) just to have a Playbook token.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":166,"id":238,"title":239,"body":240},"642350","Our verdict","\u003Cp>Dropbox Paper is very suitable as a \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fheadless-cms\u002F\" title=\"headless CMS\">headless CMS\u003C\u002Fa> for document collections. It has great authoring tools. As long as you can work with its limitations, you should keep it in mind for the next time you need a quick CMS.\u003C\u002Fp>\n\u003Cp>Useful links:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Fplaybook\">Project source code\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca href=\"\u002F\">Dropbox Paper\u003C\u002Fa> and the \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper\">Dropbox Paper API\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.staticgen.com\u002F\">Static Site Generators\u003C\u002Fa> and the \u003Ca href=\"https:\u002F\u002Fjamstack.org\u002F\">JAM Stack\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>",[242],{"title":243,"body":244,"links":245,"mailchimpValue":157,"mailchimpName":157,"mailchimpId":157,"formType":157,"contactPerson":152},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[246],{"__typename":247,"id":248,"title":249,"link":250},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":251},"jobs",[],[254],{"id":255,"title":256,"slug":257,"blogPosts":258},"WTPJX79URE-O5lpWLJeEHg","Headless CMS","headless-cms",[259,276,283],{"slug":260,"title":261,"date":262,"authors":263},"figma-as-a-cms-where-design-and-development-collide","Figma as a CMS; where design and development collide","2022-02-10T01:00:00.000+01:00",[264,270],{"name":265,"image":266},"Bas ",{"url":267,"alt":152,"width":268,"height":269},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535728-bas-g.jpg",2394,3192,{"name":271,"image":272},"Friso",{"url":273,"alt":152,"width":274,"height":275},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"slug":277,"title":278,"date":279,"authors":280},"enriching-rich-text-with-inline-components-datocms-react","Enriching rich text with inline components (DatoCMS + React)","2021-11-19T01:00:00.000+01:00",[281],{"name":156,"image":282},{"url":160,"alt":152,"width":161,"height":162},{"slug":284,"title":285,"date":286,"authors":287},"scripted-cms-migrations","Safe and convenient CMS migrations with scripted migrations and sandbox environments","2022-11-25T01:00:00.000+01:00",[288],{"name":289,"image":290},"Frank",{"url":291,"alt":152,"width":292,"height":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534610-frank.jpg",2049,2732,1776256144243]