-
Notifications
You must be signed in to change notification settings - Fork 385
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* docs: init integrations page * add: integration logos, formatting * add: more integrations w/ logos * fix: alphabetical sorting, add: info page rough draft * fix: DIA logo * prettier: categories on slug page. rename: dev tooling -> developer tooling. add: privy guide rough * add: generated content. rm: search * - Small style changes - added search bar * Change font of category headings * remove bold * Restyling integrations * Merge * Add buttons --------- Co-authored-by: Martin Eckardt <martin.eckardt@avalabs.org>
- Loading branch information
1 parent
85c6c58
commit 64d8016
Showing
41 changed files
with
4,926 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,151 @@ | ||
import type { Metadata } from 'next'; | ||
import { notFound } from 'next/navigation'; | ||
import Link from 'next/link'; | ||
import { InlineTOC } from 'fumadocs-ui/components/inline-toc'; | ||
import { integrations } from '@/utils/source'; | ||
import { createMetadata } from '@/utils/metadata'; | ||
import { buttonVariants } from '@/components/ui/button'; | ||
import { ArrowUpRightIcon } from 'lucide-react'; | ||
// import { Control } from '@/app/(home)/blog/[slug]/page.client'; | ||
|
||
interface Param { | ||
slug: string; | ||
} | ||
|
||
export const dynamicParams = false; | ||
|
||
export default function Page({ | ||
params, | ||
}: { | ||
params: Param; | ||
}): React.ReactElement { | ||
const page = integrations.getPage([params.slug]); | ||
|
||
if (!page) notFound(); | ||
|
||
const path = `content/integrations/${page.file.path}`; | ||
|
||
const categories = page.data.category ? page.data.category.split(',').map((category) => category.trim()) : []; | ||
|
||
return ( | ||
<> | ||
<div | ||
className="container rounded-xl border mt-5 py-12 md:px-8" | ||
style={{ | ||
backgroundColor: 'black', | ||
backgroundImage: [ | ||
'linear-gradient(140deg, #3752AC 0%, transparent 50%)', | ||
'linear-gradient(to left top, #E84142 0%, transparent 50%)', | ||
'radial-gradient(circle at 100% 100%, #3752AC, #E84142 17%, transparent 20%)', | ||
].join(', '), | ||
backgroundBlendMode: 'difference, difference, normal', | ||
}} | ||
> | ||
<div className="flex items-center"> | ||
<img | ||
src={page.data.logo} | ||
alt={page.data.title} | ||
className="w-12 h-12 object-contain mr-4" | ||
/> | ||
<h1 className="mb-2 text-3xl font-bold text-white"> | ||
{page.data.title} | ||
</h1> | ||
</div> | ||
<p className="mb-4 text-white/80">{page.data.description}</p> | ||
<Link | ||
href="/integrations" | ||
className={buttonVariants({ size: 'sm', variant: 'secondary' })} | ||
> | ||
Back | ||
</Link> | ||
</div> | ||
<article className="container grid grid-cols-1 px-0 py-8 lg:grid-cols-[2fr_1fr] lg:px-4"> | ||
<div className="prose p-4"> | ||
<page.data.exports.default /> | ||
</div> | ||
<div className="flex flex-col gap-4 border-l p-4 text-sm"> | ||
<div> | ||
<p className="mb-1 text-sm text-muted-foreground">Developer:</p> | ||
<p className="font-medium">{page.data.developer}</p> | ||
</div> | ||
<div> | ||
<p className="mb-2 text-muted-foreground">Category:</p> | ||
<div className="flex flex-wrap items-center gap-4 text-xs"> | ||
{categories.map((category) => ( | ||
<div | ||
key={category} | ||
className="relative z-10 rounded-full bg-accent px-3 py-1.5 font-medium text-muted-foreground" | ||
> | ||
{category} | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
<div> | ||
<p className="mb-1 text-muted-foreground">Website:</p> | ||
<a href={page.data.website} target="_blank" rel="noreferrer noopener"> | ||
{page.data.website} | ||
</a> | ||
</div> | ||
<div> | ||
<p className="mb-1 text-muted-foreground">Documentation:</p> | ||
<a href={page.data.documentation} target="_blank" rel="noreferrer noopener"> | ||
{page.data.documentation} | ||
</a> | ||
</div> | ||
|
||
|
||
<a | ||
href={`https://github.com/ava-labs/avalanche-academy/blob/dev/${path}`} | ||
target="_blank" | ||
rel="noreferrer noopener" | ||
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground" | ||
> | ||
<ArrowUpRightIcon className="size-5" /> Edit on Github | ||
</a> | ||
|
||
{/* <Control url={page.url} /> */} | ||
</div> | ||
</article> | ||
</> | ||
); | ||
} | ||
|
||
export function generateMetadata({ params }: { params: Param }): Metadata { | ||
const page = integrations.getPage([params.slug]); | ||
|
||
if (!page) notFound(); | ||
|
||
const description = | ||
page.data.description ?? 'Learn how to build on Avalanche blockchain with Academy'; | ||
|
||
const imageParams = new URLSearchParams(); | ||
imageParams.set('title', page.data.title); | ||
imageParams.set('description', description); | ||
|
||
const image = { | ||
alt: 'Banner', | ||
url: `/api/og/guide/${params.slug[0]}?${imageParams.toString()}`, | ||
width: 1200, | ||
height: 630, | ||
}; | ||
|
||
return createMetadata({ | ||
title: page.data.title, | ||
description, | ||
openGraph: { | ||
url: `/docs/${page.slugs.join('/')}`, | ||
images: image, | ||
}, | ||
twitter: { | ||
images: image, | ||
}, | ||
}); | ||
} | ||
|
||
|
||
export function generateStaticParams(): Param[] { | ||
return integrations.getPages().map<Param>((page) => ({ | ||
slug: page.slugs[0], | ||
})); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Layout } from 'fumadocs-ui/layout'; | ||
import type { ReactNode } from 'react'; | ||
import { Footer } from '@/components/footer'; | ||
import { baseOptions } from '@/app/layout.config'; | ||
|
||
export default function HomeLayout({ | ||
children, | ||
}: { | ||
children: ReactNode; | ||
}): React.ReactElement { | ||
return <Layout {...baseOptions}> | ||
{children} | ||
<Footer /> | ||
</Layout>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
import Link from 'next/link'; | ||
import { integrations } from '@/utils/source'; | ||
import { cn } from '@/utils/cn'; | ||
import { buttonVariants } from '@/components/ui/button'; | ||
|
||
|
||
export default function Page(): React.ReactElement { | ||
const integrationsList = [...integrations.getPages()] | ||
const groupedIntegrations: { [key: string]: any[] } = integrationsList.reduce((acc: { [key: string]: any[] }, integration) => { | ||
const categories = integration.data.category ? integration.data.category.split(',').map((category) => category.trim()) : []; | ||
categories.forEach((category) => { | ||
if (!acc[category]) { | ||
acc[category] = []; | ||
} | ||
acc[category].push(integration); | ||
}); | ||
return acc; | ||
} | ||
, {}); | ||
const firstCategory = Object.keys(groupedIntegrations).sort()[0]; | ||
|
||
return ( | ||
<main className="py-12 sm:py-24"> | ||
<div className="mx-auto max-w-7xl px-6 lg:px-8"> | ||
<div className="mx-auto w-full flex flex-col items-center lg:mx-0"> | ||
<h1 className="mb-6 text-center text-4xl font-semibold md:text-5xl">Find an Integration</h1> | ||
<p className="mb-6 h-fit text-center p-2 text-fd-muted-foreground md:max-w-[80%] md:text-xl"> | ||
Discover best-in-class intergrations for your Avalanche L1 and learn how to use them. | ||
</p> | ||
<div className='inline-flex items-center gap-3'> | ||
<Link className={cn(buttonVariants())} href={`#${firstCategory}`}>Discover Integrations</Link> | ||
<Link className={cn(buttonVariants({ variant: 'outline' }))} href="https://github.com/ava-labs/avalanche-docs/blob/master/content/integrations" target='_blank'>Add your Integration</Link> | ||
</div> | ||
</div> | ||
<div className="flex flex-col md:flex-row md:space-x-12"> | ||
<div className="w-full mb-12 md:w-1/5"> | ||
<div className="sticky top-0 pt-20"> | ||
{/**<div className="inline-flex items-center gap-2 rounded-full border bg-secondary/50 p-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground w-full mb-4"> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-search ms-1 size-4"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg> | ||
<input type="text" placeholder="Search" className="w-full bg-transparent focus:outline-none" /> | ||
</div>**/} | ||
<ul className="space-y-2"> | ||
{/* Render the categories on sidelist */} | ||
{Object.keys(groupedIntegrations) | ||
.sort() | ||
.map((category) => ( | ||
<li key={category}> | ||
<a href={`#${category}`} className="text-md"> | ||
{category} | ||
</a> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
</div> | ||
<div className="w-full md:w-4/5"> | ||
|
||
{/* Render the integrations for each category */} | ||
{Object.entries(groupedIntegrations).sort().map(([category, integrations]) => ( | ||
<div key={category}> | ||
<section id={category}> | ||
<h2 className="text-2xl mb-8 pt-20">{category}</h2> | ||
</section> | ||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mx-auto w-full"> | ||
{integrations.map((integration) => ( | ||
<Link | ||
key={integration.url} | ||
href={integration.url} | ||
className="flex flex-col bg-card p-4 rounded-lg transition-shadow shadow hover:shadow-lg dark:bg-card-dark dark:border dark:border-slate-500 w-auto h-auto" | ||
> | ||
<div className="flex items-center mb-4"> | ||
<div className="w-8 h-8 mr-2 rounded-full overflow-hidden"> | ||
<img | ||
src={integration.data.logo} | ||
alt={integration.data.title} | ||
className="w-full h-full object-contain" | ||
/> | ||
</div> | ||
<div> | ||
<h3 className="text-xl">{integration.data.title}</h3> | ||
</div> | ||
</div> | ||
<p className="text-sm text-gray-500">{integration.data.description}</p> | ||
</Link> | ||
))} | ||
</div> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
</div> | ||
</main> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
--- | ||
title: Alchemy | ||
category: RPC Providers | ||
description: Alchemy is a blockchain developer platform that provides a suite of APIs and tools for building and scaling blockchain applications. | ||
logo: /images/alchemy.png | ||
developer: Alchemy | ||
website: https://www.alchemy.com/ | ||
documentation: https://docs.alchemy.com/ | ||
--- | ||
|
||
## Overview | ||
|
||
Alchemy is a comprehensive blockchain development platform that offers developers a wide range of tools and services. It simplifies the process of building, managing, and scaling blockchain applications. Alchemy’s platform provides access to various blockchain networks, including Ethereum, Polygon, and more, through reliable and scalable RPC (Remote Procedure Call) nodes. | ||
|
||
## Features | ||
|
||
- **Scalable Infrastructure**: Alchemy provides high-performance, scalable nodes that support various blockchain networks. | ||
- **Enhanced APIs**: Alchemy offers a suite of enhanced APIs, including the Alchemy API, that simplifies interaction with blockchain networks. | ||
- **Developer Tools**: Tools such as Alchemy Build, Monitor, and Notify help developers debug, track, and alert on blockchain transactions and events. | ||
- **Reliable Uptime**: With distributed and redundant infrastructure, Alchemy ensures maximum uptime for your blockchain applications. | ||
- **Analytics and Insights**: Gain insights into blockchain data and application performance through Alchemy’s analytics tools. | ||
|
||
## Getting Started | ||
|
||
To start using Alchemy, follow these steps: | ||
|
||
1. **Sign Up**: Create an account on [Alchemy](https://www.alchemy.com/). | ||
2. **Create an App**: After signing in, create a new application in your Alchemy dashboard. Choose the blockchain network you want to connect to. | ||
3. **Get API Key**: Once your application is set up, you’ll be provided with an API key. This key is used to authenticate your requests to the Alchemy RPC node. | ||
4. **Integrate with Your Project**: Use the API key to connect your blockchain application to the Alchemy network. You can integrate using the provided SDKs or directly via HTTP requests. | ||
|
||
## Documentation | ||
|
||
For detailed guides and API references, visit the [Alchemy Documentation](https://docs.alchemy.com/). | ||
|
||
## Use Cases | ||
|
||
Alchemy can be used in various blockchain development scenarios: | ||
|
||
- **Decentralized Applications (DApps)**: Power your DApps with reliable and scalable blockchain infrastructure. | ||
- **Analytics and Monitoring**: Use Alchemy’s tools to monitor blockchain events and transactions in real-time. | ||
- **Smart Contracts**: Deploy and interact with smart contracts on multiple blockchain networks. | ||
|
||
## Conclusion | ||
|
||
Alchemy is a powerful tool for blockchain developers, offering a robust suite of APIs, tools, and infrastructure to build, scale, and monitor blockchain applications with ease. Whether you're building a simple DApp or a complex blockchain project, Alchemy provides the resources you need to succeed. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
--- | ||
title: API3 | ||
category: Oracles | ||
description: API3 is a first-party oracle solution that enables dApps to access APIs in a decentralized and trust-minimized way. | ||
logo: /images/api3.png | ||
developer: API3 Alliance | ||
website: https://api3.org/ | ||
documentation: https://docs.api3.org/ | ||
--- | ||
|
||
## Overview | ||
|
||
API3 is an innovative oracle solution designed to connect decentralized applications (dApps) with real-world data. Unlike traditional third-party oracles, API3 uses first-party oracles that allow data providers to operate their own oracles, ensuring data authenticity and minimizing trust issues. This makes API3 a highly secure and reliable solution for integrating off-chain data into smart contracts. | ||
|
||
## Features | ||
|
||
- **First-Party Oracles**: API3 enables data providers to run their own oracles, removing intermediaries and reducing trust concerns. | ||
- **Decentralized Governance**: The API3 DAO governs the network, ensuring a decentralized and community-driven approach. | ||
- **dAPIs (Decentralized APIs)**: API3 offers decentralized APIs, which are aggregated and delivered by first-party oracles, providing a seamless way to access off-chain data. | ||
- **Airnode**: API3’s flagship technology, Airnode, allows any API provider to deploy a first-party oracle without technical expertise. | ||
- **Data Transparency**: Ensures complete transparency in how data is sourced and delivered to smart contracts. | ||
|
||
## Getting Started | ||
|
||
To begin using API3, follow these steps: | ||
|
||
1. **Sign Up**: Visit the [API3 website](https://api3.org/) to learn more and get involved with the community. | ||
2. **Explore Airnode**: Check out the [Airnode documentation](https://docs.api3.org/airnode) to understand how to deploy your own first-party oracle. | ||
3. **Integrate dAPIs**: Utilize API3’s decentralized APIs by following the integration guides available in the [API3 documentation](https://docs.api3.org/). | ||
4. **Join the DAO**: Participate in the governance of API3 by joining the [API3 DAO](https://api3.org/dao), where you can vote on proposals and help shape the future of the network. | ||
|
||
## Documentation | ||
|
||
For detailed technical guides, integration tutorials, and API references, visit the [API3 Documentation](https://docs.api3.org/). | ||
|
||
## Use Cases | ||
|
||
API3 can be utilized in various scenarios where trust-minimized data access is crucial: | ||
|
||
- **DeFi Platforms**: Integrate accurate and reliable off-chain data, such as price feeds, into decentralized finance (DeFi) applications. | ||
- **Insurance dApps**: Leverage real-world data for automated insurance claims and payouts using smart contracts. | ||
- **Supply Chain Management**: Track and verify supply chain data using first-party oracles to ensure authenticity and reduce fraud. | ||
|
||
## Conclusion | ||
|
||
API3 revolutionizes the way dApps access off-chain data by utilizing first-party oracles. With its decentralized governance and innovative technology like Airnode, API3 offers a secure, transparent, and reliable solution for integrating real-world data into smart contracts. Whether you're building a DeFi application, an insurance platform, or any other blockchain-based solution, API3 provides the tools you need for trust-minimized data integration. | ||
|
Oops, something went wrong.