forked from treehouse/mastodon
✨ Profile Metadata HACK 😈
kibigo!
beatrix-bitrot
parent
62a75891ab
commit
0d3ec19e89
|
|
@ -16,6 +16,57 @@ const messages = defineMessages({
|
|||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
|
||||
});
|
||||
|
||||
/*
|
||||
THIS IS A MESS BECAUSE EFFING MASTODON AND ITS EFFING HTML BIOS
|
||||
INSTEAD OF JUST STORING EVERYTHING IN PLAIN EFFING TEXT ! ! ! !
|
||||
BLANK LINES ALSO WON'T WORK BECAUSE RIGHT NOW MASTODON CONVERTS
|
||||
THOSE INTO `<P>` ELEMENTS INSTEAD OF LEAVING IT AS `<BR><BR>` !
|
||||
TL:DR; THIS IS LARGELY A HACK. WITH BETTER BACKEND STUFF WE CAN
|
||||
IMPROVE THIS BY BETTER PREDICTING HOW THE METADATA WILL BE SENT
|
||||
WHILE MAINTAINING BASIC PLAIN-TEXT PROCESSING. THE OTHER OPTION
|
||||
IS TO TURN ALL BIOS INTO PLAIN-TEXT VIA A TREE-WALKER, AND THEN
|
||||
PROCESS THE YAML AND LINKS AND EVERYTHING OURSELVES. THIS WOULD
|
||||
BE INCREDIBLY COMPLICATED, AND IT WOULD BE A MILLION TIMES LESS
|
||||
DIFFICULT IF MASTODON JUST GAVE US PLAIN-TEXT BIOS (WHICH QUITE
|
||||
FRANKLY MAKES THE MOST SENSE SINCE THAT'S WHAT USERS PROVIDE IN
|
||||
SETTINGS) TO BEGIN WITH AND LEFT ALL PROCESSING TO THE FRONTEND
|
||||
TO HANDLE ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
|
||||
ANYWAY I KNOW WHAT NEEDS TO BE DONE REGARDING BACKEND STUFF BUT
|
||||
I'M NOT SMART ENOUGH TO FIGURE OUT HOW TO ACTUALLY IMPLEMENT IT
|
||||
SO FEEL FREE TO @ ME IF YOU NEED MY IDEAS REGARDING THAT. UNTIL
|
||||
THEN WE'LL JUST HAVE TO MAKE DO WITH THIS MESSY AND UNFORTUNATE
|
||||
HACKING ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
|
||||
|
||||
with love,
|
||||
@kibi@glitch.social <3
|
||||
*/
|
||||
|
||||
const NEW_LINE = /(?:^|\r?\n|<br\s*\/?>)/g
|
||||
const YAML_OPENER = /---/;
|
||||
const YAML_CLOSER = /(?:---|\.\.\.)/;
|
||||
const YAML_STRING = /(?:"(?:[^"\n]){1,32}"|'(?:[^'\n]){1,32}'|(?:[^'":\n]){1,32})/g;
|
||||
const YAML_LINE = new RegExp("\\s*" + YAML_STRING.source + "\\s*:\\s*" + YAML_STRING.source + "\\s*", "g");
|
||||
const BIO_REGEX = new RegExp(NEW_LINE.source + "*" + YAML_OPENER.source + NEW_LINE.source + "+(?:" + YAML_LINE.source + NEW_LINE.source + "+){0,4}" + YAML_CLOSER.source + NEW_LINE.source + "*");
|
||||
|
||||
const processBio = (data) => {
|
||||
let props = {text: data, metadata: []};
|
||||
let yaml = data.match(BIO_REGEX);
|
||||
if (!yaml) return props;
|
||||
else yaml = yaml[0];
|
||||
let start = props.text.indexOf(yaml);
|
||||
let end = start + yaml.length;
|
||||
props.text = props.text.substr(0, start) + props.text.substr(end);
|
||||
yaml = yaml.replace(NEW_LINE, "\n");
|
||||
let metadata = (yaml ? yaml.match(YAML_LINE) : []) || [];
|
||||
for (let i = 0; i < metadata.length; i++) {
|
||||
let result = metadata[i].match(YAML_STRING);
|
||||
if (result[0][0] === '"' || result[0][0] === "'") result[0] = result[0].substr(1, result[0].length - 2);
|
||||
if (result[1][0] === '"' || result[1][0] === "'") result[0] = result[1].substr(1, result[1].length - 2);
|
||||
props.metadata.push(result);
|
||||
}
|
||||
return props;
|
||||
};
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const mapStateToProps = state => ({
|
||||
autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
|
||||
|
|
@ -122,21 +173,44 @@ export default class Header extends ImmutablePureComponent {
|
|||
lockedIcon = <i className='fa fa-lock' />;
|
||||
}
|
||||
|
||||
const content = { __html: emojify(account.get('note')) };
|
||||
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
|
||||
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
|
||||
const { text, metadata } = processBio(account.get('note'));
|
||||
|
||||
return (
|
||||
<div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
|
||||
<div>
|
||||
<Avatar account={account} autoPlayGif={this.props.autoPlayGif} />
|
||||
<div className='account__header__wrapper'>
|
||||
<div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
|
||||
<div>
|
||||
<Avatar account={account} autoPlayGif={this.props.autoPlayGif} />
|
||||
|
||||
<span className='account__header__display-name' dangerouslySetInnerHTML={displayNameHTML} />
|
||||
<span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span>
|
||||
<div className='account__header__content' dangerouslySetInnerHTML={content} />
|
||||
<span className='account__header__display-name' dangerouslySetInnerHTML={displayNameHTML} />
|
||||
<span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span>
|
||||
<div className='account__header__content' dangerouslySetInnerHTML={{__html: emojify(text)}} />
|
||||
|
||||
{info}
|
||||
{actionBtn}
|
||||
{info}
|
||||
{actionBtn}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{metadata.length && (
|
||||
<div className='account__metadata'>
|
||||
{(() => {
|
||||
let data = [];
|
||||
for (let i = 0; i < metadata.length; i++) {
|
||||
data.push(
|
||||
<div
|
||||
className='account__metadata-item'
|
||||
title={metadata[i][0] + ":" + metadata[i][1]}
|
||||
key={i}
|
||||
>
|
||||
<span dangerouslySetInnerHTML={{__html: emojify(metadata[i][0])}} />
|
||||
<strong dangerouslySetInnerHTML={{__html: emojify(metadata[i][1])}} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return data;
|
||||
})()}
|
||||
</div>
|
||||
) || null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -820,9 +820,12 @@
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.account__header {
|
||||
.account__header__wrapper {
|
||||
flex: 0 0 auto;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.account__header {
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
|
@ -887,6 +890,42 @@
|
|||
}
|
||||
}
|
||||
|
||||
.account__metadata {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 36px;
|
||||
overflow: hidden;
|
||||
|
||||
.account__metadata-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
& > span, & > strong {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > span {
|
||||
flex: 0 0 auto;
|
||||
width: 120px;
|
||||
color: $ui-primary-color;
|
||||
background: lighten($ui-base-color, 13%);
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
& > strong {
|
||||
flex: auto;
|
||||
color: $primary-text-color;
|
||||
background: $ui-base-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__action-bar {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
|
|
|||
Loading…
Reference in New Issue