Skip to content

Instantly share code, notes, and snippets.

@insin
Last active May 15, 2024 14:58
Show Gist options
  • Save insin/3c44672755ec38f276f0c3e8b125afaf to your computer and use it in GitHub Desktop.
Save insin/3c44672755ec38f276f0c3e8b125afaf to your computer and use it in GitHub Desktop.
An Astro <Tweet> component for hardcoding static Tweets

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',
      },
    },
  },
}
  1. Add twitter.svg to /public and adjust the path in the component if needed

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

Example screenshot

---
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>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment