The parameter include: 2 ensures that not only the global entry is resolved but also the component and single copy entries (two levels of links down) are returned in this call. In copyHandling.js, the getEntries method from the Contentful client is used to fetch the global entry via the Content Delivery API. Once the async getAllCopy method returns the copy successfully, the state is updated and in the render method the Header component receives the copy for this component as a prop. In App.js, the global copy is stored in the state and the fetching of the copy is triggered in the componentDidMount method. We need three files: the main file App.js, a file containing the copy handling with Contentful ( copyHandling.js) and an example component using the microcopy ( Header.js). This node modules provides easy access to the Contentful Delivery API from which we can pull our content into our React application. Then I install contentful with yarn add contentful. In this example I initialise a new React application by using create-react-app. Step 3: Fetch the microcopy in the React app Then I add two Single Copy entries with the ids HEADLINE and SUB_HEADLINE to this component. Content Types in Contentful Step 2: Add contentĪs an example, I now create one Global Copy entry with a Component Copy entry called Header. And then the content type Single Copy includes fields for the copy id and the copy text. The content type Component Copy holds the name of the component and several Single Copies. As React separates the UI in components, we can cluster the microcopy based on these components and keep a good overview of the stored text.Īfter setting up a new space in Contentful, I create the content type Global Copy, which references several Component Copies. But this list of translations keys and actual text can become hard to maintain as more and more elements get added. The easiest way for storing our copy would be a key and a value pair. Step 1: Set up the content model in Contentful In this example I will use React and Contentful. Solution: A frontend application pulls the microcopy from a headless CMS. Problem: How can we manage microcopy outside of the code, in a way that someone without developer access can change the text easily? That means simple changes of just a few syllables in a text requires communication between the writer and a developer - and in worst case also prioritisation in the form of dev tickets in JIRA or Trello. It’s the colleague from the public relations, business, product or design department - someone without developer knowledge or access to conduct code changes. It’s the headline, the error messages or the small hints in a contact form.īut the developer who codes the website is (usually) not the person skilled in writing microcopy. Microcopy - these small bits of text that bring a website alive and can make the browsing user either click more or leave the page. Let’s get rid of dev tickets with text changes ✍️Įvery website has it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |