Enabling Friend Links on Mobile

This note expands on my earlier desktop walkthrough (see Friend Links Sidebar for Astro Blog) and focuses on keeping the “Friend Links” card visible on mobile-sized breakpoints. The base tutorial covers the desktop sidebar (src/components/SideBar.astro). Here we mirror that experience within the footer widgets that already render for small screens.

Why a Separate Mobile Tutorial?

• MainLayout.astro hides the desktop sidebar with .side-bar { @apply hidden … xl:block; }, so any card placed there disappears on mobile.
• The repo duplicates select sidebar widgets inside src/components/Footer.astro (owner info, categories, tags). Adding Friend Links here ensures parity without changing the layout’s responsive logic.

Step 1 · Read Friend Links from Config

The footer component didn’t know about YukinaConfig.friendLinks yet. Import the data near the top of src/components/Footer.astro:

const categoryKeys = [...categories.keys()];
const tagKeys = [...tags.keys()];
const friendLinks = YukinaConfig.friendLinks ?? [];

Using ?? [] keeps the template safe even if the config omits the field.

Step 2 · Insert the Mobile Card

Right after the tags card (still inside the lg:hidden section), drop in the new markup:

<!-- Friend link card -->
{
  friendLinks.length > 0 && (
    <div class="rounded-3xl bg-[var(--card-color)] p-4 transition-all lg:hidden">
      <div class="mb-2 flex flex-row items-center space-x-2 pl-1.5">
        <span class="h-6 w-1 rounded-full bg-[var(--primary-color)]"></span>
        <span class="text-xl font-semibold text-[var(--text-color)]">
          Friend Links
        </span>
      </div>
      <div class="flex flex-col space-y-1.5">
        {friendLinks.map((link) => (
          <a
            href={link.url}
            target="_blank"
            rel="noopener noreferrer"
            class="friend-link category flex flex-row items-center rounded-lg px-2 py-1.5 transition-all hover:bg-[var(--primary-color-lighten)]"
            data-tooltip={link.name}
          >
            <p class="line-clamp-1 text-[var(--text-color)] transition-all">
              {link.name}
            </p>
          </a>
        ))}
      </div>
    </div>
  )
}

Notes:

• lg:hidden makes the entire card mobile-only, which matches the behaviour of the other footer widgets.
• Reusing .category ensures the same font family and text-slide animation defined for categories.
• data-tooltip and friend-link mirror the desktop version so the hover pill appears even on touch devices that support hover.

Step 3 · Share Tooltip Styles

Paste the same CSS snippet from the sidebar tutorial into the <style> block of Footer.astro so the tooltip colors match the global palette:

.friend-link {
  position: relative;
  overflow: visible;
}

.friend-link::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  transform: translate(-50%, 4px);
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  background-color: var(--primary-color-lighten);
  color: var(--primary-color);
  font-size: 0.75rem;
  font-family: var(--primary-font);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  box-shadow: 0 10px 25px -15px var(--primary-color);
}

.friend-link:hover::after {
  opacity: 1;
  transform: translate(-50%, -2px);
  background-color: var(--primary-color);
  color: var(--card-color);
}

Because these variables react to day/night mode, you get the same adaptive color scheme as the rest of the blog.

Step 4 · Test on Real Breakpoints

Run pnpm dev (or pnpm build && pnpm preview) and use your browser’s device toolbar to simulate ≤1024px widths. Scroll to the bottom: you should see Friend Links stacked after Tags, with hover/tooltips functioning in both light and dark modes.

Maintenance Tips

• Add, remove, or reorder entries in yukina.config.ts only—both desktop and mobile cards consume the same friendLinks array.
• If you add many links, consider wrapping them in a scrollable container or applying the gradient “View more” pattern similar to the category/tag cards.

With these steps the Friend Links block now shows up everywhere, keeping cross-site shout-outs visible whether someone visits on a phone or a desktop monitor.