├── .editorconfig
├── .github
├── funding.yml
├── issue_template.md
├── pull_request_template.md
└── workflows
│ └── test.yml
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── example
├── .env.example
├── .gitignore
├── .vscode
│ └── settings.json
├── app
│ ├── layout.tsx
│ └── page.tsx
├── components
│ ├── GitHubShareButton.tsx
│ ├── RandomTweet.tsx
│ ├── TweetPage.tsx
│ ├── anchor.tsx
│ └── styles.module.css
├── demo.jpg
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│ ├── [tweetId].tsx
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── api
│ │ ├── get-tweet-ast
│ │ │ └── [tweetId].ts
│ │ └── tweets.ts
│ └── dynamic
│ │ └── [tweetId].tsx
├── public
│ ├── favicon.png
│ └── robots.txt
├── readme.md
├── styles
│ └── globals.css
├── tsconfig.json
└── yarn.lock
├── lerna.json
├── license
├── package.json
├── packages
├── react-static-tweets
│ ├── package.json
│ ├── readme.md
│ ├── src
│ │ ├── client.ts
│ │ ├── format-number.ts
│ │ ├── html
│ │ │ ├── handlers.tsx
│ │ │ └── node.tsx
│ │ ├── index.ts
│ │ ├── tweet-client.tsx
│ │ ├── tweet.tsx
│ │ ├── twitter-layout
│ │ │ ├── components
│ │ │ │ ├── anchor.tsx
│ │ │ │ ├── code.tsx
│ │ │ │ ├── containers.tsx
│ │ │ │ ├── embedded-tweet.tsx
│ │ │ │ ├── headings.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── lists.tsx
│ │ │ │ ├── media.tsx
│ │ │ │ ├── table.tsx
│ │ │ │ ├── text.tsx
│ │ │ │ ├── tweet
│ │ │ │ │ ├── tweet-header.module.css
│ │ │ │ │ ├── tweet-header.tsx
│ │ │ │ │ ├── tweet-info.tsx
│ │ │ │ │ └── tweet.tsx
│ │ │ │ └── twitter.tsx
│ │ │ ├── skeleton.tsx
│ │ │ └── tweet-skeleton.tsx
│ │ └── twitter.tsx
│ ├── styles.css
│ └── tsconfig.json
└── static-tweets
│ ├── package.json
│ ├── readme.md
│ ├── src
│ ├── fetchTweetAst.ts
│ ├── index.ts
│ ├── markdown
│ │ ├── htmlToAst.ts
│ │ ├── markdownToAst.ts
│ │ ├── rehype-minify.ts
│ │ ├── rehype-tweet.ts
│ │ └── schema.ts
│ └── twitter
│ │ ├── api.ts
│ │ ├── embed
│ │ └── tweet-html.ts
│ │ ├── getTweetHtml.ts
│ │ └── tweet-html.ts
│ └── tsconfig.json
├── readme.md
├── tsconfig.base.json
├── tsconfig.json
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.github/funding.yml:
--------------------------------------------------------------------------------
1 | github: [transitive-bullshit]
2 |
--------------------------------------------------------------------------------
/.github/issue_template.md:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: test
2 | on: [push, pull_request]
3 | jobs:
4 | test:
5 | runs-on: ubuntu-latest
6 | strategy:
7 | matrix:
8 | node-version: [14.x, 16.x, 18.x, 19.x]
9 | steps:
10 | - uses: actions/checkout@v2
11 |
12 | - name: Use Node.js ${{ matrix.node-version }}
13 | uses: actions/setup-node@v2
14 | with:
15 | node-version: ${{ matrix.node-version }}
16 | cache: yarn
17 |
18 | - run: yarn install --frozen-lockfile
19 | - run: yarn build
20 | - run: yarn test
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # builds
7 | build
8 | dist
9 |
10 | # misc
11 | .DS_Store
12 | .env
13 | .env.local
14 | .env.development.local
15 | .env.test.local
16 | .env.production.local
17 | .cache
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | .vscode/settings.json
23 |
24 | .next
25 | .vercel
26 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | docs/
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .snapshots/
2 | .next/
3 | .vercel/
4 | build/
5 | docs/
6 | node_modules/
7 | lerna.json
8 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "jsxSingleQuote": true,
4 | "semi": false,
5 | "useTabs": false,
6 | "tabWidth": 2,
7 | "bracketSpacing": true,
8 | "bracketSameLine": false,
9 | "arrowParens": "always",
10 | "trailingComma": "none"
11 | }
12 |
--------------------------------------------------------------------------------
/example/.env.example:
--------------------------------------------------------------------------------
1 | # this is only used for the random tweet fetching and isn't necessary to test the demo normally
2 | #TWITTER_API_TOKEN=
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | .vercel
2 |
--------------------------------------------------------------------------------
/example/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "typescript.tsdk": "node_modules/typescript/lib",
3 | "typescript.enablePromptUseWorkspaceTsdk": true
4 | }
5 |
--------------------------------------------------------------------------------
/example/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 |
3 | // core styles shared by all of react-static-tweets (required)
4 | import 'react-static-tweets/styles.css'
5 |
6 | export default function RootLayout({
7 | // Layouts must accept a children prop.
8 | // This will be populated with nested layouts or pages
9 | children
10 | }: {
11 | children: React.ReactNode
12 | }) {
13 | return (
14 |
15 | {children}
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/example/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { fetchTweetAst } from 'static-tweets'
2 | import { ExampleTweetPage } from 'components/TweetPage'
3 | import { notFound } from 'next/navigation'
4 |
5 | // default tweet to show on the homepage
6 | const tweetId = '1352687755621351425'
7 |
8 | export default async function HomePage() {
9 | const tweetAst = await fetchTweetAst(tweetId)
10 | if (!tweetAst) {
11 | console.warn('tweet not found', tweetId)
12 | return notFound()
13 | }
14 |
15 | return
16 | }
17 |
--------------------------------------------------------------------------------
/example/components/GitHubShareButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import styles from './styles.module.css'
4 |
5 | export const GitHubShareButton: React.FC = () => {
6 | return (
7 |
15 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/example/components/RandomTweet.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react'
4 | import { useState } from 'react'
5 | import Link from 'next/link'
6 |
7 | import styles from './styles.module.css'
8 |
9 | const APP_URL = 'https://react-static-tweets.vercel.app'
10 | const cn = (arr) => arr.filter(Boolean).join(' ')
11 |
12 | function getRandomId(id, tweets) {
13 | let i = 0
14 | while (true) {
15 | const randomId = tweets[Math.floor(Math.random() * tweets.length)]
16 | if (randomId !== id) return randomId
17 | // Make sure to not create an infinite loop
18 | i++
19 | if (i >= tweets.length) return id
20 | }
21 | }
22 |
23 | async function getError(res) {
24 | if (res.headers.get('Content-Type').includes('application/json')) {
25 | const data = await res.json()
26 | return data.errors[0]
27 | }
28 | return { message: (await res.text()) || res.statusText }
29 | }
30 |
31 | export function RandomTweet({ initialId }) {
32 | const [{ id, loading, error, success }, setState] = useState({
33 | id: initialId,
34 | loading: false
35 | } as any)
36 |
37 | const fetchTweet = async (e) => {
38 | e.preventDefault()
39 | setState({ id, loading: true })
40 |
41 | const res = await fetch('/api/tweets')
42 |
43 | if (res.ok) {
44 | const { tweets } = await res.json()
45 | return setState({
46 | id: getRandomId(id, tweets),
47 | loading: false,
48 | success: true
49 | })
50 | }
51 |
52 | const error = await getError(res)
53 |
54 | setState({ id, loading: false, error })
55 | }
56 |
57 | return (
58 |
59 |
60 | {APP_URL}/
{id}
61 |
62 |
63 |
64 |
80 |
81 | {error && ⚠️ Error: {error.message}. Please try again}
82 |
83 |
16 |
React Static Tweets Demo
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/example/components/anchor.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { forwardRef } from 'react'
3 | import styles from './styles.module.css'
4 |
5 | export const A = forwardRef(
6 | ({ children, href, title, blank = true, onClick }: any, ref: any) => (
7 |
16 | {blank ? <>{children} » : children}
17 |
18 | )
19 | )
20 |
--------------------------------------------------------------------------------
/example/components/styles.module.css:
--------------------------------------------------------------------------------
1 | @media (max-width: 420px) {
2 | .githubCorner {
3 | display: none;
4 | }
5 | }
6 |
7 | .githubCorner:hover .octoArm {
8 | animation: octocat-wave 560ms ease-in-out;
9 | }
10 |
11 | @keyframes octocat-wave {
12 | 0%,
13 | 100% {
14 | transform: rotate(0);
15 | }
16 | 20%,
17 | 60% {
18 | transform: rotate(-25deg);
19 | }
20 | 40%,
21 | 80% {
22 | transform: rotate(10deg);
23 | }
24 | }
25 |
26 | .anchor {
27 | --tweet-link-color: #2b7bb9;
28 | color: var(--tweet-link-color);
29 | }
30 |
31 | .anchor:hover {
32 | --tweet-link-color-hover: #3b94d9;
33 | text-decoration: none;
34 | color: var(--tweet-link-color-hover);
35 | }
36 |
37 | .title {
38 | text-align: center;
39 | margin-bottom: 1em;
40 | }
41 |
42 | .random-tweet-container {
43 | padding: 2em 0;
44 | }
45 |
46 | .random-tweet {
47 | font-size: 0.875rem;
48 | }
49 |
50 | .random-tweet > span {
51 | margin-left: 0.5rem;
52 | color: #ff1a1a;
53 | animation: changed 0.5s;
54 | }
55 |
56 | .generate-tweet-button {
57 | --accents-5: #666666;
58 | height: 1rem;
59 | font-size: 0.875rem;
60 | text-decoration: underline;
61 | color: var(--accents-5);
62 | background: transparent;
63 | cursor: pointer;
64 | border: none;
65 | outline: none;
66 | margin-top: 0.25rem;
67 | }
68 |
69 | .generate-tweet-button:hover {
70 | text-decoration: none;
71 | }
72 |
73 | .generate-tweet-button.tweet-loading {
74 | cursor: wait;
75 | text-decoration: none;
76 | animation: changed 1s;
77 | }
78 |
79 | .id {
80 | animation: updated 1.7s;
81 | }
82 |
83 | @keyframes updated {
84 | 30% {
85 | background-color: yellow;
86 | }
87 | 100% {
88 | background-color: transparent;
89 | }
90 | }
91 |
92 | @keyframes changed {
93 | 0% {
94 | opacity: 0;
95 | }
96 | 100% {
97 | opacity: 100;
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/example/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/transitive-bullshit/react-static-tweets/e2184d706c60c5e6ee8f63fb576bc3da832c11e6/example/demo.jpg
--------------------------------------------------------------------------------
/example/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/example/next.config.js:
--------------------------------------------------------------------------------
1 | const withBundleAnalyzer = require('@next/bundle-analyzer')({
2 | enabled: process.env.ANALYZE === 'true'
3 | })
4 |
5 | /** @type {import('next').NextConfig} */
6 | const nextConfig = withBundleAnalyzer({
7 | experimental: {
8 | appDir: true
9 | },
10 | images: {
11 | domains: ['pbs.twimg.com'],
12 | formats: ['image/avif', 'image/webp']
13 | }
14 | })
15 |
16 | module.exports = nextConfig
17 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-static-tweets-example",
3 | "version": "2.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "analyze": "cross-env ANALYZE=true next build",
10 | "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
11 | "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
12 | "deploy": "vercel --prod"
13 | },
14 | "dependencies": {
15 | "@vercel/fetch": "^6.2.0",
16 | "cors": "^2.8.5",
17 | "date-fns": "^2.29.3",
18 | "next": "^13.1.1",
19 | "node-fetch": "^2.6.1",
20 | "react": "^18.2.0",
21 | "react-dom": "^18.2.0",
22 | "react-static-tweets": "^2.0.0",
23 | "static-tweets": "^2.0.0",
24 | "swr": "^2.0.0"
25 | },
26 | "devDependencies": {
27 | "@next/bundle-analyzer": "^13.1.1",
28 | "@types/node": "^18.11.18",
29 | "@types/react": "^18.0.26",
30 | "cross-env": "^7.0.2",
31 | "typescript": "^4.9.4"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/example/pages/[tweetId].tsx:
--------------------------------------------------------------------------------
1 | import { GetStaticProps } from 'next'
2 | import { fetchTweetAst } from 'static-tweets'
3 | import { ExampleTweetPage } from 'components/TweetPage'
4 |
5 | export const getStaticProps: GetStaticProps = async (context) => {
6 | const tweetId = context.params.tweetId as string
7 |
8 | try {
9 | const tweetAst = await fetchTweetAst(tweetId)
10 | if (!tweetAst) {
11 | console.warn('tweet not found', tweetId)
12 | return {
13 | notFound: true
14 | }
15 | }
16 |
17 | return {
18 | props: {
19 | tweetId,
20 | tweetAst
21 | },
22 | revalidate: 30
23 | }
24 | } catch (err) {
25 | console.error('error fetching tweet info', tweetId, err)
26 |
27 | throw err
28 | }
29 | }
30 |
31 | export async function getStaticPaths() {
32 | return {
33 | paths: ['/1352687755621351425', '/1358199505280262150'],
34 | fallback: true
35 | }
36 | }
37 |
38 | export default ExampleTweetPage
39 |
--------------------------------------------------------------------------------
/example/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Head from 'next/head'
3 |
4 | import '../styles/globals.css'
5 |
6 | // core styles shared by all of react-static-tweets (required)
7 | import 'react-static-tweets/styles.css'
8 |
9 | export default function App({ Component, pageProps }) {
10 | return (
11 | <>
12 |
13 |
14 |
15 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | React Static Tweets Demo
29 |
30 |
31 |
32 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/example/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Document, { Html, Head, Main, NextScript } from 'next/document'
3 |
4 | export default class MyDocument extends Document {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |