👀 Tracking: Pull Site Text from Contentful + Figma Plugin

[Sriram Balachandran]

Overview:

Have the website use Contentful to get the text that should be displayed on each page (frontend component of Figma Plugin)

Design & Implementation:

Rather than creating a React Component to wrap text from contentful, I've written it as a function to give us more flexibility (so that the text can be used in js expressions etc. and not limited to jsx). This is prob not the prettiest way of doing it, but I think it's the one that minimizes how many API calls we need to make to Contentful API.

Rough outline of flow:

• Get a specific page's textEntries in the page's getStaticProps function.
• Pass this through props to the page
• Call a helper function that searches through the component's textEntries for a component with a specific id

Example:

import { GetStaticProps } from 'next';
import { getPageTextEntries, getTextEntry } from '../utils';

interface TestProps {
    textEntries: any[];
    
}

function Test(props: TestProps): JSX.Element {
    return (
        <div>
            {getTextEntry(props.textEntries, 'bitch', 'I failed')} // sorry 'bitch' was the test id i used ;-;
        </div>
    );
}

export const getStaticProps: GetStaticProps = async () => {
  const textEntries = await getPageTextEntries('Untitled', 'Page1');
  return {
    props: {textEntries},
  };
};


export default Test;

Checklist:

• Create functions to fetch and use textEntry data from Contentful
• Enable the plugin in the sunshine Figma project, and port over all of our hardcoded text to contentful-backed text

---

This is a 👀 Tracking Issue