--- title: Dropbox Paper als een headless CMS description: >- We veranderden Dropbox Paper in een headless CMS en gebruikte het om onze content op andere plekken te publiceren. Ontdek hoe in ons blog. language: Dutch url: 'https://www.voorhoede.nl/nl/blog/dropbox-paper-als-headless-cms/' --- Blog # Dropbox Paper als een headless CMS Door [Jasper](/nl/team/jasper.md) 25 January 2019 ## Categorieën * [Headless CMS](/nl/blog/tag/headless-cms.md) - [Content organiseren en bewerken op Dropbox Paper](#content-organiseren-en-bewerken-op-dropbox-paper) - [Content verzamelen via de Paper API](#content-verzamelen-via-de-paper-api) - [Bouwen en implementeren als een statische site](#bouwen-en-implementeren-als-een-statische-site) - [/publish vanuit Slack](#-publish-vanuit-slack) - [Paper API limitations and drawbacks](#paper-api-limitations-and-drawbacks) - [Ons oordeel](#ons-oordeel) We hebben Dropbox Paper omgebouwd tot een headless CMS and en gebruiken het om onze content op andere plekken te publiceren. 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: ![Documenten op Dropbox Paper en code op GitHub bouwen en implementeren naar Netlify](https://www.datocms-assets.com/6524/1548359071-dropbox-paper-as-headless-cms-diagram.png) Documenten op Dropbox Paper en code op GitHub bouwen en implementeren naar Netlify ## Content organiseren en bewerken op Dropbox Paper 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: ![Mappen en document in bewerkingsmodus op Dropbox Paper](https://www.datocms-assets.com/6524/1548358259-dropbox-paper-folders-and-document.jpg) Mappen en document in bewerkingsmodus op Dropbox Paper Vanuit de URL van onze hoofdmap (`https://paper.dropbox.com/folder/show/Playbook-e.1g...Mxe`), halen we de `DIRECTORY_ID` op (in ons geval e.1g...Mxe), zodat we er programmatisch toegang toe kunnen krijgen via de API. ## Content verzamelen via de Paper API We gebruiken de [Dropbox Paper API](https://www.dropbox.com/developers/documentation/http/documentation#paper) om de mappen, documenten en hun metadata op te halen: 1. We beginnen met het [opsommen van alle documenten](https://www.dropbox.com/developers/documentation/http/documentation#paper-docs-list) en het [verkrijgen van alle mappen](https://www.dropbox.com/developers/documentation/http/documentation#paper-docs-get_folder_info) binnen onze projecthoofdmap, gefilterd op onze `DIRECTORY_ID`. 2. Vervolgens halen we de [metadata](https://www.dropbox.com/developers/paper-api-alpha#paper-docs-get_metadata) van elk document op om "verwijderde" documenten eruit te filteren en nuttige metadata zoals "datum laatst bijgewerkt" te verzamelen. 3. Tenslotte [downloaden we de inhoud](https://www.dropbox.com/developers/documentation/http/documentation#paper-docs-download) van elk document als markdown. 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 `playbook/voorhoede-events/meetups.md` zou er als volgt uitzien: ``` --- doc_id: "rzWK0vA059CSQcQdmKydy" last_updated_date: "2019-01-08T15:24:33Z" --- # Meetups We love sharing our learnings and experiences with others ... ``` De volledige [bron van de Paper API-integratie](https://github.com/voorhoede/playbook/blob/master/src/fetch-papers.js) staat op GitHub. ## Bouwen en implementeren als een statische site 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 [VuePress](https://vuepress.vuejs.org/), dus gebruiken we dit om onze documenten als een statische site te publiceren. De code van ons project, inclusief de [VuePress setup](https://github.com/voorhoede/playbook/tree/master/docs/.vuepress) 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: ![Personeelshandboek website: homepagina en contentpagina naast elkaar](https://www.datocms-assets.com/6524/1548359153-playbook-cover-and-content-page.jpg) Personeelshandboek website: homepagina en contentpagina naast elkaar Je kunt een vereenvoudigde [live demo-versie van ons Playbook bekijken](https://playbook-demo.netlify.com/). ## /publish vanuit Slack 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 `/playbook`: ![Publiceer Playbook met behulp van Slack slash-commando](https://www.datocms-assets.com/6524/1548359205-publish-playbook-from-slack.jpg) Publiceer Playbook met behulp van Slack slash-commando 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. ## Paper API limitations and drawbacks Tijdens onze ontwikkeling liepen we tegen een paar beperkingen van de Paper API aan: * De Paper API retourneert alleen documenten die minstens één keer zijn geopend door het account waartoe de API-token behoort. * Paper's RPC API is erg moeilijk te gebruiken vergeleken met alle vriendelijke REST- en GraphQL-API's die er vandaag de dag zijn. * De Paper API retourneert documenten in een "laatst geopend/bewerkt/aangemaakt" volgorde die voor ons niet erg nuttig is. * Paper heeft geen webhooks of ander mechanisme om een nieuwe publicatie te activeren bij documentwijzigingen. * Paper heeft geen "team token" voor authenticatie. We hebben uiteindelijk een Dropbox-gebruiker aangemaakt (\~€300/jaar) alleen om een Playbook-token te hebben. ## Ons oordeel Dropbox Paper is zeer geschikt als een [headless CMS ](https://www.voorhoede.nl/nl/services/headless-cms.md)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. Handige links: * [Project source code](https://github.com/voorhoede/playbook) * [Dropbox Paper](/) en de [Dropbox Paper API](https://www.dropbox.com/developers/documentation/http/documentation#paper) * [Static Site Generators](https://www.staticgen.com/) en de [JAM Stack](https://jamstack.org/) ## Gerelateerde blog posts * ### [Figma as a CMS; where design and development collide](/nl/blog/figma-as-a-cms-where-design-and-development-collide.md) 10 Feb 2022 Door Bas , Friso * ### [Headless CMS'en gaan de strijd aan: Strapi vs DatoCMS](/nl/blog/headless-cmsen-strapi-vs-datocms.md) 4 Aug 2023 Door Remco * 19 Nov 2021 Door Jasper [← Alle blogposts](/nl/blog.md) ## Ook verliefd op het web? Technologie en gebruikservaring. Snel, toegankelijk en een plezier om te gebruiken. Maar ook een plezier om te ontwikkelen. Geldt dit ook voor jou? [Kom ons versterken](/nl/jobs.md) [Terug naar boven](#top)