Lutro
Writer
EDIT: May want to use
Given recent events over at the blue bird site, many are flocking over to Mastodon, a social media site that has existed for quite some time now! I feel it would behoove FA to add the site as an additional Social Media option for a user. For example, to link to the user
Mocked it up quickly using Dev Tools:
Here is the HTML I used to mock it up. I assumed the CSS class:
The icons image (located here) will need to have the Mastodon icon added of course, and the related stylesheets updated to adjust via
When a user inputs their username and instance in the Mastodon format of
(If they don't enter the correct format, display nothing, since both the username and instance are required to format a correct link.)
The
Assuming adding the
The frontend would look something like this (again missing the icon because it's not on the site yet) (blacked out personal info):
And the mock HTML:
I'd even be willing to code it myself, but not sure how feasible that would be, haha.
@username@domain which is what Mastodon uses (instead of @username@instance), but the placeholder names can be whatever makes the most sense.Given recent events over at the blue bird site, many are flocking over to Mastodon, a social media site that has existed for quite some time now! I feel it would behoove FA to add the site as an additional Social Media option for a user. For example, to link to the user
meow on the Mastodon instance meow.social, the link would be https://meow.social/@meow, so a user would input @meow@meow.social into the textbox for Mastodon social media contact entry.Mocked it up quickly using Dev Tools:
Here is the HTML I used to mock it up. I assumed the CSS class:
HTML:
<div class="control-panel-contact-item">
<div class="table">
<div class="control-panel-contact-icon">
<div class="contact-icon-mastodon"></div>
</div>
<div class="cell">
<h4>Mastodon</h4>
<input type="text" name="mastodon" value="" maxlength="255" class="textbox textbox100" placeholder="@username@instance">
</div>
</div>
</div>The icons image (located here) will need to have the Mastodon icon added of course, and the related stylesheets updated to adjust via
background-position attribute. I guessed the CSS class for the Mastodon icon is contact-icon-mastodon based on the others.When a user inputs their username and instance in the Mastodon format of
@username@instance, FA should render that as the following HTML on their profile page:
HTML:
<a rel="me" href="https://instance/@username">@username@instance</a>(If they don't enter the correct format, display nothing, since both the username and instance are required to format a correct link.)
The
rel="me" portion allows Mastodon to verify on its end that when you link to your FA profile page, you are indeed the "owner"/identity at the provided link. From Mastodon:
Assuming adding the
rel attribute doesn't clash with FA code, I recommend it!The frontend would look something like this (again missing the icon because it's not on the site yet) (blacked out personal info):
And the mock HTML:
HTML:
<div class="user-contact-item">
<div class="user-contact-seperator"><div class="contact-icon-mastodon"></div></div>
<div class="user-contact-user-info font-small"><span class="font-small"><strong class="highlight">Mastodon</strong></span><br>
<a rel="me" href="https://instance/@username">@username@instance</a></div>
</div>I'd even be willing to code it myself, but not sure how feasible that would be, haha.
Last edited: