plugin-social-media-links (a README Experience)

Feb 10, 2022

A Micro.blog plugin for injecting your social media account links into the page <head> with a partial suitable for profile display. It's code lives here.

Soooo … why does it exist? Honestly, probably because it seems helpful to have all your social media account info being injected in one predictable place. Let's look at the plugin components, shall we?

The Components

There are two components in this plugin, both of which are fairly simple.

Link Injection

The first component is the injection of <link> tags for your social media accounts. Once you configure your data file (which we will get to in a bit), the links will be injected without your needing to do anything more. Given my data file (which I will show to you … in a bit), the plugin will go ahead and shove the following into your page <head>:

<link rel="me" href="https://micro.blog/Moondeer">
<link rel="me" href="https://twitter.com/@moondeerdotblog">
<link rel="me" href="https://github.com/moonbuck">
<link rel="me" href="https://moondeerdotblog.tumblr.com">
<link rel="me" href="https://Moondeer.medium.com">
<link rel="me" href="https://www.facebook.com/moondeerdotblog">
<link rel="me" href="https://www.instagram.com/moondeerdotblog">
<link rel="me" href="https://mastodon.online/@moondeer">

On to thing two.

Thing Two

The second component would be the partial this plugin makes available that takes the same data file and renders a chunk of HTML, kinda like…

<div id="social-media-link-container" class="p-role">
  <a id="Micro.blog" class="social-media-link" rel="me" href="https://micro.blog/Moondeer">@Moondeer</a>
  <span id="Micro.blog" class="social-media-link-label"> Micro.blog</span>
  <a id="Twitter" class="social-media-link" rel="me" href="https://twitter.com/@moondeerdotblog">@moondeerdotblog</a>
  <span id="Twitter" class="social-media-link-label"> Twitter</span>
  <a id="Github" class="social-media-link" rel="me" href="https://github.com/moonbuck">@moonbuck</a>
  <span id="Github" class="social-media-link-label"> Github</span>
  <a id="Tumblr" class="social-media-link" rel="me" href="https://moondeerdotblog.tumblr.com">@moondeerdotblog</a>
  <span id="Tumblr" class="social-media-link-label"> Tumblr</span>
  <a id="Medium" class="social-media-link" rel="me" href="https://Moondeer.medium.com">@Moondeer</a>
  <span id="Medium" class="social-media-link-label"> Medium</span>
  <a id="Facebook" class="social-media-link" rel="me" href="https://www.facebook.com/moondeerdotblog">@moondeerdotblog</a>
  <span id="Facebook" class="social-media-link-label"> Facebook</span>
  <a id="Instagram" class="social-media-link" rel="me" href="https://www.instagram.com/moondeerdotblog">@moondeerdotblog</a>
  <span id="Instagram" class="social-media-link-label"> Instagram</span>
  <a id="Mastodon" class="social-media-link" rel="me" href="https://mastodon.online/@moondeer">@moondeer</a>
  <span id="Mastodon" class="social-media-link-label"> Mastodon</span>
</div>

which can be utilized by custom themes by invoking from a suitable place, kinda like…

<section id="author-profile" class="h-card">
  <a class="u-url" rel="me" href="https://moondeer.blog/about">
{{- with site.Author.profileavatar | default site.Author.avatar }}
    <img id="avatar" class="u-photo" src="{{ . }}" />
{{- end }}
  </a>
  <h1 class="p-name" rel="me">{{ site.Author.name }}</h1>
{{- if templates.Exists "partials/plugin-social-media-links/profile-links.html" -}}
{{ partial "plugin-social-media-links/profile-links.html" . }}
{{- end -}}
{{- $bio := cond .IsHome site.Author.briefbio site.Author.aboutbio -}}
  <p id="brief-bio" class="p-note">{{ $bio }}</p>
</section>

so that you end up with something kinda like:

Right, let's get y'all configured.

Configuration

Underscore … dash-case … yada, yada, yada … see my other READMEs … this bit here may be helpful.

Yeah, I'm phoning it in this morning. Let's look at the files.

Config.toml

The first file lives at data/plugin_social_media_links/Config.toml and it looks like this:

# Debug and build related parameters.
#####################################

# Theme version, printed to HTML comment when the plugin loads.
#
Version = '4.0.1'

# Whether to print HTML comments for debugging purposes.
#
DebugPrint = false

# Whether to provide subresource integrity by generating a 
# base64-encoded cryptographic hash and attaching a .Data.Integrity
# property containing an integrity string, which is made up of the
# name of the hash function, one hyphen and the base64-encoded hash sum.
#
Fingerprint = true

