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