From c724cb77af8a1a162338745fe8ecb5b28a0af496 Mon Sep 17 00:00:00 2001
From: Rishi Raj Jain <rishi18304@iiitd.ac.in>
Date: Fri, 18 Aug 2023 14:38:53 +0530
Subject: [PATCH] redesign and repopulate plugins

---
 src/vue-pages/plugins.vue | 348 ++++++++++++++++++++++----------------
 1 file changed, 206 insertions(+), 142 deletions(-)

diff --git a/src/vue-pages/plugins.vue b/src/vue-pages/plugins.vue
index 3307207e..46e7d076 100644
--- a/src/vue-pages/plugins.vue
+++ b/src/vue-pages/plugins.vue
@@ -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>