Skip to content

Commit

Permalink
redesign and repopulate plugins
Browse files Browse the repository at this point in the history
  • Loading branch information
Rishi Raj Jain committed Aug 18, 2023
1 parent f76a4fb commit c724cb7
Showing 1 changed file with 206 additions and 142 deletions.
348 changes: 206 additions & 142 deletions src/vue-pages/plugins.vue
View file
Original file line number Diff line number Diff line change
@@ -1,175 +1,239 @@
<script setup lang="ts">
import {
BoltIcon,
BuildingStorefrontIcon,
ChatBubbleLeftIcon,
ClockIcon,
CurrencyDollarIcon,
GlobeAltIcon,
GlobeEuropeAfricaIcon,
SpeakerWaveIcon,
SpeakerXMarkIcon,
ViewfinderCircleIcon,
} from '@heroicons/vue/20/solid'
import { ArrowUpRightIcon } from '@heroicons/vue/20/solid'
interface Action {
icon?: any
href: string
title: string
name?: string
author: string
description: string
href: string
icon: any
iconForeground: string
iconBackground: string
iconForeground?: string
iconBackground?: string
}
const actions: Action[] = [
{
title: 'Updater',
description: 'Update Ionic Capacitor apps without App/Play Store review (Code-push / hot-code updates).',
href: 'https://github.com/Cap-go/capacitor-updater',
icon: ClockIcon,
iconForeground: 'text-teal-700',
iconBackground: 'bg-teal-50',
name: '@capgo/cli',
author: 'github.com/riderx',
description: 'A CLI to upload to capgo servers',
href: 'https://github.com/Cap-go/capgo-cli',
title: 'CLI',
},
{
title: 'Crisp',
description: 'Crisp native SDK integration.',
href: 'https://github.com/Cap-go/capacitor-crisp',
icon: ChatBubbleLeftIcon,
iconForeground: 'text-purple-700',
iconBackground: 'bg-purple-50',
name: '@capgo/standard-version',
author: 'Martin Donadieu',
description: 'replacement for `npm version` with automatic CHANGELOG generation',
href: 'https://github.com/Cap-go/standard-version',
title: 'Standard Version',
},
{
title: 'Purchases',
description: 'In-app purchases and subscriptions made easy.',
name: '@capgo/native-market',
author: 'Martin Donadieu',
description: 'A native market plugin for linking to google play or app store.',
href: 'https://github.com/riderx/native-market',
title: 'Native Market',
},
{
name: '@capgo/capacitor-native-biometric',
author: 'Jose Martinez',
description: 'This plugin gives access to the native biometric apis for android and iOS',
href: 'https://github.com/Cap-go/capacitor-native-biometric',
title: 'Native Biometric',
},
{
name: '@capgo/camera-preview',
author: 'Martin Donadieu',
description: 'Camera preview',
href: 'https://github.com/Cap-go/camera-preview',
title: 'Camera Preview',
},
{
name: '@capgo/google-play-scraper',
author: 'Facundo Olano',
description: 'scrapes app data from google play store',
href: 'https://github.com/facundoolano/google-play-scraper',
title: 'Google Play Scraper',
},
{
name: '@capgo/ngx-intl-tel-input-app',
author: 'Unknown',
description: '[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)',
href: 'N/A',
title: 'International Telephone Input',
},
{
name: '@capgo/konsta',
author: 'Vladimir Kharlampidi',
description: 'Mobile UI components made with Tailwind CSS',
href: 'https://github.com/konstaui/konsta',
title: 'Konsta',
},
{
name: '@capgo/capacitor-updater',
author: 'Martin Donadieu',
description: 'Live update for capacitor apps',
href: 'https://github.com/Cap-go/capacitor-updater',
title: 'Updater',
},
{
name: '@capgo/capacitor-purchases',
author: 'Martin Donadieu',
description: 'In-app Subscriptions Made Easy with RevenueCat sdk',
href: 'https://github.com/Cap-go/capacitor-purchases',
icon: CurrencyDollarIcon,
iconForeground: 'text-sky-700',
iconBackground: 'bg-sky-50',
title: 'Purchases',
},
{
title: 'Native geocoder',
description: 'Capacitor plugin for native forward and reverse geocoding.',
name: '@capgo/capacitor-flash',
author: 'Martin Donadieu',
description: 'Switch the Flashlight / Torch of your device.',
href: 'https://github.com/riderx/capacitor-flash',
title: 'Flash',
},
{
name: '@capgo/capacitor-screen-recorder',
author: 'Martin Donadieu',
description: "Record device's screen",
href: 'https://github.com/riderx/capacitor-screen-recorder',
title: 'Screen Recorder',
},
{
name: '@capgo/capacitor-crisp',
author: 'Martin Donadieu',
description: 'Crisp native SDK for capacitor',
href: 'https://github.com/Cap-go/capacitor-crisp',
title: 'Crisp',
},
{
name: '@capgo/nativegeocoder',
author: 'Martin Donadieu',
description: 'Capacitor plugin for native forward and reverse geocoding',
href: 'https://github.com/Cap-go/capacitor-nativegeocoder',
icon: GlobeEuropeAfricaIcon,
iconForeground: 'text-pumpkinOrange-500',
iconBackground: 'bg-pumpkinOrange-50',
},
// {
// title: 'Video recorder',
// description: 'A video recording plugin for Capacitor that allows applications to use the native camera and microphone.',
// href: 'https://github.com/Cap-go/capacitor-video-recorder',
// icon: VideoCameraIcon,
// iconForeground: 'text-rose-700',
// iconBackground: 'bg-rose-50',
// },
// {
// title: 'Rate app',
// description: 'Let users rate your app using native review app dialog for both Android and iOS.',
// href: 'https://github.com/Cap-go/capacitor-rate-app',
// icon: StarIcon,
// iconForeground: 'text-indigo-700',
// iconBackground: 'bg-indigo-50',
// },
{
title: 'Native market',
description: 'Capacitor community plugin for native market for Play Store/App Store.',
href: 'https://github.com/Cap-go/native-market',
icon: BuildingStorefrontIcon,
iconForeground: 'text-emerald-700',
iconBackground: 'bg-emerald-50',
},
{
title: 'In app browser',
description: 'Capacitor plugin in app browser with urlChangeEvent.',
href: 'https://github.com/Cap-go/capacitor-inappbrowser',
icon: GlobeAltIcon,
iconForeground: 'text-amber-700',
iconBackground: 'bg-amber-50',
title: 'Native Geocoder',
},
{
title: 'Mute detection',
description: 'Detect if the mute switch is enabled/disabled on a IOS device.',
href: 'https://github.com/Cap-go/capacitor-mute',
icon: SpeakerXMarkIcon,
iconForeground: 'text-lime-700',
iconBackground: 'bg-lime-50',
name: '@capgo/inappbrowser',
author: 'Martin Donadieu',
description: 'Capacitor plugin in app browser',
href: 'https://github.com/Cap-go/capacitor-inappbrowser',
title: 'In App Browser',
},
{
title: 'Screen recorder',
description: 'Record the screen of the phone with native API.',
href: 'https://github.com/Cap-go/capacitor-screen-recorder',
icon: ViewfinderCircleIcon,
iconForeground: 'text-teal-700',
iconBackground: 'bg-teal-50',
name: '@capgo/capacitor-mute',
author: 'Martin donadieu',
description: 'Detect if the mute switch is enabled/disabled on a device',
href: 'https://github.com/riderx/capacitor-mute',
title: 'Mute',
},
{
title: 'Flash',
description: 'Switch the Flashlight / Torch of your device.',
href: 'https://github.com/Cap-go/capacitor-flash',
icon: BoltIcon,
iconForeground: 'text-amber-700',
iconBackground: 'bg-amber-50',
name: '@capgo/angular-ng-stepper',
author: 'Giorgi Merabishvili',
description: 'Angular stepper',
href: 'https://github.com/gmerabishvili/angular-ng-stepper',
title: 'Stepper',
},
{
title: 'Native audio',
description: 'Play sound with native audio engine.',
name: '@capgo/native-audio',
author: 'Martin Donadieu',
description: 'A native plugin for native audio engine',
href: 'https://github.com/Cap-go/native-audio',
icon: SpeakerWaveIcon,
iconForeground: 'text-fuchsia-700',
iconBackground: 'bg-fuchsia-50',
title: 'Native Audio',
},
{
name: '@capgo/capacitor-shake',
author: 'Martin Donadieu',
description: 'Detect shake gesture in device',
href: 'https://github.com/Cap-go/capacitor-shake',
title: 'Shake',
},
{
name: '@capgo/capacitor-navigation-bar',
author: 'Martin Donadieu',
description: 'Set navigation bar color for android lolipop and higher',
href: 'https://github.com/Cap-go/capacitor-navigation-bar',
title: 'Navigation Bar',
},
{
name: '@capgo/ivs-player',
author: 'Martin Donadieu',
description: 'Ivs player for capacitor app',
href: 'https://github.com/Cap-go/ivs-player',
title: 'IVS Player',
},
{
name: '@capgo/home-indicator',
author: 'Martin Donadieu',
description: 'hide and show home button indicator in Capacitor app',
href: 'https://github.com/Cap-go/home-indicator',
title: 'Indicator',
},
{
name: '@capgo/find-package-manager',
author: 'github.com/riderx',
description: 'Live update for capacitor apps',
href: 'https://github.com/Cap-go/find-package-manager',
title: 'Package Manager',
},
{
name: '@capgo/native-purchases',
author: 'Martin donadieu',
description: 'In-app Subscriptions Made Easy',
href: 'https://github.com/Cap-go/native-purchases',
title: 'Native Purchases',
},
{
name: '@capgo/capacitor-fingerprint',
author: 'Martin Donadieu',
description: 'Capacitor client for Fingerprint PRO. 100% accurate device identification for fraud detection.',
href: 'https://github.com/Cap-go/capacitor-fingerprint',
title: 'Fingerprint',
},
{
name: '@capgo/capacitor-callkit-voip',
author: 'Martin Donadieu',
description: 'Provide PushKit functionality to ionic capacitor',
href: 'https://github.com/Cap-go/capacitor-callkit-voip',
title: 'CallKit VOIP',
},
{
name: '@capgo/logsnag',
author: 'Shayan',
description: 'LogSnag Client',
href: 'https://github.com/LogSnag/logsnag.js',
title: 'LogSang',
},
{
name: '@capgo/walletconnect',
author: 'Martin Donadieu',
description: 'WIP: Capacitor plugin for WalletConnect',
href: 'N/A',
title: 'WalletConnect',
},
]
</script>

