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

• Hex Package
• Documentation
• Package Page

https://github.com/halostatue/tableau_social_extension