Backend YAML Processing + Profile Metadata on Static Pages

This commit is contained in:
kibigo! 2017-06-28 00:27:44 -07:00
parent 36805a39db
commit 6107e95404
3 changed files with 341 additions and 87 deletions

View file

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

View file

@ -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

View file

@ -1,23 +1,24 @@
.card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" } - processed_bio = FrontmatterHandler.instance.process_bio Formatter.instance.simplified_format account
- if user_signed_in? && current_account.id != account.id && !current_account.requested?(account) .card.h-card.p-author
.controls .details{ style: "background-image: url(#{account.header.url(:original)})" }
- if current_account.following?(account) - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account)
= link_to t('accounts.unfollow'), account_unfollow_path(account), data: { method: :post }, class: 'button' .controls
- else - if current_account.following?(account)
= link_to t('accounts.follow'), account_follow_path(account), data: { method: :post }, class: 'button' = link_to t('accounts.unfollow'), account_unfollow_path(account), data: { method: :post }, class: 'button'
- elsif !user_signed_in? - else
.controls = link_to t('accounts.follow'), account_follow_path(account), data: { method: :post }, class: 'button'
.remote-follow - elsif !user_signed_in?
= link_to t('accounts.remote_follow'), account_remote_follow_path(account), class: 'button' .controls
.avatar= image_tag account.avatar.url(:original), class: 'u-photo' .remote-follow
%h1.name = link_to t('accounts.remote_follow'), account_remote_follow_path(account), class: 'button'
%span.p-name.emojify= display_name(account) .avatar= image_tag account.avatar.url(:original), class: 'u-photo'
%small %h1.name
%span @#{account.username} %span.p-name.emojify= display_name(account)
= fa_icon('lock') if account.locked? %small
.details %span @#{account.username}
= fa_icon('lock') if account.locked?
.bio .bio
.account__header__content.p-note.emojify= Formatter.instance.simplified_format(account) .account__header__content.p-note.emojify!=processed_bio[:text]
.details-counters .details-counters
.counter{ class: active_nav_class(short_account_url(account)) } .counter{ class: active_nav_class(short_account_url(account)) }
@ -32,3 +33,9 @@
= link_to account_followers_url(account) do = link_to account_followers_url(account) do
%span.counter-label= t('accounts.followers') %span.counter-label= t('accounts.followers')
%span.counter-number= number_with_delimiter account.followers_count %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]