Skip to content

Commit

Permalink
docs: added trusted by section (#734)
Browse files Browse the repository at this point in the history
## 📜 Description

Added apps/templates/frameworks that use this library or recommend to
use it.

## 💡 Motivation and Context

To encourage/convince devs to use this library and show/prove that this
library powers many popular `react-native` apps/boilerplates and trusted
by many developers.

I also added a link to submit a PR for devs who wanted to show, that
they also use this lib.

I don't think I violate any legal rules, because all that information is
publicly available:
https://github.com/kirillzyusko/react-native-keyboard-controller/network/dependents

As time passes on I'll periodically update this table 😊 

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### Docs
- added trusted by section on landing page.

## 🤔 How Has This Been Tested?

Tested on localhost:3000.

## 📸 Screenshots (if appropriate):

<img width="1368" alt="image"
src="https://github.com/user-attachments/assets/555c2777-399b-43c0-a7ad-76284d488659"
/>

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko authored Dec 18, 2024
1 parent 095b4da commit 16c0a76
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 1 deletion.
5 changes: 4 additions & 1 deletion cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,10 @@
"focusable",
"iphonesimulator",
"suspendable",
"libc"
"libc",
"chatwoot",
"obytes",
"kitsu"
],
"ignorePaths": [
"node_modules",
Expand Down
39 changes: 39 additions & 0 deletions docs/src/pages/index.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,42 @@
align-items: center;
justify-content: center;
}

.trustedBySection {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
padding-bottom: 4rem;
}

.trustedByTitle {
padding-bottom: 16px;
}

.trustedByImg {
margin: 0px 15px;
border-radius: 25px;
width: 100px;
height: 100px;
box-shadow: 5px 5px 51px -29px rgba(139, 139, 139, 1);
}

.trustedByContainer {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
max-width: 1200px;
max-height: 460px; /* 3 rows only */
row-gap: 15px;
overflow: hidden;
}

.addYourApp {
width: 100%;
max-width: 1200px;
text-align: right;
margin-right: 20px;
}
102 changes: 102 additions & 0 deletions docs/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,107 @@ function HomepageHeader() {
);
}

const trustedBy = [
{
img: "https://avatars.githubusercontent.com/u/476779?s=200&v=4",
alt: "Expensify Mobile App",
link: "https://github.com/Expensify/App",
name: "Expensify",
},
{
img: "https://avatars.githubusercontent.com/u/94650532?s=200&v=4",
alt: "BlueSky Mobile App",
link: "https://github.com/bluesky-social/social-app",
name: "BlueSky",
},
{
img: "https://avatars.githubusercontent.com/u/12504344?s=200&v=4",
alt: "Expo framework",
link: "https://docs.expo.dev/guides/keyboard-handling/",
name: "Expo",
},
{
img: "https://avatars.githubusercontent.com/u/3902527?s=200&v=4",
alt: "InfiniteRed Ignite react native project boilerplate",
link: "https://github.com/infinitered/ignite",
name: "Ignite",
},
{
img: "https://avatars.githubusercontent.com/u/88587596?s=200&v=4",
alt: "TonKeeper Wallet app",
link: "https://github.com/tonkeeper/wallet",
name: "TON Wallet",
},
{
img: "https://avatars.githubusercontent.com/u/23416667?s=200&v=4",
alt: "Chatwoot mobile app",
link: "https://github.com/chatwoot/chatwoot-mobile-app",
name: "Chatwoot",
},
{
img: "https://avatars.githubusercontent.com/u/4201786?s=200&v=4",
alt: "Obytes react native project template",
link: "https://github.com/obytes/react-native-template-obytes",
name: "Obytes",
},
{
img: "https://avatars.githubusercontent.com/u/431672?s=200&v=4",
alt: "Minds app",
link: "https://github.com/Minds/mobile-native",
name: "Minds",
},
{
img: "https://avatars.githubusercontent.com/u/79029086?s=200&v=4",
alt: "Showtime mobile app",
link: "https://github.com/showtime-xyz/showtime-frontend",
name: "Showtime",
},
{
img: "https://avatars.githubusercontent.com/u/97704884?s=200&v=4",
alt: "Converse Messenger",
link: "https://github.com/ephemeraHQ/converse-app",
name: "Converse",
},
{
img: "https://avatars.githubusercontent.com/u/6613230?s=200&v=4",
alt: "Edge App",
link: "https://github.com/EdgeApp/edge-react-gui",
name: "Edge",
},
{
img: "https://avatars.githubusercontent.com/u/7648832?s=200&v=4",
alt: "Kitsu App",
link: "https://github.com/hummingbird-me/kitsu-mobile",
name: "Kitsu",
},
];

function TrustedBy(): JSX.Element {
return (
<section className={clsx(styles.trustedBySection)}>
<h2 class={clsx(styles.trustedByTitle)}>Trusted by</h2>
<div className={clsx(styles.trustedByContainer)}>
{trustedBy.map((item, index) => (
<a key={index} href={item.link} target="_blank">
<img
alt={item.alt}
className={clsx(styles.trustedByImg)}
src={item.img}
/>
<h4>{item.name}</h4>
</a>
))}
</div>
<p class={clsx(styles.addYourApp)}>
Would like to show your project here?{" "}
<a href="https://github.com/kirillzyusko/react-native-keyboard-controller/edit/main/docs/src/pages/index.tsx">
Submit a PR
</a>
</p>
</section>
);
}

export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext();

Expand All @@ -39,6 +140,7 @@ export default function Home(): JSX.Element {
<HomepageHeader />
<main>
<HomepageFeatures />
<TrustedBy />
</main>
</Layout>
);
Expand Down

0 comments on commit 16c0a76

Please sign in to comment.