add Premium Sponsors (tauri-apps#243)

Author: lemarier

src/pages/partners.js

@@ -6,7 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 const Avatar = ({ name, tags, image, description, link }) => {
   const context = useDocusaurusContext()
   const { siteConfig = {} } = context
-
+  const isContribute = tags.includes("contribute");
   return (
     <div className="col col--4 margin-bottom--lg">
       <div
@@ -47,14 +47,35 @@ const Avatar = ({ name, tags, image, description, link }) => {
                   </li>
                 ))}
               </ul>
-              <small className="avatar__subtitle">{description}</small>
+              <p 
+                style={{
+                  paddingTop: isContribute ? "1em" : "0",
+                  fontSize: "0.9em",
+                  fontWeight: isContribute ? "bolder" : "lighter",
+                  display: "-webkit-box",
+                  height: "5em",
+                  lineHeight: "1.3em",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  '-webkit-line-clamp': "4",
+                  '-webkit-box-orient': "vertical",
+                }}
+              >
+                {description}
+              </p>
             </div>
           </div>
         </div>
         <div className="card__footer">
           <a href={link} target="_blank">
-            <button className="button button--secondary">
-              {siteConfig.themeConfig.t.global.discover}
+            <button className={isContribute ? 
+                "button button--primary" : 
+                "button button--secondary"
+              }>
+              {isContribute ? 
+                siteConfig.themeConfig.t.global.contribute : 
+                siteConfig.themeConfig.t.global.discover
+              }
             </button>
           </a>
         </div>
@@ -69,6 +90,21 @@ function Partners() {
   const context = useDocusaurusContext()
   const { siteConfig = {} } = context
 
+  const premium_sponsors = [
+    {
+      name: <>1Password</>,
+      link: 'https://1password.com',
+      tags: ['security', 'privacy'],
+      image: imgPath + '1P_logo_256px.png',
+    },
+    {
+      name: <>Your Company</>,
+      link: 'https://opencollective.com/tauri/contribute/sponsor-11057/checkout',
+      tags: ['contribute', 'open collective'],
+      image: imgPath + 'OpenCollective_logo.svg',
+    }
+  ]
+
   const sponsors = [
     {
       name: <>Digital Ocean</>,
@@ -213,6 +249,20 @@ function Partners() {
         <h1 className="text--center margin-bottom--xl">
           {siteConfig.themeConfig.t.pages.partners.partnersLabel}
         </h1>
+        <section>
+          <h2>Premium Sponsors</h2>
+          <div className="row">
+            {premium_sponsors.map((sponsor, index) => {
+              const item = {
+                ...sponsor,
+                description:
+                  siteConfig.themeConfig.t.pages.partners.premium_sponsors[index]
+                    .description,
+              }
+              return <Avatar {...item} key={index} />
+            })}
+          </div>
+        </section>
         <section>
           <h2>Sponsors</h2>
           <div className="row">

static/img/partners/1P_logo_256px.png

@@ -210,6 +210,14 @@
     },
     "partners": {
       "partnersLabel": "Partners",
+      "premium_sponsors": [
+        {
+          "description": "A password manager, digital vault, form filler and secure digital wallet. 1Password remembers all your passwords for you to help keep account information safe."
+        },
+        {
+          "description": "Become a premium sponsor to help the Tauri development."
+        }
+      ],
       "sponsors": [
         {
           "description": "This project's infrastructure is supported in part by Digital Ocean. Click the button here to visit the Digital Ocean website and get $100 credit that you can use within 60 days."
@@ -302,6 +310,7 @@
     "editPage": "Edit this page"
   },
   "global": {
-    "discover": "Discover"
+    "discover": "Discover",
+    "contribute": "Contribute"
   }
 }