# Output style for /assets/sass/profile-links.scss. 
# Valid options are nested, expanded, compact and compressed
#
SassOutput = 'compact'

Honestly, you can probably just ignore this one. Read the parameter comments to see what these parameters do. Moving on.

Accounts.toml

The second file is the one not to miss. Bear in mind that the Micro.blog platform is lifted out of the parameters @manton has created for you and needn't be included in the file to follow. The file lives at data/plugin_social_media_links/Accounts.toml and it looks like this:

# The array of social media platforms to link.
#
# The value of Href will be generated by substituting the value 
# of USERNAME (as well as SERVER when set).
#
# Replace [BRACKETED] values and uncomment or create your own entries
# for platforms not listed.
#
[[Platforms]]
Name = "Twitter"
Href = "https://twitter.com/@USERNAME"
#Username = "[USERNAME]"

[[Platforms]]
Name = "Github"
Href = "https://github.com/USERNAME"
#Username = "[USERNAME]"

[[Platforms]]
Name = "Tumblr"
Href = "https://USERNAME.tumblr.com"
#Username = "[USERNAME]"

[[Platforms]]
Name = "Medium"
Href = "https://USERNAME.medium.com"
#Username = "[USERNAME]"

[[Platforms]]
Name = "Facebook"
Href = "https://www.facebook.com/USERNAME"
#Username = "[USERNAME]"

[[Platforms]]
Name = "Instagram"
Href = "https://www.instagram.com/USERNAME"
#Username = "[USERNAME]"

[[Platforms]]
Name = "Mastodon"
Href = "https://SERVER/@USERNAME"
#Server = "[SERVER]"
#Username = "[USERNAME]"

I've basically preloaded it with the account info for the platforms I have configured. If you have an account on any of the top six platforms, you can replace [USERNAME] with your handle and remove the # from the front of the line. If you have a Mastodon account, you can do the same thing and then mimic the process for Server. When I do all that, my file ends up like this:

[[Platforms]]
Name = "Twitter"
Href = "https://twitter.com/@USERNAME"
Username = "moondeerdotblog"

[[Platforms]]
Name = "Github"
Href = "https://github.com/USERNAME"
Username = "moonbuck"

[[Platforms]]
Name = "Tumblr"
Href = "https://USERNAME.tumblr.com"
Username = "moondeerdotblog"

[[Platforms]]
Name = "Medium"
Href = "https://USERNAME.medium.com"
Username = "Moondeer"

[[Platforms]]
Name = "Facebook"
Href = "https://www.facebook.com/USERNAME"
Username = "moondeerdotblog"

[[Platforms]]
Name = "Instagram"
Href = "https://www.instagram.com/USERNAME"
Username = "moondeerdotblog"

[[Platforms]]
Name = "Mastodon"
Href = "https://SERVER/@USERNAME"
Server = "mastodon.online"
Username = "moondeer"

The cool thing about this setup is that you can add any platform that can be factored into Name-Href-Username or Name-Href-Username-Server.

You could add something like…

[[Platforms]]
Name = "SomeKickAssPlatform"
Href = "https://www.somekickassplatform.com/USERNAME"
Username = "mykickasshandle"

and win yourself a link in the page <head> that is all…

<link rel="me" href="https://www.somekickassplatform.com/mykickasshandle">

and a social media block in your profile that is all:

Let's wrap this sh$t up by looking at the third file, which lets you modify the style of that social media block.

Style.toml

The third file lives at data/plugin_social_media_links/Style.toml and it looks like this:

# Parameter values used to generate the stylesheet.
###################################################

# The ID to assign to the container.
#
ContainerID = 'social-media-link-container'

# The class name to attach to the platform links.
#
LinkClassName = 'social-media-link'

# The class name to attach to the platform labels.
#
LabelClassName = 'social-media-link-label'

# Sass block to apply to the container.
#
Container = ''

# Sass block to apply to the platform links.
#
Link = ''

# Sass block to apply to the platform links when hovered.
#
LinkHover = ''

# Sass block to apply to the platform labels.
#
Label = ''

The ID and class name parameters are there to promote consistency; however, you are free to modify them however you see fit. The remaining parameters are meant to hold custom blocks of Sass (bearing in mind that any valid CSS block is a valid Sass block as we are using Sass' SCSS syntax) for overriding or augmenting the default style. Given the default ID and class name values, these parameter values get injected into the Sass template like so:

@import "vendor/rfs";

#social-media-link-container {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 1fr 100px;
  /* Container */
  
  a.social-media-link { 
    /* Link */
    &:hover { 
      /* LinkHover */
    }
  }
  
  span.social-media-link-label { 
    /* Label */
  }
  
}

And that's that. Peace ☾𐂂