# Proposal / UI Content

We need a system and process for managing UI content.

## Problem Statement
Inconsistencies with the Deal Room designs and language text based on what we have currently on the Raise Platform and what is on Figma.

Origin of this problem seems to be from requests for content / ui updates that bypassed the product team during the rush to .

## Solution
Any updates to content happens in Crowdin instead of Google docs or airtable - as it will provide both design and dev teams to integrate in their work easier.

To triage inconsistances and learn what version of content is deployed only takes viewing the "last updated" date on Crowdin or Github.

### [Airtable](https://airtable.com/shr9MERkE7Wy9oZ0u)
Manage content in Airtable, or Crowdin or simmilar translation service. It will act as a content manager, and provide tokens (e.g. `{{page.feature.organismName.title}}` or `{{page.feature.organismName.header.description}}`).

Dev Team would periodically export .csv files from airtable, convert it to .json and commit to github.

<iframe class="airtable-embed" src="https://airtable.com/embed/shr9MERkE7Wy9oZ0u?backgroundColor=red&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

### [Figma <-> Airtable Plugin](https://blog.crowdin.com/2020/02/03/crowdin-for-figma-design-and-prototype-for-multiple-markets/)

Design Team: Click of a button and you'll be able to synchronize Content Between Airtable and our Figma designs.


### i18next
Javascript library that can handle plurals, context, interpolation (replace tokens in crowdin export), text formating (uppercase, datetime conversion, lowercase)

- https://github.com/panter/vue-i18next

#### Demonstration

How would this look on the technical side?

##### Current
###### Vue Component (e.g. overview.vue)

...

.col.p-3
    h1.text-bold#useOfProceedsSection Use of Proceeds
    p.card-subtitle
        | We are aiming to raise
        span.mx-1.text-bold ${{ offerDetails.amountToRaise || 0 | getLocalizedAmount }}
        | which will be used as follows.

...

##### Using Language Tokens

###### JSON export from Crowdin (organism-dealroom-overview.json)

{
    "useOfProceeds": {
        "title": "Use of Proceeds",
        "subtitle": "We are aiming to raise {{amountToRaise, bold}} which will be used as follows."
    }
}

-- *here we can see html content within the translation text*

###### Vue Component (e.g. overview.vue) `updated`

...

.col.p-3
    h1.text-bold#useOfProceedsSection {{ $t("dealroom.useOfProceeds.title")}}
    p.card-subtitle
        | {{ $t("dealroom.useOfProceeds.subtitle", amountToRaise: (offerDetails.amountToRaise || 0 | getLocalizedAmount))}}

...

#### Interpolation
- https://www.i18next.com/translation-function/interpolation
- https://stackoverflow.com/questions/39836369/html-tags-in-i18next-translation-files-in-react/62563302#62563302

### Formatting
- https://www.i18next.com/translation-function/formatting