<template>
<div>
<div class="relative py-16 lg:py-24 px-4 sm:px-16 mx-auto max-w-7xl">
<div class="text-center">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block text-indigo-600">Powerful </span><span class="block text-white"><span /> App plugins</span>
</h1>
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
Enterprise-grade
<span /> plugins with great documentation, <span />ongoing updates, code snippets and premium support so you can focus on building your <span /> app.
</p>
</div>
</div>

<div class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-gray-200 shadow sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0 w-1/2 mx-auto my-10">
<div
v-for="(action, actionIdx) in actions"
:key="action.title"
class="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
:class="[
actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '',
actionIdx === 1 ? 'sm:rounded-tr-lg' : '',
actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '',
actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '',
]"
>
<div>
<span class="rounded-lg inline-flex p-3 ring-4 ring-white" :class="[action.iconBackground, action.iconForeground]">
<component :is="action.icon" class="h-6 w-6" aria-hidden="true" />
</span>
</div>
<div class="mt-8">
<h3 class="text-lg font-medium">
<a :href="action.href" target="_blank" class="focus:outline-none text-black">
<!-- Extend touch target to entire panel -->
<span class="absolute inset-0" aria-hidden="true" />
{{ action.title }}
</a>
</h3>
<p class="mt-2 text-sm text-gray-500">
{{ action.description }}
</p>
</div>
<span class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400" aria-hidden="true">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path
d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"
/>
</svg>
</span>
<div class="z-10 mt-24 mb-24 flex w-full flex-col md:items-center">
<h1 class="px-10 text-4xl font-bold md:text-center md:text-6xl">Powerful App Plugins</h1>
<h2 class="mt-8 px-10 max-w-full lg:max-w-[75%] text-2xl font-light md:text-center">
Enterprise-grade plugins with great documentation, ongoing updates, code snippets and premium support so you can focus on building your app.
</h2>
<div v-if="actions" class="mt-12 flex w-full flex-col items-start px-10 sm:mt-24 sm:flex-row sm:justify-center lg:max-w-6xl xl:px-0">
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4 sm:mt-0 xl:grid-cols-3">
<a
v-for="item in actions"
:key="item.href"
:href="`/plugins/${item.href.substring(item.href.lastIndexOf('/') + 1)}`"
class="group flex flex-col overflow-hidden rounded border border-gray-600 shadow hover:shadow-white md:max-w-sm"
>
<div class="flex flex-col p-3">
<div class="text-lg font-bold text-white">{{ item.title }}</div>
<p class="mt-3 line-clamp-2 w-full break-all text-sm text-gray-200">{{ item.description }}</p>
</div>
<div class="mt-auto flex flex-row items-center justify-between p-3">
<span class="text-sm font-light text-gray-400">by {{ item.author }}</span>
<component :is="ArrowUpRightIcon" class="h-[18px] w-[18px] fill-gray-500 group-hover:fill-white" />
</div>
</a>
</div>
</div>
</div>
Expand Down

0 comments on commit c724cb7

Please sign in to comment.