diff --git a/package.json b/package.json index 9b8a69e76f..cfc686abc2 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,10 @@ "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a", "dependencies": { "@sentry/sveltekit": "^8.12.0", - "h3": "^1.12.0" + "embla-carousel-svelte": "^8.1.5", + "embla-carousel-wheel-gestures": "^8.0.1", + "h3": "^1.12.0", + "remeda": "^2.3.0" }, "devDependencies": { "@appwrite.io/console": "^0.6.2", @@ -45,9 +48,11 @@ "@typescript-eslint/eslint-plugin": "^7.13.1", "@typescript-eslint/parser": "^7.13.1", "dequal": "^2.0.3", + "embla-carousel": "^8.1.5", "eslint": "^8.57.0", "eslint-config-prettier": "^8.10.0", "eslint-plugin-svelte": "^2.40.0", + "fuse.js": "^7.0.0", "highlight.js": "^11.9.0", "markdown-it": "^14.1.0", "meilisearch": "^0.37.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 59453ddd06..989374fd68 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,9 +11,18 @@ importers: '@sentry/sveltekit': specifier: ^8.12.0 version: 8.12.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.25.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.25.1)(@sveltejs/kit@2.5.17(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.11.22)(sass@1.77.6)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.11.22)(sass@1.77.6)))(encoding@0.1.13)(svelte@4.2.18) + embla-carousel-svelte: + specifier: ^8.1.5 + version: 8.1.5(svelte@4.2.18) + embla-carousel-wheel-gestures: + specifier: ^8.0.1 + version: 8.0.1(embla-carousel@8.1.5) h3: specifier: ^1.12.0 version: 1.12.0 + remeda: + specifier: ^2.3.0 + version: 2.3.0 devDependencies: '@appwrite.io/console': specifier: ^0.6.2 @@ -72,6 +81,9 @@ importers: dequal: specifier: ^2.0.3 version: 2.0.3 + embla-carousel: + specifier: ^8.1.5 + version: 8.1.5 eslint: specifier: ^8.57.0 version: 8.57.0 @@ -81,6 +93,9 @@ importers: eslint-plugin-svelte: specifier: ^2.40.0 version: 2.41.0(eslint@8.57.0)(svelte@4.2.18) + fuse.js: + specifier: ^7.0.0 + version: 7.0.0 highlight.js: specifier: ^11.9.0 version: 11.9.0 @@ -2080,6 +2095,25 @@ packages: electron-to-chromium@1.4.812: resolution: {integrity: sha512-7L8fC2Ey/b6SePDFKR2zHAy4mbdp1/38Yk5TsARO66W3hC5KEaeKMMHoxwtuH+jcu2AYLSn9QX04i95t6Fl1Hg==} + embla-carousel-reactive-utils@8.1.5: + resolution: {integrity: sha512-76uZTrSaEGGta+qpiGkMFlLK0I7N04TdjZ2obrBhyggYIFDWlxk1CriIEmt2lisLNsa1IYXM85kr863JoCMSyg==} + peerDependencies: + embla-carousel: 8.1.5 + + embla-carousel-svelte@8.1.5: + resolution: {integrity: sha512-3XEIqfALTwmA73narVxMo6vNDqy+ezFgn5LyywYBfoq/azh7AHbNGpfG/2mZQBttJcI3JBswYwQoZklajhil1Q==} + peerDependencies: + svelte: ^3.49.0 || ^4.0.0 + + embla-carousel-wheel-gestures@8.0.1: + resolution: {integrity: sha512-LMAnruDqDmsjL6UoQD65aLotpmfO49Fsr3H0bMi7I+BH6jbv9OJiE61kN56daKsVtCQEt0SU1MrJslbhtgF3yQ==} + engines: {node: '>=10'} + peerDependencies: + embla-carousel: ^8.0.0 || ~8.0.0-rc03 + + embla-carousel@8.1.5: + resolution: {integrity: sha512-R6xTf7cNdR2UTNM6/yUPZlJFRmZSogMiRjJ5vXHO65II5MoUlrVYUAP0fHQei/py82Vf15lj+WI+QdhnzBxA2g==} + emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -2281,6 +2315,10 @@ packages: function-bind@1.1.2: resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} + fuse.js@7.0.0: + resolution: {integrity: sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==} + engines: {node: '>=10'} + gauge@4.0.4: resolution: {integrity: sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==} engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} @@ -3245,6 +3283,9 @@ packages: regenerator-runtime@0.14.1: resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + remeda@2.3.0: + resolution: {integrity: sha512-J9djcCyFL9D1ZGnfiNJ6MMhcUT8BmNCT+dj2SApdrTNz+CxqW1dScPVaDCopivHTShiYXh4sRSPYKMzlGrgyQw==} + require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -3688,6 +3729,10 @@ packages: resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==} engines: {node: '>=10'} + type-fest@4.21.0: + resolution: {integrity: sha512-ADn2w7hVPcK6w1I0uWnM//y1rLXZhzB9mr0a3OirzclKF1Wp6VzevUmzz/NRAWunOT6E8HrnpGY7xOfc6K57fA==} + engines: {node: '>=16'} + typescript@5.5.2: resolution: {integrity: sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==} engines: {node: '>=14.17'} @@ -3837,6 +3882,10 @@ packages: whatwg-url@5.0.0: resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} + wheel-gestures@2.2.5: + resolution: {integrity: sha512-01BlXRjBVt5Gy0VH2rRqMeccHruTGq2Gd1fx0UqCPN8KDeDCmlTXsRGc/hXJk6W+wnO9CNJp2xfntMNRArBxKQ==} + engines: {node: '>=10'} + which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} @@ -6051,6 +6100,23 @@ snapshots: electron-to-chromium@1.4.812: {} + embla-carousel-reactive-utils@8.1.5(embla-carousel@8.1.5): + dependencies: + embla-carousel: 8.1.5 + + embla-carousel-svelte@8.1.5(svelte@4.2.18): + dependencies: + embla-carousel: 8.1.5 + embla-carousel-reactive-utils: 8.1.5(embla-carousel@8.1.5) + svelte: 4.2.18 + + embla-carousel-wheel-gestures@8.0.1(embla-carousel@8.1.5): + dependencies: + embla-carousel: 8.1.5 + wheel-gestures: 2.2.5 + + embla-carousel@8.1.5: {} + emoji-regex@8.0.0: {} emoji-regex@9.2.2: {} @@ -6308,6 +6374,8 @@ snapshots: function-bind@1.1.2: {} + fuse.js@7.0.0: {} + gauge@4.0.4: dependencies: aproba: 2.0.0 @@ -7285,6 +7353,10 @@ snapshots: regenerator-runtime@0.14.1: {} + remeda@2.3.0: + dependencies: + type-fest: 4.21.0 + require-directory@2.1.1: {} require-in-the-middle@7.3.0: @@ -7798,6 +7870,8 @@ snapshots: type-fest@0.20.2: {} + type-fest@4.21.0: {} + typescript@5.5.2: {} uc.micro@2.1.0: {} @@ -7948,6 +8022,8 @@ snapshots: tr46: 0.0.3 webidl-conversions: 3.0.1 + wheel-gestures@2.2.5: {} + which@2.0.2: dependencies: isexe: 2.0.0 diff --git a/src/app.html b/src/app.html index eb04f4c368..c8f07338bb 100644 --- a/src/app.html +++ b/src/app.html @@ -1,4 +1,4 @@ - + diff --git a/src/lib/actions/autoHash.ts b/src/lib/actions/autoHash.ts new file mode 100644 index 0000000000..e14487e50d --- /dev/null +++ b/src/lib/actions/autoHash.ts @@ -0,0 +1,12 @@ +export const autoHash = ( + node: Element, + callback: (entries: IntersectionObserverEntry[]) => void +) => { + const observer = new IntersectionObserver(callback, { + threshold: 1 + }); + + observer.observe(node); + + return { destroy: () => observer.disconnect() }; +}; diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte index 1f68056741..030270d0dc 100644 --- a/src/lib/components/Carousel.svelte +++ b/src/lib/components/Carousel.svelte @@ -108,7 +108,11 @@ &::after { right: 0; - background: linear-gradient(to left, hsl(var(--web-color-background-docs)), transparent); + background: linear-gradient( + to left, + hsl(var(--web-color-background-docs)), + transparent + ); } &[data-state='end']::after { diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte index a760b69408..de44c79a26 100644 --- a/src/lib/components/FooterNav.svelte +++ b/src/lib/components/FooterNav.svelte @@ -41,6 +41,7 @@ ], Learn: [ { label: 'Docs', href: '/docs' }, + { label: 'Integrations', href: '/integrations' }, { label: 'Community', href: '/community' }, { label: 'Init', href: '/init' }, { label: 'Threads', href: '/threads' }, diff --git a/src/lib/components/ProductsGrid.svelte b/src/lib/components/ProductsGrid.svelte new file mode 100644 index 0000000000..e546e0573c --- /dev/null +++ b/src/lib/components/ProductsGrid.svelte @@ -0,0 +1,145 @@ +
+
+

+ Keep exploring similar integrations +

+ +
+
+ + diff --git a/src/lib/components/carousel/Carousel.svelte b/src/lib/components/carousel/Carousel.svelte new file mode 100644 index 0000000000..8aacafaa79 --- /dev/null +++ b/src/lib/components/carousel/Carousel.svelte @@ -0,0 +1,168 @@ + + +
+ {#if hasPrev} + + {/if} + {#if hasNext} + + {/if} + +
+ +
+
+ +
+ +
+ + diff --git a/src/lib/components/carousel/CarouselSlide.svelte b/src/lib/components/carousel/CarouselSlide.svelte new file mode 100644 index 0000000000..ad051c7471 --- /dev/null +++ b/src/lib/components/carousel/CarouselSlide.svelte @@ -0,0 +1,25 @@ +
  • +
    + +
    +
    • + + diff --git a/src/lib/components/carousel/index.ts b/src/lib/components/carousel/index.ts new file mode 100644 index 0000000000..806834bac4 --- /dev/null +++ b/src/lib/components/carousel/index.ts @@ -0,0 +1,2 @@ +export { default as Root } from './Carousel.svelte'; +export { default as Slide } from './CarouselSlide.svelte'; diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 783c7f3db1..c30ecebae2 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,4 +1,4 @@ -export const GITHUB_STARS = '41.9K'; +export const GITHUB_STARS = '42.8K'; export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again export const SENTRY_DSN = 'https://27d41dc8bb67b596f137924ab8599e59@o1063647.ingest.us.sentry.io/4507497727000576' diff --git a/src/lib/integrations/Fuse.svelte b/src/lib/integrations/Fuse.svelte new file mode 100644 index 0000000000..40f08b665c --- /dev/null +++ b/src/lib/integrations/Fuse.svelte @@ -0,0 +1,17 @@ + diff --git a/src/lib/integrations/index.ts b/src/lib/integrations/index.ts new file mode 100644 index 0000000000..a19b201ca1 --- /dev/null +++ b/src/lib/integrations/index.ts @@ -0,0 +1,6 @@ +import type { FuseResult } from 'fuse.js'; + +// Reexport your entry components here +export { default as Fuse } from './Fuse.svelte'; + +export type ResultType = FuseResult[]; diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte index ee5f08a9db..64482be88c 100644 --- a/src/lib/layouts/Main.svelte +++ b/src/lib/layouts/Main.svelte @@ -112,6 +112,10 @@ label: 'Blog', href: '/blog' }, + { + label: 'Integrations', + href: '/integrations' + }, { label: 'Changelog', href: '/changelog', diff --git a/src/markdoc/layouts/Integration.svelte b/src/markdoc/layouts/Integration.svelte new file mode 100644 index 0000000000..5fff5aeb22 --- /dev/null +++ b/src/markdoc/layouts/Integration.svelte @@ -0,0 +1,244 @@ + + + + + {title} + + + + + + + + + + + + + + +
    +
    +
    +
    +
    + + + Back to catalog + + + {#if images.length > 1} + + {#each images as slide} + + cover + + {/each} + + {:else} +
    + cover +
    + {/if} +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Christy Jacob +

    + {title} +

    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    Vendor
    +
    {product.vendor}
    +
    +
    + {#if isPartner} +
    +
    Partner
    +
    Verified
    +
    + {/if} +
    +
    +
    Category
    +
    {category}
    +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    +
    + + + +
    +
    +

    + Become a Technology Partner +

    +

    + Join our Technology Partners program to integrate your solutions with + Appwrite’s API, enhancing functionality and expanding your reach. +

    + + Get Started + +
    +
    +
    + + +
    +
    +
    + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e9ec068a87..ccc6ecf128 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -77,14 +77,14 @@
    Announcing new AI Appwrite IntegrationsAnnouncing Appwrite's Integrations Catalog diff --git a/src/routes/blog/post/announcing-appwrite-integration-catalog/+page.markdoc b/src/routes/blog/post/announcing-appwrite-integration-catalog/+page.markdoc new file mode 100644 index 0000000000..6f45e0f01d --- /dev/null +++ b/src/routes/blog/post/announcing-appwrite-integration-catalog/+page.markdoc @@ -0,0 +1,136 @@ +--- +layout: post +title: "Announcing Appwrite's new Integrations Catalog" +description: We are beyond excited to announce the launch of our brand-new Appwrite Integrations Catalog. +date: 2024-07-29 +cover: /images/blog/integrations-catalog.png +timeToRead: 12 +author: aditya-oberai +category: product +featured: true +--- + +Our new Integrations Catalog is designed to empower you by providing a seamless way to integrate your favorite tools, libraries, and services with Appwrite, making your development process even more efficient and enjoyable. + +# One-stop shop for all your integrations + +You’re building your next big project on top of Appwrite; your backend is all set up and ready to go to production. But then you realize you need a way to sell subscriptions and send emails, and you’ve decided at the last minute you want to add more OAuth2 providers. Imagine you had to build all these integrations for your app from scratch in a short space of time. With the new [Integrations Catalog](https://appwrite.io/integrations), we have done the heavy lifting for you. You’ll find integrations for both Cloud and Self-hosted that cater to every aspect of your development needs, allowing you to build your app exactly as you intended. + +# What’s inside the Appwrite Integrations Catalog? + +We’ve bundled all integrations into different categories. Here are a few notable providers (with many more to come!). Check out the full catalog on the Integrations page. + +## Authentication + +- [Phone auth](https://appwrite.io/docs/products/auth/phone-sms) + +Phone auth allows you to authenticate users using One-Time Passwords (OTPs) sent to their mobile phones via SMS, making it a highly-convenient passwordless alternative to email-password authentication. You can use Twilio to enable phone authentication for your apps. + +- [OAuth2](https://appwrite.io/docs/products/auth/oauth2) + +You can set up OAuth2 with over 30 providers. OAuth is a way for apps to request limited access to a user's account on another service without needing the user's password. This keeps the user’s account more secure while making signing up and logging in all the more convenient. + +Some of Appwrite’s OAuth integrations include Amazon, Appwrite, Discord, Google, and Notion. + +## Deployments + +- [GitHub](https://appwrite.io/docs/advanced/self-hosting/functions) + +We've integrated GitHub to simplify your development workflow with Appwrite Functions. This integration enables the generation of repositories for function templates and manages automatic deployments for any Appwrite Functions through GitHub. + +## Messaging + +- [Twilio](https://appwrite.io/docs/products/messaging/twilio) for SMS + +You can use the Twilio provider in Appwrite Messaging to send customized SMS messages to your users. Whether you need to send them instantly or schedule them for later, these messages can serve a variety of purposes like reminders, promotions, announcements, and even custom authentication flows. + +- [Sendgrid](https://appwrite.io/docs/products/messaging/sendgrid) for Email + +Send custom emails to your users with Sendgrid, either instantly or on a schedule. Use it to deliver reminders, promotions, and announcements, keeping your audience engaged and informed. + +- [APNs and FCM](https://appwrite.io/docs/products/messaging/send-push-notifications) for Push notifications + +Use Apple Push Notifications service (APNs) or Firebase Cloud Messaging to send in-app or push notifications. Deliver app updates, promotional offers, and other messages straight to your users’ devices. + +- [Vonage](https://appwrite.io/docs/products/messaging/vonage) for WhatsApp messages + +Going one step further? Use Vonage to send WhatsApp messages and connect with your users in a modern, user-friendly way. + +## Storage + +- Amazon S3 + +Store your files on self-hosted instances with Amazon S3. Amazon S3 provides scalable object storage that allows you to manage and access your data seamlessly, ensuring high availability and durability. + +## Logging + +Monitor your application's performance by tracing errors across your Appwrite instance and fixing them faster. These tools help you proactively manage issues and deliver a more stable experience: + +- Sentry +- Raygun +- AppSignal + +## AI + +- Hugging Face and Generative AI + +Enhance your app with AI through Appwrite's integrations. Build [with our AI function templates](https://appwrite.io/blog/post/building-with-ai-function-templates) from popular tools like Hugging Face, OpenAI, Perplexity, and more. Imagine creating [your very own AI chatbot](https://appwrite.io/blog/post/personal-chatbot-gpt-4o) with OpenAI’s GPT-4o — it's easier than you think! + +## Payments + +- Stripe + +Use Stripe to set up app [subscriptions](https://appwrite.io/docs/tutorials/subscriptions-with-stripe/step-1) and payments. It's designed to be straightforward so you can smoothly manage your transactions. + +- Lemon Squeezy + +Lemon Squeezy lets you set up payments and subscriptions quickly, so you can focus on your app’s functionality. Check out [this video for a step-by-step guide](https://www.youtube.com/watch?v=dHo7lvpU6gs). + +## Databases + +- MongoDB Atlas and Upstash Vector + +Easily manage your data using MongoDB Atlas and Upstash Vector integration. MongoDB Atlas offers a flexible database solution, and Upstash Vector improves query capabilities for fast and reliable data access. Together, they help you manage data efficiently and boost your app’s performance. + +## Search + +- Algolia + +Improve your app’s search functionality with the Algolia integration. Algolia makes it straightforward to integrate practical search features, helping users easily find the information they need without hassle. + +# Designed with your experience in mind + +As with everything we do here at Appwrite, we heavily focus on the developer experience. Our main goal with the Integration Catalog is to meet your needs when integrating X with Appwrite. We focused on a set of principles that helped us deliver on our promise: + +1. Appwrite developers need quick access to integration options, including everything provided in the console and future integrations. +2. Categories should group integrations, and a consistent hierarchy of information should exist on every page. +3. Finding new categories should be logical, intuitive, and fast. +4. The content should be presented in an easy-to-digest manner and help you find what you’re looking for. + +Missing anything? Have feedback? Let us know on [Discord](https://appwrite.io/discord)! + +# Become a Technology Partner + +With the launch of our Integrations Catalog, we’re also inviting developers and companies to join us as **Technology Partners**. This is your chance to integrate your solutions with Appwrite, reach a wider audience, and add value to the developer community. + +## Why become a Technology Partner? + +- **Improve dev experience:** Improve the experience by collaborating on an integration. +- **Increased exposure**: Feature your integration in front of our growing community of developers. +- **Collaborative marketing**: Partner with us on co-marketing efforts to highlight your integration. +- **Dedicated developer support**: Get assistance from our team to ensure your integration is top-notch. +- **Exclusive developer tools**: Access our API documentation, SDKs, and best practices to make your integration seamless. + +# How to apply + +Do you think your tool plays well with Appwrite? Visit our [Integrations Catalog Technology partners page](https://appwrite.io/integrations/technology-partner) and fill out the submission form. Tell us about your company, the integration you’re proposing, and how it benefits developers using Appwrite. Our team will review your submission and get back to you with the next steps. + +# More to come + +We believe the Appwrite [Integrations Catalog](https://appwrite.io/integrations) will open up new possibilities for developers, making it easier than ever to build, connect, and deploy applications with Appwrite. Watch for updates on our changelog and socials as we add more integrations. + +# Resources + +- [Join us on discord](https://appwrite.io/discord) +- [Visit our documentation](https://appwrite.io/docs) +- [Get started with Appwrite](https://cloud.appwrite.io/) diff --git a/src/routes/blog/post/announcing-appwrite-new-ai-integrations/+page.markdoc b/src/routes/blog/post/announcing-appwrite-new-ai-integrations/+page.markdoc index 5418f98ca9..e6554c9c7d 100644 --- a/src/routes/blog/post/announcing-appwrite-new-ai-integrations/+page.markdoc +++ b/src/routes/blog/post/announcing-appwrite-new-ai-integrations/+page.markdoc @@ -7,7 +7,7 @@ cover: /images/blog/ai-announcement.png timeToRead: 5 author: christy-jacob category: AI -featured: true +featured: false --- The AI hype is real and will be around for many years to come. In 2021 alone, AI startups worldwide raised nearly $50 billion in venture capital across approximately 1,500 deals, reflecting a significant increase from previous years. So it's no surprise that many of you are looking to build AI powered applications. But that's easier said than done, as building AI powered applications can be tricky. We don't want it to be. That's why we're happy to share multiple AI related announcements designed to enhance the Appwrite experience and adapt to new possibilities for devs building with Appwrite. diff --git a/src/routes/blog/post/integrate-twilio-sendgrid-apns-fcm-in-your-app/+page.markdoc b/src/routes/blog/post/integrate-twilio-sendgrid-apns-fcm-in-your-app/+page.markdoc new file mode 100644 index 0000000000..bddd655d92 --- /dev/null +++ b/src/routes/blog/post/integrate-twilio-sendgrid-apns-fcm-in-your-app/+page.markdoc @@ -0,0 +1,192 @@ +--- +layout: post +title: "Integrate Twilio, SendGrid, APNs and FCM into your Appwrite project" +description: Which messaging provider should you choose for your app? +date: 2024-07-30 +cover: /images/blog/integrations-messaging/cover.png +timeToRead: 6 +author: aditya-oberai +category: product +featured: false +--- + +Bringing messaging into your app — emails, push notifications, or SMS — gives your users a direct line to you. It lets you instantly share updates, reminders, special offers, or important info right when your users need it, keeping them engaged. But which messaging provider do you choose, and how do you integrate it? + +In this article, we cover the benefits of multiple messaging providers to help you choose the best one for your use case. We will also guide you through integrating Twilio, SendGrid, APNs, and FCM into your app using Appwrite. + +# Prerequisites + +Before we begin, you must sign up for [Appwrite Cloud](https://cloud.appwrite.io/register) and create a project if you haven’t already. Signing up is free and should only take a few minutes. + +# Twilio + +Twilio is a cloud communications platform that offers SMS, voice, video, and email services. It's known for its flexibility, scalability, and ease of integration. As part of its comprehensive communication tools, Twilio also provides a robust push notification service. + +**Benefits of using Twilio:** + +- **Multi-channel support**: Manage SMS, MMS, email, and push notifications from one platform. +- **Cross-platform messaging**: Send push notifications to both iOS and Android devices easily. +- **Personalization and segmentation**: Customize messages for targeted communication. +- **Scheduling and automation**: Schedule and automate notifications based on user actions or set conditions. + +**Best use cases:** + +- **Customer support:** Use SMS and voice for timely customer service. +- **Marketing campaigns:** Send personalized promotions and updates. +- **App engagement:** Push notifications for app updates, reminders, and special offers. +- **Event reminders:** Schedule automated reminders for appointments and events. + +# How to integrate Twilio into your app + +Integrating Twilio into your app is fairly simple. For the purposes of this tutorial, we’ll focus on the SMS functionality. + +## Step 1. Set up a Twilio account + +Create a [Twilio account](https://www.twilio.com/try-twilio) and purchase a phone number that supports SMS. Go to **Account info** and save your **Account SID** and **Account Token**, which you will need for the next step. + +## Step 2: Add Twilio provider to your Appwrite project + +In your Appwrite project, navigate to **Messaging** > **Providers** > **Create a provider** > **SMS**. Name your provider and select **Twilio**. On the next page, fill out the **Account SID** and **Account Token**, as well as the phone number that will be sending SMS. + +![Twilio messaging integration](/images/blog/integrations-messaging/1.png) + +Once you complete provider creation, you should see it on your list of providers. You can now use this number to send SMS to your users! + +## Step 3: Test the provider + +In your **Messaging** tab, you can now create a new message. Pick your users ([set up an SMS authentication flow to get users’ phone numbers if you haven’t yet](/docs/products/auth/phone-sms)), set your target and topic and choose the time. That’s it — now your users will receive an SMS. + +Visit the [docs](https://appwrite.io/docs/products/messaging/twilio) for a more detailed tutorial or get started with Twilio right away on the [integrations page.](https://appwrite.io/integrations) + +# SendGrid + +SendGrid is a reliable email delivery service that helps businesses send emails quickly and efficiently. SendGrid promises a 99% deliverability rate and ensures your emails land in the inbox, not the spam folder, which is crucial for maintaining good communication with your customers. + +**Benefits of using SendGrid:** + +- **High deliverability:** SendGrid ensures your emails get delivered to the inbox, improving engagement rates. +- **Detailed analytics:** Gain insights into email performance with analytics and reporting. +- **Scalability:** Whether you're sending a few emails or millions, SendGrid scales to meet your needs. + +**Best use cases:** + +- **Newsletters:** Keep your audience informed with regular updates and news. +- **Promotional emails:** Drive sales and engagement with targeted marketing campaigns. +- **Transactional emails:** Send important notifications like order confirmations, shipping updates, and password resets. + +# How to integrate SendGrid into your app + +Follow these simple steps to integrate SendGrid into your Appwrite project. + +## Step 1: Sign up on SendGrid + +First, [sign up for a SendGrid account](https://signup.sendgrid.com/) and complete the setup. Then, [create an API key](https://www.twilio.com/docs/sendgrid/ui/account-and-settings/api-keys) with full access and save it for future use. Next, follow SendGrid's [Domain Authentication](https://www.twilio.com/docs/sendgrid/ui/account-and-settings/how-to-set-up-domain-authentication) guide to authenticate your domain. If you don’t have a domain, use their [Single Sender Verification](https://www.twilio.com/docs/sendgrid/ui/sending-email/sender-verification) process to verify your sender identity. + +## Step 2: Add SendGrid provider to your Appwrite project + +In your Appwrite project, go to **Messaging** > **Providers** > **Create a provider** > **Email.** Name your provider and choose SendGrid. In the next page, you get to enter the API Key, the email address and customize the sender name, reply-to email and name. + +![SendGrid messaging integration](/images/blog/integrations-messaging/2.png) + +## Step 3: Test the SendGrid provider + +Make sure you have at least one [topic](https://appwrite.io/docs/products/messaging/topics) or [target](https://appwrite.io/docs/products/messaging/targets) set up before testing. + +Once the provider is configured, head to **Messages** > **Create an email message**. Enter the text, choose the recipients, and set the delivery time for your message. That’s it — you can now send emails to your users! + +Visit the [docs](https://appwrite.io/docs/products/messaging/sendgrid) for a more detailed tutorial or start with SendGrid in the [Integrations Catalog.](https://appwrite.io/integrations) + +# APNs + +APNs (Apple Push Notification Service) is an Apple tool that lets you send notifications straight to iOS devices. It helps you keep your users updated and engaged with your app in real time. + +**Benefits of using APNs:** + +- **Instant alerts:** Notify users right away with important updates. +- **Rich content:** Include images, videos, and interactive elements in your notifications. +- **Boost engagement:** Keep users coming back with personalized messages. + +**Best use cases:** + +- **App updates:** Inform users about new features or important changes. +- **Reminders:** Send reminders for appointments, tasks, or events. +- **Special offers:** Share promotions and special deals. + +# How to integrate APNs into your app + +Follow these simple steps to integrate APNs into your Appwrite project. + +## Step 1: Sign up for Apple Developer + +First, [sign up for the Apple Developer program](https://developer.apple.com/programs). + +Head to your new Apple Developer account and save the following details: + +| Field name | | +| --- | --- | +| Bundle ID | Head to Apple Developer account > Program resources > Certificates, Identifiers & Profiles > Identifiers | +| Team ID | Head to Apple Developer account > Membership details > Team ID | +| Authentication key (.p8 file) | Head to Apple Developer account > Program resources > Certificates, Identifiers & Profiles > Keys. Create a key and give it a name. Enable the Apple Push Notifications service (APNS), and register your key. | +| Authentication key ID | Head to Apple Developer account > Program resources > Certificates, Identifiers & Profiles > Keys. Click on your key to view details. | + +## Step 2: Add APNs provider to your Appwrite project + +In your Appwrite project, go to **Messaging** > **Providers** > **Create a new push notifications provider**. + +Enter the **team ID**, **bundle ID**, **authentication key ID**, and the **authentication key (.p8 file)** you got from the Apple Developer Member Center. If your app uses a development provisioning profile, enable Sandbox mode. + +![APNs messaging integration](/images/blog/integrations-messaging/3.png) + +## Step 3: Test the provider + +To test the provider on your Apple devices, you'll need to make some additional settings in Xcode. Open your app in **Xcode** > **Signing & Capabilities** > **Capabilities** > **Push Notifications**, and turn it on. + +Next, follow the [Send push notifications](https://appwrite.io/docs/products/messaging/send-push-notifications) guide to test your setup. After that, you should be able to send Push notifications from **Messaging**. + +Visit the [docs](https://appwrite.io/docs/products/messaging/apns) for a more detailed tutorial or get started with APN in the [Integrations Catalog.](https://appwrite.io/integrations) + +## FCM + +FCM (Firebase Cloud Messaging) is a cross-platform messaging solution that lets developers send notifications to Android, iOS, and web applications. It’s an efficient way to reach users on multiple platforms with a single service. + +**Benefits of using FCM:** + +- **Multi-platform:** Reach users on Android, iOS, and the web. +- **Flexible messaging:** Send notifications or data messages for various needs. +- **Track performance:** Use Firebase Analytics to see how your messages are doing. + +**Best use cases:** + +- **User engagement:** Send personalized notifications to keep users interested. +- **Real-time updates:** Push updates on live activities, like scores in a sports app or breaking news. +- **Special offers:** Share promotions and special deals. + +# How to integrate FCM into your app + +Follow these simple steps to integrate FCM into your Appwrite project. + +## Step 1: Sign up on Firebase + +[Create a Firebase account](https://firebase.google.com/) and set up a new project. Go to **Project settings > Service accounts to generate a new private key.** Then, download the JSON file that comes with it. + +To enable FCM, go to **Cloud Messaging** > Click the three-dots menu > **Enable**. + +## Step 2: Add FCM provider to your Appwrite project + +In your Appwrite **Messaging** page, click on the **Providers** tab > **Create a new push notifications provider**. + +Select **FCM** and upload the JSON file. + +![FCM messaging integration](/images/blog/integrations-messaging/4.png) + +## Step 3: Test the provider + +To test the provider on mobile apps, you must do additional configuration steps for both iOS and Android. You can find a detailed tutorial in the [docs](https://appwrite.io/docs/products/messaging/fcm). Just like with APN, once you’re done with the testing stage, you can start sending notifications from your **Messaging** tab. + +# More resources + +By now, you should be able to integrate your chosen messaging provider and start connecting with your users. If you’re still searching for the right solution, take a look at our [Integrations Catalog](https://appwrite.io/integrations) for a comprehensive list of messaging providers. You can also find additional resources below to help you set up messaging effectively. + +- [Push notifications best practices](https://appwrite.io/blog/post/push-notifications-best-practices). +- [Messaging explained](https://appwrite.io/blog/post/messaging-explained). +- [Messaging in Appwrite docs.](https://appwrite.io/docs/products/messaging) diff --git a/src/routes/blog/post/product-update-july/+page.markdoc b/src/routes/blog/post/product-update-july/+page.markdoc new file mode 100644 index 0000000000..7e0adf67b5 --- /dev/null +++ b/src/routes/blog/post/product-update-july/+page.markdoc @@ -0,0 +1,106 @@ +--- +layout: post +title: "July product update: Integrations Catalog | daily.dev Squad | FreeCodeCamp" +description: "Check out everything that happened in July in your monthly Appwrite digest." +date: 2024-08-01 +cover: /images/blog/product-update-july/cover.png +timeToRead: 8 +author: dennis-ivy +category: product +--- +July was packed with announcements and new content. We announced Appwrite integrations, started a [daily dev](http://daily.dev) Squad, and created a bunch of coding tutorials for you. Let’s get straight into it! + +# Integrations Catalog + +![Integrations catalog](/images/blog/product-update-july/1.png) + +We just launched our brand new Integrations Catalog — a one-stop-shop for all your Appwrite integrations needs. It’s designed to: + +- Give you quick access to all Appwrite integrations +- Provide easy-to-follow implementation guides +- Store all integrations in one place with an intuitive design + +The current integrations are just the first of many. We’ll be continually updating and adding more, so stay tuned! + +[Read the announcement.](https://apwr.dev/integrate) + +# [daily.dev](http://daily.dev) Squad + +![dailydev squad](/images/blog/product-update-july/2.png) + +Appwrite now has a Squad on [daily.dev](http://daily.dev) and you’re invited! + +A Squad is an easy way to keep up with all the cool things happening at Appwrite and get useful engineering resources in your daily digest. Plus, you can participate in discussions on tech trends and best practices with fellow Appwriters and share your knowledge and expertise. + +[Join the Appwrite Squad now.](https://apwr.dev/dailydev) + +# Appwrite at FreeCodeCamp + +![FreeCodeCamp video](/images/blog/product-update-july/3.png) + +Appwrite developed a coding course on the [FreeCodeCamp.org](http://FreeCodeCamp.org) YouTube channel. FreeCodeCamp is a popular learning resource for developers, with hundreds of easy-to-follow video guides and tutorials. + +[Learn how to create a full-stack sticky notes app using JavaScript and Appwrite in this video tutorial.](https://www.youtube.com/watch?v=yBThHM2pBbE) + +--- + +# Bug fixes and improvements + +- Small fixes to the migrations flows in the console to bring a better migrations experience +- PR [#1132](https://github.com/appwrite/website/pull/1132), [#1133](https://github.com/appwrite/website/pull/1133), [#1134](https://github.com/appwrite/website/pull/1134): Improved SendGrid docs +- PR [#1226](https://github.com/appwrite/console/pull/1226): User preferences removal bug +- PR [#1232](https://github.com/appwrite/console/pull/1232): Update bundle ID field to services ID in Apple OAuth adapter +- PR [#1190](https://github.com/appwrite/console/pull/1190): Add theme on initial load +- PR [#1188](https://github.com/appwrite/console/pull/1188): Fix redirect password recovery + +--- + +# Community recognitions + +This month, we’re excited to feature Daniel Veremchuk as part of our Monthly Community Recognitions. + +Daniel developed the new Appwrite Hono Adapter for Bun as part of his Appwrite adapter repository. This adapter allows you to run your Hono application on Appwrite's **`bun-1.0+`** runtime. + +[Take a look at the Bun adapter](https://www.npmjs.com/package/@gravlabs/appwrite-hono-adapter-bun). + +If you'd like to participate in next month's Community Recognitions, [join our Discord server](https://appwrite.io/discord) to showcase your project. + +--- + +# Built with Appwrite + +AyeHigh is a suite of user-friendly Gen AI tools designed to help improve resumes for students and young professionals. The developer, Raj Savaliya, leveraged Appwrite’s Auth, Storage and Databases to build the app’s backend faster. Here’s what he says about it: + +> Fully able to focus on business logic without spending time on developing backend, auth, storage and all that stuff from scratch. Saved a lot of time and shipped faster. +> + +AyeHigh was also recently featured on ProductHunt. [Check them out here](https://www.producthunt.com/products/ayehigh#ayehigh). + +--- + +# Engineering resources + +- [Watch](https://www.youtube.com/watch?v=lEflo_sc82g): Build and deploy a patient management system with Next.js +- [Read](https://appwrite.io/blog/post/set-up-google-auth-appwrite-react): How to set up Google authentication in React with Appwrite +- [Read](https://appwrite.io/blog/post/how-to-build-a-remote-tech-stack): How to build a tech stack for a remote startup +- [Read](https://appwrite.io/blog/post/rest-vs-graphql-websockets-which-is-best-for-your-app): REST vs GraphQL vs WebSockets: which is best for your app? +- [Read](https://appwrite.io/blog/post/handle-cors-in-serverless-functions): How to handle CORS in Appwrite serverless functions +- [Read](https://appwrite.io/blog/post/messaging-explained): Messaging explained +- [Read:](https://appwrite.io/blog/post/how-to-attract-users-to-open-source-project) How to attract contributors and users to your open source project + +# Open source and community updates + +- [Repository:](https://github.com/ItzNotABug/web-amp) Appwrite Messaging method parameters on JS/Node SDKs by [Darshan](https://github.com/ItzNotABug) +- [Blog post:](https://devpost.com/software/vrtuhub-ltd) Vrtuhub — a hackathon project built with Appwrite’s backend + +--- + +# What’s to come + +July has come to an end, but August is a big month here at Appwrite! + +- Init is coming soon… +- New and exciting features will be launched +- And we have new Cloud regions in the works! + +Follow us on [X](https://x.com/appwrite) and check our [Changelog](https://appwrite.io/changelog) regularly, as we will release more information in the coming weeks. diff --git a/src/routes/blog/post/scan-receipts-with-appwrite-functions/+page.markdoc b/src/routes/blog/post/scan-receipts-with-appwrite-functions/+page.markdoc index f4c25dd924..9cc5e3b185 100644 --- a/src/routes/blog/post/scan-receipts-with-appwrite-functions/+page.markdoc +++ b/src/routes/blog/post/scan-receipts-with-appwrite-functions/+page.markdoc @@ -16,7 +16,7 @@ All it took to lose interest was the giant form I had to fill out to add a recei With over [30+ apps installed on a typical user's phone](https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/average-number-of-apps-on-smartphones/) on average, fighting for engagement and retention is tougher than ever. Users are sensitive to friction, with a reported 50% of users [opting for new online merchants just for lowered friction](https://www.pwc.co.uk/industries/documents/frictionless-retail-the-future-of-shopping.pdf) -and Shoppify reporting [low-friction payment methods and flows can lead to >50% increase in conversion](https://web-assets.bcg.com/e4/0c/a1acfc2a4e52a029cb37c6fe83ba/bcg-leading-online-shoppers-to-the-finish-line-june-2023.pdf). +and Shopify reporting [low-friction payment methods and flows can lead to >50% increase in conversion](https://web-assets.bcg.com/e4/0c/a1acfc2a4e52a029cb37c6fe83ba/bcg-leading-online-shoppers-to-the-finish-line-june-2023.pdf). No one has time to fill out giant forms. To help you and your users avoid filling out giant forms, we're going to build a simple receipt processing endpoint with Appwrite diff --git a/src/routes/changelog/(entries)/2024-07-30.markdoc b/src/routes/changelog/(entries)/2024-07-30.markdoc new file mode 100644 index 0000000000..67466541e0 --- /dev/null +++ b/src/routes/changelog/(entries)/2024-07-30.markdoc @@ -0,0 +1,14 @@ +--- +layout: changelog +title: "Announcing Appwrite's new Integrations Catalog" +date: 2024-07-30 +cover: /images/changelog/2024-07-30.png +--- + +We are beyond excited to announce the launch of our brand-new Appwrite Integrations Catalog. + +This catalog is designed to empower you by providing a seamless way to integrate your favorite tools, libraries, and services with Appwrite, making your development process even more efficient and enjoyable. + +{% arrow_link href="/blog/post/announcing-appwrite-integration-catalog" %} +Read the announcement to learn more +{% /arrow_link %} diff --git a/src/routes/integrations/+page.svelte b/src/routes/integrations/+page.svelte new file mode 100644 index 0000000000..aeecefb6f3 --- /dev/null +++ b/src/routes/integrations/+page.svelte @@ -0,0 +1,645 @@ + + + + + {title} + + + + + + + + + + + + + + + + +
    +
    +
    + + + +
    +
    +
    + INTEGRATIONS_ +
    +

    + Discover infinite possibilities +

    +

    + Unlock the full potential of Appwrite by seamlessly integrating your + favorite apps with your projects. +

    +
    +
    + +
    + +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    + {#if hasQuery} +
    +
    +

    + Search results +

    +

    + {result.length > 0 ? result.length : 'No'} results found + for "{$query}" +

    +
    +
    + +
    +
    + {:else} +
    +
    +

    Featured

    +

    Top recommended integrations

    +
    + +
    + +
    +
    + + {#each data.integrations as { category, description, integrations }} + {#if integrations?.length > 0 && (activePlatform === 'All' || integrations.some( (i) => i.platform.includes(activePlatform) ))} +
    { + entries.forEach((entry) => { + if ( + entry.isIntersecting && + activeCategory !== category.toLowerCase() + ) { + activeCategory = category.toLowerCase(); + } + }); + }} + > +
    +

    + {category} +

    +

    + {description} +

    +
    +
    + + + Show more + +
    +
    + {/if} + {/each} + {/if} +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + +
    +
    +

    + Become a Technology Partner +

    +

    + Join our Technology Partners program to integrate your solutions with + Appwrite’s API, enhancing functionality and expanding your reach. +

    + + Get Started + +
    +
    +
    + + +
    +
    +
    + + diff --git a/src/routes/integrations/+page.ts b/src/routes/integrations/+page.ts new file mode 100644 index 0000000000..683d15ca32 --- /dev/null +++ b/src/routes/integrations/+page.ts @@ -0,0 +1,81 @@ +import { base } from '$app/paths'; +import { groupBy } from 'remeda'; + +export type Integration = { + title: string; + description: string; + featured?: boolean; + cover: string; + isNew?: boolean; + isPartner?: boolean; + platform: string[]; + category: string; + product: { + avatar: string; + vendor: string; + description: string; + }; + href: string; + images: string[]; +}; + +const categoryDescriptions = Object.entries({ + ai: 'Machine learning and AI capabilities', + auth: 'User authentication and authorization', + databases: 'Manage database systems', + logging: 'Monitor and analyze application logs', + messaging: 'Real-time communication platforms', + payments: 'Secure online payment processing', + search: 'Implement search functionalities', + storage: 'Storage for data and media', + deployments: 'Seamlessly deploy your code', +}); + +export const load = () => { + const integrationsGlob = import.meta.glob('./**/*.markdoc', { + eager: true + }); + + const categories: string[] = []; + const platforms: string[] = []; + + const integrations = Object.entries(integrationsGlob).map(([filepath, integrationList]) => { + const { frontmatter } = integrationList as { + frontmatter: Integration; + }; + + const slug = filepath.replace('./', '').replace('/+page.markdoc', ''); + const integrationName = slug.slice(slug.lastIndexOf('/') + 1); + + frontmatter.platform.map((platform) => platforms.push(platform)); + categories.push(frontmatter.category); + + return { + ...frontmatter, + href: `${base}/integrations/${integrationName}` + }; + }); + + const groupedIntegrations = groupBy(integrations, (i) => i.category); + + const integrationsWithDescriptions = Object.entries(groupedIntegrations).map( + ([category, integrations]) => { + const description = categoryDescriptions.find( + ([key]) => key.toLowerCase() === category.toLowerCase() + )?.[1]; + return { + category, + description, + integrations + }; + } + ); + + return { + integrations: integrationsWithDescriptions, + list: integrations, + categories: new Set(categories), + platforms: new Set(platforms), + featured: integrations.filter((i) => i.featured) + }; +}; diff --git a/src/routes/integrations/ai-hugging-face-image-classification/+page.markdoc b/src/routes/integrations/ai-hugging-face-image-classification/+page.markdoc new file mode 100644 index 0000000000..a5b62648c8 --- /dev/null +++ b/src/routes/integrations/ai-hugging-face-image-classification/+page.markdoc @@ -0,0 +1,75 @@ +--- +layout: integration +title: Image classification with Hugging Face +description: Understand and label the contents of images +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/ai-hugging-face-image-classification/cover.png +category: AI +product: + avatar: '/images/integrations/avatars/hugging-face.png' + vendor: Hugging Face + description: 'Hugging Face is a leading AI company that offers an extensive library of pre-trained models for various natural language processing and computer vision tasks, including image classification.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/ai-hugging-face-image-classification/cover.png + - /images/integrations/ai-hugging-face-image-classification/appwrite-functions-image-classification-hugging-face.png + - /images/integrations/ai-hugging-face-image-classification/appwrite-functions-image-classification-hugging-face.png + - /images/integrations/ai-hugging-face-image-classification/appwrite-functions-env-variables-image-classification-hugging-face.png +--- + +Image classification is a key application of machine learning that involves categorizing images into predefined classes. Hugging Face is a leading AI company that offers an extensive library of pre-trained models for various natural language processing and computer vision tasks, including image classification. By integrating Hugging Face's powerful models with your applications, you can leverage state-of-the-art technology to automate and enhance image analysis. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to add image classification with Hugging Face to your app. This will allow you to upload an image to an Appwrite storage bucket and store labels from the image in an Appwrite collection. + +# How to implement + +To implement the Hugging Face image classification function, there are several steps you must complete: + +## Step 1: Sign up for Hugging Face + +First, you must [sign up for a Hugging Face account](https://huggingface.co/join). Once your account is set up, visit your profile settings, head to the [Access Tokens](https://huggingface.co/settings/tokens) page, and create an **access token** with the **Inference** permissions. Save this token for further usage. + +![Create API token](/images/integrations/ai-hugging-face-image-classification/hugging-face-create-api-token.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. If you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click on the **Templates** tab, and search for the **Image Classification** function template. + +![Function template](/images/integrations/ai-hugging-face-image-classification/appwrite-functions-image-classification-hugging-face.png) + +During the setup process, click on the checkbox to generate an Appwrite API key on completion and add the **Hugging Face access token** in the **Variables** step. If you are self-hosting Appwrite, then click on the **optional variables** dropdown and update the Appwrite endpoint to your instance’s publicly accessible endpoint. + +![Environment variables](/images/integrations/ai-hugging-face-image-classification/appwrite-functions-env-variables-image-classification-hugging-face.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. + +## Step 3: Test the function + +Once all the steps are complete, it is time to test the function! Use the Appwrite console or one of Appwrite’s SDKs to [upload an image](https://appwrite.io/docs/references/cloud/client-web/storage#createFile) to the `image_classification` storage bucket. If successful, you will find a response saved in the `image_classification` collection in the `ai` database in the following format: + +| image | labels | +| --- | --- | +| `66a13bf100318c752f1b` | `[{"label":"llama","score":0.9664694666862488},{"label":"comic book","score":0.019199883565306664},{"label":"suit, suit of clothes","score":0.005637330934405327},{"label":"television, television system","score":0.00037627643905580044},{"label":"muzzle","score":0.00019786457414738834}]` | + +The `image` attribute contains the ID of the image file uploaded to the `image_classification` storage bucket, and the `labels` attribute contains the response from Hugging Face, including all the labels and their confidence score. + + +# Read more about Hugging Face and Appwrite Functions + +If you would like to learn more about Hugging Face and Appwrite Functions, we have some resources that you should visit: + +- [Sign up for Hugging Face](https://huggingface.co/login) +- [Set up the Hugging Face provider in Appwrite](https://appwrite.io/docs/products/ai/tutorials/image-classification) +- [Building with Appwrite AI Function templates](https://appwrite.io/blog/post/building-with-ai-function-templates) +- [Introducing the Python machine learning runtime](https://appwrite.io/blog/post/introducing-python-machine-learning-runtime) +- [Find more function templates](https://appwrite.io/docs/products/functions/templates) +- [Appwrite Functions API reference](https://appwrite.io/docs/references) \ No newline at end of file diff --git a/src/routes/integrations/ai-hugging-face-language-translation/+page.markdoc b/src/routes/integrations/ai-hugging-face-language-translation/+page.markdoc new file mode 100644 index 0000000000..2a54411910 --- /dev/null +++ b/src/routes/integrations/ai-hugging-face-language-translation/+page.markdoc @@ -0,0 +1,77 @@ +--- +layout: integration +title: Language translation with Hugging Face +description: Translate text between languages +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/ai-hugging-face-language-translation/cover.png +category: AI +product: + avatar: '/images/integrations/avatars/hugging-face.png' + vendor: Hugging Face + description: 'Hugging Face is a leading AI company that offers an extensive library of pre-trained models for various natural language processing and computer vision tasks, including image classification.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/ai-hugging-face-language-translation/cover.png + - /images/integrations/ai-hugging-face-language-translation/hugging-face-create-api-token.png + - /images/integrations/ai-hugging-face-language-translation/language-translation-function-template.png + - /images/integrations/ai-hugging-face-language-translation/language-translation-env-variables.png + - /images/integrations/ai-hugging-face-language-translation/language-translation-demo.png +--- + +Language translation is a fundamental task in natural language processing that involves converting text from one language to another. Hugging Face offers a robust library of pre-trained models for various natural language processing tasks, including language translation. By integrating Hugging Face's advanced models with your applications, you can automate and enhance translating text across different languages. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to add language translation with Hugging Face to your app. This will allow you to translate text from one language to another. + +# How to implement + +To implement the Hugging Face language translation function, there are several steps you must complete: + +## Step 1: Sign up for Hugging Face + +First, you must [sign up for a Hugging Face account](https://huggingface.co/join). Once your account is set up, visit your profile settings, head to the [Access Tokens](https://huggingface.co/settings/tokens) page, and create an **access token** with **Inference** permissions. Save this token for further usage. + +![Create API token](/images/integrations/ai-hugging-face-language-translation/hugging-face-create-api-token.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. If you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click the **Templates** tab, and search for the **Language Translation** function template. + +![Function template](/images/integrations/ai-hugging-face-language-translation/language-translation-function-template.png) + +During the setup process, add the **Hugging Face access token** in the **Variables** step. + +![Environment variables](/images/integrations/ai-hugging-face-language-translation/language-translation-env-variables.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. + +## Step 3: Test the function + +Once the function is ready, visit the **Domains** tab on the **Functions** page and copy the domain URL to test the function. You can open this URL in your browser to test with our pre-built interface. + +![Demo](/images/integrations/ai-hugging-face-language-translation/language-translation-demo.png) + +You can also use tools like Postman, cURL, or your favorite programming language to send a POST (HTTP) request with a prompt and receive a response from the function. + +```bash +curl -X POST http://DEPLOYED_FUNCTION_DOMAIN \ +-H "Content-Type: application/json" \ +-d '{"source": "What is Appwrite?"}' +``` + +# Read more about Hugging Face and Appwrite Functions + +If you would like to learn more about Hugging Face and Appwrite Functions, we have some resources that you should visit: + +- [Sign up for Hugging Face](https://huggingface.co/login) +- [Set up the Hugging Face provider in Appwrite](https://appwrite.io/docs/products/ai/tutorials/language-translation) +- [Find more function templates](https://appwrite.io/docs/products/functions/templates) +- [Appwrite Functions API reference](https://appwrite.io/docs/references) \ No newline at end of file diff --git a/src/routes/integrations/ai-hugging-face-speech-recognition/+page.markdoc b/src/routes/integrations/ai-hugging-face-speech-recognition/+page.markdoc new file mode 100644 index 0000000000..d2bfb68bc5 --- /dev/null +++ b/src/routes/integrations/ai-hugging-face-speech-recognition/+page.markdoc @@ -0,0 +1,73 @@ +--- +layout: integration +title: Speech recognition with Hugging Face +description: Process speech audio into text +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/ai-hugging-face-speech-recognition/cover.png +category: AI +product: + avatar: '/images/integrations/avatars/hugging-face.png' + vendor: Hugging Face + description: 'Hugging Face is a leading AI company that offers an extensive library of pre-trained models for various natural language processing and computer vision tasks, including image classification.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/ai-hugging-face-speech-recognition/cover.png + - /images/integrations/ai-hugging-face-speech-recognition/token.png + - /images/integrations/ai-hugging-face-speech-recognition/template.png + - /images/integrations/ai-hugging-face-speech-recognition/variables.png +--- + +Speech recognition is a transformative technology that converts spoken language into text. Hugging Face, a prominent AI company offers a comprehensive library of pre-trained models for various natural language processing tasks, including speech recognition. By integrating Hugging Face's models with your applications, you can automate and enhance the transcription and analysis of audio content. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to add speech recognition with Hugging Face to your app. This will allow you to upload an audio file to an Appwrite storage bucket and store the recognized speech in an Appwrite collection as text. + +# How to implement + +To implement the Hugging Face speech recognition function, there are several steps you must complete: + +## Step 1: Sign up for Hugging Face + +First, you must [sign up for a Hugging Face account](https://huggingface.co/join). Once your account is set up, visit your profile settings, head to the [Access Tokens](https://huggingface.co/settings/tokens) page, and create an **access token** with the **Inference** permissions. Save this token for further usage. + +![Create API token](/images/integrations/ai-hugging-face-speech-recognition/token.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. If you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click the **Templates** tab, and search for the **Speech Recognition** function template. + +![Function template](/images/integrations/ai-hugging-face-speech-recognition/template.png) + +During the setup process, click the checkbox to generate an Appwrite API key on completion and add the **Hugging Face access token** in the **Variables** step. If you are self-hosting Appwrite, click the **optional variables** dropdown and update the Appwrite endpoint to your instance’s publicly accessible endpoint. + +![Env variables](/images/integrations/ai-hugging-face-speech-recognition/variables.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. + +## Step 3: Test the Function + +Once all the steps are complete, it is time to test the function! Use the Appwrite console or one of Appwrite’s SDKs to [upload an audio file](https://appwrite.io/docs/references/cloud/client-web/storage#createFile) to the `speech_recognition` storage bucket. If successful, you will find a response saved in the `speech_recognition` collection in the `ai` database in the following format: + +| audio | speech | +| --- | --- | +| 66a7b386000a1042305c | my thought i have nobody by a beauty and will as you've poured mr rochester is sub and that so don't find simpus and devoted about to at might in a | + +The `audio` attribute contains the ID of the audio file uploaded to the `speech_recognition` storage bucket, and the `speech` attribute contains the response from Hugging Face. + + +# Read more about Hugging Face and Appwrite Functions + +If you would like to learn more about Hugging Face and Appwrite Functions, we have some resources that you should visit: + +- [Sign up for Hugging Face](https://huggingface.co/login) +- [Set up the Hugging Face provider in Appwrite](https://appwrite.io/docs/products/ai/tutorials/object-detection) +- [Find more function templates](https://appwrite.io/docs/products/functions/templates) +- [Appwrite Functions API reference](https://appwrite.io/docs/references) \ No newline at end of file diff --git a/src/routes/integrations/ai-openai/+page.markdoc b/src/routes/integrations/ai-openai/+page.markdoc new file mode 100644 index 0000000000..d43aa13648 --- /dev/null +++ b/src/routes/integrations/ai-openai/+page.markdoc @@ -0,0 +1,77 @@ +--- +layout: integration +title: Prompt ChatGPT +description: Send text prompts to OpenAI GPT-3.5 and receive text generations +date: 2024-07-30 +featured: true +isPartner: true +isNew: true +cover: /images/integrations/ai-openai/cover.png +category: AI +product: + avatar: '/images/integrations/avatars/openai.png' + vendor: OpenAI + description: 'The OpenAI API allows you to integrate advanced AI models into your app.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/ai-openai/cover.png + - /images/integrations/ai-openai/api-key.png + - /images/integrations/ai-openai/template.png + - /images/integrations/ai-openai/variables.png + - /images/integrations/ai-openai/demo.png +--- + +The OpenAI API allows you to integrate advanced AI models into your app. With the API, you can access powerful language models like GPT-3.5, GPT-4, and GPT-4o, which can perform a variety of tasks, including text generation, translation, summarization, and even coding assistance. + +The API is designed to be user-friendly, providing endpoints that can be easily accessed through HTTP requests. OpenAI also provides detailed documentation and examples to help users get started and make the most of the API. + +# How does the integration work? + +Appwrite integrates OpenAI’s API to provide you with access to powerful text generation out-of-the-box with prospects to implement other features such as image creation and language translations. + +# How to implement + +To implement the OpenAI, there are several steps you must complete: + +## Step 1: Create an Open AI account + +First, [create an account on the OpenAI platform](https://platform.openai.com/) and set up your default project. Visit the [**API keys**](https://platform.openai.com/api-keys) page to create your secret key. Save this key for later usage. + +![API key](/images/integrations/ai-openai/api-key.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In case you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click on the **Templates** tab, and search for the **ChatGPT** function template. + +![Function template](/images/integrations/ai-openai/template.png) + +Add the **OpenAI API key** you saved in the **Variables** step. Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. + +![Env variables](/images/integrations/ai-openai/variables.png) + +## Step 3: Test the function + +Once the function is ready, visit the **Domains** tab on the **Functions** page and copy the domain URL to test the function. You can open this URL in your browser to test with our pre-built interface. + +![Demo](/images/integrations/ai-openai/demo.png) + +You can also use tools like Postman, cURL, or your favorite programming language to send a POST (HTTP) request with a prompt and receive a response from the Perplexity API. + +```bash +curl -X POST http://DEPLOYED_FUNCTION_DOMAIN \ +-H "Content-Type: application/json" \ +-d '{"prompt": "What is Appwrite?"}' +``` + +# Read more about OpenAI and Appwrite Functions + +If you would like to learn more about Open AI, visit these resources: + +- [Create an OpenAI developer account](https://platform.openai.com/docs/quickstart) +- [Build an intelligent chatbot with ChatGPT and Appwrite Functions](https://appwrite.io/blog/post/function-template-prompt-chatgpt) +- [Integrating OpenAI - Appwrite Docs](https://appwrite.io/docs/products/ai/integrations/openai) +- [Appwrite Functions docs](https://appwrite.io/docs/products/functions) \ No newline at end of file diff --git a/src/routes/integrations/ai-perplexity/+page.markdoc b/src/routes/integrations/ai-perplexity/+page.markdoc new file mode 100644 index 0000000000..6481feb725 --- /dev/null +++ b/src/routes/integrations/ai-perplexity/+page.markdoc @@ -0,0 +1,74 @@ +--- +layout: integration +title: Prompt Perplexity +description: Send text prompts to Perplexity and receive text generations +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/ai-perplexity/cover.png +category: AI +product: + avatar: '/images/integrations/avatars/perplexity.png' + vendor: Perplexity + description: 'Perplexity is an advanced AI tool that generates high-quality text based on given prompts.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/ai-perplexity/cover.png + - /images/integrations/ai-perplexity/api-key.png + - /images/integrations/ai-perplexity/template.png + - /images/integrations/ai-perplexity/variables.png + - /images/integrations/ai-perplexity/demo.png +--- + +Perplexity is an advanced AI tool that generates high-quality text based on given prompts. It's designed to improve applications by providing sophisticated text analysis and generation capabilities. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to create a chatbot using Perplexity. This will allow you to send text prompts to the Perplexity API and receive generated text responses, enriching your app's functionality. + +# How to implement + +To implement the Perplexity integration, follow these simple steps: + +## Step 1: Create a Perplexity account + +First, [create an account on Perplexity](https://perplexity.ai), head to the [API Settings](https://www.perplexity.ai/settings/api), configure your credit card for payments, and generate an API key. Save this API key for further usage. + +![API key](/images/integrations/ai-perplexity/api-key.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In case you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click on the **Templates** tab, and search for the **Perplexity** function template. + +![Function template](/images/integrations/ai-perplexity/template.png) + +Add the **Perplexity API key** you saved in the **Variables** step. Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. + +![Env variables](/images/integrations/ai-perplexity/variables.png) + +## Step 3: Test the function + +Once the function is ready, visit the **Domains** tab on the **Functions** page and copy the domain URL to test the function. You can open this URL in your browser to test with our pre-built interface. + +![Demo](/images/integrations/ai-perplexity/demo.png) + +You can also use tools like Postman, cURL, or your favorite programming language to send a POST (HTTP) request with a prompt and receive a response from the Perplexity API. + +```bash +curl -X POST http://DEPLOYED_FUNCTION_DOMAIN \ +-H "Content-Type: application/json" \ +-d '{"prompt": "What is Appwrite?"}' +``` + +# Read more about Perplexity and Appwrite Functions + +If you would like to learn more about Perplexity and Appwrite Functions, we have some resources that you should visit: + +- [Integrating Perplexity - Appwrite Docs](https://appwrite.io/docs/products/ai/integrations/perplexity) +- [More on Appwrite AI integrations](https://appwrite.io/blog/post/announcing-appwrite-new-ai-integrations) +- [Appwrite Functions docs](https://appwrite.io/docs/products/functions) \ No newline at end of file diff --git a/src/routes/integrations/deployments-github/+page.markdoc b/src/routes/integrations/deployments-github/+page.markdoc new file mode 100644 index 0000000000..646cc4b799 --- /dev/null +++ b/src/routes/integrations/deployments-github/+page.markdoc @@ -0,0 +1,128 @@ +--- +layout: integration +title: Deployments with GitHub +description: Manage versions and deploy Appwrite Functions +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/deployments-github/cover.png +category: Deployments +product: + avatar: '/images/integrations/avatars/github.png' + vendor: GitHub + description: 'GitHub is a web-based platform that facilitates version control and collaborative software development using Git.' +platform: + - 'Self-hosted' +images: + - /images/integrations/deployments-github/cover.png + - /images/integrations/deployments-github/create.png + - /images/integrations/deployments-github/installed.png +--- + +GitHub is a web-based platform that facilitates version control and collaborative software development using Git. It enables developers to host, review code, manage projects, and work together on software development. GitHub offers tools for issue tracking, project management, and documentation, enhancing team collaboration. It hosts millions of open-source projects from developers across the world. + +# How does the integration work? + +Appwrite supports a Git integration to enable the generation of repositories for function templates and manage automatic deployments for any Appwrite Functions through GitHub. + +> Note: For the automatic Git deployment to work, Appwrite needs to receive communication from GitHub, this means your Appwrite project must be accessible on the internet. If you're running on localhost, you need to run a proxy like [ngrok](https://ngrok.com/). +> + +# How to implement + +To implement the GitHub integration for Appwrite Functions, there are several steps you must complete: + +## Step 1: Create a GitHub App + +Visit the [Developer Settings on GitHub](https://github.com/settings/apps) to create a new GitHub app. + +![Create new GitHub app](/images/integrations/deployments-github/create.png) + +Add a GitHub name (keep in mind that this will be publicly displayed), a relevant description, and a homepage URL for your application. Then, add the following URLs: + +| Type of URL | URL | +| --- | --- | +| Callback URL | `https://[HOSTNAME_OR_IP]/v1/vcs/github/callback` | +| Callback URL | `https://[HOSTNAME_OR_IP]/v1/account/sessions/oauth2/callback/github/console` | +| Webhook URL | `https://[HOSTNAME_OR_IP]/v1/vcs/github/events` | + +Under the **Callback URLs** section, check the **Request user authentication (OAuth)** during **installation** box. After that, request the following permissions: + +{% tabs %} +{% tabsitem #repository title="Repository permissions" %} +| Permission | Access | +| --- | --- | +| Administration | Read and write | +| Checks | Read and write | +| Commit Statuses | Read and write | +| Contents | Read and write | +| Issues | Read and write | +| Metadata | Read-only | +| Pull Requests | Read and write | +| Webhooks | Read and write | +{% /tabsitem %} + +{% tabsitem #account title="Account permissions" %} +| Permission | Access | +| --- | --- | +| Email address | Read-only | +{% /tabsitem %} +{% /tabs %} + +Under the **Subscribe to events** section, check the **Pull request** and **Push** boxes. Lastly, allow **Any account** to install the GitHub app. + +Once the app is created, create a new **client secret** and **private key**, and configure a **webhook secret**. + +## Step 2: Add GitHub provider to the Appwrite instance + +For this step, you must [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. + +Visit the `.env` file created for your Appwrite instance and update the following environment variables: + +| Variable | Description | +| --- | --- | +| _APP_DOMAIN | Your main Appwrite domain used to access the Appwrite Console. When setting a public suffix domain, Appwrite will attempt to issue a valid SSL certificate automatically. When used with a dev domain, Appwrite will assign a self-signed SSL certificate. If you're using a proxy for localhost development, such as [ngrok](https://ngrok.com/), this will be the domain of your localhost proxy. | +| _APP_DOMAIN_TARGET | A hostname to serve as a CNAME target for your Appwrite custom domains. You can use the same value as used for the Appwrite _APP_DOMAIN variable. If you're using a proxy for localhost development, such as [ngrok](https://ngrok.com/), this will be the domain of your localhost proxy, such as `dd65-2405-201-4013-d8d7-b4c5-fb73-39f9-285c.ngrok.io`. | +| _APP_DOMAIN_FUNCTIONS | This will be used for system-generated [function domains](https://appwrite.io/docs/products/functions/domains). When a function domain is generated, it will be `[UNIQUE_ID].[_APP_DOMAIN_FUNCTIONS]`. If `_APP_DOMAIN_FUNCTIONS` is set to example.com for example, the generated domain for functions will be something like `64d4d22db370ae41a32e.example.com`. You can use the same value as used for the Appwrite `_APP_DOMAIN` variable. | +| _APP_VCS_GITHUB_APP_NAME | Name of your GitHub app. This is visible as the slug in your GitHub app's public link. For example, if the public link of your GitHub app is https://github.com/apps/test-appwrite-integration, then the app name will be test-appwrite-integration. | +| _APP_VCS_GITHUB_PRIVATE_KEY | RSA private key from GitHub wrapped with double quotes and newlines replaced with `\n`. | +| _APP_VCS_GITHUB_APP_ID | GitHub application ID from your GitHub app. | +| _APP_VCS_GITHUB_CLIENT_ID | GitHub client ID from your GitHub app. | +| _APP_VCS_GITHUB_CLIENT_SECRET | GitHub client secret from your GitHub app. | +| _APP_VCS_GITHUB_WEBHOOK_SECRET | GitHub webhook secret from your GitHub app. | + +This is how the fields would look like in the `.env` file: + +```bash +_APP_DOMAIN=appwrite.example.com +_APP_DOMAIN_TARGET=appwrite.example.com +_APP_DOMAIN_FUNCTIONS=functions.example.com +_APP_VCS_GITHUB_APP_NAME=my-github-app +_APP_VCS_GITHUB_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nMIIEogIBAAKCAQEAuT8f3lo/X83hfvb0ZN/KD2pl86o/jl3ywKrkj/PQZBmtEv/z\nIugE//sfFoHWc4cizkcji+n3FNU+GEdvMioKuJlPBqPTY8hAbVn7R0geZLpDV/rs\n[...]\n-----END RSA PRIVATE KEY-----" +_APP_VCS_GITHUB_APP_ID=12415 +_APP_VCS_GITHUB_CLIENT_ID=Iv1.35asdf43asd +_APP_VCS_GITHUB_CLIENT_SECRET=35rsdse532q13 +_APP_VCS_GITHUB_WEBHOOK_SECRET=super-secret +``` + +After that, run the following Docker Compose commands in your terminal to restart your Appwrite containers and verify if the changes have been successfully applied: + +```bash +docker compose up -d --force-recreate +docker compose exec appwrite vars +``` + +## Step 3: Test the provider + +To test the provider, go to the **Settings** page in your Appwrite project, navigate to the **Git configuration** section, and add an installation. On successful installation, you should be able to find your app installation in the same section. + +![Installed GitHub app](/images/integrations/deployments-github/installed.png) + +# Read more about GitHub and Appwrite Functions + +If you would like to learn more about GitHub, we have some resources that you should visit: + +- [Create a GitHub app](https://docs.github.com/en/apps/creating-github-apps/about-creating-github-apps/about-creating-github-apps) +- [GitHub setup docs for Appwrite Functions (self-hosted)](https://appwrite.io/docs/advanced/self-hosting/functions) +- [Appwrite Functions API reference](https://appwrite.io/docs/references/cloud/server-nodejs/functions) \ No newline at end of file diff --git a/src/routes/integrations/email-sendgrid/+page.markdoc b/src/routes/integrations/email-sendgrid/+page.markdoc new file mode 100644 index 0000000000..2a2e82d6f7 --- /dev/null +++ b/src/routes/integrations/email-sendgrid/+page.markdoc @@ -0,0 +1,74 @@ +--- +layout: integration +title: Email with SendGrid +description: Send customized emails to your users +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/email-sendgrid/cover.png +category: Messaging +product: + avatar: '/images/integrations/avatars/sendgrid.png' + vendor: SendGrid + description: 'SendGrid is a cloud-based service that provides email delivery and marketing solutions.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/email-sendgrid/cover.png + - /images/integrations/email-sendgrid/welcome-guide.png + - /images/integrations/email-sendgrid/provider.png + - /images/integrations/email-sendgrid/email.png +--- + +SendGrid is a cloud-based service that provides email delivery and marketing solutions. It helps businesses manage email communications, including transactional emails (like password resets and order confirmations) and marketing emails (newsletters and promotions). + +# How does the integration work? + +You can use the SendGrid provider in Appwrite Messaging to send customized emails to your users for various purposes such as reminders, promotions, announcements, and even custom authentication flows. They can be sent immediately or scheduled for later. + +# How to implement + +To implement the SendGrid provider in Appwrite Messaging, there are several steps you must complete: + +## Step 1: Sign up on Sendgrid + +First, you must [sign up for a SendGrid account](https://signup.sendgrid.com/) and finish your account setup. + +![SendGrid welcome guide](/images/integrations/email-sendgrid/welcome-guide.png) + +Next, [create an API key](https://www.twilio.com/docs/sendgrid/ui/account-and-settings/api-keys) with full access and save the key for further usage. After, follow SendGrid's [Domain Authentication](https://www.twilio.com/docs/sendgrid/ui/account-and-settings/how-to-set-up-domain-authentication) process to authenticate your domain name. If you don’t own a domain, you can follow their [Single Sender Verification](https://www.twilio.com/docs/sendgrid/ui/sending-email/sender-verification) process to verify your Sender identity. + +## Step 2: Add SendGrid provider to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Messaging** page, click on the **Providers** tab, and **create a new Email provider**. + +![Setup email provider](/images/integrations/email-sendgrid/provider.png) + +Fill in the following fields: + +| Field name | | +| --- | --- | +| API key | The full access API key you saved from the SendGrid dashboard. | +| Sender email | The provider sends emails from this sender email. The sender email must either be an email under an authenticated domain or a verified sender identity. | +| Sender name | The sender name that appears in the emails sent from this provider. | +| Reply-to email | The reply-to email that appears in the emails sent from this provider. The reply-to email must either be an email under an authenticated domain or a verified sender identity. | +| Reply-to name | The reply-to name that appears in the emails sent from this provider. | + +## Step 3: Test the SendGrid provider + +Before you proceed, you must already have at least one [topic](https://appwrite.io/docs/products/messaging/topics) or [target](https://appwrite.io/docs/products/messaging/targets) set up. + +Once the provider is set up, you can go to the **Messages** tab on the **Messaging** page and **create an email message**. You can add the test message, configure the users to send the message to, and pick when the message should be sent out. + +![Create email](/images/integrations/email-sendgrid/email.png) + +# Read more about Sendgrid and Appwrite Messaging + +If you would like to learn more about Sendgrid and Appwrite Messaging, we have some resources that you should visit: + +- [Sign up for SendGrid](https://signup.sendgrid.com/) +- [Set up the SendGrid provider in Appwrite Messaging](https://appwrite.io/docs/products/messaging/sendgrid) +- [Send email messages through Appwrite Messaging](https://appwrite.io/docs/products/messaging/send-email-messages) +- [Appwrite Messaging API reference](https://appwrite.io/docs/references/cloud/server-nodejs/messaging) \ No newline at end of file diff --git a/src/routes/integrations/lemon-squeezy-payments/+page.markdoc b/src/routes/integrations/lemon-squeezy-payments/+page.markdoc new file mode 100644 index 0000000000..30231dbd3e --- /dev/null +++ b/src/routes/integrations/lemon-squeezy-payments/+page.markdoc @@ -0,0 +1,93 @@ +--- +layout: integration +title: Payments with Lemon Squeezy +description: Receive payments and store paid orders +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/lemon-squeezy-payments/cover.png +category: Payments +product: + avatar: '/images/integrations/avatars/lemon-squeezy.png' + vendor: Lemon Squeezy + description: 'Lemon Squeezy is a platform designed to simplify the process of selling digital products online.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/lemon-squeezy-payments/cover.png + - /images/integrations/lemon-squeezy-payments/dashboard.png + - /images/integrations/lemon-squeezy-payments/template.png + - /images/integrations/lemon-squeezy-payments/variables.png + - /images/integrations/lemon-squeezy-payments/web-platform.png + - /images/integrations/lemon-squeezy-payments/demo.png + - /images/integrations/lemon-squeezy-payments/database.png +--- + +Lemon Squeezy is a platform designed to simplify the process of selling digital products online. Their product focuses on providing an all-in-one solution for creators to manage sales, subscriptions, and digital delivery. It includes features such as easy product creation, automated tax handling, customizable checkout pages, and robust analytics. This comprehensive tool is tailored for digital entrepreneurs, allowing them to focus on creating content while Lemon Squeezy handles the technical aspects of online sales. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to enable payments via Lemon Squeezy in your app. You can then use this to sell software, send PDF books, give access to video courses, or any other digital services your business needs. + +# How to implement + +To implement the Lemon Squeezy payments integration, there are several steps you must complete: + +## Step 1: Setup Lemon Squeezy + +First, [sign up on Lemon Squeezy](https://www.lemonsqueezy.com/) and add a new store. + +![Lemon Squeezy dashboard](/images/integrations/lemon-squeezy-payments/dashboard.png) + +From your Lemon Squeezy dashboard, save the following details for further usage: + +| Field name | | +| --- | --- | +| Variant ID | Head to **Store** > **Products** from the left sidebar. Create a new product with the pricing type as **Single payment** and add all other mandatory details such as name, price, and tax category. Click on the product dropdown menu (…) to get the variant ID. | +| Store ID | Head to **Settings** > **Stores** from the left sidebar. The store ID will be a number visible next to your store’s URL. | +| API key | Head to **Settings** > **API** from the left sidebar. Create a new API key. | +| Webhook secret | Head to **Settings** > **Webhooks** from the left sidebar. Add a temporary endpoint `https://temporary-endpoint` (we will replace this with our final endpoint later), create a new webhook secret, and select the event `order_created`. | + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. If you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click the **Templates** tab, and search for the **Payments with Lemon Squeezy** function template. + +![Function template](/images/integrations/lemon-squeezy-payments/template.png) + +During the setup process, click the checkbox to generate an Appwrite API key on completion and add the **Lemon Squeezy API key**, **webhook secret**, **store ID**, and **variant ID** in the **Variables** step. If you are self-hosting Appwrite, click on the **optional variables** dropdown and update the Appwrite endpoint to your instance’s publicly accessible endpoint. + +![Env variables](/images/integrations/lemon-squeezy-payments/variables.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. Once the function is deployed, go to the **Domains** tab on the **Function** page, copy the domain, and update it in your **Webhooks settings** in the following format: + +```bash +https://DEPLOYED_FUNCTION_DOMAIN/webhook +``` + +Additionally, edit the product you created and add your function URL as the **Button link** under the **Confirmation modal** section. + +## Step 3: Test the function + +Once all the steps are complete, it is time to test the function! First, copy the function URL, go to the **Appwrite project dashboard**, and add it to the **Platforms** section as a web app. This will register your function URL as an authorized hostname to interact with Appwrite (to prevent CORS). + +![Add web platform](/images/integrations/lemon-squeezy-payments/web-platform.png) + +Then, open it in your browser to test the function and access the pre-built interactive UI. You can anonymously log in through this UI and create a payment order using [Lemon Squeezy's test card number](https://docs.lemonsqueezy.com/help/getting-started/test-mode#test-card-numbers). As soon as this process is completed, the function UI will show you the complete order. + +![Demo](/images/integrations/lemon-squeezy-payments/demo.png) + +You can visit the **Databases** page in your Appwrite project, enter the `orders` database and the `orders` collection within that, and find your orders. + +![Paid orders in database](/images/integrations/lemon-squeezy-payments/database.png) + +# Read more about Lemon Squeezy Payments and Appwrite Functions + +If you would like to learn more about Lemon Squeezy Payments and Appwrite Functions, we have some resources that you should visit: + +- [Sign up for Lemon Squeezy](https://lemonsqueezy.com) +- [Add a new product to your Lemon Squeezy store](https://docs.lemonsqueezy.com/help/products/adding-products) +- [Learn more about Functions templates in Appwrite docs](https://appwrite.io/docs/products/functions/templates) diff --git a/src/routes/integrations/lemon-squeezy-subscriptions/+page.markdoc b/src/routes/integrations/lemon-squeezy-subscriptions/+page.markdoc new file mode 100644 index 0000000000..375b43af5a --- /dev/null +++ b/src/routes/integrations/lemon-squeezy-subscriptions/+page.markdoc @@ -0,0 +1,93 @@ +--- +layout: integration +title: Subscriptions with Lemon Squeezy +description: Receive recurring payments and grant subscribers extra permissions +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/lemon-squeezy-subscriptions/cover.png +category: Payments +product: + avatar: '/images/integrations/avatars/lemon-squeezy.png' + vendor: Lemon Squeezy + description: 'Lemon Squeezy is a platform designed to simplify the process of selling digital products online.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/lemon-squeezy-subscriptions/cover.png + - /images/integrations/lemon-squeezy-subscriptions/dashboard.png + - /images/integrations/lemon-squeezy-subscriptions/template.png + - /images/integrations/lemon-squeezy-subscriptions/variables.png + - /images/integrations/lemon-squeezy-subscriptions/web-platform.png + - /images/integrations/lemon-squeezy-subscriptions/demo.png + - /images/integrations/lemon-squeezy-subscriptions/user.png +--- + +Lemon Squeezy is a platform designed to simplify the process of selling digital products online. Their product focuses on providing an all-in-one solution for creators to manage sales, subscriptions, and digital delivery. It includes features such as easy product creation, automated tax handling, customizable checkout pages, and robust analytics. This comprehensive tool is tailored for digital entrepreneurs, allowing them to focus on creating content while Lemon Squeezy handles the technical aspects of online sales. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to enable subscriptions via Lemon Squeezy in your app. This will allow you to accept recurring payments from your customers and grant them extra permissions. + +# How to implement + +To implement the Lemon Squeezy subscriptions integration, there are several steps you must complete: + +## Step 1: Setup Lemon Squeezy + +First, [sign up on Lemon Squeezy](https://www.lemonsqueezy.com/) and add a new store. + +![Lemon Squeezy dashboard](/images/integrations/lemon-squeezy-subscriptions/dashboard.png) + +From your Lemon Squeezy dashboard, save the following details for further usage: + +| Field name | | +| --- | --- | +| Variant ID | Head to **Store** > **Products** from the left sidebar. Create a new product with the pricing type as **Subscription** and add all other mandatory details such as name, price, payment schedule, and tax category. Click on the product dropdown menu (…) to get the variant ID. | +| Store ID | Head to **Settings** > **Stores** from the left sidebar. The store ID will be a number visible next to your store’s URL. | +| API key | Head to **Settings** > **API** from the left sidebar. Create a new API key. | +| Webhook secret | Head to **Settings** > **Webhooks** from the left sidebar. Add a temporary endpoint `https://temporary-endpoint` (we will replace this with our final endpoint later), create a new webhook secret, and select the events `subscription_created` and `subscription_expired`. | + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. If you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click the **Templates** tab, and search for the **Subscriptions with Lemon Squeezy** function template. + +![Function template](/images/integrations/lemon-squeezy-subscriptions/template.png) + +During the setup process, click the checkbox to generate an Appwrite API key on completion and add the **Lemon Squeezy API key**, **webhook secret**, **store ID**, and **variant ID** in the **Variables** step. If you are self-hosting Appwrite, click on the **optional variables** dropdown and update the Appwrite endpoint to your instance’s publicly accessible endpoint. + +![Env variables](/images/integrations/lemon-squeezy-subscriptions/variables.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. Once the function is deployed, go to the **Domains** tab on the **Function** page, copy the domain, and update it in your **Webhooks settings** in the following format: + +```bash +https://DEPLOYED_FUNCTION_DOMAIN/webhook +``` + +Additionally, edit the product you created and add your function URL as the **Button link** under the **Confirmation modal** section. + +## Step 3: Test the function + +Once all the steps are complete, it is time to test the function! First, copy the function URL, go to the **Appwrite project dashboard**, and add it to the **Platforms** section as a web app. This will register your function URL as an authorized hostname to interact with Appwrite (to prevent CORS). + +![Add web platform](/images/integrations/lemon-squeezy-subscriptions/web-platform.png) + +Then, open it in your browser to test the function and access the pre-built interactive UI. You can anonymously log in through this UI and create a subscription using [Lemon Squeezy's test card number](https://docs.lemonsqueezy.com/help/getting-started/test-mode#test-card-numbers). As soon as this process is complete, the function UI will show that you are subscribed. + +![Demo](/images/integrations/lemon-squeezy-subscriptions/demo.png) + +Additionally, your user on Appwrite will feature the `subscriber` label, which you can verify by visiting the **Auth** page in your Appwrite project and clicking on the user. + +![Subscribed user](/images/integrations/lemon-squeezy-subscriptions/user.png) + +# Read more about Lemon Squeezy Subscriptions and Appwrite Functions + +If you would like to learn more about Lemon Squeezy Subscriptions and Appwrite Functions, we have some resources that you should visit: + +- [Sign up for Lemon Squeezy](https://lemonsqueezy.com) +- [Add a new product to your Lemon Squeezy store](https://docs.lemonsqueezy.com/help/products/adding-products) +- [Learn more about Functions templates in Appwrite docs](https://appwrite.io/docs/products/functions/templates) \ No newline at end of file diff --git a/src/routes/integrations/logging-appsignal/+page.markdoc b/src/routes/integrations/logging-appsignal/+page.markdoc new file mode 100644 index 0000000000..2d611b5e79 --- /dev/null +++ b/src/routes/integrations/logging-appsignal/+page.markdoc @@ -0,0 +1,79 @@ +--- +layout: integration +title: Logging with AppSignal +description: Store logs and track issues on your Appwrite instance +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/logging-appsignal/cover.png +category: Logging +product: + avatar: '/images/integrations/avatars/appsignal.png' + vendor: AppSignal + description: 'AppSignal is a comprehensive monitoring and error-tracking tool designed for developers to gain insights into the performance of their applications.' +platform: + - 'Self-hosted' +images: + - /images/integrations/logging-appsignal/cover.png + - /images/integrations/logging-appsignal/api-key.png + - /images/integrations/logging-appsignal/errors-list.png + - /images/integrations/logging-appsignal/error.png +--- + +AppSignal is a comprehensive monitoring and error-tracking tool designed for developers to gain insights into the performance of their applications. It provides detailed metrics on application performance, error tracking, and server health, enabling developers to diagnose and resolve issues efficiently. AppSignal supports various programming languages and frameworks, offering seamless integration and an intuitive interface. It helps teams monitor application health in real time, receive alerts on critical issues, and analyze performance data to optimize their code and infrastructure, ultimately ensuring a smooth user experience and maintaining high application reliability. + +# How does the integration work? + +If you are using self-hosting Appwrite, you can use the AppSignal provider for error-tracking and logging for your Appwrite instance. + +# How to implement + +To implement the AppSignal provider for logging, there are several steps you must complete: + +## Step 1: Sign up for AppSignal + +First, [sign up on AppSignal](https://appsignal.com/users/sign_up) and create your first organization (or join an existing one). Head to the **App settings** from the left sidebar and click on **Push & deploy**. Copy the **app-specific Push API key** for further usage. + +![API key](/images/integrations/logging-appsignal/api-key.png) + +## Step 2: Add AppSignal provider to your Appwrite instance + +For this step, you must [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. + +Visit the `.env` file created for your Appwrite instance and update the following environment variables: + +```bash +_APP_LOGGING_PROVIDER=appSignal +_APP_LOGGING_CONFIG=APPSIGNAL_API_KEY +``` + +After that, run the following Docker Compose commands in your terminal to restart your Appwrite containers and verify if the changes have been successfully applied: + +```bash +docker compose up -d --force-recreate +docker compose exec appwrite vars +``` + +## Step 3: Test the provider + +Once the AppSignal provider is configured, run the following command in your terminal: + +```bash +docker compose exec appwrite ssl --domain=”wrongdomain.com +``` + +Doing so will show errors in your AppSignal **Errors** page. + +![Errors list](/images/integrations/logging-appsignal/errors-list.png) + +You can also view the error summary for further details. + +![Error](/images/integrations/logging-appsignal/error.png) + +# Read more about AppSignal and Appwrite + +If you would like to learn more about AppSignal and Appwrite, we have some resources that you should visit: + +- [Sign up for AppSignal](https://appsignal.com/users/sign_up) +- [Handling errors in Appwrite self-hosted instances](https://appwrite.io/docs/advanced/self-hosting/production#errors) \ No newline at end of file diff --git a/src/routes/integrations/logging-raygun/+page.markdoc b/src/routes/integrations/logging-raygun/+page.markdoc new file mode 100644 index 0000000000..28075c5a75 --- /dev/null +++ b/src/routes/integrations/logging-raygun/+page.markdoc @@ -0,0 +1,79 @@ +--- +layout: integration +title: Logging with Raygun +description: Store logs and track issues on your Appwrite instance +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/logging-raygun/cover.png +category: Logging +product: + avatar: '/images/integrations/avatars/raygun.png' + vendor: Raygun + description: 'Raygun is an application performance monitoring (APM) and error tracking tool designed for software developers to identify and resolve issues in their applications quickly. It provides real-time insights into software performance, error diagnostics, and user experience, helping teams to detect, diagnose, and fix errors faster. With features like crash reporting, real user monitoring, and deployment tracking, Raygun helps ensure the stability and efficiency of applications.' +platform: + - 'Self-hosted' +images: + - /images/integrations/logging-raygun/cover.png + - /images/integrations/logging-raygun/api-key.png + - /images/integrations/logging-raygun/crash-reporting.png + - /images/integrations/logging-raygun/error.png +--- + +Raygun is an application performance monitoring (APM) and error tracking tool designed for software developers to identify and resolve issues in their applications quickly. It provides real-time insights into software performance, error diagnostics, and user experience, helping teams to detect, diagnose, and fix errors faster. With features like crash reporting, real user monitoring, and deployment tracking, Raygun helps ensure the stability and efficiency of applications, making it an essential tool for maintaining high-quality software and delivering a seamless user experience. + +# How does the integration work? + +If you are using self-hosting Appwrite, you can use the Raygun provider for error-tracking and logging for your Appwrite instance. + +# How to implement + +To implement the Raygun provider for logging, there are several steps you must complete: + +## Step 1: Sign up for Raygun + +First, [sign up on Raygun](https://app.raygun.com/signup?product=cr) (pick **Crash Reporting** as the product you’re most interested in) and create your first application. Head to **Application settings** from the left-side navbar and copy your **API Key**. + +![API key](/images/integrations/logging-raygun/api-key.png) + +## Step 2: Add Raygun provider to your Appwrite instance + +For this step, you must [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. + +Visit the `.env` file created for your Appwrite instance and update the following environment variables: + +```bash +_APP_LOGGING_PROVIDER=raygun +_APP_LOGGING_CONFIG=RAYGUN_API_KEY +``` + +After that, run the following Docker Compose commands in your terminal to restart your Appwrite containers and verify if the changes have been successfully applied: + +```bash +docker compose up -d --force-recreate +docker compose exec appwrite vars +``` + +## Step 3: Test the provider + +Once the Sentry provider is configured, run the following command in your terminal: + +```bash +docker compose exec appwrite ssl --domain=”wrongdomain.com +``` + +Doing so will show errors in your Raygun Crash Reporting dashboard. + +![Raygun Crash Reporting](/images/integrations/logging-raygun/crash-reporting.png) + +You can also view the error summary for further details. + +![Error](/images/integrations/logging-raygun/error.png) + +# Read more about Raygun and Appwrite + +If you would like to learn more about Raygun and Appwrite, we have some resources that you should visit: + +- [Sign up for Raygun](https://app.raygun.com/signup?product=cr) +- [Handling errors in Appwrite self-hosted instances](https://appwrite.io/docs/advanced/self-hosting/production#errors) \ No newline at end of file diff --git a/src/routes/integrations/logging-sentry/+page.markdoc b/src/routes/integrations/logging-sentry/+page.markdoc new file mode 100644 index 0000000000..2eeeeb2700 --- /dev/null +++ b/src/routes/integrations/logging-sentry/+page.markdoc @@ -0,0 +1,83 @@ +--- +layout: integration +title: Logging with Sentry +description: Store logs and track issues on your Appwrite instance +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/logging-sentry/cover.png +category: Logging +product: + avatar: '/images/integrations/avatars/sentry.png' + vendor: Sentry + description: 'Sentry is an open-source error-tracking and performance-monitoring tool designed to help developers identify, diagnose, and fix issues in real-time.' +platform: + - 'Self-hosted' +images: + - /images/integrations/logging-sentry/cover.png + - /images/integrations/logging-sentry/project.png + - /images/integrations/logging-sentry/issues.png + - /images/integrations/logging-sentry/issue-details.png +--- + +Sentry is an open-source error-tracking and performance-monitoring tool designed to help developers identify, diagnose, and fix issues in real-time. It provides comprehensive insights into application health by capturing and analyzing error events, performance metrics, and user feedback. Sentry supports multiple programming languages and frameworks, making it versatile for various development environments. With features like stack traces, context data, and alerting, Sentry allows teams to quickly pinpoint the root cause of issues and improve the overall quality and reliability of their software applications. + +# How does the integration work? + +If you are using self-hosting Appwrite, you can use the Sentry provider for error-tracking and logging for your Appwrite instance. + +# How to implement + +To implement the Sentry provider for logging, there are several steps you must complete: + +## Step 1: Set up Sentry + +First, [sign up on Sentry](https://sentry.io/signup/) and create a new project. + +![Create project](/images/integrations/logging-sentry/project.png) + +Head to **Settings** > **Projects** > Select your Sentry project > **Client Keys (DSN)**. Save the DSN for further usage. + +## Step 2: Add Sentry provider to your Appwrite instance + +For this step, you must [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. + +To add the Sentry provider, you need to slightly reconfigure your DSN. Your Sentry DSN is made up of 3 parts: **public key**, **URI**, and **project ID**. The Appwrite logging configuration expects a string in the format `SENTRY_PUBLIC_KEY;SENTRY_PROJECT_ID`. For example, if your Sentry DSN is `https://public@sentry.example.com/1`, then the Appwrite logging configuration will be `public;1`. + +Visit the `.env` file created for your Appwrite instance and update the following environment variables: + +```bash +_APP_LOGGING_PROVIDER=sentry +_APP_LOGGING_CONFIG=SENTRY_PUBLIC_KEY;SENTRY_PROJECT_ID +``` + +After that, run the following Docker Compose commands in your terminal to restart your Appwrite containers and verify if the changes have been successfully applied: + +```bash +docker compose up -d --force-recreate +docker compose exec appwrite vars +``` + +## Step 3: Test the provider + +Once the Sentry provider is configured, run the following command in your terminal: + +```bash +docker compose exec appwrite ssl --domain=”wrongdomain.com +``` + +Doing so will show errors in your Sentry **Issues** page. + +![Issues](/images/integrations/logging-sentry/issues.png) + +You can also view the error details for more information. + +![Issue details](/images/integrations/logging-sentry/issue-details.png) + +# Read more about Sentry and Appwrite + +If you would like to learn more about Sentry and Appwrite, we have some resources that you should visit: + +- [Sign up for Sentry](https://sentry.io/signup/) +- [Handling errors in Appwrite self-hosted instances](https://appwrite.io/docs/advanced/self-hosting/production#errors) \ No newline at end of file diff --git a/src/routes/integrations/oauth-amazon/+page.markdoc b/src/routes/integrations/oauth-amazon/+page.markdoc new file mode 100644 index 0000000000..a806f8907d --- /dev/null +++ b/src/routes/integrations/oauth-amazon/+page.markdoc @@ -0,0 +1,64 @@ +--- +layout: integration +title: OAuth with Amazon +description: Authenticate users with an existing Amazon account +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/oauth-amazon/cover.png +category: Auth +product: + avatar: '/images/integrations/avatars/amazon.png' + vendor: Amazon + description: 'Amazon is a global e-commerce platform that offers a wide selection of products, from electronics, books, and apparel to household goods, groceries, and digital media.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/oauth-amazon/cover.png + - /images/integrations/oauth-amazon/security-profile.png + - /images/integrations/oauth-amazon/provider.png + - /images/integrations/oauth-amazon/allowed-return-urls.png +--- + +Amazon is a global e-commerce platform that offers a wide selection of products, from electronics, books, and apparel to household goods, groceries, and digital media. Amazon offers an OAuth provider to simplify the process of integrating Amazon services into various applications, enhancing the authentication user experience while maintaining robust security standards. + +# How does the integration work? + +You can use the Amazon OAuth adapter in Appwrite Auth for user authentication and management. This can be convenient for users because they can start using your app without creating a new account. It can also be more secure, because the user has one less password that could become vulnerable. + +# How to implement + +To implement the Amazon OAuth adapter in Appwrite Auth, there are several steps you must complete: + +## Step 1: Create an Amazon Developer account + +First, [sign up for an Amazon Developer account](https://www.amazon.com/ap/register?clientContext=130-6830764-7565500&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&siteState=clientContext%3D140-5240481-9393408%2CsourceUrl%3Dhttps%253A%252F%252Fdeveloper.amazon.com%252Fsettings%252Fconsole%252Fregistration%253Freturn_to%253D%252Fapps-and-games%2Csignature%3DR6AIXlj2Bj2Fwc7EBuqfl0CNCjUbh6Ej3D&marketPlaceId=ATVPDKIKX0DER&language=en_US&pageId=amzn_developer_portal&openid.return_to=https%3A%2F%2Fdeveloper.amazon.com%2Fsettings%2Fconsole%2Fregistration%3Freturn_to%3D%252Fapps-and-games&prevRID=93HMKYWW3JS4T3Q5EJ37&openid.assoc_handle=mas_dev_portal&openid.mode=checkid_setup&prepopulatedLoginId=&failedSignInCount=0&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0), head to the [Login With Amazon console](https://developer.amazon.com/loginwithamazon/console/site/lwa/overview.html), and create a new security profile with details of your app. + +![New security profile](/images/integrations/oauth-amazon/security-profile.png) + +Save the generated **Client ID** and **Client Secret** for later usage. + +## Step 2: Add Amazon OAuth adapter to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Auth** page, open the **Settings** tab, and click on Amazon under the **OAuth2 Providers** section. + +![Amazon provider](/images/integrations/oauth-amazon/provider.png) + +Add the **Client ID** and **Client secret** you saved from the security profile you created. Copy the URI to add to the **Allowed Return URLs** field in the **Web Settings** of the security profile in the Amazon Developer console. + +![New security profile](/images/integrations/oauth-amazon/security-profile.png) + +## Step 3: Test the provider. + +Follow the [OAuth 2 login](https://appwrite.io/docs/products/auth/oauth2#init) flow to test your provider. + +# Read more about Amazon and Appwrite Auth + +If you would like to learn more about Amazon and Appwrite Auth, we have some resources that you should visit: + +- [Sign up for an Amazon Developer account](https://www.amazon.com/ap/register?clientContext=130-6830764-7565500&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&siteState=clientContext%3D140-5240481-9393408%2CsourceUrl%3Dhttps%253A%252F%252Fdeveloper.amazon.com%252Fsettings%252Fconsole%252Fregistration%253Freturn_to%253D%252Fapps-and-games%2Csignature%3DR6AIXlj2Bj2Fwc7EBuqfl0CNCjUbh6Ej3D&marketPlaceId=ATVPDKIKX0DER&language=en_US&pageId=amzn_developer_portal&openid.return_to=https%3A%2F%2Fdeveloper.amazon.com%2Fsettings%2Fconsole%2Fregistration%3Freturn_to%3D%252Fapps-and-games&prevRID=93HMKYWW3JS4T3Q5EJ37&openid.assoc_handle=mas_dev_portal&openid.mode=checkid_setup&prepopulatedLoginId=&failedSignInCount=0&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0) +- [Implement OAuth login in your apps using Appwrite Auth](https://appwrite.io/docs/products/auth/oauth2) +- [Understanding OAuth and OpenID Connect](https://appwrite.io/blog/post/oauth-openid) +- [Appwrite Auth API reference](https://appwrite.io/docs/references/cloud/client-web/account) \ No newline at end of file diff --git a/src/routes/integrations/oauth-apple/+page.markdoc b/src/routes/integrations/oauth-apple/+page.markdoc new file mode 100644 index 0000000000..1ab992917c --- /dev/null +++ b/src/routes/integrations/oauth-apple/+page.markdoc @@ -0,0 +1,74 @@ +--- +layout: integration +title: OAuth with Apple +description: Authenticate users with an existing Apple account +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/oauth-apple/cover.png +category: Auth +product: + avatar: '/images/integrations/avatars/apple.png' + vendor: Apple + description: 'An Apple ID is a unique account that allows access to Apple services, including the App Store, iCloud, iTunes, Apple Music, and more.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/oauth-apple/cover.png + - /images/integrations/oauth-apple/apple-developer-program.png + - /images/integrations/oauth-apple/provider.png +--- + +An Apple ID is a unique account that allows access to Apple services, including the App Store, iCloud, iTunes, Apple Music, and more. It serves as a key to the Apple ecosystem, allowing users to synchronize their data across Apple devices, download apps, purchase music, and access various features like FaceTime and iMessage. The Apple ID consists of an email address and a password, with options for added security through two-factor authentication. It is essential for managing personal information, subscriptions, and settings across all Apple products. + +# How does the integration work? + +You can use the Apple OAuth adapter in Appwrite Auth for user authentication and management. This can be convenient for users because they can start using your app without creating a new account. It can also be more secure, because the user has one less password that could become vulnerable. + +# How to implement + +To implement the Apple OAuth adapter in Appwrite Auth, there are several steps you must complete: + +## Step 1: Create an Apple Developer account + +First, [sign up for the Apple Developer program](https://developer.apple.com/programs). + +![Apple Developer Program](/images/integrations/oauth-apple/apple-developer-program.png) + +Before you configure any other details, you must create an **App ID** for our app. To do that, go to XCode and open the `ios` folder in your source code. Navigate to the **Signing & Capabilities** tab, click the ➕ **Capability** button, search for `Sign in with Apple`, and double-click the result to add it. Then, modify the **Bundle Identifier** to a unique string by prefixing it with any letters of your choice and change the **Team** to your Apple Developer team. This will automatically create an **App ID** for your app. + +After that, you will also need to create a **Services ID**. Visit your Apple Developer account, head to **Program resources** > **Certificates, Identifiers & Profiles** > **Identifiers**, and register a new **Service ID**, setting your Bundle ID as the unique identifier. + +View the service ID, enable **Sign in with Apple**, and in its configuration, select your primary App ID, input `appwrite.io` (or the domain of your self-hosted instance) under **Domains and Subdomains,** and temporarily add the URL `https://temporary-endpoint.com/` under **Return URLs**. This temporary URI will be replaced with the final URI once the OAuth2 adapter is configured on Appwrite. + +Head to your Apple Developer account and save the following details: + +| Field name | | +| --- | --- | +| Services ID Identifier | Head to Apple Developer account > Program resources > Certificates, Identifiers & Profiles > Identifiers and view the Services ID. | +| Team ID | Head to Apple Developer account > Membership details > Team ID | +| Authentication key (.p8 file) | Head to Apple Developer account > Program resources > Certificates, Identifiers & Profiles > Keys. Create a key and give it a name. Enable Sign in with Apple and register your key. Download the key, open it in a text editor, and copy the content. | +| Authentication key ID | Head to Apple Developer account > Program resources > Certificates, Identifiers & Profiles > Keys. Click on your key to view details. | + +## Step 2: Add Apple OAuth adapter to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Auth** page, open the **Settings** tab, and click on Apple under the **OAuth2 Providers** section. + +![Apple provider](/images/integrations/oauth-apple/provider.png) + +Add the **Services ID Identifier** (in the Bundle ID field), **Key ID**, **Team ID**, and **P8 File** content that you saved from your Apple Developer account. Copy the URI and add it to the **Return URLs** in the configuration of the Services ID you created in your Apple Developer account. + +## Step 3: Test the provider. + +Follow the [OAuth 2 login](https://appwrite.io/docs/products/auth/oauth2#init) flow to test your provider. + +# Read more about Google and Appwrite Auth + +If you would like to learn more about Google and Appwrite Auth, we have some resources that you should visit: + +- [Sign up for the Apple Developer program](https://developer.apple.com/programs) +- [Implement OAuth login in your apps using Appwrite Auth](https://appwrite.io/docs/products/auth/oauth2) +- [Understanding OAuth and OpenID Connect](https://appwrite.io/blog/post/oauth-openid) +- [Appwrite Auth API reference](https://appwrite.io/docs/references/cloud/client-web/account) \ No newline at end of file diff --git a/src/routes/integrations/oauth-discord/+page.markdoc b/src/routes/integrations/oauth-discord/+page.markdoc new file mode 100644 index 0000000000..8a81a6b1eb --- /dev/null +++ b/src/routes/integrations/oauth-discord/+page.markdoc @@ -0,0 +1,64 @@ +--- +layout: integration +title: OAuth with Discord +description: Authenticate users with an existing Discord account +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/oauth-discord/cover.png +category: Auth +product: + avatar: '/images/integrations/avatars/discord.png' + vendor: Discord + description: 'Discord is a popular communication platform designed for creating communities.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/oauth-discord/cover.png + - /images/integrations/oauth-discord/new-app.png + - /images/integrations/oauth-discord/oauth2.png + - /images/integrations/oauth-discord/provider.png +--- + +Discord is a popular communication platform designed for creating communities. It supports text, voice, and video communication, making it ideal for both casual conversations and organized group activities. Initially popular among gamers, Discord has expanded to various communities, including education, business, and hobbyist groups. + +# How does the integration work? + +You can use the Discord OAuth adapter in Appwrite Auth for user authentication and management. This can be convenient for users because they can start using your app without creating a new account. It can also be more secure, because the user has one less password that could become vulnerable. + +# How to implement + +To implement the Discord OAuth adapter in Appwrite Auth, there are several steps you must complete: + +## Step 1: Register a Discord Developer application + +First, head to the Discord Developer portal and [register an application](https://discord.com/developers/applications). + +![New Discord app](/images/integrations/oauth-discord/new-app.png) + +Head to the **OAuth2** tab under **Settings** and save the **client ID** and **client secret**. Once we create the adapter on Appwrite, we will return to add a redirect URI. + +## Step 2: Add Discord OAuth adapter to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Auth** page, open the **Settings** tab, and click on **Discord** under the **OAuth2 Providers** section. + +![OAuth2 settings](/images/integrations/oauth-discord/oauth2.png) + +Add the **client ID** and **client secret** you saved from your Discord app and copy the URI to add to the **Redirect** field in the **OAuth2** settings in your Discord app. + +![Discord provider](/images/integrations/oauth-discord/provider.png) + +## Step 3: Test the provider. + +Follow the [OAuth 2 login](https://appwrite.io/docs/products/auth/oauth2#init) flow to test your provider. + +# Read more about Discord and Appwrite Auth + +If you would like to learn more about Discord and Appwrite Auth, we have some resources that you should visit: + +- [Register a Discord Developer application](https://discord.com/developers/applications) +- [Implement OAuth login in your apps using Appwrite Auth](https://appwrite.io/docs/products/auth/oauth2) +- [Understanding OAuth and OpenID Connect](https://appwrite.io/blog/post/oauth-openid) +- [Appwrite Auth API reference](https://appwrite.io/docs/references/cloud/client-web/account) \ No newline at end of file diff --git a/src/routes/integrations/oauth-google/+page.markdoc b/src/routes/integrations/oauth-google/+page.markdoc new file mode 100644 index 0000000000..78843d23f4 --- /dev/null +++ b/src/routes/integrations/oauth-google/+page.markdoc @@ -0,0 +1,69 @@ +--- +layout: integration +title: OAuth with Google +description: Authenticate users with an existing Google account +date: 2024-07-30 +featured: true +isPartner: true +isNew: true +cover: /images/integrations/oauth-google/cover.png +category: Auth +product: + avatar: '/images/integrations/avatars/google.png' + vendor: Google + description: 'Google Workspace is a comprehensive suite of cloud-based productivity and collaboration tools developed by Google.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/oauth-google/cover.png + - /images/integrations/oauth-google/consent-screen.png + - /images/integrations/oauth-google/client-id.png + - /images/integrations/oauth-google/provider.png + - /images/integrations/oauth-google/redirect-uri.png +--- + +Google Workspace, formerly known as G Suite, is a comprehensive suite of cloud-based productivity and collaboration tools developed by Google. It includes popular applications such as Gmail for email, Google Drive for cloud storage, Google Docs for document creation, Google Sheets for spreadsheets, and Google Slides for presentations. Additionally, it offers tools for communication and collaboration, including Google Meet for video conferencing and Google Chat for instant messaging. Google Workspace is designed for businesses, educational institutions, and individuals, providing seamless integration, real-time collaboration, and robust security features to enhance productivity and streamline workflows. + +# How does the integration work? + +You can use the Google OAuth adapter in Appwrite Auth for user authentication and management. This approach is convenient for users, allowing them to start using your app without creating a new account. Additionally, it enhances security by eliminating the need for users to manage yet another password, reducing the risk of potential vulnerabilities. + +# How to implement + +To implement the Google OAuth adapter in Appwrite Auth, there are several steps you must complete: + +## Step 1: Create an OAuth 2.0 client ID on Google Cloud + +First, [log into the Google Cloud Console](https://console.cloud.google.com/), create a new project, click on **APIs and Services** in the left-side navbar, and open the **OAuth consent screen** page. Add all the required details about your app and select the scopes `.../auth/userinfo.email`, `.../auth/userinfo.profile`, and `openid`. + +![OAuth consent screen](/images/integrations/oauth-google/consent-screen.png) + +Next, go to the **Credentials** page under **APIs and Services** in the left-side navbar and create a new **OAuth 2.0 client ID**. Select the **application type** as `Web application,` and in the **authorized redirect URIs** field, temporarily add the URL `https://temporary-endpoint.com/`. This temporary URI will be replaced with the final URI once the OAuth2 adapter is configured on Appwrite. + +![OAuth client ID](/images/integrations/oauth-google/client-id.png) + +Save the generated **Client ID** and **Client secret** for later usage. + +## Step 2: Add Google OAuth adapter to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Auth** page, open the **Settings** tab, and click on Google under the **OAuth2 Providers** section. + +![Google provider](/images/integrations/oauth-google/provider.png) + +Add the **Client ID** and **Client secret** you saved from Google Cloud and copy the URI to add to the **authorized redirect URIs** field in the credential you created on Google Cloud. + +![OAuth redirect URI](/images/integrations/oauth-google/redirect-uri.png) + +## Step 3: Test the provider. + +Follow the [OAuth 2 login](https://appwrite.io/docs/products/auth/oauth2#init) flow to test your provider. + +# Read more about Google and Appwrite Auth + +If you would like to learn more about Google and Appwrite Auth, we have some resources that you should visit: + +- [How to set up Google authentication in React with Appwrite](https://appwrite.io/blog/post/set-up-google-auth-appwrite-react) +- [Implement OAuth login in your apps using Appwrite Auth](https://appwrite.io/docs/products/auth/oauth2) +- [Understanding OAuth and OpenID Connect](https://appwrite.io/blog/post/oauth-openid) +- [Appwrite Auth API reference](https://appwrite.io/docs/references/cloud/client-web/account) \ No newline at end of file diff --git a/src/routes/integrations/oauth-notion/+page.markdoc b/src/routes/integrations/oauth-notion/+page.markdoc new file mode 100644 index 0000000000..a8e973e432 --- /dev/null +++ b/src/routes/integrations/oauth-notion/+page.markdoc @@ -0,0 +1,64 @@ +--- +layout: integration +title: OAuth with Notion +description: Authenticate users with an existing Notion account +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/oauth-notion/cover.png +category: Auth +product: + avatar: '/images/integrations/avatars/notion.png' + vendor: Notion + description: 'Notion is a versatile productivity tool that combines note-taking, task management, and collaboration features into a single application.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/oauth-notion/cover.png + - /images/integrations/oauth-notion/new-integration.png + - /images/integrations/oauth-notion/provider.png + - /images/integrations/oauth-notion/redirect-uri.png +--- + +Notion is a versatile productivity tool that combines note-taking, task management, and collaboration features into a single application. It allows users to create customizable workspaces where they can organize their projects, documents, and databases. Notion's flexibility comes from its block-based system, which lets users add various types of content, such as text, images, lists, tables, and more, in a modular fashion. This makes it suitable for personal use, team collaboration, and project management. + +# How does the integration work? + +You can use the Notion OAuth adapter in Appwrite Auth for user authentication and management. This can be convenient for users because they can start using your app without creating a new account. It can also be more secure, because the user has one less password that could become vulnerable. + +# How to implement + +To implement the Notion OAuth adapter in Appwrite Auth, there are several steps you must complete: + +## Step 1: Create a Notion integration + +First, head over to Notion and [create a new integration](https://www.notion.so/profile/integrations). Set the integration type as **Public** if you want your integration to be used by any Notion user, not just members of your workspace (otherwise, set it as **Internal**), and add all the mandatory info. In the **Redirect URIs** field, temporarily add the URL `https://temporary-endpoint/`. This temporary URI will be replaced with the final URI once the OAuth2 adapter is configured on Appwrite. + +![New Notion integration](/images/integrations/oauth-notion/new-integration.png) + +From the **Configuration** tab, save the **OAuth Client ID** and **OAuth Client Secret** for later usage. + +## Step 2: Add Notion OAuth adapter to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Auth** page, open the **Settings** tab, and click on **Notion** under the **OAuth2 Providers** section. + +![Notion provider](/images/integrations/oauth-notion/provider.png) + +Add the **OAuth Client ID** and **OAuth Client Secret** you saved from your Notion integration and copy the URI to add to the **Redirect URIs** field on the **Basic Information** tab in your Notion integration. + +![Redirect URI](/images/integrations/oauth-notion/redirect-uri.png) + +## Step 3: Test the provider. + +Follow the [OAuth 2 login](https://appwrite.io/docs/products/auth/oauth2#init) flow to test your provider. + +# Read more about Notion and Appwrite Auth + +If you would like to learn more about Notion and Appwrite Auth, we have some resources that you should visit: + +- [Create a Notion integration](https://www.notion.so/profile/integrations) +- [Implement OAuth login in your apps using Appwrite Auth](https://appwrite.io/docs/products/auth/oauth2) +- [Understanding OAuth and OpenID Connect](https://appwrite.io/blog/post/oauth-openid) +- [Appwrite Auth API reference](https://appwrite.io/docs/references/cloud/client-web/account) \ No newline at end of file diff --git a/src/routes/integrations/phone-auth-twilio/+page.markdoc b/src/routes/integrations/phone-auth-twilio/+page.markdoc new file mode 100644 index 0000000000..063756dd2d --- /dev/null +++ b/src/routes/integrations/phone-auth-twilio/+page.markdoc @@ -0,0 +1,80 @@ +--- +layout: integration +title: Phone auth with Twilio +description: Authenticate users through OTPs in SMSes via Twilio +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/phone-auth-twilio/cover.png +category: Auth +product: + avatar: '/images/integrations/avatars/twilio.png' + vendor: Twilio + description: 'Twilio is a cloud communications platform that provides programmable communication tools using web APIs and SDKs.' +platform: + - 'Self-hosted' +images: + - /images/integrations/phone-auth-twilio/cover.png + - /images/integrations/phone-auth-twilio/twilio-console.png + - /images/integrations/phone-auth-twilio/user.png +--- + +Twilio is a cloud communications platform that provides programmable communication tools for making and receiving phone calls, sending and receiving text messages, and performing other communication functions using web APIs and SDKs. + +# How does the integration work? + +If you are using self-hosting Appwrite, you can use the Twilio provider to deliver OTPs (one-time passwords) for phone authentication in Appwrite Auth. This is a great passwordless alternative to standard authentication methods, especially for mobile apps, and has several benefits, such as enhanced security, higher user convenience, reduced password fatigue, and easier fraud prevention. + +Phone authentication via OTPs is also available on [Appwrite Cloud](https://cloud.appwrite.io) without the need to manually integrate a provider. + +# How to implement + +To implement the Twilio provider for phone authentication, there are several steps you must complete: + +## Step 1: Sign up for Twilio + +First, you must [sign up for a Twilio account](https://www.twilio.com/try-twilio), upgrade your account (in case you want to message numbers other than your own), and purchase a phone number with the SMS capability. + +![Twilio console](/images/integrations/phone-auth-twilio/twilio-console.png) + +Ensure you save the following information for later use: + +| Field name | | +| --- | --- | +| Account SID | Head to **Twilio console** > **Account info** > **Account SID**. | +| Auth token | Head to **Twilio console** > **Account info** > **Auth Token**. | +| Phone number | You can access numbers by navigating to your **Twilio console** > **Develop** > **Phone Numbers** > **Manage** > **Active Numbers**. | + +## Step 2: Add Twilio provider to your Appwrite instance + +For this step, you must [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. + +Visit the `.env` file created for your Appwrite instance and update the following environment variables: + +```bash +_APP_SMS_PROVIDER=sms://[ACCOUNT_SID]:[AUTH_TOKEN]@twilio +_APP_SMS_FROM=[TWILIO_PHONE_NUMBER] +``` + +After that, run the following Docker Compose commands in your terminal to restart your Appwrite containers and verify if the changes have been successfully applied: + +```bash +docker compose up -d --force-recreate +docker compose exec appwrite vars +``` + +## Step 3: Test the provider + +To test the provider, you must [implement the phone (SMS) authentication flow](https://appwrite.io/docs/products/auth/phone-sms) in a web or mobile app. On successful login, you should see a user on the **Auth** page of your Appwrite project with their phone number visible as the identifier. + +![User](/images/integrations/phone-auth-twilio/user.png) + +# Read more about Twilio and Appwrite Auth + +If you would like to learn more about phone authentication with Twilio and Appwrite Auth, we have some resources that you should visit: + +- [Sign up for Twilio](https://www.twilio.com/try-twilio) +- [SMS delivery docs for Appwrite (self-hosted)](https://appwrite.io/docs/advanced/self-hosting/sms) +- [Appwrite phone auth docs](https://appwrite.io/docs/products/auth/phone-sms) +- [Appwrite Accounts API reference](https://appwrite.io/docs/references/cloud/client-web/account) \ No newline at end of file diff --git a/src/routes/integrations/push-apns/+page.markdoc b/src/routes/integrations/push-apns/+page.markdoc new file mode 100644 index 0000000000..7cb937bc7d --- /dev/null +++ b/src/routes/integrations/push-apns/+page.markdoc @@ -0,0 +1,70 @@ +--- +layout: integration +title: Push notifications with APNs +description: Send customized notifications to your users +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/push-apns/cover.png +category: Messaging +product: + avatar: '/images/integrations/avatars/apple.png' + vendor: Apple + description: 'Apple Push Notification Service is an Apple platform that enables developers to send notifications to iOS devices, macOS computers, and other Apple devices.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/push-apns/cover.png + - /images/integrations/push-apns/apple-developer-program.png + - /images/integrations/push-apns/provider.png +--- + +Apple Push Notification Service (APNs) is an Apple platform that enables developers to send notifications to iOS devices, macOS computers, and other Apple devices. It allows app developers to send remote notifications, alerting users to new content, messages, updates, and app-specific information. + +# How does the integration work? + +You can use the APNs provider in Appwrite Messaging to send push notifications to your users’ Apple devices. APNs is a best-effort service and will attempt to deliver messages to your device when it's online and available again. APNs will save the last message for 30 days or less and attempt delivery as soon as it's online. + +# How to implement + +To implement the APNs provider in Appwrite Messaging, there are several steps you must complete: + +## Step 1: Sign up on Apple Developer + +First, [sign up for the Apple Developer program](https://developer.apple.com/programs). + +![Apple developer program](/images/integrations/push-apns/apple-developer-program.png) + +Before you configure any other details, you must create an **App ID** for our app. To do that, go to XCode and open the `ios` folder in your source code. Navigate to the **Signing & Capabilities** tab, click the **+ Capability** button, search for `Push Notifications`, and double-click the result to add it. Then, modify the **Bundle Identifier** to a unique string by prefixing it with any letters of your choice and then change the **Team** to your Apple Developer team. This will automatically create an **App ID** for your app. + +Head to the Apple Developer account and save the following details: + +| Field name | | +| --- | --- | +| Bundle ID | Head to **Apple Developer account** > **Program resources** > **Certificates, Identifiers & Profiles** > **Identifiers** | +| Team ID | Head to **Apple Developer account** > **Membership details** > **Team ID** | +| Authentication key (.p8 file) | Head to **Apple Developer account** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. Create a key and give it a name. Enable the **Apple Push Notifications service (APNs)**, and register your key. | +| Authentication key ID | Head to **Apple Developer account** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. Click on your key to view details. | + +## Step 2: Add APNs provider to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Messaging** page, click on the **Providers** tab, and **create a new push notifications provider**. + +Enter the **team ID**, **bundle ID**, **authentication key ID**, and **authentication key (.p8 file)** that you saved from your Apple Developer account. In case your app is signed with a development provisioning profile, enable **Sandbox** mode. + +![Apple provider](/images/integrations/push-apns/provider.png) + +## Step 3: Test the provider + +Follow the [Send push notifications](https://appwrite.io/docs/products/messaging/send-push-notifications) flow to test your provider. + +# Read more about APNs and Appwrite Messaging + +If you would like to learn more about APNs and Appwrite Messaging, we have some resources that you should visit: + +- [Set up the APNs provider in Appwrite Messaging](https://appwrite.io/docs/products/messaging/apns) +- [Send push notifications through Appwrite Messaging](https://appwrite.io/docs/products/messaging/send-push-notifications) +- [Best practices for sending push notifications](https://appwrite.io/blog/post/push-notifications-best-practices) +- [Appwrite Messaging API reference](https://appwrite.io/docs/references/cloud/server-nodejs/messaging) \ No newline at end of file diff --git a/src/routes/integrations/push-fcm/+page.markdoc b/src/routes/integrations/push-fcm/+page.markdoc new file mode 100644 index 0000000000..7d543d2720 --- /dev/null +++ b/src/routes/integrations/push-fcm/+page.markdoc @@ -0,0 +1,94 @@ +--- +layout: integration +title: Push notifications with FCM +description: Send customized notifications to your users +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/push-fcm/cover.png +category: Messaging +product: + avatar: '/images/integrations/avatars/fcm.png' + vendor: Firebase + description: 'Firebase Cloud Messaging is a cross-platform messaging solution from Google that enables you to send notifications and messages to users across Android, iOS, and web applications.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/push-fcm/cover.png + - /images/integrations/push-fcm/private-key.png + - /images/integrations/push-fcm/provider.png +--- + +Firebase Cloud Messaging (FCM) is a cross-platform messaging solution from Google that enables you to send notifications and messages to users across Android, iOS, and web applications. It supports both notification messages displayed by the system UI and data messages handled by your app’s code. + +# How does the integration work? + +You can use the FCM provider in Appwrite Messaging to send push notifications to your users’ iOS, Android, and web apps. These can be used to send app updates, special offers, instant notifications, reminders, and more. + +# How to implement + +To implement the FCM provider in Appwrite Messaging, there are several steps you must complete: + +## Step 1: Sign up on Firebase + +First, you must [sign up for a Firebase account](https://firebase.google.com/) and create a new project. Head to the **Project settings** page, click on the **Service accounts** tab, and **generate new private key**. Download the JSON file for later use. + +![Firebase service account private key](/images/integrations/push-fcm/private-key.png) + +You must also verify that FCM has been enabled on your project by visiting the **Cloud Messaging** tab. If FCM is disabled, click the three-dots menu, open the link, and click **Enable**. + +## Step 2: Add FCM provider to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Messaging** page, click on the **Providers** tab, and **create a new push notifications provider**. + +Select **FCM** and upload the JSON file you downloaded from Firebase. + +![FCM provider](/images/integrations/push-fcm/provider.png) + +## Step 3: Test the provider + +To test the provider on mobile apps, there are some additional configuration steps: + +{% tabs %} +{% tabsitem #android title="Android with FCM" %} +1. Install the `com.google.firebase:firebase-messaging` Firebase SDK. +2. In your Firebase console, navigate to **Settings** > **General** > **Your apps** > add an **Android** app. +3. Register and download your `google-services.json` config file. +4. Add `google-services.json` at the root of your project. +5. Add Google Services class path to your app-level Gradle dependencies block `"com.google.gms:google-services:4.4.0"`. +6. Add the Google Services plugin to your app-level Gradle in the plugins block as `"com.google.gms.google-services"`. +7. Add notification handler service to `AndroidManifest.xml` inside the application tag, alongside other activities. Find an example of this service in the [Send push notification](https://appwrite.io/docs/products/messaging/send-push-notifications#add-targets) journey. + +```xml + + + + + + +``` +{% /tabsitem %} + +{% tabsitem #ios title="iOS with FCM" %} +1. In your Firebase console, navigate to **Settings** > **General** > **Your apps** > add an **iOS** app. +2. Register and download your `GoogleService-Info.plist` and add it to the root of your project. +3. Head to **Apple Developer Member Center** > **Program resources** > **Certificates, Identifiers & Profiles** > **Keys**. The key needs **Apple Push Notification Service** enabled. +4. Create a new key, note down the key ID, and download your key. +5. In the Firebase console, go to *Settings*> **Cloud Messaging** > **APNs authentication key** > click **Upload**. Then, upload your key here. +6. Add push notification capability to your app by clicking your root-level app in XCode > **Signing & Capabilities** > + Capabilities > Search for **Push Notifications**. +7. If using SwiftUI, disable swizzling by setting `FirebaseAppDelegateProxyEnabled` to `NO` in your `Info.plist`. +{% /tabsitem %} +{% /tabs %} + +After that, you can follow the [Send push notifications](https://appwrite.io/docs/products/messaging/send-push-notifications) flow to test your provider. + +# Read more about FCM and Appwrite Messaging + +If you would like to learn more about FCM and Appwrite Messaging, we have some resources that you should visit: + +- [Set up the FCM provider in Appwrite Messaging](https://appwrite.io/docs/products/messaging/fcm) +- [Send push notifications through Appwrite Messaging](https://appwrite.io/docs/products/messaging/send-push-notifications) +- [Best practices for sending push notifications](https://appwrite.io/blog/post/push-notifications-best-practices) +- [Appwrite Messaging API reference](https://appwrite.io/docs/references/cloud/server-nodejs/messaging) \ No newline at end of file diff --git a/src/routes/integrations/query-mongodb/+page.markdoc b/src/routes/integrations/query-mongodb/+page.markdoc new file mode 100644 index 0000000000..f8c4cd8d94 --- /dev/null +++ b/src/routes/integrations/query-mongodb/+page.markdoc @@ -0,0 +1,80 @@ +--- +layout: integration +title: Query MongoDB Atlas +description: Save a document in your MongoDB cluster and list all stored documents +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/query-mongodb/cover.png +category: Databases +product: + avatar: '/images/integrations/avatars/mongodb.png' + vendor: MongoDB + description: 'MongoDB is a popular NoSQL database known for its flexibility and scalability.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/query-mongodb/cover.png + - /images/integrations/query-mongodb/first-cluster.png + - /images/integrations/query-mongodb/connection-string.png + - /images/integrations/query-mongodb/network-access.png + - /images/integrations/query-mongodb/template.png + - /images/integrations/query-mongodb/variables.png +--- + +MongoDB is a popular NoSQL database known for its flexibility and scalability. It allows developers to store and manage large amounts of data with ease. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to integrate a MongoDB Atlas cluster with your app. This will allow you to leverage MongoDB's powerful data management capabilities and NoSQL database and potentially extend it with Appwrite’s ecosystem. + +# How to implement + +To implement the MongoDB Atlas integration, follow these simple steps: + +## Step 1: Set up a MongoDB database + +First, [create an account on MongoDB Atlas](https://www.mongodb.com/cloud/atlas/register) and deploy your first cluster. + +![MongoDB Atlas first cluster](/images/integrations/query-mongodb/first-cluster.png) + +Create your username and password and copy the **connection string** for your MongoDB Atlas cluster. This connection string will be used to connect the Appwrite Function to your MongoDB cluster. + +![MongoDB Atlas connection string](/images/integrations/query-mongodb/connection-string.png) + +Next, head to the **Network Access** page from the left sidebar, click on the **Add IP Address** button, and allow access from anywhere. + +![MongoDB Atlas network access](/images/integrations/query-mongodb/network-access.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In case you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click on the **Templates** tab, and search for the **MongoDB** function template. + +![Function template](/images/integrations/query-mongodb/template.png) + +Add the **MongoDB connection string** you saved in the **Variables** step. Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. + +![Env variables](/images/integrations/query-mongodb/variables.png) + +## Step 3: Test the function + +Once the function is ready, visit the **Domains** tab on the **Functions** page and copy the domain URL to test the function. Sending a GET (HTTP) Request to this endpoint will add a randomly generated mock document and list all the documents in the database. + +```bash +curl DEPLOYED_FUNCTION_DOMAIN \ + -H 'accept: application/json' +``` + +You can add other database functionalities by editing the function generated for you on GitHub. + +# Read more about MongoDB Atlas and Appwrite Functions + +If you would like to learn more about MongoDB Atlas and Appwrite Functions, we have some resources that you should visit: + +- [Integrate SQL, NoSQL, Vector, Graph, or any database into your Appwrite project](https://appwrite.io/blog/post/integrate-sql-nosql-vector-graph-or-any-database-into-your-appwrite-project) +- [Understanding data queries in database management](https://appwrite.io/blog/post/understand-data-queries) +- [Appwrite Functions docs](https://appwrite.io/docs/products/functions) \ No newline at end of file diff --git a/src/routes/integrations/query-upstash/+page.markdoc b/src/routes/integrations/query-upstash/+page.markdoc new file mode 100644 index 0000000000..00a0f642ba --- /dev/null +++ b/src/routes/integrations/query-upstash/+page.markdoc @@ -0,0 +1,69 @@ +--- +layout: integration +title: Query Upstash +description: Store data in your Upstash vector database and query it for similar data +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/query-upstash/cover.png +category: Databases +product: + avatar: '/images/integrations/avatars/upstash.png' + vendor: Upstash + description: 'Upstash Vector provides a powerful vector database designed to handle complex queries and search functionalities.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/query-upstash/cover.png + - /images/integrations/query-upstash/index.png + - /images/integrations/query-upstash/template.png + - /images/integrations/query-upstash/variables.png +--- + +Upstash Vector provides a powerful vector database designed to handle complex queries and search functionalities. It’s ideal for applications that require fast and efficient handling of vector data. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to integrate an Upstash Vector database with your app. This setup enables you to store and query vector data efficiently, enhancing your application's search and recommendation features. + +# How to implement + +To implement the Upstash Vector integration, follow these simple steps: + +### Step 1: Set up the Upstash Vector database + +First, [create an account on Upstash](https://console.upstash.com/login) and set up a **new Vector index** with your preferred region and embedding model. Once it is ready, copy your **endpoint** and **token** from the index’s dashboard for further usage + +![Upstash vector index](/images/integrations/query-upstash/index.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. If you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click the **Templates** tab, and search for the **Upstash** function template. + +![Function template](/images/integrations/query-upstash/template.png) + +Add the **Upstash endpoint** and **token** you saved in the **Variables** step. Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. + +![Env variables](/images/integrations/query-upstash/variables.png) + +## Step 3: Test the function + +Once the function is ready, visit the **Domains** tab on the **Functions** page and copy the domain URL to test the function. Sending a GET (HTTP) Request to this endpoint will add a randomly generated mock embedding and query for the one most similar entry in the database. + +```bash +curl DEPLOYED_FUNCTION_DOMAIN \ + -H 'accept: application/json' +``` + +You can add other database functionalities by editing the function generated on GitHub. + +# Read more about Upstash and Appwrite Functions + +If you would like to learn more about Upstash and Appwrite Functions, we have some resources that you should visit: + +- [Integrate SQL, NoSQL, Vector, Graph, or any database into your Appwrite project](https://appwrite.io/blog/post/integrate-sql-nosql-vector-graph-or-any-database-into-your-appwrite-project) +- [Appwrite Functions docs](https://appwrite.io/docs/products/functions) \ No newline at end of file diff --git a/src/routes/integrations/search-algolia/+page.markdoc b/src/routes/integrations/search-algolia/+page.markdoc new file mode 100644 index 0000000000..7bfec81ebc --- /dev/null +++ b/src/routes/integrations/search-algolia/+page.markdoc @@ -0,0 +1,84 @@ +--- +layout: integration +title: Search with Algolia +description: Integrate Algolia search into your Appwrite database +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/search-algolia/cover.png +category: Search +product: + avatar: '/images/integrations/avatars/algolia.png' + vendor: Algolia + description: 'Algolia is a search platform that helps you add fast and relevant search capabilities to your app.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/search-algolia/cover.png + - /images/integrations/search-algolia/overview.png + - /images/integrations/search-algolia/index.png + - /images/integrations/search-algolia/template.png + - /images/integrations/search-algolia/variables.png + - /images/integrations/search-algolia/demo.png +--- + +Algolia is a search platform that helps you add fast and relevant search capabilities to your app. It makes it easy to find and explore data quickly. + +# How does the integration work? + +By integrating Algolia with Appwrite, you can use Algolia's search features directly in your Appwrite database. This lets you leverage Algolia’s comprehensive search capabilities with your Appwrite backend. + +# How to implement + +To implement the Algolia integration, follow these simple steps: + +## Step 1: Set up an Algolia account + +First, [sign up on Algolia](https://dashboard.algolia.com/users/sign_up) and create a new application. Save the **Application ID**, **Search API Key**, and **Write API Key** for further usage. + +![Algolia overview](/images/integrations/search-algolia/overview.png) + +Then, click on the **Search** page from the left sidebar and **create a new Index** to store your searchable data. Save your **Index ID** for further usage. + +![New index](/images/integrations/search-algolia/index.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In case you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. Additionally, for this template, you must have an Appwrite Database and Collection filled with data in advance. + +Head over to the Appwrite console, navigate to the **Functions** page, click the **Templates** tab, and search for the **Algolia** function template. + +![Function template](/images/integrations/search-algolia/template.png) + +During the setup process, click on the checkbox to create an Appwrite API key on completion and add the Appwrite Database ID and Collection ID for the data you want to index and search as well as the **Algolia application ID**, **search API key**, **write API key** (under Admin API Key), and **index ID** in the **Variables** step. If you are self-hosting Appwrite, click on the **optional variables** dropdown and update the Appwrite endpoint to your instance’s publicly accessible endpoint. + +![Env variables](/images/integrations/search-algolia/variables.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. + +## Step 3: Test the function + +Once all the steps are complete, it is time to test the function! Before we go further, visit the **Domains** tab on the **Functions** page and copy the domain URL to test the function. + +Send a POST (HTTP) Request to the function URL to index the Appwrite Collection in Algolia. + +```bash +curl -XPOST https://DEPLOYED_FUNCTION_DOMAIN +``` + +In case you have a large collection of data and your function executions timeout, you can head to the **Settings** tab on the **Functions** page and increase the function timeout limit from **15 seconds** to **900 seconds** (maximum). + +Then, open your function URL in the browser to try the interactive search UI. + + +![Demo](/images/integrations/search-algolia/demo.png) + +# Read more about Algolia + +If you would like to learn more about Algolia, we have some resources that you should visit: + +- [Sign up for Algolia](https://dashboard.algolia.com/users/sign_up) +- [Learn more about Functions templates in Appwrite docs](https://appwrite.io/docs/products/functions/templates) +- [Connect with other developers and the Appwrite team on Discord.](https://discord.com/invite/appwrite) \ No newline at end of file diff --git a/src/routes/integrations/sms-twilio/+page.markdoc b/src/routes/integrations/sms-twilio/+page.markdoc new file mode 100644 index 0000000000..64767bb7fd --- /dev/null +++ b/src/routes/integrations/sms-twilio/+page.markdoc @@ -0,0 +1,72 @@ +--- +layout: integration +title: SMS with Twilio +description: Send customized SMS messages to your users +date: 2024-07-30 +featured: true +isPartner: true +isNew: true +cover: /images/integrations/sms-twilio/cover.png +category: Messaging +product: + avatar: '/images/integrations/avatars/twilio.png' + vendor: Twilio + description: 'Twilio is a cloud communications platform that provides programmable communication tools using web APIs and SDKs.' +platform: + - 'Self-hosted' +images: + - /images/integrations/sms-twilio/cover.png + - /images/integrations/sms-twilio/twilio-console.png + - /images/integrations/sms-twilio/config.png + - /images/integrations/sms-twilio/sms.png +--- + +Twilio is a cloud communications platform that provides programmable communication tools for making and receiving phone calls, sending and receiving text messages, and performing other communication functions using web APIs and SDKs. + +# How does the integration work? + +You can use the Twilio provider in Appwrite Messaging to send customized SMS messages to your users. These SMS messages can be sent immediately or scheduled. You can send SMS messages for purposes like reminders, promotions, announcements, and even custom authentication flows. + +# How to implement + +To implement the Twilio provider in Appwrite Messaging, there are several steps you must complete: + +## Step 1: Sign up on Twilio + +First, you must [sign up for a Twilio account](https://www.twilio.com/try-twilio), upgrade your account (in case you want to message numbers other than your own), and purchase a phone number with the SMS capability. + +![Twilio console](/images/integrations/sms-twilio/twilio-console.png) + +Ensure you save the following information for later use: + +| Field name | | +| --- | --- | +| Account SID | Head to **Twilio console** > **Account info** > **Account SID**. | +| Auth token | Head to **Twilio console** > **Account info** > **Auth Token**. | +| Phone number | You can access numbers by navigating to your **Twilio console** > **Develop** > **Phone Numbers** > **Manage** > **Active Numbers**. | + +## Step 2: Add Twilio provider to your Appwrite project + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In your Appwrite project, head over to the **Messaging** page, click on the **Providers** tab, and **create a new SMS provider**. + +Select **Twilio** and add the **account SID**, **auth token**, and **phone number** that you saved from the Twilio console. + +![Twilio provider config](/images/integrations/sms-twilio/config.png) + +## Step 3: Test the Twilio provider + +Before you proceed, you must already have at least one [topic](https://appwrite.io/docs/products/messaging/topics) or [target](https://appwrite.io/docs/products/messaging/targets) set up. + +Once the provider is set up, you can go to the **Messages** tab on the **Messaging** page and **create an SMS message**. You can add the test message, configure the users to send the message to, and pick when the message should be sent out. + +![SMS message console](/images/integrations/sms-twilio/sms.png) + +# Read more about Twilio and Appwrite Messaging + +If you would like to learn more about Twilio and Appwrite Messaging, we have some resources that you should visit: + +- [Sign up for Twilio](https://www.twilio.com/try-twilio) +- [Set up the Twilio provider in Appwrite Messaging](https://appwrite.io/docs/products/messaging/twilio) +- [Send SMS messages through Appwrite Messaging](https://appwrite.io/docs/products/messaging/send-sms-messages) +- [How tools like Twilio can simplify messaging for developers](https://appwrite.io/blog/post/simplify-messaging-twilio) +- [Appwrite Messaging API reference](https://appwrite.io/docs/references/cloud/server-nodejs/messaging) \ No newline at end of file diff --git a/src/routes/integrations/storage-s3/+page.markdoc b/src/routes/integrations/storage-s3/+page.markdoc new file mode 100644 index 0000000000..e96a741e9c --- /dev/null +++ b/src/routes/integrations/storage-s3/+page.markdoc @@ -0,0 +1,84 @@ +--- +layout: integration +title: Storage with Amazon S3 +description: Store files in Amazon S3 instead of your local storage device +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/storage-s3/cover.png +category: Storage +product: + avatar: '/images/integrations/avatars/aws.png' + vendor: AWS + description: 'Amazon S3 is an object storage service that offers industry-leading scalability, data availability, security, and performance.' +platform: + - 'Self-hosted' +images: + - /images/integrations/storage-s3/cover.png + - /images/integrations/storage-s3/bucket.png + - /images/integrations/storage-s3/access-key.png + - /images/integrations/storage-s3/appwrite-file.png + - /images/integrations/storage-s3/s3-file.png +--- + +Amazon S3 (Simple Storage Service) is an object storage service that offers industry-leading scalability, data availability, security, and performance. You can use Amazon S3 to store and protect any amount of data for a range of use cases, such as data lakes, websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics. + +# How does the integration work? + +If you are using self-hosting Appwrite, you can use the Amazon S3 integration for Appwrite Storage to store your files in an S3 bucket instead of on your local hard drive. This is beneficial if you expect large volumes of data or the need to have scalable data storage for your self-hosted Appwrite instance. + +# How to implement + +To implement the Amazon S3 provider for Appwrite Storage, there are several steps you must complete: + +## Step 1: Sign up on AWS + +First, you must [sign up for an AWS account](https://signin.aws.amazon.com/signup?request_type=register) and create an S3 bucket. Save the **Bucket name** and **AWS Region** mentioned here for later use. + +![Create S3 bucket](/images/integrations/storage-s3/bucket.png) + +To access this bucket from Appwrite Storage, we also need to generate an access key within our AWS account. To do so, click on your username in the top-right corner, click on **Security credentials**, and scroll below to create an access key. Save your **Access key ID** and **Secret access key** for later usage. + +![Create AWS access key](/images/integrations/storage-s3/access-key.png) + +## Step 2: Add S3 provider to your Appwrite instance + +For this step, you must [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. + +Visit the `.env` file created for your Appwrite instance and update the following environment variables: + +```bash +_APP_STORAGE_DEVICE=s3 +_APP_STORAGE_S3_BUCKET=[BUCKET_NAME] +_APP_STORAGE_S3_REGION=[AWS_REGION] +_APP_STORAGE_S3_ACCESS_KEY=[ACCESS_KEY_ID] +_APP_STORAGE_S3_SECRET=[SECRET_ACCESS_KEY] +``` + +After that, run the following Docker Compose commands in your terminal to restart your Appwrite containers and verify if the changes have been successfully applied: + +```bash +docker compose up -d --force-recreate +docker compose exec appwrite vars +``` + +## Step 3: Test the provider + +To test your S3, open your Appwrite project, go to the Storage page, create a new bucket, and upload a file. + +![File on Appwrite Storage](/images/integrations/storage-s3/appwrite-file.png) + +When you visit your S3 bucket via the AWS Management Console, you should see the same file uploaded there. + +![File on Amazon S3](/images/integrations/storage-s3/s3-file.png) + +# Read more about S3 and Appwrite Storage + +If you would like to learn more about Amazon S3 and Appwrite Auth, we have some resources that you should visit: + +- [What is Amazon S3?](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) +- [How to create an Amazon S3 bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/creating-bucket.html) +- [Appwrite self-hosting docs](https://appwrite.io/docs/advanced/self-hosting) +- [Storage environment variables for Appwrite (self-hosted)](https://appwrite.io/docs/advanced/self-hosting/environment-variables#storage) +- [Appwrite Storage API reference](https://appwrite.io/docs/references/cloud/client-web/storage) \ No newline at end of file diff --git a/src/routes/integrations/stripe-payments/+page.markdoc b/src/routes/integrations/stripe-payments/+page.markdoc new file mode 100644 index 0000000000..5d43c4d0ef --- /dev/null +++ b/src/routes/integrations/stripe-payments/+page.markdoc @@ -0,0 +1,100 @@ +--- +layout: integration +title: Payments with Stripe +description: Receive payments and store paid orders +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/stripe-payments/cover.png +category: Payments +product: + avatar: '/images/integrations/avatars/stripe.png' + vendor: Stripe + description: 'Stripe is an online payment processing platform that allows businesses to accept online payments securely and efficiently.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/stripe-payments/cover.png + - /images/integrations/stripe-payments/dashboard.png + - /images/integrations/stripe-payments/api-keys.png + - /images/integrations/stripe-payments/webhooks.png + - /images/integrations/stripe-payments/template.png + - /images/integrations/stripe-payments/variables.png + - /images/integrations/stripe-payments/web-platform.png + - /images/integrations/stripe-payments/demo.png + - /images/integrations/stripe-payments/database.png +--- + +Stripe is an online payment processing platform that allows businesses to accept online payments securely and efficiently. Stripe supports a variety of payment methods, including credit cards, debit cards, and digital wallets, and offers additional services such as billing, invoicing, and fraud prevention. + + With robust APIs and extensive documentation, Stripe enables developers to integrate its payment solutions into websites and mobile applications seamlessly, making it a popular choice for businesses of all sizes. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to enable payments via Stripe in your app. You can then use this to ship packages, send PDF books, give access to video courses, or anything else your business needs. + +# How to implement + +To implement the Stripe payments integration, there are several steps you must complete: + +## Step 1: Set up Stripe + +First, [sign up for Stripe](https://stripe.com/) and open the dashboard in test mode. + +![Stripe dashboard](/images/integrations/stripe-payments/dashboard.png) + +Head to the **Developers** page from the navbar and click on the **API keys** tab. Save the **Secret key** for further usage. + +![Stripe API keys](/images/integrations/stripe-payments/api-keys.png) + +Then, go to the **Webhooks** tab, select the event `checkout.session.completed`, and add a temporary endpoint `https://temporary-endpoint` (we will replace this with our final endpoint later). Save the **webhook signing secret** for later usage. + +![Stripe webhooks](/images/integrations/stripe-payments/webhooks.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. If you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click the **Templates** tab, and search for the **Payments with Stripe** function template. + +![Function template](/images/integrations/stripe-payments/template.png) + +During the setup process, click the checkbox to generate an Appwrite API key on completion and add the **Stripe secret key** and **webhook secret** in the **Variables** step. If you are self-hosting Appwrite, click on the **optional variables** dropdown and update the Appwrite endpoint to your instance’s publicly accessible endpoint. + +![Env variables](/images/integrations/stripe-payments/variables.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. Once the function is deployed, go to the **Settings** tab on the **Function** page, scroll down to your **Build settings**, and update the commands to the following (and then redeploy the function): + +```bash +npm install +npm run setup +``` + +Then, go to the **Domains** tab, copy the domain, and update it in your **Stripe webhook details** in the following format: + +```bash +https://DEPLOYED_FUNCTION_DOMAIN/webhook +``` + +## Step 3: Test the function + +Once all the steps are complete, it is time to test the function! First, copy the function URL, go to the **Appwrite project dashboard**, and add it to the **Platforms** section as a web app. This will register your function URL as an authorized hostname to interact with Appwrite (to prevent CORS). + +![Add web platform](/images/integrations/stripe-payments/web-platform.png) + +Then, open it in your browser to test the function and access the pre-built interactive UI. You can anonymously log in through this UI and create a payment order using [Stripe’s test card number](https://docs.stripe.com/testing#cards). As soon as this process is completed, the function UI will show you the completed order. + +![Demo](/images/integrations/stripe-payments/demo.png) + +You can visit the **Databases** page in your Appwrite project, enter the `orders` database and the `orders` collection within that, and find your orders. + +![Appwrite database](/images/integrations/stripe-payments/database.png) + +# Read more about Stripe Payments and Appwrite Functions + +If you would like to learn more about Stripe Payments and Appwrite Functions, we have some resources that you should visit: + +- [Sign up on Stripe](https://stripe.com) +- [Learn more about Functions templates in Appwrite docs](https://appwrite.io/docs/products/functions/templates) \ No newline at end of file diff --git a/src/routes/integrations/stripe-subscriptions/+page.markdoc b/src/routes/integrations/stripe-subscriptions/+page.markdoc new file mode 100644 index 0000000000..e624a41a4b --- /dev/null +++ b/src/routes/integrations/stripe-subscriptions/+page.markdoc @@ -0,0 +1,94 @@ +--- +layout: integration +title: Subscriptions with Stripe +description: Receive recurring payments and grant subscribers extra permissions +date: 2024-07-30 +featured: true +isPartner: true +isNew: true +cover: /images/integrations/stripe-subscriptions/cover.png +category: Payments +product: + avatar: '/images/integrations/avatars/stripe.png' + vendor: Stripe + description: 'Stripe is an online payment processing platform that allows businesses to accept online payments securely and efficiently.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/stripe-subscriptions/cover.png + - /images/integrations/stripe-subscriptions/dashboard.png + - /images/integrations/stripe-subscriptions/api-keys.png + - /images/integrations/stripe-subscriptions/webhooks.png + - /images/integrations/stripe-subscriptions/template.png + - /images/integrations/stripe-subscriptions/variables.png + - /images/integrations/stripe-subscriptions/web-platform.png + - /images/integrations/stripe-subscriptions/demo.png + - /images/integrations/stripe-subscriptions/user.png +--- + +Stripe is an online payment processing platform that allows businesses to accept online payments securely and efficiently. Stripe supports a variety of payment methods, including credit cards, debit cards, and digital wallets, and offers additional services such as billing, invoicing, and fraud prevention. + +With robust APIs and extensive documentation, Stripe enables developers to integrate its payment solutions into websites and mobile applications with ease, making it a popular choice for businesses of all sizes. + +# How does the integration work? + +You can utilize a pre-built Appwrite function template to enable paid subscriptions via Stripe in your app. This will allow you to accept recurring payments from your customers and grant them extra permissions. + +# How to implement + +To implement the Stripe subscriptions integration, there are several steps you must complete: + +## Step 1: Setup Stripe + +First, [sign up for Stripe](https://stripe.com/) and open the dashboard in test mode. + +![Stripe dashboard](/images/integrations/stripe-subscriptions/dashboard.png) + +Head to the **Developers** page from the navbar and click on the **API keys** tab. Save the **Secret key** for further usage. + +![Stripe API keys](/images/integrations/stripe-subscriptions/api-keys.png) + +Then, go to the **Webhooks** tab, select the events `customer.subscription.created` and `customer.subscription.deleted`, and add a temporary endpoint `https://temporary-endpoint` (we will replace this with our final endpoint later). Save the **webhook signing secret** for later usage. + +![Stripe webhooks](/images/integrations/stripe-subscriptions/webhooks.png) + +## Step 2: Create the Appwrite Function + +For this step, you must [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. If you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +Head over to the Appwrite console, navigate to the **Functions** page, click the **Templates** tab, and search for the **Subscriptions with Stripe** function template. + +![Function template](/images/integrations/stripe-subscriptions/template.png) + +During the setup process, click the checkbox to generate an Appwrite API key on completion and add the **Stripe secret key** and **Webhook secret** in the **Variables** step. If you are self-hosting Appwrite, click the **optional variables** dropdown and update the Appwrite endpoint to your instance’s publicly accessible endpoint. + +![Env variables](/images/integrations/stripe-subscriptions/variables.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. Once the function is deployed, go to the **Domains** tab on the **Function** page, copy the domain, and update it in your **Stripe webhook details** in the following format: + +```bash +https://DEPLOYED_FUNCTION_DOMAIN/webhook +``` + +## Step 3: Test the function + +Once all the steps are complete, it is time to test the function! First, copy the function URL, go to the **Appwrite project dashboard**, and add it to the **Platforms** section as a web app. This will register your function URL as an authorized hostname to interact with Appwrite (to prevent CORS). + +![Add web platform](/images/integrations/stripe-subscriptions/web-platform.png) + +Then, open it in your browser to test the function and access the pre-built interactive UI. You can anonymously log in through this UI and create a subscription using [Stripe’s test card number](https://docs.stripe.com/testing#cards). As soon as this process is complete, the function UI will show that you are subscribed. + +![Demo](/images/integrations/stripe-subscriptions/demo.png) + +Additionally, your user on Appwrite will feature the `subscriber` label, which you can verify by visiting the **Auth** page in your Appwrite project and clicking on the user. + +![Appwrite user](/images/integrations/stripe-subscriptions/user.png) + +# Read more about Stripe Subscriptions and Appwrite Functions + +If you would like to learn more about Stripe Subscriptions and Appwrite Functions, we have some resources that you should visit: + +- [Sign up on Stripe](https://stripe.com) +- [Add app subscriptions with Stripe on Appwrite](https://appwrite.io/docs/tutorials/subscriptions-with-stripe/step-1) +- [Learn more about Functions templates in Appwrite docs](https://appwrite.io/docs/products/functions/templates) \ No newline at end of file diff --git a/src/routes/integrations/technology-partner/+page.svelte b/src/routes/integrations/technology-partner/+page.svelte new file mode 100644 index 0000000000..69cf46a5f5 --- /dev/null +++ b/src/routes/integrations/technology-partner/+page.svelte @@ -0,0 +1,356 @@ + + + + + {title} + + + + + + + + + + + + + + +
    + +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + {#if submitted} +
    +

    + Thank you for applying +

    +

    + Your application has been sent successfully. Our + team will try to get back to you as soon as + possible. +

    + + Back to integrations + +
    + {:else} +
    +

    + Become a Technology Partner +

    +

    + Apply to our Technology Partners Program by filling + out this form. Our team will reach out to you to + confirm your application was accepted. +

    +
    + {/if} +
    +

    + Follow us +

    +
      + {#each socials as social} +
    • + + +
      • + {/each} +
    +
    +
    +
    +
    + {#if !submitted} +
    +
    +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      + + +
      +
      • +
    • + + +
      • +
    • + +
      + + +
      +
      • + {#if hasCreatedIntegration} +
    • + + +
      • + {/if} +
    • + + +
      • +
    • + + +
      • +
    +
    +
    +

    + {#if error} + {error} + {/if} +

    + +
    +
    + {/if} +
    +
    +
    + + +
    +
    +
    +
    +
    +
    diff --git a/src/routes/integrations/technology-partner/bg.png b/src/routes/integrations/technology-partner/bg.png new file mode 100644 index 0000000000..71e9083ee0 Binary files /dev/null and b/src/routes/integrations/technology-partner/bg.png differ diff --git a/src/routes/integrations/technology-partner/blue-bg.png b/src/routes/integrations/technology-partner/blue-bg.png new file mode 100644 index 0000000000..f96d8045a6 Binary files /dev/null and b/src/routes/integrations/technology-partner/blue-bg.png differ diff --git a/src/routes/integrations/whatsapp-vonage/+page.markdoc b/src/routes/integrations/whatsapp-vonage/+page.markdoc new file mode 100644 index 0000000000..03f94524f1 --- /dev/null +++ b/src/routes/integrations/whatsapp-vonage/+page.markdoc @@ -0,0 +1,79 @@ +--- +layout: integration +title: WhatsApp with Vonage +description: Send automated replies to messages on WhatsApp +date: 2024-07-30 +featured: false +isPartner: true +isNew: true +cover: /images/integrations/whatsapp-vonage/cover.png +category: Messaging +product: + avatar: '/images/integrations/avatars/vonage.png' + vendor: Vonage + description: 'Vonage is a cloud communications provider that offers residential telecommunications services based on voice over Internet Protocol as well as programmable communications tools via web APIs.' +platform: + - 'Self-hosted' + - 'Cloud' +images: + - /images/integrations/whatsapp-vonage/cover.png + - /images/integrations/whatsapp-vonage/settings.png + - /images/integrations/whatsapp-vonage/template.png + - /images/integrations/whatsapp-vonage/variables.png + - /images/integrations/whatsapp-vonage/demo.png +--- + +Vonage is a cloud communications provider that offers residential telecommunications services based on voice over Internet Protocol as well as programmable communications tools such as phone calls, SMSes, WhatsApp messages, etc. via web APIs. + +# How does the integration work? + +You can use a pre-built Appwrite Function template that is integrated with Vonage to build a WhatsApp-based chatbot that can accept your messages and respond based on pre-defined logic. + +# How to implement + +To implement the **WhatsApp with Vonage** Appwrite Function template, there are several steps you must complete: + +## Step 1: Sign up on Vonage + +First, [sign up for a Vonage account](https://ui.idp.vonage.com/ui/auth/registration) to use the Vonage Communications APIs. This will create a trial account and give you access to the Vonage API dashboard. + +![Vonage API settings](/images/integrations/whatsapp-vonage/settings.png) + +Ensure you save the following information for later use: + +| Field name | | +| --- | --- | +| API key | Head to the **Vonage API dashboard** > **API Settings** > **API key** | +| API secret | Head to the **Vonage API dashboard** > **API Settings** > **API secret** | +| Signature secret | Head to the **Vonage API dashboard** > **API Settings** > **Signature secret** | +| WhatsApp phone number | Head to the **Vonage API dashboard** > **Developer Tools** > **Messages API Sandbox** > enable **WhatsApp** and copy phone number | + +Once the Appwrite Function is deployed, we will return here to add the Function URL as the **Inbound Webhook** link. + +## Step 2: Create the Appwrite Function + +For this step, [create an account on Appwrite Cloud](https://cloud.appwrite.io/register) or [self-host Appwrite](https://appwrite.io/docs/advanced/self-hosting) if you haven’t already. In case you decide to self-host Appwrite, there are [additional setup steps](https://appwrite.io/docs/advanced/self-hosting/functions) to use Appwrite Function templates. + +In your Appwrite project, go to the **Functions** page, click on the **Templates** tab, search for ‘Vonage’, and select the **WhatsApp with Vonage** function template. + +![Function template](/images/integrations/whatsapp-vonage/template.png) + +During the setup process, add the Vonage **API key**, **API secret, signature secret**, and **WhatsApp phone number** in the **Variables** step**.** + +![Env variables](/images/integrations/whatsapp-vonage/variables.png) + +Then, create a new repository with the default branch and root directory settings. You can edit this repository later to update the function logic. Once the function is ready, visit the **Domains** tab on the function page and copy the domain to add to the **Inbound Webhook** link on the **Messages API Sandbox** page on your Vonage account. + +## Step 3: Test the integration + +Open **WhatsApp** on your phone, join the Vonage WhatsApp Channel (via the steps mentioned on the *Messaging API Sandbox* on *Vonage*), and send any message to the WhatsApp number. You shall receive a message in the format: `Hi there! You sent me: ` + +![demo](/images/integrations/whatsapp-vonage/demo.png) + +# Read more about Vonage and Appwrite + +If you would like to learn more about Vonage, we have some resources that you should visit: + +- [Sign up for Vonage](https://ui.idp.vonage.com/ui/auth/registration) +- [Send WhatsApp messages with Vonage and Appwrite Functions](https://appwrite.io/blog/post/function-template-whatsapp-vonage) +- [Appwrite Functions products docs](https://appwrite.io/docs/products/functions) \ No newline at end of file diff --git a/src/scss/6-elements/_input-button.scss b/src/scss/6-elements/_input-button.scss index 058739367d..9c6e6a0766 100644 --- a/src/scss/6-elements/_input-button.scss +++ b/src/scss/6-elements/_input-button.scss @@ -72,12 +72,14 @@ --p-input-bg-color: var(--p-input-bg-color-hover); --p-input-border-color: var(--p-input-border-color-hover); } - &:is(:focus) { + &:is(:focus), + &:has(:focus) { --p-input-bg-color: var(--p-input-bg-color-focus); --p-input-border-color: var(--p-input-border-color-focus); box-shadow: 0 0 0 pxToRem(4) hsl(var(--p-input-focus-box-shadow-color)); } - &:is(:active) { + &:is(:active), + &:has(:active){ --p-input-bg-color: var(--p-input-bg-color-active); --p-input-border-color: var(--p-input-border-color-active); box-shadow: 0 0 0 pxToRem(4) hsl(var(--p-input-focus-box-shadow-color)); @@ -89,6 +91,10 @@ --p-input-border-color: var(--p-input-border-color-disabled); opacity: 0.4; } + input:focus { + box-shadow:none; + inline-size:100%; + } &-search-wrapper { position:relative; min-inline-size:pxToRem(350); diff --git a/src/scss/6-elements/_input-text.scss b/src/scss/6-elements/_input-text.scss index ce2e2d04c6..149a2ca4c3 100644 --- a/src/scss/6-elements/_input-text.scss +++ b/src/scss/6-elements/_input-text.scss @@ -127,7 +127,6 @@ &.is-reset-input-inside { input { all:unset; display:block; inline-size:100%; text-align:left; } } - } textarea.#{$p}-input-text { @@ -136,6 +135,8 @@ textarea.#{$p}-input-text { block-size: pxToRem(154); } +select.#{$p}-input-text { color:hsl(var(--color-neutral-40)); } + .#{$p}-subscribe-input { padding: pxToRem(4); padding-inline-start:pxToRem(16); ::placeholder { color:hsl(var(--web-color-primary)); opacity:0.64; } diff --git a/src/scss/7-components/_carousel.scss b/src/scss/7-components/_carousel.scss new file mode 100644 index 0000000000..efec0b21be --- /dev/null +++ b/src/scss/7-components/_carousel.scss @@ -0,0 +1,54 @@ +@use '../abstract' as *; + +.#{$p}-carousel { + position:relative; + + @media (min-width: 768px) { + &::before { + content:""; display:block; + position:absolute; z-index:1; inset:0; inset-inline:pxToRem(0); + background: linear-gradient(90deg, rgba(23, 23, 26, 1) 0%, rgba(23, 23, 26, 0.88) 9.65%, rgba(23, 23, 26, 0) 25%, rgba(23, 23, 26, 0) 50%, rgba(23, 23, 26, 0) 75%, rgba(23, 23, 26, 0.88) 89.28%, rgba(23, 23, 26, 1) 100%); + pointer-events: none; + } +} + + + &-item { + img { + display:block; inline-size:100%; border:solid pxToRem(2) hsl(var(--web-color-smooth)); + border-radius:var(--border-radius-medium); transition:var(--transition); + } + } + &-button { + display:flex; justify-content:center; align-items:center; inline-size:pxToRem(40); block-size:pxToRem(40); + border-radius:var(--border-radius-circular); flex-shrink:0; + background:hsl(var(--web-color-white) / 0.15); color:hsl(var(--web-color-white)); + &-start { position:absolute; z-index:2; inset-block-start:50%; inset-inline-start:calc( calc(100% - #{pxToRem(584)}) / 2 - #{pxToRem(100)} ); } + &-end { position:absolute; z-index:2; inset-block-start:50%; inset-inline-end:calc( calc(100% - #{pxToRem(584)}) / 2 - #{pxToRem(100)} ); } + } + &-bullets { + inline-size:fit-content; margin-inline:auto; + &-list { display:flex; margin-block-start:pxToRem(20); } + &-button { + display:grid; place-content:center; inline-size:pxToRem(16); block-size:pxToRem(16); border-radius:var(--border-radius-circular); + &::before { + content:""; display:block; inline-size:pxToRem(6); block-size:pxToRem(6); border-radius:var(--border-radius-circular); + background-color:hsl(var(--web-color-white)); opacity:0.4; transition:var(--transition); + } + &.is-selected::before { opacity:1; } + } + } + @media #{$break1} { + &-button { display:none; } + } +} + + +.#{$p}-integrations-top-section { + display:flex; flex-direction:column; justify-content:center; + @media (max-width:767.9px) { min-block-size: pxToRem(370); padding-block:pxToRem(40); } + @media (min-width:768px) and (max-width:1023.9px) { min-block-size: pxToRem(495); padding-block:pxToRem(48); } + @media #{$break2open} { + min-block-size:pxToRem(548); padding-block:pxToRem(48); + } +} \ No newline at end of file diff --git a/src/scss/7-components/_index.scss b/src/scss/7-components/_index.scss index 045c5729a6..f574019ce7 100644 --- a/src/scss/7-components/_index.scss +++ b/src/scss/7-components/_index.scss @@ -25,6 +25,7 @@ @forward "timeline-content"; @forward "investor-cards"; @forward "chat"; +@forward "carousel"; /*article content */ @forward "article"; diff --git a/src/scss/7-components/_user-box.scss b/src/scss/7-components/_user-box.scss index 58d3d26047..4d82679adf 100644 --- a/src/scss/7-components/_user-box.scss +++ b/src/scss/7-components/_user-box.scss @@ -4,7 +4,10 @@ display:grid; column-gap:pxToRem(16); grid-template-columns:auto 1fr; font-size:pxToRem(18); line-height:pxToRem(24); - &-image { grid-row:span 2; display:block; inline-size:pxToRem(48); block-size:pxToRem(48); border-radius:50%; } + &-image { + grid-row:span 2; display:block; inline-size:pxToRem(48); block-size:pxToRem(48); border-radius:50%; + &.is-32px { inline-size:pxToRem(32); block-size:pxToRem(32); } + } &-name { color:hsl(var(--web-color-greyscale-700)); } &-username { color:hsl(var(--web-color-greyscale-600)); } } \ No newline at end of file diff --git a/src/scss/8-sequences/_index.scss b/src/scss/8-sequences/_index.scss index 43e57e162a..9327f3d243 100644 --- a/src/scss/8-sequences/_index.scss +++ b/src/scss/8-sequences/_index.scss @@ -8,4 +8,5 @@ /* sequence full parts */ @forward "feature-article"; @forward "grid-articles"; -@forward "main-article"; \ No newline at end of file +@forward "main-article"; +@forward "overlay-item"; \ No newline at end of file diff --git a/src/scss/8-sequences/_overlay-item.scss b/src/scss/8-sequences/_overlay-item.scss new file mode 100644 index 0000000000..685035b244 --- /dev/null +++ b/src/scss/8-sequences/_overlay-item.scss @@ -0,0 +1,19 @@ +@use '../abstract' as *; +.#{$p}-overlay-item { + position: relative; + display: block; + border-radius: var(--border-radius-medium); + border: pxToRem(1) solid hsl(var(--smooth)); + overflow:hidden; + img { border-radius:inherit; } + &::before { + position:absolute; inset:0; + content:""; display:block; + border-radius:inherit; + background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.64) 74.79%, #000 100%), rgba(255, 255, 255, 0.04); + } + .web-user-box { + position:absolute; inset-inline-start:pxToRem(16); inset-block-end:pxToRem(16); + &-image { inline-size:pxToRem(40); block-size:pxToRem(40); margin-block:auto; } + } +} \ No newline at end of file diff --git a/src/scss/9-grids/_feature-grid.scss b/src/scss/9-grids/_feature-grid.scss new file mode 100644 index 0000000000..079a3c2bb3 --- /dev/null +++ b/src/scss/9-grids/_feature-grid.scss @@ -0,0 +1,9 @@ +@use '../abstract' as *; + +.#{$p}-feature-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: pxToRem(32); + @media (max-width:767.9px) { grid-template-columns: 1fr; } + @media (min-width:768px) { grid-template-columns: repeat(2, 1fr); } +} diff --git a/src/scss/9-grids/_index.scss b/src/scss/9-grids/_index.scss index feade962e4..5732c19763 100644 --- a/src/scss/9-grids/_index.scss +++ b/src/scss/9-grids/_index.scss @@ -10,4 +10,5 @@ @forward "multi-columns-1"; @forward "grid-side-nav"; @forward "grid-two-side-navs"; -@forward "grid-huge-navs"; \ No newline at end of file +@forward "grid-huge-navs"; +@forward "feature-grid"; \ No newline at end of file diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss index b86b048123..006667ec78 100644 --- a/src/scss/_10-utilities.scss +++ b/src/scss/_10-utilities.scss @@ -165,6 +165,8 @@ .#{$p}-u-gap-6 { gap:pxToRem(6); } .#{$p}-u-gap-20 { gap:pxToRem(20)!important; } .#{$p}-u-gap-20-mobile { @media #{$break1} { gap:pxToRem(20)!important; } } +.#{$p}-u-gap-40-mobile { @media #{$break1} { gap:pxToRem(40)!important; } } +.#{$p}-u-gap-60-not-mobile { @media #{$break2open} { gap:pxToRem(60)!important; } } .#{$p}-u-gap-32 { gap:pxToRem(32)!important; } .#{$p}-u-gap-64 { gap:pxToRem(64)!important; } .#{$p}-u-gap-80 { gap:pxToRem(80); } diff --git a/static/images/blog/integrations-catalog.png b/static/images/blog/integrations-catalog.png new file mode 100644 index 0000000000..0cacbdbdf8 Binary files /dev/null and b/static/images/blog/integrations-catalog.png differ diff --git a/static/images/blog/integrations-messaging/1.png b/static/images/blog/integrations-messaging/1.png new file mode 100644 index 0000000000..240b80f798 Binary files /dev/null and b/static/images/blog/integrations-messaging/1.png differ diff --git a/static/images/blog/integrations-messaging/2.png b/static/images/blog/integrations-messaging/2.png new file mode 100644 index 0000000000..010b3c8970 Binary files /dev/null and b/static/images/blog/integrations-messaging/2.png differ diff --git a/static/images/blog/integrations-messaging/3.png b/static/images/blog/integrations-messaging/3.png new file mode 100644 index 0000000000..b9b8527dba Binary files /dev/null and b/static/images/blog/integrations-messaging/3.png differ diff --git a/static/images/blog/integrations-messaging/4.png b/static/images/blog/integrations-messaging/4.png new file mode 100644 index 0000000000..e3288014ef Binary files /dev/null and b/static/images/blog/integrations-messaging/4.png differ diff --git a/static/images/blog/integrations-messaging/cover.png b/static/images/blog/integrations-messaging/cover.png new file mode 100644 index 0000000000..568537b03e Binary files /dev/null and b/static/images/blog/integrations-messaging/cover.png differ diff --git a/static/images/blog/product-update-july/1.png b/static/images/blog/product-update-july/1.png new file mode 100644 index 0000000000..e4df3d9116 Binary files /dev/null and b/static/images/blog/product-update-july/1.png differ diff --git a/static/images/blog/product-update-july/2.png b/static/images/blog/product-update-july/2.png new file mode 100644 index 0000000000..9a4c67f1de Binary files /dev/null and b/static/images/blog/product-update-july/2.png differ diff --git a/static/images/blog/product-update-july/3.png b/static/images/blog/product-update-july/3.png new file mode 100644 index 0000000000..e62c09b29b Binary files /dev/null and b/static/images/blog/product-update-july/3.png differ diff --git a/static/images/blog/product-update-july/cover.png b/static/images/blog/product-update-july/cover.png new file mode 100644 index 0000000000..fda2e92ea2 Binary files /dev/null and b/static/images/blog/product-update-july/cover.png differ diff --git a/static/images/changelog/2024-07-30.png b/static/images/changelog/2024-07-30.png new file mode 100644 index 0000000000..0cacbdbdf8 Binary files /dev/null and b/static/images/changelog/2024-07-30.png differ diff --git a/static/images/integrations/ai-hugging-face-image-classification/appwrite-functions-env-variables-image-classification-hugging-face.png b/static/images/integrations/ai-hugging-face-image-classification/appwrite-functions-env-variables-image-classification-hugging-face.png new file mode 100644 index 0000000000..36f2fc873e Binary files /dev/null and b/static/images/integrations/ai-hugging-face-image-classification/appwrite-functions-env-variables-image-classification-hugging-face.png differ diff --git a/static/images/integrations/ai-hugging-face-image-classification/appwrite-functions-image-classification-hugging-face.png b/static/images/integrations/ai-hugging-face-image-classification/appwrite-functions-image-classification-hugging-face.png new file mode 100644 index 0000000000..887cf3f2b7 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-image-classification/appwrite-functions-image-classification-hugging-face.png differ diff --git a/static/images/integrations/ai-hugging-face-image-classification/cover.png b/static/images/integrations/ai-hugging-face-image-classification/cover.png new file mode 100644 index 0000000000..881c394085 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-image-classification/cover.png differ diff --git a/static/images/integrations/ai-hugging-face-image-classification/hugging-face-create-api-token.png b/static/images/integrations/ai-hugging-face-image-classification/hugging-face-create-api-token.png new file mode 100644 index 0000000000..0c4cfcaf29 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-image-classification/hugging-face-create-api-token.png differ diff --git a/static/images/integrations/ai-hugging-face-language-translation/cover.png b/static/images/integrations/ai-hugging-face-language-translation/cover.png new file mode 100644 index 0000000000..881c394085 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-language-translation/cover.png differ diff --git a/static/images/integrations/ai-hugging-face-language-translation/hugging-face-create-api-token.png b/static/images/integrations/ai-hugging-face-language-translation/hugging-face-create-api-token.png new file mode 100644 index 0000000000..0c4cfcaf29 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-language-translation/hugging-face-create-api-token.png differ diff --git a/static/images/integrations/ai-hugging-face-language-translation/language-translation-demo.png b/static/images/integrations/ai-hugging-face-language-translation/language-translation-demo.png new file mode 100644 index 0000000000..d5c0ff77b9 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-language-translation/language-translation-demo.png differ diff --git a/static/images/integrations/ai-hugging-face-language-translation/language-translation-env-variables.png b/static/images/integrations/ai-hugging-face-language-translation/language-translation-env-variables.png new file mode 100644 index 0000000000..e09a1770c9 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-language-translation/language-translation-env-variables.png differ diff --git a/static/images/integrations/ai-hugging-face-language-translation/language-translation-function-template.png b/static/images/integrations/ai-hugging-face-language-translation/language-translation-function-template.png new file mode 100644 index 0000000000..ec0f9b6cd2 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-language-translation/language-translation-function-template.png differ diff --git a/static/images/integrations/ai-hugging-face-speech-recognition/cover.png b/static/images/integrations/ai-hugging-face-speech-recognition/cover.png new file mode 100644 index 0000000000..881c394085 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-speech-recognition/cover.png differ diff --git a/static/images/integrations/ai-hugging-face-speech-recognition/template.png b/static/images/integrations/ai-hugging-face-speech-recognition/template.png new file mode 100644 index 0000000000..df02f915c7 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-speech-recognition/template.png differ diff --git a/static/images/integrations/ai-hugging-face-speech-recognition/token.png b/static/images/integrations/ai-hugging-face-speech-recognition/token.png new file mode 100644 index 0000000000..0c4cfcaf29 Binary files /dev/null and b/static/images/integrations/ai-hugging-face-speech-recognition/token.png differ diff --git a/static/images/integrations/ai-hugging-face-speech-recognition/variables.png b/static/images/integrations/ai-hugging-face-speech-recognition/variables.png new file mode 100644 index 0000000000..36f2fc873e Binary files /dev/null and b/static/images/integrations/ai-hugging-face-speech-recognition/variables.png differ diff --git a/static/images/integrations/ai-openai/api-key.png b/static/images/integrations/ai-openai/api-key.png new file mode 100644 index 0000000000..c9e0b26915 Binary files /dev/null and b/static/images/integrations/ai-openai/api-key.png differ diff --git a/static/images/integrations/ai-openai/cover.png b/static/images/integrations/ai-openai/cover.png new file mode 100644 index 0000000000..a0f3e98fac Binary files /dev/null and b/static/images/integrations/ai-openai/cover.png differ diff --git a/static/images/integrations/ai-openai/demo.png b/static/images/integrations/ai-openai/demo.png new file mode 100644 index 0000000000..240d7d3929 Binary files /dev/null and b/static/images/integrations/ai-openai/demo.png differ diff --git a/static/images/integrations/ai-openai/template.png b/static/images/integrations/ai-openai/template.png new file mode 100644 index 0000000000..f72d05ba4a Binary files /dev/null and b/static/images/integrations/ai-openai/template.png differ diff --git a/static/images/integrations/ai-openai/variables.png b/static/images/integrations/ai-openai/variables.png new file mode 100644 index 0000000000..172de0bd1b Binary files /dev/null and b/static/images/integrations/ai-openai/variables.png differ diff --git a/static/images/integrations/ai-perplexity/api-key.png b/static/images/integrations/ai-perplexity/api-key.png new file mode 100644 index 0000000000..b36d622866 Binary files /dev/null and b/static/images/integrations/ai-perplexity/api-key.png differ diff --git a/static/images/integrations/ai-perplexity/cover.png b/static/images/integrations/ai-perplexity/cover.png new file mode 100644 index 0000000000..aeb3c5bd94 Binary files /dev/null and b/static/images/integrations/ai-perplexity/cover.png differ diff --git a/static/images/integrations/ai-perplexity/demo.png b/static/images/integrations/ai-perplexity/demo.png new file mode 100644 index 0000000000..0aed36008c Binary files /dev/null and b/static/images/integrations/ai-perplexity/demo.png differ diff --git a/static/images/integrations/ai-perplexity/template.png b/static/images/integrations/ai-perplexity/template.png new file mode 100644 index 0000000000..7d559b1bb6 Binary files /dev/null and b/static/images/integrations/ai-perplexity/template.png differ diff --git a/static/images/integrations/ai-perplexity/variables.png b/static/images/integrations/ai-perplexity/variables.png new file mode 100644 index 0000000000..0dbbb89c13 Binary files /dev/null and b/static/images/integrations/ai-perplexity/variables.png differ diff --git a/static/images/integrations/avatars/algolia.png b/static/images/integrations/avatars/algolia.png new file mode 100644 index 0000000000..7fdffe6617 Binary files /dev/null and b/static/images/integrations/avatars/algolia.png differ diff --git a/static/images/integrations/avatars/amazon.png b/static/images/integrations/avatars/amazon.png new file mode 100644 index 0000000000..966f4229b2 Binary files /dev/null and b/static/images/integrations/avatars/amazon.png differ diff --git a/static/images/integrations/avatars/apple.png b/static/images/integrations/avatars/apple.png new file mode 100644 index 0000000000..0bfb795abf Binary files /dev/null and b/static/images/integrations/avatars/apple.png differ diff --git a/static/images/integrations/avatars/appsignal.png b/static/images/integrations/avatars/appsignal.png new file mode 100644 index 0000000000..ce5e927fe2 Binary files /dev/null and b/static/images/integrations/avatars/appsignal.png differ diff --git a/static/images/integrations/avatars/aws.png b/static/images/integrations/avatars/aws.png new file mode 100644 index 0000000000..84f88acea5 Binary files /dev/null and b/static/images/integrations/avatars/aws.png differ diff --git a/static/images/integrations/avatars/discord.png b/static/images/integrations/avatars/discord.png new file mode 100644 index 0000000000..04b12e7ed6 Binary files /dev/null and b/static/images/integrations/avatars/discord.png differ diff --git a/static/images/integrations/avatars/fcm.png b/static/images/integrations/avatars/fcm.png new file mode 100644 index 0000000000..81b39dab7e Binary files /dev/null and b/static/images/integrations/avatars/fcm.png differ diff --git a/static/images/integrations/avatars/github.png b/static/images/integrations/avatars/github.png new file mode 100644 index 0000000000..975a4be7ce Binary files /dev/null and b/static/images/integrations/avatars/github.png differ diff --git a/static/images/integrations/avatars/google.png b/static/images/integrations/avatars/google.png new file mode 100644 index 0000000000..a17df8e04f Binary files /dev/null and b/static/images/integrations/avatars/google.png differ diff --git a/static/images/integrations/avatars/hugging-face.png b/static/images/integrations/avatars/hugging-face.png new file mode 100644 index 0000000000..4ab53f4253 Binary files /dev/null and b/static/images/integrations/avatars/hugging-face.png differ diff --git a/static/images/integrations/avatars/lemon-squeezy.png b/static/images/integrations/avatars/lemon-squeezy.png new file mode 100644 index 0000000000..c5dc610513 Binary files /dev/null and b/static/images/integrations/avatars/lemon-squeezy.png differ diff --git a/static/images/integrations/avatars/mongodb.png b/static/images/integrations/avatars/mongodb.png new file mode 100644 index 0000000000..7bf63c6832 Binary files /dev/null and b/static/images/integrations/avatars/mongodb.png differ diff --git a/static/images/integrations/avatars/notion.png b/static/images/integrations/avatars/notion.png new file mode 100644 index 0000000000..910c2fb221 Binary files /dev/null and b/static/images/integrations/avatars/notion.png differ diff --git a/static/images/integrations/avatars/openai.png b/static/images/integrations/avatars/openai.png new file mode 100644 index 0000000000..f0e64a6da5 Binary files /dev/null and b/static/images/integrations/avatars/openai.png differ diff --git a/static/images/integrations/avatars/perplexity.png b/static/images/integrations/avatars/perplexity.png new file mode 100644 index 0000000000..e55ed00e1c Binary files /dev/null and b/static/images/integrations/avatars/perplexity.png differ diff --git a/static/images/integrations/avatars/raygun.png b/static/images/integrations/avatars/raygun.png new file mode 100644 index 0000000000..a3bd944530 Binary files /dev/null and b/static/images/integrations/avatars/raygun.png differ diff --git a/static/images/integrations/avatars/sendgrid.png b/static/images/integrations/avatars/sendgrid.png new file mode 100644 index 0000000000..ecf438aff7 Binary files /dev/null and b/static/images/integrations/avatars/sendgrid.png differ diff --git a/static/images/integrations/avatars/sentry.png b/static/images/integrations/avatars/sentry.png new file mode 100644 index 0000000000..1688473643 Binary files /dev/null and b/static/images/integrations/avatars/sentry.png differ diff --git a/static/images/integrations/avatars/stripe.png b/static/images/integrations/avatars/stripe.png new file mode 100644 index 0000000000..581faa2fc7 Binary files /dev/null and b/static/images/integrations/avatars/stripe.png differ diff --git a/static/images/integrations/avatars/twilio.png b/static/images/integrations/avatars/twilio.png new file mode 100644 index 0000000000..7eb880c71b Binary files /dev/null and b/static/images/integrations/avatars/twilio.png differ diff --git a/static/images/integrations/avatars/upstash.png b/static/images/integrations/avatars/upstash.png new file mode 100644 index 0000000000..6a61afa765 Binary files /dev/null and b/static/images/integrations/avatars/upstash.png differ diff --git a/static/images/integrations/avatars/vonage.png b/static/images/integrations/avatars/vonage.png new file mode 100644 index 0000000000..0d82847d16 Binary files /dev/null and b/static/images/integrations/avatars/vonage.png differ diff --git a/static/images/integrations/deployments-github/cover.png b/static/images/integrations/deployments-github/cover.png new file mode 100644 index 0000000000..42adeecf7d Binary files /dev/null and b/static/images/integrations/deployments-github/cover.png differ diff --git a/static/images/integrations/deployments-github/create.png b/static/images/integrations/deployments-github/create.png new file mode 100644 index 0000000000..73176e4b4f Binary files /dev/null and b/static/images/integrations/deployments-github/create.png differ diff --git a/static/images/integrations/deployments-github/installed.png b/static/images/integrations/deployments-github/installed.png new file mode 100644 index 0000000000..9c470a696d Binary files /dev/null and b/static/images/integrations/deployments-github/installed.png differ diff --git a/static/images/integrations/email-sendgrid/cover.png b/static/images/integrations/email-sendgrid/cover.png new file mode 100644 index 0000000000..fa132c9212 Binary files /dev/null and b/static/images/integrations/email-sendgrid/cover.png differ diff --git a/static/images/integrations/email-sendgrid/email.png b/static/images/integrations/email-sendgrid/email.png new file mode 100644 index 0000000000..738c7a48d8 Binary files /dev/null and b/static/images/integrations/email-sendgrid/email.png differ diff --git a/static/images/integrations/email-sendgrid/provider.png b/static/images/integrations/email-sendgrid/provider.png new file mode 100644 index 0000000000..361c6ce9b3 Binary files /dev/null and b/static/images/integrations/email-sendgrid/provider.png differ diff --git a/static/images/integrations/email-sendgrid/welcome-guide.png b/static/images/integrations/email-sendgrid/welcome-guide.png new file mode 100644 index 0000000000..5a1fbf197a Binary files /dev/null and b/static/images/integrations/email-sendgrid/welcome-guide.png differ diff --git a/static/images/integrations/lemon-squeezy-payments/cover.png b/static/images/integrations/lemon-squeezy-payments/cover.png new file mode 100644 index 0000000000..33958f7690 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-payments/cover.png differ diff --git a/static/images/integrations/lemon-squeezy-payments/dashboard.png b/static/images/integrations/lemon-squeezy-payments/dashboard.png new file mode 100644 index 0000000000..c2f923b6a5 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-payments/dashboard.png differ diff --git a/static/images/integrations/lemon-squeezy-payments/database.png b/static/images/integrations/lemon-squeezy-payments/database.png new file mode 100644 index 0000000000..eb06152212 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-payments/database.png differ diff --git a/static/images/integrations/lemon-squeezy-payments/demo.png b/static/images/integrations/lemon-squeezy-payments/demo.png new file mode 100644 index 0000000000..188f9504c1 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-payments/demo.png differ diff --git a/static/images/integrations/lemon-squeezy-payments/template.png b/static/images/integrations/lemon-squeezy-payments/template.png new file mode 100644 index 0000000000..6d60d9a724 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-payments/template.png differ diff --git a/static/images/integrations/lemon-squeezy-payments/variables.png b/static/images/integrations/lemon-squeezy-payments/variables.png new file mode 100644 index 0000000000..35faff85e2 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-payments/variables.png differ diff --git a/static/images/integrations/lemon-squeezy-payments/web-platform.png b/static/images/integrations/lemon-squeezy-payments/web-platform.png new file mode 100644 index 0000000000..5f1b228070 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-payments/web-platform.png differ diff --git a/static/images/integrations/lemon-squeezy-subscriptions/cover.png b/static/images/integrations/lemon-squeezy-subscriptions/cover.png new file mode 100644 index 0000000000..33958f7690 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-subscriptions/cover.png differ diff --git a/static/images/integrations/lemon-squeezy-subscriptions/dashboard.png b/static/images/integrations/lemon-squeezy-subscriptions/dashboard.png new file mode 100644 index 0000000000..c2f923b6a5 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-subscriptions/dashboard.png differ diff --git a/static/images/integrations/lemon-squeezy-subscriptions/demo.png b/static/images/integrations/lemon-squeezy-subscriptions/demo.png new file mode 100644 index 0000000000..f732e33e58 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-subscriptions/demo.png differ diff --git a/static/images/integrations/lemon-squeezy-subscriptions/template.png b/static/images/integrations/lemon-squeezy-subscriptions/template.png new file mode 100644 index 0000000000..4add524705 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-subscriptions/template.png differ diff --git a/static/images/integrations/lemon-squeezy-subscriptions/user.png b/static/images/integrations/lemon-squeezy-subscriptions/user.png new file mode 100644 index 0000000000..58f2b0d73b Binary files /dev/null and b/static/images/integrations/lemon-squeezy-subscriptions/user.png differ diff --git a/static/images/integrations/lemon-squeezy-subscriptions/variables.png b/static/images/integrations/lemon-squeezy-subscriptions/variables.png new file mode 100644 index 0000000000..35faff85e2 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-subscriptions/variables.png differ diff --git a/static/images/integrations/lemon-squeezy-subscriptions/web-platform.png b/static/images/integrations/lemon-squeezy-subscriptions/web-platform.png new file mode 100644 index 0000000000..5f1b228070 Binary files /dev/null and b/static/images/integrations/lemon-squeezy-subscriptions/web-platform.png differ diff --git a/static/images/integrations/logging-appsignal/api-key.png b/static/images/integrations/logging-appsignal/api-key.png new file mode 100644 index 0000000000..74b13eb881 Binary files /dev/null and b/static/images/integrations/logging-appsignal/api-key.png differ diff --git a/static/images/integrations/logging-appsignal/cover.png b/static/images/integrations/logging-appsignal/cover.png new file mode 100644 index 0000000000..321c28caf6 Binary files /dev/null and b/static/images/integrations/logging-appsignal/cover.png differ diff --git a/static/images/integrations/logging-appsignal/error.png b/static/images/integrations/logging-appsignal/error.png new file mode 100644 index 0000000000..900275d42a Binary files /dev/null and b/static/images/integrations/logging-appsignal/error.png differ diff --git a/static/images/integrations/logging-appsignal/errors-list.png b/static/images/integrations/logging-appsignal/errors-list.png new file mode 100644 index 0000000000..8ffca25dee Binary files /dev/null and b/static/images/integrations/logging-appsignal/errors-list.png differ diff --git a/static/images/integrations/logging-raygun/api-key.png b/static/images/integrations/logging-raygun/api-key.png new file mode 100644 index 0000000000..3d25ab8286 Binary files /dev/null and b/static/images/integrations/logging-raygun/api-key.png differ diff --git a/static/images/integrations/logging-raygun/cover.png b/static/images/integrations/logging-raygun/cover.png new file mode 100644 index 0000000000..2824fa6a7c Binary files /dev/null and b/static/images/integrations/logging-raygun/cover.png differ diff --git a/static/images/integrations/logging-raygun/crash-reporting.png b/static/images/integrations/logging-raygun/crash-reporting.png new file mode 100644 index 0000000000..d83443100b Binary files /dev/null and b/static/images/integrations/logging-raygun/crash-reporting.png differ diff --git a/static/images/integrations/logging-raygun/error.png b/static/images/integrations/logging-raygun/error.png new file mode 100644 index 0000000000..61682def99 Binary files /dev/null and b/static/images/integrations/logging-raygun/error.png differ diff --git a/static/images/integrations/logging-sentry/cover.png b/static/images/integrations/logging-sentry/cover.png new file mode 100644 index 0000000000..9b3516eb9c Binary files /dev/null and b/static/images/integrations/logging-sentry/cover.png differ diff --git a/static/images/integrations/logging-sentry/issue-details.png b/static/images/integrations/logging-sentry/issue-details.png new file mode 100644 index 0000000000..5c9f0dd5ce Binary files /dev/null and b/static/images/integrations/logging-sentry/issue-details.png differ diff --git a/static/images/integrations/logging-sentry/issues.png b/static/images/integrations/logging-sentry/issues.png new file mode 100644 index 0000000000..8aef0d904d Binary files /dev/null and b/static/images/integrations/logging-sentry/issues.png differ diff --git a/static/images/integrations/logging-sentry/project.png b/static/images/integrations/logging-sentry/project.png new file mode 100644 index 0000000000..42b16e592e Binary files /dev/null and b/static/images/integrations/logging-sentry/project.png differ diff --git a/static/images/integrations/oauth-amazon/allowed-return-urls.png b/static/images/integrations/oauth-amazon/allowed-return-urls.png new file mode 100644 index 0000000000..f4119abd5e Binary files /dev/null and b/static/images/integrations/oauth-amazon/allowed-return-urls.png differ diff --git a/static/images/integrations/oauth-amazon/cover.png b/static/images/integrations/oauth-amazon/cover.png new file mode 100644 index 0000000000..12cd0346c0 Binary files /dev/null and b/static/images/integrations/oauth-amazon/cover.png differ diff --git a/static/images/integrations/oauth-amazon/provider.png b/static/images/integrations/oauth-amazon/provider.png new file mode 100644 index 0000000000..69207c6d4c Binary files /dev/null and b/static/images/integrations/oauth-amazon/provider.png differ diff --git a/static/images/integrations/oauth-amazon/security-profile.png b/static/images/integrations/oauth-amazon/security-profile.png new file mode 100644 index 0000000000..6e7f7e21ba Binary files /dev/null and b/static/images/integrations/oauth-amazon/security-profile.png differ diff --git a/static/images/integrations/oauth-apple/apple-developer-program.png b/static/images/integrations/oauth-apple/apple-developer-program.png new file mode 100644 index 0000000000..09f28256e0 Binary files /dev/null and b/static/images/integrations/oauth-apple/apple-developer-program.png differ diff --git a/static/images/integrations/oauth-apple/cover.png b/static/images/integrations/oauth-apple/cover.png new file mode 100644 index 0000000000..2e0cce8521 Binary files /dev/null and b/static/images/integrations/oauth-apple/cover.png differ diff --git a/static/images/integrations/oauth-apple/provider.png b/static/images/integrations/oauth-apple/provider.png new file mode 100644 index 0000000000..b6fcf0e3c0 Binary files /dev/null and b/static/images/integrations/oauth-apple/provider.png differ diff --git a/static/images/integrations/oauth-discord/cover.png b/static/images/integrations/oauth-discord/cover.png new file mode 100644 index 0000000000..6ecb9981b0 Binary files /dev/null and b/static/images/integrations/oauth-discord/cover.png differ diff --git a/static/images/integrations/oauth-discord/new-app.png b/static/images/integrations/oauth-discord/new-app.png new file mode 100644 index 0000000000..bc0b428879 Binary files /dev/null and b/static/images/integrations/oauth-discord/new-app.png differ diff --git a/static/images/integrations/oauth-discord/oauth2.png b/static/images/integrations/oauth-discord/oauth2.png new file mode 100644 index 0000000000..964870b8d5 Binary files /dev/null and b/static/images/integrations/oauth-discord/oauth2.png differ diff --git a/static/images/integrations/oauth-discord/provider.png b/static/images/integrations/oauth-discord/provider.png new file mode 100644 index 0000000000..3001225901 Binary files /dev/null and b/static/images/integrations/oauth-discord/provider.png differ diff --git a/static/images/integrations/oauth-google/client-id.png b/static/images/integrations/oauth-google/client-id.png new file mode 100644 index 0000000000..98ba191876 Binary files /dev/null and b/static/images/integrations/oauth-google/client-id.png differ diff --git a/static/images/integrations/oauth-google/consent-screen.png b/static/images/integrations/oauth-google/consent-screen.png new file mode 100644 index 0000000000..29f39ed977 Binary files /dev/null and b/static/images/integrations/oauth-google/consent-screen.png differ diff --git a/static/images/integrations/oauth-google/cover.png b/static/images/integrations/oauth-google/cover.png new file mode 100644 index 0000000000..af326f4343 Binary files /dev/null and b/static/images/integrations/oauth-google/cover.png differ diff --git a/static/images/integrations/oauth-google/provider.png b/static/images/integrations/oauth-google/provider.png new file mode 100644 index 0000000000..b889d55192 Binary files /dev/null and b/static/images/integrations/oauth-google/provider.png differ diff --git a/static/images/integrations/oauth-google/redirect-uri.png b/static/images/integrations/oauth-google/redirect-uri.png new file mode 100644 index 0000000000..036c176056 Binary files /dev/null and b/static/images/integrations/oauth-google/redirect-uri.png differ diff --git a/static/images/integrations/oauth-notion/cover.png b/static/images/integrations/oauth-notion/cover.png new file mode 100644 index 0000000000..475d8134eb Binary files /dev/null and b/static/images/integrations/oauth-notion/cover.png differ diff --git a/static/images/integrations/oauth-notion/new-integration.png b/static/images/integrations/oauth-notion/new-integration.png new file mode 100644 index 0000000000..dbb406510c Binary files /dev/null and b/static/images/integrations/oauth-notion/new-integration.png differ diff --git a/static/images/integrations/oauth-notion/provider.png b/static/images/integrations/oauth-notion/provider.png new file mode 100644 index 0000000000..47fbb2ed3c Binary files /dev/null and b/static/images/integrations/oauth-notion/provider.png differ diff --git a/static/images/integrations/oauth-notion/redirect-uri.png b/static/images/integrations/oauth-notion/redirect-uri.png new file mode 100644 index 0000000000..43df2fa3cb Binary files /dev/null and b/static/images/integrations/oauth-notion/redirect-uri.png differ diff --git a/static/images/integrations/phone-auth-twilio/cover.png b/static/images/integrations/phone-auth-twilio/cover.png new file mode 100644 index 0000000000..9fe59cad55 Binary files /dev/null and b/static/images/integrations/phone-auth-twilio/cover.png differ diff --git a/static/images/integrations/phone-auth-twilio/twilio-console.png b/static/images/integrations/phone-auth-twilio/twilio-console.png new file mode 100644 index 0000000000..79b0f634cb Binary files /dev/null and b/static/images/integrations/phone-auth-twilio/twilio-console.png differ diff --git a/static/images/integrations/phone-auth-twilio/user.png b/static/images/integrations/phone-auth-twilio/user.png new file mode 100644 index 0000000000..9dcd7926c7 Binary files /dev/null and b/static/images/integrations/phone-auth-twilio/user.png differ diff --git a/static/images/integrations/push-apns/apple-developer-program.png b/static/images/integrations/push-apns/apple-developer-program.png new file mode 100644 index 0000000000..09f28256e0 Binary files /dev/null and b/static/images/integrations/push-apns/apple-developer-program.png differ diff --git a/static/images/integrations/push-apns/cover.png b/static/images/integrations/push-apns/cover.png new file mode 100644 index 0000000000..2e0cce8521 Binary files /dev/null and b/static/images/integrations/push-apns/cover.png differ diff --git a/static/images/integrations/push-apns/provider.png b/static/images/integrations/push-apns/provider.png new file mode 100644 index 0000000000..000089facc Binary files /dev/null and b/static/images/integrations/push-apns/provider.png differ diff --git a/static/images/integrations/push-fcm/cover.png b/static/images/integrations/push-fcm/cover.png new file mode 100644 index 0000000000..1e93ceb346 Binary files /dev/null and b/static/images/integrations/push-fcm/cover.png differ diff --git a/static/images/integrations/push-fcm/private-key.png b/static/images/integrations/push-fcm/private-key.png new file mode 100644 index 0000000000..2181e2431c Binary files /dev/null and b/static/images/integrations/push-fcm/private-key.png differ diff --git a/static/images/integrations/push-fcm/provider.png b/static/images/integrations/push-fcm/provider.png new file mode 100644 index 0000000000..a90efc0097 Binary files /dev/null and b/static/images/integrations/push-fcm/provider.png differ diff --git a/static/images/integrations/query-mongodb/connection-string.png b/static/images/integrations/query-mongodb/connection-string.png new file mode 100644 index 0000000000..a06387946c Binary files /dev/null and b/static/images/integrations/query-mongodb/connection-string.png differ diff --git a/static/images/integrations/query-mongodb/cover.png b/static/images/integrations/query-mongodb/cover.png new file mode 100644 index 0000000000..840938acbc Binary files /dev/null and b/static/images/integrations/query-mongodb/cover.png differ diff --git a/static/images/integrations/query-mongodb/first-cluster.png b/static/images/integrations/query-mongodb/first-cluster.png new file mode 100644 index 0000000000..859fc87722 Binary files /dev/null and b/static/images/integrations/query-mongodb/first-cluster.png differ diff --git a/static/images/integrations/query-mongodb/network-access.png b/static/images/integrations/query-mongodb/network-access.png new file mode 100644 index 0000000000..769f85ffcd Binary files /dev/null and b/static/images/integrations/query-mongodb/network-access.png differ diff --git a/static/images/integrations/query-mongodb/template.png b/static/images/integrations/query-mongodb/template.png new file mode 100644 index 0000000000..93eed0d79b Binary files /dev/null and b/static/images/integrations/query-mongodb/template.png differ diff --git a/static/images/integrations/query-mongodb/variables.png b/static/images/integrations/query-mongodb/variables.png new file mode 100644 index 0000000000..3611183d15 Binary files /dev/null and b/static/images/integrations/query-mongodb/variables.png differ diff --git a/static/images/integrations/query-upstash/cover.png b/static/images/integrations/query-upstash/cover.png new file mode 100644 index 0000000000..0763388479 Binary files /dev/null and b/static/images/integrations/query-upstash/cover.png differ diff --git a/static/images/integrations/query-upstash/index.png b/static/images/integrations/query-upstash/index.png new file mode 100644 index 0000000000..ec65848d40 Binary files /dev/null and b/static/images/integrations/query-upstash/index.png differ diff --git a/static/images/integrations/query-upstash/template.png b/static/images/integrations/query-upstash/template.png new file mode 100644 index 0000000000..3b24fc90b4 Binary files /dev/null and b/static/images/integrations/query-upstash/template.png differ diff --git a/static/images/integrations/query-upstash/variables.png b/static/images/integrations/query-upstash/variables.png new file mode 100644 index 0000000000..7cf76968fa Binary files /dev/null and b/static/images/integrations/query-upstash/variables.png differ diff --git a/static/images/integrations/rubiks-cube.png b/static/images/integrations/rubiks-cube.png new file mode 100644 index 0000000000..3f37482581 Binary files /dev/null and b/static/images/integrations/rubiks-cube.png differ diff --git a/static/images/integrations/search-algolia/cover.png b/static/images/integrations/search-algolia/cover.png new file mode 100644 index 0000000000..a14053aebf Binary files /dev/null and b/static/images/integrations/search-algolia/cover.png differ diff --git a/static/images/integrations/search-algolia/demo.png b/static/images/integrations/search-algolia/demo.png new file mode 100644 index 0000000000..0c5bb27a53 Binary files /dev/null and b/static/images/integrations/search-algolia/demo.png differ diff --git a/static/images/integrations/search-algolia/index.png b/static/images/integrations/search-algolia/index.png new file mode 100644 index 0000000000..a35f176e30 Binary files /dev/null and b/static/images/integrations/search-algolia/index.png differ diff --git a/static/images/integrations/search-algolia/overview.png b/static/images/integrations/search-algolia/overview.png new file mode 100644 index 0000000000..fefd8b802e Binary files /dev/null and b/static/images/integrations/search-algolia/overview.png differ diff --git a/static/images/integrations/search-algolia/template.png b/static/images/integrations/search-algolia/template.png new file mode 100644 index 0000000000..99f7bdc0dd Binary files /dev/null and b/static/images/integrations/search-algolia/template.png differ diff --git a/static/images/integrations/search-algolia/variables.png b/static/images/integrations/search-algolia/variables.png new file mode 100644 index 0000000000..90b97f25ef Binary files /dev/null and b/static/images/integrations/search-algolia/variables.png differ diff --git a/static/images/integrations/sms-twilio/config.png b/static/images/integrations/sms-twilio/config.png new file mode 100644 index 0000000000..0c431b0144 Binary files /dev/null and b/static/images/integrations/sms-twilio/config.png differ diff --git a/static/images/integrations/sms-twilio/cover.png b/static/images/integrations/sms-twilio/cover.png new file mode 100644 index 0000000000..1cba820a8b Binary files /dev/null and b/static/images/integrations/sms-twilio/cover.png differ diff --git a/static/images/integrations/sms-twilio/sms.png b/static/images/integrations/sms-twilio/sms.png new file mode 100644 index 0000000000..8350dfdd93 Binary files /dev/null and b/static/images/integrations/sms-twilio/sms.png differ diff --git a/static/images/integrations/sms-twilio/twilio-console.png b/static/images/integrations/sms-twilio/twilio-console.png new file mode 100644 index 0000000000..79b0f634cb Binary files /dev/null and b/static/images/integrations/sms-twilio/twilio-console.png differ diff --git a/static/images/integrations/storage-s3/access-key.png b/static/images/integrations/storage-s3/access-key.png new file mode 100644 index 0000000000..151463e766 Binary files /dev/null and b/static/images/integrations/storage-s3/access-key.png differ diff --git a/static/images/integrations/storage-s3/appwrite-file.png b/static/images/integrations/storage-s3/appwrite-file.png new file mode 100644 index 0000000000..a5ea1d306d Binary files /dev/null and b/static/images/integrations/storage-s3/appwrite-file.png differ diff --git a/static/images/integrations/storage-s3/bucket.png b/static/images/integrations/storage-s3/bucket.png new file mode 100644 index 0000000000..6a8742b376 Binary files /dev/null and b/static/images/integrations/storage-s3/bucket.png differ diff --git a/static/images/integrations/storage-s3/cover.png b/static/images/integrations/storage-s3/cover.png new file mode 100644 index 0000000000..5a4d7f1597 Binary files /dev/null and b/static/images/integrations/storage-s3/cover.png differ diff --git a/static/images/integrations/storage-s3/s3-file.png b/static/images/integrations/storage-s3/s3-file.png new file mode 100644 index 0000000000..a9a770079a Binary files /dev/null and b/static/images/integrations/storage-s3/s3-file.png differ diff --git a/static/images/integrations/stripe-payments/api-keys.png b/static/images/integrations/stripe-payments/api-keys.png new file mode 100644 index 0000000000..c8ad6d9075 Binary files /dev/null and b/static/images/integrations/stripe-payments/api-keys.png differ diff --git a/static/images/integrations/stripe-payments/cover.png b/static/images/integrations/stripe-payments/cover.png new file mode 100644 index 0000000000..5385bb8f97 Binary files /dev/null and b/static/images/integrations/stripe-payments/cover.png differ diff --git a/static/images/integrations/stripe-payments/dashboard.png b/static/images/integrations/stripe-payments/dashboard.png new file mode 100644 index 0000000000..f860e37ea8 Binary files /dev/null and b/static/images/integrations/stripe-payments/dashboard.png differ diff --git a/static/images/integrations/stripe-payments/database.png b/static/images/integrations/stripe-payments/database.png new file mode 100644 index 0000000000..3c7d57fc15 Binary files /dev/null and b/static/images/integrations/stripe-payments/database.png differ diff --git a/static/images/integrations/stripe-payments/demo.png b/static/images/integrations/stripe-payments/demo.png new file mode 100644 index 0000000000..e9a5c5c94e Binary files /dev/null and b/static/images/integrations/stripe-payments/demo.png differ diff --git a/static/images/integrations/stripe-payments/template.png b/static/images/integrations/stripe-payments/template.png new file mode 100644 index 0000000000..1f0d695dfa Binary files /dev/null and b/static/images/integrations/stripe-payments/template.png differ diff --git a/static/images/integrations/stripe-payments/variables.png b/static/images/integrations/stripe-payments/variables.png new file mode 100644 index 0000000000..a9dc128624 Binary files /dev/null and b/static/images/integrations/stripe-payments/variables.png differ diff --git a/static/images/integrations/stripe-payments/web-platform.png b/static/images/integrations/stripe-payments/web-platform.png new file mode 100644 index 0000000000..c59c584146 Binary files /dev/null and b/static/images/integrations/stripe-payments/web-platform.png differ diff --git a/static/images/integrations/stripe-payments/webhooks.png b/static/images/integrations/stripe-payments/webhooks.png new file mode 100644 index 0000000000..adb5e4b0b0 Binary files /dev/null and b/static/images/integrations/stripe-payments/webhooks.png differ diff --git a/static/images/integrations/stripe-subscriptions/api-keys.png b/static/images/integrations/stripe-subscriptions/api-keys.png new file mode 100644 index 0000000000..c8ad6d9075 Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/api-keys.png differ diff --git a/static/images/integrations/stripe-subscriptions/cover.png b/static/images/integrations/stripe-subscriptions/cover.png new file mode 100644 index 0000000000..c054907a37 Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/cover.png differ diff --git a/static/images/integrations/stripe-subscriptions/dashboard.png b/static/images/integrations/stripe-subscriptions/dashboard.png new file mode 100644 index 0000000000..f860e37ea8 Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/dashboard.png differ diff --git a/static/images/integrations/stripe-subscriptions/demo.png b/static/images/integrations/stripe-subscriptions/demo.png new file mode 100644 index 0000000000..3b085a9951 Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/demo.png differ diff --git a/static/images/integrations/stripe-subscriptions/template.png b/static/images/integrations/stripe-subscriptions/template.png new file mode 100644 index 0000000000..197606fc02 Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/template.png differ diff --git a/static/images/integrations/stripe-subscriptions/user.png b/static/images/integrations/stripe-subscriptions/user.png new file mode 100644 index 0000000000..58f2b0d73b Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/user.png differ diff --git a/static/images/integrations/stripe-subscriptions/variables.png b/static/images/integrations/stripe-subscriptions/variables.png new file mode 100644 index 0000000000..89e0465776 Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/variables.png differ diff --git a/static/images/integrations/stripe-subscriptions/web-platform.png b/static/images/integrations/stripe-subscriptions/web-platform.png new file mode 100644 index 0000000000..c59c584146 Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/web-platform.png differ diff --git a/static/images/integrations/stripe-subscriptions/webhooks.png b/static/images/integrations/stripe-subscriptions/webhooks.png new file mode 100644 index 0000000000..adb5e4b0b0 Binary files /dev/null and b/static/images/integrations/stripe-subscriptions/webhooks.png differ diff --git a/static/images/integrations/whatsapp-vonage/cover.png b/static/images/integrations/whatsapp-vonage/cover.png new file mode 100644 index 0000000000..337744a488 Binary files /dev/null and b/static/images/integrations/whatsapp-vonage/cover.png differ diff --git a/static/images/integrations/whatsapp-vonage/demo.png b/static/images/integrations/whatsapp-vonage/demo.png new file mode 100644 index 0000000000..df2437d984 Binary files /dev/null and b/static/images/integrations/whatsapp-vonage/demo.png differ diff --git a/static/images/integrations/whatsapp-vonage/settings.png b/static/images/integrations/whatsapp-vonage/settings.png new file mode 100644 index 0000000000..080d6a8ed4 Binary files /dev/null and b/static/images/integrations/whatsapp-vonage/settings.png differ diff --git a/static/images/integrations/whatsapp-vonage/template.png b/static/images/integrations/whatsapp-vonage/template.png new file mode 100644 index 0000000000..2ffc4853a7 Binary files /dev/null and b/static/images/integrations/whatsapp-vonage/template.png differ diff --git a/static/images/integrations/whatsapp-vonage/variables.png b/static/images/integrations/whatsapp-vonage/variables.png new file mode 100644 index 0000000000..d431d7d697 Binary files /dev/null and b/static/images/integrations/whatsapp-vonage/variables.png differ diff --git a/static/images/pages/integration/integration-bg-top-1.png b/static/images/pages/integration/integration-bg-top-1.png new file mode 100644 index 0000000000..24b1ee148b Binary files /dev/null and b/static/images/pages/integration/integration-bg-top-1.png differ diff --git a/static/images/pages/integration/net-desktop.png b/static/images/pages/integration/net-desktop.png new file mode 100644 index 0000000000..e9772a5210 Binary files /dev/null and b/static/images/pages/integration/net-desktop.png differ diff --git a/static/images/pages/integration/net-mobile.png b/static/images/pages/integration/net-mobile.png new file mode 100644 index 0000000000..55ded26ff6 Binary files /dev/null and b/static/images/pages/integration/net-mobile.png differ diff --git a/svelte.config.js b/svelte.config.js index 3dc53fd454..32751b5973 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -19,6 +19,7 @@ const config = { layouts: { default: absolute('./src/markdoc/layouts/Article.svelte'), article: absolute('./src/markdoc/layouts/Article.svelte'), + integration: absolute('./src/markdoc/layouts/Integration.svelte'), tutorial: absolute('./src/markdoc/layouts/Tutorial.svelte'), post: absolute('./src/markdoc/layouts/Post.svelte'), author: absolute('./src/markdoc/layouts/Author.svelte'), @@ -66,4 +67,4 @@ export default config; */ function absolute(path) { return join(dirname(fileURLToPath(import.meta.url)), path); -} \ No newline at end of file +}