8000 Merge pull request #196 from junhoyeo/junhoyeo/app-registry · enggaraziz/threads-api@89e050d · GitHub
[go: up one dir, main page]
Skip to content

Commit 89e050d

Browse files
junhoyeojunhoyeo
authored
Merge pull request junhoyeo#196 from junhoyeo/junhoyeo/app-registry
web-ui(apps): Initialize App Registry
2 parents eda8fb7 + 48955ca commit 89e050d

20 files changed

+30
lines changed

‎threads-web-ui/app/[username]/page.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { threadsAPI } from '@/lib/api';
22
import Image from 'next/image';
33
import Link from 'next/link';
4+
import { redirect } from 'next/navigation';
45
import React from 'react';
56
import { Thread, ThreadsIcons } from 'react-threads';
67
import { Thread as ThreadType, ThreadsUser } from 'threads-api';
78

89
const UserProfilePage = async ({ params }: { params: { username: string } }) => {
9-
const username = params.username;
10+
if (!params.username.startsWith('%40') && !params.username.startsWith('@')) {
11+
redirect(`/@${params.username}`);
12+
}
1013

14+
const username = params.username.replaceAll('%40', '').replaceAll('@', '');
1115
if (!username) {
1216
return;
1317
}

‎threads-web-ui/app/apps/page.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { AnalyticsTrackerLogView } from '@/components/AnalyticsTracker';
2+
import { AppDirectoryItem } from '@/components/AppDirectoryItem';
3+
4+
export default async function AppDirectory() {
5+
return (
6+
<>
7+
<AnalyticsTrackerLogView event={['view_app_directory', undefined]} />
8+
<div className="">
9+
<header className="flex flex-col gap-5 pt-[120px] pb-12 px-4 items-center rounded-3xl">
10+
<h1 className="text-6xl font-black tracking-tight text-center text-slate-500">Explore Apps</h1>
11+
<p className="text-2xl text-center text-slate-400">
12+
Community-Made Apps That Fuels the Text Metaverse.
13+
</p>
14+
</header>
15+
16+
<ul className="flex flex-col w-full max-w-5xl gap-2 px-5 mx-auto">
17+
<AppDirectoryItem />
18+
<AppDirectoryItem />
19+
<AppDirectoryItem />
20+
</ul>
21+
</div>
22+
</>
23+
);
24+
}

‎threads-web-ui/app/globals.css

+5
Original file line numberDiff line numberDiff line change
@@ -110,3 +110,8 @@ img {
110110
user-select: none;
111111
-webkit-user-drag: none;
112112
}
113+
114+
::selection {
115+
background-color: #e5e7eb;
116+
color: #111827;
117+
}

‎threads-web-ui/app/layout.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import type { Metadata } from 'next';
22
import { Inter } from 'next/font/google';
33

44
import './globals.css';
5+
import { NavigationBar } from '@/components/NavigationBar';
6+
import { Footer } from '@/components/Footer';
7+
import { AnalyticsTrackerInit } from '@/components/AnalyticsTracker';
58

69
const inter = Inter({ subsets: ['latin'] });
710

@@ -10,10 +13,17 @@ export const metadata: Metadata = {
1013
description: 'Unofficial, Reverse-Engineered Clients for Threads',
1114
};
1215

13-
export default function RootLayout({ children }: { children: React.ReactNode }) {
16+
export default function Layout({ children }: { children: React.ReactNode }) {
1417
return (
1518
<html lang="en">
16-
<body className={inter.className}>{children}</body>
19+
<body className={inter.className}>
20+
<AnalyticsTrackerInit />
21+
<NavigationBar />
22+
23+
{children}
24+
25+
<Footer />
26+
</body>
1727
</html>
1828
);
1929
}

‎threads-web-ui/app/page.tsx

+47-25
< 1CF5 tr class="diff-line-row">
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,38 @@ import { BookOpen, Star, Zap } from 'lucide-react';
22

33
import { Globe } from '@/components/Globe';
44

5-
import './globals.css';
5+
import { UnaffiliatedBrands } from '@/components/UnaffiliatedBrands';
6+
import { AmplitudeClient } from 'amplitude-js';
7+
import { Analytics } from '@/lib/analytics';
8+
import { AnalyticsTrackerLogView } from '@/components/AnalyticsTracker';
9+
import Link from 'next/link';
610

711
const getStargazersCount = async (): Promise<number> => {
8-
const res = await fetch('https://api.github.com/repos/junhoyeo/threads-api', {
9-
next: { revalidate: 60 },
10-
});
11-
const data = await res.json();
12-
return data.stargazers_count;
12+
try {
13+
const res = await fetch('https://api.github.com/repos/junhoyeo/threads-api', {
14+
next: { revalidate: 60 },
15+
});
16+
const data = await res.json();
17+
return data.stargazers_count;
18+
} catch (e) {
19+
return 1_341;
20+
}
1321
};
1422

1523
export default async function Home() {
1624
const stargazersCount = await getStargazersCount();
1725

1826
return (
1927
<>
28+
<AnalyticsTrackerLogView event={['view_landing', undefined]} />
2029
<div className="z-0 flex flex-col items-center">
2130
<div className="z-20 flex flex-col items-center">
22-
<header className="flex flex-col gap-5 pt-[64px] pb-12 px-4 items-center rounded-3xl">
23-
<h1 className="text-6xl font-black tracking-tight text-center text-slate-500">
31+
<header className="flex flex-col gap-5 pt-[120px] pb-12 px-4 items-center rounded-3xl">
32+
<h1 className="font-black tracking-tight text-center text-7xl text-slate-500">
2433
Making Threads <br />
2534
Work in <span className="text-slate-50">Code</span>
2635
</h1>
27-
<p className="text-center text-slate-400">
36+
<p className="text-2xl text-center text-slate-400">
2837
Threads API — Unofficial, Reverse-Engineered Clients for Threads.
2938
</p>
3039
</header>
@@ -58,15 +67,24 @@ export default async function Home() {
5867
<span className="font-mono font-medium text-slate-400">
5968
yarn add <span className="text-slate-50">threads-api</span>
6069
</span>
61-
<span className="absolute flex items-center text-sm gap-1 px-1.5 py-0.5 font-medium bg-yellow-200 rounded-sm text-black/80 -right-4 -bottom-3">
62-
<Star className="text-zinc-900 fill-zinc-900" size={14} /> {stargazersCount.toLocaleString()}
63-
</span>
70+
<a href="https://github.com/junhoyeo/threads-api/stargazers" target="_blank">
71+
<span className="absolute flex items-center text-sm gap-1 px-1.5 py-0.5 font-medium bg-yellow-200 rounded-sm text-black/80 -right-4 -bottom-3 hover:scale-110 hover:bg-yellow-300 transition-all">
72+
<Star className="text-zinc-900 fill-zinc-900" size={14} /> {stargazersCount.toLocaleString()}
73+
</span>
74+
</a>
75+
</div>
76+
<div className="flex gap-2 mt-5">
77+
<a href="https://github.com/junhoyeo/threads-api" target="_blank">
78+
<button className="px-8 py-4 rounded-[16px] bg-black shadow-2xl shadow-slate-600/60 text-slate-300 font-bold">
79+
View on GitHub
80+
</button>
81+
</a>
82+
<Link href="/apps">
83+
<button className="px-8 py-4 rounded-[16px] bg-white shadow-2xl shadow-slate-600/60 text-black font-bold">
84+
Explore Apps
85+
</button>
86+
</Link>
6487
</div>
65-
<a href="https://github.com/junhoyeo/threads-api">
66-
<button className="mt-3 px-8 py-4 rounded-[16px] bg-black shadow-xl shadow-slate-900/20 text-slate-300">
67-
View on GitHub
68-
</button>
69-
</a>
7088
</div>
7189

7290
<div className="mt-[-200px] mb-[-156px] z-10 opacity-40 relative">
@@ -76,14 +94,18 @@ export default async function Home() {
7694
</div>
7795
</div>
7896

79-
<ul className="z-10 flex w-full max-w-4xl gap-2 px-5">
80-
<li className="flex-1 p-4 border rounded-xl bg-zinc-900 border-zinc-800 text-slate-200">
81-
<BookOpen /> <h3 className="mt-3 text-lg font-medium">Read Data</h3>
82-
</li>
83-
<li className="flex-1 p-4 border rounded-xl bg-zinc-900 border-zinc-800 text-slate-200">
84-
<Zap /> <h3 className="mt-3 text-lg font-medium">Publish Threads</h3>
85-
</li>
86-
</ul>
97+
<div className="z-10 flex flex-col items-center w-full">
98+
<UnaffiliatedBrands />
99+
100+
<ul className="flex w-full max-w-4xl gap-2 px-5">
101+
<li className="flex-1 p-4 border rounded-xl bg-zinc-900 border-zinc-800 text-slate-200">
102+
<BookOpen /> <h3 className="mt-3 text-lg font-medium">Read Data</h3>
103+
</li>
104+
<li className="flex-1 p-4 border rounded-xl bg-zinc-900 border-zinc-800 text-slate-200">
105+
<Zap /> <h3 className="mt-3 text-lg font-medium">Publish Threads</h3>
106+
</li>
107+
</ul>
108+
</div>
87109
</div>
88110
</>
89111
);

‎threads-web-ui/assets/app.png

548 KB
Loading

‎threads-web-ui/assets/instagram.svg

+12
Loading

‎threads-web-ui/assets/meta.svg

+17
Loading

‎threads-web-ui/assets/openai.svg

+28
Loading

‎threads-web-ui/assets/pirate-flag.png

766 KB
Loading

‎threads-web-ui/assets/twitter.svg

+18
Loading

‎threads-web-ui/components/AnalyticsTracker.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client';
2+
3+
import { Analytics, AnalyticsEvent } from '@/lib/analytics';
4+
import { useEffect, useRef } from 'react';
5+
6+
export const AnalyticsTrackerInit: React.FC = () => {
7+
Analytics.initialize();
8+
return <></>;
9+
};
10+
11+
export const AnalyticsTrackerLogView = <TName extends keyof AnalyticsEvent>(props: {
12+
event: [name: TName, properties: AnalyticsEvent[TName]];
13+
}) => {
14+
const isLoggedRef = useRef<boolean>(false);
15+
16+
useEffect(() => {
17+
if (isLoggedRef.current) {
18+
return;
19+
}
20+
isLoggedRef.current = true;
21+
Analytics.logEvent(...props.event);
22+
}, []);
23+
return <></>;
24+
};

0 commit comments

Comments
 (0)
0