Account notes (bios) can now contain links. Character limit upped to 160

app/assets/javascripts/components/features/account/components/header.jsx

@@ -24,6 +24,8 @@ const Header = React.createClass({
       info = <span style={{ position: 'absolute', top: '10px', right: '10px', opacity: '0.7', display: 'inline-block', verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.4)', color: '#fff', textTransform: 'uppercase', fontSize: '11px', fontWeight: '500', padding: '4px', borderRadius: '4px' }}>Follows you</span>
     }
 
+    const content = { __html: account.get('note') };
+
     return (
       <div style={{ flex: '0 0 auto', background: '#2f3441', textAlign: 'center', backgroundImage: `url(${account.get('header')})`, backgroundSize: 'cover', position: 'relative' }}>
         <div style={{ background: 'rgba(47, 52, 65, 0.8)', padding: '20px 10px' }}>
@@ -36,7 +38,7 @@ const Header = React.createClass({
           </a>
 
           <span style={{ fontSize: '14px', fontWeight: '400', display: 'block', color: '#2b90d9', marginBottom: '10px' }}>@{account.get('acct')}</span>
-          <p style={{ color: '#616b86', fontSize: '14px' }}>{account.get('note')}</p>
+          <div style={{ color: '#616b86', fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
 
           {info}
         </div>

app/assets/stylesheets/components.scss

@@ -118,6 +118,29 @@
   }
 }
 
+.account__header__content {
+  word-wrap: break-word;
+  font-weight: 300;
+  overflow: hidden;
+
+  p {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
 .status__display-name, .status__relative-time, .detailed-status__display-name, .detailed-status__datetime, .account__display-name {
   text-decoration: none;
 }

app/lib/formatter.rb

@@ -8,7 +8,7 @@ class Formatter
   include ActionView::Helpers::SanitizeHelper
 
   def format(status)
-    return reformat(status) unless status.local?
+    return reformat(status.content) unless status.local?
 
     html = status.text
     html = encode(html)
@@ -20,8 +20,17 @@ class Formatter
     html.html_safe
   end
 
-  def reformat(status)
+  def reformat(html)
-    sanitize(status.content, tags: %w(a br p), attributes: %w(href rel))
+    sanitize(html, tags: %w(a br p), attributes: %w(href rel))
+  end
+
+  def simplified_format(account)
+    return reformat(account.note) unless account.local?
+
+    html = encode(account.note)
+    html = link_urls(html)
+
+    html.html_safe
   end
 
   private

app/models/account.rb

@@ -21,7 +21,7 @@ class Account < ApplicationRecord
 
   # Local user profile validations
   validates :display_name, length: { maximum: 30 }, if: 'local?'
-  validates :note, length: { maximum: 124 }, if: 'local?'
+  validates :note, length: { maximum: 160 }, if: 'local?'
 
   # Timelines
   has_many :stream_entries, inverse_of: :account, dependent: :destroy

app/views/accounts/_header.html.haml

@@ -12,7 +12,7 @@
     %small= "@#{@account.username}"
   .details
     .bio
-      %p= @account.note
+      .account__header__content= Formatter.instance.simplified_format(@account)
 
     .details-counters
       .counter{ class: active_nav_class(account_url(@account)) }

app/views/api/v1/accounts/show.rabl

@@ -1,7 +1,8 @@
 object @account
 
-attributes :id, :username, :acct, :display_name, :note
+attributes :id, :username, :acct, :display_name
 
+node(:note)            { |account| Formatter.instance.simplified_format(account) }
 node(:url)             { |account| TagManager.instance.url_for(account) }
 node(:avatar)          { |account| full_asset_url(account.avatar.url(:large, false)) }
 node(:header)          { |account| full_asset_url(account.header.url(:medium, false)) }