Site Builder

Editing: modules-social-links.php

writable 0666

<?php
/**************************************************************************
 *  SOCIAL LINKS MODULE — Gold‑card, accessible colours, no external assets
 **************************************************************************/

/* 1) Load profile.json if $profile isn’t set */
if (function_exists('get_profile')) {
    $profile = get_profile();
}

/* 2) Short‑hand */
$name     = $profile['display_name'] ?? $profile['handle'] ?? 'Profile';
$channels = $profile['channels']     ?? [];
if (!$channels) return;

/* ----------- SVG icons (compact, inline) ----------- */
function icon_svg(string $key): string
{
    $svgs = [
      'youtube' =>
        '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
           <path fill="currentColor"
             d="M23 7s-.2-1.6-.8-2.3c-.8-.9-1.7-.9-2.1-1C17.4 3 12 3 12 3h0S6.6 3 3.9 3.7c-.4.1-1.3.1-2.1 1C1.2 5.4 1 7 1 7S.8 8.6.8 10.3v1.4C.8 13.4 1 15 1 15s.2 1.6.8 2.3c.8.9 1.9.9 2.4 1C6.6 19 12 19 12 19s5.4 0 8.1-.7c.4-.1 1.3-.1 2.1-1 .6-.7.8-2.3.8-2.3s.2-1.6.2-3.3v-1.4C23.2 8.6 23 7 23 7z"/>
           <polygon fill="#fff" points="9.75 15.02 15.5 12 9.75 8.98"/>
         </svg>',
      'twitter' =>
        '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
           <path fill="currentColor"
             d="M23 3a9.05 9.05 0 0 1-2.6.7A4.54 4.54 0 0 0 22.3 1.8a8.93 8.93 0 0 1-2.9 1.1A4.52 4.52 0 0 0 16.1.7a4.49 4.49 0 0 0-4.5 4.5c0 .4 0 .8.1 1.1A12.82 12.82 0 0 1 1.6 1.1 4.49 4.49 0 0 0 3 7.4a4.5 4.5 0 0 1-2-.6v.1a4.49 4.49 0 0 0 3.6 4.4 4.42 4.42 0 0 1-2 .1 4.49 4.49 0 0 0 4.2 3.1A9 9 0 0 1 0 19.5 12.67 12.67 0 0 0 6.9 21c8.3 0 12.9-6.9 12.9-12.9v-.6A9.27 9.27 0 0 0 23 3z"/>
         </svg>',
      'rss' =>
        '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
           <path fill="currentColor"
             d="M4 11a1 1 0 0 0 0 2 7 7 0 0 1 7 7 1 1 0 0 0 2 0 9 9 0 0 0-9-9z"/>
           <path fill="currentColor"
             d="M4 4a1 1 0 0 0 0 2 14 14 0 0 1 14 14 1 1 0 0 0 2 0A16 16 0 0 0 4 4z"/>
           <circle fill="currentColor" cx="5" cy="19" r="1.5"/>
         </svg>',
      /* fallback */
      'link' =>
        '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
           <path fill="currentColor"
             d="M10.6 13.4a1 1 0 0 1 0-1.4l4.6-4.6a3 3 0 0 1 4.2 4.2l-3 3a1 1 0 0 1-1.4-1.4l3-3a1 1 0 0 0-1.4-1.4l-4.6 4.6a1 1 0 0 1-1.4 0z"/>
           <path fill="currentColor"
             d="M13.4 10.6a1 1 0 0 1 0 1.4L8.8 16.6a3 3 0 1 1-4.2-4.2l3-3a1 1 0 1 1 1.4 1.4l-3 3a1 1 0 0 0 1.4 1.4l4.6-4.6a1 1 0 0 1 1.4 0z"/>
         </svg>'
    ];
    return $svgs[$key] ?? $svgs['link'];
}

/* 5) Badge builder */
function sl_badge(string $label, string $url, string $cls): string
{
    $safe = htmlspecialchars($label);
    $href = htmlspecialchars($url);
    $svg  = icon_svg(strtolower($label));
    return "<a class=\"sl-badge $cls\" href=\"$href\" target=\"_blank\" rel=\"noopener\">"
         . $svg . " $safe</a>";
}

/* 6) Group builder */
/* 5. Group builder (filters empties, hides heading if none) ----------- */
function sl_group(string $heading, array $set, string $cls): string
{
    // strip empty URLs
    $set = array_filter($set, fn($u)=>trim($u) !== '');
    if (!$set) return '';                      // no links → no heading

$html = '<h3 class="sl-sub">'.$heading.'</h3>'."\n";
    foreach ($set as $label => $url) {
        $html .= sl_badge($label, $url, $cls)."\n";
    }
    return $html;
}
?>
<section class="sl-shell">
  <div class="sl-card">
    <h2>Follow <?= htmlspecialchars($name) ?></h2>

<?= sl_group('Video Channels', $channels['video']   ?? [], 'vid') ?>
    <?= sl_group('Podcasts',       $channels['podcast'] ?? [], 'pod') ?>
    <?= sl_group('Social',         $channels['social']  ?? [], 'soc') ?>
  </div>
</section>

/* ===== Badges (AA contrast) ===== */
.sl-badge{
  display:inline-flex;align-items:center;gap:.4em;
  margin:.25em .36em;padding:.36em .7em .32em;
  border-radius:16px;font-size:.88rem;font-weight:600;text-decoration:none;
  color:#111;                               /* HIGH‑CONTRAST text */
  box-shadow:0 1px 4px rgba(0,0,0,.08);transition:.15s transform
}
.sl-badge:hover{transform:translateY(-1px)}

/* palette chosen for ≥ 4.5:1 contrast with #111 text */
.vid{background:#ffe6e6}   /* light red  */
.pod{background:#eadcff}   /* light purple */
.soc{background:#dfefff}   /* light blue   */

.sl-badge svg{flex:0 0 14px;display:block}
</style>

Site Builder

Editing: modules-social-links.php

Site Builder