Over the last several months, I’ve been using Tableau to rebuild my long-neglected website. Tableau is part of the Elixir Tools project headed by @mhanberg, and is built on top of MDEx by @leandrocp. This library is one of ten libraries and Elixir extensions that I built. Most of these were built with the assistance of Kiro.
TableauSocialExtension is a Tableau extension that replaces <dl> and <a> tags that have specific metadata tags with social media profile links based on site configuration and content front matter. All generated links include rel="nofollow noopener noreferrer" automatically.
Social Block (<dl social-block></dl>)
Replaces the social block <dl> with a definition list with all configured social accounts. Filters may be applied for custom lists.
<dl social-block></dl>
<dl class="social-block">
<dt class="social-platform-label social-platform-github">GitHub</dt>
<dd class="social-links social-platform-github">
<a
href="https://github.com/username"
class="social-link social-platform-github"
rel="nofollow noopener noreferrer"
>username</a>
</dd>
</dl>
Individual Links (<a social-*></a>)
Replaces the <a> link anchor with a link anchor for the configured account.
<!-- Uses first configured account -->
<a social-github></a>
<!-- Uses specific account identifier -->
<a social-github="different-user">Text</a>
<!-- For platforms with lookup keys (e.g., Stack Overflow) -->
<a social-stack-overflow-id="12345"></a>
<a
href="https://github.com/username"
class="social-link social-platform-github"
rel="nofollow noopener noreferrer"
>@username</a>
<a
href="https://github.com/different-user"
class="social-link social-platform-github"
rel="nofollow noopener noreferrer"
>Text</a>
<a
href="https://stackoverflow.com/users/12345"
class="social-link social-platform-stack-overflow"
rel="nofollow noopener noreferrer"
>Example User</a>
Configuration
TableauSocialExtension requires configuration for the social block to work, but that configuration can be global or per-page (or post).
config :tableau, TableauSocialExtension,
accounts: [
# Simple username
github: "username",
twitter: "username",
# Email-style for federated platforms
mastodon: "user@instance.social",
pixelfed: "user@pixelfed.social",
# Numeric ID with username -- custom parsing format
stack_overflow: "12345/username",
# Multiple accounts per platform (as list)
github: ["personal-username", "work-username"],
mastodon: ["user@instance.social", "alt@other.instance"]
],
css_prefix: "social",
labels: %{
github: "GitHub",
mastodon: "Mastodon"
}
Frontmatter Overrides
---
title: About
social_accounts:
github: page-specific-username
mastodon: different@instance.social
---
Frontmatter settings for social_accounts override the site configurations for that page by default, but there are directives for appending or prepending the account lists.
---
title: About
social_accounts:
github[prepend]: page-specific-username
mastodon[append]: different@instance.social
---
