style(client):plugin page

amplication · Feb 7, 2024 · 35afa7c · 35afa7c
1 parent 37a604e
commit 35afa7c
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 60 deletions.
diff --git a/components/Plugins/plugin-details.jsx b/components/Plugins/plugin-details.jsx
@@ -2,27 +2,52 @@ import PropTypes from 'prop-types';
 import PluginLogo from './plugin-logo';
 import PluginReadme from './plugin-readme';
 import PluginSpec from './plugin-spec';
+import Button from '../Common/Button';
+import * as analytics from '../../lib/analytics';
+import { useCallback } from 'react';
 
 const PluginDetails = ({ plugin }) => {
+  const handleStartNowClick = useCallback(() => {
+    analytics.event({
+      action: 'startNowClicked',
+      params: {
+        buttonLocation: 'add-plugin-button',
+        pluginId: plugin.pluginId,
+      },
+    });
+  }, []);
+
   return (
-    <>
-      <div className="flex flex-row ">
-        <div>
-          <div className={'flex flex-row justify-start items-center  '}>
-            <PluginLogo plugin={plugin} />
-            <div>
-              <div className="text-base">{plugin.name}</div>
-            </div>
+    <div>
+      <div className="flex flex-row justify-between items-center py-8 mb-8 border-b border-light-blue">
+        <div className={'flex flex-row justify-start items-center '}>
+          <PluginLogo plugin={plugin} size={72} />
+          <div>
+            <div className="text-base text-3xl">{plugin.name}</div>
           </div>
-          <span className="text-xs text-gray py-4">{plugin.description}</span>
-
+        </div>
+        <Button
+          text="Install Plugin"
+          backgroundColor="purpleBright"
+          hoverBackgroundColor="purpleBrightHover"
+          isLink={true}
+          onClick={() => {
+            handleStartNowClick(plugin.pluginId);
+          }}
+          href={`https://app.amplication.com/login?plugin-id=${plugin.pluginId}`}
+          className=" whitespace-nowrap !px-2 !py-2 justify-self-end"
+          delayLinkMs={300} //add 300ms to be able to send the event
+        />
+      </div>
+      <div className="flex flex-col justify-between gap-8 laptop:flex-row">
+        <div className="laptop:max-w-[calc(100%-462px)] flex flex-col gap-4 order-2 laptop:order-1">
           <PluginReadme plugin={plugin} />
         </div>
-        <div className="width-[300px]">
+        <div className="laptop:w-[430px] order-1 laptop:order-2">
           <PluginSpec plugin={plugin} />
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/components/Plugins/plugin-logo.jsx b/components/Plugins/plugin-logo.jsx
@@ -2,13 +2,13 @@ import Image from 'next/image';
 import PropTypes from 'prop-types';
 import helpers from '../../helpers';
 
-const PluginLogo = ({ plugin }) => {
+const PluginLogo = ({ plugin, size = 44 }) => {
   return (
-    <span className="min-w-[60px] max-w-[60px] pr-4 flex flex-row justify-center items-center">
+    <span className=" pr-4 flex flex-row justify-center items-center">
       {plugin?.icon ? (
         <Image
-          width={44}
-          height={44}
+          width={size}
+          height={size}
           src={helpers.getPluginLogoUrl(plugin)}
           alt="plugin logo"
           className="rounded-lg"
@@ -22,6 +22,7 @@ const PluginLogo = ({ plugin }) => {
 
 PluginLogo.propTypes = {
   plugin: PropTypes.object.isRequired,
+  size: PropTypes.number,
 };
 
 export default PluginLogo;
diff --git a/components/Plugins/plugin-readme-h1.jsx b/components/Plugins/plugin-readme-h1.jsx
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+const PluginReadmeH1 = (props) => {
+  return (
+    <h1 className="!text-lg text-secondary-turquoise">{props.children}</h1>
+  );
+};
+
+PluginReadmeH1.propTypes = {
+  level: PropTypes.number,
+  children: PropTypes.arrayOf(PropTypes.any),
+};
+
+PluginReadmeH1.defaultProps = {
+  level: 2,
+  children: [],
+};
+
+export default PluginReadmeH1;
diff --git a/components/Plugins/plugin-readme.jsx b/components/Plugins/plugin-readme.jsx
@@ -5,6 +5,7 @@ import rehypeHighlight from 'rehype-highlight';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import helpers from '../../helpers';
+import PluginReadmeH1 from './plugin-readme-h1';
 
 const PluginReadme = ({ plugin }) => {
   const [readmeContent, setReadmeContent] = useState('');
@@ -26,6 +27,9 @@ const PluginReadme = ({ plugin }) => {
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeRaw, rehypeHighlight]}
         source={plugin.readme}
+        components={{
+          h1: PluginReadmeH1,
+        }}
       >
         {readmeContent}
       </ReactMarkdown>

diff --git a/components/Plugins/plugin-spec.jsx b/components/Plugins/plugin-spec.jsx
@@ -2,33 +2,49 @@ import PropTypes from 'prop-types';
 
 const PluginSpec = ({ plugin }) => {
   return (
-    <div className="flex flex-col  bg-light-blue justify-content-between align-items-center  p-3 gap-3">
-      <div>
-        <div className="text-xs text-gray">npm</div>
-        <div className="text-xs text-white">
-          <a href={`https://www.npmjs.com/package/${plugin.npm}`}>
-            {plugin.npm}
-          </a>
+    <div className=" bg-dark-black-surface rounded-xl border-dark-black-70 border    ">
+      <div className="flex flex-col justify-content-between align-items-center gap-4 m-6 overflow-hidden">
+        <div className="text-2xl font-semibold">Details</div>
+
+        <div>
+          <div className="text-lg font-bold">npm</div>
+          <div className="text-xs text-secondary-turquoise">
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://www.npmjs.com/package/${plugin.npm}`}
+            >
+              {plugin.npm}
+            </a>
+          </div>
         </div>
-      </div>
-      <div>
-        <div className="text-xs text-gray">github</div>
-        <div className="text-xs text-white">
-          <a href={plugin.github}>{plugin.github}</a>
+        <div>
+          <div className="text-lg font-bold">github</div>
+          <div className="text-xs text-secondary-turquoise">
+            <a target="_blank" rel="noreferrer" href={plugin.github}>
+              {plugin.github}
+            </a>
+          </div>
         </div>
-      </div>
-      <div>
-        <div className="text-xs text-gray">Installs</div>
-        <div className="text-xs text-white">Less than 100</div>
-      </div>
-      <div>
-        <div className="text-xs text-gray">Categories</div>
-        <div className="text-xs text-white">Database</div>
-      </div>
-      <div>
-        <div className="text-xs text-gray">Documentation</div>
-        <div className="text-xs text-white">
-          <a href={plugin.website}>{plugin.website}</a>
+        <div>
+          <div className="text-lg font-bold">Installs</div>
+          <div className="text-xs text-secondary-turquoise">
+            {plugin.downloads.toLocaleString()}
+          </div>
+        </div>
+        <div>
+          <div className="text-lg font-bold">Categories</div>
+          <div className="text-xs text-secondary-turquoise">
+            {plugin.categories.join(', ')}
+          </div>
+        </div>
+        <div>
+          <div className="text-lg font-bold">Documentation</div>
+          <div className="text-xs text-secondary-turquoise">
+            <a target="_blank" rel="noreferrer" href={plugin.website}>
+              {plugin.website}
+            </a>
+          </div>
         </div>
       </div>
     </div>

diff --git a/components/Plugins/start-now-plugin.jsx b/components/Plugins/start-now-plugin.jsx
@@ -18,15 +18,14 @@ const StartNowPlugin = ({ plugin }) => {
     });
   }, [plugin.pluginId]);
 
-  const handleContactUsClick = useCallback(() => {
+  const handleBookDemoClick = useCallback(() => {
     analytics.event({
-      action: 'contactUsClicked',
+      action: 'bookDemoClicked',
       params: {
-        buttonLocation: 'pluginPage',
-        plugin: plugin.pluginId,
+        buttonLocation: 'footer',
       },
     });
-  }, [plugin.pluginId]);
+  }, []);
 
   return (
     <>
@@ -48,11 +47,12 @@ const StartNowPlugin = ({ plugin }) => {
             </Link>
 
             <Button
-              text={'Contact us'}
+              text={'Book a demo'}
               className="outline-button !text-sm !h-10 mr-2 w-full max-w-[104px] !px-0 !h-[34px] !font-normal !bg-light-blue hover:!bg-dark-black-70"
               isLink={true}
-              href="/contact-us"
-              onClick={handleContactUsClick}
+              href={process.env.NEXT_PUBLIC_BOOK_MEETING_URL}
+              onClick={handleBookDemoClick}
+              target={'_blank'}
             />
           </div>
         </section>

diff --git a/pages/plugins/[slug].js b/pages/plugins/[slug].js
@@ -3,15 +3,13 @@ import 'highlight.js/styles/github-dark-dimmed.css';
 import { NextSeo } from 'next-seo';
 import Link from 'next/link';
 import PropTypes from 'prop-types';
+import PageSection from '../../components/Common/PageSection';
 import PluginDetails from '../../components/Plugins/plugin-details';
-import Button from '../../components/Common/Button';
-
 import client from '../../services/plugin-api';
-
+import StartNowPlugin from '../../components/Plugins/start-now-plugin';
 import helpers from '../../helpers';
 import { MainLayout } from '../../layouts';
 import errorPage from '../404';
-import StartNowPlugin from '../../components/Plugins/start-now-plugin';
 
 
 
@@ -77,12 +75,14 @@ const Plugin = ({ plugin }) => {
       </div>
 
       <main className="flex flex-col flex-wrap laptop:flex-row justify-between w-full bg-dark-black-100 font-poppins max-medium:overflow-hidden p-container laptop:max-w-container-desktop laptop:m-container-desktop laptop:p-container-desktop py-8 gap-8 desktop:gap-28">
-        <div className="max-medium:w-full  flex-1 order-1 flex flex-col laptop:block overflow-hidden">
+        <div className="max-medium:w-full  flex-1 order-1 flex flex-col laptop:block overflow-hidden mb-12">
           {plugin && <PluginDetails plugin={plugin} />}
         </div>
 
       </main>
-      <StartNowPlugin plugin={plugin} />
+      <PageSection alternate>
+        <StartNowPlugin plugin={plugin} />
+      </PageSection>
     </>
   );
 };
@@ -92,7 +92,7 @@ export const getStaticProps = async (context) => {
     const { data } = await client.query({
       query: gql`
         query {
-          plugins(where: {pluginId: {equals: "${context.params.slug}"}}) {
+          plugins(where: {categories: {}, pluginId: {equals: "${context.params.slug}"}}) {
             id
             pluginId
             name
@@ -102,6 +102,8 @@ export const getStaticProps = async (context) => {
             npm
             github
             website
+            categories
+            downloads
           }
         }
       `,
@@ -117,7 +119,7 @@ export const getStaticProps = async (context) => {
       revalidate: 30,
     };
   } catch (e) {
-    console.error(e);
+    console.error(JSON.stringify(e));
   }
 
   return {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -76,10 +76,7 @@ module.exports = {
       fontSize: {
         tiny: '10px',
         base: ['15px', '1.4rem'],
-        // "3xl": ['1.875rem;', '2.25rem'],
         "5xl": ['3rem;', '1.2'],
-        // h1: ['50px', '1.2'],
-        // h2: ['32px', '1.5'],
       },
       gap: {
         7.5: '1.875rem',