An Astro <Tweet> component for hardcoding static Tweets

README.md

An Astro <Tweet> component for hardcoding static Tweets

Dependencies

Tailwind

Setup

1. Add the following colours to your Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'twitter-black': '#0f1419',
        'twitter-grey': '#536471',
      },
    },
  },
}

2. Add twitter.svg to /public and adjust the path in the component if needed

3. Add Twitter avatars to /src/assets/avatars/ with {user}.jpg filenames

Example

<div class="flex flex-col md:flex-row gap-4">
  <Tweet
    class="flex-1 md:w-0"
    id="1674801223235665922"
    user="zeldman"
  >
    … Have purchased and installed. Works beautifully in Safari. Beautiful UI, too. Already breathing easier …
  </Tweet>
  <Tweet
    class="flex-1 md:w-0"
    displayName="Corey Quinn"
    id="1790396191534195044"
    user="QuinnyPig"
  >
    Holy crap my favorite extension knows who I am!
  </Tweet>
</div>

Tweet.astro

---
import type {ImageMetadata} from 'astro'

let {class: className, displayName, id, user} = Astro.props

export interface Props {
  class: string
  displayName?: string
  id: string
  user: string
}

let avatarPath = `/src/assets/avatars/${user}.jpg`
let avatars = import.meta.glob<{ default: ImageMetadata }>('/src/assets/avatars/*.jpg')
if (!avatars[avatarPath]) throw new Error(`"${avatarPath}" does not exist in glob: "/src/assets/avatars/*.jpg"`)
let avatarImage = await avatars[avatarPath]()
---
<div class={`border border-[#cfd9de] rounded-xl px-4 py-3 ${className}`}>
  <div class="flex justify-between">
    <div class="flex">
      <div class="mr-2">
        <a href={`https://x.com/${user}`}>
          <img src={avatarImage.default.src} alt="" loading="lazy" decoding="async" class="w-12 h-12 rounded-full hover:brightness-90">
        </a>
      </div>
      <div class="flex flex-col leading-tight">
        <a href={`https://x.com/${user}`} class="text-twitter-black hover:underline font-bold">{displayName || user}</a>
        <a href={`https://x.com/${user}`} class="text-twitter-grey">@{user}</a>
      </div>
    </div>
    <a href={`https://x.com/${user}/status/${id}`} title="View on Twitter">
      <img src="/images/twitter.svg" alt="View on Twitter" class="w-[25px] h-[25px] hover:brightness-90">
    </a>
  </div>
  <div class="mt-3 text-twitter-black text-xl">
    <slot/>
  </div>
</div>

twitter.svg

<svg fill="#1D9BF0" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>