Backend YAML Processing + Profile Metadata on Static Pages

app/javascript/styles/accounts.scss

@@ -1,19 +1,23 @@
 .card {
+  display: flex;
   background: $ui-base-color;
-  background-size: cover;
-  background-position: center;
-  padding: 60px 0;
-  padding-bottom: 0;
   border-radius: 4px 4px 0 0;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   overflow: hidden;
-  position: relative;
 
   @media screen and (max-width: 700px) {
     border-radius: 0;
     box-shadow: none;
   }
 
+  .details {
+    position: relative;
+    padding: 60px 0 0;
+    background-size: cover;
+    background-position: center;
+    text-align: center;
+    flex: auto;
+
     &::after {
       background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
       display: block;
@@ -25,6 +29,7 @@
       height: 100%;
       z-index: 1;
     }
+  }
 
   .name {
     display: block;
@@ -66,59 +71,38 @@
     z-index: 2;
   }
 
-  .details {
-    display: flex;
-    margin-top: 30px;
-    position: relative;
-    z-index: 2;
-    flex-direction: row;
-  }
-
   .details-counters {
-    display: flex;
+    position: relative;
+    display: inline-flex;
     flex-direction: row;
-    order: 0;
+    margin: 15px 0;
+    z-index: 2;
   }
 
   .counter {
     width: 80px;
     color: $ui-primary-color;
     padding: 5px 10px 0;
-    margin-bottom: 10px;
-    border-right: 1px solid $ui-primary-color;
     cursor: default;
     position: relative;
 
+    & + .counter {
+      border-left: 1px solid $ui-primary-color;
+    }
+
+    & > * {
+      opacity: .7;
+      transition: opacity .3s ease;
+    }
+
+    &.active > *, &:hover > * {
+      opacity: 1;
+    }
+
     a {
       display: block;
     }
 
-    &::after {
-      display: block;
-      content: "";
-      position: absolute;
-      bottom: -10px;
-      left: 0;
-      width: 100%;
-      border-bottom: 4px solid $ui-primary-color;
-      opacity: 0.5;
-      transition: all 0.8s ease;
-    }
-
-    &.active {
-      &::after {
-        border-bottom: 4px solid $ui-highlight-color;
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      &::after {
-        opacity: 1;
-        transition-duration: 0.2s;
-      }
-    }
-
     a {
       text-decoration: none;
       color: inherit;
@@ -140,30 +124,51 @@
   }
 
   .bio {
-    flex: 1;
+    position: relative;
     font-size: 14px;
     line-height: 18px;
+    margin: 15px 0;
     padding: 5px 10px;
     color: $ui-secondary-color;
-    order: 1;
+    z-index: 2;
   }
 
-  @media screen and (max-width: 480px) {
+  .metadata {
-    .details {
+    max-width: 40%;
+    background: $ui-base-color;
+    color: $primary-text-color;
+    text-align: left;
+    overflow-y: auto;
+    white-space: pre-wrap;
+
+    .metadata-item {
+      border-bottom: 1px $ui-primary-color solid;
+      padding: 15px 10px;
+      font-size: 18px;
+      line-height: 24px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      a {
+        color: $ui-highlight-color;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      b {
         display: block;
-    }
+        font-size: 12px;
+        line-height: 16px;
+        text-transform: uppercase;
+        color: $ui-primary-color;
 
-    .bio {
+        a {
-      text-align: center;
+          color: $ui-primary-color;
-      margin-bottom: 20px;
         }
-
-    .counter {
-      flex: 1 1 auto;
       }
-
-    .counter:last-child {
-      border-right: none;
     }
   }
 }

app/lib/frontmatter_handler.rb

@@ -0,0 +1,242 @@
+# frozen_string_literal: true
+
+require 'singleton'
+
+#  See also `app/javascript/features/account/util/bio_metadata.js`.
+
+class FrontmatterHandler
+  include Singleton
+
+  #  CONVENIENCE FUNCTIONS  #
+
+  def self.unirex(str)
+    Regexp.new str, false, 'um'
+  end
+  def self.rexstr(exp)
+    '(?:' + exp.source + ')'
+  end
+
+  #  CHARACTER CLASSES  #
+
+  DOCUMENT_START    = /^/
+  DOCUMENT_END      = /$/
+  ALLOWED_CHAR      =  #  c-printable` in the YAML 1.2 spec.
+    /[\t\n\r\u{20}-\u{7e}\u{85}\u{a0}-\u{d7ff}\u{e000}-\u{fffd}\u{10000}-\u{10ffff}]/u
+  WHITE_SPACE       = /[ \t]/
+  INDENTATION       = / */
+  LINE_BREAK        = /\r?\n|\r|<br\s*\/?>/
+  ESCAPE_CHAR       = /[0abt\tnvfre "\/\\N_LP]/
+  HEXADECIMAL_CHARS = /[0-9a-fA-F]/
+  INDICATOR         = /[-?:,\[\]{}&#*!|>'"%@`]/
+  FLOW_CHAR         = /[,\[\]{}]/
+
+  #  NEGATED CHARACTER CLASSES  #
+
+  NOT_WHITE_SPACE   = unirex '(?!' + rexstr(WHITE_SPACE) + ').'
+  NOT_LINE_BREAK    = unirex '(?!' + rexstr(LINE_BREAK) + ').'
+  NOT_INDICATOR     = unirex '(?!' + rexstr(INDICATOR) + ').'
+  NOT_FLOW_CHAR     = unirex '(?!' + rexstr(FLOW_CHAR) + ').'
+
+  #  BASIC CONSTRUCTS  #
+
+  ANY_WHITE_SPACE   = unirex rexstr(WHITE_SPACE) + '*'
+  ANY_ALLOWED_CHARS = unirex rexstr(ALLOWED_CHAR) + '*'
+  NEW_LINE          = unirex(
+    rexstr(ANY_WHITE_SPACE) + rexstr(LINE_BREAK)
+  )
+  SOME_NEW_LINES    = unirex(
+    '(?:' + rexstr(ANY_WHITE_SPACE) + rexstr(LINE_BREAK) + ')+'
+  )
+  POSSIBLE_STARTS   = unirex(
+    rexstr(DOCUMENT_START) + rexstr(/<p[^<>]*>/) + '?'
+  )
+  POSSIBLE_ENDS     = unirex(
+    rexstr(SOME_NEW_LINES) + '|' +
+    rexstr(DOCUMENT_END) + '|' +
+    rexstr(/<\/p>/)
+  )
+  CHARACTER_ESCAPE  = unirex(
+    rexstr(/\\/) +
+    '(?:' +
+      rexstr(ESCAPE_CHAR) + '|' +
+      rexstr(/x/) + rexstr(HEXADECIMAL_CHARS) + '{2}' + '|' +
+      rexstr(/u/) + rexstr(HEXADECIMAL_CHARS) + '{4}' + '|' +
+      rexstr(/U/) + rexstr(HEXADECIMAL_CHARS) + '{8}' +
+    ')'
+  )
+  ESCAPED_CHAR      = unirex(
+    rexstr(/(?!["\\])/) + rexstr(NOT_LINE_BREAK) + '|' +
+    rexstr(CHARACTER_ESCAPE)
+  )
+  ANY_ESCAPED_CHARS = unirex(
+    rexstr(ESCAPED_CHAR) + '*'
+  )
+  ESCAPED_APOS      = unirex(
+    '(?=' + rexstr(NOT_LINE_BREAK) + ')' + rexstr(/[^']|''/)
+  )
+  ANY_ESCAPED_APOS  = unirex(
+    rexstr(ESCAPED_APOS) + '*'
+  )
+  FIRST_KEY_CHAR    = unirex(
+    '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+    '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+    rexstr(NOT_INDICATOR) + '|' +
+    rexstr(/[?:-]/) +
+    '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+    '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+    '(?=' + rexstr(NOT_FLOW_CHAR) + ')'
+  )
+  FIRST_VALUE_CHAR  = unirex(
+    '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+    '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+    rexstr(NOT_INDICATOR) + '|' +
+    rexstr(/[?:-]/) +
+    '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+    '(?=' + rexstr(NOT_WHITE_SPACE) + ')'
+    #  Flow indicators are allowed in values.
+  )
+  LATER_KEY_CHAR    = unirex(
+    rexstr(WHITE_SPACE) + '|' +
+    '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+    '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+    '(?=' + rexstr(NOT_FLOW_CHAR) + ')' +
+    rexstr(/[^:#]#?/) + '|' +
+    rexstr(/:/) + '(?=' + rexstr(NOT_WHITE_SPACE) + ')'
+  )
+  LATER_VALUE_CHAR  = unirex(
+    rexstr(WHITE_SPACE) + '|' +
+    '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+    '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+    #  Flow indicators are allowed in values.
+    rexstr(/[^:#]#?/) + '|' +
+    rexstr(/:/) + '(?=' + rexstr(NOT_WHITE_SPACE) + ')'
+  )
+
+  #  YAML CONSTRUCTS  #
+
+  YAML_START        = unirex(
+    rexstr(ANY_WHITE_SPACE) + rexstr(/---/)
+  )
+  YAML_END          = unirex(
+    rexstr(ANY_WHITE_SPACE) + rexstr(/(?:---|\.\.\.)/)
+  )
+  YAML_LOOKAHEAD    = unirex(
+    '(?=' +
+      rexstr(YAML_START) +
+      rexstr(ANY_ALLOWED_CHARS) + rexstr(NEW_LINE) +
+      rexstr(YAML_END) + rexstr(POSSIBLE_ENDS) +
+    ')'
+  )
+  YAML_DOUBLE_QUOTE = unirex(
+    rexstr(/"/) + rexstr(ANY_ESCAPED_CHARS) + rexstr(/"/)
+  )
+  YAML_SINGLE_QUOTE = unirex(
+    rexstr(/'/) + rexstr(ANY_ESCAPED_APOS) + rexstr(/'/)
+  )
+  YAML_SIMPLE_KEY   = unirex(
+    rexstr(FIRST_KEY_CHAR) + rexstr(LATER_KEY_CHAR) + '*'
+  )
+  YAML_SIMPLE_VALUE = unirex(
+    rexstr(FIRST_VALUE_CHAR) + rexstr(LATER_VALUE_CHAR) + '*'
+  )
+  YAML_KEY          = unirex(
+    rexstr(YAML_DOUBLE_QUOTE) + '|' +
+    rexstr(YAML_SINGLE_QUOTE) + '|' +
+    rexstr(YAML_SIMPLE_KEY)
+  )
+  YAML_VALUE        = unirex(
+    rexstr(YAML_DOUBLE_QUOTE) + '|' +
+    rexstr(YAML_SINGLE_QUOTE) + '|' +
+    rexstr(YAML_SIMPLE_VALUE)
+  )
+  YAML_SEPARATOR    = unirex(
+    rexstr(ANY_WHITE_SPACE) +
+    ':' + rexstr(WHITE_SPACE) +
+    rexstr(ANY_WHITE_SPACE)
+  )
+  YAML_LINE         = unirex(
+    '(' + rexstr(YAML_KEY) + ')' +
+    rexstr(YAML_SEPARATOR) +
+    '(' + rexstr(YAML_VALUE) + ')'
+  )
+
+  #  FRONTMATTER REGEX  #
+
+  YAML_FRONTMATTER  = unirex(
+    rexstr(POSSIBLE_STARTS) +
+    rexstr(YAML_LOOKAHEAD) +
+    rexstr(YAML_START) + rexstr(SOME_NEW_LINES) +
+    '(?:' +
+      '(' + rexstr(INDENTATION) + ')' +
+      rexstr(YAML_LINE) + rexstr(SOME_NEW_LINES) +
+      '(?:' +
+        '\\1' + rexstr(YAML_LINE) + rexstr(SOME_NEW_LINES) +
+      '){0,4}' +
+    ')?' +
+    rexstr(YAML_END) + rexstr(POSSIBLE_ENDS)
+  )
+
+  #  SEARCHES  #
+
+  FIND_YAML_LINES   = unirex(
+    rexstr(NEW_LINE) + rexstr(INDENTATION) + rexstr(YAML_LINE)
+  )
+
+  #  STRING PROCESSING  #
+
+  def process_string(str)
+    case str[0]
+    when '"'
+      str[1..-2]
+        .gsub(/\\0/, "\u{00}")
+        .gsub(/\\a/, "\u{07}")
+        .gsub(/\\b/, "\u{08}")
+        .gsub(/\\t/, "\u{09}")
+        .gsub(/\\n/, "\u{0a}")
+        .gsub(/\\v/, "\u{0b}")
+        .gsub(/\\f/, "\u{0c}")
+        .gsub(/\\r/, "\u{0d}")
+        .gsub(/\\e/, "\u{1b}")
+        .gsub(/\\ /, "\u{20}")
+        .gsub(/\\"/, "\u{22}")
+        .gsub(/\\\//, "\u{2f}")
+        .gsub(/\\\\/, "\u{5c}")
+        .gsub(/\\N/, "\u{85}")
+        .gsub(/\\_/, "\u{a0}")
+        .gsub(/\\L/, "\u{2028}")
+        .gsub(/\\P/, "\u{2029}")
+        .gsub(/\\x([0-9a-fA-F]{2})/mu) {|s| $1.to_i.chr Encoding::UTF_8}
+        .gsub(/\\u([0-9a-fA-F]{4})/mu) {|s| $1.to_i.chr Encoding::UTF_8}
+        .gsub(/\\U([0-9a-fA-F]{8})/mu) {|s| $1.to_i.chr Encoding::UTF_8}
+    when "'"
+      str[1..-2].gsub(/''/, "'")
+    else
+      str
+    end
+  end
+
+  #  BIO PROCESSING  #
+
+  def process_bio content
+    result = {
+      text: content.gsub(/&quot;/, '"').gsub(/&apos;/, "'"),
+      metadata: []
+    }
+    yaml = YAML_FRONTMATTER.match(result[:text])
+    return result unless yaml
+    yaml = yaml[0]
+    start = YAML_START =~ result[:text]
+    ending = start + yaml.length - (YAML_START =~ yaml)
+    result[:text][start..ending - 1] = ''
+    metadata = nil
+    index = 0
+    while metadata = FIND_YAML_LINES.match(yaml, index) do
+      index = metadata.end(0)
+      result[:metadata].push [
+        process_string(metadata[1]), process_string(metadata[2])
+      ]
+    end
+    return result
+  end
+
+end

app/views/accounts/_header.html.haml

@@ -1,4 +1,6 @@
-.card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" }
+- processed_bio = FrontmatterHandler.instance.process_bio Formatter.instance.simplified_format account
+.card.h-card.p-author
+  .details{ style: "background-image: url(#{account.header.url(:original)})" }
     - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account)
       .controls
         - if current_account.following?(account)
@@ -15,9 +17,8 @@
       %small
         %span @#{account.username}
         = fa_icon('lock') if account.locked?
-  .details
     .bio
-      .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account)
+      .account__header__content.p-note.emojify!=processed_bio[:text]
 
     .details-counters
       .counter{ class: active_nav_class(short_account_url(account)) }
@@ -32,3 +33,9 @@
         = link_to account_followers_url(account) do
           %span.counter-label= t('accounts.followers')
           %span.counter-number= number_with_delimiter account.followers_count
+  - if processed_bio[:metadata].length > 0
+    .metadata<
+      - processed_bio[:metadata].each do |i|
+        .metadata-item><
+          %b.emojify>!=i[0]
+          %span.emojify>!=i[1]