Add bio fields (#6645)

* Add bio fields

- Fix #3211
- Fix #232
- Fix #121

* Display bio fields in web UI

* Fix output of links and missing fields

* Federate bio fields over ActivityPub as PropertyValue

* Improve how the fields are stored, add to Edit profile form

* Add rel=me to links in fields

Fix #121

app/javascript/mastodon/actions/importer/normalizer.js

@@ -10,6 +10,14 @@ export function normalizeAccount(account) {
   account.display_name_html = emojify(escapeTextContentForBrowser(displayName));
   account.note_emojified = emojify(account.note);
 
+  if (account.fields) {
+    account.fields = account.fields.map(pair => ({
+      ...pair,
+      name_emojified: emojify(escapeTextContentForBrowser(pair.name)),
+      value_emojified: emojify(pair.value),
+    }));
+  }
+
   if (account.moved) {
     account.moved = account.moved.id;
   }

app/javascript/mastodon/features/account/components/header.js

@@ -130,6 +130,7 @@ export default class Header extends ImmutablePureComponent {
 
     const content         = { __html: account.get('note_emojified') };
     const displayNameHtml = { __html: account.get('display_name_html') };
+    const fields          = account.get('fields');
 
     return (
       <div className={classNames('account__header', { inactive: !!account.get('moved') })} style={{ backgroundImage: `url(${account.get('header')})` }}>
@@ -140,6 +141,19 @@ export default class Header extends ImmutablePureComponent {
           <span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span>
           <div className='account__header__content' dangerouslySetInnerHTML={content} />
 
+          {fields.size > 0 && (
+            <table className='account__header__fields'>
+              <tbody>
+                {fields.map((pair, i) => (
+                  <tr key={i}>
+                    <th dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} />
+                    <td dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+
           {info}
           {mutingInfo}
           {actionBtn}

app/javascript/styles/mastodon/accounts.scss

@@ -563,3 +563,57 @@
     border-color: rgba(lighten($error-red, 12%), 0.5);
   }
 }
+
+.account__header__fields {
+  border-collapse: collapse;
+  padding: 0;
+  margin: 15px -15px -15px;
+  border: 0 none;
+  border-top: 1px solid lighten($ui-base-color, 4%);
+  border-bottom: 1px solid lighten($ui-base-color, 4%);
+
+  th,
+  td {
+    padding: 15px;
+    padding-left: 15px;
+    border: 0 none;
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    vertical-align: middle;
+  }
+
+  th {
+    padding-left: 15px;
+    font-weight: 500;
+    text-align: center;
+    width: 94px;
+    color: $ui-secondary-color;
+    background: rgba(darken($ui-base-color, 8%), 0.5);
+  }
+
+  td {
+    color: $ui-primary-color;
+    text-align: center;
+    width: 100%;
+    padding-left: 0;
+  }
+
+  a {
+    color: $ui-highlight-color;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  tr {
+    &:last-child {
+      th,
+      td {
+        border-bottom: 0;
+      }
+    }
+  }
+}

app/javascript/styles/mastodon/components.scss

@@ -5176,3 +5176,40 @@ noscript {
     background: lighten($ui-highlight-color, 7%);
   }
 }
+
+.account__header .account__header__fields {
+  font-size: 14px;
+  line-height: 20px;
+  overflow: hidden;
+  border-collapse: collapse;
+  margin: 20px -10px -20px;
+  border-bottom: 0;
+
+  tr {
+    border-top: 1px solid lighten($ui-base-color, 8%);
+    text-align: center;
+  }
+
+  th,
+  td {
+    padding: 14px 20px;
+    vertical-align: middle;
+    max-height: 40px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  th {
+    color: $ui-primary-color;
+    background: darken($ui-base-color, 4%);
+    max-width: 120px;
+    font-weight: 500;
+  }
+
+  td {
+    flex: auto;
+    color: $primary-text-color;
+    background: $ui-base-color;
+  }
+}

app/javascript/styles/mastodon/forms.scss

@@ -15,6 +15,18 @@ code {
     overflow: hidden;
   }
 
+  .row {
+    display: flex;
+    margin: 0 -5px;
+
+    .input {
+      box-sizing: border-box;
+      flex: 1 1 auto;
+      width: 50%;
+      padding: 0 5px;
+    }
+  }
+
   span.hint {
     display: block;
     color: $ui-primary-color;