[{"data":1,"prerenderedAt":303},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-dropbox-paper-als-headless-cms-i18n-slugs":132,"language-blog-slug-nl-dropbox-paper-als-headless-cms":139},{"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},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__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},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"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",null,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":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","dropbox-paper-as-a-headless-cms",{"locale":137,"value":138},"nl","dropbox-paper-als-headless-cms",{"page":140},{"slug":138,"i18nSlugs":141,"social":144,"title":145,"subtitle":79,"isArchived":149,"headerIllustration":104,"date":150,"authors":151,"introTitle":160,"items":161,"pivots":237,"relatedBlogPosts":248,"tags":277,"onMountedScript":154,"onUnmountedScript":154},[142,143],{"locale":134,"value":135},{"locale":137,"value":138},{"title":145,"description":146,"image":147},"Dropbox Paper als een headless CMS","We veranderden Dropbox Paper in een headless CMS en gebruikte het om onze content op andere plekken te publiceren. Ontdek hoe in ons blog.",{"url":148},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548357635-imagepreview-1.png",false,"2019-01-25T01:00:00.000+01:00",[152],{"name":153,"lastName":154,"slug":155,"image":156},"Jasper","","jasper",{"url":157,"alt":104,"width":158,"height":159},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,"We hebben Dropbox Paper omgebouwd tot een headless CMS and en gebruiken het om onze content op andere plekken te publiceren.",[162,166,176,180,187,190,194,199,202,206,212,215,219,226,229,233],{"__typename":163,"id":164,"title":154,"body":165},"TextSectionRecord","X3bVyfSkS_u-p99qMl9Qkw","\u003Cp>Waarom? Dropbox Paper is geweldig om content in te bewerken. We kunnen schrijven in markdown, media toevoegen, documenten in mappen organiseren, inhoud wordt automatisch geversioneerd en anderen kunnen feedback geven in opmerkingen. Dit maakt Paper een perfecte CMS-kandidaat voor documentcollecties, zoals ons personeelshandboek. Echter, de Paper-interface is niet ideaal voor lezen, bladeren en navigeren, en een map met documenten voelt niet aan als ons handboek. Dus dit is wat we hebben bedacht:\u003C\u002Fp>",{"__typename":167,"id":168,"image":169,"caption":171,"fullWidth":174,"captionPosition":175},"ImageRecord","chlhjWWvRGSG6_66P5m5JQ",{"url":170,"alt":171,"width":172,"height":173},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548359071-dropbox-paper-as-headless-cms-diagram.png","Documenten op Dropbox Paper en code op GitHub bouwen en implementeren naar Netlify",1686,808,true,"bottom",{"__typename":163,"id":177,"title":178,"body":179},"WHP8DHg5SdSqTa10F5C8Mg","Content organiseren en bewerken op Dropbox Paper","\u003Cp>\u003Cspan>We beginnen ons project content-first. Via de vertrouwde Dropbox Paper-interface (dropbox.paper.com) schrijven we onze inhoud in Paper-documenten en organiseren we deze in mappen:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":181,"image":182,"caption":184,"fullWidth":149,"captionPosition":175},"F7WcXJvsRbyif6g7LY3Afg",{"url":183,"alt":184,"width":185,"height":186},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548358259-dropbox-paper-folders-and-document.jpg","Mappen en document in bewerkingsmodus op Dropbox Paper",2164,676,{"__typename":163,"id":188,"title":154,"body":189},"cFRZzpt0Q36thgPJkqK4QQ","\u003Cp>Vanuit de URL van onze hoofdmap (\u003Ccode>https:\u002F\u002Fpaper.dropbox.com\u002Ffolder\u002Fshow\u002FPlaybook-e.1g...Mxe\u003C\u002Fcode>), halen we de \u003Ccode>DIRECTORY_ID\u003C\u002Fcode> op (in ons geval e.1g...Mxe), zodat we er programmatisch toegang toe kunnen krijgen via de API.\u003C\u002Fp>",{"__typename":163,"id":191,"title":192,"body":193},"W6XGqqtcTgakzFzCGbGGwA","Content verzamelen via de Paper API","\u003Cp>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">We gebruiken de \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper\" style=\"letter-spacing: 0px;\">Dropbox Paper API\u003C\u002Fa>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\"> om de mappen, documenten en hun metadata op te halen:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Col>\n  \u003Cli>We beginnen met het \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper-docs-list\">opsommen van alle documenten\u003C\u002Fa> en het \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper-docs-get_folder_info\">verkrijgen van alle mappen\u003C\u002Fa> binnen onze projecthoofdmap, gefilterd op onze \u003Ccode>DIRECTORY_ID\u003C\u002Fcode>.\u003C\u002Fli>\n  \u003Cli>Vervolgens halen we de \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fpaper-api-alpha#paper-docs-get_metadata\">metadata\u003C\u002Fa> van elk document op om \"verwijderde\" documenten eruit te filteren en nuttige metadata zoals \"datum laatst bijgewerkt\" te verzamelen.\u003C\u002Fli>\n  \u003Cli>Tenslotte \u003Ca href=\"https:\u002F\u002Fwww.dropbox.com\u002Fdevelopers\u002Fdocumentation\u002Fhttp\u002Fdocumentation#paper-docs-download\">downloaden we de inhoud\u003C\u002Fa> van elk document als markdown.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>We schrijven de gegevens van de API in een mappenstructuur, met een markdown-bestand voor elk document met de inhoud plus de metadata als Front Matter (gegevens in YAML-formaat tussen drie streepjes) bovenaan. Bijvoorbeeld een document geschreven naar \u003Ccode>playbook\u002Fvoorhoede-events\u002Fmeetups.md\u003C\u002Fcode> zou er als volgt uitzien:\u003C\u002Fp>",{"__typename":195,"id":196,"language":197,"body":198},"CodeBlockRecord","GBBP8wU3Rl-ThMatET6k4Q","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":163,"id":200,"title":154,"body":201},"FTsW5_D_TzquM75rnRiIHg","\u003Cp>De volledige \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Fplaybook\u002Fblob\u002Fmaster\u002Fsrc\u002Ffetch-papers.js\">bron van de Paper API-integratie\u003C\u002Fa> staat op GitHub.\u003C\u002Fp>",{"__typename":163,"id":203,"title":204,"body":205},"LxFTeAWxQ7-D-bZuvTdfZA","Bouwen en implementeren als een statische site","\u003Cp>Met onze inhoud van Dropbox Paper geschreven naar ons bestandssysteem kunnen we ermee doen wat we willen. Markdown-bestanden met Front Matter zijn een populair invoerformaat voor statische site-generatoren. We gebruiken al \u003Ca href=\"https:\u002F\u002Fvuepress.vuejs.org\u002F\">VuePress\u003C\u002Fa>, dus gebruiken we dit om onze documenten als een statische site te publiceren. De code van ons project, inclusief de \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Fplaybook\u002Ftree\u002Fmaster\u002Fdocs\u002F.vuepress\">VuePress setup\u003C\u002Fa> en Paper API-integratie, staan op GitHub. We gebruiken Netlify om een nieuwe versie van onze site te bouwen en te implementeren bij elke codewijziging. En dit is het resultaat:\u003C\u002Fp>",{"__typename":167,"id":207,"image":208,"caption":210,"fullWidth":149,"captionPosition":175},"MmmwE_l8Q-yT8wyqrBDzrQ",{"url":209,"alt":210,"width":185,"height":211},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548359153-playbook-cover-and-content-page.jpg","Personeelshandboek website: homepagina en contentpagina naast elkaar",652,{"__typename":163,"id":213,"title":154,"body":214},"XVZTsXfDRw2rTpcA3ZLccA","\u003Cp>Je kunt een vereenvoudigde \u003Ca href=\"https:\u002F\u002Fplaybook-demo.netlify.com\u002F\">live demo-versie van ons Playbook bekijken\u003C\u002Fa>.\u003C\u002Fp>",{"__typename":163,"id":216,"title":217,"body":218},"NR1zzVj7SDyTQa1predyKg","\u002Fpublish vanuit Slack","\u003Cp>Hoewel onze site automatisch wordt bijgewerkt bij codewijzigingen, wordt deze niet bijgewerkt bij inhoudswijzigingen. 😕 Helaas heeft Paper geen middel om ons programmatisch te informeren wanneer inhoud verandert. Dit betekent dat we geen nieuwe publicatie automatisch kunnen activeren. Dus als ontwikkelaars bedachten we iets anders dicht bij huis: een aangepaste 'slash-commando' om een publicatie direct vanuit Slack te activeren met \u003Ccode>\u002Fplaybook\u003C\u002Fcode>:\u003C\u002Fp>",{"__typename":167,"id":220,"image":221,"caption":223,"fullWidth":149,"captionPosition":175},"GORUdLSbSPObm5uaLLSAoA",{"url":222,"alt":223,"width":224,"height":225},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1548359205-publish-playbook-from-slack.jpg","Publiceer Playbook met behulp van Slack slash-commando",1600,389,{"__typename":163,"id":227,"title":154,"body":228},"XPLYOmg1Q_iXN3GvACxuzg","\u003Cp>En dat is het, we gebruiken Paper als een CMS met een mechanisme om onze inhoud te publiceren in een aangepaste site, met de look-and-feel die we willen.\u003C\u002Fp>",{"__typename":163,"id":230,"title":231,"body":232},"cqwjTB4XSn6HHn-xDIN5Tw","Paper API limitations and drawbacks","\u003Cp>Tijdens onze ontwikkeling liepen we tegen een paar beperkingen van de Paper API aan:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>De Paper API retourneert alleen documenten die minstens één keer zijn geopend door het account waartoe de API-token behoort.\u003C\u002Fli>\n  \u003Cli>Paper's RPC API is erg moeilijk te gebruiken vergeleken met alle vriendelijke REST- en GraphQL-API's die er vandaag de dag zijn.\u003C\u002Fli>\n  \u003Cli>De Paper API retourneert documenten in een \"laatst geopend\u002Fbewerkt\u002Faangemaakt\" volgorde die voor ons niet erg nuttig is.\u003C\u002Fli>\n  \u003Cli>Paper heeft geen webhooks of ander mechanisme om een nieuwe publicatie te activeren bij documentwijzigingen.\u003C\u002Fli>\n  \u003Cli>Paper heeft geen \"team token\" voor authenticatie. We hebben uiteindelijk een Dropbox-gebruiker aangemaakt (~€300\u002Fjaar) alleen om een Playbook-token te hebben.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":163,"id":234,"title":235,"body":236},"NmAXrTpPTvCvpjC11_lj-Q","Ons oordeel","\u003Cp>Dropbox Paper is zeer geschikt als een \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fheadless-cms\u002F\">headless CMS \u003C\u002Fa>voor documentcollecties. Het heeft geweldige authoring-tools. Zolang je met de beperkingen kunt werken, moet je het zeker in gedachten houden voor de volgende keer dat je een snel CMS nodig hebt.\u003C\u002Fp>\n\u003Cp>Handige 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> en de \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> en de \u003Ca href=\"https:\u002F\u002Fjamstack.org\u002F\">JAM Stack\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>",[238],{"title":239,"body":240,"links":241,"mailchimpValue":154,"mailchimpName":154,"mailchimpId":154,"formType":154,"contactPerson":104},"Ook verliefd op het web?","\u003Cp>Technologie en gebruikservaring. Snel, toegankelijk en een plezier om te gebruiken. Maar ook een plezier om te ontwikkelen. Geldt dit ook voor jou?\u003C\u002Fp>\n",[242],{"__typename":243,"id":244,"title":245,"link":246},"InternalLinkRecord","163140993","Kom ons versterken",{"__typename":44,"slug":247},"jobs",[249,266],{"slug":250,"title":251,"date":252,"authors":253},"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",[254,260],{"name":255,"image":256},"Bas ",{"url":257,"alt":104,"width":258,"height":259},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535728-bas-g.jpg",2394,3192,{"name":261,"image":262},"Friso",{"url":263,"alt":104,"width":264,"height":265},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"slug":267,"title":268,"date":269,"authors":270},"headless-cmsen-strapi-vs-datocms","Headless CMS'en gaan de strijd aan: Strapi vs DatoCMS","2023-08-04T02:00:00.000+02:00",[271],{"name":272,"image":273},"Remco",{"url":274,"alt":104,"width":275,"height":276},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535671-remco.jpg",1990,2653,[278],{"id":279,"title":280,"slug":281,"blogPosts":282},"WTPJX79URE-O5lpWLJeEHg","Headless CMS","headless-cms",[283,289,294],{"slug":250,"title":251,"date":252,"authors":284},[285,287],{"name":255,"image":286},{"url":257,"alt":104,"width":258,"height":259},{"name":261,"image":288},{"url":263,"alt":104,"width":264,"height":265},{"slug":104,"title":154,"date":290,"authors":291},"2021-11-19T01:00:00.000+01:00",[292],{"name":153,"image":293},{"url":157,"alt":104,"width":158,"height":159},{"slug":104,"title":154,"date":295,"authors":296},"2022-11-25T01:00:00.000+01:00",[297],{"name":298,"image":299},"Frank",{"url":300,"alt":104,"width":301,"height":302},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534610-frank.jpg",2049,2732,1776256156474]