8 | 13 | astro-tweet 14 | 15 | MDX Demo 16 |
17 | 18 |
9 |
10 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/quoted-tweet/QuotedTweetBody.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { EnrichedQuotedTweet } from "../../utils.js";
3 | import styles from "./quoted-tweet-body.module.css";
4 |
5 | interface Props {
6 | tweet: EnrichedQuotedTweet;
7 | }
8 | ---
9 |
10 | 11 | {Astro.props.tweet.entities.map((item, i) => {item.text})} 12 |
13 | -------------------------------------------------------------------------------- /packages/astro-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-body.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | font-size: var(--tweet-quoted-body-font-size); 3 | font-weight: var(--tweet-quoted-body-font-weight); 4 | line-height: var(--tweet-quoted-body-line-height); 5 | margin: var(--tweet-quoted-body-margin); 6 | overflow-wrap: break-word; 7 | white-space: pre-wrap; 8 | padding: 0 0.75rem; 9 | } 10 | -------------------------------------------------------------------------------- /packages/astro-tweet/src/Tweet.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import TweetContent from "./TweetContent.astro"; 3 | 4 | interface Props { 5 | id: string; 6 | // TODO: add support for custom components (do we need this though?) 7 | // components?: TwitterComponents; 8 | fetchOptions?: RequestInit; 9 | onError?: ((error: any) => any) | undefined; 10 | } 11 | --- 12 | 13 |
12 |
15 | Tweet not found
13 |The embedded tweet could not be found…
14 |
14 |
15 |
17 |
18 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/TweetInReplyTo.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { EnrichedTweet } from "../utils.js";
3 | import s from "./tweet-in-reply-to.module.css";
4 | interface Props {
5 | tweet: EnrichedTweet;
6 | }
7 | const { tweet } = Astro.props;
8 | ---
9 |
10 |
16 | Replying to @{tweet.in_reply_to_screen_name}
17 |
18 |
--------------------------------------------------------------------------------
/demo/tailwind.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
4 | darkMode: "media",
5 | theme: {
6 | extend: {
7 | colors: {
8 | light: {
9 | bg: "#f0ebd8",
10 | text: "#1b2836"
11 | },
12 | dark: {
13 | bg: "#243447",
14 | text: "#fff"
15 | }
16 | }
17 | }
18 | },
19 | plugins: []
20 | };
21 |
--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 |
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-container.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | width: 100%;
3 | overflow: hidden;
4 | border: var(--tweet-border);
5 | border-radius: 12px;
6 | margin: var(--tweet-quoted-container-margin);
7 | transition-property: background-color, box-shadow;
8 | transition-duration: 0.2s;
9 | /* cursor: pointer; */
10 | }
11 |
12 | .root:hover {
13 | background-color: var(--tweet-quoted-bg-color-hover);
14 | }
15 |
16 | .article {
17 | position: relative;
18 | box-sizing: inherit;
19 | }
20 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/skeleton.module.css:
--------------------------------------------------------------------------------
1 | .skeleton {
2 | display: block;
3 | width: 100%;
4 | border-radius: 5px;
5 | background-image: var(--tweet-skeleton-gradient);
6 | background-size: 400% 100%;
7 | animation: loading 8s ease-in-out infinite;
8 | }
9 |
10 | @media (prefers-reduced-motion: reduce) {
11 | .skeleton {
12 | animation: none;
13 | background-position: 200% 0;
14 | }
15 | }
16 |
17 | @keyframes loading {
18 | 0% {
19 | background-position: 200% 0;
20 | }
21 | 100% {
22 | background-position: -200% 0;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/.github/workflows/changeset-version.js:
--------------------------------------------------------------------------------
1 | const { execSync } = require("node:child_process");
2 |
3 | // This script is used by the `release.yml` workflow to update the version of the packages being released.
4 | // The standard step is only to run `changeset version` but this does not update the package-lock.json file.
5 | // So we also run `npm install`, which does this update.
6 | // This is a workaround until this is handled automatically by `changeset version`.
7 | // See https://github.com/changesets/changesets/issues/421.
8 | execSync("pnpm changeset version");
9 | execSync("pnpm install");
10 |
--------------------------------------------------------------------------------
/packages/astro-tweet/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # astro-tweet
2 |
3 | ## 0.0.6
4 |
5 | ### Patch Changes
6 |
7 | - d4c5d21: Handle TweetTombstone result coming from Twitter API.
8 |
9 | ## 0.0.5
10 |
11 | ### Patch Changes
12 |
13 | - 12f7500: Support for Astro 5
14 |
15 | ## 0.0.4
16 |
17 | ### Patch Changes
18 |
19 | - d824959: Add support for Astro 4
20 |
21 | ## 0.0.3
22 |
23 | ### Patch Changes
24 |
25 | - ebcb65a: fix issue with filename case in git that was blocking the build
26 |
27 | ## 0.0.2
28 |
29 | ### Patch Changes
30 |
31 | - 7f9c942: Initial release
32 |
33 | ## 0.0.1
34 |
35 | ### Patch Changes
36 |
37 | - 7e2a8f0: Initial release
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "astro-tweet-monorepo",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "check": "pnpm -r prepublishOnly && pnpm -r check",
8 | "format": "pnpm -r format",
9 | "changeset:version": "pnpm changeset version && pnpm -r generate:version && git add --all",
10 | "changeset:release": "pnpm changeset publish"
11 | },
12 | "keywords": [],
13 | "author": "Sriram Thiagarajan",
14 | "license": "ISC",
15 | "engines": {
16 | "pnpm": "^8.10.0"
17 | },
18 | "packageManager": "pnpm@8.10.0",
19 | "dependencies": {
20 | "@changesets/cli": "^2.26.2"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Local development
2 |
3 | This project is a monorepo set up using
4 | [pnpm Workspace](https://pnpm.io/workspaces). To run / develop this project
5 | locally:
6 |
7 | 1. Clone this repo or your fork
8 | 2. Run `pnpm install` from the root directory
9 | 3. Run `pnpm dev` from the `/demo` directory to run the demo site
10 | 4. You can make changes to any component in `packages/astro-tweet` and see the
11 | changes in the demo page
12 | 5. Once you have the changes ready, run `pnpm changeset add` if there's any
13 | changes in the `astro-tweet` package. If your changes do not require
14 | publishing a new version to `npm`, you don't need to do this step.
15 |
--------------------------------------------------------------------------------
/demo/src/pages/tweet/[id].astro:
--------------------------------------------------------------------------------
1 | ---
2 | export const prerender = false;
3 | const { id } = Astro.params;
4 | import Tweet from "astro-tweet";
5 | import BaseLayout from "../../layouts/BaseLayout.astro";
6 | ---
7 |
8 | 10 | 15 | astro-tweet SSR demo 17 |
18 |
20 | This tweet was rendered on the server. Try changing the ID in the URL to see
21 | a different tweet.
22 |
23 | 8 | 13 | astro-tweet static page demo 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
25 | This tweet was statically generated. For a demo of server rendered page,
26 | visit this page.
29 | Also works with MDX.
32 |
33 |
12 | {
13 | tweet.entities.map((item, i) => {
14 | switch (item.type) {
15 | case "hashtag":
16 | case "mention":
17 | case "url":
18 | case "symbol":
19 | return
37 |
39 | ) : null
40 | }
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Sriram Thiagarajan
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/TweetInfo.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { EnrichedTweet } from "../utils.js";
3 | import TweetInfoCreatedAt from "./TweetInfoCreatedAt.astro";
4 | import styles from "./tweet-info.module.css";
5 |
6 | interface Props {
7 | tweet: EnrichedTweet;
8 | }
9 | const { tweet } = Astro.props;
10 | ---
11 |
12 |
13 |
30 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/TweetContent.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { getTweet } from "./api";
3 | import EmbeddedTweet from "./twitter-theme/EmbeddedTweet.astro";
4 | import TweetNotFound from "./twitter-theme/TweetNotFound.astro";
5 | import type { TwitterComponents } from "./twitter-theme/types";
6 | interface Props {
7 | id: string;
8 | components?: TwitterComponents;
9 | fetchOptions?: RequestInit;
10 | onError?: ((error: any) => any) | undefined;
11 | }
12 |
13 | const { id, components, fetchOptions, onError } = Astro.props;
14 | let error;
15 | const tweet = id
16 | ? await getTweet(id, fetchOptions).catch((err) => {
17 | if (onError) {
18 | error = onError(err);
19 | } else {
20 | console.error(err);
21 | error = err;
22 | }
23 | })
24 | : undefined;
25 | let tweetNotFound = false;
26 | // TODO: typing
27 | let NotFound: any;
28 | if (!tweet) {
29 | NotFound = components?.TweetNotFound || TweetNotFound;
30 | tweetNotFound = true;
31 | }
32 | ---
33 |
34 | {
35 | tweetNotFound ? (
36 |
16 |
22 |
46 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/EmbeddedTweet.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { Tweet } from "../api/index.js";
3 | import type { TwitterComponents } from "./types.js";
4 | import TweetContainer from "./TweetContainer.astro";
5 | import TweetHeader from "./TweetHeader.astro";
6 | import TweetInReplyTo from "./TweetInReplyTo.astro";
7 | import TweetBody from "./TweetBody.astro";
8 | import TweetMedia from "./TweetMedia.astro";
9 | import TweetInfo from "./TweetInfo.astro";
10 | import TweetActions from "./TweetActions.astro";
11 | import TweetReplies from "./TweetReplies.astro";
12 | import QuotedTweet from "./quoted-tweet/QuotedTweet.astro";
13 | import { enrichTweet } from "../utils.js";
14 |
15 | type Props = {
16 | tweet: Tweet;
17 | components?: Omit
28 |
35 |
36 |
45 |
15 |
22 |
53 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/icons/VerifiedBusiness.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import styles from "./icons.module.css";
3 | ---
4 |
5 |
51 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/tweet-header.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | display: flex;
3 | padding-bottom: 0.75rem;
4 | line-height: var(--tweet-header-line-height);
5 | font-size: var(--tweet-header-font-size);
6 | white-space: nowrap;
7 | overflow-wrap: break-word;
8 | overflow: hidden;
9 | }
10 |
11 | .avatar {
12 | position: relative;
13 | height: 48px;
14 | width: 48px;
15 | }
16 | .avatarOverflow {
17 | height: 100%;
18 | width: 100%;
19 | position: absolute;
20 | overflow: hidden;
21 | border-radius: 9999px;
22 | }
23 | .avatarSquare {
24 | border-radius: 4px;
25 | }
26 | .avatarShadow {
27 | height: 100%;
28 | width: 100%;
29 | transition-property: background-color;
30 | transition-duration: 0.2s;
31 | box-shadow: rgb(0 0 0 / 3%) 0px 0px 2px inset;
32 | }
33 | .avatarShadow:hover {
34 | background-color: rgba(26, 26, 26, 0.15);
35 | }
36 |
37 | .author {
38 | max-width: calc(100% - 84px);
39 | display: flex;
40 | flex-direction: column;
41 | justify-content: center;
42 | margin: 0 0.5rem;
43 | }
44 | .authorLink {
45 | text-decoration: none;
46 | color: inherit;
47 | display: flex;
48 | align-items: center;
49 | }
50 | .authorLink:hover {
51 | text-decoration-line: underline;
52 | }
53 | .authorVerified {
54 | display: inline-flex;
55 | }
56 | .authorLinkText {
57 | font-weight: 700;
58 | text-overflow: ellipsis;
59 | overflow: hidden;
60 | white-space: nowrap;
61 | }
62 |
63 | .authorMeta {
64 | display: flex;
65 | }
66 | .authorFollow {
67 | display: flex;
68 | }
69 | .username {
70 | color: var(--tweet-font-color-secondary);
71 | text-decoration: none;
72 | text-overflow: ellipsis;
73 | }
74 | .follow {
75 | color: var(--tweet-color-blue-secondary);
76 | text-decoration: none;
77 | font-weight: 700;
78 | }
79 | .follow:hover {
80 | text-decoration-line: underline;
81 | }
82 | .separator {
83 | padding: 0 0.25rem;
84 | }
85 |
86 | .brand {
87 | margin-inline-start: auto;
88 | }
89 |
90 | .twitterIcon {
91 | width: 23.75px;
92 | height: 23.75px;
93 | color: var(--tweet-twitter-icon-color);
94 | fill: currentColor;
95 | user-select: none;
96 | }
97 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/tweet-actions.module.css:
--------------------------------------------------------------------------------
1 | .actions {
2 | display: flex;
3 | align-items: center;
4 | color: var(--tweet-font-color-secondary);
5 | padding-top: 0.25rem;
6 | margin-top: 0.25rem;
7 | border-top: var(--tweet-border);
8 | overflow-wrap: break-word;
9 | white-space: nowrap;
10 | text-overflow: ellipsis;
11 | }
12 |
13 | .like,
14 | .reply,
15 | .copy {
16 | text-decoration: none;
17 | color: inherit;
18 | display: flex;
19 | align-items: center;
20 | margin-right: 1.25rem;
21 | }
22 | .like:hover,
23 | .reply:hover,
24 | .copy:hover {
25 | background-color: rgba(0, 0, 0, 0);
26 | }
27 | .like:hover > .likeIconWrapper {
28 | background-color: var(--tweet-color-red-primary-hover);
29 | }
30 | .like:hover > .likeCount {
31 | color: var(--tweet-color-red-primary);
32 | text-decoration-line: underline;
33 | }
34 | .likeIconWrapper,
35 | .replyIconWrapper,
36 | .copyIconWrapper {
37 | width: var(--tweet-actions-icon-wrapper-size);
38 | height: var(--tweet-actions-icon-wrapper-size);
39 | display: flex;
40 | justify-content: center;
41 | align-items: center;
42 | margin-left: -0.25rem;
43 | border-radius: 9999px;
44 | }
45 | .likeIcon,
46 | .replyIcon,
47 | .copyIcon {
48 | height: var(--tweet-actions-icon-size);
49 | fill: currentColor;
50 | user-select: none;
51 | }
52 | .likeIcon {
53 | color: var(--tweet-color-red-primary);
54 | }
55 | .likeCount,
56 | .replyText,
57 | .copyText {
58 | font-size: var(--tweet-actions-font-size);
59 | font-weight: var(--tweet-actions-font-weight);
60 | line-height: var(--tweet-actions-line-height);
61 | margin-left: 0.25rem;
62 | }
63 |
64 | .reply:hover > .replyIconWrapper {
65 | background-color: var(--tweet-color-blue-secondary-hover);
66 | }
67 | .reply:hover > .replyText {
68 | color: var(--tweet-color-blue-secondary);
69 | text-decoration-line: underline;
70 | }
71 | .replyIcon {
72 | color: var(--tweet-color-blue-primary);
73 | }
74 |
75 | .copy {
76 | font: inherit;
77 | background: none;
78 | border: none;
79 | cursor: pointer;
80 | }
81 | .copy:hover > .copyIconWrapper {
82 | background-color: var(--tweet-color-green-primary-hover);
83 | }
84 | .copy:hover .copyIcon {
85 | color: var(--tweet-color-green-primary);
86 | }
87 | .copy:hover > .copyText {
88 | color: var(--tweet-color-green-primary);
89 | text-decoration-line: underline;
90 | }
91 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/api/types/tweet.ts:
--------------------------------------------------------------------------------
1 | import type { TweetEditControl } from "./edit.js";
2 | import type { Indices, TweetEntities } from "./entities.js";
3 | import type { MediaDetails } from "./media.js";
4 | import type { TweetPhoto } from "./photo.js";
5 | import type { TweetUser } from "./user.js";
6 | import type { TweetVideo } from "./video.js";
7 |
8 | /**
9 | * Base tweet information shared by a tweet, a parent tweet and a quoted tweet.
10 | */
11 | export interface TweetBase {
12 | /**
13 | * Language code of the tweet. E.g "en", "es".
14 | */
15 | lang: string;
16 | /**
17 | * Creation date of the tweet in the format ISO 8601.
18 | */
19 | created_at: string;
20 | /**
21 | * Text range of the tweet text.
22 | */
23 | display_text_range: Indices;
24 | /**
25 | * All the entities that are part of the tweet. Like hashtags, mentions, urls, etc.
26 | */
27 | entities: TweetEntities;
28 | /**
29 | * The unique identifier of the tweet.
30 | */
31 | id_str: string;
32 | /**
33 | * The tweet text, including the raw text from the entities.
34 | */
35 | text: string;
36 | /**
37 | * Information about the user who posted the tweet.
38 | */
39 | user: TweetUser;
40 | /**
41 | * Edit information about the tweet.
42 | */
43 | edit_control: TweetEditControl;
44 | isEdited: boolean;
45 | isStaleEdit: boolean;
46 | }
47 |
48 | /**
49 | * A tweet as returned by the the Twitter syndication API.
50 | */
51 | export interface Tweet extends TweetBase {
52 | __typename: "Tweet";
53 | favorite_count: number;
54 | mediaDetails?: MediaDetails[];
55 | photos?: TweetPhoto[];
56 | video?: TweetVideo;
57 | conversation_count: number;
58 | news_action_type: "conversation";
59 | quoted_tweet?: QuotedTweet;
60 | in_reply_to_screen_name?: string;
61 | in_reply_to_status_id_str?: string;
62 | in_reply_to_user_id_str?: string;
63 | parent?: TweetParent;
64 | possibly_sensitive?: boolean;
65 | }
66 |
67 | /**
68 | * The parent tweet of a tweet reply.
69 | */
70 | export interface TweetParent extends TweetBase {
71 | reply_count: number;
72 | retweet_count: number;
73 | favorite_count: number;
74 | }
75 |
76 | /**
77 | * A tweet quoted by another tweet.
78 | */
79 | export interface QuotedTweet extends TweetBase {
80 | reply_count: number;
81 | retweet_count: number;
82 | favorite_count: number;
83 | mediaDetails?: MediaDetails[];
84 | self_thread: {
85 | id_str: string;
86 | };
87 | }
88 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/api/get-tweet.ts:
--------------------------------------------------------------------------------
1 | import type { Tweet } from "./types/index.js";
2 |
3 | const SYNDICATION_URL = "https://cdn.syndication.twimg.com";
4 |
5 | export class TwitterApiError extends Error {
6 | status: number;
7 | data: any;
8 |
9 | constructor({
10 | message,
11 | status,
12 | data,
13 | }: {
14 | message: string;
15 | status: number;
16 | data: any;
17 | }) {
18 | super(message);
19 | this.name = "TwitterApiError";
20 | this.status = status;
21 | this.data = data;
22 | }
23 | }
24 |
25 | const TWEET_ID = /^[0-9]+$/;
26 |
27 | function getToken(id: string) {
28 | return ((Number(id) / 1e15) * Math.PI)
29 | .toString(6 ** 2)
30 | .replace(/(0+|\.)/g, "");
31 | }
32 |
33 | /**
34 | * Fetches a tweet from the Twitter syndication API.
35 | */
36 | export async function getTweet(
37 | id: string,
38 | fetchOptions?: RequestInit,
39 | ): Promise
23 |
30 |
31 | {favoriteCount}
32 |
33 |
40 |
41 |
48 |
49 | Reply
50 |
51 |
52 |
20 |
26 |
93 |
--------------------------------------------------------------------------------
/packages/astro-tweet/src/twitter-theme/TweetMedia.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import clsx from "clsx";
3 | import {
4 | type EnrichedTweet,
5 | type EnrichedQuotedTweet,
6 | getMediaUrl,
7 | } from "../utils.js";
8 | import { type MediaDetails } from "../api/index";
9 | import type { TwitterComponents } from "./types.js";
10 | // import { TweetMediaVideo } from "./TweetMediaVideo.astro";
11 | import MediaImg from "./MediaImg.astro";
12 | import styles from "./tweet-media.module.css";
13 | import TweetMediaVideo from "./TweetMediaVideo.astro";
14 |
15 | const getSkeletonStyle = (media: MediaDetails, itemCount: number) => {
16 | let paddingBottom = 56.25; // default of 16x9
17 |
18 | // if we only have 1 item, show at original ratio
19 | if (itemCount === 1)
20 | paddingBottom =
21 | (100 / media.original_info.width) * media.original_info.height;
22 |
23 | // if we have 2 items, double the default to be 16x9 total
24 | if (itemCount === 2) paddingBottom = paddingBottom * 2;
25 |
26 | return {
27 | width: media.type === "photo" ? undefined : "unset",
28 | paddingBottom: `${paddingBottom}%`,
29 | };
30 | };
31 | interface Props {
32 | tweet: EnrichedTweet | EnrichedQuotedTweet;
33 | components?: TwitterComponents;
34 | quoted?: boolean;
35 | }
36 | const { tweet, components, quoted } = Astro.props;
37 | const length = tweet.mediaDetails?.length ?? 0;
38 | const Img = components?.MediaImg ?? MediaImg;
39 | ---
40 |
41 |
32 | 
38 |
39 |
40 |
41 |
42 |
43 |
77 |
84 |
91 |
92 |
42 |
85 |
--------------------------------------------------------------------------------
/demo/src/layouts/BaseLayout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Header from "../components/Header.astro";
3 | const isProd = import.meta.env.PROD;
4 | ---
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
21 |
25 |
26 |
27 |
28 |
32 |
33 |
34 |
35 |
39 |
40 |
41 |
45 |
46 |
50 |
54 | 1 && styles.grid2Columns,
46 | length === 3 && styles.grid3,
47 | length > 4 && styles.grid2x2,
48 | )}
49 | >
50 | {
51 | tweet.mediaDetails?.map((media: any) => (
52 |
53 | {media.type === "photo" ? (
54 |
60 |
64 | 
70 |
71 | ) : (
72 |
81 | ))
82 | }
83 |
84 |
73 |
77 |
79 | )}
80 |