Skip to content

Commit

Permalink
change landing
Browse files Browse the repository at this point in the history
  • Loading branch information
@Darginec05
Darginec05 committed Oct 6, 2024
1 parent 3f13e47 commit faa418c
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 79 deletions.
19 changes: 16 additions & 3 deletions web/next-example/src/api/request.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,25 @@ export async function fetchRepoContributors({ owner, repo }: RepoFetchOptions):
return contributors;
}

export async function fetchRepoSponsors({ owner, repo }: RepoFetchOptions) {
const sponsors = await request(`https://api.github.com/repos/${owner}/${repo}/sponsors`, {
export async function fetchRepoSponsors({ owner, repo }: RepoFetchOptions): Promise<Sponsors> {
const sponsors = await request<SponsorResponse>(`https://ghs.vercel.app/v3/sponsors/${owner}`, {
headers: {
Authorization: `token ${GITHUB_TOKEN}`,
Accept: 'application/vnd.github.v3+json',
},
});
return sponsors;

return sponsors.sponsors;
}

export type SponsorItem = {
username: string;
avatar: string;
};

export type Sponsors = Record<'current' | 'past', SponsorItem[]>;

export type SponsorResponse = {
status: string;
sponsors: Sponsors;
};
27 changes: 27 additions & 0 deletions web/next-example/src/components/landing/GithubSponsorButton/GithubSponsorButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react';

export const GithubSponsorButton = () => {
return (
<a
href="https://github.com/sponsors/Darginec05"
target="_blank"
title="Sponsor Yoopta-Editor"
rel="noopener noreferrer"
className="inline-flex md:mt-0 mt-2 ml-0 md:ml-2 items-center text-sm px-4 py-2 bg-[#e8279a] hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 rounded-md shadow-md transition duration-150 ease-in-out hover:ring-2 hover:ring-primary hover:ring-offset-2"
>
<span className="mr-2">
<svg
aria-hidden="true"
height="16"
viewBox="0 0 16 16"
version="1.1"
width="16"
className="text-[#fff] fill-[#fff]"
>
<path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path>
</svg>
</span>
<span>Sponsor</span>
</a>
);
};
49 changes: 46 additions & 3 deletions web/next-example/src/components/landing/GithubSponsors/GithubSponsors.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,51 @@
export const GithubSponsors = () => {
import { Sponsors } from '@/api/request';
import { PlusIcon } from 'lucide-react';

type Props = {
sponsors: Sponsors;
};

export const GithubSponsors = ({ sponsors }: Props) => {
return (
<div>
<h1>Github Sponsors</h1>
<p>Support us on Github Sponsors</p>
<h4 className="text-center mt-4 text-lg font-semibold">Sponsors 💖</h4>
<div className="w-full flex-wrap flex justify-center py-2">
{sponsors.current.map((sponsor) => (
<a
key={sponsor.username}
href={`https://github.com/${sponsor.username}`}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-18 h-18 rounded-full shadow-lg m-2"
>
<img src={sponsor.avatar} alt={`${sponsor.username} avatar`} className="w-14 h-14 rounded-full" />
</a>
))}
</div>
<div className="w-full flex-wrap flex justify-center">
{sponsors.past.map((sponsor) => (
<a
key={sponsor.username}
href={`https://github.com/${sponsor.username}`}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-18 h-18 rounded-full shadow-lg m-2"
>
<img src={sponsor.avatar} alt={`${sponsor.username} avatar`} className="w-14 h-14 rounded-full" />
</a>
))}
</div>
<div className="w-full flex-wrap flex justify-center">
<a
href="https://github.com/sponsors/Darginec05"
target="_blank"
rel="noopener noreferrer"
title="Become sponsor"
className="flex items-center justify-center w-18 h-18 bg-[#181c21] rounded-full shadow-lg m-2"
>
<PlusIcon size={30} color="#1f6feb" className="w-14 h-14 rounded-full animate-pulse" />
</a>
</div>
</div>
);
};
80 changes: 7 additions & 73 deletions web/next-example/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,19 @@ import { Head } from '@/components/Head/Head';
import { ProductHuntButton } from '@/components/landing/ProductHuntButton/ProductHuntButton';
import { GithubButton } from '@/components/landing/GithubButton/GithubButton';
import { Header } from '@/components/landing/Header/Header';
import { fetchRepoContributors, fetchRepoData, fetchRepoSponsors, request } from '@/api/request';
import { fetchRepoContributors, fetchRepoData, fetchRepoSponsors, request, Sponsors } from '@/api/request';
import { GithubContributors } from '@/components/landing/GithubContributors/GithubContributors';
import { Contributor, Repository } from '@/components/landing/types';
import { RoadmapList } from '@/components/landing/RoadmapList/RoadmapList';
import { FeatureList } from '@/components/landing/FeatureList/FeatureList';
import { Divider } from '@/components/landing/Divider/Divider';
import { GithubSponsorButton } from '@/components/landing/GithubSponsorButton/GithubSponsorButton';
import { GithubSponsors } from '@/components/landing/GithubSponsors/GithubSponsors';

type Props = {
repoData: Repository;
contributors: Contributor[];
sponsors: any;
sponsors: Sponsors;
};

export default function Home({ repoData, sponsors, contributors }: Props) {
Expand All @@ -39,8 +41,9 @@ export default function Home({ repoData, sponsors, contributors }: Props) {
</a>
<h1 className="text-center scroll-m-20 text-4xl font-bold tracking-tight">Meet Yoopta-Editor 🚀</h1>
<div className="flex items-center mt-4 flex-col md:flex-row">
<ProductHuntButton />
{/* <ProductHuntButton /> */}
{repoData && <GithubButton repo={repoData} />}
<GithubSponsorButton />
</div>
<p className="font-space-grotesk text-lg leading-snug md:text-xl mt-6 md:w-[680px] text-[#FFFFFFB2] text-center">
Open-source rich-text editor that's truly{' '}
Expand Down Expand Up @@ -88,76 +91,7 @@ export default function Home({ repoData, sponsors, contributors }: Props) {
alt="Bring my ideas to world"
/>
</div>
<div>
<h4 className="text-center mt-4 text-lg font-semibold">Current sponsors 💖</h4>
<div className="w-full flex-wrap flex justify-center py-2">
<a
href="https://tapflow.co/"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-18 h-18 rounded-full shadow-lg m-2"
>
<img
src="https://framerusercontent.com/images/3deWAtwBX6tWvPegfQE2tNf0T0.png"
alt="Tapflow logo"
className="w-14 h-14 rounded-full"
/>
</a>
<a
href="https://yoodocs.space/"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-18 h-18 bg-white rounded-full shadow-lg m-2"
>
<img src="/yoopta/yoopta-logo.png" alt="Yoopta logo" className="w-14 h-14 rounded-full" />
</a>
<a
href="https://github.com/chrassendk"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-18 h-18 bg-white rounded-full shadow-lg m-2"
>
<img
src="https://avatars.githubusercontent.com/u/10469954?s=60&v=4"
alt="yoopta logo"
className="w-14 h-14 rounded-full"
/>
</a>
<a
href="https://github.com/mrfullset"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-18 h-18 bg-white rounded-full shadow-lg m-2"
>
<img
src="https://avatars.githubusercontent.com/u/98813378?s=60&v=4"
alt="yoopta logo"
className="w-14 h-14 rounded-full"
/>
</a>
<a
href="https://github.com/bluewave-labs"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-18 h-18 bg-white rounded-full shadow-lg m-2"
>
<img
src="https://avatars.githubusercontent.com/u/165089105?s=200&v=4"
alt="yoopta logo"
className="w-14 h-14 rounded-full"
/>
</a>
<a
href="https://github.com/sponsors/Darginec05"
target="_blank"
rel="noopener noreferrer"
title="Become sponsor"
className="flex items-center justify-center w-18 h-18 bg-[#181c21] rounded-full shadow-lg m-2"
>
<PlusIcon size={30} color="#1f6feb" className="w-14 h-14 rounded-full animate-pulse" />
</a>
</div>
</div>
<GithubSponsors sponsors={sponsors} />
</div>
<Divider />
<GithubContributors contributors={contributors} />
Expand Down

0 comments on commit faa418c

Please sign in to comment.